:root{--bg:#070a0d;--panel:#10151a;--panel2:#151c22;--text:#f4f7f8;--muted:#97a3aa;--green:#73f17c;--green2:#19c96b;--line:rgba(255,255,255,.11);--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - var(--max))/2));background:rgba(7,10,13,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:#041007;border-radius:9px;font-size:20px}.brand strong{display:block;font-size:19px;letter-spacing:-.5px}.brand small{display:block;font-size:8px;letter-spacing:2.4px;color:#aab4ba;margin-top:2px}.site-header nav{display:flex;align-items:center;gap:30px;font-size:14px}.site-header nav a:not(.nav-cta){color:#dce2e5}.nav-cta{border:1px solid var(--green);color:var(--green);padding:11px 17px;border-radius:7px}.menu-button{display:none;background:none;border:0;color:white;font-size:26px}.hero{min-height:100vh;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:120px max(28px,calc((100vw - var(--max))/2)) 70px;overflow:hidden}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent)}.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(100px);opacity:.15}.hero-glow-one{background:var(--green);right:4%;top:18%}.hero-glow-two{background:#1581ff;left:-20%;bottom:-35%}.hero-content{position:relative;z-index:2;max-width:690px}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--green);font-weight:700;margin-bottom:24px}.hero h1{font-size:clamp(54px,7vw,102px);line-height:.94;letter-spacing:-5px;margin:0 0 30px}.hero h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.6)}.hero-copy{font-size:19px;line-height:1.7;color:#aeb8bd;max-width:620px}.hero-actions{display:flex;gap:14px;margin-top:35px}.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 23px;border-radius:7px;border:1px solid transparent;font-weight:700;font-size:14px;cursor:pointer}.button.primary{background:var(--green);color:#061008}.button.secondary{border-color:rgba(255,255,255,.25);color:white}.charger-scene{height:600px;position:relative;display:grid;place-items:center}.charger{width:220px;height:430px;background:linear-gradient(145deg,#e9eef0,#929da3);border-radius:30px 30px 18px 18px;position:relative;z-index:3;box-shadow:-35px 35px 55px rgba(0,0,0,.45),inset -15px 0 20px rgba(0,0,0,.18);transform:perspective(900px) rotateY(-10deg)}.charger-top{height:55px;background:#11181d;border-radius:28px 28px 10px 10px;display:grid;place-items:center}.charger-top span{width:80px;height:5px;border-radius:5px;background:var(--green);box-shadow:0 0 15px var(--green)}.charger-screen{margin:25px auto 0;width:154px;height:155px;background:linear-gradient(150deg,#10171c,#213039);border:5px solid #313b40;border-radius:16px;padding:22px;color:#d7ffe0}.charger-screen small{font-size:8px;letter-spacing:2px;color:#8ea397}.charger-screen strong{display:block;font-size:42px;margin-top:15px}.charger-screen strong span{font-size:13px;margin-left:3px}.screen-line{height:5px;background:linear-gradient(90deg,var(--green) 70%,#304038 70%);border-radius:5px;margin-top:15px}.charger-logo{color:#1b2529;font-size:10px;font-weight:800;text-align:center;margin-top:40px}.charger-ports{display:flex;justify-content:center;gap:30px;margin-top:45px}.charger-ports i{width:25px;height:25px;background:#1b2327;border-radius:50%;border:5px solid #4a555a}.charger-cable{position:absolute;width:80px;height:180px;border:10px solid #141a1d;border-top-color:transparent;border-radius:50%;bottom:-80px}.charger-cable.left{left:-57px;transform:rotate(10deg)}.charger-cable.right{right:-57px;transform:rotate(-10deg)}.platform{position:absolute;bottom:60px;width:430px;height:105px;background:radial-gradient(ellipse,rgba(115,241,124,.26),transparent 65%);border-radius:50%;border-bottom:2px solid rgba(115,241,124,.7);transform:perspective(300px) rotateX(60deg)}.energy-ring{position:absolute;border:1px solid rgba(115,241,124,.2);border-radius:50%}.ring-one{width:450px;height:450px}.ring-two{width:560px;height:560px}.scroll-hint{position:absolute;bottom:30px;left:50%;font-size:9px;letter-spacing:3px;color:#718087}.scroll-hint span{display:block;text-align:center;font-size:18px;margin-top:8px}.stats{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stat{padding:42px 20px;text-align:center;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat strong{font-size:36px;color:var(--green)}.stat span{display:block;color:var(--muted);font-size:12px;margin-top:10px}.section{max-width:var(--max);margin:auto;padding:120px 28px}.section-heading{max-width:700px;margin-bottom:55px}.section-heading h2,.impact h2,.contact h2{font-size:clamp(38px,5vw,66px);line-height:1.05;letter-spacing:-2.5px;margin:0 0 20px}.section-heading>p:last-child,.impact-copy>p,.contact-copy>p{color:var(--muted);font-size:17px;line-height:1.7}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.solution-card{min-height:360px;background:linear-gradient(145deg,var(--panel2),#0d1216);border:1px solid var(--line);border-radius:14px;padding:30px;position:relative;overflow:hidden;transition:.3s}.solution-card:hover{transform:translateY(-7px);border-color:rgba(115,241,124,.5)}.solution-card.large{grid-column:span 2;display:flex;align-items:flex-end;min-height:430px}.card-icon{font-size:34px;color:var(--green);position:absolute;top:30px;right:30px}.card-number{font-size:10px;color:#657279;letter-spacing:2px}.solution-card h3{font-size:28px;letter-spacing:-1px;margin:15px 0}.solution-card p{color:var(--muted);line-height:1.7}.solution-card a,.product-info a{font-size:13px;color:var(--green);font-weight:700}.visual-lines{position:absolute;width:360px;height:360px;border:1px solid rgba(115,241,124,.15);border-radius:50%;right:-120px;top:-80px;box-shadow:0 0 0 40px rgba(115,241,124,.025),0 0 0 80px rgba(115,241,124,.02)}.products{padding-top:60px}.product-tabs{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}.tab{background:#12171b;color:#8e9aa0;border:1px solid var(--line);padding:10px 16px;border-radius:30px;cursor:pointer}.tab.active{background:var(--green);color:#071008}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.product-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:330px;background:#101519;border:1px solid var(--line);border-radius:14px;overflow:hidden}.product-visual{display:grid;place-items:center;position:relative;background:radial-gradient(circle at center,rgba(115,241,124,.14),transparent 65%),#0a0e11}.mini-charger{width:92px;height:210px;border-radius:16px;background:linear-gradient(145deg,#edf0f1,#889398);box-shadow:0 25px 45px #000}.mini-charger:before{content:"";display:block;width:68px;height:70px;background:#142027;border-radius:8px;margin:22px auto}.mini-charger.slim{width:75px;height:220px}.wallbox{width:120px;height:155px;border-radius:45% 45% 25% 25%;display:grid;place-items:center;background:linear-gradient(145deg,#edf1f2,#8c979d);color:#152026;font-size:35px;box-shadow:0 25px 45px #000}.battery-box{width:170px;height:170px;border:2px solid #778288;border-radius:10px;background:linear-gradient(145deg,#1b252a,#0b1013);padding:18px;display:flex;gap:7px;box-shadow:0 25px 45px #000}.battery-box i{flex:1;background:repeating-linear-gradient(to bottom,#26343a 0 12px,#162026 12px 15px);border-radius:3px}.product-info{padding:35px;display:flex;flex-direction:column;justify-content:center}.product-info span{font-size:9px;letter-spacing:2px;color:var(--green)}.product-info h3{font-size:27px;margin:12px 0}.product-info p{font-size:14px;line-height:1.7;color:var(--muted)}.impact{max-width:var(--max);margin:60px auto 0;padding:90px 70px;background:linear-gradient(120deg,#11181d,#0b1114);border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden}.check-list{display:grid;gap:14px;margin-top:28px;color:#cbd3d7;font-size:14px}.check-list span::first-letter{color:var(--green)}.pakistan-map{height:480px;position:relative}.map-shape{width:290px;height:390px;background:linear-gradient(145deg,rgba(115,241,124,.2),rgba(115,241,124,.04));clip-path:polygon(48% 0,62% 12%,57% 27%,75% 33%,76% 47%,95% 62%,80% 74%,63% 75%,53% 100%,37% 85%,23% 90%,15% 70%,0 54%,15% 37%,23% 16%);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--green)}.map-dot{position:absolute;font-size:10px;color:white}.map-dot:before{content:"";display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:7px;box-shadow:0 0 12px var(--green)}.islamabad{top:36%;left:57%}.lahore{top:49%;left:63%}.karachi{bottom:16%;left:43%}.peshawar{top:28%;left:38%}.quetta{top:56%;left:27%}.contact{max-width:1300px}.contact-panel{background:var(--green);color:#071008;border-radius:18px;padding:65px;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.contact .eyebrow{color:#135c2e}.contact-copy>p{color:#235d35}.contact-details{margin-top:35px;font-size:14px}.contact-details a{text-decoration:underline}form{background:#0c1215;color:white;padding:34px;border-radius:12px;display:grid;gap:17px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{font-size:11px;color:#9faab0;display:grid;gap:8px}input,select,textarea{width:100%;background:#141b1f;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:13px;color:white;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--green)}.full{width:100%;border:0}.form-note{color:#77858c;line-height:1.5}footer{max-width:var(--max);margin:auto;padding:45px 28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#77848a;font-size:12px}.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}.hidden-product{display:none}@media(max-width:900px){.site-header nav{display:none;position:absolute;top:78px;left:0;right:0;background:#0b1013;padding:25px;flex-direction:column;align-items:flex-start}.site-header nav.open{display:flex}.menu-button{display:block}.hero{grid-template-columns:1fr;padding-top:150px}.charger-scene{height:520px}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.solution-grid,.product-grid{grid-template-columns:1fr}.solution-card.large{grid-column:auto}.impact{grid-template-columns:1fr;padding:60px 30px}.contact-panel{grid-template-columns:1fr;padding:35px;gap:35px}footer{flex-direction:column;gap:20px;text-align:center}}@media(max-width:600px){.hero h1{letter-spacing:-3px}.hero-actions{flex-direction:column}.charger-scene{transform:scale(.78);margin:-50px 0}.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)}.solution-card.large{min-height:360px}.product-card{grid-template-columns:1fr}.product-visual{min-height:250px}.field-row{grid-template-columns:1fr}.impact{margin:30px 15px}.pakistan-map{transform:scale(.85);margin:-35px}.contact-panel{padding:24px}.contact form{padding:22px}.section{padding:90px 20px}}

/* StarCharge Energy Pakistan brand refresh */
:root{
  --orange:#e96308;
  --orange-dark:#c94e00;
  --orange-soft:#ffefe4;
  --green:var(--orange);
  --green2:var(--orange-dark);
  --bg:#071019;
  --panel:#101b25;
  --panel2:#14222e;
  --muted:#aab5bf;
}
.site-header{height:88px;background:rgba(7,16,25,.88);box-shadow:0 8px 30px rgba(0,0,0,.16)}
.brand{gap:12px}
.brand-logo-wrap{width:48px;height:48px;display:grid;place-items:center;background:#fff;border-radius:14px;padding:7px;box-shadow:0 5px 18px rgba(0,0,0,.18)}
.brand-logo{width:100%;height:100%;object-fit:contain}
.brand-name strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:500;letter-spacing:-.5px;line-height:1;color:#fff}
.brand-name small{display:block;font-size:8px;font-weight:700;letter-spacing:2.2px;color:#d5dde3;margin-top:6px}
.nav-cta{border-color:var(--orange);color:#fff;background:var(--orange);box-shadow:0 8px 24px rgba(233,99,8,.22)}
.nav-cta:hover,.button.primary:hover{background:var(--orange-dark);transform:translateY(-1px)}
.hero{padding-top:145px;background:linear-gradient(115deg,rgba(7,16,25,.98),rgba(9,23,35,.91))}
.hero-glow-one{background:var(--orange);opacity:.2}
.hero-glow-two{background:#2e78a6;opacity:.12}
.hero h1 span{-webkit-text-stroke:1px rgba(255,168,107,.8)}
.button{transition:.25s ease;border-radius:9px}
.button.primary{background:var(--orange);color:#fff;box-shadow:0 12px 30px rgba(233,99,8,.2)}
.button.secondary:hover{border-color:var(--orange);color:#ffd8bd}
.trust-note{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.trust-note span{font-size:11px;color:#d6dde2;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);padding:8px 12px;border-radius:999px}
.charger-top span{background:var(--orange);box-shadow:0 0 15px var(--orange)}
.charger-screen{color:#ffd7bc}
.screen-line{background:linear-gradient(90deg,var(--orange) 70%,#3f352f 70%)}
.charger-logo{display:flex;align-items:center;justify-content:center;gap:5px;color:#1b2529;font-size:9px}
.charger-logo img{width:17px;height:17px;object-fit:contain}
.platform{background:radial-gradient(ellipse,rgba(233,99,8,.3),transparent 65%);border-bottom-color:rgba(233,99,8,.8)}
.energy-ring{border-color:rgba(233,99,8,.22)}
.solution-card:hover{border-color:rgba(233,99,8,.55);box-shadow:0 16px 40px rgba(0,0,0,.18)}
.visual-lines{border-color:rgba(233,99,8,.16);box-shadow:0 0 0 40px rgba(233,99,8,.03),0 0 0 80px rgba(233,99,8,.02)}
.product-visual{background:radial-gradient(circle at center,rgba(233,99,8,.15),transparent 65%),#0a0e11}
.contact-panel{background:linear-gradient(135deg,#fff4ec,#ffd9bf);color:#18212a;box-shadow:0 25px 70px rgba(0,0,0,.15)}
.contact .eyebrow{color:var(--orange-dark)}
.contact-copy>p{color:#5d5048}
.contact h2{color:#18212a}
.map-shape{background:linear-gradient(145deg,rgba(233,99,8,.25),rgba(233,99,8,.05));border-color:var(--orange)}
.map-dot:before{background:var(--orange);box-shadow:0 0 12px var(--orange)}
.footer-brand .brand-logo-wrap{width:42px;height:42px}
@media(max-width:900px){.site-header nav{top:88px}.brand-name strong{font-size:19px}.brand-logo-wrap{width:43px;height:43px}}
@media(max-width:480px){.brand-name small{letter-spacing:1.4px}.brand-name strong{font-size:17px}.site-header{padding-left:16px;padding-right:16px}}

/* =========================================================
   PROFESSIONAL POLISH / V7 / SOCIAL STYLES
   Moved from index.html into this external stylesheet.
   ========================================================= */

:root {
      --pro-radius-lg: 28px;
      --pro-radius-md: 18px;
      --pro-radius-sm: 12px;
      --pro-shadow: 0 24px 70px rgba(0,0,0,.18);
      --pro-shadow-soft: 0 14px 40px rgba(0,0,0,.12);
      --pro-border-light: rgba(255,255,255,.10);
      --pro-border-dark: rgba(0,0,0,.08);
      --pro-ease: cubic-bezier(.2,.75,.25,1);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
    }

    body {
      overflow-x: hidden;
    }

    a, button, input, textarea, select {
      -webkit-tap-highlight-color: transparent;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }

    /* Header polish */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      transition:
        background-color .3s ease,
        box-shadow .3s ease,
        backdrop-filter .3s ease,
        transform .3s ease;
    }

    .site-header.is-scrolled {
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 12px 38px rgba(0,0,0,.10);
    }

    .brand {
      transition: transform .25s var(--pro-ease);
    }

    .brand:hover {
      transform: translateY(-1px);
    }

    .brand-logo-wrap,
    .brand-logo {
      transition: transform .3s var(--pro-ease), filter .3s ease;
    }

    .brand:hover .brand-logo {
      transform: scale(1.04);
      filter: drop-shadow(0 8px 16px rgba(0,0,0,.16));
    }

    #mainNav a {
      position: relative;
      transition: transform .2s ease, opacity .2s ease, filter .2s ease;
    }

    #mainNav a:not(.nav-cta)::after {
      content: "";
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: -7px;
      height: 2px;
      background: currentColor;
      opacity: .65;
      transition: left .25s var(--pro-ease), right .25s var(--pro-ease);
    }

    #mainNav a:not(.nav-cta):hover::after {
      left: 0;
      right: 0;
    }

    #mainNav a:hover {
      transform: translateY(-1px);
    }

    .menu-button {
      transition: transform .2s ease, opacity .2s ease;
    }

    .menu-button:hover {
      transform: scale(1.05);
    }

    /* Hero refinements */
    .hero {
      isolation: isolate;
    }

    .hero-content {
      position: relative;
      z-index: 3;
    }

    .hero h1 {
      text-wrap: balance;
      letter-spacing: -.045em;
    }

    .hero-copy {
      max-width: 720px;
      line-height: 1.75;
    }

    .trust-note span {
      transition: transform .25s var(--pro-ease), opacity .25s ease;
    }

    .trust-note span:hover {
      transform: translateY(-2px);
    }

    .hero-actions {
      flex-wrap: wrap;
    }

    /* Button system without changing brand colors */
    .button,
    .nav-cta,
    .product-info a,
    .solution-card a {
      transition:
        transform .25s var(--pro-ease),
        box-shadow .25s ease,
        filter .25s ease,
        opacity .25s ease;
    }

    .button:hover,
    .nav-cta:hover {
      transform: translateY(-3px);
      box-shadow: var(--pro-shadow-soft);
      filter: brightness(1.06);
    }

    .button:active,
    .nav-cta:active {
      transform: translateY(-1px) scale(.985);
    }

    .product-info a:hover,
    .solution-card a:hover {
      transform: translateX(4px);
      filter: brightness(1.08);
    }

    /* Stats */
    .stats {
      position: relative;
      z-index: 4;
    }

    .stat {
      transition:
        transform .3s var(--pro-ease),
        box-shadow .3s ease,
        border-color .3s ease;
    }

    .stat:hover {
      transform: translateY(-5px);
      box-shadow: var(--pro-shadow-soft);
    }

    /* Section polish */
    .section-heading h2,
    .impact-copy h2,
    .contact-copy h2 {
      text-wrap: balance;
      letter-spacing: -.035em;
    }

    .section-heading p,
    .impact-copy > p,
    .contact-copy > p {
      line-height: 1.75;
    }

    /* Solution cards */
    .solution-card {
      position: relative;
      overflow: hidden;
      transition:
        transform .32s var(--pro-ease),
        box-shadow .32s ease,
        border-color .32s ease,
        filter .32s ease;
    }

    .solution-card::after {
      content: "";
      position: absolute;
      inset: auto -20% -60% 35%;
      height: 160px;
      border-radius: 50%;
      background: currentColor;
      opacity: .035;
      filter: blur(20px);
      pointer-events: none;
      transform: translateY(20px);
      transition: transform .35s var(--pro-ease), opacity .35s ease;
    }

    .solution-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--pro-shadow);
    }

    .solution-card:hover::after {
      opacity: .055;
      transform: translateY(0);
    }

    .card-icon {
      transition: transform .3s var(--pro-ease), filter .3s ease;
    }

    .solution-card:hover .card-icon {
      transform: scale(1.08) rotate(-3deg);
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.15));
    }

    /* Product tabs */
    .product-tabs {
      gap: 10px;
      flex-wrap: wrap;
    }

    .tab {
      cursor: pointer;
      transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
    }

    .tab:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.10);
      filter: brightness(1.04);
    }

    /* Product cards */
    .product-card {
      overflow: hidden;
      transition:
        transform .32s var(--pro-ease),
        box-shadow .32s ease,
        border-color .32s ease;
      transform-origin: center;
    }

    .product-card:hover {
      transform: translateY(-9px);
      box-shadow: var(--pro-shadow);
    }

    .product-visual {
      transition: transform .45s var(--pro-ease), filter .35s ease;
      transform-origin: center;
    }

    .product-card:hover .product-visual {
      transform: scale(1.025);
      filter: brightness(1.04);
    }

    .product-info a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .product-info a::after {
      content: "→";
      transition: transform .2s ease;
    }

    .product-info a:hover::after {
      transform: translateX(3px);
    }

    .product-card.is-hidden {
      display: none;
    }

    /* Impact section */
    .impact {
      position: relative;
      overflow: hidden;
    }

    .check-list span {
      transition: transform .22s ease;
    }

    .check-list span:hover {
      transform: translateX(4px);
    }

    .pakistan-map {
      transition: transform .4s var(--pro-ease), filter .4s ease;
    }

    .pakistan-map:hover {
      transform: translateY(-4px);
      filter: drop-shadow(0 20px 35px rgba(0,0,0,.12));
    }

    .map-dot {
      transition: transform .2s ease, filter .2s ease;
    }

    .map-dot:hover {
      transform: scale(1.05);
      filter: brightness(1.08);
    }

    /* Premium contact section */
    .contact {
      position: relative;
      overflow: hidden;
    }

    .contact-panel {
      position: relative;
      overflow: hidden;
      border-radius: var(--pro-radius-lg);
      box-shadow: var(--pro-shadow);
      isolation: isolate;
    }

    .contact-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border: 1px solid var(--pro-border-light);
      border-radius: inherit;
      z-index: 3;
    }

    .contact-copy,
    #contactForm,
    .form-success {
      position: relative;
      z-index: 2;
    }

    .contact-details {
      display: grid;
      gap: 12px;
      margin-top: 28px;
    }

    .contact-detail-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      transition: transform .22s ease;
    }

    .contact-detail-card:hover {
      transform: translateX(4px);
    }

    .contact-detail-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid currentColor;
      opacity: .9;
    }

    .contact-detail-card p {
      margin: 0;
    }

    #contactForm {
      display: grid;
      gap: 18px;
      padding: clamp(24px, 4vw, 42px);
      border-radius: var(--pro-radius-lg);
      box-shadow: inset 0 0 0 1px var(--pro-border-light);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .field-group {
      display: grid;
      gap: 8px;
    }

    .field-group label {
      font-weight: 600;
      font-size: .92rem;
      letter-spacing: -.01em;
    }

    .field-group input,
    .field-group textarea {
      width: 100%;
      min-height: 54px;
      padding: 14px 16px;
      border-radius: var(--pro-radius-sm);
      border: 1px solid rgba(127,127,127,.28);
      background: rgba(255,255,255,.045);
      color: inherit;
      font: inherit;
      transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease,
        background-color .2s ease;
    }

    .field-group textarea {
      min-height: 150px;
      resize: vertical;
      line-height: 1.6;
    }

    .field-group input::placeholder,
    .field-group textarea::placeholder {
      color: inherit;
      opacity: .47;
    }

    .field-group input:hover,
    .field-group textarea:hover {
      border-color: rgba(127,127,127,.45);
    }

    .field-group input:focus,
    .field-group textarea:focus {
      outline: none;
      border-color: currentColor;
      box-shadow: 0 0 0 4px rgba(127,127,127,.12);
      background: rgba(255,255,255,.065);
      transform: translateY(-1px);
    }

    .form-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .form-note {
      opacity: .65;
      line-height: 1.5;
    }

    .submit-button {
      position: relative;
      overflow: hidden;
      min-height: 54px;
      cursor: pointer;
    }

    .submit-button .button-label,
    .submit-button .button-loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
    }

    .submit-button .button-loading {
      display: none;
    }

    .submit-button.is-loading {
      pointer-events: none;
      opacity: .82;
    }

    .submit-button.is-loading .button-label {
      display: none;
    }

    .submit-button.is-loading .button-loading {
      display: inline-flex;
    }

    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .form-error {
      display: none;
      margin: 0;
      padding: 12px 14px;
      border-radius: var(--pro-radius-sm);
      border: 1px solid currentColor;
      line-height: 1.5;
    }

    .form-error.show {
      display: block;
    }

    .form-success {
      min-height: 420px;
      display: none;
      place-items: center;
      text-align: center;
      padding: clamp(28px, 6vw, 64px);
      border-radius: var(--pro-radius-lg);
      box-shadow: inset 0 0 0 1px var(--pro-border-light);
      animation: successIn .45s var(--pro-ease) both;
    }

    .form-success.show {
      display: grid;
    }

    @keyframes successIn {
      from { opacity: 0; transform: translateY(14px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .success-icon {
      width: 74px;
      height: 74px;
      margin: 0 auto 20px;
      display: grid;
      place-items: center;
      border: 2px solid currentColor;
      border-radius: 50%;
      font-size: 30px;
      box-shadow: 0 12px 34px rgba(0,0,0,.12);
    }

    .form-success h3 {
      margin: 0 0 12px;
      font-size: clamp(1.55rem, 3vw, 2.15rem);
      letter-spacing: -.03em;
    }

    .form-success p {
      margin: 0 auto 22px;
      max-width: 520px;
      line-height: 1.7;
      opacity: .78;
    }

    .success-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* Footer */
    footer {
      position: relative;
    }

    .footer-inner {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(160px, .7fr));
      gap: 36px;
      padding: 20px 0 34px;
    }

    .footer-column h4 {
      margin: 0 0 14px;
      font-size: .9rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: inherit;
      text-decoration: none;
      opacity: .74;
      transition: opacity .2s ease, transform .2s ease;
    }

    .footer-links a:hover {
      opacity: 1;
      transform: translateX(3px);
    }

    .footer-bottom {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      padding: 18px 0 28px;
      border-top: 1px solid rgba(127,127,127,.18);
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      opacity: .72;
      font-size: .9rem;
    }

    /* WhatsApp */
    .whatsapp-button {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 9999;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 12px 17px;
      border-radius: 999px;
      background: #25D366;
      color: #fff;
      text-decoration: none;
      font-family: Inter, sans-serif;
      font-weight: 700;
      box-shadow: 0 14px 36px rgba(0,0,0,.22);
      transition:
        transform .25s var(--pro-ease),
        box-shadow .25s ease,
        filter .25s ease;
    }

    .whatsapp-button:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 18px 44px rgba(0,0,0,.28);
      filter: brightness(1.04);
    }

    .whatsapp-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      font-size: 19px;
    }

    /* Reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity .7s var(--pro-ease),
        transform .7s var(--pro-ease);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Respect accessibility settings */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
      .reveal {
        opacity: 1;
        transform: none;
      }
    }

    @media (max-width: 900px) {
      .footer-inner {
        grid-template-columns: 1fr 1fr;
      }

      .footer-intro {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 760px) {
      #mainNav.open {
        display: flex;
      }

      .contact-panel {
        border-radius: 22px;
      }

      #contactForm,
      .form-success {
        border-radius: 20px;
      }

      .footer-inner {
        grid-template-columns: 1fr;
      }

      .footer-intro {
        grid-column: auto;
      }
    }

    @media (max-width: 520px) {
      .hero-actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      .product-tabs .tab {
        flex: 1 1 calc(50% - 8px);
      }

      .whatsapp-button {
        right: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
      }

      .whatsapp-label {
        display: none;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }
  

    /* =========================================================
       PROFESSIONAL V2 — MOTION + CONTACT FORM REFINEMENT
       Keeps the original StarCharge palette and brand direction.
       ========================================================= */

    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: var(--scroll-progress, 0%);
      background: #f26500;
      z-index: 10000;
      pointer-events: none;
      box-shadow: 0 0 18px rgba(242,101,0,.55);
      transition: width .08s linear;
    }

    /* Hero ambient motion */
    .hero-glow-one {
      animation: heroGlowOne 8s ease-in-out infinite alternate;
    }

    .hero-glow-two {
      animation: heroGlowTwo 10s ease-in-out infinite alternate;
    }

    @keyframes heroGlowOne {
      0%   { transform: translate3d(-2%, -1%, 0) scale(.96); opacity: .78; }
      100% { transform: translate3d(4%, 3%, 0) scale(1.08); opacity: 1; }
    }

    @keyframes heroGlowTwo {
      0%   { transform: translate3d(3%, 2%, 0) scale(1.05); opacity: .72; }
      100% { transform: translate3d(-4%, -2%, 0) scale(.94); opacity: .95; }
    }

    .charger-scene {
      animation: chargerFloat 5.5s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes chargerFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-12px); }
    }

    .energy-ring {
      animation: energyPulse 3.4s ease-in-out infinite;
      transform-origin: center;
    }

    .ring-two {
      animation-delay: -1.7s;
    }

    @keyframes energyPulse {
      0%,100% { transform: scale(.94); opacity: .34; }
      50%     { transform: scale(1.06); opacity: .82; }
    }

    .charger-screen {
      position: relative;
      overflow: hidden;
    }

    .charger-screen::after {
      content: "";
      position: absolute;
      top: -20%;
      left: -60%;
      width: 45%;
      height: 140%;
      transform: skewX(-20deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      animation: screenSweep 4.6s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes screenSweep {
      0%, 30% { left: -60%; }
      70%,100% { left: 130%; }
    }

    .scroll-hint span {
      display: inline-block;
      animation: scrollHint 1.6s ease-in-out infinite;
    }

    @keyframes scrollHint {
      0%,100% { transform: translateY(0); opacity: .65; }
      50%     { transform: translateY(6px); opacity: 1; }
    }

    /* Staggered reveal */
    .solution-grid .solution-card:nth-child(2),
    .product-grid .product-card:nth-child(2),
    .stats .stat:nth-child(2) { transition-delay: .08s; }

    .solution-grid .solution-card:nth-child(3),
    .product-grid .product-card:nth-child(3),
    .stats .stat:nth-child(3) { transition-delay: .16s; }

    .solution-grid .solution-card:nth-child(4),
    .product-grid .product-card:nth-child(4),
    .stats .stat:nth-child(4) { transition-delay: .24s; }

    /* Decorative section entry line */
    .section-heading {
      position: relative;
    }

    .section-heading::after {
      content: "";
      display: block;
      width: 72px;
      height: 2px;
      margin-top: 22px;
      background: #f26500;
      transform-origin: left center;
      transform: scaleX(0);
      opacity: 0;
      transition: transform .8s var(--pro-ease) .15s, opacity .45s ease .15s;
    }

    .section-heading.visible::after {
      transform: scaleX(1);
      opacity: 1;
    }

    /* Premium stat treatment */
    .stat {
      overflow: hidden;
      isolation: isolate;
    }

    .stat::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.08) 50%, transparent 75%);
      transform: translateX(-120%);
      transition: transform .7s ease;
      pointer-events: none;
      z-index: -1;
    }

    .stat:hover::before {
      transform: translateX(120%);
    }

    .stat strong {
      display: inline-block;
      transform-origin: left center;
    }

    .stat.visible strong {
      animation: statPop .7s var(--pro-ease) both;
    }

    @keyframes statPop {
      0%   { transform: scale(.82); opacity: 0; }
      70%  { transform: scale(1.05); }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Richer solution cards */
    .solution-card {
      --mx: 50%;
      --my: 50%;
    }

    .solution-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(242,101,0,.11), transparent 38%);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
      z-index: 0;
    }

    .solution-card:hover::before {
      opacity: 1;
    }

    .solution-card > * {
      position: relative;
      z-index: 1;
    }

    /* Product tilt/depth */
    .product-card {
      transform-style: preserve-3d;
      will-change: transform;
    }

    .product-card .product-visual,
    .product-card .product-info {
      transform: translateZ(0);
      transition: transform .35s var(--pro-ease), filter .35s ease;
    }

    .product-card:hover .product-visual {
      transform: translateZ(18px) scale(1.035);
    }

    .product-card:hover .product-info {
      transform: translateZ(10px);
    }

    .mini-charger,
    .wallbox,
    .battery-box {
      animation: productFloat 4.5s ease-in-out infinite;
    }

    .product-card:nth-child(2) .mini-charger,
    .product-card:nth-child(4) .battery-box {
      animation-delay: -2.1s;
    }

    @keyframes productFloat {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-7px); }
    }

    /* Impact section motion */
    .map-dot::before {
      animation: mapPulse 2.4s ease-out infinite;
    }

    @keyframes mapPulse {
      0%   { box-shadow: 0 0 0 0 rgba(242,101,0,.40); }
      70%  { box-shadow: 0 0 0 12px rgba(242,101,0,0); }
      100% { box-shadow: 0 0 0 0 rgba(242,101,0,0); }
    }

    .pakistan-map.visible .map-dot {
      animation: mapDotIn .65s var(--pro-ease) both;
    }

    .pakistan-map.visible .map-dot:nth-of-type(2) { animation-delay: .08s; }
    .pakistan-map.visible .map-dot:nth-of-type(3) { animation-delay: .16s; }
    .pakistan-map.visible .map-dot:nth-of-type(4) { animation-delay: .24s; }
    .pakistan-map.visible .map-dot:nth-of-type(5) { animation-delay: .32s; }
    .pakistan-map.visible .map-dot:nth-of-type(6) { animation-delay: .40s; }

    @keyframes mapDotIn {
      from { opacity: 0; transform: translateY(8px) scale(.9); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ---------------------------------------------------------
       CONTACT FORM — completely redesigned
       --------------------------------------------------------- */

    .contact-panel {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
      gap: clamp(34px, 5vw, 72px);
      align-items: stretch;
      padding: clamp(34px, 5vw, 68px);
    }

    .contact-copy {
      padding: clamp(6px, 1vw, 12px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contact-form-area {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    #contactForm,
    .form-success {
      width: 100%;
      margin: 0;
      padding: clamp(28px, 3.4vw, 44px);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        #0b1117;
      border: 1px solid rgba(255,255,255,.10);
      box-shadow:
        0 28px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
      overflow: hidden;
    }

    #contactForm::before,
    .form-success::before {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      top: -100px;
      right: -80px;
      border-radius: 50%;
      background: rgba(242,101,0,.15);
      filter: blur(34px);
      pointer-events: none;
    }

    #contactForm::after,
    .form-success::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(120deg, rgba(255,255,255,.025), transparent 40%),
        linear-gradient(300deg, rgba(242,101,0,.035), transparent 35%);
      pointer-events: none;
    }

    #contactForm > *,
    .form-success > * {
      position: relative;
      z-index: 2;
    }

    .field-group {
      gap: 10px;
    }

    .field-group + .field-group {
      margin-top: 2px;
    }

    .field-group label {
      color: rgba(255,255,255,.86);
      font-size: .9rem;
      letter-spacing: .005em;
      margin-left: 2px;
    }

    .field-group input,
    .field-group textarea {
      display: block;
      width: 100%;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
      color: #fff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 0 0 rgba(242,101,0,0);
    }

    .field-group input {
      height: 58px;
      padding: 0 18px;
    }

    .field-group textarea {
      min-height: 170px;
      padding: 17px 18px;
    }

    .field-group input::placeholder,
    .field-group textarea::placeholder {
      color: rgba(255,255,255,.43);
    }

    .field-group input:hover,
    .field-group textarea:hover {
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.06);
    }

    .field-group input:focus,
    .field-group textarea:focus {
      border-color: #f26500;
      box-shadow:
        0 0 0 4px rgba(242,101,0,.11),
        0 12px 30px rgba(0,0,0,.12);
      background: rgba(255,255,255,.072);
      transform: translateY(-1px);
    }

    .submit-button {
      margin-top: 4px;
      height: 58px;
      border-radius: 14px;
      letter-spacing: -.01em;
      box-shadow: 0 14px 32px rgba(242,101,0,.20);
    }

    .submit-button::before {
      content: "";
      position: absolute;
      top: 0;
      left: -120%;
      width: 70%;
      height: 100%;
      transform: skewX(-20deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
      transition: left .65s ease;
    }

    .submit-button:hover::before {
      left: 150%;
    }

    .form-meta {
      padding: 2px 2px 0;
    }

    .form-note {
      color: rgba(255,255,255,.48);
    }

    .form-success {
      min-height: 460px;
      color: #fff;
    }

    .success-icon {
      border-color: #f26500;
      color: #f26500;
      animation: successPulse 2s ease-in-out infinite;
    }

    @keyframes successPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(242,101,0,.20); }
      50%     { box-shadow: 0 0 0 14px rgba(242,101,0,0); }
    }

    /* Contact detail cards */
    .contact-detail-card {
      border-radius: 14px;
      padding: 12px 14px;
      margin-left: -14px;
      transition:
        background-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
    }

    .contact-detail-card:hover {
      background: rgba(255,255,255,.24);
      transform: translateX(5px);
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
    }

    /* Magnetic button helper */
    .button,
    .nav-cta {
      will-change: transform;
    }

    /* Mobile contact layout */
    @media (max-width: 980px) {
      .contact-panel {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .contact-copy {
        padding-right: 0;
      }

      .contact-form-area {
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .contact-panel {
        padding: 22px;
        gap: 26px;
      }

      #contactForm,
      .form-success {
        padding: 24px 18px;
        border-radius: 18px;
      }

      .field-group input {
        height: 54px;
      }

      .field-group textarea {
        min-height: 145px;
      }
    }

  
    /* V3 small visual corrections */
    .success-actions .button.secondary {
      background: #111a22;
      color: #ffffff;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 10px 26px rgba(0,0,0,.14);
    }

    .success-actions .button.secondary:hover {
      background: #17232d;
      color: #ffffff;
      border-color: rgba(242,101,0,.48);
      box-shadow: 0 14px 30px rgba(0,0,0,.20);
    }

    .success-actions .button.primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
    }

    .success-actions .wa-svg {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }

    .whatsapp-icon .wa-svg {
      width: 25px;
      height: 25px;
      display: block;
    }

    .whatsapp-detail-icon .wa-svg {
      width: 19px;
      height: 19px;
      display: block;
    }

    .whatsapp-button {
      background: #25D366;
      color: #fff;
    }

    .whatsapp-button .wa-svg {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
    }

  
    /* V4 — Contact card spacing, rounded corners and motion */
    .contact-form-area {
      padding: 18px;
      border-radius: 32px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 55px rgba(0,0,0,.08);
      transition: transform .35s var(--pro-ease), box-shadow .35s ease;
    }

    .contact-form-area:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 70px rgba(0,0,0,.14);
    }

    #contactForm {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 36px !important;
      gap: 22px !important;
      border-radius: 26px !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      background:
        radial-gradient(circle at 100% 0%, rgba(242,101,0,.10), transparent 34%),
        linear-gradient(145deg, #111a22, #0a1016) !important;
      box-shadow:
        0 24px 55px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.055) !important;
      overflow: hidden;
      transition:
        transform .35s var(--pro-ease),
        box-shadow .35s ease,
        border-color .35s ease;
    }

    #contactForm:hover {
      border-color: rgba(242,101,0,.26) !important;
      box-shadow:
        0 30px 70px rgba(0,0,0,.30),
        0 0 0 1px rgba(242,101,0,.05),
        inset 0 1px 0 rgba(255,255,255,.065) !important;
    }

    #contactForm::before {
      width: 260px;
      height: 260px;
      top: -145px;
      right: -120px;
      background: rgba(242,101,0,.14);
      filter: blur(46px);
      animation: formGlow 5s ease-in-out infinite alternate;
    }

    @keyframes formGlow {
      from { transform: translate3d(0,0,0) scale(.9); opacity: .55; }
      to   { transform: translate3d(-30px,28px,0) scale(1.12); opacity: 1; }
    }

    .field-group {
      position: relative;
      display: grid;
      gap: 9px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .field-group label {
      display: block;
      margin: 0 0 1px 3px !important;
      padding: 0 !important;
      color: rgba(255,255,255,.88) !important;
      font-size: .9rem !important;
      line-height: 1.35;
      font-weight: 600;
      transition: color .22s ease, transform .22s ease;
    }

    .field-group:focus-within label {
      color: #f26500 !important;
      transform: translateX(3px);
    }

    .field-group input,
    .field-group textarea {
      box-sizing: border-box;
      margin: 0 !important;
      border-radius: 15px !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      background: rgba(255,255,255,.045) !important;
      color: #fff !important;
      transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s var(--pro-ease) !important;
    }

    .field-group input {
      height: 60px !important;
      padding: 0 19px !important;
    }

    .field-group textarea {
      min-height: 175px !important;
      padding: 18px 19px !important;
      line-height: 1.55;
    }

    .field-group input:hover,
    .field-group textarea:hover {
      border-color: rgba(242,101,0,.36) !important;
      background: rgba(255,255,255,.065) !important;
      transform: translateY(-1px);
    }

    .field-group input:focus,
    .field-group textarea:focus {
      outline: none !important;
      border-color: #f26500 !important;
      background: rgba(255,255,255,.075) !important;
      transform: translateY(-2px);
      box-shadow:
        0 0 0 4px rgba(242,101,0,.11),
        0 12px 28px rgba(0,0,0,.18) !important;
    }

    .submit-button {
      margin: 2px 0 0 !important;
      border-radius: 15px !important;
      overflow: hidden;
      transform-origin: center;
    }

    .submit-button:hover {
      transform: translateY(-3px) scale(1.008);
      box-shadow:
        0 17px 34px rgba(242,101,0,.28),
        0 0 0 1px rgba(255,255,255,.05);
    }

    .form-meta {
      margin: -4px 0 0 !important;
      padding: 0 3px !important;
    }

    /* Moving top accent inside the form */
    #contactForm .form-accent {
      position: absolute;
      z-index: 4;
      top: 0;
      left: 12%;
      width: 76%;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, #f26500, transparent);
      opacity: .75;
      animation: accentBreath 3.2s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes accentBreath {
      0%,100% { opacity: .35; transform: scaleX(.7); }
      50% { opacity: .95; transform: scaleX(1); }
    }

    @media (max-width: 640px) {
      .contact-form-area {
        padding: 10px;
        border-radius: 23px;
      }

      #contactForm {
        padding: 24px 18px !important;
        border-radius: 19px !important;
        gap: 19px !important;
      }

      .field-group input {
        height: 56px !important;
      }
    }

  
    #home {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }

  
    /* =========================================================
       V7 — Restore original full-width / larger desktop layout
       Keeps all V6 effects, form behavior and brand colors.
       ========================================================= */

    /* Header should span the page like the original design */
    .site-header {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 22px clamp(34px, 4.2vw, 76px) !important;
      min-height: 96px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      flex: 0 0 auto;
      gap: 14px !important;
    }

    .brand-logo-wrap {
      width: 58px !important;
      height: 58px !important;
      min-width: 58px !important;
      border-radius: 14px !important;
    }

    .brand-logo {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain;
    }

    .brand-name strong {
      font-size: 1.78rem !important;
      line-height: 1 !important;
      letter-spacing: -.035em;
    }

    .brand-name small {
      margin-top: 7px !important;
      font-size: .69rem !important;
      letter-spacing: .24em !important;
    }

    #mainNav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(24px, 2.4vw, 42px) !important;
      margin-left: auto;
    }

    #mainNav a {
      font-size: 1.02rem !important;
      font-weight: 600 !important;
      white-space: nowrap;
    }

    #mainNav .nav-cta {
      padding: 15px 25px !important;
      border-radius: 10px !important;
      font-size: 1rem !important;
      box-shadow: 0 12px 30px rgba(242,101,0,.18);
    }

    /* Hero — full viewport width, not a narrow centered container */
    .hero {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      min-height: calc(100vh - 96px) !important;
      padding:
        clamp(68px, 8vh, 108px)
        clamp(34px, 4.2vw, 76px)
        clamp(54px, 7vh, 90px) !important;
      display: grid !important;
      grid-template-columns: minmax(520px, .92fr) minmax(520px, 1.08fr) !important;
      align-items: center !important;
      gap: clamp(30px, 4vw, 76px) !important;
      overflow: hidden;
    }

    .hero-content {
      width: 100% !important;
      max-width: 760px !important;
      margin: 0 !important;
      padding: 0 !important;
      align-self: center;
      justify-self: start;
    }

    .hero .eyebrow {
      font-size: clamp(.9rem, 1vw, 1.02rem) !important;
      letter-spacing: .22em !important;
      margin-bottom: 28px !important;
    }

    .hero h1 {
      font-size: clamp(5rem, 6.8vw, 8.1rem) !important;
      line-height: .91 !important;
      letter-spacing: -.065em !important;
      margin: 0 0 34px !important;
      max-width: 760px;
    }

    .hero h1 span {
      display: inline-block;
    }

    .hero-copy {
      max-width: 720px !important;
      font-size: clamp(1.15rem, 1.45vw, 1.42rem) !important;
      line-height: 1.65 !important;
      margin-bottom: 28px !important;
    }

    .trust-note {
      gap: 14px !important;
      margin: 0 0 30px !important;
    }

    .trust-note span {
      font-size: .98rem !important;
      padding: 12px 14px !important;
    }

    .hero-actions {
      gap: 14px !important;
      margin-top: 10px;
    }

    .hero-actions .button {
      min-height: 58px;
      padding: 0 24px !important;
      font-size: 1.02rem !important;
    }

    /* Charger occupies the right half like the sample/original */
    .charger-scene {
      width: min(100%, 760px) !important;
      min-height: 640px !important;
      justify-self: end !important;
      align-self: center !important;
      margin: 0 !important;
      transform-origin: center;
    }

    .charger {
      transform: scale(1.12);
      transform-origin: center bottom;
    }

    .platform {
      transform: scaleX(1.12);
      transform-origin: center;
    }

    /* Place hero decorative layers across full width */
    .hero-grid,
    .hero-glow,
    .hero::before,
    .hero::after {
      max-width: none !important;
    }

    /* Stats should also use more of the viewport */
    .stats {
      width: calc(100% - clamp(68px, 8.4vw, 152px)) !important;
      max-width: none !important;
      margin: -42px auto 0 !important;
      position: relative;
      z-index: 8;
    }

    .stat {
      padding: 26px clamp(18px, 2vw, 34px) !important;
    }

    .stat strong {
      font-size: clamp(2rem, 2.6vw, 3.15rem) !important;
    }

    .stat span {
      font-size: clamp(.92rem, 1vw, 1.04rem) !important;
    }

    /* Main sections can remain readable but should be wider */
    .section,
    .impact {
      width: 100% !important;
      max-width: none !important;
      padding-left: clamp(34px, 5vw, 92px) !important;
      padding-right: clamp(34px, 5vw, 92px) !important;
    }

    .section-heading {
      max-width: 900px !important;
    }

    .section-heading h2,
    .impact-copy h2,
    .contact-copy h2 {
      font-size: clamp(2.8rem, 4.6vw, 5.4rem) !important;
      line-height: .98 !important;
    }

    /* Contact panel can be wide, while preserving V6/V4 form styling */
    .contact-panel {
      width: min(100%, 1480px) !important;
      max-width: 1480px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Footer should align to the wider desktop rhythm */
    .footer-inner,
    .footer-bottom {
      width: calc(100% - clamp(68px, 8.4vw, 152px)) !important;
      max-width: none !important;
    }

    /* Desktop responsiveness */
    @media (max-width: 1240px) {
      .site-header {
        padding-left: 28px !important;
        padding-right: 28px !important;
      }

      #mainNav {
        gap: 22px !important;
      }

      #mainNav a {
        font-size: .96rem !important;
      }

      .hero {
        grid-template-columns: minmax(460px, 1fr) minmax(430px, .9fr) !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
      }

      .hero h1 {
        font-size: clamp(4.35rem, 6.5vw, 6.6rem) !important;
      }

      .charger-scene {
        min-height: 560px !important;
      }

      .charger {
        transform: scale(1.02);
      }
    }

    @media (max-width: 980px) {
      .site-header {
        min-height: 82px;
        padding: 14px 22px !important;
      }

      .brand-logo-wrap {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
      }

      .brand-name strong {
        font-size: 1.45rem !important;
      }

      .menu-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }

      #mainNav {
        display: none;
      }

      #mainNav.open {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px !important;
        padding: 16px;
        border-radius: 16px;
        background: #0b1117;
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 22px 50px rgba(0,0,0,.28);
      }

      #mainNav.open a {
        padding: 13px 14px;
        font-size: 1rem !important;
      }

      .hero {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        padding: 70px 24px 56px !important;
      }

      .hero-content {
        max-width: 760px !important;
      }

      .hero h1 {
        font-size: clamp(4rem, 12vw, 6.4rem) !important;
      }

      .charger-scene {
        width: min(100%, 650px) !important;
        min-height: 520px !important;
        justify-self: center !important;
      }

      .stats {
        width: calc(100% - 40px) !important;
        margin-top: 0 !important;
      }
    }

    @media (max-width: 620px) {
      .brand-name strong {
        font-size: 1.25rem !important;
      }

      .brand-name small {
        font-size: .57rem !important;
      }

      .hero {
        padding-left: 18px !important;
        padding-right: 18px !important;
      }

      .hero h1 {
        font-size: clamp(3.45rem, 15vw, 5rem) !important;
      }

      .hero-copy {
        font-size: 1.02rem !important;
      }

      .charger-scene {
        min-height: 430px !important;
      }

      .charger {
        transform: scale(.88);
      }
    }
