/* Homepage opening stage (v24). Always dark: a black stage in both themes. */
.xh{--xh-bg:#030407;--xh-fg:#F4F7FC;--xh-fg2:#AEB8CC;--xh-fg3:#6F7B93;--xh-line:rgba(160,180,220,.12);--xh-blue:#5B9BFF;--xh-cyan:#62E6FF;--xh-amber:#FFB224;
  position:relative;isolation:isolate;overflow:hidden;color:var(--xh-fg);
  min-height:clamp(640px,calc(100svh - 68px),980px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink-0) 0,var(--xh-bg) 22%,var(--xh-bg) 100%)}
html[data-theme=light] .xh{background:var(--xh-bg)}
.xh-cv{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
/* Atmosphere: horizon glow, perspective grid floor, vignette, fine scanlines */
.xh-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.xh-fx::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-2%;height:46%;
  background-image:linear-gradient(var(--xh-line) 1px,transparent 1px),linear-gradient(90deg,var(--xh-line) 1px,transparent 1px);
  background-size:72px 72px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 40%,transparent 100%);-webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 40%,transparent 100%);
  animation:xh-floor 9s linear infinite}
@keyframes xh-floor{to{background-position:0 72px,0 0}}
.xh-fx::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 38% at 64% 70%,rgba(91,155,255,.16),transparent 70%),
    radial-gradient(ellipse 26% 20% at 64% 66%,rgba(255,178,36,.10),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.75) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.xh-in{position:relative;flex:1;display:grid;align-content:center;gap:clamp(22px,3vw,34px);padding-block:clamp(36px,6vh,72px) clamp(28px,5vh,56px)}

/* System line */
.xh-sys{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--xh-fg2)}
.xh-id{display:inline-flex;align-items:center;gap:12px;color:var(--xh-fg)}
.xh-id b{color:var(--xh-amber);font-weight:500}
.xh-id .cur{width:7px;height:13px;background:var(--xh-amber);display:inline-block;margin-left:2px;animation:xh-blink 1.1s steps(1) infinite}
@keyframes xh-blink{50%{opacity:0}}
.xh-clock{color:var(--xh-fg3);font-variant-numeric:tabular-nums}
.xh-sys .sep{width:28px;height:1px;background:linear-gradient(90deg,var(--xh-amber),transparent)}

