:root{
    --color-bg:#F7F8FA; --color-surface:#FFFFFF; --color-surface-2:#EEF1F6;
    --color-ink:#0B1220; --color-ink-muted:#475569; --color-ink-subtle:#8A97A8;
    --color-primary:#0B1F3A; --color-primary-deep:#081627; --color-primary-slate:#1E2C3A;
    /* shiny metallic gold sampled from banner */
    --color-accent:#C8943C; --color-accent-soft:#E6B660; --color-accent-deep:#A67B2E;
    --color-gold-hi:#F6D690; --color-gold-shine:#FFFCD4; --color-accent-wash:#FBF3E2;
    --gold-metal:linear-gradient(135deg,#F6D690 0%,#E6B660 30%,#C8943C 55%,#E6B660 78%,#A67B2E 100%);
    --gold-metal-soft:linear-gradient(135deg,#FFFCD4,#F6D690 35%,#E6B660 70%,#C8943C);
    --color-royal:#3B5BFF;
    --color-success:#15803D; --color-success-wash:#E7F2EB;
    --color-border:#E2E7EF; --color-border-strong:#CDD5E1; --color-danger:#B91C1C;
    --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-full:999px;
    --shadow-sm:0 1px 2px rgba(11,31,58,.05);
    --shadow-md:0 6px 20px -6px rgba(11,31,58,.10);
    --shadow-lg:0 18px 40px -12px rgba(11,31,58,.16);
    --shadow-xl:0 30px 60px -18px rgba(11,31,58,.22);
    --ease-out:cubic-bezier(0.22,1,0.36,1);
    --ease-inout:cubic-bezier(0.65,0,0.35,1);
  }
  *{box-sizing:border-box}
  body{background:var(--color-bg);color:var(--color-ink);font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased;margin:0}
  .font-display{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em}
  .font-mono{font-family:'IBM Plex Mono',monospace}
  .eyebrow{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  /* shiny metallic gold gradient text */
  .gold-text{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  /* hand-drawn underline swoosh on accent word — NAVY (from logo) */
  .swoosh{position:relative;display:inline-block;color:var(--color-primary)}
  .swoosh::after{content:'';position:absolute;left:-2%;right:-4%;bottom:-.12em;height:.34em;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17 C70 6 150 5 296 11' stroke='%230B1F3A' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");pointer-events:none}
  .swoosh-soft::after{}
  /* horizontal awards marquee */
  .marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:flex;flex-shrink:0;gap:18px;padding-right:18px;animation:marquee 32s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
  .award-card{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:16px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
  /* seamless gold hairline divider between sections */
  .gold-rule{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(176,133,66,.55) 18%,rgba(201,163,94,.9) 50%,rgba(176,133,66,.55) 82%,transparent)}
  .gold-rule-thick{height:2px;border:0;background:linear-gradient(90deg,transparent,var(--color-accent-soft),var(--color-accent),var(--color-accent-soft),transparent)}
  /* angled / chevron section transitions */
  .clip-chev-top{clip-path:polygon(0 5%,50% 0,100% 5%,100% 100%,0 100%)}
  .clip-chev-bottom{clip-path:polygon(0 0,100% 0,100% 95%,50% 100%,0 95%)}
  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  .reveal.visible{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  .stagger.visible>*{opacity:1;transform:none}
  .stagger.visible>*:nth-child(1){transition-delay:.05s}
  .stagger.visible>*:nth-child(2){transition-delay:.13s}
  .stagger.visible>*:nth-child(3){transition-delay:.21s}
  .stagger.visible>*:nth-child(4){transition-delay:.29s}
  .stagger.visible>*:nth-child(5){transition-delay:.37s}
  .stagger.visible>*:nth-child(6){transition-delay:.45s}
  @media (prefers-reduced-motion: reduce){
    .reveal,.stagger>*{transition:none!important;opacity:1!important;transform:none!important}
    *{animation:none!important}
  }
  /* gold pill button w/ nested arrow — shiny metallic */
  .btn-gold{background:var(--gold-metal);color:#3a2b08;border-radius:var(--radius-full);font-weight:700;display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem .85rem 1.5rem;transition:all .2s var(--ease-out);cursor:pointer;border:none;box-shadow:0 10px 26px -10px rgba(200,148,60,.65),inset 0 1px 0 rgba(255,255,255,.55)}
  .btn-gold:hover{filter:brightness(1.06) saturate(1.05);box-shadow:0 14px 32px -10px rgba(200,148,60,.8),inset 0 1px 0 rgba(255,255,255,.6)}
  .btn-gold:active{transform:scale(.98)}
  .btn-gold .well{width:30px;height:30px;border-radius:50%;background:rgba(58,43,8,.14);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease-out)}
  .btn-gold:hover .well{transform:translate(2px,-2px)}
  .btn-royal{background:var(--color-royal);color:#fff;border-radius:var(--radius-full);font-weight:600;padding:.8rem 1.5rem;border:none;cursor:pointer;transition:all .2s var(--ease-out)}
  .btn-royal:hover{filter:brightness(1.07)} .btn-royal:active{transform:scale(.98)}
  .btn-navy{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-weight:600;padding:.8rem 1.5rem;border:none;cursor:pointer;transition:all .2s var(--ease-out)}
  .btn-navy:hover{filter:brightness(1.25)}
  .btn-outline-gold{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-accent);border-radius:var(--radius-full);font-weight:600;padding:.85rem 1.5rem;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;transition:all .2s var(--ease-out)}
  .btn-outline-gold:hover{background:var(--color-accent-wash);border-color:var(--color-accent-deep)}
  /* on-dark variant (for the one remaining navy CTA card) */
  .btn-outline-gold.on-dark{color:#fff;border-color:rgba(230,182,96,.6)}
  .btn-outline-gold.on-dark:hover{background:rgba(230,182,96,.12);border-color:var(--color-accent-soft)}
  .btn-outline-gold .arr,.btn-gold-pill .arr{transition:transform .2s var(--ease-out)}
  .btn-outline-gold:hover .arr,.btn-gold-pill:hover .arr{transform:translate(2px,-2px)}
  .btn-gold-pill{background:var(--gold-metal);color:#3a2b08;border:none;border-radius:var(--radius-full);font-weight:700;padding:.85rem 1.5rem;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;transition:all .2s var(--ease-out);box-shadow:0 10px 26px -10px rgba(200,148,60,.65),inset 0 1px 0 rgba(255,255,255,.55)}
  .btn-gold-pill:hover{filter:brightness(1.06) saturate(1.05)}
  .btn-ghost{background:transparent;color:var(--color-ink);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);font-weight:600;padding:.85rem 1.5rem;transition:all .15s var(--ease-out);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
  .btn-ghost:hover{background:var(--color-surface-2)}
  /* magnetic card lift */
  .card-lift{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out)}
  .card-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  /* pricing card hover -> gold glow */
  .tier-card{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out)}
  .tier-card:hover{transform:translateY(-8px);border-color:var(--color-accent)!important;box-shadow:0 24px 50px -18px rgba(176,133,66,.45)}
  /* solution card (light) */
  .sol-card{transition:border-color .25s var(--ease-out),background .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
  .sol-card:hover{border-color:var(--color-accent)!important;background:#fff!important;transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(200,148,60,.4)!important}
  .sol-card:hover .glyph{stroke:var(--color-accent)}
  .glyph{stroke:rgba(200,148,60,.55);transition:stroke .3s var(--ease-out)}
  .navlink{position:relative;font-weight:500;font-size:.9rem;transition:color .2s}
  .navlink::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--color-accent);transition:width .25s var(--ease-out)}
  .navlink:hover::after{width:100%}
  .img-zoom{overflow:hidden} .img-zoom img{transition:transform .7s var(--ease-out)} .img-zoom:hover img{transform:scale(1.06)}
  :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(176,133,66,.4);border-radius:6px}
  ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:10px}
  /* spotlight */
  .spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(230,182,96,.16),transparent 62%);z-index:1}
  .spot-host:hover .spotlight{opacity:1}
  .fullscreen-overlay{position:fixed;inset:0;z-index:9999;background:rgba(8,16,28,.94);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;animation:ovIn .2s ease}
  @keyframes ovIn{from{opacity:0}to{opacity:1}}
  .fullscreen-close-btn{position:fixed;top:16px;right:20px;z-index:10000;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .fullscreen-close-btn:hover{background:rgba(255,255,255,.28)}
  .fullscreen-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.45);font-size:11px;font-family:monospace;pointer-events:none}
  #desktop-mockup-frame .md\:hidden{display:none!important}
  #desktop-mockup-frame .dm-flex{display:flex!important}
  #desktop-mockup-frame .dm-grid4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #desktop-mockup-frame .dm-grid3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #desktop-mockup-frame .dm-grid2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  @keyframes heroLoop{0%{opacity:0;transform:translateY(20px)}12%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(20px)}}
  @keyframes cardLoop{0%{opacity:0;transform:translateY(18px)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(18px)}}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ============ ENHANCED ANIMATION SYSTEM ============ */
  /* directional + scale + blur reveal variants */
  .reveal-l{opacity:0;transform:translateX(-36px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .reveal-l.visible{opacity:1;transform:none}
  .reveal-r{opacity:0;transform:translateX(36px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .reveal-r.visible{opacity:1;transform:none}
  .reveal-scale{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .reveal-scale.visible{opacity:1;transform:none}
  .reveal-blur{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out)}
  .reveal-blur.visible{opacity:1;transform:none;filter:none}
  /* word-by-word title reveal */
  .reveal-words .w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(6px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),filter .6s var(--ease-out)}
  .reveal-words.visible .w{opacity:1;transform:none;filter:none}
  /* swoosh draws itself in on reveal */
  .reveal-words .swoosh::after{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .35s}
  .reveal-words.visible .swoosh::after{transform:scaleX(1)}
  /* generic scroll-draw swoosh: collapsed until container marked .drawn */
  .draw-swoosh .swoosh::after{transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease-out) .25s}
  .draw-swoosh.drawn .swoosh::after{transform:scaleX(1)}
  /* hero swoosh waits for the panel to finish rising before drawing */
  .hero-in .draw-swoosh .swoosh::after{transition-delay:.95s}
  /* deeper stagger steps */
  .stagger.visible>*:nth-child(7){transition-delay:.53s}
  .stagger.visible>*:nth-child(8){transition-delay:.61s}

  /* scroll progress bar */
  #scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--color-accent-soft),var(--color-accent));box-shadow:0 0 12px rgba(176,133,66,.6);transition:width .1s linear}

  /* sticky-nav shadow on scroll */
  header.scrolled{box-shadow:0 6px 24px -12px rgba(11,31,58,.25)}

  /* hero entrance choreography (plays once on load) */
  .hero-in>*{opacity:0;transform:translateY(28px)}
  .hero-play .hero-in>*{animation:heroRise .9s var(--ease-out) forwards}
  .hero-play .hero-in>*:nth-child(1){animation-delay:.1s}
  .hero-play .hero-in>*:nth-child(2){animation-delay:.24s}
  .hero-play .hero-in>*:nth-child(3){animation-delay:.38s}
  .hero-play .hero-in>*:nth-child(4){animation-delay:.52s}
  @keyframes heroRise{to{opacity:1;transform:none}}
  /* hero glass panel floats in + subtle idle float */
  .hero-panel{animation:panelIn 1s var(--ease-out) both,floaty 7s ease-in-out 1.1s infinite}
  @keyframes panelIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  /* slow zoom on hero video for life */
  .hero-video{animation:kenburns 24s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14)}}

  /* magnetic buttons follow cursor slightly */
  .magnetic{transition:transform .25s var(--ease-out)}

  /* shimmer sweep on gold CTAs */
  .btn-gold,.btn-gold-pill{position:relative;overflow:hidden}
  .btn-gold::before,.btn-gold-pill::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:none}
  .btn-gold:hover::before,.btn-gold-pill:hover::before{animation:shimmer .9s var(--ease-out)}
  @keyframes shimmer{from{left:-60%}to{left:130%}}

  /* number count-up uses tabular figures so it doesn't jiggle */
  .countup{font-variant-numeric:tabular-nums}

  /* gold rule grows from center on reveal */
  .gold-rule.reveal-rule,.gold-rule-thick.reveal-rule{transform:scaleX(0);transition:transform .9s var(--ease-out)}
  .gold-rule.reveal-rule.visible,.gold-rule-thick.reveal-rule.visible{transform:scaleX(1)}

  /* tier flagship gentle pulse to draw the eye */
  @keyframes flagPulse{0%,100%{box-shadow:0 0 0 0 rgba(176,133,66,0)}50%{box-shadow:0 0 0 6px rgba(176,133,66,.10)}}
  .tier-flag{animation:flagPulse 3.2s ease-in-out infinite}
  .tier-flag:hover{animation:none}

  /* sol-card glyph idle drift, spins up on hover */
  .sol-card .glyph{transition:stroke .3s var(--ease-out),transform .5s var(--ease-out)}
  .sol-card:hover .glyph{transform:rotate(45deg) scale(1.08)}

  /* scroll-down cue */
  @keyframes bobDown{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
  .scroll-cue{animation:bobDown 1.8s ease-in-out infinite}

  @media (prefers-reduced-motion: reduce){
    .reveal-l,.reveal-r,.reveal-scale,.reveal-blur,.reveal-words .w,.gold-rule.reveal-rule,.gold-rule-thick.reveal-rule{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
    .hero-in>*{opacity:1!important;transform:none!important;animation:none!important}
    .hero-panel,.hero-video,.tier-flag,.scroll-cue,.sol-card .glyph,.marquee-track{animation:none!important}
    .marquee-track:nth-child(2){display:none}
  }