:root { --bg:#100b15; --card:#1b1424; --card2:#241b30; --line:#2e2440; --text:#efe9f3; --muted:#a59bb1; --dim:#7a6e87; --accent:#c9a9ff; --rose:#fb4d96; --cyan:#19e6e6; --gold:#ffcf6b; --good:#6ee7a8; --warn:#ffcf6b; --bad:#ff7a90; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
.cut { clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }

/* topbar */
.top { border-bottom:1px solid var(--line); background:#0c0810; position:sticky; top:0; z-index:5; }
.top .in { max-width:1080px; margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; gap:12px; }
.top .brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.top svg { width:30px; height:30px; }
.top .name { font-weight:800; font-size:19px; letter-spacing:.01em; }
.top nav { display:flex; gap:4px; margin-left:18px; }
.top nav a { color:var(--muted); text-decoration:none; font-size:15px; font-weight:600; padding:6px 12px; }
.top nav a:hover { color:var(--text); }
.top nav a[aria-current="page"] { color:var(--text); background:var(--card2); }
.top a.cta { margin-left:auto; font-size:14px; font-weight:700; color:#fff; text-decoration:none; background:var(--rose); padding:7px 14px;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
@media (max-width:640px) { .top .in { padding:0 12px; gap:6px; } .top .name { display:none; } .top nav { margin-left:0; gap:0; overflow-x:auto; scrollbar-width:none; } .top nav a { padding:6px 5px; font-size:12.5px; white-space:nowrap; } .top svg { width:24px; height:24px; } .top a.cta { display:none; } }

.wrap { max-width:1080px; margin:0 auto; padding:48px 24px 64px; }
h1 { font-size:clamp(34px,5vw,52px); line-height:1.05; margin:0 0 12px; letter-spacing:-.02em; }
h1 span { color:var(--gold); }
.lede { color:var(--muted); font-size:20px; margin:0 0 36px; max-width:820px; }
.hint { color:var(--dim); font-size:14px; }
.label { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
h3.sec { font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:56px 0 16px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
h3.sec .hint { text-transform:none; letter-spacing:0; font-weight:400; }
.tag { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; background:var(--gold); color:#221800; }
.role { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
footer { margin-top:48px; color:#6f647c; font-size:13px; }

/* clickable cards */
.click { cursor:pointer; transition: transform .15s ease, filter .15s ease; }
.click:hover { transform: translateY(-3px); filter: brightness(1.08); }
.click:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.more { margin-top:16px; font-size:14px; font-weight:700; color:var(--accent); }

/* quotes */
q { display:block; padding:11px 14px; background:var(--card2); border-left:3px solid var(--accent); font-size:15px; quotes:"“" "”"; }
q.pos { border-left-color:var(--good); } q.neg { border-left-color:var(--bad); }
.quotes { display:grid; gap:10px; }
.src { display:block; margin-top:6px; font-size:12px; color:var(--dim); font-style:normal; }

/* status pills */
.s { font-size:14px; font-weight:700; padding:6px 12px; background:#251c31; }
.pill { display:inline-block; font-size:12px; font-weight:800; padding:2px 9px; background:#2a2036; white-space:nowrap; }
.ok { color:var(--good); } .mid { color:var(--warn); } .no { color:var(--bad); }

/* persona: ICP hero */
.icp { display:grid; grid-template-columns: 360px 1fr; background:var(--card); outline:1px solid rgba(255,207,107,.35); outline-offset:-1px; }
.icp > img { width:100%; height:100%; object-fit:cover; display:block; }
.icp .body { padding:32px 34px; }
.icp h2 { font-size:36px; margin:12px 0 6px; }
.icp .def { font-size:19px; margin:0 0 20px; }
.icp ul { margin:0 0 22px; padding-left:20px; color:var(--muted); }
.icp li { margin:4px 0; }
.icp li b { color:var(--text); }
.icp .more { color:var(--gold); }
.status { display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:820px) { .icp { grid-template-columns:1fr; } .icp > img { aspect-ratio:1; height:auto; } }

/* persona cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.p { background:var(--card); display:flex; flex-direction:column; }
.p img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 25%; display:block; }
.p .body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.p h4 { font-size:22px; margin:4px 0 6px; }
.p p { margin:0 0 10px; color:var(--muted); }
.p .need { font-size:15px; }
.p .need b { color:var(--accent); }
.p .more { margin-top:auto; padding-top:14px; }

/* dialog */
dialog { border:0; padding:0; background:var(--card); color:var(--text); width:min(860px, 94vw); max-height:90vh;
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
dialog:focus { outline:none; }
dialog::backdrop { background:rgba(8,5,12,.78); backdrop-filter: blur(4px); }
.d { display:grid; grid-template-columns:260px 1fr; max-height:90vh; }
.d.solo { grid-template-columns:1fr; }
.d > img { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; }
.d .body { padding:28px 30px 30px; overflow-y:auto; max-height:90vh; }
.d h2 { margin:6px 0 4px; font-size:30px; }
.d .who { color:var(--muted); margin:0 0 20px; }
.d h5 { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px; }
.d ul, .d ol { margin:0; padding-left:20px; }
.d li { margin:5px 0; }
.d ul.do li::marker { color:var(--accent); }
.d ol li::marker { color:var(--gold); font-weight:800; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.two ul.loves li::marker { color:var(--good); }
.two ul.pains li::marker { color:var(--bad); }
.close { position:absolute; top:12px; right:16px; background:var(--card2); border:0; color:var(--text); font-size:22px; line-height:1; width:36px; height:36px; cursor:pointer; }
.d table { width:100%; border-collapse:collapse; font-size:15px; }
.d td { padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.d td:first-child { font-weight:700; white-space:nowrap; }
.d td:last-child { color:var(--muted); }
.callout { background:var(--card2); padding:14px 16px; margin-top:10px; }
.callout.good { border-left:3px solid var(--good); } .callout.bad { border-left:3px solid var(--bad); }
.callout p { margin:0; color:var(--muted); }
@media (max-width:760px) { .d { grid-template-columns:1fr; } .d > img { aspect-ratio:16/9; height:auto; } .two { grid-template-columns:1fr; } }

/* roadmap */
.lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
@media (max-width:900px) { .lanes { grid-template-columns:1fr; } }
.lane h2 { font-size:20px; margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.lane h2 .dot { width:10px; height:10px; display:inline-block; }
.lane > p { color:var(--dim); font-size:14px; margin:0 0 14px; }
.item { background:var(--card); padding:18px 20px; margin-bottom:12px; }
.item h3 { margin:0 0 6px; font-size:18px; }
.item p { margin:0 0 12px; color:var(--muted); font-size:15px; }
.meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { font-size:12px; font-weight:700; padding:2px 8px; background:var(--card2); color:var(--muted); }
.chip.cap { color:var(--gold); }
.count { margin-left:auto; font-size:12px; color:var(--dim); }

/* home */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 40px; }
.stat { background:var(--card); padding:16px 18px; }
.stat b { display:block; font-size:28px; letter-spacing:-.01em; }
.stat span { color:var(--dim); font-size:13px; }
.doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.door { background:var(--card); text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.door img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 25%; display:block; }
.door .body { padding:20px 22px 22px; }
.door h2 { margin:0 0 6px; font-size:24px; }
.door p { margin:0; color:var(--muted); }
.door .art { aspect-ratio:16/9; display:grid; place-items:center; font:800 26px/1.2 ui-monospace, monospace; text-align:center; padding:0 16px; color:var(--cyan); background:linear-gradient(135deg,#1a1230,#120d1b); }
.takeaways { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.take { background:var(--card); padding:18px 20px; border-left:3px solid var(--accent); }
.take.neg { border-left-color:var(--bad); } .take.pos { border-left-color:var(--good); }
.take b { display:block; margin-bottom:4px; }
.take span { color:var(--muted); font-size:15px; }
.rotator { min-height:0; }
.rotator + script + h3.sec, .rotator + h3.sec { margin-top:28px; }
.rotator q { font-size:20px; padding:18px 22px; border-left-color:var(--good); }

/* roadmap: voyage */
.legs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-8px 0 40px; font-size:14px; }
.legs a { color:var(--muted); text-decoration:none; background:var(--card); padding:7px 12px; font-weight:600;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.legs a:hover { color:var(--text); }
.legs a b { color:var(--cyan); margin-right:6px; font-family:ui-monospace, monospace; }
.legs span { color:var(--dim); }
.route { position:relative; padding-left:64px; }
.route::before { content:""; position:absolute; left:23px; top:8px; bottom:40px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--cyan) 0 10px, transparent 10px 20px); opacity:.55; }
.stage { position:relative; margin-bottom:44px; scroll-margin-top:80px; --c:var(--accent); }
.stage.now { --c:var(--bad); } .stage.next { --c:var(--warn); } .stage.later { --c:var(--accent); } .stage.port { --c:var(--gold); margin-bottom:0; }
.marker { position:absolute; left:-64px; top:18px; width:48px; height:48px; display:grid; place-items:center;
  background:var(--bg); border:2px solid var(--c); color:var(--c); font:800 16px/1 ui-monospace, monospace; border-radius:50%; z-index:1;
  box-shadow:0 0 0 6px var(--bg), 0 0 24px -4px var(--c); }
.banner { position:relative; overflow:hidden; background:var(--card); height:220px; }
.banner.tall { height:300px; }
.banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner .cap { position:absolute; inset:auto 0 0 0; padding:60px 26px 20px; background:linear-gradient(to top, rgba(16,11,21,.95), rgba(16,11,21,.6) 60%, transparent); }
.banner .when { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.banner h2 { margin:2px 0 2px; font-size:30px; }
.banner p { margin:0; color:var(--muted); }
.stops { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.stop { position:relative; }
.stop .item { margin:0; height:100%; padding-top:20px; }
.pin { position:absolute; top:-9px; left:16px; z-index:1; min-width:26px; height:26px; padding:0 7px; display:grid; place-items:center;
  background:var(--c); color:#150f1c; font:800 13px/1 ui-monospace, monospace; border-radius:13px; }
.milestone { display:flex; gap:12px; align-items:center; margin-top:14px; padding:12px 16px; background:var(--card2); border-left:3px solid var(--c); font-size:15px; color:var(--muted); }
.milestone b { color:var(--text); margin-right:6px; }
.milestone .flag { color:var(--c); font-size:18px; }
@media (max-width:640px) { .legs span { display:none; } .route { padding-left:40px; } .route::before { left:14px; } .marker { left:-40px; width:30px; height:30px; font-size:12px; } .banner { height:170px; } .banner h2 { font-size:24px; } }
@media (min-width:900px) { .stage.now .stops { grid-template-columns:repeat(2,1fr); } }

/* home hero */
.hero-img { position:relative; overflow:hidden; height:340px; margin:0 0 28px; background:var(--card); }
.hero-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero-img .cap { position:absolute; inset:auto 0 0 0; padding:80px 30px 26px; background:linear-gradient(to top, rgba(16,11,21,.96), rgba(16,11,21,.55) 60%, transparent); }
.hero-img h1 { margin:0 0 8px; }
.hero-img .lede { margin:0; }
@media (max-width:640px) { .hero-img { height:300px; } .hero-img .cap { padding:60px 18px 18px; } }
.top .name .lab { color:var(--cyan); font-weight:700; }