@font-face { font-family:'Press Start 2P'; src:url('/assets/fonts/press-start-2p.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:Inter; src:url('/assets/fonts/inter.woff2') format('woff2'); font-display:swap; }
* { box-sizing:border-box; }
html { min-height:100%; overflow-x:hidden; color-scheme:dark; background:#090d16; }
body { margin:0; overflow-x:hidden; color:#f3f6ff; background:#090d16; font-family:Inter,system-ui,sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; z-index:10; top:8px; left:8px; padding:10px 14px; opacity:0; transform:translateY(-150%); color:#071807; background:#72ff5c; font-weight:800; }
.skip-link:focus { opacity:1; transform:none; }
.landing-header,.landing-footer { width:min(1180px,calc(100% - 40px)); margin:auto; }
.landing-header { position:relative; z-index:4; min-height:76px; display:flex; align-items:center; }
.landing-brand { display:grid; gap:3px; color:#fff; font:14px/1 'Press Start 2P',monospace; letter-spacing:.04em; text-decoration:none; text-shadow:2px 2px #ff007f,-2px -2px #00e5ff; }
.landing-footer > a { color:#c8d1e2; font-size:.9rem; font-weight:750; text-decoration:none; }
.landing-footer a:hover,.landing-footer a:focus-visible { color:#72ff5c; }
main { width:100%; overflow-x:clip; }
.landing-hero { position:relative; width:min(1180px,calc(100% - 40px)); min-height:700px; display:grid; grid-template-columns:minmax(350px,.82fr) minmax(520px,1.18fr); align-items:center; gap:clamp(24px,4vw,58px); margin:auto; padding:54px 0 126px; isolation:isolate; }
.landing-hero::before { position:absolute; z-index:-3; width:170vw; height:calc(100% + 76px); top:-76px; left:50%; content:''; transform:translateX(-50%); background:radial-gradient(ellipse at 66% 52%,rgba(88,64,154,.36),transparent 31%),radial-gradient(ellipse at 63% 55%,rgba(0,229,255,.12),transparent 46%),linear-gradient(135deg,#0b0f19 6%,#171331 62%,#251b3d); }
.landing-hero::after { position:absolute; z-index:-2; width:170vw; height:calc(100% + 76px); top:-76px; left:50%; content:''; transform:translateX(-50%); opacity:.34; background-image:linear-gradient(rgba(101,217,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(101,217,255,.12) 1px,transparent 1px),radial-gradient(circle,#ff007f 1px,transparent 1.4px); background-position:0 0,0 0,5px 5px; background-size:32px 32px,32px 32px,14px 14px; mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.8) 72%,transparent); }
.signal-field { position:absolute; z-index:-1; inset:0; pointer-events:none; }
.signal-field::before,.signal-field::after { position:absolute; content:''; border:1px solid rgba(0,229,255,.28); border-radius:50%; transform:rotate(-8deg); }
.signal-field::before { width:76%; height:54%; right:-4%; bottom:9%; border-style:dashed; }
.signal-field::after { width:94%; height:70%; right:-14%; bottom:-2%; border-color:rgba(255,0,127,.25); }
.signal-field span { position:absolute; display:block; height:14px; border:2px solid rgba(9,13,22,.72); border-radius:999px 16px 999px 16px; transform:rotate(-38deg); transform-origin:left center; opacity:.72; box-shadow:5px 6px 0 rgba(9,13,22,.42); }
.signal-field span:nth-child(1) { width:280px; right:-40px; top:70px; background:linear-gradient(90deg,#ff007f,#ffb000); }
.signal-field span:nth-child(2) { width:230px; right:-30px; top:122px; height:9px; background:linear-gradient(90deg,#00e5ff,#ff007f); }
.signal-field span:nth-child(3) { width:210px; height:18px; left:-70px; bottom:120px; background:linear-gradient(90deg,#00e5ff,#7957ff); }
.cover-doodles { position:absolute; z-index:0; inset:0; overflow:visible; pointer-events:none; }
.cover-doodles span { position:absolute; display:block; }
.checker { width:112px; height:46px; top:28px; right:3%; opacity:.7; transform:rotate(8deg); background:conic-gradient(from 90deg,#0b0f19 25%,#fff8e4 0 50%,#0b0f19 0 75%,#fff8e4 0) 0 0/23px 23px; box-shadow:7px 7px #ff007f; }
.triangle { width:0; height:0; left:-34px; bottom:156px; border-right:70px solid transparent; border-bottom:116px solid rgba(0,229,255,.52); border-left:70px solid transparent; transform:rotate(-18deg); filter:drop-shadow(12px 10px 0 rgba(255,0,127,.46)); }
.triangle::after { position:absolute; width:0; height:0; top:25px; left:-44px; content:''; border-right:44px solid transparent; border-bottom:72px solid #13162b; border-left:44px solid transparent; }
.zigzag { width:176px; height:58px; top:34%; left:39%; transform:rotate(-17deg); clip-path:polygon(0 58%,17% 10%,34% 62%,52% 6%,69% 58%,87% 5%,100% 32%,88% 46%,86% 31%,70% 91%,53% 43%,35% 96%,18% 49%,4% 84%); background:linear-gradient(90deg,#72ff5c,#00e5ff); filter:drop-shadow(7px 8px 0 #ff007f) drop-shadow(2px 2px 0 #090d16); }
.orbit { width:210px; aspect-ratio:1; right:22%; bottom:42px; border:9px solid rgba(255,176,0,.68); border-radius:50%; transform:skewX(-28deg) rotate(-17deg); box-shadow:0 0 0 4px rgba(9,13,22,.7),0 0 0 12px rgba(0,229,255,.14),0 0 0 20px rgba(255,0,127,.1); }
.confetti { width:8px; height:8px; top:25%; right:-1%; background:#72ff5c; box-shadow:-34px 42px #ff007f,-76px -12px #00e5ff,-112px 66px #ffb000,-148px 9px #72ff5c,-190px 92px #ff007f,-244px 40px #00e5ff; transform:rotate(21deg); }
.tape { right:5%; bottom:78px; padding:9px 14px; color:#0b0f19; background:#ffb000; font:.58rem/1 'Press Start 2P',monospace; letter-spacing:.05em; transform:rotate(5deg); box-shadow:5px 5px #ff007f; }
.hero-copy { position:relative; z-index:2; min-width:0; }
.eyebrow { margin:0 0 18px; color:#ffba32; font-size:.75rem; font-weight:900; letter-spacing:.16em; }
h1,h2 { margin:0; text-wrap:balance; }
h1 { max-width:11ch; font:clamp(2.8rem,5vw,4.2rem)/1.05 'Press Start 2P',monospace; letter-spacing:-.05em; -webkit-text-stroke:1px #090d16; text-shadow:4px 4px 0 #090d16,8px 8px 0 rgba(9,13,22,.94),11px 11px 0 rgba(255,0,127,.42); }
h2 { font:clamp(1.6rem,3vw,2.8rem)/1.15 'Press Start 2P',monospace; }
.spectrum-rule { width:min(100%,420px); height:6px; margin:26px 0 0; background:linear-gradient(90deg,#00e5ff,#ff007f 52%,#ffb000); box-shadow:0 3px rgba(9,13,22,.55); }
.hero-lede { max-width:35rem; margin:28px 0; color:#c8d1e2; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.landing-button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border:2px solid #7180a0; border-radius:6px; font-weight:850; text-decoration:none; box-shadow:0 4px #050811; }
.landing-button.primary { color:#071807; border-color:#72ff5c; background:#72ff5c; }
.landing-button.secondary { background:#182137; }
.landing-button:hover,.landing-button:focus-visible { transform:translateY(-2px); box-shadow:0 6px #050811; }
.studio-stage { position:relative; z-index:1; width:100%; min-width:0; transform:translateX(76px) rotate(-4.5deg) skewX(-1.5deg); filter:drop-shadow(20px 24px 10px rgba(0,0,0,.56)); }
.studio-stage::before { position:absolute; z-index:-2; inset:14px 24px -14px -24px; content:''; border:8px solid rgba(0,229,255,.34); border-radius:16px; }
.studio-stage::after { position:absolute; z-index:-3; inset:27px 42px -27px -42px; content:''; border:8px solid rgba(255,0,127,.4); border-radius:16px; }
.studio-echo { position:absolute; z-index:-4; inset:42px 60px -42px -60px; border:8px solid rgba(255,176,0,.28); border-radius:16px; }
.studio-preview { position:relative; z-index:1; display:block; width:100%; height:auto; border:8px solid #17233d; border-radius:16px; background:#111827; box-shadow:0 0 0 2px #00e5ff; }
.studio-sticker { position:absolute; z-index:3; width:128px; aspect-ratio:1; top:-48px; right:-28px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:5px solid #0b0f19; border-radius:50%; color:#0b0f19; background:#ffb000; box-shadow:8px 10px 0 rgba(0,0,0,.48); font-size:.64rem; font-weight:900; letter-spacing:.12em; text-align:center; transform:rotate(10deg) skewX(1.5deg); }
.studio-sticker::after { position:absolute; inset:8px; content:''; border:2px dashed #0b0f19; border-radius:50%; }
.studio-sticker strong,.studio-sticker span { position:relative; z-index:1; }
.studio-sticker strong { font:1.15rem/1 'Press Start 2P',monospace; }
.landing-features { position:relative; z-index:2; margin-top:-78px; padding:150px 0 104px; color:#0b0f19; background-color:#fff8e4; background-image:radial-gradient(circle,rgba(255,0,127,.12) 1px,transparent 1.5px); background-size:13px 13px; clip-path:polygon(0 8vw,100% 0,100% 100%,0 100%); }
.landing-features::before { position:absolute; height:12px; top:calc(4vw - 3px); right:-2%; left:-2%; content:''; background:linear-gradient(90deg,#00e5ff,#ff007f 52%,#ffb000); transform:rotate(-4.55deg); transform-origin:center; }
.features-inner { width:min(1180px,calc(100% - 40px)); margin:auto; }
.section-heading { display:grid; grid-template-columns:.7fr 1.3fr; align-items:end; gap:32px; margin-bottom:42px; }
.section-heading .eyebrow { margin:0; }
.section-heading h2 { text-transform:uppercase; }
.section-heading p:last-child { max-width:38rem; margin:18px 0 0; color:#43506c; font-size:1.1rem; line-height:1.55; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature-grid article { min-height:190px; display:flex; flex-direction:column; gap:16px; padding:24px; border:2px solid #0b0f19; border-radius:8px; color:#f3f6ff; background:linear-gradient(145deg,#251b3d,#0b0f19); box-shadow:6px 7px #ff007f; }
.feature-grid article:nth-child(2) { box-shadow:6px 7px #ffb000; }
.feature-grid article:nth-child(3) { box-shadow:6px 7px #00e5ff; }
.feature-grid article:nth-child(4) { box-shadow:6px 7px #39ff14; }
.feature-grid strong { color:#fff; font-size:1.1rem; }
.feature-grid span { color:#adb8ca; line-height:1.6; }
.action-strip { display:grid; grid-template-columns:repeat(4,1fr) .65fr; gap:14px; margin-top:44px; font-size:.8rem; font-weight:900; letter-spacing:.14em; text-align:center; }
.action-strip span,.action-strip a { min-height:54px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:#39ff14; background:#0b0f19; text-decoration:none; }
.action-strip span:nth-child(2) { color:#ffb000; background:#251b3d; }
.action-strip span:nth-child(3) { color:#00e5ff; }
.action-strip span:nth-child(4) { color:#ff2a85; background:#251b3d; }
.action-strip a { color:#fff; background:#ff007f; box-shadow:5px 6px #0b0f19; }
.action-strip a:hover,.action-strip a:focus-visible { color:#0b0f19; background:#72ff5c; }
.landing-footer { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #35415b; }
.company-brand { display:flex; align-items:center; gap:8px; color:#c8d1e2; font-size:.8rem; text-decoration:none; }
.company-brand img { width:22px; height:22px; filter:brightness(0) invert(1); object-fit:contain; }
.content-page { width:min(760px,calc(100% - 40px)); min-height:calc(100vh - 204px); margin:auto; padding:76px 0 110px; }
.content-page h1 { max-width:none; font-size:clamp(2rem,6vw,3.6rem); }
.content-page h2 { margin-top:42px; font:800 1.35rem/1.3 Inter,system-ui,sans-serif; }
.content-page p,.content-page li { color:#c8d1e2; font-size:1.03rem; line-height:1.75; }
.content-page a { color:#72ff5c; }
.not-found { display:grid; align-content:center; justify-items:start; }
@media (max-width:980px) {
  .landing-hero { grid-template-columns:1fr; min-height:0; padding-bottom:160px; }
  .hero-copy { max-width:720px; }
  .studio-stage { width:min(92%,760px); margin:56px auto 0; transform:rotate(-3deg) skewX(-1deg); }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .landing-features { margin-top:-92px; }
  .checker { top:46%; right:1%; }
  .zigzag { top:43%; left:8%; }
  .tape { right:8%; bottom:92px; }
}
@media (max-width:560px) {
  .landing-header { min-height:70px; }
  .landing-hero { padding:44px 0 130px; }
  h1 { font-size:clamp(2rem,10.5vw,2.8rem); }
  .section-heading,.feature-grid { grid-template-columns:1fr; }
  .studio-stage { width:calc(100% - 28px); margin-top:62px; transform:rotate(-2deg); }
  .studio-stage::before { inset:8px 12px -8px -12px; border-width:5px; }
  .studio-stage::after { inset:16px 24px -16px -24px; border-width:5px; }
  .studio-echo { inset:24px 34px -24px -34px; border-width:5px; }
  .studio-preview { border-width:5px; border-radius:10px; }
  .studio-sticker { width:88px; top:-42px; right:0; border-width:4px; font-size:.43rem; }
  .studio-sticker strong { font-size:.75rem; }
  .checker { width:76px; height:34px; top:42%; right:-8px; background-size:17px 17px; box-shadow:5px 5px #ff007f; }
  .triangle { left:-62px; bottom:166px; opacity:.72; }
  .zigzag { width:108px; top:45%; left:0; opacity:.6; }
  .orbit { width:150px; right:-36px; bottom:52px; }
  .confetti { display:none; }
  .tape { right:4px; bottom:88px; padding:7px 9px; font-size:.44rem; }
  .landing-features { padding-top:126px; clip-path:polygon(0 4rem,100% 0,100% 100%,0 100%); }
  .action-strip { grid-template-columns:1fr 1fr; }
  .action-strip a { grid-column:1/-1; }
  .landing-footer { min-height:140px; flex-direction:column; align-items:flex-start; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .landing-button { transition:none; } }