/* ===========================================================================
   TopK.trade — shared brand stylesheet (home / privacy / terms)
   Brand: teal podium identity, Ink dark surfaces, Space Grotesk + Space Mono.
   =========================================================================== */

/* --- self-hosted fonts (no CDN) --- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/space-mono-700.woff2') format('woff2'); }

:root{
  --teal:#12B3A3;         /* wordmark / primary */
  --deep:#0E4B44;         /* .trade / dark surfaces */
  --bright:#14C7B4;       /* reversed accent on dark */
  --shadow:#0B3A34;       /* podium 3rd block */
  --ink:#08110F;          /* dark surface (page) */
  --ink-2:#0b1613;        /* raised surface */
  --ink-3:#0f1f1b;        /* card surface */
  --mist:#EDF7F5;         /* light text */
  --line:rgba(20,199,180,0.14);
  --line-2:rgba(237,247,245,0.08);
  --muted:#6f8f88;        /* secondary text */
  --faint:#4c6a63;        /* tertiary text */
  --up:#14C7B4;
  --down:#ff6a6a;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--mist);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--bright); text-decoration:none;}
a:hover{color:var(--mist);}
img{max-width:100%; display:block;}
::selection{background:rgba(18,179,163,0.35); color:#fff;}

/* --- WebGL / fallback background --- */
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block;
    background:
      radial-gradient(120% 90% at 15% -10%, rgba(18,179,163,0.16), transparent 55%),
      radial-gradient(110% 90% at 100% 0%, rgba(11,75,68,0.5), transparent 55%),
      var(--ink);}
.bg-scrim{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,17,15,0.35) 0%, rgba(8,17,15,0.15) 30%, rgba(8,17,15,0.55) 78%, var(--ink) 100%);}

/* content sits above the canvas */
.page{position:relative; z-index:2;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* --- nav --- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0;}
.brandmark{display:flex; align-items:flex-end; gap:12px; color:var(--mist);}
.brandmark:hover{color:var(--mist);}
.brandmark .word{font-weight:700; font-size:24px; letter-spacing:-0.035em; line-height:1;}
.brandmark .word .tld{color:var(--bright);}
.podium{display:inline-flex; align-items:flex-end; gap:2.5px; height:22px;}
.podium i{display:block; width:7px; border-radius:2px 2px 0 0;}
.podium .p2{height:14px; background:var(--deep);}
.podium .p1{height:22px; background:var(--teal);}
.podium .p3{height:10px; background:var(--shadow);}
.nav-links{display:flex; gap:26px; align-items:center; font-size:14px;}
.nav-links a{color:var(--muted); font-weight:500;}
.nav-links a:hover{color:var(--mist);}
.nav-cta{padding:9px 16px; border:1px solid var(--line); border-radius:10px; color:var(--mist)!important;
  background:linear-gradient(180deg, rgba(18,179,163,0.14), rgba(18,179,163,0.04));}
.nav-cta:hover{border-color:var(--bright); box-shadow:0 0 0 1px rgba(20,199,180,0.3), 0 8px 30px rgba(18,179,163,0.18);}

