/* GetKryon production v3 — Dala-style dark stage, scroll-driven dense particle choreography */
:root{
  --void:#000;--white:#fff;--ash:#9a9a9a;--mist:#bdbdbd;
  --lime:#78ff2f;--green:#21ee74;--cyan:#12e6de;--amber:#ffc233;--violet:#9b6cff;
  --max:1280px;--pad:clamp(22px,4vw,56px);--header-h:76px;
  --display:clamp(62px,8.2vw,118px);--h2:clamp(48px,6.5vw,92px);--h3:clamp(34px,4vw,58px);
  --body:clamp(17px,1.25vw,19px);color-scheme:dark;
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--lime);color:#000}
.skip-link{position:fixed;z-index:1000;left:12px;top:-70px;padding:12px 16px;background:#fff;color:#000;border-radius:999px;transition:.2s}.skip-link:focus{top:12px}

/* small fixed top navigation, intentionally quiet */
.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header-h);display:flex;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.22),transparent);pointer-events:none}
.nav-shell{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:28px;pointer-events:auto}
.brand{display:flex;align-items:center;width:154px;height:42px}.brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
.nav-links{display:flex;justify-content:center;gap:clamp(18px,2.4vw,38px);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);font-weight:600}
.nav-links a{position:relative;transition:color .2s}.nav-links a:hover,.nav-links a:focus-visible{color:#fff}.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--lime);transition:right .25s}.nav-links a:hover:after{right:0}
.nav-actions{display:flex;align-items:center;gap:15px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}.nav-actions .login{color:var(--mist)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 19px;border-radius:999px;background:var(--lime);color:#061004;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;transition:transform .2s,box-shadow .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 42px rgba(120,255,47,.16)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.07em}.btn-ghost:after{content:"↗";color:var(--lime)}

/* fixed canvas = one continuous scene, not separate cards/blocks */
.particle-stage{position:fixed;z-index:0;inset:0;pointer-events:none;overflow:hidden}.particle-stage canvas{width:100%;height:100%;display:block}.particle-vignette{position:fixed;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 47%,transparent 42%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.42) 100%)}
main,.site-footer{position:relative;z-index:2}

