:root { --paper:#fbf8f5; --ink:#13082d; --muted:#5a4d73; --line:rgba(19,8,45,.14); --purple:#6c22ff; --pink:#ff3fab; --cyan:#37d9ff; --accent:var(--cyan); --max:1180px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
:root[data-accent="violet"] { --accent:#a974ff; } :root[data-accent="coral"] { --accent:#ff765e; } :root[data-accent="navy"] { --accent:#54dcff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; } a { color:inherit; } .skip { position:fixed; z-index:50; top:0; left:1rem; padding:.7rem 1rem; background:white; transform:translateY(-120%); } .skip:focus { transform:none; }
.case-header { position:relative; z-index:10; display:flex; width:min(100% - 3rem,var(--max)); height:80px; margin:auto; align-items:center; justify-content:space-between; } .brand { font-weight:900; text-decoration:none; letter-spacing:-.04em; } .brand span { color:var(--purple); } .case-header nav { display:flex; align-items:center; gap:1.5rem; } .case-header nav a { font-size:.82rem; font-weight:800; text-decoration:none; } .header-cta { display:inline-flex; min-height:44px; padding:.75rem 1.1rem; align-items:center; border-radius:999px; background:var(--ink); color:white; } .language { color:var(--purple); }
main { overflow:hidden; } .case-hero,.case-section,.decision,.proof-band,.lesson,.case-cta,.case-pagination { width:min(100% - 3rem,var(--max)); margin:auto; } .case-hero { min-height:calc(100vh - 80px); padding:4rem 0 6rem; display:flex; flex-direction:column; justify-content:flex-end; } .crumb { display:flex; gap:.55rem; margin-bottom:auto; color:var(--muted); font-size:.75rem; } .crumb a { text-decoration:none; } .eyebrow,.kicker { color:var(--purple); font-size:.7rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; } h1 { max-width:14ch; margin:1rem 0; font-size:clamp(3.7rem,8vw,8.7rem); line-height:.86; letter-spacing:-.075em; } .lede { max-width:56ch; color:var(--muted); font-size:clamp(1.12rem,2vw,1.45rem); line-height:1.55; } .facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:4rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .facts div { padding:1.25rem 1.25rem 1.25rem 0; } .facts div + div { padding-left:1.25rem; border-left:1px solid var(--line); } .facts span,.facts strong { display:block; } .facts span { margin-bottom:.5rem; color:var(--muted); font-size:.68rem; font-weight:850; text-transform:uppercase; letter-spacing:.1em; } .facts strong { font-size:.95rem; }
.case-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:5rem; padding:8rem 0; border-top:1px solid var(--line); } h2 { margin:.75rem 0 0; font-size:clamp(2.5rem,5vw,5.5rem); line-height:.94; letter-spacing:-.065em; } .terrain ol,.built ul { margin:0; padding:0; list-style:none; } .terrain li { display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.5; } .terrain li span { color:var(--purple); font-size:.72rem; font-weight:900; }
.decision { position:relative; padding:clamp(3rem,7vw,7rem); color:white; background:linear-gradient(135deg,#18094c,#6c22ff 64%,#b331d0); border-radius:32px; } .decision::after { content:""; position:absolute; width:220px; aspect-ratio:1; right:7%; top:15%; border:1px solid rgba(255,255,255,.3); border-radius:50%; box-shadow:0 0 70px color-mix(in srgb,var(--accent) 50%,transparent); } .decision .kicker { color:var(--accent); } .decision h2 { position:relative; z-index:1; max-width:13ch; } .decision > p:last-child { position:relative; z-index:1; max-width:58ch; margin:2.5rem 0 0 auto; color:rgba(255,255,255,.75); font-size:1.15rem; line-height:1.65; }
.system-flow { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); } .system-flow div { display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.7rem; align-items:center; background:white; } .system-flow span { color:var(--purple); font-size:.7rem; font-weight:900; } .system-flow strong { font-size:1.15rem; } .built li { padding:1.6rem 0 1.6rem 2rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:1.08rem; line-height:1.55; position:relative; } .built li::before { content:""; position:absolute; left:0; top:2.1rem; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.proof-band { padding:6rem clamp(2rem,5vw,5rem); color:white; background:#13082d; border-radius:32px; } .proof-band .kicker { color:var(--accent); } .proof-band > div { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:2rem; background:rgba(255,255,255,.16); } .proof-band article { display:grid; min-height:220px; padding:1.8rem; align-content:end; background:#1b0b42; } .proof-band article strong { font-size:clamp(2.8rem,5vw,5.6rem); line-height:.9; letter-spacing:-.07em; color:var(--accent); } .proof-band article span { max-width:18ch; margin-top:.8rem; color:rgba(255,255,255,.62); font-size:.8rem; font-weight:750; } .proof-band aside { max-width:58ch; margin:3rem 0 0 auto; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.2); } .proof-band aside strong { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; } .proof-band aside p { color:rgba(255,255,255,.63); line-height:1.55; }
.lesson { padding:9rem 0; } .lesson h2 { max-width:14ch; } .lesson > p:last-child { max-width:60ch; margin:2.5rem 0 0 auto; color:var(--muted); font-size:1.18rem; line-height:1.7; } .case-cta { display:flex; min-height:360px; padding:clamp(2rem,5vw,5rem); align-items:flex-end; justify-content:space-between; gap:2rem; color:white; background:linear-gradient(120deg,#6c22ff,#ff3fab); border-radius:32px; } .case-cta p { max-width:12ch; margin:0; font-size:clamp(2.3rem,5vw,5rem); font-weight:900; line-height:.95; letter-spacing:-.06em; } .case-cta a { flex:0 0 auto; padding:1rem 1.25rem; border-radius:999px; color:var(--ink); background:white; font-weight:900; text-decoration:none; }
.case-pagination { display:flex; justify-content:space-between; gap:2rem; padding:4rem 0; } .case-pagination a { font-weight:850; text-decoration:none; } .case-pagination a:last-child { text-align:right; } .case-pagination span { display:block; margin-bottom:.4rem; color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; } footer { display:flex; width:min(100% - 3rem,var(--max)); margin:auto; padding:2rem 0; justify-content:space-between; gap:2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; } .not-found { min-height:100vh; display:grid; place-content:center; padding:2rem; text-align:center; } .not-found h1 { max-width:10ch; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:760px){ .case-header { height:64px; } .case-header nav > a:not(.header-cta):not(.language) { display:none; } .case-header .header-cta { font-size:.7rem; } .case-hero { min-height:auto; padding:5rem 0; } h1 { font-size:clamp(3.2rem,15vw,5.2rem); } .facts,.case-section,.proof-band > div { grid-template-columns:1fr; } .facts div + div { padding-left:0; border-left:0; border-top:1px solid var(--line); } .case-section { gap:3rem; padding:5rem 0; } .decision,.proof-band,.case-cta { width:calc(100% - 2rem); border-radius:22px; } .decision::after { width:120px; } .proof-band article { min-height:160px; } .case-cta { align-items:flex-start; flex-direction:column; } .case-pagination,footer { align-items:flex-start; flex-direction:column; } .case-pagination a:last-child { text-align:left; } }
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }