/* REKH website — mirrors the app's theme tokens (renderer/newtab.css).
   --ink is RGB channels so rgba(var(--ink), a) works on light & dark. */
:root {
  --bg:#0B0B0D; --bg-elev:#0F0F13; --ink:255,255,255; --accent:#C8A24A; --accent-rgb:200,162,74;
  --max:1080px;
}
[data-theme="light"] {
  --bg:#ECECEE; --bg-elev:#FFFFFF; --ink:24,24,27; --accent:#A8842F; --accent-rgb:168,132,47;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:rgb(var(--ink));
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .3s, color .3s;
}
a { color:inherit; text-decoration:none; }
.eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; }
h2 { font-size:clamp(26px,4vw,40px); font-weight:600; letter-spacing:-0.5px; line-height:1.2; }
h3 { font-size:17px; font-weight:600; margin-bottom:8px; }
p { color:rgba(var(--ink),0.62); }

/* Nav */
#nav {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px;
  padding:16px clamp(20px,5vw,48px);
  background:rgba(var(--ink),0.02); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--ink),0.06);
}
.wordmark { display:inline-flex; align-items:center; font-weight:700; letter-spacing:6px; text-transform:uppercase; font-size:15px; }
.nav-logo { width:26px; height:26px; border-radius:6px; margin-right:11px; }
.nav-links { display:flex; gap:22px; margin-left:auto; }
.nav-links a { font-size:13px; color:rgba(var(--ink),0.55); transition:color .2s; }
.nav-links a:hover { color:var(--accent); }
#theme-toggle {
  background:rgba(var(--ink),0.05); border:none; color:rgba(var(--ink),0.6);
  width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:15px; transition:background .2s,color .2s;
}
#theme-toggle:hover { background:rgba(var(--ink),0.1); color:var(--accent); }

/* Hero */
.hero { text-align:center; padding:clamp(70px,13vw,150px) 24px 90px; max-width:820px; margin:0 auto; }
.hero-word { font-size:clamp(64px,15vw,150px); font-weight:600; letter-spacing:clamp(10px,3.5vw,30px); line-height:1; padding-left:clamp(10px,3.5vw,30px); }
.tagline { font-size:12px; letter-spacing:5px; text-transform:uppercase; color:rgba(var(--ink),0.28); margin-top:18px; }
.hero-sub { font-size:clamp(16px,2vw,19px); margin:34px auto 0; max-width:560px; color:rgba(var(--ink),0.66); }
.cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.hero-note { font-size:13px; color:rgba(var(--ink),0.34); margin-top:26px; }

.btn { display:inline-block; padding:13px 28px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer; transition:transform .15s, box-shadow .25s, background .2s; }
.btn-primary { background:var(--accent); color:#0B0B0D; box-shadow:0 8px 30px rgba(var(--accent-rgb),0.28); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(var(--accent-rgb),0.4); }
.btn-ghost { background:rgba(var(--ink),0.05); color:rgb(var(--ink)); border:1px solid rgba(var(--ink),0.1); }
.btn-ghost:hover { background:rgba(var(--ink),0.09); }

/* Sections */
.section { max-width:var(--max); margin:0 auto; padding:clamp(60px,9vw,110px) clamp(20px,5vw,48px); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:38px; }
.card { background:var(--bg-elev); border:1px solid rgba(var(--ink),0.06); border-radius:16px; padding:26px; transition:border .2s, transform .2s; }
.card:hover { border-color:rgba(var(--accent-rgb),0.35); transform:translateY(-3px); }
.ico { font-size:26px; margin-bottom:16px; }
.card p { font-size:14px; }

/* Privacy strip */
.privacy { background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.02)); border-top:1px solid rgba(var(--accent-rgb),0.14); border-bottom:1px solid rgba(var(--accent-rgb),0.14); }
.privacy-inner { max-width:760px; margin:0 auto; padding:clamp(60px,9vw,100px) clamp(20px,5vw,48px); text-align:center; }
.privacy-inner p { font-size:clamp(15px,1.8vw,18px); margin-top:20px; }
.privacy-inner strong { color:rgb(var(--ink)); }

/* Download */
.dl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:38px; }
.dl { display:flex; flex-direction:column; gap:6px; background:var(--bg-elev); border:1px solid rgba(var(--ink),0.08); border-radius:14px; padding:22px; transition:border .2s, transform .2s; }
.dl:not(.soon):hover { border-color:var(--accent); transform:translateY(-3px); }
.dl-ico { font-size:30px; line-height:1; }
.dl-name { font-size:16px; font-weight:600; }
.dl-meta { font-size:12px; color:rgba(var(--ink),0.4); }
.dl.soon { opacity:0.5; }
.dl.recommended { border-color:var(--accent); box-shadow:0 8px 30px rgba(var(--accent-rgb),0.16); }

/* Footer */
footer { border-top:1px solid rgba(var(--ink),0.06); padding:48px clamp(20px,5vw,48px); text-align:center; }
.foot-word { font-weight:700; letter-spacing:6px; text-transform:uppercase; font-size:14px; color:rgba(var(--ink),0.5); }
.foot-links { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:20px 0; }
.foot-links a { font-size:13px; color:rgba(var(--ink),0.5); transition:color .2s; }
.foot-links a:hover { color:var(--accent); }
.copy { font-size:12px; color:rgba(var(--ink),0.3); }

/* Legal / prose pages (privacy, terms, support) */
.legal { max-width:760px; margin:0 auto; padding:clamp(50px,7vw,80px) clamp(20px,5vw,48px) 90px; }
.legal h1 { font-size:clamp(30px,4.5vw,42px); font-weight:600; letter-spacing:-0.5px; }
.legal .updated { font-size:13px; color:rgba(var(--ink),0.35); margin-top:12px; }
.legal .lede { font-size:17px; color:rgba(var(--ink),0.7); margin-top:24px; }
.legal h2 { font-size:21px; font-weight:600; margin:44px 0 12px; letter-spacing:0; }
.legal h3 { font-size:16px; font-weight:600; margin:26px 0 8px; }
.legal p { margin-bottom:14px; font-size:15px; }
.legal ul { margin:0 0 16px 20px; }
.legal li { font-size:15px; color:rgba(var(--ink),0.62); margin-bottom:8px; }
.legal strong { color:rgb(var(--ink)); }
.legal a { color:var(--accent); }
.legal .toc { background:var(--bg-elev); border:1px solid rgba(var(--ink),0.07); border-radius:12px; padding:20px 24px; margin:32px 0; }
.legal .toc ol { margin-left:18px; }
.legal .toc li { font-size:14px; margin-bottom:5px; }
.legal .callout { background:rgba(var(--accent-rgb),0.07); border:1px solid rgba(var(--accent-rgb),0.22); border-radius:12px; padding:20px 24px; margin:28px 0; }
.legal .callout p:last-child { margin-bottom:0; }
.legal table { width:100%; border-collapse:collapse; margin:16px 0 22px; font-size:14px; }
.legal th, .legal td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(var(--ink),0.07); vertical-align:top; }
.legal th { color:rgba(var(--ink),0.45); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.legal td { color:rgba(var(--ink),0.62); }

@media (max-width:640px) { .nav-links { display:none; } }