/* ═══════════════════════════════════════════════════════════════ DRAFTED — Light & Luxe landing system Tokens are attribute-driven on so the Tweaks panel can swap accent / background / motion without touching markup. ═══════════════════════════════════════════════════════════════ */ :root{ --bg:#FBFBFC; --bg-elevated:#FFFFFF; --surface:#F5F5F7; --surface-2:#F0F0F2; --ink:#09090B; --ink-2:#27272A; --muted:#71717A; --muted-2:#A1A1AA; --line:#E6E6E9; --line-soft:#EFEFF1; /* accent (icy blue default) */ --accent:#4F6BED; --accent-ink:#3850CE; --accent-soft:#ECF0FF; --accent-glow:rgba(79,107,237,.30); --accent-line:rgba(79,107,237,.22); --radius:18px; --radius-sm:12px; --radius-lg:26px; --shadow-sm:0 1px 2px rgba(9,9,11,.04),0 2px 4px rgba(9,9,11,.04); --shadow-md:0 6px 28px -10px rgba(9,9,11,.14),0 2px 8px -3px rgba(9,9,11,.07); --shadow-lg:0 30px 80px -28px rgba(9,9,11,.26),0 10px 30px -12px rgba(9,9,11,.12); --shadow-accent:0 24px 70px -26px var(--accent-glow); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --rv-dur:.9s; --maxw:1200px; --gut:clamp(20px,5vw,64px); --sans:"Geist","Geist Fallback",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --display:"Instrument Serif",Georgia,"Times New Roman",serif; } /* ── accent variants ── */ [data-accent="silver"]{ --accent:#6B7385; --accent-ink:#4B5160; --accent-soft:#EEF0F3; --accent-glow:rgba(107,115,133,.28); --accent-line:rgba(107,115,133,.22); } [data-accent="mono"]{ --accent:#18181B; --accent-ink:#000000; --accent-soft:#F4F4F5; --accent-glow:rgba(9,9,11,.16); --accent-line:rgba(9,9,11,.14); } /* ── background tone ── */ [data-bg="pure"]{ --bg:#FFFFFF; --surface:#F6F6F8; --line:#E8E8EB; } [data-bg="warm"]{ --bg:#FBFAF7; --bg-elevated:#FFFEFC; --surface:#F4F2ED; --surface-2:#EFEDE6; --line:#E9E6DF; --line-soft:#F1EFE9; --muted:#78736B; --ink:#1A1813; } /* ── calm motion ── */ [data-motion="calm"]{ --rv-dur:.5s; } /* ═══════════════ base ═══════════════ */ *{box-sizing:border-box;} html{scroll-behavior:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400; letter-spacing:-.011em;overflow-x:hidden; } h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;} p{margin:0;text-wrap:pretty;} a{color:inherit;text-decoration:none;} em{font-style:italic;} .container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);} .ink-accent{color:var(--accent);} /* scroll progress bar */ .scroll-progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:200; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); box-shadow:0 0 12px var(--accent-glow);transform-origin:left;transition:width .08s linear;} @media (prefers-reduced-motion:reduce){.scroll-progress{display:none;}} /* ── reveal-on-scroll (gaussian blur) ── */ .reveal{ opacity:0;transform:translateY(26px);filter:blur(14px); transition:opacity var(--rv-dur) var(--ease-out), transform var(--rv-dur) var(--ease-out), filter var(--rv-dur) var(--ease-out); transition-delay:var(--d,0ms);will-change:opacity,transform,filter; } .reveal.in{opacity:1;transform:none;filter:blur(0);} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;filter:none!important;} } /* ═══════════════ buttons ═══════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:-.01em; padding:.72em 1.25em;border-radius:11px;border:1px solid transparent; cursor:pointer;transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s; white-space:nowrap; } .btn-sm{font-size:14px;padding:.6em 1.05em;} .btn-lg{font-size:16px;padding:.95em 1.6em;} .btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);} .btn-primary:hover{box-shadow:var(--shadow-md);} .btn-primary:active{transform:translateY(1px) scale(.99);} /* ═══════════════ nav ═══════════════ */ .nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s var(--ease),border-color .4s,box-shadow .4s; border-bottom:1px solid transparent;} .nav.scrolled{background:color-mix(in oklab,var(--bg) 72%,transparent); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.5);} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut); display:flex;align-items:center;justify-content:space-between;gap:24px;} .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.03em;} .brand-mark{width:13px;height:13px;border-radius:4px;background:var(--ink);position:relative;} .brand-mark::after{content:"";position:absolute;inset:0;border-radius:4px; background:var(--accent);clip-path:polygon(0 55%,100% 0,100% 100%,0 100%);} .brand-word{} .brand-logo{height:28px;width:auto;display:block;} .brand-logo--footer{height:24px;} .nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--muted);} .nav-links a{position:relative;transition:color .2s;} .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;background:var(--ink);transition:width .3s var(--ease);} .nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{width:100%;} @media(max-width:820px){.nav-links{display:none;}} /* ═══════════════ HERO ═══════════════ */ .hero{position:relative;padding:clamp(120px,16vh,180px) 0 70px;overflow:clip;} .hero-glow{position:absolute;top:-12%;left:50%;transform:translateX(-50%); width:min(1100px,120vw);height:620px;pointer-events:none;z-index:0; background:radial-gradient(60% 60% at 50% 30%,var(--accent-glow),transparent 70%); opacity:.5;filter:blur(8px);} .hero-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6; background: radial-gradient(40% 50% at 85% 12%,var(--accent-soft),transparent 60%), radial-gradient(38% 46% at 8% 80%,var(--surface),transparent 62%);} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr; gap:clamp(36px,5vw,72px);align-items:center;} @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:48px;}} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted); font-family:var(--mono);letter-spacing:.01em;padding:7px 15px;border:1px solid var(--line); border-radius:999px;background:var(--bg-elevated);box-shadow:var(--shadow-sm);white-space:nowrap;} @media(max-width:420px){.eyebrow{white-space:normal;}} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);animation:pulse 2.4s var(--ease) infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}} .hero-h1{font-family:var(--display);font-size:clamp(42px,5.6vw,74px);font-weight:400;margin:26px 0 0;letter-spacing:-.015em;line-height:1.05;} .hero-h1 .ink-accent{font-family:var(--display);font-weight:400;font-style:italic; letter-spacing:-.005em;font-size:1em;line-height:1.05; background:linear-gradient(180deg,var(--accent),var(--accent-ink)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent); padding-right:.06em;} .section-h2 em,.cta-h2 .ink-accent{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.04em;letter-spacing:-.01em;} .cta-h2 .ink-accent{color:var(--accent);} .hero-sub{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:33ch;margin-top:24px;line-height:1.55;} .waitlist-form{margin-top:34px;max-width:480px;} .field{display:flex;gap:8px;padding:6px;background:var(--bg-elevated);border:1px solid var(--line); border-radius:15px;box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .25s;} .field:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft);} .field input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:var(--sans); font-size:15.5px;color:var(--ink);padding:0 12px;letter-spacing:-.01em;} .field input::placeholder{color:var(--muted-2);} .form-note{margin-top:14px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:7px;} .form-done{ display:inline-flex;align-items:center;gap:10px; margin-top:16px;padding:11px 18px; background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);border-radius:100px; font-size:14px;font-weight:500;color:#15803d; } .form-done::before{ content:'✓';flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%; background:#16a34a;color:#fff;font-size:11px;font-weight:700; } .check{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%; background:var(--accent-soft);color:var(--accent-ink);font-size:10px;font-weight:700;} /* ── live drafting console ── */ .hero-stage{position:relative;} .console{position:relative;background:var(--bg-elevated);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:18px;overflow:hidden;} .console::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.6),transparent 40%);} .console-bar{display:flex;align-items:center;gap:7px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);} .console-dot{width:9px;height:9px;border-radius:50%;background:var(--surface-2);} .console-dot:nth-child(1){background:#FF6159;}.console-dot:nth-child(2){background:#FFC12E;}.console-dot:nth-child(3){background:#2ACB42;} .console-title{font-family:var(--mono);font-size:12px;color:var(--muted-2);margin-left:6px;white-space:nowrap;} .console-status{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--accent-ink); background:var(--accent-soft);padding:3px 9px;border-radius:999px;letter-spacing:.02em;} .raw{margin-top:16px;padding:13px 15px;border-radius:13px;background:var(--surface);border:1px dashed var(--line); transition:opacity .5s var(--ease),transform .5s var(--ease);} .raw-label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin-bottom:5px;} .raw-text{font-size:14.5px;color:var(--ink-2);line-height:1.5;} .raw-text s{color:var(--muted-2);} .raw-frag{color:var(--muted);} .raw-cursor{color:var(--accent);animation:blink 1s steps(1) infinite;} @keyframes blink{50%{opacity:0;}} .morph{display:flex;justify-content:center;margin:14px 0;} .morph-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px; color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line); padding:6px 14px;border-radius:999px;} .spark{width:8px;height:8px;border-radius:2px;background:var(--accent); animation:sparkrot 1.4s var(--ease) infinite;} @keyframes sparkrot{0%{transform:rotate(0) scale(1);}50%{transform:rotate(180deg) scale(.6);}100%{transform:rotate(360deg) scale(1);}} .post{padding:16px;border-radius:15px;background:var(--bg-elevated);border:1px solid var(--line);box-shadow:var(--shadow-sm);} .post-head{display:flex;align-items:center;gap:11px;} .post-avatar{width:42px;height:42px;border-radius:50%;flex:none; background:linear-gradient(135deg,var(--accent),var(--accent-ink));box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);} .post-meta{display:flex;flex-direction:column;line-height:1.25;} .post-name{font-weight:600;font-size:14.5px;} .post-sub{font-size:12px;color:var(--muted);} .post-time{font-size:11.5px;color:var(--muted-2);} .post-body{margin-top:13px;font-size:14.5px;line-height:1.62;color:var(--ink-2);height:184px;overflow:hidden;white-space:pre-wrap;} .post-body .pcursor{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite;} .post-body b{color:var(--ink);font-weight:600;} .post-stats{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft); display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);} .reactions{display:flex;align-items:center;gap:6px;} .reactions .r{width:17px;height:17px;border-radius:50%;border:2px solid var(--bg-elevated);margin-left:-7px;} .reactions .r:first-child{margin-left:0;} .reactions .r1{background:var(--accent);}.reactions .r2{background:#2ACB42;}.reactions .r3{background:#FFC12E;} .reactions em{font-style:normal;margin-left:6px;color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums;} /* ── funnel ── */ .funnel{margin-top:18px;display:flex;align-items:stretch;gap:8px; background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius); padding:16px 14px;box-shadow:var(--shadow-md);} .funnel-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center; padding:6px 4px;border-radius:11px;transition:background .4s var(--ease);} .funnel-step.is-final{background:var(--accent-soft);} .funnel-step.lit{background:var(--surface);} .funnel-step.is-final.lit{background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-line),0 10px 24px -10px var(--accent-glow);} .funnel-num{font-size:clamp(20px,2.2vw,27px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);} .funnel-step.is-final .funnel-num{color:var(--accent-ink);} .funnel-lbl{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);} .funnel-arrow{display:flex;align-items:center;color:var(--muted-2);font-size:15px;} @media(max-width:420px){.funnel-lbl{font-size:9px;}.funnel-arrow{font-size:12px;}} .hero-marquee{margin-top:72px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);} .marquee-track{display:flex;width:max-content;will-change:transform;} .marquee-group{display:flex;align-items:center;flex:none;} .mq{flex:none;font-family:var(--sans);font-weight:500;font-size:clamp(19px,2.3vw,30px);letter-spacing:-.025em; color:var(--ink);opacity:.3;padding:0 24px;white-space:nowrap;transition:opacity .3s;} .hero-marquee:hover .mq{opacity:.46;} .mq-sep{flex:none;width:7px;height:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg);opacity:.85;} /* ═══════════════ section scaffolding ═══════════════ */ section{position:relative;} .problem,.how,.features,.compare,.pricing{padding:clamp(80px,11vh,140px) 0;} .section-head{max-width:720px;margin-bottom:clamp(40px,6vw,68px);} .kicker{display:inline-block;font-family:var(--mono);font-size:12.5px;text-transform:uppercase; letter-spacing:.14em;color:var(--accent-ink);margin-bottom:18px;} .section-h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.035em;} .section-h2 em{color:var(--accent);font-style:italic;} .section-intro{margin-top:20px;font-size:clamp(16px,1.3vw,19px);color:var(--muted);max-width:56ch;} /* ═══════════════ PROBLEM ═══════════════ */ .problem{background:linear-gradient(180deg,var(--bg),var(--surface) 60%,var(--bg));} .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;} @media(max-width:880px){.problem-grid{grid-template-columns:1fr;}} .problem-editor{position:relative;background:var(--bg-elevated);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;} .pe-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line-soft);} .pe-title{font-family:var(--mono);font-size:12px;color:var(--muted-2);margin-left:6px;} .pe-body{position:relative;padding:26px 22px 66px;min-height:200px;} .pe-prompt{font-size:18px;color:var(--muted-2);font-weight:500;transition:opacity .4s var(--ease);} .pe-prompt.dim{opacity:.32;} .pe-cursor{display:inline-block;color:var(--accent);margin-left:1px;animation:blink 1.1s steps(1) infinite;} .pe-draft{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-2);min-height:1.6em;} .pe-draft .w{display:inline;opacity:0;filter:blur(5px);animation:wordin .34s var(--ease-out) forwards;} @keyframes wordin{to{opacity:1;filter:blur(0);}} .pe-draft .pcursor{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite;} .pe-speak{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:9px; padding:9px 16px 9px 12px;border-radius:999px;border:1px solid var(--accent-line);cursor:pointer; background:var(--accent);color:#fff;box-shadow:0 12px 28px -10px var(--accent-glow); font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-.01em; transition:transform .3s var(--ease),box-shadow .3s,background .3s,padding .3s;} .pe-speak:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px var(--accent-glow);} .pe-speak.listening{background:var(--ink);} .pe-speak.listening::before{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--accent); opacity:0;animation:ring 1.5s var(--ease) infinite;} @keyframes ring{0%{transform:scale(.94);opacity:.55;}100%{transform:scale(1.3);opacity:0;}} .pe-mic{display:inline-grid;place-items:center;width:18px;height:18px;color:#fff;} .pe-mic svg{width:18px;height:18px;} .pe-wave{display:none;align-items:center;gap:3px;height:16px;} .pe-speak.listening .pe-wave{display:inline-flex;} .pe-speak.listening .pe-speak-label{display:none;} .pe-wave i{width:3px;border-radius:2px;background:#fff;animation:pewave .9s var(--ease) infinite;} .pe-wave i:nth-child(1){animation-delay:0s;}.pe-wave i:nth-child(2){animation-delay:.12s;} .pe-wave i:nth-child(3){animation-delay:.24s;}.pe-wave i:nth-child(4){animation-delay:.36s;}.pe-wave i:nth-child(5){animation-delay:.48s;} @keyframes pewave{0%,100%{height:5px;}50%{height:16px;}} .pe-foot{display:flex;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--line-soft); font-family:var(--mono);font-size:11.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;} .pe-state{color:var(--accent-ink);font-variant-numeric:tabular-nums;} .problem-copy .lead{font-size:clamp(18px,1.6vw,22px);color:var(--ink-2);line-height:1.5;} .problem-list{list-style:none;margin:26px 0;padding:0;display:flex;flex-direction:column;gap:13px;} .problem-list li{display:flex;align-items:flex-start;gap:11px;font-size:16px;color:var(--muted);} .problem-list .x{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%; background:var(--surface-2);color:var(--muted);font-size:10px;margin-top:2px;} .problem-kicker{font-size:16px;color:var(--ink-2);padding-left:16px;border-left:2px solid var(--accent);} /* ═══════════════ HOW IT WORKS ═══════════════ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);} @media(max-width:880px){.steps{grid-template-columns:1fr;}} .step{position:relative;} .step-rail{display:flex;align-items:center;gap:12px;margin-bottom:20px;} .step-no{font-family:var(--mono);font-size:13px;color:var(--accent-ink);background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:8px;padding:5px 9px;letter-spacing:.04em;} .step-line{flex:1;height:1px;background:linear-gradient(90deg,var(--accent-line),transparent);} .step-line.is-last{background:linear-gradient(90deg,var(--accent-line),transparent);} .step-body h3{font-size:21px;margin-bottom:10px;} .step-body p{font-size:15.5px;color:var(--muted);line-height:1.55;} .step-viz{margin-top:20px;height:92px;border-radius:14px;border:1px solid var(--line);background:var(--bg-elevated); box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px;overflow:hidden;position:relative;} .viz-train{align-content:center;} .viz-train .chip{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--surface); border:1px solid var(--line);padding:5px 10px;border-radius:999px; opacity:0;transform:scale(.7) translateY(6px); transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),background .35s,border-color .35s,color .35s;} .step.in .viz-train .chip{opacity:1;transform:none;} .step.in .viz-train .chip:nth-child(1){transition-delay:.04s,.04s,0s,0s,0s} .step.in .viz-train .chip:nth-child(2){transition-delay:.11s,.11s,0s,0s,0s} .step.in .viz-train .chip:nth-child(3){transition-delay:.18s,.18s,0s,0s,0s} .step.in .viz-train .chip:nth-child(4){transition-delay:.25s,.25s,0s,0s,0s} .step.in .viz-train .chip:nth-child(5){transition-delay:.32s,.32s,0s,0s,0s} .step.in .viz-train .chip:nth-child(6){transition-delay:.39s,.39s,0s,0s,0s} .step.in .viz-train .chip:nth-child(7){transition-delay:.46s,.46s,0s,0s,0s} .step.in .viz-train .chip:nth-child(8){transition-delay:.53s,.53s,0s,0s,0s} .viz-train .chip.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);} .viz-gen{flex-direction:column;align-items:stretch;gap:9px;} .viz-gen .genline{height:8px;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-soft)); animation:genfill 2.6s var(--ease) infinite;transform-origin:left;} .viz-gen .l1{width:90%;animation-delay:0s;}.viz-gen .l2{width:70%;animation-delay:.25s;background:var(--surface-2);} .viz-gen .l3{width:82%;animation-delay:.5s;background:linear-gradient(90deg,var(--accent),var(--accent-soft));} @keyframes genfill{0%{transform:scaleX(0);opacity:.4;}50%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(0);opacity:.4;}} .viz-loop{gap:14px;} .loop-ring{width:42px;height:42px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:spin 1.4s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .loop-label{font-family:var(--mono);font-size:12px;color:var(--muted);} /* ═══════════════ FEATURES BENTO ═══════════════ */ .bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(168px,auto);gap:16px;} .cell{position:relative;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius); padding:26px;overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;} .cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-line);} .cell h3{font-size:19px;margin-bottom:8px;letter-spacing:-.025em;} .cell p{font-size:14.5px;color:var(--muted);line-height:1.5;} .cell-tag{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em; color:var(--accent-ink);background:var(--accent-soft);padding:4px 9px;border-radius:999px;} .cell-top{margin-bottom:12px;} .cell-voice{grid-column:span 3;grid-row:span 2;display:flex;flex-direction:column;} .cell-memo{grid-column:span 3;} .cell-carousel{grid-column:span 3;} .cell-calendar{grid-column:span 2;} .cell-hooks{grid-column:span 2;} .cell-analytics{grid-column:span 2;} @media(max-width:880px){ .bento{grid-template-columns:repeat(2,1fr);} .cell-voice,.cell-memo,.cell-carousel,.cell-calendar,.cell-hooks,.cell-analytics{grid-column:span 2;grid-row:auto;} } .voice-meter{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:12px;} .vm-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);font-family:var(--mono);} .vm-row span{width:96px;flex:none;} .vm-row b{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;width:42px;text-align:right;} .vm-bar{flex:1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;} .vm-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-ink)); transition:width 1.3s var(--ease-out);} .cell.in .vm-bar i{width:var(--w);} .memo-wave{display:flex;align-items:center;gap:4px;height:46px;margin-top:18px;} .memo-wave i{flex:1;border-radius:999px;background:var(--accent);opacity:.85;animation:wave 1.1s var(--ease) infinite;} .memo-wave i:nth-child(2n){background:var(--accent-ink);} .memo-wave i:nth-child(1){animation-delay:0s;}.memo-wave i:nth-child(2){animation-delay:.07s;} .memo-wave i:nth-child(3){animation-delay:.14s;}.memo-wave i:nth-child(4){animation-delay:.21s;} .memo-wave i:nth-child(5){animation-delay:.28s;}.memo-wave i:nth-child(6){animation-delay:.35s;} .memo-wave i:nth-child(7){animation-delay:.42s;}.memo-wave i:nth-child(8){animation-delay:.49s;} .memo-wave i:nth-child(9){animation-delay:.56s;}.memo-wave i:nth-child(10){animation-delay:.63s;} .memo-wave i:nth-child(11){animation-delay:.7s;}.memo-wave i:nth-child(12){animation-delay:.77s;} .memo-wave i:nth-child(13){animation-delay:.84s;}.memo-wave i:nth-child(14){animation-delay:.91s;} @keyframes wave{0%,100%{height:18%;}50%{height:100%;}} .carousel-stack{position:relative;height:62px;margin-top:18px;} .carousel-stack span{position:absolute;top:0;width:52px;height:62px;border-radius:9px;border:1px solid var(--line); background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease);} .carousel-stack span:nth-child(1){left:0;background:var(--accent-soft);border-color:var(--accent-line);} .carousel-stack span:nth-child(2){left:34px;} .carousel-stack span:nth-child(3){left:68px;} .cell-carousel:hover .carousel-stack span:nth-child(1){transform:translateY(-5px) rotate(-4deg);} .cell-carousel:hover .carousel-stack span:nth-child(3){transform:translateY(-5px) rotate(4deg);} .cal{margin-top:16px;} .cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px;} .cal-head span{text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--muted-2);} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;} .cal-grid i{position:relative;display:block;aspect-ratio:1;border-radius:5px;background:var(--surface-2); transition:background .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);} .cal-grid i.pad{background:transparent;} .cal-grid i.has{background:var(--accent-soft);} .cal-grid i.has.on{background:var(--accent);transform:scale(1.06);box-shadow:0 5px 12px -3px var(--accent-glow);} .cal-cap{display:flex;align-items:center;gap:8px;margin-top:13px;font-family:var(--mono);font-size:12px;color:var(--muted);} .cal-cap b{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:1px;} .cal-dot{width:9px;height:9px;border-radius:3px;background:var(--accent);flex:none;} .hooks{margin-top:16px;display:flex;flex-direction:column;gap:8px;} .hook{position:relative;display:block;font-size:13px;line-height:1.42;color:var(--muted);background:var(--surface); border:1px solid var(--line);border-radius:11px;padding:10px 12px 10px 17px;overflow:hidden; transition:color .35s var(--ease),background .35s,border-color .35s,transform .35s,box-shadow .35s;} .hk-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent); transform:scaleY(0);transition:transform .35s var(--ease);} .hk-tag{display:inline-block;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em; color:var(--muted-2);font-weight:500;margin-right:7px;vertical-align:1px;transition:color .35s;} .hook.is-on{color:var(--ink-2);background:var(--accent-soft);border-color:var(--accent-line); transform:translateX(3px);box-shadow:0 8px 22px -12px var(--accent-glow);} .hook.is-on .hk-bar{transform:scaleY(1);} .hook.is-on .hk-tag{color:var(--accent-ink);} .spark-chart{position:relative;margin-top:20px;height:96px;} .spark-chart svg{width:100%;height:100%;display:block;overflow:visible;} .spark-chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5;} .spark-area{fill:url(#sparkFill);opacity:0;transition:opacity .9s var(--ease) .45s;} #sparkFill stop{stop-color:var(--accent);} .cell.in .spark-area{opacity:1;} .spark-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:560;stroke-dashoffset:560;} .cell.in .spark-line{animation:draw 1.7s var(--ease-out) forwards;} @keyframes draw{to{stroke-dashoffset:0;}} .spark-dot{fill:var(--accent);opacity:0;} .cell.in .spark-dot{animation:dotin .4s var(--ease-out) 1.55s forwards,dotpulse 2.1s var(--ease) 2s infinite;} @keyframes dotin{to{opacity:1;}} @keyframes dotpulse{0%,100%{r:4;}50%{r:6.5;}} .spark-badge{position:absolute;top:-4px;right:0;font-family:var(--mono);font-size:11px;color:var(--muted); background:var(--bg-elevated);border:1px solid var(--line);border-radius:999px;padding:4px 11px; box-shadow:var(--shadow-sm);} .spark-badge b{color:var(--accent-ink);font-style:normal;font-weight:500;} /* ═══════════════ COMPARISON ═══════════════ */ .compare{background:linear-gradient(180deg,var(--bg),var(--surface) 50%,var(--bg));} .cmp{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-md);overflow:hidden;} .cmp-row{display:grid;grid-template-columns:1.7fr repeat(5,1fr);align-items:center; border-bottom:1px solid var(--line-soft);} .cmp-row:last-child{border-bottom:0;} .cmp-feature{padding:18px 22px;font-size:15px;color:var(--ink-2);font-weight:500;} .cmp-col{padding:18px 10px;text-align:center;border-left:1px solid var(--line-soft);} .cmp-headrow{background:var(--surface);} .cmp-headrow .cmp-feature{color:var(--muted);font-weight:400;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;} .cmp-name{font-size:13.5px;font-weight:500;color:var(--muted);} .cmp-us{position:relative;background:var(--accent-soft);} .cmp-us .cmp-name{color:var(--accent-ink);font-weight:600;} .cmp-headrow .cmp-us{box-shadow:inset 0 2px 0 var(--accent);} .cmp-col .yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%; background:var(--accent);color:#fff;font-size:12px;font-weight:700;} .cmp-us .yes{box-shadow:0 4px 12px -3px var(--accent-glow);} .cmp-col .no{color:var(--muted-2);font-size:14px;} .cmp-col .mid{color:var(--muted);font-size:16px;font-weight:600;} .cmp-cost{background:var(--surface);} .cmp-cost .cmp-col{font-family:var(--mono);} .cost{font-size:14px;color:var(--ink-2);font-weight:500;} .cmp-us .cost{color:var(--accent-ink);font-weight:600;} @media(max-width:780px){ .cmp{overflow-x:auto;} .cmp-row{grid-template-columns:1.4fr repeat(5,84px);min-width:620px;} } /* ═══════════════ PRICING ═══════════════ */ .price-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px); background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(30px,4vw,52px);box-shadow:var(--shadow-lg);overflow:hidden;} .price-glow{position:absolute;top:-40%;right:-10%;width:480px;height:480px;pointer-events:none; background:radial-gradient(circle,var(--accent-glow),transparent 65%);opacity:.6;} @media(max-width:780px){.price-card{grid-template-columns:1fr;}} .price-left{position:relative;z-index:1;display:flex;flex-direction:column;} .price-plan{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink);} .price-amount{display:flex;align-items:flex-start;gap:2px;margin:14px 0 6px;color:var(--ink);} .price-amount .cur{font-size:28px;font-weight:500;margin-top:10px;} .price-amount .amt{font-size:clamp(58px,8vw,84px);font-weight:600;letter-spacing:-.05em;line-height:.9;} .price-amount .per{font-size:20px;color:var(--muted);margin-top:auto;margin-bottom:12px;} .price-trial{font-size:14px;color:var(--muted);margin-bottom:26px;} .price-left .btn{align-self:flex-start;} .price-foot{margin-top:16px;font-size:12.5px;color:var(--muted-2);font-family:var(--mono);} .price-right{position:relative;z-index:1;} .price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .price-list li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink-2);} /* ── pricing tiers ── */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;} @media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}} .price-card--tier{display:flex;flex-direction:column;gap:0;} .price-card--featured{border-color:var(--accent-line);box-shadow:var(--shadow-lg),0 0 0 1px var(--accent-line);} .price-tier-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px;} .price-desc{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.4;} .price-badge{display:inline-block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em; color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line); padding:5px 11px;border-radius:999px;margin-bottom:16px;align-self:flex-start;} .price-amount--tier{display:flex;align-items:flex-start;gap:1px;margin:0;flex:none;} .price-amount--tier .cur{font-size:18px;font-weight:500;margin-top:6px;} .price-amount--tier .amt{font-size:clamp(38px,5vw,52px);font-weight:600;letter-spacing:-.05em;line-height:.95;} .price-amount--tier .per{font-size:14px;color:var(--muted);margin-top:auto;margin-bottom:8px;} .price-card--tier .price-list{flex:1;margin-bottom:22px;} .pricing-note{margin-top:22px;font-size:14px;color:var(--muted);text-align:center;} .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line);} .btn-outline:hover{border-color:var(--accent-line);box-shadow:var(--shadow-sm);} /* ═══════════════ CTA ═══════════════ */ .cta{position:relative;padding:clamp(110px,16vh,180px) 0;background:var(--ink);color:#fff;overflow:clip;text-align:center;} .cta-glow{position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(58% 70% at 50% 42%,var(--accent-glow),transparent 62%);opacity:.7;} .cta-floats{position:absolute;inset:0;z-index:1;pointer-events:none;} .float-post{position:absolute;width:236px;color:#fff;border-radius:15px;padding:15px; background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); box-shadow:0 34px 70px -34px rgba(0,0,0,.7); transform:translateY(var(--py,40px)) rotate(var(--rot,0deg));opacity:0; transition:opacity 1s var(--ease);will-change:transform,opacity;} .cta-floats.in .float-post{opacity:.92;} .fp-1{left:3%;top:20%;} .fp-2{right:4%;top:13%;} .fp-3{left:7%;bottom:15%;} .fp-4{right:6%;bottom:19%;} .fp-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;} .fp-av{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-ink));} .fp-lines{display:flex;flex-direction:column;gap:5px;flex:1;} .fp-lines i{height:5px;border-radius:3px;background:rgba(255,255,255,.24);} .fp-lines i:first-child{width:62%;}.fp-lines i:last-child{width:40%;} .fp-body{font-size:13px;line-height:1.45;color:rgba(255,255,255,.86);text-align:left;} .fp-foot{margin-top:11px;display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.5);font-family:var(--mono);} .fp-react{width:13px;height:13px;border-radius:50%;background:var(--accent);display:inline-block;flex:none;} @media(max-width:1040px){.float-post{display:none;}} .cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;} .cta-card{position:relative;max-width:680px;margin:0 auto; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg); padding:clamp(34px,5vw,62px) clamp(28px,5vw,68px); -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%); box-shadow:0 48px 130px -44px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.14) inset; animation:levitate 7.5s var(--ease) infinite;} @keyframes levitate{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} [data-motion="calm"] .cta-card{animation:none;} .cta-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px; color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14); padding:6px 13px;border-radius:999px;margin-bottom:22px;} .cta-badge .dot{width:7px;height:7px;border-radius:50%;background:#2ACB42;box-shadow:0 0 0 4px rgba(42,203,66,.18);} .cta-h2{font-size:clamp(28px,4.2vw,52px);letter-spacing:-.035em;color:#fff;} .cta-sub{margin-top:20px;font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.62);} .cta-form{margin-top:34px;width:100%;max-width:440px;margin-inline:auto;} .cta .field{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:none;} .cta .field:focus-within{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 4px rgba(255,255,255,.08);} .cta .field input{color:#fff;} .cta .field input::placeholder{color:rgba(255,255,255,.4);} .cta .btn-primary{background:#fff;color:var(--ink);} .cta .form-note{color:rgba(255,255,255,.5);} .cta .form-done{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff; } .cta .form-done::before{background:rgba(255,255,255,.9);color:#15803d;} .cta .check{background:rgba(255,255,255,.14);color:#fff;} /* ═══════════════ FOOTER ═══════════════ */ .footer{background:var(--bg);border-top:1px solid var(--line);padding:64px 0 36px;} .footer-inner{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;} .footer-brand{max-width:280px;} .footer-brand .brand-mark{display:inline-block;vertical-align:middle;} .footer-brand .brand-word{font-weight:600;font-size:18px;margin-left:8px;letter-spacing:-.03em;} .footer-tag{margin-top:16px;font-size:14px;color:var(--muted);} .footer-cols{display:flex;gap:64px;} .footer-col{display:flex;flex-direction:column;gap:11px;} .footer-h{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:4px;} .footer-col a{font-size:14.5px;color:var(--muted);transition:color .2s;} .footer-col a:hover{color:var(--ink);} .footer-base{display:flex;justify-content:space-between;margin-top:54px;padding-top:24px;border-top:1px solid var(--line-soft); font-size:13px;color:var(--muted-2);} .footer-mono{font-family:var(--mono);} /* ═══════════════ content pages ═══════════════ */ .page-nav{ display:flex;align-items:center;justify-content:space-between; padding:20px 32px;border-bottom:1px solid var(--line-soft); position:sticky;top:0;background:var(--bg);z-index:10; } .back-btn{ font-size:14px;font-weight:500;color:var(--muted); text-decoration:none;display:flex;align-items:center;gap:6px; transition:color .15s; } .back-btn:hover{color:var(--ink);} .page-main{padding:64px 24px 96px;} .page-container{max-width:680px;margin:0 auto;} .dialog-label{ font-family:var(--mono);font-size:11px;text-transform:uppercase; letter-spacing:.1em;color:var(--muted-2);margin:0 0 12px; } .dialog-title{ font-size:28px;font-weight:600;letter-spacing:-.03em; margin:0 0 28px;line-height:1.2; } .dialog-body p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 16px;} .dialog-lede{font-size:16px !important;color:var(--ink) !important;font-weight:500;} .dialog-h3{ font-size:12px;font-family:var(--mono);text-transform:uppercase; letter-spacing:.09em;color:var(--muted); margin:28px 0 10px; } .dialog-quote{ margin:24px 0 0;padding:16px 20px; border-left:3px solid var(--accent); background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-family:var(--display);font-style:italic;font-size:16px; line-height:1.65;color:var(--ink); } .dialog-values{display:flex;flex-direction:column;gap:14px;margin-bottom:4px;} .dialog-value{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--surface);border-radius:var(--radius-sm);} .dialog-value-name{font-weight:600;font-size:14px;letter-spacing:-.01em;} .dialog-value-desc{font-size:14px;color:var(--muted);line-height:1.55;} .dialog-nonneg{display:flex;flex-direction:column;gap:10px;} .dialog-nonneg p{font-size:15px !important;margin:0 !important;padding:14px 16px;background:var(--surface);border-radius:var(--radius-sm);} .dialog-link{color:var(--accent);text-decoration:none;} .dialog-link:hover{text-decoration:underline;} .dialog-meta{font-size:13px !important;color:var(--muted-2) !important;margin-top:24px !important;} @media(max-width:600px){ .page-nav{padding:16px 20px;} .page-main{padding:40px 20px 72px;} .dialog-title{font-size:22px;} } /* ═══════════════ RESPONSIVE — additional mobile breakpoints ═══════════════ */ /* Waitlist form: stack input + button vertically on narrow screens */ @media(max-width:520px){ .field{flex-direction:column;gap:6px;} .field input{padding:10px 14px;} .field .btn{width:100%;} } /* Hero console: let post body grow instead of clipping on small viewports */ @media(max-width:520px){ .post-body{height:auto;min-height:100px;} .funnel{gap:4px;padding:12px 8px;} } /* Bento: collapse to single column on phones */ @media(max-width:520px){ .bento{grid-template-columns:1fr;} .cell-voice,.cell-memo,.cell-carousel, .cell-calendar,.cell-hooks,.cell-analytics{grid-column:span 1;grid-row:auto;} } /* Pricing: full-width CTA button on phones */ @media(max-width:520px){ .price-left .btn{width:100%;} } /* Footer: stack columns vertically on mobile */ @media(max-width:640px){ .footer-inner{flex-direction:column;gap:32px;} .footer-cols{flex-direction:column;gap:20px;} .footer-base{flex-direction:column;gap:6px;text-align:center;} } /* Nav: tighten spacing on very small screens */ @media(max-width:400px){ .nav-inner{gap:12px;} .brand-logo{height:24px;} .btn.btn-sm{font-size:12.5px;padding:.5em .85em;} } /* CTA card: reduce internal padding on very small screens */ @media(max-width:400px){ .cta-card{padding:28px 20px;} } /* Ensure no element bleeds beyond viewport width */ @media(max-width:640px){ .hero-marquee{margin-top:44px;} .console{padding:14px;} .console-title{display:none;} }