:root { --ink:#0b1024; --paper:#eee4ff; --teal:#36e2c4; --deep-teal:#007d78; --violet:#8754ed; --pink:#fa6fa3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
main { overflow:hidden; }
.nav { display:flex; justify-content:space-between; align-items:center; max-width:1370px; margin:auto; padding:30px 48px; position:relative; z-index:3; }
.wordmark { display:block; line-height:0; background:var(--paper); text-decoration:none; }
.wordmark img { display:block; width:155px; height:auto; mix-blend-mode:multiply; }
.nav p, footer p { margin:0; font:10px/1.4 "DM Mono",monospace; letter-spacing:.08em; }
.nav i { display:inline-block; width:3px; height:3px; background:var(--teal); border-radius:50%; vertical-align:middle; margin:0 8px; }
.hero { position:relative; min-height:660px; max-width:1370px; margin:auto; padding:90px 48px 82px; display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.hero-copy { position:relative; z-index:2; max-width:620px; }
.eyebrow { font:11px/1.4 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; margin:0 0 21px; }
.eyebrow span { width:22px; height:2px; display:inline-block; vertical-align:middle; margin-right:9px; background:var(--teal); }
h1,h2 { margin:0; font-weight:800; letter-spacing:-.075em; line-height:.91; }
h1 { font-size:clamp(62px,7.7vw,112px); }
h1 em,h2 em { color:var(--deep-teal); font-style:normal; }
.intro { max-width:420px; margin:29px 0 30px; color:#465064; font-size:15px; line-height:1.7; }
.notify-form { max-width:456px; display:flex; padding:5px; gap:5px; background:white; border:1px solid #d9d9d3; border-radius:3px; box-shadow:0 14px 25px rgba(17,19,42,.06); }
.notify-form input { min-width:0; flex:1; padding:12px 14px; border:0; outline:0; color:var(--ink); font:13px Manrope,sans-serif; }
.notify-form button { border:0; border-radius:2px; background:var(--ink); color:white; padding:13px 17px; cursor:pointer; font:600 12px Manrope,sans-serif; transition:background .2s,transform .2s; }
.notify-form button:hover { background:var(--violet); transform:translateY(-1px); }
.notify-form button span { font-size:16px; margin-left:5px; }
.form-message { min-height:18px; margin:10px 0 0; font:11px "DM Mono",monospace; color:var(--deep-teal); }
.form-message.success { max-width:456px; min-height:auto; padding:15px 17px; border:1px solid rgba(0,125,120,.25); border-radius:3px; background:rgba(54,226,196,.13); color:#005e59; }
.form-message.error { color:#a72055; }
.feature-card { width:min(40vw,440px); height:525px; justify-self:center; position:relative; z-index:1; transform:rotate(3deg); }
.image-frame { overflow:hidden; background:#d5d7e0; box-shadow:0 25px 42px rgba(20,19,54,.18); }
.image-main { position:absolute; width:72%; height:82%; right:5%; top:8%; transform:rotate(-5deg); }
.image-main:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,12,35,.38)); }
.image-main img,.image-small img { width:100%; height:100%; object-fit:cover; }
.image-main img { object-position:50% 28%; }
.image-small { position:absolute; width:38%; height:34%; left:0; bottom:2%; border:8px solid var(--paper); transform:rotate(5deg); }
.image-small img { object-position:61% center; }
.card-caption { position:absolute; right:0; bottom:-4%; margin:0; font:10px "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.stamp { position:absolute; top:0; right:-2%; z-index:2; background:var(--teal); border-radius:50%; width:118px; height:118px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; transform:rotate(12deg); box-shadow:0 9px 18px rgba(2,117,112,.18); }
.stamp span { font:7px "DM Mono",monospace; letter-spacing:.12em; }.stamp strong { font-size:12px; line-height:1; margin:6px 0; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:.75; }.orb-teal { width:340px; height:340px; right:9%; top:15%; background:radial-gradient(circle,var(--teal),transparent 68%); }.orb-violet { width:250px; height:250px; left:-8%; bottom:-7%; background:radial-gradient(circle,#b68aff,transparent 66%); }
.ticker { border-top:1px solid #ced0c9; border-bottom:1px solid #ced0c9; padding:14px 0; white-space:nowrap; overflow:hidden; background:#f8f7f3; }.ticker div { display:inline-flex; gap:29px; animation:marquee 24s linear infinite; }.ticker span { font:700 12px "DM Mono",monospace; letter-spacing:.12em; }.ticker b { color:var(--violet); }@keyframes marquee { to{transform:translateX(-30%)} }
.tease { max-width:1180px; padding:120px 48px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(45px,8vw,130px); align-items:center; }.tease-image { height:460px; overflow:hidden; transform:rotate(-2deg); }.tease-image img { width:100%; height:100%; object-fit:cover; object-position:center 20%; }.tease-copy { max-width:390px; }.tease-copy h2 { font-size:clamp(59px,7vw,96px); }.tease-copy>p:not(.eyebrow) { color:#465064; font-size:14px; line-height:1.75; margin:27px 0; }.tease-copy a { color:var(--ink); text-decoration:none; font:700 12px "DM Mono",monospace; letter-spacing:.08em; }.tease-copy a span { color:var(--violet); font-size:18px; margin-left:8px; }
footer { max-width:1370px; padding:25px 48px 35px; margin:auto; border-top:1px solid #ced0c9; display:flex; justify-content:space-between; }footer a { color:var(--ink); text-decoration:none; font:11px "DM Mono",monospace; letter-spacing:.08em; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:740px) { .nav { padding:21px 22px; }.wordmark img { width:125px; }.nav p{font-size:8px}.hero { min-height:unset; padding:70px 22px 80px; grid-template-columns:1fr; }.feature-card { width:min(79vw,360px); height:430px; margin:45px auto 0; }.stamp { width:95px; height:95px; }.stamp strong { font-size:10px; }.ticker span{font-size:10px}.tease { padding:75px 22px; grid-template-columns:1fr; gap:50px; }.tease-image { height:340px; }.tease-copy { padding-left:10px; }.notify-form { flex-direction:column; padding:6px; }.notify-form button { padding:14px; } footer { padding:22px; gap:18px; } footer p,footer a { font-size:8px; } }