/* ===========================================================================
   NeonDrop — the shared chrome.

   This file IS the design standard. Every value here was lifted from the
   landing page (landing-source.html), which is the reference surface. Any page
   that links this file gets the same wallpaper, the same whisper-glass, the
   same white headers and the same white pills — so no surface can drift.

   The rules, for anyone editing this:
     · The wallpaper is the only loud thing.
     · Every heading is pure white. No gradients on type.
     · All information sits in .box — rgba(8,11,22,.26), --glass-blur, hairline
       border, radius 22. The wallpaper must show through: a box is a whisper,
       not frost. Never hardcode the blur; use the token so every panel on the
       site moves together.
     · One accent thread: #b09fff / #cabdff, solid #7a5cff.
     · Every primary action is a white pill with dark text.
     · No emoji in labels.
   =========================================================================== */

@import url('/fonts/fonts.css');

:root{
  --ink:#f4f5f9; --mut:#b9bdc9; --dim:#8b8f9d;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --acc:#7a5cff; --acc2:#b09fff; --acc3:#cabdff;
  --glass:rgba(8,11,22,.26); --glass-line:rgba(255,255,255,.11); --radius:22px;
  /* One blur for every information panel. It is high enough to turn the
     wallpaper's bokeh into a soft wash behind text — which is what makes the
     glass readable — while .26 alpha keeps the panel genuinely transparent:
     the wallpaper's colour and movement still carry through it. */
  --glass-blur:blur(14px) saturate(.9);
  --display:'Clash Display',sans-serif; --sans:'Satoshi',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* A column, so a short page (the drop 404, the legal pages on a tall screen)
   still puts its footer on the floor instead of leaving it stranded mid-screen.
   `flex:none` on the children keeps every existing size exactly as it was. */
body{background:#080d1d;color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100svh;display:flex;flex-direction:column}
body > .strip,body > nav,body > header,body > section,body > footer{flex:none}
body > footer{margin-top:auto}
a{color:inherit;text-decoration:none}
::selection{background:rgba(122,92,255,.4);color:#fff}

/* ================= the living wallpaper — the star ================= */
/* the video is graded down so the same frame never blows out the copy on top
   of it — it stays the star, it just stops competing with the sentences */
#wallvid,#wallvid2{position:fixed;inset:0;z-index:-5;width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.62) contrast(.9)}
#bokeh{position:fixed;inset:-12%;z-index:-4;pointer-events:none;transition:opacity 1.5s}
#bokeh i{position:absolute;border-radius:50%}
#bokeh .b1{width:50vw;height:50vw;left:-10%;top:-12%;background:radial-gradient(closest-side,rgba(122,92,255,.55),transparent 70%);animation:bok 47s ease-in-out infinite alternate}
#bokeh .b2{width:32vw;height:32vw;right:-2%;top:2%;background:radial-gradient(closest-side,rgba(255,178,92,.34),transparent 70%);animation:bok 39s -12s ease-in-out infinite alternate}
#bokeh .b3{width:40vw;height:40vw;left:20%;bottom:-16%;background:radial-gradient(closest-side,rgba(176,159,255,.42),transparent 70%);animation:bok 53s -25s ease-in-out infinite alternate}
#bokeh .b4{width:17vw;height:17vw;right:16%;bottom:20%;background:radial-gradient(closest-side,rgba(255,205,130,.26),transparent 70%);animation:bok 33s -6s ease-in-out infinite alternate}
#bokeh .b5{width:12vw;height:12vw;left:8%;top:40%;background:radial-gradient(closest-side,rgba(202,189,255,.32),transparent 70%);animation:bok 28s -18s ease-in-out infinite alternate}
#bokeh .b6{width:9vw;height:9vw;right:36%;top:18%;background:radial-gradient(closest-side,rgba(255,190,110,.22),transparent 70%);animation:bok 36s -9s ease-in-out infinite alternate}
@keyframes bok{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,-4vh) scale(1.14)}}
#rain{position:fixed;inset:0;z-index:-3;pointer-events:none}
#tint{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,5,9,.55),rgba(4,5,9,.42) 30%,rgba(4,5,9,.46) 62%,rgba(4,5,9,.62))}

/* Embedded surfaces (the room inside the landing's iframe) drop their own
   wallpaper and let the parent page's glass show through instead. */
body.nd-embed{background:transparent}
body.nd-embed #wallvid,body.nd-embed #wallvid2,body.nd-embed #bokeh,body.nd-embed #rain,body.nd-embed #tint{display:none}

/* ================= chrome: a whisper ================= */
.strip{position:relative;z-index:5;text-align:center;font-size:12px;color:var(--mut);letter-spacing:.02em;
  padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(5,6,10,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.strip a{color:var(--acc3)}
nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,44px)}
.brand{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.01em}
.brand b{color:var(--acc3);font-weight:700;animation:worddrift 22s ease-in-out infinite}
@keyframes worddrift{0%,100%{color:#cabdff}25%{color:#baeed6}50%{color:#ffffff}75%{color:#b2d6ff}}
.nlinks{display:flex;gap:26px;font-size:13.5px;color:var(--mut)}
.nlinks a:hover{color:#cabdff}
.nsign{font-size:13.5px;color:var(--mut)}
.nsign:hover{color:var(--ink)}
/* Signed-in account state, injected by /nd.js in place of the sign-in CTA. */
.nd-account{display:flex;align-items:center;gap:12px;font-size:13.5px}
.nd-who{color:var(--ink);font-weight:600}
.nd-who:hover{color:#cabdff}
.nd-plan{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--acc3);
  border:1px solid rgba(176,159,255,.5);border-radius:999px;padding:3px 9px}
.nd-plan-up:hover{background:rgba(176,159,255,.14)}
.nd-out{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;cursor:pointer;padding:0}
.nd-out:hover{color:var(--ink)}
@media(max-width:600px){.nd-out{display:none}}
@media(max-width:700px){.nlinks{display:none}}

/* ================= sections: white headers, whisper-glass boxes ================= */
section{position:relative;z-index:1;padding:64px clamp(18px,5vw,64px)}
.box{background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:var(--radius);padding:32px clamp(18px,3vw,42px) 38px}
/* a tighter box for controls and inline panels — same glass, less air */
.box-sm{background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:var(--radius);padding:22px clamp(16px,2vw,26px) 24px}
/* Headings balance their lines instead of dropping a single orphaned word onto
   the last one; body copy avoids orphans the same way. Browsers without these
   simply ignore them. */
h1,h2,h3,.sec-h{text-wrap:balance}
p,.sec-sub,.feat span,.prose p{text-wrap:pretty}

.sec-line{font-size:12.5px;color:#e8eaf4;letter-spacing:.04em;margin-bottom:10px;opacity:.85}
.sec-h{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;word-spacing:.06em;max-width:24ch;color:#ffffff}
.sec-sub{color:var(--mut);font-size:14.5px;max-width:52ch;margin-top:8px}

/* Anything sitting straight on the wallpaper rather than inside a box gets the
   same lift as the hero — a section heading, an eyebrow, a note under a CTA. */
section > .sec-line,section > .sec-h,section > .sec-sub,section > .cta-note,
.final .sec-h,.final .cta-note{text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 24px rgba(0,0,0,.6)}

/* A page head — eyebrow, title, standfirst — sitting directly on the
   wallpaper rather than inside a box. The shadows are the hero's: they lift the
   type off a bright frame of the rain video without adding a panel. */
.page{max-width:880px;margin:0 auto;padding:18px 0 40px}
.page-wide{max-width:1280px}
.page > .sec-line{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.page > h1{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,36px);letter-spacing:-.01em;word-spacing:.06em;
  color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.page > .sec-sub,.page > .upd{margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 20px rgba(0,0,0,.6)}
.page > .upd{color:var(--dim);font-size:12.5px}
.page > .box{margin-top:26px}
.page-foot{margin-top:26px;font-size:13px;color:var(--dim);text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* ================= actions: white pills ================= */
.pill{flex:none;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);color:#0a0b10;
  border:0;border-radius:999px;padding:10px 19px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .2s,box-shadow .25s}
.pill:hover{background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.pill:disabled{opacity:.45;cursor:default;box-shadow:none}
/* the quiet second action — outline, never a second colour */
.pill-ghost{background:none;color:var(--ink);border:1px solid var(--line2)}
.pill-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(176,159,255,.6);box-shadow:none}
/* an inline text link on the accent thread */
.qlink{color:#cabdff;border-bottom:1px solid rgba(176,159,255,.5)}
.qlink:hover{color:var(--ink)}

/* ================= form furniture ================= */
.field{width:100%;background:rgba(6,8,13,.38);border:1px solid var(--line2);border-radius:12px;
  padding:12px 14px;color:var(--ink);font:inherit;font-size:14px;outline:none;transition:border-color .25s}
.field:focus{border-color:rgba(176,159,255,.6)}
.field::placeholder{color:var(--dim)}
select.field{-webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(202,189,255,.8) 50%),linear-gradient(135deg,rgba(202,189,255,.8) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ================= reusable content patterns ================= */
/* two quiet columns of lines, no cards */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:26px;max-width:920px}
.feat{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.feat b{font-weight:600;font-size:14.5px;white-space:nowrap}
.feat span{color:var(--mut);font-size:13.5px}
@media(max-width:820px){.feats{grid-template-columns:1fr}}

/* whisper accordions */
.faq{max-width:720px;margin-top:24px}
.faq details{border-bottom:1px solid rgba(255,255,255,.08);padding:16px 0}
.faq summary{cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim);font-weight:400;font-size:17px}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mut);font-size:13.5px;margin-top:9px;max-width:60ch}

/* prose inside a box — the legal pages and any long-form panel */
.prose h2{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;word-spacing:.06em;color:#fff;margin:30px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--mut);font-size:14.5px;margin:0 0 12px;max-width:68ch}
.prose a{color:#cabdff;border-bottom:1px solid rgba(176,159,255,.5)}

/* quiet data tables — hairlines only, never a filled header bar */
.tbl{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
.tbl th{text-align:left;padding:10px 14px 10px 0;color:var(--mut);font-weight:500;font-size:12.5px;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.tbl td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--ink)}
.tbl td.mut{color:var(--mut)}
.tbl b{color:var(--acc2)}
.stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:20px}
.stat b{font-family:var(--display);font-weight:600;font-size:32px;color:var(--acc2);display:block;line-height:1.1}
.stat span{color:var(--mut);font-size:12.5px}

/* ================= the hollow droplet CTA ================= */
.drop-btn{display:inline-block;cursor:pointer;filter:drop-shadow(0 0 26px rgba(176,159,255,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.5));
  animation:dropbob 3.2s ease-in-out infinite alternate;transition:transform .25s,filter .3s}
.drop-btn:hover{transform:scale(1.14);filter:drop-shadow(0 0 44px rgba(202,189,255,.7)) drop-shadow(0 16px 34px rgba(0,0,0,.55))}
@keyframes dropbob{from{transform:translateY(0)}to{transform:translateY(7px)}}
.drop-btn svg{display:block;width:76px;height:auto}
.drop-btn path{animation:dropdrift 22s ease-in-out infinite}
@keyframes dropdrift{
  0%,100%{stroke:rgba(202,189,255,.9);fill:rgba(176,159,255,.12)}
  25%{stroke:rgba(186,238,214,.9);fill:rgba(166,228,198,.10)}
  50%{stroke:rgba(255,255,255,.92);fill:rgba(255,255,255,.09)}
  75%{stroke:rgba(178,214,255,.9);fill:rgba(158,198,255,.10)}
}

/* ================= footer ================= */
footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:26px clamp(18px,5vw,64px);border-top:1px solid rgba(255,255,255,.07);color:var(--dim);font-size:12.5px}
footer a:hover{color:#cabdff}

@media(prefers-reduced-motion:reduce){
  #bokeh i,.brand b,.drop-btn,.drop-btn path{animation:none}
}