:root { --ink:#101014; --paper:#f6f2ff; --soft:#fffef4; --mint:#34f5a9; --blue:#35c8ff; --rose:#ff5ca8; --gold:#ffd12f; --green:#baff39; --orange:#ff8f2f; --shadow:6px 6px 0 var(--ink); --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 12px 12px,rgba(255,92,168,.22) 0 3px,transparent 4px),linear-gradient(rgba(16,16,20,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,16,20,.055) 1px,transparent 1px),var(--paper); background-size:48px 48px,24px 24px,24px 24px; font-family:"Elms Sans","Lucida Console",Monaco,"Courier New",monospace; line-height:1.62; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-underline-offset:4px; text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:10px 14px; border:3px solid var(--ink); background:var(--gold); box-shadow:4px 4px 0 var(--ink); font-weight:900; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.wrap { width:min(var(--max),calc(100% - 32px)); margin:auto; }
.topbar { position:sticky; top:0; z-index:5; border-bottom:3px solid var(--ink); background:rgba(246,242,255,.96); backdrop-filter:blur(10px); }
.nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; }
.mark { display:grid; place-items:center; width:34px; height:34px; border:2px solid; background:var(--rose); box-shadow:3px 3px 0 var(--ink); }
.nav-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 18px; font-size:.9rem; font-weight:800; text-transform:uppercase; }
.nav-links a { position:relative; display:inline-flex; min-height:44px; align-items:center; padding:2px 0; text-decoration:none; transition:color .16s ease; }
.nav-links a::before { content:""; position:absolute; inset:auto -5px 8px; height:12px; background:var(--green); opacity:0; transform:skew(-8deg); transition:opacity .16s ease; z-index:-1; }
.nav-links a::after { content:"//"; position:absolute; left:50%; bottom:-4px; color:var(--rose); opacity:0; transform:translateX(-50%) translateY(-4px); transition:opacity .16s ease,transform .16s ease; }
.nav-links a:hover::before,.nav-links a:focus-visible::before,.nav-links a:hover::after,.nav-links a:focus-visible::after { opacity:1; }
.nav-links a:hover::after,.nav-links a:focus-visible::after { transform:translateX(-50%) translateY(0); }
.hero { padding:72px 0 44px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.85fr); gap:34px; align-items:center; }
.eyebrow,.status { display:inline-flex; margin:0 0 18px; padding:5px 9px; border:2px solid; background:var(--green); box-shadow:3px 3px 0 var(--ink); font-size:.8rem; font-weight:900; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Impact,"Arial Black",sans-serif; line-height:.9; text-transform:uppercase; }
h1 { margin-bottom:22px; font-size:clamp(3.4rem,10vw,7.8rem); text-shadow:4px 4px 0 var(--rose),8px 8px 0 var(--blue); }
h2 { margin-bottom:18px; font-size:clamp(2.25rem,6vw,4.6rem); text-shadow:3px 3px 0 var(--blue); }
h3 { margin-bottom:8px; font-size:1.25rem; text-transform:uppercase; }
.lede { max-width:670px; margin-bottom:26px; font-size:clamp(1.05rem,2vw,1.28rem); font-weight:720; }
.actions,.link-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:12px 16px; border:3px solid; background:var(--ink); color:white; box-shadow:4px 4px 0 var(--ink); font-weight:900; text-decoration:none; text-transform:uppercase; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease; }
.btn.alt { background:var(--blue); color:var(--ink); }
.btn:hover,.btn:focus-visible { background:var(--green); color:var(--ink); box-shadow:7px 7px 0 var(--ink); transform:translate(-2px,-2px); }
.btn.alt:hover,.btn.alt:focus-visible { background:var(--rose); color:var(--ink); }
.btn:active { box-shadow:2px 2px 0 var(--ink); transform:translate(2px,2px); }
.link-row a:not(.btn) { display:inline-block; padding:3px 5px; font-weight:900; transition:background-color .16s ease,color .16s ease; }
.link-row a:not(.btn):hover,.link-row a:not(.btn):focus-visible { background:var(--ink); color:white; }
.visual { border:3px solid; background:var(--soft); box-shadow:var(--shadow); overflow:hidden; transform:rotate(1deg); }
.visual img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.window { border:3px solid; background:white; box-shadow:var(--shadow); }
.bar { padding:8px 12px; border-bottom:3px solid; background:linear-gradient(90deg,var(--rose),var(--orange),var(--gold),var(--green),var(--blue)); font-size:.82rem; font-weight:900; text-transform:uppercase; }
.content { padding:clamp(20px,4vw,38px); }
.story { padding:44px 0 72px; }
.story-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:22px; align-items:start; }
.copy p { max-width:70ch; font-size:1.06rem; }
.facts { display:grid; gap:12px; margin:0; }
.facts div { --fact-accent:var(--blue); display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; padding:14px; border:2px solid; border-left:7px solid var(--fact-accent); background:color-mix(in srgb,var(--fact-accent) 13%,var(--soft)); }
.facts div::before { grid-row:1 / 3; display:grid; place-items:center; align-self:start; width:25px; height:25px; margin-top:1px; border:2px solid var(--ink); background:var(--fact-accent); box-shadow:2px 2px 0 var(--ink); font-size:.78rem; font-weight:900; line-height:1; content:"◆"; }
.facts div:nth-child(2) { --fact-accent:var(--gold); }
.facts div:nth-child(2)::before { content:"▣"; }
.facts div:nth-child(3) { --fact-accent:var(--rose); }
.facts div:nth-child(3)::before { content:"◈"; }
.facts div:nth-child(4) { --fact-accent:var(--green); }
.facts div:nth-child(4)::before { content:"✦"; }
.facts dt { grid-column:2; font-size:.76rem; font-weight:900; text-transform:uppercase; }
.facts dd { grid-column:2; margin:4px 0 0; font-weight:720; }
.feature-list { display:grid; gap:10px; padding-left:20px; }
.next { margin-top:24px; padding:20px; border:3px solid; background:var(--gold); box-shadow:4px 4px 0 var(--ink); }
.footer { padding:30px 0 46px; border-top:3px solid; font-size:.9rem; font-weight:800; }
@media(max-width:760px){ .hero-grid,.story-grid{grid-template-columns:1fr}.visual{max-width:620px}.nav{align-items:center;flex-direction:column;gap:8px;padding:14px 0}.nav-links{justify-content:center;width:100%;padding-bottom:8px}.hero{padding-top:48px} }
@media(max-width:480px){ body{font-size:1rem}.wrap{width:min(100% - 24px,var(--max))}.nav-links{flex-wrap:wrap;width:100%;overflow:visible;font-size:.82rem}.hero{padding:38px 0 28px}.actions .btn{width:100%}.visual,.window{box-shadow:4px 4px 0 var(--ink)}.content{padding:18px}.story{padding:34px 0 54px} }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important} }