/* ================================================================
   razinskas.lt — stilius
   ================================================================ */
:root{
  --bg:#0b0b0d;
  --fg:#ece9e2;
  --muted:rgba(236,233,226,.55);
  --faint:rgba(236,233,226,.28);
  --line:rgba(236,233,226,.12);
  --fill:rgba(236,233,226,.045);
  --accent:#2bb3a1;
  --gold:#d9b36a;
  --display:"Archivo","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f4ef;
  --fg:#141416;
  --muted:rgba(20,20,22,.58);
  --faint:rgba(20,20,22,.3);
  --line:rgba(20,20,22,.12);
  --fill:rgba(20,20,22,.045);
  --accent:#17897b;
  --gold:#b48c3a;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  overflow:hidden;-webkit-font-smoothing:antialiased;
  transition:background .6s var(--ease),color .6s var(--ease);
}
@media (pointer:fine){ body{cursor:none} body a,body button{cursor:none} }
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit}
::selection{background:var(--accent);color:#0b0b0d}

/* ---------- fonas ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{
  position:fixed;inset:-20%;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.6s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}
}

/* ---------- kursorius ---------- */
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none}
@media (pointer:fine){ .cursor{display:block} }
.cursor-dot,.cursor-ring{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:6px;height:6px;background:var(--fg);transition:transform .25s var(--ease),opacity .25s}
.cursor-ring{width:30px;height:30px;border:1px solid var(--fg);opacity:.45;transition:width .35s var(--ease),height .35s var(--ease),opacity .3s,border-color .3s,background .3s}
.cursor.is-hover .cursor-ring{width:54px;height:54px;opacity:.9;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.cursor.is-hover .cursor-dot{transform:translate(-50%,-50%) scale(.5)}
.cursor.is-down .cursor-ring{width:22px;height:22px}
.cursor.is-out{opacity:0}

/* ---------- scena ---------- */
.stage{
  position:relative;z-index:2;height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(20px,3.5vw,44px) clamp(20px,4.5vw,64px);
}
.mono{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:900;font-size:clamp(220px,46vw,640px);line-height:1;letter-spacing:-.07em;
  user-select:none;pointer-events:none;perspective:1400px;
  will-change:transform;
}
.glyph{
  position:relative;display:inline-block;pointer-events:auto;
  transform-style:preserve-3d;transition:transform 1s var(--ease);
  opacity:0;animation:monoIn 1.6s var(--ease) .1s forwards;
}
.glyph i{
  display:block;font-style:normal;
  color:var(--fill);-webkit-text-stroke:1px var(--line);
  backface-visibility:hidden;transition:color .6s,-webkit-text-stroke-color .6s;
}
.glyph .back{position:absolute;inset:0;transform:rotateY(180deg)}
.mono.rp .glyph{transform:rotateY(180deg)}
.mono.rp .glyph i{color:color-mix(in srgb,var(--accent) 9%,transparent);-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.glyph:hover i{-webkit-text-stroke-color:var(--faint)}
.glyph.tap{animation:tap .45s var(--ease)}
@keyframes tap{30%{transform:scale(.96)}100%{transform:none}}
.mono.rp .glyph.tap{animation:tapRp .45s var(--ease)}
@keyframes tapRp{30%{transform:rotateY(180deg) scale(.96)}100%{transform:rotateY(180deg)}}
@keyframes monoIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- viršus / apačia ---------- */
.top,.bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.tag{display:inline-flex;align-items:center;gap:10px}
.pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.clock{font-variant-numeric:tabular-nums;margin-left:auto}

.bottom{position:relative}
.secrets{
  position:absolute;left:50%;transform:translate(-50%,8px);
  opacity:0;transition:opacity .6s,transform .6s var(--ease);
  letter-spacing:.14em;
}
.secrets.show{opacity:1;transform:translate(-50%,0)}
.secrets b{color:var(--accent);font-weight:500}
.secrets.done b{color:var(--gold)}
.phone{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--fg);background:var(--fill);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
  animation:ring 6s ease-in-out 3s infinite;
}
.phone:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);transform:scale(1.06)}
@keyframes ring{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}
}

