:root { --ink:#101311; --paper:#f4f1e9; --acid:#d7ff3f; --muted:#62675f; --line:#cac8bf; --night:#161a17; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.marketing-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid var(--line); }
.marketing-brand { display:flex; align-items:center; gap:10px; font-weight:850; letter-spacing:-.04em; }
.marketing-brand span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; }
.marketing-header nav { display:flex; gap:30px; color:var(--muted); font-size:14px; }
.header-actions { display:flex; align-items:center; gap:16px; }
.text-button { font-size:14px; font-weight:700; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 22px; border:1px solid var(--ink); border-radius:999px; font-size:14px; font-weight:800; transition:transform .16s, box-shadow .16s; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 0 rgb(0 0 0 / 12%); }
.button-dark { background:var(--ink); color:white; }
.button-accent { background:var(--acid); color:var(--ink); }
.hero-section { min-height:720px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); align-items:center; gap:clamp(36px,7vw,110px); padding:clamp(64px,9vw,130px) clamp(20px,5vw,72px); overflow:hidden; }
.hero-section > * { min-width:0; }
.hero-copy { max-width:720px; }
.kicker { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:#535950; font-size:12px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.kicker span { width:32px; height:2px; background:var(--ink); }
.hero-copy h1 { margin:0; font-size:clamp(48px,6.2vw,92px); line-height:.94; letter-spacing:-.075em; font-weight:820; }
.hero-copy h1 em { color:#667064; font-style:normal; font-weight:500; }
.hero-lead { max-width:640px; margin:34px 0 28px; color:#4f554d; font-size:clamp(17px,1.6vw,21px); line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.link-arrow { font-weight:750; }
.link-arrow span { margin-left:7px; }
.hero-note { margin:18px 0 0; color:#747970; font-size:12px; }
.product-frame { width:min(760px,56vw); padding:12px; border:1px solid #b3b5ad; border-radius:18px; background:#deddd6; box-shadow:28px 28px 0 #d4d1c7; transform:rotate(1.5deg); }
.browser-bar { height:38px; display:flex; align-items:center; gap:7px; padding:0 10px; color:#70756e; font-size:10px; }
.browser-bar i { width:8px; height:8px; border-radius:50%; background:#a2a69f; }
.browser-bar span { margin-left:auto; margin-right:auto; padding:4px 45px; border-radius:99px; background:#ecebe5; }
.site-preview { min-height:480px; border-radius:9px; overflow:hidden; background:#f7f6f1; }
.preview-nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #dddcd5; font-size:9px; }
.preview-nav strong { font-size:13px; }
.preview-nav strong b { display:inline-block; width:9px; height:9px; margin-right:4px; border-radius:50%; background:#e6ff71; border:1px solid #111; }
.preview-nav button,.preview-hero button { border:0; background:#151815; color:white; font-size:9px; font-weight:800; }
.preview-nav button { padding:9px 14px; border-radius:99px; }
.preview-hero { min-height:350px; display:flex; flex-direction:column; justify-content:center; padding:45px; color:white; background:radial-gradient(circle at 80% 20%,#596158 0,#252a26 35%,#111411 72%); }
.preview-hero small { color:#dfff6a; font-size:8px; letter-spacing:.14em; }
.preview-hero h2 { margin:16px 0; font-size:48px; line-height:.9; letter-spacing:-.06em; }
.preview-hero p { max-width:260px; color:#cfd3ce; font-size:11px; line-height:1.5; }
.preview-hero button { width:max-content; margin-top:12px; padding:11px 15px; color:#151815; background:#dfff6a; }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); min-height:68px; }
.preview-stats span { display:flex; align-items:center; gap:8px; padding:12px 16px; border-right:1px solid #dddcd5; font-size:8px; font-weight:800; }
.preview-stats b { color:#8a8d87; }
.trust-strip { display:flex; justify-content:space-around; gap:24px; padding:22px clamp(20px,5vw,72px); border-block:1px solid var(--line); color:#565c54; font-size:12px; font-weight:750; }
.section { padding:clamp(76px,10vw,150px) clamp(20px,7vw,110px); }
.section-heading { display:grid; grid-template-columns:.55fr 1.1fr .7fr; gap:50px; align-items:start; margin-bottom:70px; }
.section-heading h2 { margin:0; font-size:clamp(38px,5vw,70px); line-height:.98; letter-spacing:-.06em; }
.section-heading > p:last-child { margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.benefit-grid article { min-height:300px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.benefit-grid article > span { color:#8a8f87; font-size:12px; }
.benefit-grid h3 { margin:95px 0 16px; font-size:22px; letter-spacing:-.035em; }
.benefit-grid p { margin:0; color:var(--muted); line-height:1.65; }
.steps { color:white; background:var(--night); }
.steps .kicker,.steps .section-heading > p:last-child { color:#aeb4ad; }
.steps .kicker span { background:var(--acid); }
.steps .section-heading { grid-template-columns:.55fr 1.8fr; }
.steps ol { display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; border-top:1px solid #3d433e; list-style:none; }
.steps li { min-height:290px; padding:28px; border-right:1px solid #3d433e; }
.steps li > span { color:var(--acid); font-size:12px; }
.steps li div { margin-top:110px; }
.steps h3 { margin:0 0 12px; font-size:20px; }
.steps li p { margin:0; color:#aeb4ad; line-height:1.55; }
.faq .section-heading { grid-template-columns:.55fr 1.8fr; }
.faq-list { max-width:900px; margin-left:auto; border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { padding:26px 6px; cursor:pointer; font-size:20px; font-weight:750; list-style:none; }
.faq-list summary::after { float:right; content:"+"; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { max-width:700px; margin:-8px 0 26px; color:var(--muted); line-height:1.7; }
.final-cta { padding:clamp(80px,12vw,180px) 24px; color:white; background:#232823; text-align:center; }
.final-cta p { color:#adb3ac; }
.final-cta h2 { margin:0 auto 36px; font-size:clamp(45px,7vw,96px); line-height:.95; letter-spacing:-.07em; }
.marketing-footer { display:grid; grid-template-columns:1fr 1fr auto auto; align-items:center; gap:30px; padding:35px clamp(20px,5vw,72px); border-top:1px solid var(--line); font-size:12px; }
.marketing-footer p { color:var(--muted); }
.legal-page { width:min(850px,calc(100% - 40px)); margin:0 auto; padding:90px 0 130px; }
.legal-page h1 { font-size:clamp(42px,7vw,72px); line-height:1; letter-spacing:-.06em; }
.legal-page h2 { margin-top:48px; }
.legal-page p { color:#4f554d; font-size:17px; line-height:1.75; }
.legal-page a { text-decoration:underline; }
@media (max-width:900px) { .marketing-header nav { display:none; } .hero-section { grid-template-columns:minmax(0,1fr); min-height:auto; } .product-frame { width:100%; transform:none; box-shadow:14px 14px 0 #d4d1c7; } .section-heading,.steps .section-heading,.faq .section-heading { grid-template-columns:1fr; gap:18px; } .benefit-grid,.steps ol { grid-template-columns:repeat(2,1fr); } .trust-strip { justify-content:flex-start; overflow:auto; white-space:nowrap; } }
@media (max-width:560px) { .marketing-header { min-height:66px; } .header-actions .text-button { display:none; } .header-actions .button { min-height:40px; padding:0 15px; } .hero-section { padding-top:62px; } .hero-copy h1 { font-size:50px; } .hero-actions .button { width:100%; } .product-frame { padding:7px; } .browser-bar span { padding:4px 14px; } .site-preview { min-height:390px; } .preview-nav { padding:0 14px; } .preview-nav > span { display:none; } .preview-hero { min-height:290px; padding:30px 22px; } .preview-hero h2 { font-size:40px; } .preview-stats { grid-template-columns:1fr; } .preview-stats span:nth-child(n+2) { display:none; } .benefit-grid,.steps ol { grid-template-columns:1fr; } .benefit-grid article,.steps li { min-height:230px; } .benefit-grid h3,.steps li div { margin-top:65px; } .marketing-footer { grid-template-columns:1fr auto; } .marketing-footer p,.marketing-footer small { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }