:root {
  --page:#000000; --surface:#1a1a19; --ink:#ffffff; --ink2:#cdccc2;
  --muted:#98968e; --grid:#2c2c2a; --warm:#f5c86a; --good:#3ddc68;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--page); color:var(--ink); position:relative;
       font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
.wrap { max-width:1440px; margin:0 auto; padding:0 24px; }

header { padding:18px 0; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:2px; color:var(--ink); text-decoration:none; }
.brand span { color:var(--warm); }
nav { display:flex; gap:6px; flex-wrap:wrap; }
nav a { color:var(--ink2); text-decoration:none; font-size:14px; padding:12px 12px;
        border-radius:8px; min-height:48px; display:inline-flex; align-items:center; }
nav a:hover, nav a[aria-current=page] { color:var(--ink); background:var(--surface); }

.hero { text-align:center; padding:34px 0 10px; }
h1 { font-size:clamp(28px, 5.5vw, 52px); font-weight:800; line-height:1.14;
     letter-spacing:-0.5px; max-width:900px; margin:0 auto; }
h1 em { font-style:normal; color:var(--warm); }
.sub { font-size:clamp(15px, 2.4vw, 19px); color:var(--ink2); max-width:760px;
       margin:16px auto 22px; }
.cta { display:inline-flex; align-items:center; background:var(--warm); color:#161206; font-weight:750;
       font-size:17px; padding:15px 30px; border-radius:10px; text-decoration:none;
       min-height:48px; }
.cta:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible
     { outline:3px solid var(--warm); outline-offset:2px; }
.tiny { font-size:12.5px; color:var(--muted); margin-top:10px; }

.pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:30px 0 6px; }
.pair figure { margin:0; }
.pair img { width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; border-radius:12px;
            border:1px solid var(--grid); display:block; }
.pair figcaption { font-size:12px; color:var(--muted); letter-spacing:0.6px;
                   font-weight:700; margin-top:8px; }
@media (max-width:700px){ .pair { grid-template-columns:1fr; } }

.strip { border:1px solid var(--grid); background:var(--surface); border-radius:12px;
         padding:14px 18px; margin:26px 0 44px; font-size:14.5px; color:var(--ink2); }
.strip b { color:var(--ink); }

h2 { font-size:clamp(22px, 3.6vw, 30px); font-weight:750; margin-bottom:18px; }
h3 { font-size:16.5px; margin-bottom:8px; }
p  { color:var(--ink2); }
.cols { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:48px; }
@media (max-width:800px){ .cols { grid-template-columns:1fr; } }
.card { background:var(--surface); border:1px solid var(--grid); border-radius:12px; padding:20px; }
.card p { font-size:14px; }

.how { margin-bottom:48px; }
.how ol { list-style:none; counter-reset:n; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:800px){ .how ol { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .how ol { grid-template-columns:1fr; } }
.how li { counter-increment:n; background:var(--surface); border:1px solid var(--grid);
          border-radius:12px; padding:16px; font-size:13.5px; color:var(--ink2); }
.how li::before { content:counter(n); display:block; font-size:22px; font-weight:800;
                  color:var(--warm); margin-bottom:6px; }
.how li b { color:var(--ink); display:block; margin-bottom:3px; }

.signup { background:var(--surface); border:1px solid var(--grid); border-radius:14px;
          padding:28px 22px; text-align:center; margin-bottom:40px; }
.signup p { max-width:620px; margin:8px auto 18px; font-size:15px; }
form.lead { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
label.viz { display:block; font-size:13px; color:var(--ink2); margin-bottom:6px; width:100%; }
input[type=email] { font-size:16px; padding:13px 14px; min-height:48px; width:min(340px, 90vw);
        border-radius:10px; border:1px solid var(--grid); background:var(--page); color:var(--ink); }
button { font-size:16px; font-weight:750; min-height:48px; padding:13px 24px; border-radius:10px;
         border:0; background:var(--warm); color:#161206; cursor:pointer; }
.hp { position:absolute; left:-5000px; }

article { max-width:760px; margin:0 auto 48px; }
article h1 { font-size:clamp(26px, 4.5vw, 40px); text-align:left; margin:10px 0 16px; max-width:none; }
article h2 { margin-top:34px; }
article p, article li { font-size:15.5px; margin-bottom:14px; }
article ul, article ol { padding-left:22px; margin-bottom:14px; }
article .strip { margin:22px 0; }

footer { border-top:1px solid var(--grid); padding:22px 0 34px; font-size:13px; color:var(--muted); }
footer a { color:var(--ink2); }
footer .links { margin-top:6px; display:flex; gap:14px; flex-wrap:wrap; }
footer .links a { min-height:44px; display:inline-flex; align-items:center; }

.brand img { height:33px; width:45px; display:block; }

/* Ambient brand glow: the logo itself, blurred huge behind the page. Decorative
   only - fixed, non-interactive, behind everything, gentle enough to read over. */
body::before {
  content:""; position:fixed; z-index:-1; pointer-events:none;
  inset:0;
  background: url(/bg-hero-v6.webp) no-repeat center -560px / min(2100px, 140vw) auto;
  opacity:0.45;
}

  .hlogo { max-width:430px; margin:6px auto 0; }
}

.showcase { padding-top:6px; }
.strip a { color:var(--warm); }
.pair { margin-top:10px; }