:root {
     --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
     --font-display: 'Space Grotesk', var(--font-body);
     --bg: #07050d;
     --surface: rgba(255, 255, 255, 0.04);
     --surface-2: rgba(255, 255, 255, 0.07);
     --stroke: rgba(255, 255, 255, 0.09);
     --stroke-strong: rgba(255, 255, 255, 0.16);
     --text: #f4f3fb;
     --text-2: #a6a3c2;
     --text-3: #6f6b8f;
     --purple-light: #a78bfa;
     --grad: linear-gradient(110deg, #2f9bff 0%, #8b5cf6 45%, #ff9d3c 100%);
     --ease: cubic-bezier(0.22, 1, 0.36, 1);
 }

 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
 body {
     min-height: 100vh;
     font-family: var(--font-body);
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 ::selection { background: rgba(139, 92, 246, 0.4); color: #fff; }
 a { color: inherit; text-decoration: none; }

 .bg-mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 50% -10%, #16102b 0%, var(--bg) 55%); }
 .blob { position: absolute; border-radius: 50%; filter: blur(95px); opacity: 0.46; will-change: transform; }
 .blob-1 { width: 48vw; height: 48vw; left: -14vw; top: -12vw; background: radial-gradient(circle, rgba(139,92,246,0.5), transparent 65%); animation: float1 24s ease-in-out infinite; }
 .blob-2 { width: 42vw; height: 42vw; right: -10vw; top: 20vh; background: radial-gradient(circle, rgba(47,155,255,0.4), transparent 65%); animation: float2 28s ease-in-out infinite; }
 .blob-3 { width: 36vw; height: 36vw; left: 30vw; bottom: -16vw; background: radial-gradient(circle, rgba(255,157,60,0.26), transparent 65%); animation: float3 32s ease-in-out infinite; }
 @keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,4vh) scale(1.1); } }
 @keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,5vh) scale(1.08); } }
 @keyframes float3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-4vh) scale(1.12); } }

 .nav {
     position: sticky;
     top: 0;
     z-index: 10;
     display: flex;
     align-items: center;
     gap: 18px;
     padding: 16px 24px;
     background: rgba(7,5,13,0.62);
     border-bottom: 1px solid var(--stroke);
     backdrop-filter: blur(14px);
 }
 .nav__brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
 .nav__links { margin-left: auto; display: flex; align-items: center; gap: 18px; color: var(--text-2); font-size: 0.92rem; }
 .nav__links a:hover { color: var(--text); }

 .wrap { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
 .hero { min-height: calc(100vh - 68px); display: grid; align-items: center; padding: clamp(64px, 10vw, 110px) 0; }
 .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 6vw, 76px); align-items: center; }
 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--text-2);
     font-size: 0.86rem;
     padding: 7px 14px;
     border: 1px solid var(--stroke);
     border-radius: 100px;
     background: var(--surface);
     margin-bottom: 24px;
 }
 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--project, #8b5cf6); box-shadow: 0 0 22px var(--project, #8b5cf6); }
 h1 { font-family: var(--font-display); font-size: clamp(2.7rem, 7vw, 5rem); line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 22px; }
 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
 .lead { color: var(--text-2); font-size: clamp(1.05rem, 2vw, 1.24rem); max-width: 640px; margin-bottom: 32px; }
 .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     border-radius: 100px;
     padding: 14px 22px;
     font-family: var(--font-display);
     font-weight: 600;
     border: 1px solid transparent;
     transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
 }
 .btn:hover { transform: translateY(-2px); }
 .btn--primary { color: #fff; background: var(--grad); box-shadow: 0 14px 40px -18px rgba(139,92,246,0.9); }
 .btn--ghost { color: var(--text); background: var(--surface); border-color: var(--stroke-strong); }
 .meta { display: flex; flex-wrap: wrap; gap: 10px; }
 .pill { color: var(--text-2); font-size: 0.86rem; padding: 7px 12px; border-radius: 100px; background: var(--surface); border: 1px solid var(--stroke); }

 .visual {
     position: relative;
     min-height: 360px;
     border-radius: 28px;
     background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
     border: 1px solid var(--stroke);
     overflow: hidden;
     box-shadow: 0 32px 90px -48px rgba(0,0,0,0.9);
 }
 .visual::before { content: ''; position: absolute; inset: -30%; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--project, #8b5cf6) 42%, transparent), transparent 38%); }
 .mock-card {
     position: absolute;
     inset: 28px;
     display: grid;
     align-content: center;
     gap: 16px;
 }
 .mock-line, .mock-tile, .mock-stat {
     position: relative;
     border-radius: 18px;
     background: rgba(7,5,13,0.62);
     border: 1px solid var(--stroke);
     backdrop-filter: blur(8px);
 }
 .mock-line { height: 18px; width: var(--w, 70%); opacity: var(--o, 1); }
 .mock-tile { padding: 18px; display: flex; gap: 14px; align-items: center; }
 .mock-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--project, #8b5cf6); flex: none; }
 .mock-copy { flex: 1; display: grid; gap: 8px; }
 .mock-stat { padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
 .mock-stat b { font-family: var(--font-display); font-size: 1.4rem; }
 .mock-stat span { color: var(--text-3); font-size: 0.78rem; }

 .section { padding: 0 0 clamp(70px, 10vw, 110px); }
 .section h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 18px; }
 .section__lead { color: var(--text-2); max-width: 700px; margin-bottom: 28px; }
 .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
 .card { padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--stroke); }
 .card h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
 .card p { color: var(--text-2); font-size: 0.95rem; }

 .interest {
     max-width: 680px;
     padding: 28px;
     border-radius: 24px;
     background: linear-gradient(145deg, rgba(47,155,255,0.12), rgba(139,92,246,0.12) 52%, rgba(255,157,60,0.1));
     border: 1px solid var(--stroke-strong);
 }
 .interest p { color: var(--text-2); margin-bottom: 18px; }
 .form-row { display: flex; gap: 10px; }
 input[type="email"] {
     flex: 1;
     min-width: 0;
     color: var(--text);
     background: rgba(7,5,13,0.62);
     border: 1px solid var(--stroke-strong);
     border-radius: 100px;
     padding: 14px 16px;
     font: inherit;
     outline: none;
 }
 input[type="email"]:focus { border-color: color-mix(in srgb, var(--project, #8b5cf6) 70%, white); }
 .note { margin-top: 12px; color: var(--text-3); font-size: 0.82rem; }

 footer { padding: 34px 24px 54px; border-top: 1px solid var(--stroke); color: var(--text-3); font-size: 0.88rem; }
 .footer-inner { width: min(1080px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; }
 .footer-inner a { color: var(--text-2); }
 .footer-inner a:hover { color: var(--text); }
 .footer-inner .push { margin-left: auto; }

 @media (max-width: 860px) {
     .hero__grid { grid-template-columns: 1fr; }
     .visual { min-height: 300px; }
     .cards { grid-template-columns: 1fr; }
 }
 @media (max-width: 560px) {
     .nav__links { display: none; }
     .wrap, .footer-inner { width: min(100% - 32px, 1080px); }
     .hero { padding-top: 48px; }
     .form-row { flex-direction: column; }
     .btn { width: 100%; }
 }
 @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     .blob { animation: none !important; }
     * { transition-duration: 0.001ms !important; }
 }