:root { color-scheme: dark; --line: rgba(255,255,255,.13); --muted: rgba(245,247,255,.58); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: #050609; color: #f7f8fb; font-family: "Open Sans", sans-serif; }
body::before { content:""; position: fixed; inset: 0; pointer-events:none; opacity:.17; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.aurora { position: fixed; inset: -25%; pointer-events:none; background: radial-gradient(circle at 72% 38%, rgba(70,165,255,.18), transparent 19%), radial-gradient(circle at 59% 48%, rgba(240,180,70,.1), transparent 16%), radial-gradient(circle at 80% 64%, rgba(172,118,255,.14), transparent 19%); filter: blur(25px); animation: breathe 9s ease-in-out infinite alternate; }
.glass { background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 80px rgba(0,0,0,.28); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.nav { position: relative; z-index: 3; display:flex; align-items:center; justify-content:space-between; width:min(1760px, calc(100% - 64px)); margin:32px auto 0; padding:16px 18px 16px 22px; border-radius:20px; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:18px; font-weight:600; letter-spacing:-.03em; }
.brand img { width:34px; height:34px; object-fit:cover; border-radius:8px; }
.nav-end { display:flex; align-items:center; gap:26px; }
.nav-end > a { color:rgba(255,255,255,.5); font-size:13px; text-decoration:none; transition:color .2s; }
.nav-end > a:hover { color:white; }
.status { padding:8px 12px; color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.1); border-radius:11px; }
.status i { display:inline-block; width:5px; height:5px; margin:0 7px 1px 0; border-radius:50%; background:#8ed7ff; box-shadow:0 0 12px #8ed7ff; }
main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(740px,.95fr) 1.05fr; gap:110px; align-items:center; width:min(1760px, calc(100% - 64px)); min-height:auto; margin:auto; padding:120px 0 130px; }
.hero { padding-left:12px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border-radius:999px; color:rgba(255,255,255,.66); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow span { width:5px; height:5px; background:#f4cc7d; border-radius:50%; box-shadow:0 0 14px #f4cc7d; }
h1 { margin:36px 0 40px; font-size:clamp(82px, 5.8vw, 112px); line-height:.98; letter-spacing:-.065em; font-weight:500; }
h1 em { color:transparent; font-style:normal; background:linear-gradient(100deg,#a4ddff 3%,#f3d58b 48%,#b6a7e7 94%); background-clip:text; -webkit-background-clip:text; }
.hero h1 em { white-space:nowrap; }
.intro { max-width:720px; margin:0; color:var(--muted); font-size:21px; line-height:1.7; letter-spacing:-.015em; }
.waitlist { display:flex; max-width:720px; margin-top:52px; padding:9px; border-radius:20px; }
.waitlist input { min-width:0; flex:1; padding:0 15px; color:white; font:inherit; background:transparent; border:0; outline:0; }
.waitlist input::placeholder { color:rgba(255,255,255,.38); }
.waitlist button { padding:17px 21px; border:0; border-radius:12px; color:#111319; background:linear-gradient(135deg,#f4f5f7,#b9c7d3); font:600 13px "Open Sans",sans-serif; cursor:pointer; box-shadow:inset 0 1px 0 white, 0 8px 25px rgba(188,221,255,.13); transition:transform .2s, filter .2s; }
.waitlist button:hover { transform:translateY(-1px); filter:brightness(1.1); }
.waitlist button span { margin-left:9px; }
.assurances { display:flex; align-items:center; gap:14px; margin:22px 4px; color:rgba(255,255,255,.4); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.assurances i { width:2px; height:2px; background:rgba(255,255,255,.35); border-radius:50%; }
.visual { position:relative; min-height:820px; overflow:hidden; border-radius:44px; background:radial-gradient(circle at 55% 40%,rgba(255,255,255,.1),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018)); }
.visual::before { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.visual-copy { position:absolute; top:30px; left:32px; z-index:2; }
.visual-copy span { display:block; margin-bottom:7px; color:rgba(255,255,255,.35); font-size:9px; letter-spacing:.18em; }
.visual-copy strong { font-size:14px; font-weight:500; }
.orb { position:absolute; top:50%; left:50%; width:470px; height:470px; transform:translate(-50%,-46%); border-radius:50%; background:radial-gradient(circle,rgba(134,205,255,.17),rgba(135,120,255,.04) 48%,transparent 70%); }
.orb img { position:absolute; z-index:2; top:50%; left:50%; width:270px; height:270px; object-fit:cover; border-radius:20px; transform:translate(-50%,-50%) rotate(-3deg); filter:drop-shadow(0 25px 55px rgba(72,178,255,.22)); animation:float 5s ease-in-out infinite; }
.logo-glow { position:absolute; inset:25%; border-radius:50%; background:conic-gradient(from 40deg,#6ed7ff,#f7cf70,#b49cff,#6ed7ff); filter:blur(45px); opacity:.32; animation:spin 12s linear infinite; }
.orbit { position:absolute; inset:10%; border:1px solid rgba(255,255,255,.12); border-radius:50%; transform:rotateX(68deg) rotateZ(-10deg); }
.orbit::after { content:""; position:absolute; width:7px; height:7px; top:21%; left:8%; background:#a9e3ff; border-radius:50%; box-shadow:0 0 18px #77cfff; }
.orbit-two { inset:19%; transform:rotateY(64deg) rotateZ(34deg); border-color:rgba(245,208,123,.16); }
.metric { position:absolute; z-index:4; bottom:32px; padding:13px 16px; border-radius:14px; }
.metric.left { left:32px; }.metric.right { right:32px; }
.metric small { display:block; margin-bottom:4px; color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.16em; }
.metric b { font-size:13px; font-weight:500; }
footer { position:relative; z-index:2; display:flex; justify-content:space-between; width:min(1760px,calc(100% - 64px)); margin:0 auto; padding:0 0 34px; color:rgba(255,255,255,.25); font-size:11px; letter-spacing:.06em; }
.story,.audience,.pricing { position:relative; z-index:1; width:min(1760px,calc(100% - 64px)); margin:0 auto; }
.story { padding:130px 0 120px; border-top:1px solid rgba(255,255,255,.08); }
.section-heading { display:grid; grid-template-columns:1fr 1.15fr; gap:110px; align-items:end; margin-bottom:80px; }
.section-heading .kicker { grid-column:1/-1; }
.kicker { color:rgba(255,255,255,.38); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
h2 { margin:0; font-size:clamp(58px,4.7vw,88px); line-height:1.06; letter-spacing:-.05em; font-weight:500; }
.section-heading p { max-width:720px; margin:0 0 7px; color:var(--muted); font-size:20px; line-height:1.7; }
.benefit-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; }
.benefit { display:flex; min-height:500px; padding:40px; flex-direction:column; justify-content:space-between; border-radius:32px; }
.benefit.featured { background:radial-gradient(circle at 20% 90%,rgba(96,187,255,.14),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025)); }
.card-number { color:rgba(255,255,255,.28); font-size:10px; letter-spacing:.14em; }
.benefit h3 { margin:0 0 22px; font-size:34px; line-height:1.22; letter-spacing:-.035em; font-weight:500; }
.benefit p { margin:0; color:var(--muted); font-size:18px; line-height:1.7; }
.card-tag { align-self:flex-start; padding:7px 10px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.audience { display:grid; grid-template-columns:.9fr 1.1fr; gap:130px; align-items:center; padding:100px 0 150px; }
.audience h2 { max-width:570px; margin-top:22px; }
.audience-list { padding:10px 28px; border-radius:27px; }
.audience-list div { display:grid; grid-template-columns:55px 1fr; gap:20px; align-items:center; min-height:110px; border-bottom:1px solid rgba(255,255,255,.08); }
.audience-list div:last-child { border:0; }
.audience-list span { color:rgba(255,255,255,.25); font-size:9px; }
.audience-list p { margin:0; color:rgba(255,255,255,.72); font-size:16px; }
.pricing { display:grid; grid-template-columns:1fr .7fr; gap:100px; padding:70px; margin-bottom:110px; border-radius:36px; background:radial-gradient(circle at 15% 90%,rgba(179,137,255,.13),transparent 35%),radial-gradient(circle at 90% 5%,rgba(91,187,255,.12),transparent 30%),rgba(255,255,255,.035); }
.pricing h2 { margin-top:22px; }
.pricing-copy { padding-left:55px; border-left:1px solid rgba(255,255,255,.1); }
.price { font-size:46px; letter-spacing:-.05em; }
.price small { display:block; margin-top:5px; color:rgba(255,255,255,.35); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.pricing-copy p { max-width:450px; margin:28px 0; color:var(--muted); font-size:14px; line-height:1.7; }
.pricing-copy a { display:inline-block; padding:13px 17px; border-radius:11px; color:#101217; background:#eef1f4; font-size:12px; font-weight:600; text-decoration:none; }
.pricing-copy a span { margin-left:25px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes breathe { to { transform:translate3d(-2%,2%,0) scale(1.04); } }
@keyframes float { 50% { transform:translate(-50%,-54%) rotate(1deg); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 1050px) { main { grid-template-columns:1fr; gap:64px; max-width:760px; padding-top:80px; } .hero { text-align:center; padding:0; } .hero h1 em { white-space:normal; } .intro,.waitlist { margin-left:auto; margin-right:auto; } .assurances { justify-content:center; } .visual { min-height:560px; } .section-heading,.audience,.pricing { grid-template-columns:1fr; gap:45px; } .benefit-grid { grid-template-columns:1fr 1fr; } .benefit.featured { grid-column:1/-1; } .benefit { min-height:320px; } .pricing-copy { padding:35px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.1); } footer { margin-top:0; } }
@media (max-width: 560px) { .nav,main,footer,.story,.audience,.pricing { width:calc(100% - 32px); } .nav { margin-top:16px; border-radius:15px; } .nav-end > a { display:none; } main { gap:44px; min-height:auto; padding:60px 0 52px; } .hero { text-align:left; } .eyebrow { font-size:9px; } h1 { margin:22px 0 20px; font-size:clamp(40px,12.5vw,52px); line-height:1.02; letter-spacing:-.055em; } .intro { font-size:15px; line-height:1.65; } .waitlist { display:block; margin-top:28px; background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:0; } .waitlist input { width:100%; height:56px; margin-bottom:9px; padding:0 17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.06); backdrop-filter:blur(20px); } .waitlist button { width:100%; height:54px; } .assurances { justify-content:flex-start; flex-wrap:wrap; gap:8px; margin-top:16px; font-size:8px; } .visual { min-height:430px; border-radius:25px; } .visual-copy { top:22px; left:22px; } .orb { top:48%; width:280px; height:280px; } .orb img { width:160px; height:160px; } .metric { bottom:18px; padding:10px 12px; } .metric.left { left:16px; } .metric.right { right:16px; } .story { padding:90px 0 70px; } .section-heading { display:block; margin-bottom:38px; } .section-heading h2 { margin:18px 0 24px; } h2 { font-size:38px; } .benefit-grid { grid-template-columns:1fr; } .benefit.featured { grid-column:auto; } .benefit { min-height:300px; padding:24px; } .audience { gap:34px; padding:65px 0 90px; } .audience-list { padding:6px 20px; } .audience-list div { grid-template-columns:35px 1fr; } .pricing { gap:35px; padding:35px 24px; margin-bottom:75px; border-radius:25px; } .pricing-copy { padding-top:30px; } footer { flex-direction:column; gap:5px; margin-top:0; padding-bottom:24px; text-align:center; } }
@media (max-width: 370px) { h1 { font-size:38px; } .status { padding:7px 9px; font-size:9px; } .visual { min-height:390px; } .metric b { font-size:11px; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; scroll-behavior:auto !important; } }