@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

:root { --ink:#21194e; --cream:#fff9df; --pink:#ff4d98; --aqua:#21d8d3; --yellow:#fee356; --blue:#4d65f1; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--aqua); font-family:'DM Mono', monospace; background-image:radial-gradient(#0f8788 1px,transparent 1px); background-size:5px 5px; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.shell { position:relative; max-width:1040px; margin:auto; padding:35px 22px 24px; }
.masthead { text-align:center; padding:12px 0 29px; }
.eyebrow { font-size:12px; letter-spacing:1.2px; margin:0 0 8px; font-weight:500; }
.logo { display:inline-block; color:var(--cream); text-decoration:none; font:700 clamp(55px,10vw,108px)/.8 'Space Grotesk', sans-serif; letter-spacing:-7px; text-shadow:4px 4px 0 var(--ink), 7px 7px 0 var(--pink); transform:rotate(-3deg); }
.logo span { color:var(--yellow); }.logo i { color:var(--pink); font-size:.37em; vertical-align:top; margin-left:12px; text-shadow:2px 2px 0 var(--ink); }.tagline { margin:18px 0 0; color:var(--cream); font-size:14px; letter-spacing:.7px; }
.window { background:var(--cream); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); }.titlebar { background:var(--blue); color:white; padding:8px 10px; border-bottom:3px solid var(--ink); font-size:13px; display:flex; justify-content:space-between; }.window-content { padding:28px; }
.hero { transform:rotate(.7deg); }.hero-content { min-height:118px; padding:22px 28px; display:flex; align-items:center; overflow:hidden; background:repeating-linear-gradient(45deg,transparent 0 13px,#fff2bd 13px 14px); }.blink { color:#ec287c; font-size:13px; font-weight:bold; }.blink::first-letter { color:#32ce8d; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-1.5px; } h1 { font-size:clamp(36px,6vw,60px); line-height:.9; } h2 { font-size:42px; line-height:.9; }.lede { max-width:390px; line-height:1.5; font-size:14px; }
.orb { width:145px; height:145px; flex:0 0 145px; border:3px solid var(--ink); border-radius:50%; margin:0 25px; background:repeating-linear-gradient(0deg,var(--pink) 0 6px,#ff92c0 6px 11px); box-shadow:10px 10px 0 var(--yellow),17px 17px 0 var(--ink); display:grid; place-items:center; transform:rotate(14deg); }.orb span { color:white; font:700 30px 'Space Grotesk'; text-shadow:2px 2px var(--ink); }
.socials { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:23px 6px; }.social-card { min-height:116px; padding:16px; color:var(--ink); text-decoration:none; border:3px solid var(--ink); box-shadow:6px 6px var(--ink); display:grid; grid-template-columns:58px 1fr; align-items:center; transition:transform .15s,box-shadow .15s; }.social-card:hover { transform:translate(4px,4px); box-shadow:2px 2px var(--ink); }.social-card b { font:44px/1 'Space Grotesk'; grid-row:span 2; }.social-card span { font:700 21px 'Space Grotesk'; }.social-card small { align-self:start; font-size:14px; }.tiktok { background:var(--pink); }.instagram { background:var(--yellow); transform:rotate(-.8deg); }
.apps { margin:45px 0; }.section-heading { display:flex; align-items:baseline; gap:15px; color:var(--cream); }.section-heading h2 { font-size:31px; }.section-heading p { font-size:13px; }.app-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.app-card { background:#c8b8ff; border:3px solid var(--ink); min-height:140px; padding:18px; display:flex; gap:16px; position:relative; box-shadow:5px 5px var(--ink); }.app-card.live-app { color:var(--ink); text-decoration:none; transition:transform .15s,box-shadow .15s; }.app-card.live-app:hover { transform:translate(4px,4px); box-shadow:1px 1px var(--ink); }.app-icon { background:var(--aqua); border:3px solid var(--ink); width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; font:700 30px 'Space Grotesk'; }.app-card h3 { font-size:21px; }.app-card p { font-size:14px; line-height:1.5; }.app-card>span { position:absolute; bottom:9px; right:10px; font-size:11px; color:#746b95; }.live-app>span { color:var(--ink); font-weight:bold; }
.contact { margin-top:35px; transform:rotate(-.4deg); }.contact .window-content { display:grid; grid-template-columns:.85fr 1.15fr; gap:35px; }.contact-copy p:not(.eyebrow) { font-size:14px; line-height:1.65; }.contact form { display:grid; gap:11px; } label { font-size:12px; letter-spacing:.8px; display:grid; gap:5px; font-weight:500; } input,textarea { width:100%; border:2px solid var(--ink); border-radius:0; background:#fffefa; padding:10px; font:14px 'DM Mono'; color:var(--ink); } textarea { resize:vertical; } .contact-note { margin:0; font-size:10px; line-height:1.3; color:#4d456e; } button,.contact-submit { border:2px solid var(--ink); background:var(--pink); box-shadow:3px 3px var(--ink); padding:11px; cursor:pointer; color:var(--ink); font:700 13px 'DM Mono'; } .contact-submit { display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none; } button:hover,.contact-submit:hover { background:var(--yellow); } .contact-submit:active { transform:translate(2px,2px); box-shadow:1px 1px var(--ink); } button:disabled { opacity:.7; cursor:wait; } #form-status { margin:0; min-height:18px; color:#1a846f; font-size:12px; }
footer { color:var(--cream); display:flex; justify-content:space-between; font-size:9px; letter-spacing:.5px; padding:35px 4px 0; } footer b { color:var(--pink); }.counter { color:var(--yellow); }
@media (max-width:620px) { .shell { padding:22px 15px; }.logo { letter-spacing:-5px; }.window-content { padding:20px; }.hero-content,.contact .window-content { display:block; }.orb { width:115px; height:115px; flex-basis:115px; margin:28px auto 7px; }.orb span { font-size:25px; }.socials,.app-grid { grid-template-columns:1fr; }.socials { gap:20px; }.instagram { transform:none; } footer { gap:10px; flex-wrap:wrap; } }