/* SevinHub hero v10 "ONE CORNER" (SPEC.md). Scoped under #world-home.sh-hx and html.hx-*.
   No inset shorthand, no fixed or sticky inside the hero, copy never hidden with opacity alone. */
.sh-hx{--hx-bg:#060914;--hx-ink:#F8FAFC;--hx-ink2:#CBD5E1;--hx-ink3:#94A3B8;--hx-num:#8391A7;--hx-gold:#F59E0B;--hx-cyan:#22D3EE;--hx-violet:#A78BFA;--hx-halo:#8B5CF6;--hx-pa:#9F6BFF;--hx-pb:#06B6D4;--hx-ground:#0B1222;--hx-quiet:#3A4256;--hx-meas:#38BDF8;--hx-focus:#A78BFA;
  position:relative;display:flex;align-items:center;height:calc(100svh - var(--hx-nav,48px));min-height:600px;
  background:var(--hx-bg);color:var(--hx-ink);overflow:clip;isolation:isolate;scroll-snap-align:none}
html[data-theme="light"] .sh-hx{--hx-bg:#F6F4FF;--hx-ink:#0F172A;--hx-ink2:#334155;--hx-ink3:#475569;--hx-num:#556377;--hx-gold:#B45309;--hx-cyan:#0891B2;--hx-violet:#6D28D9;--hx-halo:#6D28D9;--hx-pa:#6D28D9;--hx-pb:#0891B2;--hx-ground:#FFFFFF;--hx-quiet:#C3CEDD;--hx-meas:#0284C7;--hx-focus:#6D28D9}
.sh-hx-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:block}
.sh-hx-copy{position:relative;z-index:2;width:100%;pointer-events:none}
.sh-hx-copy>*{pointer-events:auto;max-width:560px}
.sh-hx-kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 13px/1.4 Inter,system-ui,sans-serif;color:var(--hx-ink3)}
.sh-hx-kicker svg{flex:none;width:12px;height:12px}
.sh-hx-title{margin:0;font-weight:inherit}
.sh-hx-word{display:block;font:800 clamp(64px,6.1vw,88px)/.95 Sora,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--hx-ink)}
.sh-hx-desc{display:block;margin-top:14px;max-width:500px;font:600 clamp(26px,2.25vw,32px)/1.2 Sora,system-ui,sans-serif;letter-spacing:-.01em;color:var(--hx-ink2)}
.sh-hx-tagline{margin:22px 0 0;font:500 17px/1.4 Inter,system-ui,sans-serif;color:var(--hx-ink3)}
.sh-hx-cta{display:inline-flex;align-items:center;gap:10px;height:50px;margin-top:38px;padding:0 22px;border-radius:8px;background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#0F172A;font:600 15px Sora,system-ui,sans-serif;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
.sh-hx-cta svg{width:16px;height:16px}
.sh-hx-cta:hover{background:linear-gradient(180deg,#FCD34D,#FBBF24)}
.sh-hx-keys{display:grid;grid-template-columns:repeat(3,minmax(0,176px));gap:16px;margin-top:40px}
.sh-hx-key{display:grid;grid-template-columns:16px 1fr;column-gap:8px;align-content:start;min-height:44px;padding:4px 0;color:var(--hx-ink);text-decoration:none;--k:var(--hx-gold)}
.sh-hx-key[data-face="atlas"]{--k:var(--hx-cyan)}
.sh-hx-key[data-face="security"]{--k:var(--hx-violet)}
.sh-hx-key svg{width:16px;height:16px;margin-top:2px}
.sh-hx-key svg path:first-child{fill:var(--k)}
.sh-hx-key svg path+path{stroke:var(--hx-ink3)}
.sh-hx-kicker svg path:first-child{stroke:var(--hx-pa)}
.sh-hx-kicker svg path+path{stroke:var(--hx-pb)}
.sh-hx-kicker svg circle{fill:var(--hx-violet)}
.sh-hx-key-l{font:600 14px/1.35 Sora,system-ui,sans-serif;text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color .2s}
.sh-hx-key-f{grid-column:2;font:400 12px/1.45 Inter,system-ui,sans-serif;color:var(--hx-ink3)}
.sh-hx-key:hover .sh-hx-key-l,.sh-hx-key.is-active .sh-hx-key-l{text-decoration-color:var(--k)}
.sh-hx-f2{display:block}
.sh-hx-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-hx-live{display:flex;align-items:baseline;gap:6px;color:var(--hx-ink3)}
.sh-hx-live::before{content:"";align-self:center;width:6px;height:6px;border-radius:50%;background:#22C55E}
.sh-hx-live[hidden]{display:none}
.sh-hx a:focus-visible,.sh-hx button:focus-visible{outline:2px solid var(--hx-focus);outline-offset:3px;border-radius:6px}
.sh-hx-stage{position:absolute;top:50%;right:0;width:calc(100% - 608px);height:min(62vh,600px);transform:translateY(-50%);pointer-events:none}
.sh-hx-copy>.sh-hx-stage{pointer-events:none;max-width:none}
.sh-hx-fallback{position:absolute;top:50%;left:50%;height:100%;max-width:100%;transform:translate(-50%,-50%)}
/* with JS the flat mark would flash before the film's first frame: it waits, and shows only if the canvas never draws */
@keyframes hxFb{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}
.hx-js .sh-hx-fallback{animation:hxFb .45s 2.6s both}
.sh-hx.is-drawn .sh-hx-fallback{display:none}
@media (prefers-reduced-motion:reduce){.hx-js #world-home .sh-hx-fallback{animation:hxFb 0s 2.6s both!important}}
.sh-hx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sh-hx-cap{position:absolute;z-index:3;margin:0;font:400 12px/16px ui-monospace,SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;letter-spacing:.01em;color:var(--hx-ink2);text-align:center;white-space:nowrap;text-wrap:balance;pointer-events:none;opacity:0}
.sh-hx-tip{position:absolute;z-index:4;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border:1px solid rgba(148,163,184,.25);border-radius:6px;background:rgba(6,9,20,.92);font:400 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#CBD5E1;pointer-events:none;opacity:0;transition:opacity .15s}
.sh-hx-tip b{font-weight:600;color:#F8FAFC}
.sh-hx-tip.is-on{opacity:1}
html[data-theme="light"] .sh-hx-tip{background:rgba(255,255,255,.96);border-color:#D1DAE8;color:#334155}
html[data-theme="light"] .sh-hx-tip b{color:#0F172A}
/* Skip / Replay: on the caption band under the picture, 28 px tall with the hit area extended to 44 px */
.sh-hx-skip{position:absolute;z-index:4;display:none;align-items:center;gap:7px;height:28px;padding:0 10px;border:0;background:none;font:500 12px/1 Inter,system-ui,sans-serif;color:var(--hx-ink3);cursor:pointer}
.sh-hx-skip::before{content:"";position:absolute;top:-16px;right:0;bottom:0;left:0}
.sh-hx.is-live .sh-hx-skip:not([hidden]){display:inline-flex}
.sh-hx-skip svg{flex:none;width:10px;height:10px;opacity:.8}
.sh-hx-skip .i-rp,.sh-hx-skip.is-replay .i-sk{display:none}
.sh-hx-skip.is-replay .i-rp{display:block}
.sh-hx-skip:hover{color:var(--hx-ink2)}
.sh-hx-skip:hover span{text-decoration:underline;text-underline-offset:3px}
/* copy gating (SPEC 4.7): each element reveals at its delay; the same animation is the failsafe */
@keyframes hxIn{from{visibility:hidden;opacity:0;transform:translateY(10px)}to{visibility:visible;opacity:1;transform:none}}
/* longhands only: an animation shorthand here would reset animation-delay and outrank the delay rules */
.hx-intro .sh-hx [data-hx-copy]:not(.sh-hx-title){animation-name:hxIn;animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both}
.hx-intro .sh-hx [data-hx-copy="kicker"]{animation-delay:.9s}
.hx-intro .sh-hx [data-hx-copy="word"]{animation-delay:1.05s}
.hx-intro .sh-hx [data-hx-copy="desc"]{animation-delay:1.25s}
.hx-intro .sh-hx [data-hx-copy="tagline"]{animation-delay:1.5s}
.hx-intro .sh-hx [data-hx-copy="cta"]{animation-delay:1.75s}
.hx-intro .sh-hx [data-hx-copy="keys"]{animation-delay:1.95s}
html.hx-skip .sh-hx [data-hx-copy]{animation:none!important;visibility:visible!important;opacity:1!important;transform:none!important}
/* mobile (SPEC 4.8): kicker, title, tagline, stage, CTA, keys; the canvas covers only the stage */
@media (max-width:991.98px),(pointer:coarse){
  .sh-hx{display:block;height:auto;min-height:0;padding:16px 0 32px}
  .sh-hx-copy.container{padding-left:16px;padding-right:16px}
  .sh-hx-copy>*{max-width:none}
  .sh-hx-kicker{font-size:12px;margin-bottom:10px}
  .sh-hx-word{font-size:clamp(38px,11.2vw,56px)}
  .sh-hx-desc{margin-top:10px;font-size:clamp(19px,5.4vw,24px);line-height:1.25}
  .sh-hx-tagline{margin-top:12px;font-size:15px}
  .sh-hx-stage{position:relative;top:auto;right:auto;width:100%;height:clamp(240px,calc((100vw - 32px)*.78),340px);height:clamp(148px,min(calc((100vw - 32px)*.78),calc(100svh - 416px)),340px);margin:28px 0 32px;transform:none}
  .sh-hx-cta{display:flex;justify-content:center;height:48px;margin-top:0}
  .sh-hx-keys{grid-template-columns:1fr;gap:0;margin-top:10px}
  .sh-hx-key{min-height:44px;padding:5px 0;grid-template-columns:16px auto 1fr;align-items:center}
  .sh-hx-key-f{grid-column:3;justify-self:end;text-align:right}
  .sh-hx-f2{display:inline}
  .sh-hx-sep{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .sh-hx-live{display:inline-flex;margin-left:6px}
  .sh-hx-skip{height:44px}
  .sh-hx-skip::before{display:none}
  .sh-hx-cap{font-size:10px;line-height:14px}
}
/* 320 to 359 px: facts stack under their labels, and a two-line caption keeps its gap to the CTA */
@media (max-width:359.98px){
  .sh-hx-key{grid-template-columns:16px 1fr}
  .sh-hx-key-f{grid-column:2;justify-self:start;text-align:left}
  .sh-hx-stage{margin-bottom:44px}
}
@media (min-width:992px) and (pointer:fine){.sh-hx-skip.is-replay{height:34px;padding:0 14px;border:1px solid color-mix(in srgb,var(--hx-ink3) 50%,transparent);border-radius:999px;color:var(--hx-ink2)}.sh-hx-skip.is-replay:hover{border-color:var(--hx-ink2);color:var(--hx-ink)}.sh-hx-skip.is-replay:hover span{text-decoration:none}}