/* =========================================================
   SOCIAL MEDIA ICONS
   Original brand colors → StarCharge orange on hover
   ========================================================= */

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 22px;
  flex-wrap: wrap;
}

.footer-socials a {
  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);

  text-decoration: none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 20px rgba(0,0,0,.10);

  transition:
    transform .3s var(--pro-ease),
    background-color .3s ease,
    border-color .3s ease,
    color .3s ease,
    box-shadow .3s ease;
}


/* Icon size */

.footer-socials a svg {
  width: 21px;
  height: 21px;
  display: block;

  transition:
    transform .3s var(--pro-ease),
    color .3s ease;
}


/* =========================
   ORIGINAL SOCIAL COLORS
   ========================= */

/* Facebook */
.footer-socials a[title="Facebook"] {
  color: #1877F2;
}

/* Instagram */
.footer-socials a[title="Instagram"] {
  color: #E4405F;
}

/* LinkedIn */
.footer-socials a[title="LinkedIn"] {
  color: #0A66C2;
}


/* =========================
   HOVER — STARCHARGE ORANGE
   ========================= */

.footer-socials a:hover {
  color: #ffffff;
  background: #f26500;
  border-color: #f26500;

  transform: translateY(-5px) scale(1.07);

  box-shadow:
    0 14px 30px rgba(242, 101, 0, .30),
    0 0 0 4px rgba(242, 101, 0, .08);
}


