:root{--bg:#0b0a10;--bg2:#13111b;--card:#1a1722;--line:#2a2433;--tx:#ece9f2;--mut:#b4adc2;--cy:#2ef2ff;--mg:#ff4fd8;--gold:#d9a35b;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 Inter,system-ui,sans-serif}
h1,h2,h3,.logo{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.6rem);letter-spacing:-.02em}h2{font-size:clamp(1.6rem,4vw,2.4rem)}h3{font-size:1.15rem}
a{color:var(--cy)}p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
section{padding:72px 0}.band{background:var(--bg2);border-block:1px solid var(--line)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cy);color:#000;padding:8px 12px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px;border-radius:6px}
.grad{background:linear-gradient(90deg,var(--gold),var(--mg),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow,.mono{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cy)}
.mono{text-transform:none;letter-spacing:0;color:var(--gold)}
.nav{position:sticky;top:0;z-index:50;background:rgba(11,10,16,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.4rem;font-weight:700;color:var(--tx);text-decoration:none;margin:0}.logo span{color:var(--cy)}
nav{display:flex;gap:22px;align-items:center}nav a{color:var(--mut);text-decoration:none;font-weight:500}nav a:hover{color:var(--tx)}
.menu-toggle{position:absolute;opacity:0;pointer-events:none}.burger{display:none;cursor:pointer;padding:10px}
.burger i{display:block;width:24px;height:2px;background:var(--tx);margin:5px 0}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;background:linear-gradient(90deg,var(--cy),var(--mg));color:#0b0a10;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(46,242,255,.25)}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--cy)}
.btn.sm{padding:8px 16px;color:#0b0a10}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.hero{position:relative;overflow:hidden;padding:64px 0 80px}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);opacity:.5}
.hero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;color:var(--mut)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy);animation:pulse 2s infinite}
.tagline{font-family:"Space Grotesk";font-size:1.35rem;color:var(--gold);margin:.2em 0 .8em}
.lead{color:var(--mut);font-size:1.08rem;max-width:56ch}.lead strong{color:var(--tx)}
.hash{font-family:ui-monospace,monospace;color:var(--mg);font-weight:600}
.bridge-art{margin:0;text-align:center}.bridge-art svg{width:100%;max-width:440px;height:auto}
.bridge-art figcaption{font-family:ui-monospace,monospace;color:var(--mut);font-size:.85rem}
.filament{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 3s ease forwards .3s}
.layers path{opacity:0;animation:rise .5s ease forwards}.layers path:nth-child(1){animation-delay:1.2s}.layers path:nth-child(2){animation-delay:1.5s}.layers path:nth-child(3){animation-delay:1.8s}.layers path:nth-child(4){animation-delay:2.1s}.layers path:nth-child(5){animation-delay:2.4s}.layers path:nth-child(6){animation-delay:2.7s}
.steam path{animation:steam 3s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes steam{50%{opacity:.3;transform:translateY(-4px)}}@keyframes pulse{50%{opacity:.4}}
.bridge-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;align-items:center;margin:28px 0}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}.side p{color:var(--mut);margin:0}
.cafe-side{border-color:rgba(217,163,91,.5)}.cafe-side h3 span{color:var(--gold)}.tech-side{border-color:rgba(46,242,255,.5)}.tech-side h3 span{color:var(--cy)}
.span{display:grid;gap:8px}.span span{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--mg),var(--cy));background-size:200% 100%;animation:flow 4s linear infinite}
.span span:nth-child(2){opacity:.75;animation-delay:-1s}.span span:nth-child(3){opacity:.5;animation-delay:-2s}.span span:nth-child(4){opacity:.3;animation-delay:-3s}
@keyframes flow{to{background-position:-200% 0}}
.narrow{max-width:62ch;color:var(--mut)}.center{margin:0 auto;text-align:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.loc{list-style:none;padding:0;display:grid;gap:10px}.loc li{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:14px 18px;display:flex;justify-content:space-between;gap:10px}.loc span{color:var(--mut)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.steps{margin:0;padding-left:1.2em;display:grid;gap:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.tags span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.9rem;color:var(--mut)}
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.flow li,.card,.values article{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .2s,transform .2s}
.flow b{font-family:ui-monospace,monospace;color:var(--mg)}.flow p,.card p,.values p{color:var(--mut);margin:0}
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:24px 0}
.values article{background-image:repeating-linear-gradient(0deg,transparent 0 9px,rgba(46,242,255,.05) 9px 10px)}
.values article:hover,.card.link:hover{border-color:var(--cy);transform:translateY(-3px)}
.values h3{color:var(--cy)}
.story{border-left:3px solid var(--gold);padding:6px 0 6px 20px;max-width:75ch;color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.card.link{text-decoration:none;color:var(--tx)}
.small-sec h2{font-size:1.6rem}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:.9rem}.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.soc{display:flex;gap:16px}
@media (max-width:900px){.values{grid-template-columns:repeat(2,1fr)}.hero-in,.split{grid-template-columns:1fr}.bridge-art{order:-1}.bridge-art svg{max-width:300px}}
@media (max-width:760px){
 .burger{display:block}nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;padding:20px;background:var(--bg2);border-bottom:1px solid var(--line)}
 .menu-toggle:checked~nav{display:flex}
 .bridge-row,.flow,.cards{grid-template-columns:1fr}.span{transform:rotate(90deg);width:60px;margin:10px auto}
 section{padding:52px 0}.values{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.filament{stroke-dashoffset:0}.layers path{opacity:1}html{scroll-behavior:auto}}
.note{color:var(--mut);font-size:.95rem;margin-top:16px}
.sub{margin-top:36px}.vs{display:grid;gap:8px;margin:12px 0 20px}
.vs-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.vs-row p{margin:0;padding:12px 16px;border-radius:12px;border:1px solid var(--line)}
.vs-row .old{color:var(--mut);background:var(--bg2);text-decoration:line-through;text-decoration-color:rgba(255,79,216,.5)}
.vs-row .new{background:var(--card);border-color:rgba(46,242,255,.35)}
.mocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:8px 0 12px}
.mock{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mbar{display:flex;gap:6px;align-items:center;padding:10px 14px;background:#110f17;border-bottom:1px solid var(--line);font:12px ui-monospace,monospace;color:var(--mut)}
.mbar i{width:9px;height:9px;border-radius:50%;background:var(--line)}.mbar span{margin-left:8px}
.mbody{padding:14px}.mrow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.mrow.ok b{color:var(--cy)}.mrow.warn b{color:var(--mg)}.tag{color:var(--cy)}.tag.dim{color:var(--mut)}
.mock figcaption{padding:10px 14px 14px;color:var(--mut);font-size:.85rem}
@media(max-width:640px){.vs-row{grid-template-columns:1fr}}
.media-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:28px 0}
.media{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.media img,.media video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
#aba-events .media{max-width:720px;margin:20px 0}