@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Michroma-latin.woff2?v=3") format("woff2")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:500 800;font-display:swap;src:url("fonts/Exo2-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/Inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#0c0d0f;--bg2:#15171a;--line:#2a2e34;--cy:#12e1fb;--tx:#e8ecef;--mu:#8a939c}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);z-index:9}
a{color:inherit;text-decoration:none}
h1,h2,h3,.brand,.btn,.pill,.labs,.mail,nav{font-family:"Exo 2",sans-serif}
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(12,13,15,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em;font-size:15px}.brand img{height:28px}.brand span{color:var(--cy);letter-spacing:.3em;font-weight:500}
.nav nav{display:none;gap:28px;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}.nav nav a:hover{color:var(--cy)}
.hero{position:relative;overflow:hidden;text-align:center;padding:72px 20px 88px;background:radial-gradient(ellipse at 50% 40%,#1a2a2f 0,var(--bg) 65%)}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.35;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%)}
.hero>*{position:relative}
.mark{width:150px;filter:drop-shadow(0 0 28px rgba(18,225,251,.25))}
h1{margin-top:28px;font-size:clamp(38px,10vw,84px);font-weight:700;letter-spacing:.04em;line-height:1}
.labs{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px;color:var(--cy);font-size:clamp(20px,4vw,30px);font-weight:500;letter-spacing:.6em}
.labs i{width:min(22vw,180px);height:2px;background:var(--cy)}.labs span{margin-right:-.6em}
.tag{margin:30px auto 32px;color:var(--mu);font-size:18px;max-width:30ch}
.btn{display:inline-block;padding:13px 28px;background:var(--cy);color:#041014;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:14px;clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 14px) 100%,0 100%);transition:filter .2s}.btn:hover{filter:brightness(1.15)}
.sec{max-width:1120px;margin:0 auto;padding:72px 20px;border-top:1px solid var(--line)}
.h{display:flex;align-items:baseline;gap:14px;font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:32px}.h span{color:var(--cy);font-size:.45em;letter-spacing:.2em}
.cards{display:grid;gap:28px}
.card{background:var(--bg2);border:1px solid var(--line);overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);position:relative}
.card::before{content:"";position:absolute;left:0;top:0;width:4px;height:64px;background:var(--cy);z-index:2}
.art{aspect-ratio:16/7;overflow:hidden;background:#000}.art img{width:100%;height:100%;object-fit:cover;display:block}
.art.hh{display:flex;gap:14px;background:linear-gradient(135deg,#f6c445,#e59a1e);justify-content:center;padding:18px 18px 0}.art.hh img{width:30%;height:auto;align-self:flex-start;object-fit:cover;border-radius:10px 10px 0 0;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.body{display:flex;gap:20px;padding:24px}.shot{width:96px;height:208px;object-fit:cover;border-radius:12px;border:2px solid var(--line);flex:none}
.pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);border:1px solid var(--line);padding:3px 10px}.pill.live{color:var(--cy);border-color:rgba(18,225,251,.4)}
h3{font-size:28px;font-weight:800;margin:10px 0 6px}.body p{color:var(--mu);margin-bottom:20px}
.soon{display:inline-block;padding:1px;background:var(--cy);clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 14px) 100%,0 100%);cursor:default}.soon span{display:block;white-space:nowrap;padding:12px 26px;background:var(--bg2);color:var(--cy);font-family:"Exo 2",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px;clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 14px) 100%,0 100%)}
.lead{font-size:clamp(18px,2.4vw,24px);max-width:40ch;color:#c9d0d6}
.mail{display:inline-block;margin-top:18px;font-size:clamp(22px,5vw,40px);font-weight:700;color:var(--cy);border-bottom:2px solid var(--cy)}
footer{border-top:1px solid var(--line);padding:32px 20px;display:flex;flex-direction:column;gap:14px;align-items:center;color:var(--mu);font-size:14px;text-align:center}
footer nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}footer a:hover{color:var(--cy)}.leaf{width:16px;vertical-align:-2px}
@media(min-width:820px){.nav{padding:16px 40px}.nav nav{display:flex}.hero{padding:110px 40px 130px}.mark{width:190px}.cards{grid-template-columns:1fr 1fr}.body{padding:28px}footer{flex-direction:row;justify-content:space-between;padding:32px 40px}.sec{padding:96px 40px}}
@media(max-width:359px){.shot{display:none}}


/* official logo (same as Honey Hives) */
.brand{font-family:"Michroma",sans-serif;font-weight:400;letter-spacing:.08em;font-size:13px;color:#EFF3F5}.brand span{font-weight:400;letter-spacing:.3em}
.hero h1{margin:0;line-height:0}.lockup{display:block;margin:0 auto;width:min(300px,78vw);max-width:min(420px,80vw);height:auto;filter:drop-shadow(0 0 28px rgba(18,225,251,.28))}@media(min-width:820px){.lockup{width:360px}}

