@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Space Grotesk','Inter',"SF Pro Display",system-ui,sans-serif;background:#0a0a0b;color:#e5e5e7;line-height:1.55}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,#a855f7 0%,transparent 50%);opacity:.18;pointer-events:none;z-index:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;background:rgba(20,20,22,.85);backdrop-filter:blur(12px);position:sticky;top:0;border-bottom:1px solid #232326}
.topbar .logo{font-weight:700;font-size:16px}
.topbar .links{display:flex;gap:20px}
.topbar a{color:#a1a1a6;text-decoration:none;font-size:14px}
.topbar a.active{color:#a855f7}
main{max-width:880px;margin:0 auto;padding:64px 24px}
.title{font-size:48px;font-weight:800;letter-spacing:-.03em;margin:0 0 12px;background:linear-gradient(120deg,#fff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;color:#a1a1a6;margin:0 0 48px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tile{background:#17171a;border:1px solid #27272a;border-radius:16px;padding:24px}
.tile h3{margin:0 0 8px;font-size:14px;color:#a1a1a6;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.tile a{color:#a855f7;text-decoration:none}
.tile{transition:transform .25s ease,border-color .25s ease,box-shadow .3s ease}
.tile:hover{transform:translateY(-3px);border-color:#a855f7;box-shadow:0 0 0 1px #a855f7,0 12px 32px rgba(168,85,247,0.18)}
.contact-button{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:13px 28px;background:#a855f7;color:#0a0a14;border-radius:14px;text-decoration:none;font-weight:600;transition:transform .15s ease,box-shadow .3s ease}
.contact-button:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(168,85,247,0.5);color:#0a0a14}
.contact-button .cb-arrow{transition:transform .25s}
.contact-button:hover .cb-arrow{transform:translateX(4px)}
/* Scroll reveal — fade + scale + glow */
.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.reveal.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.about{background:#17171a;border:1px solid #27272a;border-radius:16px;padding:24px;margin-bottom:24px}
.about h3{margin:0 0 12px;font-size:18px;color:#fff}
.about p{color:#c7c7cc;margin:0 0 12px;line-height:1.6}
.about .features{list-style:none;padding:0;margin:12px 0 0}
.about .features li{padding:8px 0;color:#a1a1a6;border-top:1px solid #27272a}
.about .features li::before{content:"→ ";color:#a855f7;font-weight:600}
.prose h1{font-size:36px;margin:0 0 8px}
.prose h2{font-size:22px;margin:32px 0 10px;color:#a855f7}
.prose h3{font-size:16px;color:#c7c7cc;margin:20px 0 8px}
.prose a{color:#a855f7}
footer{text-align:center;padding:32px;color:#6e6e73;font-size:13px}