/* bionic-design-system — BASE (reset, body, nav, buttons, cursor, reveal, grain) */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.6;letter-spacing:-.01em;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}
@media (pointer:fine){body{cursor:none}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#scene{position:fixed;inset:0;z-index:-1;display:block}
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);z-index:50;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s}
.cursor.big{width:46px;height:46px;background:var(--accent-2)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s4)}
section{position:relative}
.label{font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:.6rem}
.label::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.6}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);transition:backdrop-filter .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.solid{background:oklch(0.16 0.012 55 / .72);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.brand b{color:var(--accent)}
.nav-links{display:flex;gap:var(--s4);align-items:center}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:.92rem;transition:color .3s}
.nav-links a:hover{color:var(--ink)}
@media(max-width:720px){.nav-links a:not(.btn){display:none}}
.btn{font-family:var(--font-body);font-weight:500;font-size:.95rem;padding:.85rem 1.6rem;border-radius:100px;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;will-change:transform;transition:background .35s var(--ease),color .35s,border-color .35s}
.btn-primary{background:var(--accent);color:oklch(0.16 0.012 55)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:oklch(1 0 0 / .04)}
.magnetic{position:relative}
.magnetic .m-label{display:inline-flex;align-items:center;gap:.55rem;will-change:transform}
.scroll-hint{position:absolute;bottom:var(--s4);left:50%;transform:translateX(-50%);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;gap:.6rem}
.scroll-hint .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.8s var(--ease-soft) infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
[data-reveal]{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}.scroll-hint .dot{animation:none}}