/* =========================
       SUNIVAL WEBSITE STYLES
       For quick color changes, edit the variables below.
       ========================= */
    :root {
      --ink: #06101d;
      --ink-2: #0a1d31;
      --ink-3: #102b47;
      --paper: #f5f6f8;
      --paper-2: #ffffff;
      --muted: #6c7888;
      --muted-light: #a9b5c4;
      --line: rgba(9, 28, 48, .12);
      --line-dark: rgba(255, 255, 255, .12);
      --accent: #ff9d0a;
      --accent-2: #ffc154;
      --lime: #c8e500;
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --max: 1280px;
      --header-h: 76px;
      --shadow: 0 28px 90px rgba(2, 10, 20, .18);
      --ease: cubic-bezier(.2, .8, .2, 1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body {
      margin: 0;
      color: var(--paper);
      background: var(--ink);
      font-family: "Segoe UI Variable", "Segoe UI", Tahoma, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: clip;
    }
    body.modal-open { overflow: hidden; }
    ::selection { background: rgba(255, 157, 10, .28); color: inherit; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button { color: inherit; }
    img { display: block; max-width: 100%; }
    [hidden] { display: none !important; }

    .noise {
      position: fixed;
      inset: 0;
      z-index: 999;
      pointer-events: none;
      opacity: .18;
      background-image: url("../images/noise.png");
      background-size: 128px 128px;
      mix-blend-mode: soft-light;
    }
    .scroll-progress {
      position: fixed;
      inset: 0 0 auto;
      height: 3px;
      z-index: 1200;
      transform-origin: 0 50%;
      transform: scaleX(var(--page-progress, 0));
      background: linear-gradient(90deg, var(--accent), #ffd27b);
      box-shadow: 0 0 20px rgba(255, 157, 10, .5);
    }
    .container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .section-kicker::before {
      content: "";
      width: 30px;
      height: 2px;
      background: currentColor;
      border-radius: 99px;
      box-shadow: 0 0 14px currentColor;
    }
    .section-title {
      margin: 18px 0 0;
      font-size: clamp(36px, 6.2vw, 86px);
      line-height: 1.04;
      letter-spacing: -.04em;
      font-weight: 720;
    }
    .section-lead {
      max-width: 720px;
      margin: 24px 0 0;
      color: var(--muted-light);
      font-size: clamp(17px, 1.7vw, 22px);
      line-height: 1.85;
    }
    .latin { direction: ltr; unicode-bidi: isolate; display: inline-block; }
    .muted { color: var(--muted); }
    .accent { color: var(--accent); }

    /* Header */
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      height: var(--header-h);
      transition: background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      background: rgba(4, 10, 18, .46);
      backdrop-filter: blur(20px) saturate(125%);
    }
    .site-header.scrolled {
      background: rgba(4, 10, 18, .92);
      backdrop-filter: blur(24px) saturate(130%);
      border-color: rgba(255, 255, 255, .1);
      box-shadow: 0 12px 40px rgba(0,0,0,.12);
    }
    .header-shell {
      width: min(var(--max), calc(100% - 40px));
      height: 100%;
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      direction: ltr;
      min-width: 182px;
      flex: 0 0 auto;
      line-height: 0;
    }
    .brand-logo {
      width: 168px;
      height: auto;
      max-width: none;
      object-fit: contain;
      transform: translateY(1px);
      filter: brightness(1.8) saturate(1.08) drop-shadow(0 5px 14px rgba(0, 0, 0, .24));
    }
    .brand-symbol {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 13px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    }
    .brand-symbol::before {
      content: "";
      position: absolute;
      width: 34px;
      height: 18px;
      border: 2px solid var(--accent);
      border-color: var(--accent) transparent transparent;
      border-radius: 50%;
      left: 3px;
      top: 7px;
      transform: rotate(-5deg);
    }
    .brand-symbol::after {
      content: "S";
      position: absolute;
      inset: 8px 0 0;
      display: grid;
      place-items: center;
      font-weight: 700;
      color: #fff;
      font-size: 18px;
    }
    .brand-word {
      display: block;
      font-size: 22px;
      font-weight: 630;
      letter-spacing: .14em;
      line-height: 1;
      text-transform: lowercase;
    }
    .brand-sub {
      display: block;
      margin-top: 5px;
      font-size: 8px;
      letter-spacing: .18em;
      color: rgba(255,255,255,.55);
      text-transform: uppercase;
    }
    .desktop-nav { display: flex; align-items: center; gap: 28px; }
    .nav-link {
      position: relative;
      color: rgba(255,255,255,.68);
      font-size: 13px;
      font-weight: 650;
      padding-block: 12px;
      transition: color .25s ease;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      inset: auto 0 4px;
      height: 2px;
      background: var(--accent);
      border-radius: 9px;
      transform: scaleX(0);
      transition: transform .35s var(--ease);
    }
    .nav-link:hover, .nav-link.active { color: #fff; }
    .nav-link.active::after { transform: scaleX(1); }
    .header-actions { display: flex; align-items: center; gap: 10px; }
    .btn {
      border: 0;
      border-radius: 14px;
      min-height: 48px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      font-weight: 720;
      font-size: 14px;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease, border-color .25s ease;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn-primary {
      color: #15100a;
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      box-shadow: 0 12px 34px rgba(255, 157, 10, .24), inset 0 1px 0 rgba(255,255,255,.45);
    }
    .btn-primary:hover { box-shadow: 0 18px 44px rgba(255, 157, 10, .34); }
    .btn-ghost {
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
    }
    .btn-ghost:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
    .btn-dark {
      color: #fff;
      background: var(--ink);
      box-shadow: 0 14px 34px rgba(4,13,24,.18);
    }
    .icon-btn {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      border-radius: 13px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
    .burger { width: 20px; height: 14px; position: relative; }
    .burger::before, .burger::after { content:""; position:absolute; left:0; width:100%; height:2px; background:#fff; border-radius:10px; transition:.3s var(--ease); }
    .burger::before { top:1px; box-shadow:0 5px 0 #fff; }
    .burger::after { bottom:1px; }
    .mobile-panel {
      position: fixed;
      z-index: 990;
      inset: var(--header-h) 14px auto;
      padding: 16px;
      background: rgba(5, 12, 22, .94);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px;
      backdrop-filter: blur(24px);
      box-shadow: 0 30px 80px rgba(0,0,0,.34);
      transform: translateY(-18px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: .3s var(--ease);
    }
    .mobile-panel.open { opacity:1; transform:none; pointer-events:auto; }
    .mobile-panel a { display:block; padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.84); }
    .mobile-panel a:last-child { border-bottom:0; }

    /* Hero */
    .hero {
      position: relative;
      min-height: 100svh;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 22% 38%, rgba(24, 76, 117, .32), transparent 34%),
        radial-gradient(circle at 80% 10%, rgba(255, 157, 10, .08), transparent 28%),
        linear-gradient(180deg, #03070d 0%, #071423 62%, #091725 100%);
    }
    .hero::before {
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.035) 45.2%, transparent 45.7%),
        radial-gradient(circle at 50% 105%, rgba(32, 103, 155, .34), transparent 38%);
      z-index:-2;
    }
    .hero::after {
      content:"";
      position:absolute;
      inset:auto -10% -18% -10%;
      height:42%;
      background:
        linear-gradient(180deg, transparent, rgba(2,5,9,.85)),
        radial-gradient(ellipse at center, rgba(42, 97, 139, .27), transparent 64%);
      filter: blur(10px);
      z-index:-1;
    }
    .starfield {
      position:absolute;
      inset:0;
      opacity:.52;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(174,217,255,.6) 0 1px, transparent 1.3px);
      background-size: 103px 103px, 173px 173px;
      background-position: 14px 31px, 83px 9px;
      mask-image: linear-gradient(180deg,#000,transparent 86%);
    }
    .hero-grid {
      position:relative;
      z-index:2;
      min-height:100svh;
      width:min(var(--max), calc(100% - 48px));
      margin-inline:auto;
      padding: calc(var(--header-h) + 64px) 0 104px;
      display:grid;
      grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
      align-items:center;
      gap:40px;
    }
    .hero-copy { max-width: 690px; position:relative; z-index:3; }
    .hero-eyebrow {
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:9px 12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      border-radius:999px;
      color:rgba(255,255,255,.74);
      font-size:12px;
      font-weight:700;
      backdrop-filter:blur(14px);
    }
    .hero-eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px rgba(200,229,0,.75); }
    .hero h1 {
      margin:24px 0 0;
      font-size:clamp(50px, 7.6vw, 106px);
      line-height:.96;
      font-weight:760;
      letter-spacing:-.055em;
    }
    .hero h1 .gradient-word {
      color:transparent;
      background:linear-gradient(110deg,#fff 10%,#d7e8f6 55%,#93b5d2 100%);
      -webkit-background-clip:text;
      background-clip:text;
    }
    .hero h1 .accent-line { display:block; color:var(--accent); margin-top:10px; }
    .hero-sub {
      max-width:600px;
      margin:28px 0 0;
      color:rgba(232,241,248,.7);
      font-size:clamp(17px, 1.7vw, 22px);
      line-height:1.85;
    }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
    .hero-meta {
      display:flex;
      flex-wrap:wrap;
      gap:20px;
      margin-top:34px;
      color:rgba(255,255,255,.5);
      font-size:12px;
    }
    .hero-meta span { display:flex; gap:8px; align-items:center; }
    .hero-meta i { width:5px; height:5px; border-radius:50%; background:var(--accent); }
    .hero-stage {
      min-height:620px;
      position:relative;
      display:grid;
      place-items:center;
      perspective:1600px;
    }
    .hero-halo {
      position:absolute;
      width:min(570px, 86%);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle at 45% 40%, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle, rgba(74,151,207,.2) 0 37%, rgba(35,93,136,.08) 38% 51%, transparent 52%);
      filter:blur(1px);
      transform:scale(calc(1 + var(--hero-scroll, 0) * .18));
      transition:transform .08s linear;
    }
    .hero-halo::before, .hero-halo::after {
      content:"";
      position:absolute;
      inset:8%;
      border:1px solid rgba(255,255,255,.12);
      border-radius:50%;
      animation:spin 22s linear infinite;
    }
    .hero-halo::after { inset:20%; border-style:dashed; animation-direction:reverse; animation-duration:28s; }
    .product-shadow {
      position:absolute;
      width:65%;
      height:12%;
      bottom:9%;
      background:radial-gradient(ellipse,rgba(0,0,0,.64),transparent 67%);
      filter:blur(14px);
      transform:translateY(calc(var(--hero-scroll, 0) * 22px));
    }
    .hero-product-wrap {
      width:min(520px, 86%);
      position:relative;
      z-index:3;
      transform-style:preserve-3d;
      transform:
        translate3d(calc(var(--pointer-x, 0) * 13px), calc(var(--pointer-y, 0) * 10px + var(--hero-scroll, 0) * -28px), 0)
        rotateX(calc(var(--pointer-y, 0) * -3deg))
        rotateY(calc(var(--pointer-x, 0) * 4deg))
        scale(calc(1 + var(--hero-scroll, 0) * .04));
      transition:transform .18s ease-out;
      animation:heroFloat 5.8s ease-in-out infinite;
      filter:drop-shadow(0 44px 52px rgba(0,0,0,.42));
    }
    .product-img { width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
    .chip {
      position:absolute;
      z-index:4;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:150px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(6,19,32,.64);
      backdrop-filter:blur(18px);
      border-radius:16px;
      box-shadow:0 18px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .chip strong { display:block; font-size:15px; direction:ltr; text-align:left; }
    .chip small { display:block; margin-top:2px; font-size:10px; color:rgba(255,255,255,.52); }
    .chip-icon {
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      border-radius:10px;
      color:#12100b;
      background:linear-gradient(135deg,var(--accent-2),var(--accent));
      font-weight:900;
    }
    .chip-a { top:20%; right:-1%; animation:chipFloat 4.5s ease-in-out infinite; }
    .chip-b { bottom:18%; left:0; animation:chipFloat 5.1s ease-in-out infinite reverse; }
    .scroll-cue {
      position:absolute;
      z-index:4;
      bottom:24px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      color:rgba(255,255,255,.38);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .mouse { width:24px; height:38px; border:1px solid rgba(255,255,255,.32); border-radius:15px; position:relative; }
    .mouse::before { content:""; position:absolute; width:3px; height:7px; border-radius:5px; background:var(--accent); left:50%; top:7px; transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite; }

    /* Metrics */
    .metrics {
      position:relative;
      z-index:5;
      background:#081420;
      border-block:1px solid rgba(255,255,255,.08);
    }
    .metrics-grid {
      display:grid;
      grid-template-columns:repeat(6, minmax(0,1fr));
      gap:0;
    }
    .metric {
      min-height:170px;
      padding:28px 18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      border-left:1px solid rgba(255,255,255,.08);
      position:relative;
      overflow:hidden;
    }
    .metric:first-child { border-left:0; }
    .metric::after { content:""; position:absolute; inset:auto 18% -50% 18%; height:60%; border-radius:50%; background:var(--accent); filter:blur(48px); opacity:0; transition:.4s var(--ease); }
    .metric:hover::after { opacity:.15; }
    .metric-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--accent); margin-bottom:15px; }
    .metric-icon svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .metric-value { position:relative; z-index:1; direction:ltr; font-size:clamp(22px,2.1vw,34px); font-weight:760; letter-spacing:-.03em; }
    .metric-label { position:relative; z-index:1; margin-top:8px; color:rgba(255,255,255,.48); font-size:12px; line-height:1.55; }

    /* Sticky story */
    .story {
      position:relative;
      height:330vh;
      color:var(--ink);
      background:linear-gradient(180deg,#f7f8fa,#eef1f5);
    }
    .story-sticky {
      position:sticky;
      top:0;
      height:100svh;
      min-height:720px;
      overflow:hidden;
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
      align-items:center;
      gap:50px;
      padding:100px max(24px, calc((100vw - var(--max)) / 2));
    }
    .story-bg-word {
      position:absolute;
      inset:auto auto 1% 3%;
      font-size:clamp(120px,20vw,340px);
      line-height:.8;
      color:rgba(6,16,29,.035);
      font-weight:800;
      letter-spacing:-.08em;
      direction:ltr;
      pointer-events:none;
    }
    .story-visual {
      position:relative;
      height:min(72vh,700px);
      display:grid;
      place-items:center;
    }
    .story-ring {
      position:absolute;
      width:min(610px,90%);
      aspect-ratio:1;
      border-radius:50%;
      border:1px solid rgba(8,30,52,.12);
      transform:scale(calc(.82 + var(--story-progress, 0) * .24)) rotate(calc(var(--story-progress, 0) * 65deg));
    }
    .story-ring::before, .story-ring::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(8,30,52,.13); inset:12%; }
    .story-ring::after { inset:27%; border-style:solid; }
    .story-product {
      width:min(460px,72%);
      position:relative;
      z-index:2;
      filter:drop-shadow(0 44px 46px rgba(8,29,47,.2));
      transform:
        translate3d(calc((var(--story-progress, 0) - .5) * -35px), calc((var(--story-progress, 0) - .5) * 44px), 0)
        rotateY(calc(-10deg + var(--story-progress, 0) * 20deg))
        rotateZ(calc(-2deg + var(--story-progress, 0) * 4deg))
        scale(calc(.92 + var(--story-progress, 0) * .1));
      transform-style:preserve-3d;
      transition:transform .06s linear;
    }
    .story-orb {
      position:absolute;
      width:150px;
      aspect-ratio:1;
      border-radius:50%;
      filter:blur(4px);
      opacity:.7;
    }
    .story-orb.one { right:8%; top:18%; background:radial-gradient(circle at 30% 30%,rgba(255,194,86,.75),rgba(255,157,10,.08) 66%,transparent); transform:translateY(calc(var(--story-progress,0) * -90px)); }
    .story-orb.two { left:2%; bottom:14%; width:200px; background:radial-gradient(circle at 30% 30%,rgba(35,104,151,.36),rgba(35,104,151,.03) 68%,transparent); transform:translateY(calc(var(--story-progress,0) * 80px)); }
    .story-copy { position:relative; min-height:500px; }
    .story-progress-dots {
      position:absolute;
      right:-48px;
      top:50%;
      transform:translateY(-50%);
      display:grid;
      gap:13px;
    }
    .story-progress-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(7,26,45,.18); cursor:pointer; transition:.3s var(--ease); }
    .story-progress-dots button.active { height:34px; border-radius:10px; background:var(--accent); }
    .chapter {
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      opacity:0;
      transform:translateY(38px);
      pointer-events:none;
      transition:opacity .5s var(--ease), transform .5s var(--ease);
    }
    .chapter.active { opacity:1; transform:none; pointer-events:auto; }
    .chapter-number { font-size:13px; color:var(--accent); font-weight:800; direction:ltr; letter-spacing:.13em; }
    .chapter h2 { margin:18px 0 0; font-size:clamp(42px,5.2vw,78px); line-height:1.05; letter-spacing:-.045em; }
    .chapter p { margin:24px 0 0; color:#5e6c7b; font-size:clamp(17px,1.5vw,21px); line-height:1.9; max-width:590px; }
    .chapter-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:30px; }
    .chapter-list span { display:flex; align-items:center; gap:9px; font-size:13px; color:#21364b; }
    .chapter-list i { width:8px; height:8px; border:2px solid var(--accent); border-radius:50%; }

    /* Detail */
    .detail-section { background:#fff; color:var(--ink); padding:140px 0; }
    .detail-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:70px; align-items:center; }
    .detail-photo {
      position:relative;
      border-radius:var(--radius-xl);
      overflow:hidden;
      min-height:620px;
      box-shadow:var(--shadow);
      background:#e9ecef;
    }
    .detail-photo img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transform:scale(1.04); transition:transform 1.1s var(--ease); }
    .detail-photo.in-view img { transform:scale(1); }
    .detail-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(6,16,29,.7)); }
    .detail-caption { position:absolute; z-index:2; right:28px; left:28px; bottom:28px; color:#fff; display:flex; justify-content:space-between; align-items:end; gap:20px; }
    .detail-caption strong { font-size:22px; }
    .detail-caption span { color:rgba(255,255,255,.65); font-size:12px; direction:ltr; }
    .detail-copy .section-title { font-size:clamp(42px,5.5vw,78px); }
    .feature-list { display:grid; gap:14px; margin-top:42px; }
    .feature-row {
      display:grid;
      grid-template-columns:52px 1fr;
      gap:16px;
      align-items:start;
      padding:18px;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      transition:.35s var(--ease);
    }
    .feature-row:hover { transform:translateX(-6px); border-color:rgba(255,157,10,.34); box-shadow:0 16px 44px rgba(9,32,52,.08); }
    .feature-badge { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:var(--accent); background:#f4f6f8; }
    .feature-badge svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; }
    .feature-row h3 { margin:2px 0 0; font-size:18px; }
    .feature-row p { margin:7px 0 0; color:var(--muted); line-height:1.75; font-size:14px; }

    /* Feature mosaic */
    .feature-mosaic { background:#f1f3f6; color:var(--ink); padding:0 0 130px; }
    .mosaic-shell {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .mosaic-card {
      min-height:260px;
      padding:30px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid rgba(8,29,47,.08);
      position:relative;
      overflow:hidden;
      transition:.42s var(--ease);
    }
    .mosaic-card:hover { transform:translateY(-8px); box-shadow:0 24px 70px rgba(8,29,47,.11); }
    .mosaic-card::before { content:""; position:absolute; width:140px; height:140px; border-radius:50%; background:var(--accent); filter:blur(70px); opacity:.07; left:-20px; bottom:-30px; }
    .mosaic-card.large { grid-column:span 2; min-height:320px; background:linear-gradient(145deg,#0b1c2f,#07111e); color:#fff; }
    .mosaic-card .card-icon { width:54px; height:54px; border-radius:17px; display:grid; place-items:center; color:var(--accent); background:rgba(255,157,10,.09); border:1px solid rgba(255,157,10,.14); }
    .mosaic-card h3 { margin:36px 0 0; font-size:clamp(22px,2.4vw,34px); letter-spacing:-.03em; }
    .mosaic-card p { margin:13px 0 0; color:var(--muted); line-height:1.8; max-width:520px; }
    .mosaic-card.large p { color:rgba(255,255,255,.58); }
    .efficiency-ring { position:absolute; left:42px; top:50%; transform:translateY(-50%); width:170px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--accent) 0 93%,rgba(255,255,255,.1) 93%); }
    .efficiency-ring::before { content:""; position:absolute; inset:14px; border-radius:50%; background:#0b1c2f; }
    .efficiency-ring strong { position:relative; z-index:2; direction:ltr; font-size:42px; }

    /* Energy flow */
    .energy-section { position:relative; overflow:hidden; background:linear-gradient(180deg,#07111e,#0a1c2f); padding:140px 0; }
    .energy-section::before { content:""; position:absolute; inset:-40% -10%; background:radial-gradient(circle at 50% 45%,rgba(30,103,154,.22),transparent 33%); }
    .energy-head { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
    .energy-head .section-lead { text-align:center; }
    .flow-shell {
      position:relative;
      z-index:2;
      margin-top:86px;
      display:grid;
      grid-template-columns:1fr minmax(280px,.8fr) 1fr;
      align-items:center;
      gap:54px;
    }
    .flow-node {
      min-height:260px;
      padding:30px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
      backdrop-filter:blur(16px);
      border-radius:var(--radius-lg);
      position:relative;
      overflow:hidden;
    }
    .flow-node::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 38%); pointer-events:none; }
    .flow-node-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(145deg,var(--accent-2),var(--accent)); color:#12100a; }
    .flow-node h3 { margin:28px 0 0; font-size:25px; }
    .flow-node p { margin:10px 0 0; color:rgba(255,255,255,.55); line-height:1.8; font-size:14px; }
    .flow-value { margin-top:24px; direction:ltr; font-size:34px; font-weight:760; color:#fff; }
    .flow-center { position:relative; display:grid; place-items:center; }
    .flow-product { width:min(270px,90%); position:relative; z-index:3; filter:drop-shadow(0 30px 34px rgba(0,0,0,.38)); animation:subtleFloat 4.5s ease-in-out infinite; }
    .flow-center::before { content:""; position:absolute; width:300px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.11); box-shadow:0 0 100px rgba(41,116,168,.2) inset; animation:spin 24s linear infinite; }
    .flow-line {
      position:absolute;
      top:50%;
      height:2px;
      width:calc(50% - 160px);
      background:repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 17px);
      background-size:34px 2px;
      animation:lineFlow 1.3s linear infinite;
      opacity:.7;
    }
    .flow-line.left { left:0; }
    .flow-line.right { right:0; transform:scaleX(-1); }
    .energy-note { position:relative; z-index:2; margin-top:44px; padding:18px 22px; border-radius:16px; border:1px solid rgba(255,157,10,.24); background:rgba(255,157,10,.06); color:rgba(255,255,255,.62); font-size:13px; line-height:1.8; }

    /* Applications */
    .applications {
      position:relative;
      min-height:105svh;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:#0a1018;
    }
    .applications-media { position:absolute; inset:-8%; }
    .applications-media img { width:100%; height:100%; object-fit:cover; transform:scale(1.08) translateY(calc(var(--app-parallax,0) * 42px)); filter:saturate(.9) contrast(1.03); }
    .applications::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,9,15,.12) 0 35%,rgba(4,9,15,.88) 72%,#050a11 100%), linear-gradient(180deg,rgba(4,9,15,.12),rgba(4,9,15,.3)); }
    .applications-content { position:relative; z-index:2; width:min(var(--max),calc(100% - 48px)); margin-inline:auto; display:flex; justify-content:flex-start; }
    .application-card {
      width:min(620px,52%);
      padding:48px;
      border-radius:30px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(4,12,21,.66);
      backdrop-filter:blur(20px) saturate(120%);
      box-shadow:0 34px 90px rgba(0,0,0,.36);
    }
    .application-card h2 { margin:18px 0 0; font-size:clamp(44px,6vw,82px); line-height:1.05; letter-spacing:-.045em; }
    .application-card > p { margin:24px 0 0; color:rgba(255,255,255,.65); font-size:18px; line-height:1.9; }
    .application-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:34px; }
    .application-point { padding:16px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
    .application-point strong { display:block; margin-top:12px; font-size:14px; }
    .application-point span { display:block; margin-top:6px; color:rgba(255,255,255,.46); font-size:11px; line-height:1.6; }
    .point-icon { color:var(--accent); width:28px; height:28px; }

    /* Specs */
    .specs-section { background:#f5f6f8; color:var(--ink); padding:140px 0; }
    .specs-head { display:flex; align-items:end; justify-content:space-between; gap:40px; }
    .specs-head .section-title { font-size:clamp(44px,6vw,82px); }
    .spec-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:58px; }
    .spec-summary-card { min-height:150px; padding:22px; border-radius:20px; background:#fff; border:1px solid rgba(8,28,48,.09); box-shadow:0 14px 42px rgba(8,28,48,.05); }
    .spec-summary-card span { color:var(--muted); font-size:12px; }
    .spec-summary-card strong { display:block; margin-top:18px; direction:ltr; text-align:right; font-size:28px; letter-spacing:-.03em; }
    .spec-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:58px; padding:7px; width:max-content; max-width:100%; border-radius:16px; background:#e7eaee; }
    .spec-tab { border:0; padding:12px 20px; border-radius:12px; cursor:pointer; color:#536171; background:transparent; font-weight:700; transition:.25s var(--ease); }
    .spec-tab.active { color:#fff; background:var(--ink); box-shadow:0 10px 24px rgba(6,16,29,.16); }
    .spec-panels { margin-top:24px; }
    .spec-panel { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 40px; padding:36px; border-radius:28px; background:#fff; border:1px solid rgba(8,28,48,.08); }
    .spec-panel.active { display:grid; animation:panelIn .4s var(--ease); }
    .spec-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:54px; padding:13px 0; border-bottom:1px solid #edf0f3; }
    .spec-row:nth-last-child(-n+2) { border-bottom-color:transparent; }
    .spec-row span { color:#667484; font-size:13px; line-height:1.55; }
    .spec-row strong { text-align:left; direction:ltr; unicode-bidi:isolate; font-size:14px; color:#10263b; }
    .engineering-note { margin-top:20px; padding:20px 22px; border:1px solid rgba(255,157,10,.34); background:#fff8ed; border-radius:16px; color:#6b5942; font-size:13px; line-height:1.9; }
    .engineering-note strong { color:#2b3743; }

    /* Final CTA */
    .final-cta { position:relative; overflow:hidden; min-height:780px; display:flex; align-items:center; background:linear-gradient(145deg,#06111d,#0a1e32); }
    .final-cta::before { content:""; position:absolute; width:900px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(39,119,174,.28),transparent 65%); left:-200px; top:50%; transform:translateY(-50%); }
    .cta-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; gap:50px; }
    .cta-product { width:min(540px,90%); margin-inline:auto; filter:drop-shadow(0 46px 55px rgba(0,0,0,.45)); transform:rotate(-4deg); }
    .cta-copy h2 { margin:0; font-size:clamp(48px,7vw,92px); line-height:1.02; letter-spacing:-.05em; }
    .cta-copy p { margin:24px 0 0; color:rgba(255,255,255,.61); font-size:19px; line-height:1.85; max-width:600px; }
    .cta-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

    /* Footer */
    .site-footer { background:#03080e; padding:68px 0 24px; border-top:1px solid rgba(255,255,255,.08); }
    .footer-grid { display:grid; grid-template-columns:1.3fr repeat(3,.7fr); gap:50px; }
    .footer-about .brand { min-width:0; }
    .footer-about .brand-logo { width:184px; }
    .footer-about p { margin:20px 0 0; max-width:340px; color:rgba(255,255,255,.47); font-size:13px; line-height:1.9; }
    .footer-col h4 { margin:0 0 18px; color:#fff; font-size:13px; }
    .footer-col a, .footer-col button { display:block; width:max-content; max-width:100%; border:0; padding:0; margin:12px 0; background:none; color:rgba(255,255,255,.48); font-size:12px; cursor:pointer; transition:.2s ease; }
    .footer-col a:hover, .footer-col button:hover { color:var(--accent); }
    .footer-bottom { margin-top:50px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:30px; color:rgba(255,255,255,.34); font-size:11px; }

    /* Reveals */
    .reveal { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--delay,0ms); }
    .reveal.in-view { opacity:1; transform:none; }

    /* Dialog */
    dialog {
      width:min(560px,calc(100% - 28px));
      border:1px solid rgba(255,255,255,.12);
      border-radius:26px;
      padding:0;
      color:#fff;
      background:rgba(7,17,29,.96);
      box-shadow:0 40px 120px rgba(0,0,0,.6);
      backdrop-filter:blur(24px);
    }
    dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(6px); }
    .dialog-shell { padding:30px; }
    .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .dialog-head h3 { margin:0; font-size:24px; }
    .dialog-close { width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); cursor:pointer; }
    .quote-form { display:grid; gap:14px; margin-top:26px; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .field { display:grid; gap:8px; }
    .field label { color:rgba(255,255,255,.58); font-size:12px; }
    .field input, .field textarea {
      width:100%;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      color:#fff;
      border-radius:13px;
      outline:none;
      padding:13px 14px;
      transition:.2s ease;
    }
    .field input:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,157,10,.1); }
    .field textarea { resize:vertical; min-height:100px; }
    .form-note { color:rgba(255,255,255,.42); font-size:11px; line-height:1.7; }
    .toast { position:fixed; z-index:1400; left:50%; bottom:28px; transform:translate(-50%,20px); padding:14px 18px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(5,13,23,.92); color:#fff; box-shadow:0 18px 60px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:.35s var(--ease); }
    .toast.show { opacity:1; transform:translate(-50%,0); }

    @keyframes heroFloat { 0%,100%{margin-top:-5px} 50%{margin-top:10px} }
    @keyframes chipFloat { 0%,100%{transform:translateY(-5px)} 50%{transform:translateY(7px)} }
    @keyframes subtleFloat { 0%,100%{transform:translateY(-5px)} 50%{transform:translateY(8px)} }
    @keyframes spin { to { transform:rotate(360deg); } }
    @keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,13px)} }
    @keyframes lineFlow { to { background-position:34px 0; } }
    @keyframes panelIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

    @media (max-width: 1120px) {
      .desktop-nav { display:none; }
      .header-actions .btn { display:none; }
      .icon-btn { display:flex; }
      .hero-grid { grid-template-columns:1fr 1fr; gap:10px; }
      .hero-stage { min-height:560px; }
      .metrics-grid { grid-template-columns:repeat(3,1fr); }
      .metric:nth-child(3) { border-left:0; }
      .metric:nth-child(-n+3) { border-bottom:1px solid rgba(255,255,255,.08); }
      .story-sticky { grid-template-columns:1fr 1fr; gap:20px; padding-inline:24px; }
      .story-progress-dots { right:0; }
      .detail-grid { gap:38px; }
      .detail-photo { min-height:520px; }
      .application-card { width:min(660px,64%); }
    }
    @media (max-width: 860px) {
      :root { --header-h:68px; --radius-xl:26px; }
      .container, .hero-grid, .applications-content { width:min(100% - 30px,var(--max)); }
      .hero-grid { grid-template-columns:1fr; padding-top:118px; padding-bottom:80px; text-align:center; }
      .hero-copy { max-width:730px; margin-inline:auto; }
      .hero-eyebrow, .hero-actions, .hero-meta { justify-content:center; }
      .hero-stage { min-height:520px; order:2; }
      .chip-a { right:0; } .chip-b { left:0; }
      .story { height:auto; }
      .story-sticky { position:relative; height:auto; min-height:0; display:block; padding:110px 20px; }
      .story-visual { height:520px; }
      .story-copy { min-height:0; display:grid; gap:18px; margin-top:30px; }
      .chapter { position:relative; opacity:1; transform:none; pointer-events:auto; padding:30px; background:#fff; border-radius:22px; border:1px solid rgba(8,28,48,.08); }
      .story-progress-dots { display:none; }
      .story-product { transform:none; }
      .detail-grid { grid-template-columns:1fr; }
      .detail-photo { min-height:64vw; }
      .mosaic-shell { grid-template-columns:1fr 1fr; }
      .mosaic-card.large { grid-column:span 2; }
      .flow-shell { grid-template-columns:1fr; }
      .flow-center { min-height:360px; order:-1; }
      .flow-line { display:none; }
      .applications { min-height:900px; align-items:end; padding-bottom:50px; }
      .applications::after { background:linear-gradient(180deg,rgba(4,9,15,.1) 12%,rgba(4,9,15,.88) 68%,#050a11 100%); }
      .application-card { width:100%; padding:34px; }
      .specs-head { display:block; }
      .spec-summary { grid-template-columns:repeat(2,1fr); }
      .spec-panel { grid-template-columns:1fr; }
      .spec-row:nth-last-child(-n+2) { border-bottom:1px solid #edf0f3; }
      .spec-row:last-child { border-bottom-color:transparent; }
      .cta-grid { grid-template-columns:1fr; text-align:center; padding:100px 0; }
      .cta-actions { justify-content:center; }
      .footer-grid { grid-template-columns:1.2fr 1fr 1fr; }
      .footer-about { grid-column:span 3; }
    }
    @media (max-width: 580px) {
      .header-shell { width:calc(100% - 24px); }
      .brand { min-width:auto; }
      .brand-logo { width:142px; height:auto; max-width:none; }
      .hero h1 { font-size:clamp(45px,14vw,72px); }
      .hero-sub { font-size:16px; }
      .btn { width:100%; }
      .hero-actions { display:grid; grid-template-columns:1fr; }
      .hero-stage { min-height:430px; }
      .chip { min-width:132px; padding:10px; }
      .chip strong { font-size:13px; }
      .chip small { font-size:9px; }
      .chip-a { top:14%; } .chip-b { bottom:10%; }
      .metrics-grid { grid-template-columns:repeat(2,1fr); }
      .metric:nth-child(3) { border-left:1px solid rgba(255,255,255,.08); }
      .metric:nth-child(odd) { border-left:0; }
      .metric:nth-child(-n+4) { border-bottom:1px solid rgba(255,255,255,.08); }
      .metric { min-height:145px; padding:22px 10px; }
      .story-visual { height:420px; }
      .chapter { padding:24px; }
      .chapter h2 { font-size:40px; }
      .chapter-list { grid-template-columns:1fr; }
      .detail-section { padding:90px 0; }
      .detail-photo { min-height:420px; }
      .detail-caption { right:20px; left:20px; bottom:20px; }
      .mosaic-shell { grid-template-columns:1fr; }
      .mosaic-card.large { grid-column:auto; min-height:420px; }
      .efficiency-ring { position:relative; left:auto; top:auto; transform:none; margin:46px auto 0; }
      .energy-section, .specs-section { padding:95px 0; }
      .application-card { padding:26px; }
      .application-points { grid-template-columns:1fr; }
      .spec-summary { grid-template-columns:1fr 1fr; gap:9px; }
      .spec-summary-card { min-height:130px; padding:17px; }
      .spec-summary-card strong { font-size:22px; }
      .spec-panel { padding:20px; }
      .spec-row { display:grid; gap:6px; }
      .spec-row strong { text-align:right; }
      .final-cta { min-height:auto; }
      .footer-grid { grid-template-columns:1fr 1fr; gap:30px; }
      .footer-about { grid-column:span 2; }
      .footer-bottom { display:grid; }
      .form-grid { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
      .reveal { opacity:1 !important; transform:none !important; }
    }