/* ---------- hero ---------- */
.hero{align-self:center;max-width:820px;padding:2vh 0;will-change:transform;pointer-events:none}
.hero .name,.hero .intro,.hero .cta,.hero .links a{pointer-events:auto}
.top,.bottom{pointer-events:none}
.top>*,.bottom>*,.bottom .foot-left-wrap>*{pointer-events:auto}
.eyebrow{margin:0 0 .4em 4px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.name{
  margin:0 0 .3em -.02em;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 112;
  font-size:clamp(46px,min(9.6vw,18vh),132px);line-height:.95;letter-spacing:-.035em;
}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em 0;margin-right:-.04em}
.word.italic{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--fg);transition:color .6s var(--ease)}
.name:hover .word.italic{color:var(--fg)}
.ch{
  display:inline-block;transform:translateY(112%) rotate(3deg);
  animation:rise 1.1s var(--ease) forwards;animation-delay:calc(var(--i) * 38ms + 180ms);
  transition:color .35s;
}
.ch:hover{color:var(--accent);-webkit-text-stroke-color:var(--accent);transition:color 0s}
@media (pointer:coarse){.name{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}}
.name:hover .ch{transition:color 1.4s}
@keyframes rise{to{transform:none}}

.intro{
  margin:0;max-width:34em;width:fit-content;font-size:clamp(16px,1.6vw,19px);line-height:1.55;
  color:color-mix(in srgb,var(--fg) 78%,transparent);
}
.dot{
  position:relative;display:inline-block;color:var(--accent);font:inherit;font-weight:900;line-height:0;
  transform-origin:50% 60%;transition:transform .35s var(--ease);padding:0 2px;
}
.dot::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:dotping 3.2s var(--ease) 3s infinite}
@keyframes dotping{0%{transform:scale(.3);opacity:.8}60%{transform:scale(2.2);opacity:0}100%{opacity:0}}
.dot:hover{transform:scale(1.9)}
.dot:active{transform:scale(.8)}

/* ---------- CTA ---------- */
.cta{
  position:relative;display:inline-flex;align-items:center;gap:22px;
  margin-top:clamp(18px,4vh,38px);padding:14px 16px 14px 28px;border-radius:999px;
  border:1px solid var(--line);background:var(--fill);
  text-decoration:none;overflow:hidden;isolation:isolate;
  transition:border-color .4s,background .4s,box-shadow .5s var(--ease);
  will-change:transform;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--fg) 10%,transparent) 50%,transparent 70%);
  transform:translateX(-110%);transition:transform .9s var(--ease);
}
.cta:hover::before{transform:translateX(110%)}
.cta:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 20px 60px -24px color-mix(in srgb,var(--accent) 60%,transparent)}
.cta-text{display:flex;flex-direction:column;line-height:1.05}
.cta-label{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;font-size:24px;letter-spacing:-.02em}
.cta-sub{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);margin-top:5px;transition:color .3s}
.cta:hover .cta-sub{color:var(--accent)}
.cta-arrow{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--fg);color:var(--bg);transition:transform .5s var(--ease),background .4s;
}
.cta:hover .cta-arrow{transform:translateX(4px) rotate(-35deg);background:var(--accent)}

.links{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(14px,3vh,30px);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.links a{text-decoration:none;color:var(--muted);position:relative;padding-bottom:2px;transition:color .3s}
.links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.links a:hover{color:var(--fg)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.links .quiet{color:var(--faint)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:reveal 1.1s var(--ease) forwards;animation-delay:var(--d,0s)}
.reveal.done{animation:none;opacity:1;transform:none}
.ch.done{animation:none;transform:none}
@keyframes reveal{to{opacity:1;transform:none}}

/* ---------- užuominos ---------- */
.foot-left-wrap{display:flex;align-items:center;gap:14px}
.hint-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--fill);
  font-family:var(--mono);font-size:13px;color:var(--muted);display:grid;place-items:center;
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);
}
.hint-btn:hover,.hint-btn.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--fg);transform:scale(1.06)}
.hints{
  position:fixed;left:clamp(16px,4.5vw,64px);bottom:88px;z-index:40;width:320px;padding:16px 18px;
  border-radius:22px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  transform-origin:0 100%;transform:scale(.9) translateY(10px);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .5s var(--ease),opacity .35s,visibility 0s .5s;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.hints.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.hints-head{display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--muted);margin-bottom:10px}
