/* ==================================================================
   Second Key · secondkey.ai
   A security console from the near future. Calm, sparse, one green.
   Tokens live in ../tokens.css. Hidden states are scoped to html.js,
   so the page reads in full without JavaScript.
   ================================================================== */
:root{--nav-h:72px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--sk-black)}
body{margin:0;background:var(--sk-black);color:var(--sk-ink);font-family:var(--sk-sans);font-weight:300;font-size:var(--sk-fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
body.is-loading{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-weight:400}
::selection{background:var(--sk-green);color:var(--sk-black)}
:focus-visible{outline:1px solid var(--sk-green);outline-offset:4px}
[id]{scroll-margin-top:calc(var(--nav-h) - 1px)}
.skip{position:absolute;left:-999px;top:12px;z-index:10000;background:var(--sk-green);color:var(--sk-black);padding:10px 16px;font-family:var(--sk-mono);font-size:12px}
.skip:focus{left:12px}
.wrap{max-width:var(--sk-maxw);margin:0 auto}
.nw{white-space:nowrap}

/* ---------- Console texture: grid, scanlines, registration marks ---------- */
.gridbg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--sk-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--sk-grid) 1px,transparent 1px),
    linear-gradient(var(--sk-grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--sk-grid-major) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 35%,#000 25%,rgba(0,0,0,.35) 75%,transparent 100%);
  mask-image:radial-gradient(130% 95% at 50% 35%,#000 25%,rgba(0,0,0,.35) 75%,transparent 100%)}
.scanlines{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.32;background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.marks{position:absolute;inset:18px;z-index:1;pointer-events:none;--m:rgba(61,255,160,.38);
  background:
    linear-gradient(var(--m),var(--m)) left 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--m),var(--m)) right 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--m),var(--m)) left 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--m),var(--m)) right 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right 6px bottom 0/1px 13px no-repeat}

/* ---------- Small parts ---------- */
.mono{font-family:var(--sk-mono);font-weight:400;font-size:var(--sk-fs-label);letter-spacing:var(--sk-track-label);text-transform:uppercase;color:var(--sk-muted)}
.led{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--sk-green);box-shadow:0 0 0 3px rgba(61,255,160,.12)}
.js .led{animation:sk-blink 2.4s ease-in-out infinite}
@keyframes sk-blink{0%,100%{opacity:1}50%{opacity:.35}}
.diamond{display:inline-block;width:6px;height:6px;border:1px solid var(--sk-green);transform:rotate(45deg)}
.caret{display:inline-block;width:.6em;height:1.1em;margin-left:3px;vertical-align:-.18em;background:var(--sk-green)}
.js .caret{animation:sk-caret 1s steps(1) infinite}
@keyframes sk-caret{50%{opacity:0}}
.label{display:flex;align-items:center;gap:16px;font-family:var(--sk-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sk-green);margin:0 0 clamp(36px,4.5vw,64px)}
.label span{padding:4px 7px;border:1px solid var(--sk-line-2);color:var(--sk-muted);letter-spacing:.08em}
.label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--sk-line-2),transparent)}
.panel{position:relative;background:linear-gradient(180deg,rgba(14,21,18,.92),rgba(10,15,13,.92));border:1px solid var(--sk-line)}
.panel__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 16px;border-bottom:1px solid var(--sk-line);font-size:10px;color:var(--sk-muted)}
.panel__bar > span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:17px 26px;border:1px solid var(--sk-line-2);font-family:var(--sk-mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sk-ink);background:transparent;cursor:pointer;white-space:nowrap;line-height:1;transition:background-color .3s,border-color .3s,color .3s}
.btn svg{width:14px;height:14px;flex:none;transition:transform .45s var(--sk-ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--sk-green);border-color:var(--sk-green);color:#03130b}
.btn--solid:hover{background:var(--sk-green-hi);border-color:var(--sk-green-hi)}
.btn--line{border-color:rgba(61,255,160,.4)}
.btn--line:hover{border-color:var(--sk-green);color:var(--sk-green-hi)}
.btn--small{padding:12px 16px;font-size:10px}
.btn[disabled]{opacity:.6;cursor:wait}

/* ---------- Loader: the mark draws, a bar fills ---------- */
.loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:22px;background:var(--sk-black);transition:opacity .6s ease,visibility .6s}
.loader.done{opacity:0;visibility:hidden}
.loader__mark{width:64px;height:64px;color:var(--sk-green);stroke-dasharray:1;stroke-dashoffset:1;animation:sk-draw 1s var(--sk-ease) forwards}
.loader__bar{display:block;width:120px;height:1px;background:var(--sk-line)}
.loader__bar b{display:block;height:100%;background:var(--sk-green);transform:scaleX(0);transform-origin:left;animation:sk-fill 1.1s ease-out forwards}
@keyframes sk-draw{to{stroke-dashoffset:0}}
@keyframes sk-fill{to{transform:none}}