/* --- eyebrow / mono label --- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--teal);}

/* --- hero --- */
.hero{padding:70px 0 40px; text-align:center;}
.hero .eyebrow{margin-bottom:22px;}
.hero h1{font-size:clamp(40px,8vw,86px); font-weight:700; letter-spacing:-0.04em; line-height:0.98; margin:0;}
.hero h1 .accent{color:var(--teal);}
.hero h1 .accent2{color:var(--bright);}
.hero p.sub{max-width:60ch; margin:22px auto 0; color:#a9c4be; font-size:clamp(16px,2.2vw,20px); line-height:1.55;}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:12px;
  font-weight:700; font-size:15px; letter-spacing:-0.01em; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(180deg,var(--teal),#0e9789); color:#03110f!important;
  box-shadow:0 10px 34px rgba(18,179,163,0.35);}
.btn-primary:hover{box-shadow:0 16px 48px rgba(18,179,163,0.5);}
.btn-ghost{border-color:var(--line); color:var(--mist)!important; background:rgba(237,247,245,0.03);}
.btn-ghost:hover{border-color:var(--bright);}
.btn .arw{transition:transform .15s ease;}
.btn:hover .arw{transform:translateX(3px);}

/* --- live ticker --- */
.ticker{margin-top:44px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.ticker-track{display:inline-flex; gap:40px; padding:12px 0; white-space:nowrap; animation:tick 32s linear infinite;}
.ticker-track:hover{animation-play-state:paused;}
.tk{font-family:var(--mono); font-size:13px; color:var(--muted); display:inline-flex; gap:10px; align-items:center;}
.tk b{color:var(--mist); font-weight:700;}
.tk .u{color:var(--up);} .tk .d{color:var(--down);}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* --- section --- */
.section{padding:66px 0;}
.section-head{text-align:center; margin-bottom:40px;}
.section-head h2{font-size:clamp(26px,4vw,40px); font-weight:700; letter-spacing:-0.03em; margin:12px 0 0;}
.section-head p{color:var(--muted); margin:12px auto 0; max-width:56ch;}

/* --- app podium cards --- */
.podium-grid{display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:20px; align-items:end;}
.appcard{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition:transform .18s ease, border-color .2s ease, box-shadow .25s ease; display:flex; flex-direction:column;}
a.appcard:hover{transform:translateY(-6px); border-color:var(--bright);
  box-shadow:0 26px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(20,199,180,0.25);}
.appcard .rank{position:absolute; top:12px; left:12px; z-index:3; font-family:var(--mono); font-weight:700;
  font-size:12px; letter-spacing:0.08em; padding:5px 10px; border-radius:8px; background:rgba(8,17,15,0.7);
  border:1px solid var(--line); color:var(--teal);}
.appcard.first{transform:translateY(-16px);}
.appcard.first:hover{transform:translateY(-22px);}
.appcard.first .rank{color:#03110f; background:var(--teal); border-color:var(--teal);}
.appcard .shot{aspect-ratio:16/11; background:#0a1512; position:relative; overflow:hidden;}
.appcard .shot img{width:100%; height:100%; object-fit:cover; opacity:.92;}
.appcard .shot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(8,17,15,0.85));}
.appcard .live{position:absolute; top:12px; right:12px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--bright);
  background:rgba(8,17,15,0.7); border:1px solid var(--line); border-radius:20px; padding:4px 10px;}
.appcard .live .dot{width:7px; height:7px; border-radius:50%; background:var(--bright); box-shadow:0 0 10px var(--bright); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.appcard .body{padding:20px 22px 24px;}
.appcard .body h3{font-size:22px; font-weight:700; letter-spacing:-0.02em; margin:0;}
.appcard .body h3 .u{color:var(--up);} .appcard .body h3 .d{color:var(--down);} .appcard .body h3 .sl{color:var(--faint); margin:0 4px;}
.appcard .body p{color:var(--muted); font-size:14px; margin:10px 0 0; line-height:1.5;}
.appcard .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px;}
.tag{font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line-2); border-radius:20px; padding:3px 10px;}
.appcard .launch{margin-top:18px; font-weight:700; color:var(--bright); display:inline-flex; gap:8px; align-items:center; font-size:14px;}
.appcard.soon{opacity:.75;}
.appcard.soon .shot{display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, #0a1512, #0a1512 12px, #0c1a16 12px, #0c1a16 24px);}
.appcard.soon .shot span{font-family:var(--mono); font-size:13px; color:var(--faint); letter-spacing:0.1em; text-transform:uppercase;}

/* --- steps --- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step{border:1px solid var(--line-2); border-radius:14px; padding:24px; background:rgba(255,255,255,0.015);}
.step .n{font-family:var(--mono); font-weight:700; color:var(--teal); font-size:13px; letter-spacing:0.1em;}
.step h4{margin:12px 0 8px; font-size:18px; font-weight:700; letter-spacing:-0.01em;}
.step p{color:var(--muted); font-size:14px; margin:0;}

/* --- footer --- */
.footer{border-top:1px solid var(--line-2); margin-top:40px; padding:40px 0 60px; color:var(--muted); font-size:13px;}
.footer .row{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start;}
.footer a{color:var(--muted);} .footer a:hover{color:var(--mist);}
.footer .links{display:flex; gap:22px; flex-wrap:wrap;}
.footer .note{max-width:52ch; line-height:1.6;}
.footer .req{margin-top:18px; font-family:var(--mono); font-size:11.5px; color:var(--faint);}

/* --- entrance animation --- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* --- prose (privacy / terms) --- */
.doc{max-width:760px; margin:0 auto; padding:20px 0 40px;}
.doc .eyebrow{margin-bottom:14px;}
.doc h1{font-size:clamp(30px,5vw,48px); font-weight:700; letter-spacing:-0.03em; margin:0 0 6px;}
.doc .updated{font-family:var(--mono); font-size:12px; color:var(--faint); margin-bottom:36px;}
.doc h2{font-size:20px; font-weight:700; letter-spacing:-0.01em; margin:38px 0 12px; color:var(--mist);}
.doc p, .doc li{color:#b7cec9; font-size:15.5px; line-height:1.7;}
.doc a{color:var(--bright);}
.doc ul{padding-left:20px;} .doc li{margin:6px 0;}
.doc .callout{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:rgba(18,179,163,0.05); color:#cfe6e1; font-size:14.5px; margin:22px 0;}

@media (max-width:820px){
  .podium-grid{grid-template-columns:1fr;}
  .appcard.first{transform:none;} .appcard.first:hover{transform:translateY(-6px);}
  .steps{grid-template-columns:1fr;}
  .nav-links a:not(.nav-cta){display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;} .reveal{transition:none; opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}