.hints-head span{color:var(--accent)}
.hints-list{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:7px;line-height:1.4}
.hints-list li{color:color-mix(in srgb,var(--fg) 85%,transparent);transition:color .4s}
.hints-list li.ok{color:var(--faint);text-decoration:line-through}
.hints-list li.ok::after{content:" ✓";color:var(--accent);text-decoration:none;display:inline-block}
.hints-list kbd{font:inherit;padding:1px 5px;border:1px solid var(--line);border-radius:5px;background:var(--fill)}
.hints-foot{margin-top:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- T9 klaviatūra ---------- */
.pad{
  position:fixed;right:clamp(16px,4.5vw,64px);bottom:88px;z-index:40;width:232px;padding:14px;
  border-radius:26px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  transform-origin:100% 100%;transform:scale(.85) translateY(10px);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .5s var(--ease),opacity .35s,visibility 0s .5s;
}
.pad.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.pad-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:56px;margin-bottom:12px;border-radius:14px;
  background:color-mix(in srgb,var(--fg) 6%,transparent);
  font-family:var(--mono);font-size:19px;letter-spacing:.12em;
}
.pad-screen #padNum{min-height:1.3em}
.pad-hint{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keys button,.pad-actions button{
  height:46px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 12%,transparent),color-mix(in srgb,var(--fg) 4%,transparent));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 14%,transparent);
  font-family:var(--mono);font-size:17px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:transform .12s var(--ease),background .2s;
}
.keys button small{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.keys button:active,.pad-actions button:active{transform:scale(.93)}
.keys button:hover{background:color-mix(in srgb,var(--fg) 14%,transparent)}
.pad-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.pad-actions .call{background:linear-gradient(180deg,#39c98a,#1f9d66);color:#06130c;border-color:transparent}
.pad-actions .call:hover{filter:brightness(1.1)}
.pad.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------- 2008 flip phone ---------- */
.flip{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(4,4,8,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s,visibility 0s .5s;
}
.flip.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.flip-close{position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:16px;display:grid;place-items:center}
.flip-close:hover{background:rgba(255,255,255,.12)}
.flipphone{width:230px;perspective:1200px;transform:translateY(20px);transition:transform .6s var(--ease)}
.flip.open .flipphone{transform:none}
.flip-top,.flip-bottom{
  background:linear-gradient(180deg,#e9e9ee,#b9b9c2 60%,#8d8d97);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.25),0 30px 60px -20px rgba(0,0,0,.8);
}
.flip-top{
  height:300px;border-radius:30px 30px 10px 10px;padding:18px 16px 12px;
  transform-origin:50% 100%;transform:rotateX(-170deg);
  transition:transform 1.1s cubic-bezier(.6,0,.2,1.2) .25s;
}
.flip.open .flip-top{transform:rotateX(0)}
.flip-ear{width:46px;height:5px;margin:0 auto 12px;border-radius:5px;background:#55555f;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.lcd{
  height:248px;border-radius:8px;padding:8px 9px;
  background:linear-gradient(180deg,#bfe0ff 0%,#8fc4f6 35%,#6aa8e6 100%);
  box-shadow:inset 0 0 0 3px #2a2a33,inset 0 0 18px rgba(0,0,0,.35);
  font-family:var(--mono);color:#0d2a4a;font-size:12px;line-height:1.35;overflow:hidden;position:relative;
}
.lcd::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 45%);pointer-events:none}
.lcd-bar{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;border-bottom:1px solid rgba(13,42,74,.3);padding-bottom:4px;margin-bottom:8px}
.lcd-body{display:flex;flex-direction:column;gap:6px}
.lcd-body .b{
  max-width:92%;padding:6px 9px;border-radius:10px;
  background:rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(0,0,0,.15);
  animation:pop .35s var(--ease) both;
}
.lcd-body .b.me{align-self:flex-end;background:#2f6fd6;color:#fff}
.lcd-body .b a{color:inherit;font-weight:500}
.lcd-body .from{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.flip-hinge{height:10px;margin:0 10px;background:linear-gradient(180deg,#6f6f79,#3d3d46);border-radius:3px}
.flip-bottom{height:250px;border-radius:10px 10px 30px 30px;padding:16px 18px}
.flip-nav{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;background:radial-gradient(circle at 50% 35%,#d7d7de,#8a8a94);box-shadow:inset 0 -2px 4px rgba(0,0,0,.35),0 1px 0 #fff;display:grid;place-items:center}
.flip-nav span{width:22px;height:22px;border-radius:50%;background:#2a2a33;box-shadow:inset 0 1px 2px rgba(255,255,255,.3)}
.flip-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px}
.flip-keys i{
  height:30px;border-radius:7px;font:500 12px var(--mono);font-style:normal;display:grid;place-items:center;color:#2a2a33;
  background:linear-gradient(180deg,#f3f3f7,#c6c6ce);box-shadow:inset 0 1px 0 #fff,0 2px 2px rgba(0,0,0,.3);
  transition:background .15s;
}
.flip-keys i.lit{background:linear-gradient(180deg,#9fe7d8,#2bb3a1);color:#063}

/* ---------- plunksnos ---------- */
.feather{
  position:fixed;top:-60px;z-index:30;pointer-events:none;width:22px;height:44px;
  animation:fall var(--t,6s) linear var(--dl,0s) forwards, sway 1.6s ease-in-out infinite alternate;
  opacity:.9;
}
@keyframes fall{to{transform:translateY(110vh) rotate(var(--rot,320deg))}}
@keyframes sway{from{margin-left:-14px}to{margin-left:14px}}

/* ---------- po dugnu ---------- */
.below{
  position:fixed;right:clamp(20px,4.5vw,64px);top:50%;transform:translateY(-30%);z-index:35;
  max-width:min(34vw,420px);text-align:right;
  font-family:var(--display);font-weight:500;font-style:italic;font-variation-settings:"wdth" 100;font-size:clamp(15px,1.5vw,20px);line-height:1.35;color:var(--muted);
  opacity:0;transition:transform .9s var(--ease),opacity .9s;pointer-events:none;
}
.below.show{transform:translateY(-50%);opacity:1}

/* ---------- gravitacijos atstatymas ---------- */
.restore{
  position:fixed;left:50%;top:28px;transform:translate(-50%,-20px);z-index:70;
  padding:10px 16px;border-radius:999px;border:1px solid var(--accent);
  background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--fg);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,transform .5s var(--ease),visibility 0s .5s;
}
.restore span{color:var(--muted)}
.restore:hover{background:color-mix(in srgb,var(--accent) 20%,var(--bg))}
body.gravity .restore{opacity:1;transform:translate(-50%,0);pointer-events:auto;visibility:visible;transition-delay:0s}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);z-index:80;
  padding:10px 18px;border-radius:999px;background:var(--fg);color:var(--bg);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;white-space:nowrap;
  opacity:0;transition:opacity .4s,transform .5s var(--ease);pointer-events:none;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- disco ---------- */
body.disco .name{
  background:linear-gradient(90deg,#00ffd5,#ff2fa8,#ffe53b,#00ffd5);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 3s linear infinite;
}
body.disco .ch{color:inherit}
body.disco .cursor-ring{border-color:#ff2fa8}
body.disco .pulse{background:#ff2fa8}
@keyframes hue{to{background-position:300% 0}}

/* ---------- gravitacija ---------- */
body.gravity .g{will-change:transform}
body.gravity .ch{animation:none;transform:none}
body.gravity .reveal{animation:none;opacity:1}

/* ---------- mobile ---------- */
@media (max-width:720px){
  .stage{padding:18px 20px 22px}
  .mono{font-size:62vw;align-items:center}
  .hero{padding:4vh 0}
  .name{font-size:clamp(44px,14vw,84px)}
  .hints{left:16px;right:16px;width:auto}
  .cta{gap:14px;padding:12px 12px 12px 22px;margin-top:30px}
  .cta-label{font-size:20px}
  .clock{display:none}
  .secrets{left:0;top:-30px;transform:translate(0,8px)}
  .secrets.show{transform:none}
  .pad{right:16px;bottom:78px}
  .below{right:20px;left:20px;max-width:none;text-align:center;top:auto;bottom:120px;transform:translateY(20px)}
  .below.show{transform:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .ch,.reveal,.glyph{animation:none;opacity:1;transform:none}
  .grain{animation:none}
}