/* ---------- Nav: mark, name, one button ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--sk-gutter);border-bottom:1px solid transparent;transition:background-color .4s,border-color .4s}
.nav.scrolled{background:rgba(5,7,6,.9);border-color:var(--sk-line)}
.brand{display:inline-flex;align-items:center;gap:13px;color:var(--sk-ink)}
.mark{width:28px;height:28px;color:var(--sk-green);flex:none}
.brand__word{font-family:var(--sk-display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}

/* ---------- Screen 1: hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 30px) var(--sk-gutter) 84px;overflow:hidden}
.hero__grid{position:relative;z-index:2;width:100%;max-width:var(--sk-maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:5vw;align-items:center}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:30px;color:var(--sk-green-hi)}
.hero__title{font-family:var(--sk-display);font-size:clamp(28px,4.1vw,68px);line-height:1.12;letter-spacing:.005em;text-transform:uppercase;color:var(--sk-ink);margin-bottom:30px}
.hero__title em{font-style:normal;color:var(--sk-green)}
.hero__sub{max-width:44ch;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--sk-ink-2);margin-bottom:40px}
.hero__next{position:absolute;z-index:2;left:var(--sk-gutter);bottom:30px;display:flex;align-items:center;gap:12px;font-size:10px}
.hero__next i{display:block;width:34px;height:1px;background:var(--sk-green);transform-origin:left;animation:sk-pulse-line 2.6s var(--sk-ease) infinite}
@keyframes sk-pulse-line{0%{transform:scaleX(.2)}50%{transform:scaleX(1)}100%{transform:scaleX(.2)}}
.hero__next:hover{color:var(--sk-green-hi)}

/* The schematic: two keys, drawn by a laser line */
.cad{width:100%;height:auto;max-height:calc(100svh - var(--nav-h) - 130px);overflow:visible}
.cad circle,.cad path{vector-effect:non-scaling-stroke}
.cad__key circle,.cad__key path{fill:none;stroke:var(--sk-ink);stroke-width:1.1;opacity:.92}
.cad__key--b circle,.cad__key--b path{stroke:var(--sk-green)}
.cad__bolt circle{stroke-width:.8}
.cad .cad__fine{stroke-width:.6;opacity:.5}
.cad__cl path{fill:none;stroke:var(--sk-green-lo);stroke-width:.7;stroke-dasharray:14 4 2 4}
.cad__dim path{fill:none;stroke:var(--sk-muted);stroke-width:.6}
.cad .cad__arrow{fill:var(--sk-muted);stroke:none}
.cad__call path{fill:none;stroke:var(--sk-green-lo);stroke-width:.7}
.cad .cad__pt{fill:var(--sk-green);stroke:none}
.cad text{font-family:var(--sk-mono);font-size:10px;letter-spacing:.06em;fill:var(--sk-muted)}
.cad__txt--hi text{fill:var(--sk-green)}
.cad__part text{font-size:11px;letter-spacing:.16em;fill:var(--sk-ink)}
.cad__part .cad__sub{font-size:9.5px;fill:var(--sk-green)}
.cad__laser{opacity:0;pointer-events:none}
.js .cad__reveal{height:0}
.js .is-ready .cad__reveal{height:660px;transition:height var(--sk-scan) linear .15s}
.js .is-ready .cad__laser{animation:sk-laser var(--sk-scan) linear .15s 1 forwards,sk-laser-idle 9s linear 3.4s infinite}
@keyframes sk-laser{0%{transform:translateY(-40px);opacity:1}96%{opacity:1}100%{transform:translateY(620px);opacity:0}}
@keyframes sk-laser-idle{0%{transform:translateY(-40px);opacity:0}4%{opacity:.4}55%{transform:translateY(620px);opacity:.4}56%,100%{transform:translateY(620px);opacity:0}}
.cad.is-paused .cad__laser{animation-play-state:paused}

