:root { --paper:#f5f5f5; --card:#fff; --ink:#202938; --muted:#697386; --line:#e5e8ee; --violet:#5f70ff; --violet-dark:#4757db; --mint:#10b981; --amber:#ef9c20; --font-body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); } a { color:inherit; text-decoration:none; } .site-header { max-width:1180px; margin:auto; padding:25px 28px; display:flex; align-items:center; justify-content:space-between; } .wordmark { font-family:var(--font-display); font-size:23px; font-weight:700; letter-spacing:-1.3px; } .wordmark span { color:var(--violet); } .header-link { font-weight:600; font-size:14px; padding:11px 16px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.75); }
.hero { min-height:680px; max-width:1180px; margin:auto; padding:80px 28px 32px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; overflow:hidden; } .hero-copy { max-width:560px; } .kicker { font-size:12px; font-weight:700; letter-spacing:.025em; color:#5d6677; margin:0 0 18px; display:flex; align-items:center; gap:8px; } .kicker span { width:8px; height:8px; border-radius:50%; background:var(--violet); } h1,h2,h3 { font-family:var(--font-display); letter-spacing:-.055em; } h1 { font-size:clamp(52px,6vw,82px); line-height:.96; margin:0; } .hero-description { max-width:450px; font-size:20px; line-height:1.45; color:var(--muted); margin:26px 0; } .button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:14px; cursor:pointer; font:600 15px var(--font-body); transition:background .18s ease, transform .18s ease; } .button-primary { background:var(--violet); color:#fff; padding:16px 21px; box-shadow:0 10px 20px rgba(95,112,255,.2); } .button-primary:hover { background:var(--violet-dark); transform:translateY(-1px); } .small-print { color:var(--muted); font-size:13px; margin-top:16px; }
.phone-stage { position:relative; height:590px; min-width:420px; } .halo { position:absolute; border-radius:50%; filter:blur(1px); } .halo-one { background:#e2e7ff; width:390px; height:390px; top:86px; left:20px; } .halo-two { background:#e6f8f1; width:200px; height:200px; bottom:12px; right:18px; } .phone { position:absolute; width:283px; border:7px solid #fff; background:#f8f9fb; border-radius:42px; box-shadow:0 24px 55px rgba(27,38,59,.17); overflow:hidden; } .phone-front { top:8px; left:95px; height:575px; z-index:2; } .phone-back { transform:rotate(8deg); top:65px; left:255px; height:460px; width:236px; padding:76px 20px; background:#fff; z-index:1; } .phone-bar { display:flex; justify-content:space-between; padding:13px 16px 5px; font-size:10px; font-weight:700; } .app-head { height:55px; padding:8px 13px; display:flex; align-items:center; justify-content:space-between; font-size:12px; } .icons { font-size:17px; color:#566275; } .avatar { display:inline-grid; place-items:center; width:33px; height:33px; border-radius:50%; background:#d7def0; color:#39445a; font-weight:700; font-size:12px; } .avatar-small { width:26px; height:26px; } .post-card { background:#fff; border:1px solid var(--line); border-radius:18px; margin:6px 10px; padding:11px; } .creator { display:flex; align-items:center; gap:8px; font-size:11px; } .creator div { display:grid; gap:1px; } .creator small, .pick-card small, .stake-note { color:#80899a; font-size:9px; } .creator b { margin-left:auto; color:#80899a; } .post-type { color:var(--violet); font-size:9px; font-weight:700; text-transform:uppercase; margin:14px 0 8px; } .pick-card { border:1px solid var(--line); border-radius:13px; overflow:hidden; } .pick-card > small { display:block; padding:11px 11px 0; font-weight:700; } .pick-card h3 { margin:4px 11px 11px; font-size:14px; letter-spacing:-.06em; } .pick-row { border-top:1px solid var(--line); padding:9px 11px; display:flex; justify-content:space-between; } .pick-row div { display:grid; gap:3px; } .pick-row div:last-child { text-align:right; } .pick-row strong { font-size:10px; } .pending { padding:8px 11px; display:flex; justify-content:space-between; background:#fff4dd; color:#9b6612; font-size:9px; font-weight:700; } .pending span:last-child { color:#777f8e; font-weight:500; } .stake-note { margin:10px 0 2px; } .app-nav { position:absolute; bottom:9px; left:10px; right:10px; height:60px; border:1px solid #e1e5ed; border-radius:22px; background:rgba(255,255,255,.88); backdrop-filter:blur(9px); display:flex; justify-content:space-around; align-items:center; color:#798395; } .app-nav span { display:grid; justify-items:center; gap:1px; font-size:16px; } .app-nav small { font-size:7px; font-weight:600; } .app-nav .active { color:var(--violet); } .post-button { width:37px; height:37px; margin-top:-20px; padding-top:5px; background:var(--violet); color:#fff; border:4px solid #fff; border-radius:50%; box-shadow:0 4px 12px rgba(95,112,255,.35); } .post-button small { color:#3f4755; margin-top:6px; white-space:nowrap; } .back-label { font-size:9px; color:#798395; font-weight:700; margin:15px 0 8px; } .roi { color:var(--mint); font:700 32px var(--font-display); letter-spacing:-.08em; } .phone-back > p:last-child { color:#697386; font-size:10px; }
.trust { max-width:1124px; margin:72px auto 120px; padding:0 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .trust > div { padding:24px 4px 4px; border-top:1px solid #cfd5df; } .trust-icon { color:var(--violet); font-size:23px; } .trust h2 { font-size:19px; margin:18px 0 8px; } .trust p { margin:0; max-width:250px; color:var(--muted); font-size:15px; line-height:1.45; }
.process { max-width:1124px; margin:auto; padding:84px 28px; border-top:1px solid var(--line); display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; } .section-intro h2,.waitlist h2 { font-size:clamp(36px,4vw,58px); line-height:1; margin:0; } .process ol { margin:0; padding:0; list-style:none; } .process li { display:grid; grid-template-columns:55px 1fr; gap:18px; border-bottom:1px solid var(--line); padding:0 0 24px; margin-bottom:24px; } .process li span { color:var(--violet); font:600 13px var(--font-display); } .process li h3 { font-size:23px; margin:0 0 8px; } .process li p { margin:0; color:var(--muted); line-height:1.45; max-width:420px; }
.waitlist { max-width:1124px; padding:0 28px 100px; margin:auto; } .waitlist-panel { background:#222b3b; color:#fff; border-radius:30px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; position:relative; overflow:hidden; } .waitlist-panel:after { content:""; position:absolute; width:380px; height:380px; right:-170px; top:-220px; background:var(--violet); opacity:.35; border-radius:50%; } .waitlist .kicker { color:#c9d0df; } .waitlist-panel p:not(.kicker) { color:#c9d0df; max-width:390px; line-height:1.5; } .kit-form { position:relative; z-index:1; min-height:120px; } .kit-form form { font-family:var(--font-body) !important; }
footer { max-width:1180px; margin:auto; border-top:1px solid var(--line); padding:26px 28px 42px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; } footer .wordmark { color:var(--ink); }
.post-actions { display:flex; align-items:center; gap:13px; color:#667186; font-size:12px; padding-top:8px; } .post-actions b { font-size:9px; font-weight:600; margin-left:2px; } .post-actions .bookmark { margin-left:auto; } .comment-tease { color:#616c7e; font-size:9px; line-height:1.3; margin:8px 0 0; padding-top:8px; border-top:1px solid #eef0f4; } .comment-tease strong { color:#374154; }
@media (max-width:800px) { .site-header { padding:19px 20px; } .hero { min-height:0; padding:64px 20px 0; grid-template-columns:1fr; gap:20px; } .hero-description { font-size:18px; } .phone-stage { transform:scale(.88); transform-origin:top center; height:520px; min-width:0; margin:-8px -45px -16px; } .trust { grid-template-columns:1fr; margin:54px auto 70px; padding:0 20px; } .process { grid-template-columns:1fr; gap:42px; padding:64px 20px; } .waitlist { padding:0 20px 65px; } .waitlist-panel { grid-template-columns:1fr; padding:34px 25px; gap:30px; border-radius:23px; } .input-row { flex-direction:column; } .input-row .button { width:100%; } footer { padding:22px 20px 30px; align-items:flex-start; flex-direction:column; gap:9px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }