:root {
      --bg: #0f1115;
      --bg-deep: #090b0e;
      --panel: #15191f;
      --panel-light: #1a2027;
      --line: rgba(255, 255, 255, 0.09);
      --line-strong: rgba(255, 255, 255, 0.16);
      --text: #f4f7f8;
      --muted: #99a4ad;
      --green: #00e676;
      --cyan: #00e5ff;
      --green-soft: rgba(0, 230, 118, 0.12);
      --cyan-soft: rgba(0, 229, 255, 0.1);
      --max: 1200px;
      --radius: 22px;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    }

    * { box-sizing: border-box; }

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

    body {
      margin: 0;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 76% 8%, rgba(0, 229, 255, 0.055), transparent 26rem),
        radial-gradient(circle at 7% 34%, rgba(0, 230, 118, 0.045), transparent 28rem),
        var(--bg);
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .035;
      background-image:
        linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: linear-gradient(to bottom, black, transparent 80%);
      z-index: -1;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    ::selection { color: #08100c; background: var(--green); }

    .container {
      width: min(calc(100% - 48px), var(--max));
      margin-inline: auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--green);
      font-size: .75rem;
      font-weight: 750;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 24px;
      height: 1px;
      content: "";
      background: currentColor;
      box-shadow: 0 0 9px currentColor;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 48px;
      margin-bottom: 48px;
    }

    .section-head h2 {
      max-width: 680px;
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.35rem);
      line-height: 1.08;
      letter-spacing: -.045em;
    }

    .section-head > p {
      max-width: 430px;
      margin: 0 0 5px;
      color: var(--muted);
    }

    .nav-wrap {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 50;
      border-bottom: 1px solid transparent;
      transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    }

    .nav-wrap.scrolled {
      border-color: var(--line);
      background: rgba(9, 11, 14, .82);
      backdrop-filter: blur(18px);
    }

    nav {
      display: flex;
      min-height: 76px;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: .93rem;
      font-weight: 800;
      letter-spacing: .12em;
      white-space: nowrap;
    }

    .brand-mark {
      position: relative;
      width: 27px;
      height: 32px;
      border: 1px solid rgba(0, 230, 118, .7);
      border-radius: 6px;
      background: linear-gradient(160deg, rgba(0,230,118,.22), rgba(0,229,255,.05));
      box-shadow: inset 0 0 14px rgba(0,230,118,.1), 0 0 14px rgba(0,230,118,.14);
    }

    .brand-mark::before {
      position: absolute;
      top: -4px;
      left: 8px;
      width: 9px;
      height: 3px;
      border-radius: 2px 2px 0 0;
      content: "";
      background: var(--green);
    }

    .brand-mark::after {
      position: absolute;
      inset: 7px 6px;
      content: "";
      background: var(--green);
      clip-path: polygon(54% 0, 100% 0, 66% 40%, 91% 40%, 35% 100%, 48% 57%, 18% 57%);
      filter: drop-shadow(0 0 4px var(--green));
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 34px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .nav-links a {
      position: relative;
      color: #c3cbd1;
      font-size: .86rem;
      font-weight: 550;
      transition: color .25s ease;
    }

    .nav-links a::after {
      position: absolute;
      right: 0;
      bottom: -7px;
      left: 0;
      height: 1px;
      content: "";
      background: var(--green);
      box-shadow: 0 0 7px var(--green);
      transform: scaleX(0);
      transition: transform .25s ease;
    }

    .nav-links a:hover, .nav-links a.active { color: var(--text); }
    .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

    .menu-btn {
      display: none;
      width: 42px;
      height: 42px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: white;
      background: transparent;
      cursor: pointer;
    }

    .menu-btn span {
      display: block;
      width: 100%;
      height: 1px;
      margin: 6px 0;
      background: currentColor;
      transition: transform .25s, opacity .25s;
    }

    .hero {
      position: relative;
      display: grid;
      min-height: 830px;
      padding: 148px 0 84px;
      align-items: center;
      overflow: hidden;
    }

    .hero::after {
      position: absolute;
      top: 14%;
      right: -14rem;
      width: 44rem;
      height: 44rem;
      border: 1px solid rgba(0,229,255,.07);
      border-radius: 50%;
      content: "";
      box-shadow: 0 0 0 6rem rgba(0,229,255,.012), 0 0 0 12rem rgba(0,230,118,.008);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      align-items: center;
      grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
      gap: 54px;
    }

    .hero-copy { position: relative; z-index: 2; }

    .hero h1 {
      max-width: 800px;
      margin: 0;
      font-size: clamp(3rem, 6vw, 5.5rem);
      font-weight: 690;
      line-height: .99;
      letter-spacing: -.063em;
    }

    .hero h1 span {
      color: transparent;
      background: linear-gradient(92deg, var(--green), var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
    }

    .hero-description {
      max-width: 665px;
      margin: 28px 0 36px;
      color: #aab4bc;
      font-size: clamp(1rem, 1.5vw, 1.15rem);
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .btn {
      display: inline-flex;
      min-height: 52px;
      padding: 0 24px;
      border: 1px solid var(--line-strong);
      border-radius: 11px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--text);
      background: rgba(255,255,255,.025);
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .btn:hover { transform: translateY(-3px); border-color: rgba(0,229,255,.5); background: rgba(0,229,255,.05); }
    .btn-primary { color: #06100b; border-color: var(--green); background: var(--green); }
    .btn-primary:hover { border-color: var(--green); background: #19ef87; box-shadow: 0 0 0 5px rgba(0,230,118,.08), 0 12px 34px rgba(0,230,118,.24); }
    .btn svg { width: 16px; transition: transform .25s ease; }
    .btn:hover svg { transform: translateX(3px); }

    .trust-line {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 24px;
      margin-top: 42px;
      color: #818d96;
      font-size: .72rem;
      font-weight: 650;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .trust-line span { display: flex; align-items: center; gap: 8px; }
    .trust-line i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

    .battery-stage {
      position: relative;
      z-index: 1;
      height: 480px;
      perspective: 1000px;
    }

    .battery-shell {
      position: absolute;
      top: 53%;
      left: 50%;
      width: 224px;
      height: 390px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 36px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.13), transparent 20%),
        linear-gradient(155deg, #222931, #0b0e12 70%);
      box-shadow: inset -18px -18px 30px rgba(0,0,0,.42), inset 8px 8px 22px rgba(255,255,255,.045), 0 45px 85px rgba(0,0,0,.55);
      transform: translate(-50%, -50%) rotate(10deg) rotateY(-14deg);
      animation: batteryFloat 5s ease-in-out infinite;
    }

    .battery-shell::before {
      position: absolute;
      top: -15px;
      left: 72px;
      width: 80px;
      height: 20px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 8px 8px 3px 3px;
      content: "";
      background: #171c22;
    }

    .battery-face {
      position: absolute;
      inset: 26px;
      display: flex;
      border: 1px solid rgba(0,230,118,.22);
      border-radius: 22px;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      background: radial-gradient(circle at 50% 45%, rgba(0,230,118,.11), transparent 55%);
    }

    .charge-icon {
      width: 52px;
      height: 78px;
      margin-bottom: 22px;
      background: linear-gradient(var(--green), var(--cyan));
      clip-path: polygon(58% 0, 100% 0, 66% 38%, 94% 38%, 31% 100%, 46% 56%, 14% 56%);
      filter: drop-shadow(0 0 12px rgba(0,230,118,.65));
    }

    .battery-face strong { font-size: .78rem; letter-spacing: .18em; }
    .battery-face small { margin-top: 6px; color: #77838c; font-size: .59rem; letter-spacing: .14em; }

    .energy-ring {
      position: absolute;
      top: 51%;
      left: 50%;
      width: 400px;
      height: 400px;
      border: 1px solid rgba(0,230,118,.22);
      border-radius: 50%;
      transform: translate(-50%, -50%) rotateX(68deg);
      box-shadow: 0 0 42px rgba(0,230,118,.07), inset 0 0 42px rgba(0,230,118,.04);
      animation: ringPulse 3.2s ease-in-out infinite;
    }

    .data-chip {
      position: absolute;
      z-index: 2;
      padding: 12px 15px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: #87939c;
      background: rgba(14,17,21,.82);
      backdrop-filter: blur(10px);
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      box-shadow: 0 14px 30px rgba(0,0,0,.2);
    }

    .data-chip b { display: block; color: var(--text); font-size: .9rem; letter-spacing: .02em; }
    .chip-one { top: 50px; left: -10px; }
    .chip-two { right: -16px; bottom: 62px; }

    .scroll-cue {
      position: absolute;
      bottom: 26px;
      left: 50%;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #65717a;
      font-size: .62rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      transform: translateX(-50%);
    }

    .scroll-cue::before {
      width: 1px;
      height: 34px;
      content: "";
      background: linear-gradient(var(--green), transparent);
      animation: scrollLine 1.7s ease-in-out infinite;
    }

    section { padding: 112px 0; }

    .products { border-top: 1px solid var(--line); background: rgba(8,10,13,.36); }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .product-card {
      position: relative;
      min-height: 470px;
      padding: 30px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

    .product-card::before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      content: "";
      background: linear-gradient(90deg, transparent, rgba(0,230,118,.65), transparent);
      opacity: 0;
      transition: opacity .35s;
    }

    .product-card:hover {
      z-index: 2;
      border-color: rgba(0,230,118,.26);
      transform: translateY(-10px);
      box-shadow: var(--shadow), 0 0 40px rgba(0,230,118,.035);
    }

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

    .card-number { color: #59636b; font-size: .68rem; font-weight: 700; letter-spacing: .15em; }

    .product-visual {
      position: relative;
      display: grid;
      height: 225px;
      place-items: center;
    }

    .pouch-cell {
      position: relative;
      width: 110px;
      height: 154px;
      border: 1px solid #54616b;
      border-radius: 9px;
      background: linear-gradient(145deg, #78838a, #252b31 48%, #4c565d);
      box-shadow: -15px 20px 35px rgba(0,0,0,.42);
      transform: rotate(-8deg) skewY(2deg);
    }

    .pouch-cell::before {
      position: absolute;
      top: -17px;
      left: 20px;
      width: 18px;
      height: 19px;
      content: "";
      background: #b8c3c9;
      box-shadow: 52px 0 #838f97;
    }

    .pouch-cell::after {
      position: absolute;
      top: 67px;
      left: 31px;
      width: 48px;
      height: 18px;
      content: "GOLDWHEEL";
      color: #172019;
      background: var(--green);
      font-size: 7px;
      font-weight: 900;
      line-height: 18px;
      letter-spacing: .12em;
      text-align: center;
      box-shadow: 0 0 14px rgba(0,230,118,.24);
    }

    .uav-pack {
      position: relative;
      width: 165px;
      height: 87px;
      border: 1px solid #343e46;
      border-radius: 12px;
      background: linear-gradient(150deg, #1f252b, #080a0c);
      box-shadow: 0 22px 35px rgba(0,0,0,.45);
      transform: rotate(9deg);
    }

    .uav-pack::before {
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(0,229,255,.28);
      border-radius: 7px;
      content: "22.2V  路  HIGH DISCHARGE";
      color: var(--cyan);
      font-size: 8px;
      font-weight: 750;
      line-height: 68px;
      letter-spacing: .12em;
      text-align: center;
    }

    .uav-pack::after {
      position: absolute;
      top: 22px;
      right: -48px;
      width: 48px;
      height: 4px;
      border-top: 3px solid var(--green);
      border-bottom: 3px solid #e95050;
      content: "";
      transform: rotate(-13deg);
    }

    .smart-pack {
      position: relative;
      width: 148px;
      height: 126px;
      border: 1px solid #343d44;
      border-radius: 13px;
      background: linear-gradient(145deg, #252c32, #0a0c0f);
      box-shadow: 0 24px 38px rgba(0,0,0,.46);
      transform: rotate(-5deg);
    }

    .smart-pack::before {
      position: absolute;
      top: 20px;
      right: 19px;
      left: 19px;
      height: 50px;
      border: 1px solid rgba(0,230,118,.31);
      border-radius: 6px;
      content: "";
      background:
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(0,230,118,.22) 15px 16px),
        repeating-linear-gradient(0deg, transparent 0 15px, rgba(0,230,118,.14) 15px 16px);
    }

    .smart-pack::after {
      position: absolute;
      right: 20px;
      bottom: 22px;
      left: 20px;
      content: "SMART BMS  鈥? ACTIVE";
      color: var(--green);
      font-size: 7px;
      font-weight: 800;
      letter-spacing: .15em;
      text-align: center;
    }

    .product-card h3 {
      margin: 8px 0 11px;
      font-size: 1.35rem;
      line-height: 1.23;
      letter-spacing: -.025em;
    }

    .product-card > p { margin: 0; color: var(--muted); font-size: .9rem; }
    .card-link { display: inline-flex; margin-top: 22px; align-items: center; gap: 9px; color: var(--green); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
    .card-link::after { content: "鈫?; transition: transform .25s; }
    .product-card:hover .card-link::after { transform: translateX(5px); }

    .capabilities { position: relative; overflow: hidden; }

    .capabilities::before {
      position: absolute;
      top: 13%;
      left: -13rem;
      width: 32rem;
      height: 32rem;
      border-radius: 50%;
      content: "";
      background: rgba(0,229,255,.035);
      filter: blur(80px);
      pointer-events: none;
    }

    .cap-layout {
      display: grid;
      align-items: start;
      grid-template-columns: .7fr 1.3fr;
      gap: 80px;
    }

    .cap-intro { position: sticky; top: 120px; }
    .cap-intro h2 { margin: 0 0 24px; font-size: clamp(2.2rem, 4.5vw, 3.65rem); line-height: 1.04; letter-spacing: -.05em; }
    .cap-intro > p { margin: 0 0 32px; color: var(--muted); }

    .stat-row { display: grid; padding-top: 26px; border-top: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .stat-row b { display: block; color: var(--text); font-size: 1.3rem; }
    .stat-row span { color: #6f7b84; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }

    .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

    .cap-card {
      min-height: 285px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
      transition: border-color .3s, transform .3s, background .3s;
    }

    .cap-card:hover { border-color: rgba(0,229,255,.3); background: rgba(0,229,255,.025); transform: translateY(-5px); }

    .line-icon {
      position: relative;
      display: grid;
      width: 54px;
      height: 54px;
      margin-bottom: 42px;
      border: 1px solid rgba(0,230,118,.42);
      border-radius: 14px;
      place-items: center;
      box-shadow: inset 0 0 18px rgba(0,230,118,.05);
    }

    .line-icon::after {
      width: 22px;
      height: 22px;
      border: 1px solid var(--green);
      content: "";
      box-shadow: 0 0 10px rgba(0,230,118,.18);
    }

    .icon-cell::after { border-radius: 5px; box-shadow: 8px -7px 0 -5px var(--panel), 8px -7px 0 -4px var(--green), -8px 7px 0 -5px var(--panel), -8px 7px 0 -4px var(--green); }
    .icon-bms::after { border-radius: 3px; background: radial-gradient(circle, var(--green) 0 2px, transparent 3px); box-shadow: 0 -7px 0 -5px var(--green), 0 7px 0 -5px var(--green), 7px 0 0 -5px var(--green), -7px 0 0 -5px var(--green); }
    .icon-env::after { border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); }
    .icon-globe::after { border-radius: 50%; background: linear-gradient(90deg, transparent 45%, var(--green) 47% 53%, transparent 55%); }

    .cap-card h3 { margin: 0 0 10px; font-size: 1.08rem; letter-spacing: -.01em; }
    .cap-card p { margin: 0; color: var(--muted); font-size: .84rem; }

    .certs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
    .certs span { padding: 3px 6px; border: 1px solid rgba(0,230,118,.21); border-radius: 4px; color: #8fac9d; font-size: .55rem; font-weight: 700; letter-spacing: .05em; }

    .contact { border-top: 1px solid var(--line); background: var(--bg-deep); }

    .contact-shell {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--panel);
      grid-template-columns: .78fr 1.22fr;
      box-shadow: var(--shadow);
    }

    .contact-copy {
      position: relative;
      padding: 54px 48px;
      overflow: hidden;
      background:
        linear-gradient(150deg, rgba(0,230,118,.11), transparent 58%),
        #101419;
    }

    .contact-copy::after {
      position: absolute;
      right: -130px;
      bottom: -130px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(0,230,118,.18);
      border-radius: 50%;
      content: "";
      box-shadow: 0 0 0 45px rgba(0,230,118,.015), 0 0 0 90px rgba(0,230,118,.01);
    }

    .contact-copy h2 { margin: 0 0 22px; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.05em; }
    .contact-copy > p { color: var(--muted); }

    .contact-details { display: grid; margin-top: 52px; gap: 22px; }
    .contact-detail { display: grid; grid-template-columns: 38px 1fr; gap: 14px; }
    .contact-detail i { display: grid; width: 36px; height: 36px; border: 1px solid rgba(0,230,118,.25); border-radius: 50%; place-items: center; color: var(--green); font-size: .75rem; font-style: normal; }
    .contact-detail small { display: block; color: #66727b; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
    .contact-detail span { font-size: .82rem; }

    .inquiry-form { display: grid; padding: 54px 48px; grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field-full { grid-column: 1 / -1; }
    label { color: #c6cdd2; font-size: .72rem; font-weight: 650; letter-spacing: .04em; }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: none;
      color: var(--text);
      background: rgba(5,7,9,.45);
      transition: border-color .25s, box-shadow .25s;
    }

    input, select { height: 50px; padding: 0 15px; }
    textarea { min-height: 126px; padding: 14px 15px; resize: vertical; }
    input::placeholder, textarea::placeholder { color: #59636b; }
    select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #819099 50%), linear-gradient(135deg, #819099 50%, transparent 50%); background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
    select option { color: white; background: #15191f; }
    input:focus, select:focus, textarea:focus { border-color: rgba(0,230,118,.55); box-shadow: 0 0 0 4px rgba(0,230,118,.065); }

    .form-bottom { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; }
    .form-note { max-width: 180px; margin: 0; color: #69747d; font-size: .64rem; line-height: 1.5; }
    .form-submit { min-width: 282px; }

    footer { padding: 34px 0; border-top: 1px solid var(--line); background: var(--bg-deep); }
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #68737b; font-size: .68rem; }
    .footer-legal { display: grid; gap: 3px; }
    .footer-legal span { display: block; }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a:hover { color: var(--green); }

    .toast {
      position: fixed;
      right: 28px;
      bottom: 28px;
      z-index: 100;
      display: flex;
      max-width: 430px;
      padding: 18px 22px;
      border: 1px solid rgba(0,230,118,.5);
      border-radius: 14px;
      align-items: flex-start;
      gap: 13px;
      color: #dfffee;
      background: rgba(8,27,18,.95);
      box-shadow: 0 18px 50px rgba(0,0,0,.48), 0 0 32px rgba(0,230,118,.1);
      backdrop-filter: blur(14px);
      opacity: 0;
      pointer-events: none;
      transform: translateY(18px);
      transition: opacity .35s, transform .35s;
    }

    .toast.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .toast-icon { display: grid; flex: 0 0 26px; height: 26px; border-radius: 50%; place-items: center; color: #082113; background: var(--green); font-size: .8rem; font-weight: 900; }
    .toast strong { display: block; margin-bottom: 2px; font-size: .86rem; }
    .toast span { color: #a8c6b6; font-size: .75rem; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    @keyframes batteryFloat {
      0%, 100% { transform: translate(-50%, -50%) rotate(10deg) rotateY(-14deg) translateY(0); }
      50% { transform: translate(-50%, -50%) rotate(8deg) rotateY(-10deg) translateY(-13px); }
    }
    @keyframes ringPulse { 0%, 100% { opacity: .6; scale: .96; } 50% { opacity: 1; scale: 1.03; } }
    @keyframes scrollLine { 0%, 100% { opacity: .3; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }

    @media (max-width: 980px) {
      .hero { min-height: auto; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 760px; }
      .battery-stage { width: min(100%, 520px); height: 420px; margin: 0 auto; }
      .product-grid { grid-template-columns: 1fr 1fr; }
      .product-card:last-child { grid-column: 1 / -1; }
      .cap-layout { grid-template-columns: 1fr; gap: 50px; }
      .cap-intro { position: static; max-width: 700px; }
      .contact-shell { grid-template-columns: 1fr; }
      .contact-copy { padding-bottom: 46px; }
      .contact-details { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
    }

    @media (max-width: 740px) {
      .container { width: min(calc(100% - 32px), var(--max)); }
      section { padding: 82px 0; }
      .menu-btn { display: block; }
      .menu-btn.open span:first-child { transform: translateY(7px) rotate(45deg); }
      .menu-btn.open span:nth-child(2) { opacity: 0; }
      .menu-btn.open span:last-child { transform: translateY(-7px) rotate(-45deg); }
      .nav-links {
        position: absolute;
        top: 76px;
        right: 16px;
        left: 16px;
        display: grid;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 14px;
        gap: 0;
        background: rgba(12,15,18,.97);
        box-shadow: var(--shadow);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .25s, transform .25s;
      }
      .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
      .nav-links a { display: block; padding: 13px 8px; }
      .nav-links a::after { display: none; }
      .hero { padding-top: 126px; }
      .hero-grid { gap: 30px; }
      .hero h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
      .battery-stage { height: 380px; transform: scale(.88); transform-origin: center top; }
      .scroll-cue { display: none; }
      .section-head { display: block; }
      .section-head > p { margin-top: 18px; }
      .product-grid, .cap-grid { grid-template-columns: 1fr; }
      .product-card:last-child { grid-column: auto; }
      .product-card { min-height: 440px; }
      .contact-copy, .inquiry-form { padding: 38px 24px; }
      .inquiry-form { grid-template-columns: 1fr; }
      .field, .field-full, .form-bottom { grid-column: 1; }
      .form-bottom { align-items: stretch; flex-direction: column-reverse; }
      .form-note { max-width: none; }
      .form-submit { width: 100%; min-width: 0; }
      .contact-details { grid-template-columns: 1fr; }
      .footer-row { align-items: flex-start; flex-direction: column; }
      .toast { right: 16px; bottom: 16px; left: 16px; }
    }

    @media (max-width: 430px) {
      .brand { font-size: .8rem; }
      .hero { padding-bottom: 38px; }
      .hero-description { margin-top: 22px; }
      .cta-row { display: grid; }
      .battery-stage { width: 114%; margin-left: -7%; }
      .stat-row { grid-template-columns: 1fr; }
      .stat-row > div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    }

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