/* Load-in choreography */
.lr{display:block;overflow:hidden;padding:0 .1em .08em;margin:0 -.1em -.08em}
.lr__in{display:block}
.js .lr__in{transform:translateY(110%);transition:transform 1.2s var(--sk-ease)}
.js .is-ready .lr__in{transform:none}
.js .is-ready .lr:nth-child(2) .lr__in{transition-delay:.12s}
.js .fade{opacity:0;transform:translateY(12px);transition:opacity 1.1s ease,transform 1.1s var(--sk-ease)}
.js .is-ready .fade{opacity:1;transform:none}
.js .is-ready .fade[data-d="1"]{transition-delay:.2s}
.js .is-ready .fade[data-d="2"]{transition-delay:.5s}
.js .is-ready .fade[data-d="3"]{transition-delay:.7s}
.js .is-ready .fade[data-d="4"]{transition-delay:1.1s}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s var(--sk-ease);transition-delay:calc(var(--i,0) * .09s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Screen 2: what you get ---------- */
.get,.why{position:relative;padding:var(--sk-section) var(--sk-gutter)}
.get{padding-top:clamp(70px,8vw,120px)}
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(4,1fr);gap:14px}}
.card{position:relative;padding:28px 26px 30px;border:1px solid var(--sk-line);background:linear-gradient(180deg,rgba(14,21,18,.85),rgba(10,15,13,.6));transition:border-color .4s}
.card:hover{border-color:var(--sk-line-2)}
.card.is-off *{animation-play-state:paused!important}
.card::before{content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;border-left:1px solid var(--sk-green);border-top:1px solid var(--sk-green)}
.card h3{font-family:var(--sk-display);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--sk-ink);margin:26px 0 10px}
.card p{font-size:16.5px;line-height:1.58;color:var(--sk-ink-2)}