/* Icon movement on hover */

.footer-socials a:hover svg {
  transform: scale(1.14);
}


/* Click */

.footer-socials a:active {
  transform: translateY(-2px) scale(.96);
}


/* Keyboard focus */

.footer-socials a:focus-visible {
  outline: 3px solid rgba(242, 101, 0, .30);
  outline-offset: 4px;
}


/* Mobile */

@media (max-width: 760px) {

  .footer-socials {
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .footer-socials a {
    width: 42px;
    height: 42px;
  }

  .footer-socials a svg {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================
   TOP NAVIGATION SOCIAL ICONS
   ========================================== */

.nav-socials {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-left: 2px;
  padding-left: 18px;

  border-left: 1px solid rgba(255,255,255,.12);
}


/* Social buttons */

#mainNav .nav-socials a {
  width: 36px;
  height: 36px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);

  transition:
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}


/* Remove normal menu underline */

#mainNav .nav-socials a::after {
  display: none !important;
}


/* Icon */

.nav-socials svg {
  width: 17px;
  height: 17px;
  display: block;

  transition: transform .25s ease;
}


/* ORIGINAL SOCIAL COLORS */

#mainNav .nav-socials a[title="Facebook"] {
  color: #1877F2;
}

#mainNav .nav-socials a[title="Instagram"] {
  color: #E4405F;
}

#mainNav .nav-socials a[title="LinkedIn"] {
  color: #0A66C2;
}


/* STARCHARGE ORANGE ON HOVER */

#mainNav .nav-socials a:hover {
  color: #ffffff;

  background: #f26500;
  border-color: #f26500;

  transform: translateY(-3px) scale(1.08);

  box-shadow:
    0 8px 20px rgba(242,101,0,.28),
    0 0 0 3px rgba(242,101,0,.07);
}


#mainNav .nav-socials a:hover svg {
  transform: scale(1.12);
}


/* Click animation */

#mainNav .nav-socials a:active {
  transform: translateY(-1px) scale(.95);
}


/* Mobile menu */

@media (max-width: 980px) {

  .nav-socials {
    border-left: none;

    border-top: 1px solid rgba(255,255,255,.10);

    margin: 8px 0;
    padding: 15px 14px 8px;

    justify-content: flex-start;
  }

  #mainNav .nav-socials a {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .nav-socials svg {
    width: 19px;
    height: 19px;
  }
}