/* ============================================================================
   Delego — marketing landing page styles. Tokens come from
   ../../colors_and_type.css (linked first). Page is dark by default.
   ============================================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-1000);color:var(--fg);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* Marketing headlines use the display family (Plus Jakarta Sans);
   body + UI inherit Inter from body. */
h1,h2,h3{font-family:var(--font-display)}
::selection{background:rgba(75,61,245,.4);color:#fff}
#root{min-height:100vh}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
.section{padding:var(--space-9) 0}
.eyebrow{font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:9px;align-items:center}
.eyebrow .tick{width:14px;height:1px;background:var(--accent);opacity:.6}

/* ---- buttons ------------------------------------------------------------- */
.btn{font-family:var(--font-sans);font-size:14.5px;font-weight:500;border-radius:var(--r-md);
  padding:11px 18px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;letter-spacing:-.01em;transition:all var(--dur) var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--indigo-500);color:#fff;box-shadow:0 12px 30px -14px var(--indigo-glow)}
.btn-primary:hover{background:var(--indigo-600);transform:translateY(-1px);box-shadow:0 16px 36px -14px var(--indigo-glow)}
.btn-primary:active{transform:scale(.985)}
.btn-secondary{background:var(--ink-850);color:var(--fg);border-color:var(--ink-700)}
.btn-secondary:hover{background:var(--ink-800);border-color:var(--ink-600)}
.btn-ghost{background:transparent;color:var(--fg-2)}
.btn-ghost:hover{color:var(--fg)}
.btn-lg{padding:14px 22px;font-size:15.5px}
.btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* ---- nav ----------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:all var(--dur) var(--ease)}
.nav-inner{display:flex;align-items:center;gap:28px;height:64px}
.nav.scrolled{background:rgba(7,9,13,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-800)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.04em;color:#F3F5FA}
.brand img{width:30px;height:30px}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-link{font-size:14px;color:var(--fg-2);padding:8px 12px;border-radius:8px;transition:all var(--dur) var(--ease);cursor:pointer}
.nav-link:hover{color:var(--fg);background:var(--ink-850)}
.nav-spacer{flex:1}
.nav-cta{display:flex;align-items:center;gap:8px}

/* ---- hero ---------------------------------------------------------------- */
.hero{position:relative;padding-top:148px;padding-bottom:96px;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(133,144,166,.10) 1px,transparent 0);background-size:30px 30px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);pointer-events:none}
.hero-glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:760px;height:520px;
  background:radial-gradient(ellipse,rgba(75,61,245,.30),transparent 65%);filter:blur(20px);pointer-events:none}
.hero-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.hero h1{font-weight:600;font-size:var(--t-display);line-height:.99;letter-spacing:-.03em;margin:20px 0 0;text-wrap:balance;color:#F4F6FB}
.hero h1 .mint{color:var(--signal-400)}
.hero-sub{font-size:var(--t-lead);line-height:1.5;color:var(--fg-2);margin:22px 0 0;max-width:30ch}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-install{margin-top:22px;display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:13px;color:var(--fg-2);background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:9px 14px}
.hero-install .dollar{color:var(--indigo-300)}
.hero-install .copy{margin-left:6px;color:var(--fg-muted);cursor:pointer;display:inline-flex}
.hero-install .copy:hover{color:var(--fg)}

/* ---- generic card -------------------------------------------------------- */
.card{background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--r-lg);transition:all var(--dur) var(--ease)}
.card-hover:hover{background:var(--ink-800);border-color:var(--ink-600);transform:translateY(-2px)}

/* decision panel (hero right) */
.panel{background:linear-gradient(180deg,var(--ink-900),var(--ink-950));border:1px solid var(--ink-700);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ink-800);background:var(--ink-900)}
.panel-bar .dot{width:9px;height:9px;border-radius:50%}
.panel-bar .fn{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-muted);margin-left:6px}
.mono{font-family:var(--font-mono)}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;
  padding:4px 10px 4px 8px;border-radius:var(--r-pill);border:1px solid}
.pill svg{width:13px;height:13px}
.pill-allow{color:#3DEBB6;background:rgba(6,201,140,.10);border-color:rgba(6,201,140,.32)}
.pill-appr{color:#F5B53F;background:rgba(245,165,36,.10);border-color:rgba(245,165,36,.32)}
.pill-deny{color:#F0728A;background:rgba(240,85,106,.10);border-color:rgba(240,85,106,.32)}
.pill-indigo{color:#9A90FA;background:rgba(75,61,245,.12);border-color:rgba(106,95,246,.34)}
.pill-neutral{color:var(--fg-2);background:var(--ink-850);border-color:var(--ink-700)}

/* section heading block */
.shead{max-width:42rem}
.shead h2{font-weight:600;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.024em;margin:14px 0 0;text-wrap:balance}
.shead p{font-size:var(--t-lead);line-height:1.5;color:var(--fg-2);margin:16px 0 0}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

/* code block */
.code{background:var(--ink-950);border:1px solid var(--ink-700);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.code pre{margin:0;padding:18px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.75;overflow:auto}
.tk{color:#9A90FA}.ts{color:#3DEBB6}.tc{color:var(--fg-faint)}.tn{color:#F5B53F}.tkey{color:var(--ink-200)}.tcmd{color:var(--signal-400)}

.divider{height:1px;background:var(--ink-800)}

/* light section */
.on-light{background:var(--paper);color:var(--slate-700)}
.on-light .shead p{color:var(--slate-500)}

@media (max-width:860px){
  .hero-cols{grid-template-columns:1fr;gap:40px}
  .hero-sub{max-width:none}
  .nav-links{display:none}
  .section{padding:var(--space-8) 0}
}

/* entrance — content is always fully visible (no opacity gating) so static
   captures and paused-clock contexts never hide it. A gentle one-shot rise
   plays in real browsers without ever holding an invisible start frame. */
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
.rise{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .5s var(--ease) both}
}