/* the four console icons */
.ico{width:132px;height:auto;overflow:visible}
.ico *{fill:none;stroke:var(--sk-green-lo);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ico--check .ico__tiles rect{stroke:var(--sk-muted);opacity:.55}
.ico--check .ico__hit rect,.ico--check .ico__hit path{stroke:var(--sk-green)}
.ico--check .ico__hit rect{fill:rgba(61,255,160,.12)}
.ico__sweep{stroke:var(--sk-green)!important;stroke-width:1.4!important}
.ico--block .ico__field{stroke:var(--sk-green);opacity:.85}
.ico--block .ico__field--b{opacity:.35}
.ico--block .ico__lock *{stroke:var(--sk-ink)}
.ico--block .ico__cursor path{fill:var(--sk-ink);stroke:var(--sk-black);stroke-width:1}
.ico--block .ico__x{stroke:var(--sk-green-hi);opacity:0}
.ico--watch .ico__base{stroke:var(--sk-line-2)}
.ico--watch .ico__ticks{stroke:var(--sk-muted)}
.ico--watch .ico__wave{stroke:var(--sk-green);stroke-width:1.4}
.ico--watch .ico__dot{fill:var(--sk-green);stroke:none}
.ico--call circle,.ico--call path{stroke:var(--sk-ink)}
.ico--call .ico__ring{stroke:var(--sk-line-2)}
.ico--call .ico__arc{stroke:var(--sk-green)}
.ico--call .ico__led{fill:var(--sk-green);stroke:none}
.js .ico__sweep{opacity:0}
.js .card.in .ico__sweep{animation:sk-ico-sweep 3.2s linear infinite}
.js .card.in .ico--check .ico__hit{animation:sk-ico-hit 3.2s linear infinite}
@keyframes sk-ico-sweep{0%{transform:translateX(0);opacity:0}6%{opacity:1}88%{opacity:1}100%{transform:translateX(112px);opacity:0}}
@keyframes sk-ico-hit{0%,52%{opacity:.25}58%,100%{opacity:1}}
.js .card.in .ico__cursor{animation:sk-ico-cursor 3.2s var(--sk-ease) infinite}
.js .card.in .ico__x{animation:sk-ico-x 3.2s linear infinite}
@keyframes sk-ico-cursor{0%{transform:translateX(0)}45%,85%{transform:translateX(36px)}100%{transform:translateX(0)}}
@keyframes sk-ico-x{0%,42%{opacity:0}46%,80%{opacity:1}86%,100%{opacity:0}}
.js .card.in .ico__wave{stroke-dasharray:60 240;animation:sk-ico-wave 3s linear infinite}
@keyframes sk-ico-wave{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
.js .card.in .ico__dot,.js .card.in .ico__led{animation:sk-blink 1.6s ease-in-out infinite}
.js .card.in .ico__arc--1{animation:sk-blink 1.6s ease-in-out infinite}
.js .card.in .ico__arc--2{animation:sk-blink 1.6s ease-in-out .3s infinite}

/* ---------- Screen 3: why now ---------- */
.why__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1000px){.why__grid{grid-template-columns:5fr 7fr;gap:6vw}}
.why__line{font-size:clamp(21px,2vw,29px);line-height:1.45;color:var(--sk-ink);max-width:30ch}
.why__line em{font-style:normal;color:var(--sk-green)}
.why__tag{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:10.5px}

.replay__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);align-items:stretch;padding:28px 28px 104px}
.rp{padding:20px 20px 22px;border:1px solid var(--sk-line);background:rgba(5,7,6,.7);transition:border-color .35s,background-color .35s}
.rp__k{font-size:10px;color:var(--sk-faint);margin-bottom:16px}
.rp__morse{display:flex;flex-wrap:wrap;gap:10px 11px;align-items:center;min-height:48px;margin-bottom:14px}
.rg{display:inline-flex;gap:3px;align-items:center;color:var(--sk-faint);transition:color .2s}
.rg i{display:block;height:5px;background:currentColor;border-radius:2.5px}
.rg .dit{width:5px}.rg .dah{width:15px}
.rg.on{color:var(--sk-green)}
.rw{width:6px}
.rp__static{font-size:12px;letter-spacing:.14em;text-transform:none;color:var(--sk-green)}
.rp__plain{font-size:clamp(14px,1.2vw,17px);letter-spacing:.12em;color:var(--sk-ink);min-height:1.5em;white-space:nowrap;overflow:hidden}
.rp__link{position:relative;display:flex;align-items:center;justify-content:center}
.rp__link::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:repeating-linear-gradient(90deg,var(--sk-line-2) 0 5px,transparent 5px 9px)}
.rp__link i{position:absolute;left:6px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:var(--sk-amber);opacity:0;transform:translateX(var(--px,0px))}
.rp__link span{position:absolute;top:calc(50% + 10px);font-size:8.5px;color:var(--sk-faint)}
.rp__bal{display:flex;align-items:baseline;gap:8px;font-size:clamp(24px,2.5vw,38px);letter-spacing:.02em;color:var(--sk-ink);font-variant-numeric:tabular-nums;text-transform:none;white-space:nowrap;transition:color .3s}
.rp__bal small{font-size:10px;color:var(--sk-muted)}
.rp__out{height:3px;margin:16px 0 12px;background:var(--sk-line)}
.rp__out i{display:block;height:100%;width:var(--o,0%);background:var(--sk-amber)}
.rp__status{font-size:10.5px;color:var(--sk-green)}
.alert{position:absolute;left:28px;right:28px;bottom:26px;display:flex;align-items:center;gap:20px;padding:15px 18px;border:1px solid var(--sk-green);background:rgba(61,255,160,.07);transition:opacity .25s,transform .35s var(--sk-ease)}
.alert__bar{display:flex;align-items:center;gap:10px;flex:none;font-size:12px;letter-spacing:.24em;color:var(--sk-green)}
.alert__msg{font-size:16.5px;color:var(--sk-ink)}
/* replay states (JS sets them; without JS the final frame shows) */
.replay.s-send .rp__link i{opacity:1}
.replay.s-drain .rp--wallet{border-color:rgba(255,181,71,.55);background:rgba(255,181,71,.04)}
.replay.s-drain .rp__bal{color:var(--sk-amber)}
.replay.s-drain .rp__status{color:var(--sk-amber)}
.replay.s-stop .rp--wallet{border-color:rgba(61,255,160,.5)}
.replay.s-stop .rp__link::before{background:var(--sk-green)}
.js .replay:not(.s-stop) .alert{opacity:0;transform:translateY(6px)}

