/* ============================================================
   BrickAI · v2 dark theme — shared across all pages
   Chrome (nav / mobile menu / footer) is injected by v2.js.
   ============================================================ */
:root {
  --bg: #08090d;
  --bg-2: #0d0f16;
  --ink: #f4f5f7;
  --dim: rgba(244,245,247,.62);
  --faint: rgba(244,245,247,.38);
  --blue: #0A49ED;
  --blue-soft: #4f7cff;
  --line: rgba(244,245,247,.1);
  --ok: #8fffba;
  --warn: #ffd479;
  --bad: #ff8f87;
  --font-d: 'Inter', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', ui-monospace, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-d); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }
::selection { background: var(--blue); color: #fff; }

/* grain overlay */
body::after {
  content:""; position:fixed; inset:-50%; z-index:70; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(10) infinite;
}
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} }

#progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:80; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--blue), var(--blue-soft)); }
#glow { position:fixed; width:520px; height:520px; border-radius:50%; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(10,73,237,.16) 0%, transparent 62%); transform:translate(-50%,-50%); }
@media (hover:hover) and (pointer:fine){ #glow{opacity:1;} }

/* ---------- nav ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,4vw,44px); transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(8,9,13,.72); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.02em; }
.logo .ai { color:var(--blue-soft); }
.nav-right { display:flex; align-items:center; gap:22px; }
.nav-link { font-size:13.5px; color:var(--dim); transition:color .2s; }
.nav-link:hover { color:var(--ink); }
.nav-link.on { color:var(--ink); }

.btn {
  display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; border:0; cursor:pointer;
  font-family:var(--font-d); font-weight:600; font-size:14.5px; letter-spacing:-.01em;
  padding:13px 24px; border-radius:999px; position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.23,1,.32,1), background .2s;
}
.btn:hover { background:var(--blue-soft); }
.btn .arr { transition:transform .25s cubic-bezier(.23,1,.32,1); }
.btn:hover .arr { transform:translateX(4px); }
.btn-ghost { background:transparent; border:1px solid rgba(244,245,247,.22); color:var(--ink); }
.btn-ghost:hover { background:rgba(244,245,247,.07); border-color:rgba(244,245,247,.45); }

/* ---------- burger + mobile menu ---------- */
.burger { display:none; background:none; border:0; cursor:pointer; width:40px; height:40px; position:relative; z-index:65; flex:none; }
.burger span { position:absolute; left:9px; right:9px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, top .3s ease; }
.burger span:first-child { top:15px; }
.burger span:last-child { top:23px; }
.burger.open span:first-child { top:19px; transform:rotate(45deg); }
.burger.open span:last-child { top:19px; transform:rotate(-45deg); }
.menu { position:fixed; inset:0; z-index:62; background:rgba(8,9,13,.97); backdrop-filter:blur(18px);
  opacity:0; pointer-events:none; transition:opacity .3s ease; overflow-y:auto; }
.menu.open { opacity:1; pointer-events:auto; }
.menu-in { padding:110px 26px 48px; display:flex; flex-direction:column; }
.m-link { font-size:26px; font-weight:700; letter-spacing:-.02em; padding:16px 0; border-bottom:1px solid var(--line); }
.m-group { font-family:var(--font-m); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:30px 0 6px; }
.m-sub { display:flex; flex-direction:column; gap:3px; padding:15px 0; border-bottom:1px solid var(--line); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.m-sub span { font-size:13.5px; font-weight:400; color:var(--dim); }
.m-sub .wip { font-style:normal; margin-left:8px; }
.m-cta { margin-top:34px; justify-content:center; }
.m-mail { margin-top:22px; text-align:center; font-size:13.5px; color:var(--faint); }
.menu .m-link, .menu .m-group, .menu .m-sub, .menu .m-cta, .menu .m-mail { opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease; }
.menu.open .m-link, .menu.open .m-group, .menu.open .m-sub, .menu.open .m-cta, .menu.open .m-mail { opacity:1; transform:none; }
.menu.open .m-link { transition-delay:.05s; } .menu.open .m-group { transition-delay:.1s; }
.menu.open .m-sub:nth-of-type(3) { transition-delay:.14s; } .menu.open .m-sub:nth-of-type(4) { transition-delay:.18s; }
.menu.open .m-sub:nth-of-type(5) { transition-delay:.22s; } .menu.open .m-cta { transition-delay:.28s; }
.menu.open .m-mail { transition-delay:.32s; }

/* ---------- shared building blocks ---------- */
.kicker { font-family:var(--font-m); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.wrap { max-width:1200px; margin:0 auto; padding-left:clamp(20px,4vw,44px); padding-right:clamp(20px,4vw,44px); }
.sect { padding:88px 0; }
.sect h2 { font-size:clamp(30px,4.6vw,54px); font-weight:800; letter-spacing:-.03em; }
.sect .sub { color:var(--dim); margin-top:14px; max-width:56ch; }
.hl { color:var(--blue-soft); }

/* page hero (subpages) */
.phero { position:relative; padding:170px 0 72px; overflow:hidden; }
.phero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 0%, rgba(10,73,237,.18), transparent 62%); }
.phero .wrap { position:relative; }
.phero h1 { font-size:clamp(40px,6.6vw,84px); font-weight:900; letter-spacing:-.04em; line-height:1.02; margin-top:24px; max-width:16ch; }
.phero .lede { color:var(--dim); margin-top:24px; max-width:56ch; font-size:clamp(16px,1.8vw,20px); }
.phero .cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }

/* cards */
.vcard { border:1px solid var(--line); border-radius:20px; padding:32px 28px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(244,245,247,.045), rgba(244,245,247,.015)); transition:border-color .3s, transform .3s; }
.vcard:hover { border-color:rgba(126,162,255,.45); transform:translateY(-5px); }
.vcard .no { font-family:var(--font-m); font-size:11px; letter-spacing:.14em; color:var(--faint); }
.vcard h3 { font-size:21px; font-weight:700; letter-spacing:-.02em; margin-top:14px; }
.vcard p { font-size:14.5px; color:var(--dim); margin-top:10px; line-height:1.65; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .grid2, .grid3 { grid-template-columns:1fr; } }

/* pills / tags */
.pill { display:inline-block; font-family:var(--font-m); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-soft); border:1px solid rgba(79,124,255,.35); border-radius:999px; padding:5px 12px; }
.pill-ok { color:var(--ok); border-color:rgba(120,255,178,.35); }
.pill-warn { color:var(--warn); border-color:rgba(255,212,121,.4); }
.wip { font-family:var(--font-m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warn); border:1px solid rgba(255,212,121,.4); border-radius:999px; padding:3px 9px; }

/* step rows */
.steprow { display:grid; grid-template-columns:110px 1fr; gap:30px; padding:46px 0; border-bottom:1px solid var(--line); align-items:start; }
.steprow:first-of-type { border-top:1px solid var(--line); }
.steprow .n { font-family:var(--font-m); font-size:13px; color:var(--blue-soft); letter-spacing:.12em; padding-top:9px; }
.steprow h3 { font-size:clamp(22px,3vw,34px); font-weight:800; letter-spacing:-.025em; }
.steprow p { color:var(--dim); margin-top:10px; max-width:56ch; font-size:16px; }
@media (max-width:640px){ .steprow { grid-template-columns:1fr; gap:8px; padding:34px 0; } }

/* cta band */
.ctaband { position:relative; padding:100px 0; text-align:center; overflow:hidden; }
.ctaband .orb { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:900px; height:900px; border-radius:50%; filter:blur(90px); opacity:.3; pointer-events:none;
  background:radial-gradient(circle, rgba(10,73,237,.55), transparent 65%); }
.ctaband .wrap { position:relative; }
.ctaband h2 { font-size:clamp(34px,6vw,72px); font-weight:900; letter-spacing:-.04em; line-height:1.02; margin-top:22px; }
.ctaband p { color:var(--dim); margin:20px auto 36px; max-width:46ch; }

/* footer */
.foot { border-top:1px solid var(--line); padding:44px clamp(20px,4vw,44px); display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.foot span, .foot a { font-size:13px; color:var(--faint); }
.foot a:hover { color:var(--ink); }
.foot .links { display:flex; gap:22px; flex-wrap:wrap; }

/* reveals */
.gr { opacity:0; transform:translateY(34px); }
.no-js .gr, .no-motion .gr { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .gr { opacity:1 !important; transform:none !important; }
  #glow { display:none; }
  body::after { animation:none; }
}

/* ---------- mobile ---------- */
@media (max-width:720px){
  .nav { padding:14px 18px; }
  .nav .nav-link, .nav .btn { display:none; }   /* top bar = logo + burger only */
  .burger { display:block; }
  .sect { padding:72px 0; }
  .phero { padding:140px 0 64px; }
  .phero .cta-row .btn { width:100%; justify-content:center; }
  .ctaband { padding:90px 0; }
}

/* ---------- theme toggle ---------- */
.tbtn { background:none; border:1px solid var(--line); border-radius:999px; cursor:pointer; width:38px; height:38px;
  display:grid; place-items:center; color:var(--dim); flex:none; transition:color .2s, border-color .2s; }
.tbtn:hover { color:var(--ink); border-color:var(--dim); }
.tbtn svg { width:17px; height:17px; }
.tbtn .sun { display:none; } .tbtn .moon { display:block; }
html[data-theme="light"] .tbtn .sun { display:block; }
html[data-theme="light"] .tbtn .moon { display:none; }

/* ---------- light theme ---------- */
html[data-theme="light"] {
  --bg: #F3F4EE;
  --bg-2: #ECEDE5;
  --ink: #17181C;
  --dim: rgba(23,24,28,.66);
  --faint: rgba(23,24,28,.42);
  --blue: #0037C6;
  --blue-soft: #0A49ED;
  --line: rgba(23,24,28,.13);
  --ok: #1F7A4D;
  --warn: #B86E00;
  --bad: #BE2F29;
}
html[data-theme="light"] body::after { opacity:.035; }
html[data-theme="light"] #glow { background:radial-gradient(circle, rgba(0,55,198,.1) 0%, transparent 62%); }
html[data-theme="light"] .nav.scrolled { background:rgba(243,244,238,.82); }
html[data-theme="light"] .menu { background:rgba(243,244,238,.97); }
html[data-theme="light"] .btn-ghost { border-color:rgba(23,24,28,.28); color:var(--ink); }
html[data-theme="light"] .btn-ghost:hover { background:rgba(23,24,28,.06); border-color:rgba(23,24,28,.5); }
html[data-theme="light"] .vcard { background:#FFFFFF; box-shadow:0 4px 16px rgba(23,24,28,.06); }
html[data-theme="light"] .free-pill { border-color:rgba(31,122,77,.4); }
html[data-theme="light"] .wip { border-color:rgba(184,110,0,.4); }
html[data-theme="light"] .pill { border-color:rgba(0,55,198,.35); }
html[data-theme="light"] .ctaband .orb { opacity:.18; }