/* Headline */
.xh-h{margin:0;font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(52px,8.4vw,150px);line-height:.88;letter-spacing:-.035em;color:var(--xh-fg)}
.xh-h>span{display:block;position:relative}
@media (min-width:761px){.xh-h>span{white-space:nowrap}}
.xh-h .l1{background:linear-gradient(100deg,#fff 0%,#fff 40%,#cfe0ff 50%,#fff 60%,#fff 100%);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:xh-sheen 3.2s 1.1s var(--ease) both}
.xh-h .l2{color:transparent;-webkit-text-stroke:1.5px rgba(244,247,252,.9);background:linear-gradient(90deg,var(--xh-fg),var(--xh-fg)) no-repeat;background-size:0 100%;-webkit-background-clip:text;background-clip:text;animation:xh-fill 1.4s .55s var(--ease) forwards}
.xh-h .xh-dot{color:var(--xh-amber);-webkit-text-stroke:0;text-shadow:0 0 28px rgba(255,178,36,.65)}
@keyframes xh-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes xh-fill{to{background-size:100% 100%}}

.xh-sub{margin:0;max-width:36ch;font:400 clamp(18px,1.7vw,23px)/1.45 var(--sans);color:var(--xh-fg2);text-wrap:balance}
.xh-sub b{color:var(--xh-fg);font-weight:500}

/* CTAs */
.xh-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.xh-btn{--h:58px;position:relative;display:inline-flex;align-items:center;gap:14px;height:var(--h);padding:0 28px;border-radius:4px;
  font:600 13.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--xh-fg);border:1px solid rgba(220,230,255,.22);background:rgba(255,255,255,.02);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .35s}
.xh-btn:hover{border-color:rgba(220,230,255,.5);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.xh-btn.p{color:#130C00;border-color:var(--xh-amber);background:var(--xh-amber);
  box-shadow:0 0 0 1px rgba(255,178,36,.4),0 10px 40px -8px rgba(255,178,36,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.xh-btn.p:hover{background:#FFC24D;box-shadow:0 0 0 1px rgba(255,178,36,.6),0 16px 56px -8px rgba(255,178,36,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.xh-btn.p::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;animation:xh-glint 5s 2.4s ease-in-out infinite;pointer-events:none}
@keyframes xh-glint{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
.xh-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.xh-btn:hover svg{transform:translateX(4px)}
.xh-btn:focus-visible{outline:2px solid var(--xh-cyan);outline-offset:3px}

/* Status chips */
.xh-status{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.xh-status li{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px;border:1px solid var(--xh-line);border-radius:3px;
  background:rgba(8,12,22,.55);font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--xh-fg2)}
.xh-status i{width:7px;height:7px;border-radius:50%;background:#3A4458;transition:background .4s,box-shadow .4s}
.xh-status li.on i{background:#46D89B;box-shadow:0 0 0 3px rgba(70,216,155,.15),0 0 12px rgba(70,216,155,.8)}
.xh-status li.on{color:var(--xh-fg)}

/* Proof rail at the foot of the stage */
.xh-rail{position:relative;border-top:1px solid var(--xh-line);background:linear-gradient(180deg,rgba(3,4,7,.2),rgba(3,4,7,.85))}
.xh-rail .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3vw,44px);min-height:76px;padding-block:16px}
.xh-proof{font:700 15px/1.2 var(--display);font-stretch:118%;letter-spacing:-.005em;color:var(--xh-fg)}
.xh-proof em{font-style:normal;color:var(--xh-amber)}
.xh-rail ul{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.4vw,34px);margin:0;padding:0;list-style:none;font:400 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--xh-fg2)}
.xh-rail li{display:inline-flex;align-items:center;gap:9px}
.xh-rail li svg{width:15px;height:15px;color:var(--xh-blue)}
.xh-rail [data-xh-load]{color:var(--xh-fg)}
.xh-rail [data-xh-load][hidden]{display:none}
.xh-scroll{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--xh-fg3);text-decoration:none}
.xh-scroll i{width:1px;height:26px;background:linear-gradient(var(--xh-fg3),transparent);position:relative;overflow:hidden}
.xh-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--xh-amber);animation:xh-drop 2.2s ease-in-out infinite}
@keyframes xh-drop{to{top:100%}}
.xh-scroll:hover{color:var(--xh-fg)}

/* Entrance: the boot sequence. Headline paints immediately (it's the LCP); the rest arrives in order. */
.xh-boot{opacity:0;transform:translateY(14px);animation:xh-in .9s var(--ease) forwards}
@keyframes xh-in{to{opacity:1;transform:none}}
.xh-h{animation:xh-rise 1.1s var(--ease) both}
@keyframes xh-rise{from{transform:translateY(18px)}to{transform:none}}

@media (max-width:1480px){.xh-scroll{display:none}}
@media (max-width:760px){
  .xh{min-height:auto}
  .xh-in{padding-block:44px 36px}
  .xh-h{font-size:clamp(46px,14.6vw,78px);line-height:.88}
  .xh-h .l2{-webkit-text-stroke-width:1px}
  .xh-btn{--h:54px;width:100%;justify-content:space-between}
  .xh-sys{letter-spacing:.16em}
  .xh-status{gap:8px}
  .xh-status li{height:28px;padding:0 10px;font-size:10px;letter-spacing:.14em}
  .xh-scroll{display:none}
  .xh-fx::before{height:34%}
}
@media (prefers-reduced-motion:reduce){
  .xh-fx::before,.xh-id .cur,.xh-btn.p::after,.xh-scroll i::after{animation:none}
  .xh-h,.xh-h .l1,.xh-boot{animation:none;opacity:1;transform:none}
  .xh-h .l2{animation:none;background-size:100% 100%}
}
.xh-proof-h{font-size:clamp(38px,5.6vw,84px)}