/* ---------- Screen 4: the promise ---------- */
.promise{position:relative;min-height:74vh;display:grid;place-items:center;padding:120px var(--sk-gutter);overflow:hidden;border-top:1px solid var(--sk-line);border-bottom:1px solid var(--sk-line)}
.media{position:absolute;inset:0;overflow:hidden;background:var(--sk-black)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media video{opacity:0;transition:opacity 1.6s ease}
.media.is-live video{opacity:1}
.promise__shade{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,rgba(5,7,6,.55),rgba(5,7,6,.9)),linear-gradient(180deg,var(--sk-black),transparent 22%,transparent 78%,var(--sk-black))}
.promise__line{position:relative;z-index:2;max-width:27em;text-align:center;font-family:var(--sk-display);font-size:clamp(21px,2.7vw,42px);line-height:1.42;letter-spacing:.01em;color:var(--sk-ink);text-wrap:balance}
.promise__line em{font-style:normal;color:var(--sk-green)}
.promise__line > span{display:block}

/* ---------- The invitation ---------- */
.invite{position:relative;padding:clamp(90px,10vw,150px) var(--sk-gutter)}
.invite__wrap{max-width:820px}
.invite__title{text-align:center;font-family:var(--sk-display);font-size:clamp(22px,2.6vw,38px);line-height:1.3;color:var(--sk-ink);margin-bottom:clamp(30px,4vw,48px)}
.invite__title em{font-style:normal;color:var(--sk-green)}
.term{background:#0a0f0d}
.term__inner{padding:clamp(22px,3.4vw,40px)}
.form__row{display:grid;grid-template-columns:1fr;gap:0 28px}
@media(min-width:700px){.form__row{grid-template-columns:1fr 1fr}}
.fld{position:relative;margin-bottom:24px}
.fld label{display:block;margin-bottom:6px;font-family:var(--sk-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sk-muted);transition:color .3s}
.fld label em{font-style:normal;margin-left:8px;letter-spacing:.04em;text-transform:none;color:var(--sk-faint)}
.fld input,.fld textarea{display:block;width:100%;padding:10px 0 10px;background:transparent;border:0;border-bottom:1px solid var(--sk-line-2);border-radius:0;font-family:var(--sk-sans);font-weight:300;font-size:18px;color:var(--sk-ink);caret-color:var(--sk-green);outline:none;transition:border-color .3s,background-color .3s;-webkit-appearance:none;appearance:none}
.fld textarea{resize:vertical;min-height:62px;line-height:1.5}
.fld:focus-within label{color:var(--sk-green)}
.fld input:focus,.fld textarea:focus{border-color:var(--sk-green);background:linear-gradient(0deg,rgba(61,255,160,.05),transparent 70%)}
.fld.invalid input,.fld.invalid textarea{border-color:var(--sk-red)}
.fld.invalid label{color:#ff8b80}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:6px}
.form__warn{max-width:38ch;font-size:10px;line-height:1.7;letter-spacing:.06em;text-transform:none;color:var(--sk-muted)}
.form__error{margin-top:20px;padding:14px 16px;border:1px solid rgba(255,90,78,.35);border-left:2px solid var(--sk-red);background:var(--sk-red-wash)}
.form__error b{display:block;margin-bottom:4px;font-weight:400;font-size:10px;color:#ff8b80}
.form__error p{font-size:15.5px;line-height:1.55;color:var(--sk-ink-2)}
.received{text-align:center;padding:12px 0 16px;outline:none}
.lock{width:min(100%,280px);height:auto;margin:0 auto 26px;overflow:visible}
.lock *{fill:none;stroke:var(--sk-green);stroke-width:1.4;stroke-linecap:square}
.lock__plate *{stroke-dasharray:1;stroke-dashoffset:1}
.lock__arc{stroke:var(--sk-green-hi);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1}
.lock__key{transform:translateX(80px);opacity:0}
.lock__key *{stroke:var(--sk-ink)}
.lock__turn{transform-box:view-box;transform-origin:150px 70px}
.received.on .lock__plate *{animation:sk-draw .9s var(--sk-ease) forwards}
.received.on .lock__key{animation:sk-keyin .8s var(--sk-ease) .3s forwards}
.received.on .lock__turn{animation:sk-turn .5s cubic-bezier(.6,0,.3,1) 1.1s forwards}
.received.on .lock__arc{animation:sk-draw .6s var(--sk-ease) 1.45s forwards}
.received h3{font-family:var(--sk-display);font-size:clamp(26px,3vw,40px);color:var(--sk-ink);margin-bottom:10px}
.received p{font-size:19px;color:var(--sk-ink-2)}
.received h3,.received p{opacity:0;transform:translateY(8px)}
.received.on h3{animation:sk-up .8s var(--sk-ease) 1.65s forwards}
.received.on p{animation:sk-up .8s var(--sk-ease) 1.85s forwards}
@keyframes sk-keyin{to{transform:none;opacity:1}}
@keyframes sk-turn{to{transform:scaleY(.14)}}
@keyframes sk-up{to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
.footer{padding:30px var(--sk-gutter) 34px;border-top:1px solid var(--sk-line)}
.footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 30px}
.footer__row > p:first-child{font-size:13.5px;color:var(--sk-muted);max-width:76ch}
.footer__links{display:flex;gap:22px;font-size:10px;white-space:nowrap}
.footer__links a{transition:color .3s}
.footer__links a:hover{color:var(--sk-green-hi)}

/* ---------- Phones ---------- */
@media(max-width:899px){
  .hero__grid{grid-template-columns:1fr}
  .cad{position:absolute;z-index:-1;right:-52vw;top:30%;width:auto;height:64svh;max-height:none;opacity:.11}
  .cad .cad__txt,.cad .cad__part,.cad .cad__dim,.cad .cad__call{display:none}
  .replay__body{grid-template-columns:1fr;grid-template-rows:auto 44px auto;padding:16px 16px 116px}
  .rp{padding:16px 16px 18px}
  .rp__link::before{left:50%;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:repeating-linear-gradient(180deg,var(--sk-line-2) 0 5px,transparent 5px 9px)}
  .rp__link i{left:50%;top:4px;margin:0 0 0 -4.5px;transform:translateY(var(--px,0px))}
  .rp__link span{top:auto;left:calc(50% + 12px)}
  .alert{left:16px;right:16px;bottom:16px;flex-direction:column;align-items:flex-start;gap:6px}
}
@media(max-width:640px){
  :root{--nav-h:60px}
  .marks{display:none}
  .brand__word{font-size:11px;letter-spacing:.24em}
  .mark{width:24px;height:24px}
  .btn--small{padding:10px 12px;font-size:9.5px;letter-spacing:.12em}
  .hero{padding-bottom:70px}
  .hero__title{font-size:clamp(25px,7.6vw,34px)}
  .kicker{margin-bottom:22px}
  .hero__sub{margin-bottom:32px}
  .card{display:grid;grid-template-columns:96px 1fr;gap:4px 18px;padding:20px 18px}
  .card .ico{grid-row:1/3;width:96px;align-self:start;margin-top:4px}
  .card h3{margin:0 0 6px;font-size:14px}
  .card p{font-size:15.5px}
  .footer__row{flex-direction:column}
}
@media(max-width:360px){
  .nav .btn--small{padding:9px 10px;font-size:9px}
  .brand__word{display:none}
}

/* ---------- Reduced motion and no JS ---------- */
.no-js .loader{display:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal,.js .fade,.js .lr__in{opacity:1;transform:none}
  .js .cad__reveal,.js .is-ready .cad__reveal{height:660px}
  .cad__laser{display:none}
  .loader{display:none}
}

/* ---------- Legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + clamp(60px,9vw,120px)) var(--sk-gutter) clamp(80px,10vw,140px)}
.legal h1{font-family:var(--sk-display);font-size:clamp(28px,3.6vw,48px);line-height:1.15;margin:0 0 16px;text-transform:uppercase}
.legal h1 em{font-style:normal;color:var(--sk-green)}
.legal .mono{display:block;margin-bottom:46px}
.legal h2{font-family:var(--sk-display);font-size:clamp(16px,1.6vw,20px);letter-spacing:.06em;line-height:1.3;margin:44px 0 12px;color:var(--sk-ink)}
.legal p,.legal li{color:var(--sk-ink-2);margin:0 0 14px;max-width:62ch}
.legal ul{margin:0 0 14px}
.legal li{position:relative;padding-left:22px}
.legal li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border:1px solid var(--sk-green);transform:rotate(45deg)}
.legal .note{margin-top:56px;padding-top:22px;border-top:1px solid var(--sk-line);font-size:14px;color:var(--sk-muted)}
.legal a.back{display:inline-flex;gap:12px;align-items:center;margin-top:30px;font-family:var(--sk-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sk-green-hi)}