@font-face { font-family: Anurati; src: url(/anurati.otf) format("opentype"); font-display: swap; }

:root {
  --bg:#0a0a0c; --card:#16161b; --card2:#26262e; --ink:#f3f3f6; --dim:#b4b4c0; --faint:#6d6d7a; --line:#26262e;
  --gold1:#f4d79e; --gold2:#d1a253; --gold3:#bc8438; --mint:#5bd6a8; --on:#241905;
  --brand:linear-gradient(120deg,var(--gold1),var(--gold2));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 Inter,-apple-system,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(800px 500px at 82% -6%,#d1a2532e,transparent 70%),radial-gradient(800px 600px at 8% 26%,#5e3bc724,transparent 70%); }
h1,h2,h3,p { margin:0; }
em { font-style:normal; background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
a { color:inherit; text-decoration:none; }
.link { color:var(--gold1); font-weight:600; }
.eyebrow { color:var(--gold1); font-size:14px; font-weight:600; letter-spacing:.02em; }
.lead { color:var(--dim); font-size:clamp(17px,2.1vw,20px); }
.note { color:var(--dim); font-size:14px; }
.note b { color:var(--ink); font-weight:600; }
.btn { display:inline-block; padding:15px 28px; border-radius:999px; background:var(--brand); color:var(--on); font-weight:700; box-shadow:0 10px 36px #d1a2534d; transition:transform .15s; }
.btn:hover { transform:translateY(-2px); }
.wrap { max-width:1120px; margin:0 auto; padding:clamp(72px,10vw,128px) 20px 0; }
h2 { font-size:clamp(32px,5.2vw,54px); line-height:1.1; letter-spacing:-.03em; font-weight:750; }
h2.center { text-align:center; }

.nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; padding:12px clamp(16px,4vw,40px); background:#0a0a0cc9; backdrop-filter:blur(14px); border-bottom:1px solid #ffffff0d; }
/* The R and the letters share one height, as in the logo. The letters are 0.8 of their font size tall. */
.brand { --h:30px; display:flex; align-items:center; gap:calc(var(--h)*.36); }
.brand img { height:var(--h); width:auto; display:block; }
.brand span { font-family:Anurati,sans-serif; font-size:calc(var(--h)*1.25); line-height:1; letter-spacing:.14em; color:var(--gold1); }
.foot .brand { --h:20px; }
.nav nav { display:flex; gap:26px; margin-left:auto; font-size:15px; color:var(--dim); }
.nav nav a:hover { color:var(--ink); }
.pill { padding:9px 18px; border-radius:999px; background:var(--ink); color:#0a0a0c; font-weight:650; font-size:14.5px; white-space:nowrap; }

.hero { text-align:center; padding:clamp(48px,8vw,88px) 20px 0; max-width:1120px; margin:0 auto; }
.hero h1 { font-size:clamp(40px,7.6vw,84px); line-height:1.04; letter-spacing:-.04em; font-weight:780; margin:14px 0 18px; }
.hero .lead { max-width:620px; margin:0 auto 28px; }
.actions { display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:14px; }

.stage { --w:clamp(128px,31vw,272px); display:flex; justify-content:center; align-items:center; margin-top:clamp(40px,6vw,68px); }
.phone { width:var(--w); aspect-ratio:9/18; flex:none; background:#000; border-radius:calc(var(--w)*.14); padding:calc(var(--w)*.03); box-shadow:0 0 0 1px #d1a25366,0 30px 80px #000c,0 0 90px #d1a2531f; font-size:calc(var(--w)/15.5); text-align:left; }
.screen { height:100%; border-radius:calc(var(--w)*.115); background:linear-gradient(170deg,#1b1b22,#101014); padding:2.2em .9em 1em; display:flex; flex-direction:column; overflow:hidden; }
.bar { display:flex; gap:.6em; align-items:center; background:#ffffff12; border-radius:1.4em; padding:.55em .7em; }
.bar small { display:block; font-size:.62em; color:var(--dim); line-height:1.2; }
.bar b { display:block; font-size:1em; line-height:1.2; }
.bar span { display:block; font-size:.68em; color:var(--dim); line-height:1.25; white-space:nowrap; }
.dot { flex:none; width:2.5em; height:2.5em; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; color:var(--gold1); background:linear-gradient(#2b2415,#15120c); box-shadow:0 0 0 1px #d1a25366; }
.dot.gold { background:var(--brand); color:var(--on); }
.msgs { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:.5em; padding:.8em 0; }
.msgs p { max-width:84%; padding:.55em .8em; border-radius:1.05em; font-size:.92em; line-height:1.3; }
.in { align-self:flex-start; background:var(--card2); }
.out { align-self:flex-end; background:var(--brand); color:var(--on); font-weight:550; }
.typebox { background:#ffffff0f; border-radius:2em; padding:.65em 1em; color:var(--faint); font-size:.88em; }

.send { animation:send 8s infinite both; transform-origin:right bottom; }
.recv { animation:recv 8s infinite both; transform-origin:left bottom; }
@keyframes send { 0%,5%{opacity:0;transform:scale(.7)} 11%,94%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes recv { 0%,58%{opacity:0;transform:scale(.7)} 64%,94%{opacity:1;transform:none} 100%{opacity:0} }

.wire { position:relative; width:clamp(64px,24vw,300px); height:90px; flex:none; }
.line { position:absolute; left:-6px; right:-6px; top:50%; height:2px; background:linear-gradient(90deg,#d1a2531a,var(--gold2),#d1a2531a); }
.tag { position:absolute; top:-30px; left:50%; transform:translateX(-50%); width:220px; text-align:center; font-size:13px; line-height:1.35; color:var(--dim); }
.packet { position:absolute; top:50%; left:0; translate:-50% -50%; padding:6px 12px; border-radius:999px; background:#0a0a0c; border:1px solid var(--gold2); color:var(--gold1); font:600 12px ui-monospace,Menlo,Consolas,monospace; white-space:nowrap; box-shadow:0 0 24px #d1a25366; animation:fly 8s infinite both; }
@keyframes fly { 0%,12%{left:0;opacity:0} 16%{opacity:1} 54%{opacity:1} 60%,100%{left:100%;opacity:0} }

.manifesto { max-width:1120px; margin:0 auto; padding:clamp(80px,11vw,140px) 20px 0; font-size:clamp(28px,5vw,52px); font-weight:720; letter-spacing:-.03em; line-height:1.22; }
.manifesto span { color:var(--faint); }
.manifesto p:hover span { color:var(--gold1); }
.manifesto span { transition:color .25s; }

.bento { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; }
.card { background:linear-gradient(170deg,var(--card),#111115); border:1px solid var(--line); border-radius:24px; padding:26px; display:flex; flex-direction:column; min-height:270px; transition:border-color .2s,transform .2s; }
.card:hover { border-color:#d1a25366; transform:translateY(-3px); }
.card.wide { grid-column:span 2; }
.card h3 { font-size:20px; letter-spacing:-.015em; margin-bottom:6px; }
.card p { color:var(--dim); font-size:15.5px; }
.viz { margin-top:auto; padding-top:22px; }
.ticks,.stat { display:flex; flex-wrap:wrap; gap:8px; }
.bub,.stat span { padding:8px 14px; border-radius:999px; background:var(--card2); font-size:14px; color:var(--dim); }
.bub.gold,.stat .on { background:var(--brand); color:var(--on); font-weight:650; }
.pearls { display:flex; align-items:center; gap:5px; height:64px; }
.pearls i { width:calc(26px*var(--s)); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 34% 30%,#fff3d9,var(--gold2) 60%,var(--gold3)); animation:pulse 2.4s infinite ease-in-out; }
.pearls i:nth-child(even) { animation-delay:.35s; } .pearls i:nth-child(3n) { animation-delay:.7s; }
@keyframes pulse { 50%{transform:scale(1.18)} }
.eyes span { display:inline-block; padding:10px 16px; background:var(--card2); border-radius:14px; filter:blur(4.5px); transition:filter .3s; font-size:15px; }
.card:hover .eyes span { filter:none; }
.clock b { display:block; font-size:38px; letter-spacing:-.03em; color:var(--gold1); line-height:1.1; }
.clock span,.lang b { font-size:14px; color:var(--dim); font-weight:500; }
.lang span { display:block; font-size:21px; margin-bottom:4px; color:var(--ink); }
.whisper span { display:inline-block; padding:10px 15px; border-radius:14px; border:1px dashed var(--gold2); color:var(--gold1); font-size:14.5px; }
.meter { position:relative; }
.meter::before { content:""; display:block; height:10px; border-radius:9px; background:var(--card2); }
.meter i { position:absolute; left:0; bottom:0; height:10px; width:22%; border-radius:9px; background:var(--brand); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.split h2 { margin:8px 0 16px; }
.split.flip > :first-child { order:2; }
.ticks-list { list-style:none; padding:0; margin:22px 0 0; }
.ticks-list li { padding:7px 0 7px 28px; position:relative; }
.ticks-list li::before { content:"✓"; position:absolute; left:0; color:var(--mint); font-weight:700; }
.demo { text-align:center; }
.phone.big { --w:min(280px,72vw); margin:0 auto; }
.search { display:flex; align-items:center; gap:.5em; background:#ffffff12; border-radius:2em; padding:.55em .9em; margin-bottom:.8em; box-shadow:0 0 0 1px #d1a25355; }
.search input::placeholder { color:var(--dim); }
.search input { width:100%; background:none; border:0; outline:0; color:var(--ink); font:inherit; }
.row { display:flex; gap:.65em; align-items:center; padding:.6em .2em; }
.row b { display:block; font-size:1em; line-height:1.25; } .row span { font-size:.8em; color:var(--dim); }
.row.secret { max-height:0; padding:0 .2em; opacity:0; overflow:hidden; transition:all .45s; }
.row.secret.show { max-height:6em; padding:.6em .2em; opacity:1; }
.row.secret { cursor:pointer; }
.demo .screen { position:relative; }
.sheet { position:absolute; inset:auto 0 0 0; background:#1f1f26; border-radius:1.6em 1.6em 0 0; padding:1.4em 1em 1.8em; text-align:center; transform:translateY(105%); transition:transform .35s cubic-bezier(.2,.8,.2,1); box-shadow:0 -12px 40px #0009; z-index:2; }
.sheet.up { transform:none; }
.sheet b { display:block; font-size:1.05em; }
.sheet span { display:block; color:var(--dim); font-size:.8em; margin:.2em 0 1em; }
.finger { position:relative; display:grid; place-items:center; width:5.4em; height:5.4em; margin:0 auto; padding:0; border:0; border-radius:50%; background:none; color:var(--gold1); cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none; }
.finger svg.print { width:3.2em; height:3.2em; }
.finger svg.ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:3; }
.ring .track { stroke:#ffffff1a; }
.ring .fill { stroke:var(--mint); stroke-dasharray:289; stroke-dashoffset:289; }
.finger.held .fill { stroke-dashoffset:0; transition:stroke-dashoffset .9s linear; }
.finger.held .print { color:var(--mint); }
.finger:focus-visible { outline:2px solid var(--gold1); outline-offset:3px; }
.vault { position:absolute; inset:0; background:linear-gradient(170deg,#1b1b22,#101014); padding:2.2em .9em 1em; display:flex; flex-direction:column; transform:translateX(105%); transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:3; }
.vault.open { transform:none; }
.vault .back { background:none; border:0; color:var(--ink); font:inherit; font-size:1.3em; padding:0 .3em 0 0; cursor:pointer; }
.vault .msgs p { opacity:1; }
.badge { align-self:center; color:var(--mint); font-size:.72em; padding:.25em .8em; border:1px solid #5bd6a855; border-radius:2em; margin-top:.6em; }
.hint { color:var(--dim); font-size:15px; margin-top:18px; } .hint b { color:var(--gold1); }

.laptop .lid { display:grid; grid-template-columns:32% 1fr; aspect-ratio:16/10; background:#111115; border:clamp(7px,1.2vw,12px) solid #000; border-radius:16px 16px 0 0; box-shadow:0 0 0 1px #3a3a44,0 30px 80px #000a; overflow:hidden; font-size:clamp(11px,1.5vw,15px); }
.laptop .base { height:14px; width:112%; margin-left:-6%; background:linear-gradient(#34343c,#1a1a20); border-radius:0 0 14px 14px; }
.side { background:#ffffff08; padding:1em .7em; } .side p { padding:.55em .8em; border-radius:.7em; color:var(--dim); } .side .on { background:#d1a25326; color:var(--ink); font-weight:600; }
.chat { padding:1em; display:flex; flex-direction:column; justify-content:flex-end; gap:.5em; } .chat p { padding:.5em .85em; border-radius:1em; max-width:82%; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:42px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px; }
.panel.no { border-color:#d1a25355; }
.panel h3 { font-size:21px; margin-bottom:12px; }
.panel ul { margin:0; padding-left:20px; color:var(--dim); } .panel li { padding:4px 0; }
.fine { color:var(--dim); font-size:15px; text-align:center; margin-top:22px; } .fine a { color:var(--gold1); }

.closing { text-align:center; padding:clamp(90px,12vw,150px) 20px clamp(70px,9vw,110px); }
.closing h2 { margin:18px 0 14px; }
.closing .lead { max-width:540px; margin:0 auto 26px; }
.closing .note { margin-top:14px; }

.foot { display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; padding:26px clamp(16px,4vw,40px) 30px; border-top:1px solid var(--line); color:var(--dim); font-size:14.5px; }
.foot nav { display:flex; flex-wrap:wrap; gap:8px 22px; margin-left:auto; } .foot a:hover { color:var(--ink); }
.foot small { color:var(--faint); }

.sticky { display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:30; align-items:center; justify-content:space-between; padding:10px 10px 10px 18px; border-radius:999px; background:#1f1f26f2; border:1px solid #3a3a44; backdrop-filter:blur(12px); font-size:14px; }
.sticky b { padding:8px 18px; border-radius:999px; background:var(--brand); color:var(--on); }

.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s,transform .7s; }
.js .reveal.in-view { opacity:1; transform:none; }

/* Legal pages */
.doc { max-width:720px; margin:0 auto; padding:56px 20px 80px; color:var(--dim); }
.doc h1 { color:var(--ink); font-size:clamp(34px,6vw,46px); letter-spacing:-.03em; margin-bottom:8px; line-height:1.1; }
.doc h2 { color:var(--ink); font-size:21px; letter-spacing:-.01em; margin:32px 0 8px; line-height:1.25; font-weight:700; }
.doc p,.doc ul { margin:0 0 12px; } .doc li { padding:3px 0; } .doc a { color:var(--gold1); }
.doc table { width:100%; border-collapse:collapse; font-size:14.5px; display:block; overflow-x:auto; }
.doc td,.doc th { border:1px solid var(--line); padding:9px; text-align:left; vertical-align:top; } .doc th { color:var(--ink); }

@media (max-width:860px) {
  .nav nav { display:none; } .pill { margin-left:auto; }
  .bento { grid-template-columns:1fr; } .card.wide { grid-column:auto; } .card { min-height:0; }
  .split,.two { grid-template-columns:1fr; } .split.flip > :first-child { order:0; }
  .sticky { display:flex; } .foot { padding-bottom:90px; }
}
@media (max-width:400px) {
  .nav { gap:12px; }
  .nav .brand { --h:22px; }
  .pill { padding:8px 14px; font-size:13.5px; }
}
@media (max-width:640px) {
  .tag { display:none; }
  .packet { font-size:9.5px; padding:4px 8px; }
  .foot nav { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .send,.recv,.pearls i { animation:none; }
  .packet { animation:none; left:50%; }
  .js .reveal { opacity:1; transform:none; transition:none; }
}