/* Shared styles for the small pages (about, privacy, terms, 18+, soon, get, 404). The homepage carries its own CSS. */
:root{
  --bg:#f7f8fc; --ink:#0b1220; --ink-2:#1e293b; --muted:#5b6475; --line:#e5e8f0; --soft:#eef1f7;
  --blue:#3b82f6; --blue-s:#2563eb; --violet:#7c5cff;
  --grad:linear-gradient(92deg,#3b82f6 0%,#8b5cf6 55%,#a855f7 100%);
  --grad-btn:linear-gradient(92deg,#7c5cff,#a06bff);
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 20px 60px rgba(11,18,32,.12),0 4px 14px rgba(11,18,32,.06);
  --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100svh}
img{max-width:100%}
a{color:var(--blue-s)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
@media (max-width:640px){.wrap{padding:0 16px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-family:inherit;font-weight:700;font-size:16px;line-height:1;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.btn svg{width:18px;height:18px;flex:0 0 18px;transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,18,32,.28)}
.btn-grad{background:var(--grad-btn);color:#fff;min-height:44px;padding:0 20px;font-size:15px;box-shadow:0 8px 22px rgba(124,92,255,.35)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(124,92,255,.45)}
.btn-light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-light:hover{background:var(--soft)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,248,252,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;cursor:pointer;place-items:center;color:var(--ink)}
.menu-btn svg{width:24px;height:24px}
@media (max-width:860px){
  .nav-links{display:none}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:#fff;padding:12px 24px 18px;gap:2px;box-shadow:0 24px 40px rgba(11,18,32,.12);border-radius:0 0 24px 24px}
  .nav.open .nav-links a{display:block;padding:12px 0;font-size:17px}
  .menu-btn{display:grid}
}

/* Page body */
main{flex:1}
.page{max-width:760px;margin:0 auto;padding:64px 24px 96px;width:100%}
.eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.page h1{font-size:clamp(38px,5vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 22px}
.page h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.page h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:36px 0 10px}
.page p{color:var(--ink-2);margin:0 0 18px}
.page .muted{color:var(--muted)}
.page ul{color:var(--ink-2);padding-left:22px;margin:0 0 18px}
.page li{margin-bottom:8px}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;margin-top:8px}
.back svg{width:18px;height:18px;transform:scaleX(-1)}
.centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:56px 24px 72px}
.centre h1{font-size:clamp(38px,6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:6px 0 0}
.centre p{margin:0;color:var(--ink-2);max-width:38ch}
.centre .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.mark-breathe{width:88px;height:88px;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.fade{opacity:0;transform:translateY(16px);animation:rise .8s var(--ease) forwards;animation-delay:calc(var(--i,0) * .1s)}
@keyframes rise{to{opacity:1;transform:none}}

/* Footer */
.footer{background:#0b1220;color:#9aa3b5;border-radius:44px 44px 0 0;padding:52px 0 44px}
.footer-grid{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:36px;align-items:center}
.footer .logo img{height:30px}
.footer nav{display:flex;gap:26px;flex-wrap:wrap}
.footer nav a{color:#c7cdd9;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.footer nav a:hover{color:#fff}
.footer .legal{font-size:12px;line-height:1.7;margin:0;color:#9aa3b5}
.footer .legal b{color:#c7cdd9;font-weight:600}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s var(--ease)}
.socials a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.socials svg{width:18px;height:18px;fill:currentColor}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer .legal{grid-column:1 / -1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}.footer{border-radius:32px 32px 0 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .fade{opacity:1;transform:none}
}