/* Long scene heights intentionally slow the choreography. Particle morphs contain explicit hold zones in JS. */
.scene{position:relative;min-height:136vh;display:flex;align-items:center}
.scene.hero{min-height:144vh;padding-top:var(--header-h)}
.scene--statement{min-height:128vh}
.scene--dense{min-height:144vh}
.scene--final{min-height:142vh}
.scene-inner{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;min-height:82vh}
.scene-inner.full{display:flex;justify-content:center;text-align:center}.scene-copy{max-width:600px}.scene-copy.right{grid-column:2}.scene-copy.left{grid-column:1}.scene-copy.center{max-width:940px;margin:auto;text-align:center}
.kicker{margin:0 0 20px;color:var(--amber);font-size:12px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:700}.hero .kicker{color:var(--lime)}
h1,h2,h3{font-weight:400;letter-spacing:-.045em;margin:0;text-wrap:balance}h1{font-size:var(--display);line-height:.84;max-width:840px}h2{font-size:var(--h2);line-height:.91}h3{font-size:var(--h3);line-height:.96}
.copy{margin:26px 0 0;color:var(--mist);font-size:var(--body);font-weight:300;line-height:1.52;max-width:540px}.center .copy{margin-left:auto;margin-right:auto;max-width:720px}.copy strong{color:#fff;font-weight:400}
.hero-actions{display:flex;gap:20px;align-items:center;margin-top:34px}.hero-actions--center{justify-content:center}.microline{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:32px;color:#7f7f7f;font-size:12px;letter-spacing:.07em;text-transform:uppercase}.microline span:before{content:"•";color:var(--lime);margin-right:8px}
.scroll-note{position:absolute;left:var(--pad);bottom:38px;color:#747474;font-size:11px;text-transform:uppercase;letter-spacing:.14em;display:flex;align-items:center;gap:12px}.scroll-note:before{content:"";width:34px;height:1px;background:#4f4f4f}
.word-accent{color:var(--lime)}.word-cyan{color:var(--cyan)}
.scene--statement .scene-copy{max-width:980px}.scene--statement h2{font-size:clamp(44px,5.3vw,78px)}.scene--final h2{font-size:clamp(50px,7vw,102px)}
.meta-lines{margin-top:34px;display:grid;gap:12px;max-width:520px}.meta-line{display:flex;gap:20px;align-items:baseline;color:var(--mist);font-size:14px;font-weight:300}.meta-line b{color:var(--lime);font-size:11px;letter-spacing:.12em;text-transform:uppercase;min-width:84px}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.22,.8,.24,1),transform .95s cubic-bezier(.22,.8,.24,1)}.reveal.is-visible{opacity:1;transform:none}
.footer-min{padding:60px var(--pad) 38px;color:#707070;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.footer-min .footer-inner{width:min(var(--max),100%);margin:auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer-links{display:flex;gap:24px}.footer-links a:hover{color:#fff}

/* Internal SEO pages keep the same visual language without the heavy particle scene. */
.seo-page{min-height:100vh;background:#000}.seo-page main{padding-top:calc(var(--header-h) + 70px)}.seo-wrap{width:min(1000px,calc(100% - 2*var(--pad)));margin:auto}.seo-hero{padding:60px 0 100px}.seo-hero h1{font-size:clamp(54px,8vw,100px);line-height:.9}.seo-hero .copy{max-width:720px}.seo-section{padding:72px 0}.seo-section h2{font-size:clamp(38px,5vw,68px);max-width:800px}.seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:42px}.seo-grid p,.seo-grid li{font-size:17px;line-height:1.65;color:var(--mist);font-weight:300}.seo-grid strong{color:#fff;font-weight:400}.seo-grid ul{padding-left:19px}.seo-actions{display:flex;gap:20px;margin-top:34px}.faq-list{display:grid;gap:0;margin-top:40px}.faq-list details{padding:24px 0;border-bottom:1px solid #202020}.faq-list summary{cursor:pointer;font-size:20px}.faq-list p{color:var(--mist);line-height:1.6;max-width:760px}

@media(max-width:900px){
 :root{--header-h:70px;--display:clamp(54px,15vw,86px);--h2:clamp(44px,11vw,72px);--pad:22px}
 .nav-shell{grid-template-columns:145px 1fr auto}.brand{width:136px}.nav-links{display:none}.nav-actions .login{display:none}.nav-actions .btn-primary{min-height:40px;padding:0 15px}
 .scene{min-height:122svh}.scene.hero{min-height:132svh}.scene--dense{min-height:130svh}.scene--statement{min-height:118svh}.scene--final{min-height:128svh}
 .scene-inner{display:flex;align-items:flex-end;min-height:86svh}.scene-copy,.scene-copy.right,.scene-copy.left{max-width:94%;margin:0 0 8vh;grid-column:auto}.scene--statement .scene-inner,.scene--final .scene-inner{align-items:center}.scene--statement .scene-copy,.scene--final .scene-copy{max-width:100%;margin:0}.scene--final .scene-copy{text-align:center}
 .hero .scene-copy{margin-bottom:8vh}.copy{font-size:17px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-actions--center{align-items:center}.microline{display:none}.scroll-note{left:22px;bottom:22px}
 .seo-grid{grid-template-columns:1fr;gap:22px}.seo-actions{flex-direction:column;align-items:flex-start}.footer-min .footer-inner{flex-direction:column}.footer-links{flex-wrap:wrap}
}
@media(max-width:520px){.brand{width:126px}.nav-actions .btn-primary{font-size:10px;padding:0 13px}.site-header{background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.12),transparent)}.scene-copy{max-width:100%}.kicker{margin-bottom:14px}.copy{margin-top:20px}.scene--statement h2{font-size:clamp(38px,10.5vw,56px)}.meta-line{display:block}.meta-line b{display:block;margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn-primary{transition:none}}