/* &n landing v11 — ported from Claude Design "andn Landing v11".
   Layout and type live inline in index.html exactly as designed; this file holds
   the base rules, keyframes, the responsive values the design switched in JS
   (as custom properties), and hover/focus states. */

:root {
  /* desktop (>= 700px) */
  --navLinks: flex; --navBurger: none;
  --heroH: 100svh; --heroMinH: 600px; --heroDir: row;
  --heroPad: max(24vh,110px) clamp(18px,3vw,44px) 0;
  --nW: min(230px,40vw); --nAlign: auto; --nMt: 0; --nOrd: 2; --nDir: column; --nGap: 10px;
  --nBW: min(230px,40vw); --nAI: flex-end; --ampOrd: 1; --ampMt: 0;
  --capPos: absolute; --capMt: 0; --capBottom: clamp(28px,6vh,56px); --capPad: 0 24px;
  --ilH: 130vh; --ilPb: 14vh; --smH: 720px; --pvH: 620px;
  --statCols: repeat(4,minmax(0,1fr)); --statFs: clamp(60px,7vw,104px);
  /* mobile menu state (set by app.js) */
  --mo: 0; --menuOp: 0; --menuPE: none; --bar1: translateY(-4px); --bar2: translateY(4px);
}
@media (max-width: 999.98px) {
  :root { --statCols: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 699.98px) {
  :root {
    --navLinks: none; --navBurger: flex;
    --heroH: auto; --heroMinH: max(100svh,640px); --heroDir: column;
    --heroPad: 84px 24px max(28px, env(safe-area-inset-bottom));
    --nW: min(240px,62vw); --nAlign: flex-end; --nOrd: 1; --nDir: row-reverse; --nGap: 14px;
    --nBW: 100%; --nAI: center; --ampOrd: 2; --ampMt: auto;
    --capPos: relative; --capMt: 44px; --capBottom: auto; --capPad: 0;
    --ilH: 95vh; --ilPb: 12vh; --smH: 620px; --pvH: 440px;
    --statFs: clamp(40px,12.5vw,60px);
  }
}
.only-mob { display: none; }
@media (max-width: 699.98px) { .only-desk { display: none; } .only-mob { display: inline; } }

html{scroll-behavior:smooth;background:#000}
body{margin:0;background:#000;color:#F5F5F7;font-family:'Geist',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#F3AC00;text-decoration:none}a:hover{color:#FFD46B}
input,select,textarea,button{font:inherit}
::placeholder{color:#86868B}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #F3AC00;outline-offset:2px}

@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,4%) scale(1.12)}}@keyframes drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-5%,-6%) scale(.95)}}@keyframes up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes rise{from{transform:translateY(18vh) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes heroZoom{from{transform:scale(1.25) translateY(3%)}to{transform:scale(1.04)}}
@keyframes arrive{0%{opacity:0;transform:translate(120px,-160px) scale(.2)}60%{opacity:1}100%{opacity:1;transform:none}}@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(243,172,0,.55)}70%{box-shadow:0 0 0 16px rgba(243,172,0,0)}100%{box-shadow:0 0 0 0 rgba(243,172,0,0)}}@keyframes glint{0%,100%{opacity:.5}50%{opacity:1}}@keyframes sheen{from{background-position:150% 0}to{background-position:-150% 0}}@keyframes nightDay{from{transform:translateX(30%)}to{transform:translateX(-14%)}}@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(7);opacity:0}}@keyframes orbX{from{transform:translateX(-50%)}to{transform:translateX(50%)}}@keyframes orbY{from{transform:translateY(-50%);opacity:.25}to{transform:translateY(50%);opacity:1}}@keyframes scan{0%{transform:translateY(-110%);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateY(400%);opacity:0}}@keyframes phase{0%{transform:translateX(-38%)}40%,80%{transform:translateX(-106%)}100%{transform:translateX(-38%)}}@keyframes tick{0%,38%{opacity:0;transform:scale(.6)}46%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.6)}}@keyframes dawn{0%{transform:translateX(-28%)}55%,85%{transform:translateX(-110%)}100%{transform:translateX(-28%)}}@keyframes rock{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}@keyframes pullBack{from{transform:scale(1.12)}to{transform:scale(1)}}@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}@keyframes halo{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes comet{0%{opacity:0;transform:rotate(24deg) translateX(-160px)}20%{opacity:1}70%{opacity:1;transform:rotate(24deg) translateX(140px)}100%{opacity:0;transform:rotate(24deg) translateX(170px)}}@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* hover / focus states from the design */
.hx0:hover{background:#FFD46B !important;color:#000 !important}
.hx1:hover{color:#F3AC00 !important}
.hx2:hover{color:#F3AC00 !important}
.hx3:hover{color:#F3AC00 !important}
.hx4:hover{color:#F3AC00 !important}
.hx5:hover{color:#F3AC00 !important}
.hx6:hover{background:#FFD46B !important;color:#000 !important}
.hx7:hover{background:#F3AC00 !important;color:#000 !important}
.hx8:hover{background:rgba(255,255,255,.16) !important;color:#F5F5F7 !important}
.hx9:hover{transform:scale(1.06) !important}
.hx10:hover{transform:scale(1.06) !important}
.hx11:hover{transform:scale(1.06) !important}
.hx12:hover{transform:scale(1.06) !important}
.hx13:hover{transform:scale(1.07) !important}
.hx14:hover{transform:scale(1.07) !important}
.hx15:hover{transform:scale(1.07) !important}
.hx16:hover{transform:scale(1.07) !important}
.fx17:focus{border-color:#F3AC00 !important}
.fx18:focus{border-color:#F3AC00 !important}
.fx19:focus{border-color:#F3AC00 !important}
.fx20:focus{border-color:#F3AC00 !important}
.hx21:hover{background:#FFD46B !important}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}