:root { --font-sans: "Satoshi", sans-serif; --font-display: "Clash Display", sans-serif; --background: oklch(0.08 0.025 280); --foreground: oklch(0.98 0.008 300); --card: oklch(0.13 0.034 285); --primary: oklch(0.67 0.27 335); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.65 0.22 303); --muted: oklch(0.18 0.025 280); --muted-foreground: oklch(0.69 0.025 285); --accent: oklch(0.78 0.19 63); --border: oklch(1 0 0 / 0.1); --success: oklch(0.72 0.2 150); --danger: oklch(0.64 0.22 20); }
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
button, a, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.site-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 10%, color-mix(in oklch, var(--secondary) 8%, transparent), transparent 28%), var(--background); }
.section { width: min(1180px, calc(100% - 40px)); margin-inline: auto; padding-block: 104px; }
.header { position: fixed; z-index: 100; top: 0; width: 100%; height: 76px; display: flex; align-items: center; background: color-mix(in oklch, var(--background) 84%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.nav-inner { width: min(1180px, calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; color: var(--muted-foreground); }
.brand i { color: var(--accent); font-family: var(--font-display); font-weight: 600; }
.brand-mark { width: 34px; height: 26px; display: grid; place-items: center; color: var(--accent); font-weight: 800; border: 2px solid var(--primary); border-radius: 45% 55% 46% 54%; box-shadow: inset 0 0 0 2px color-mix(in oklch,var(--secondary) 40%,transparent); }
.header nav { display: flex; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); color: var(--muted-foreground); font-size: 14px; }
.header nav a:hover { color: var(--foreground); }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.login { color: var(--muted-foreground); font-size: 14px; }
.button { min-height: 54px; padding: 0 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; color: var(--primary-foreground); background: linear-gradient(100deg, var(--primary), var(--secondary)); text-transform: uppercase; font-size: 13px; font-weight: 800; letter-spacing: .09em; box-shadow: 0 12px 42px color-mix(in oklch, var(--primary) 35%, transparent); transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 55px color-mix(in oklch, var(--primary) 48%, transparent); }
.button svg { width: 17px; }
.button.small { min-height: 44px; padding: 0 24px; font-size: 11px; }
.menu-button { display: none; border: 0; color: var(--foreground); background: transparent; }
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 140px; }
.hero-grid { width: 100%; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.hero-copy h1, h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; }
.hero-copy h1 { font-size: clamp(42px, 4vw, 62px); line-height: 1.03; margin: 0 0 26px; max-width: 510px; }
.hero-copy h1 span, h2 span { color: var(--primary); background: linear-gradient(100deg, var(--primary), var(--secondary)); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy>p { color: var(--muted-foreground); max-width: 470px; font-size: 18px; line-height: 1.65; }
.spark-list { list-style: none; padding: 0; margin: 18px 0 34px; line-height: 1.85; font-weight: 700; }
.spark-list li { display: flex; align-items: center; gap: 8px; }
.spark-list svg { width: 16px; height: 16px; color: var(--accent); fill: color-mix(in oklch, var(--accent) 20%, transparent); }
.dashboard-wrap { height: 510px; position: relative; display: grid; place-items: center; }
.dashboard { width: 620px; height: 440px; display: grid; grid-template-columns: 145px 1fr; opacity: .28; border: 1px solid var(--border); background: color-mix(in oklch,var(--card) 90%,transparent); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 80px color-mix(in oklch,var(--secondary) 12%,transparent); }
.dashboard aside { padding: 22px 12px; border-right: 1px solid var(--border); }
.dashboard aside .brand { transform: scale(.72); transform-origin: left; margin-bottom: 25px; white-space: nowrap; }
.dashboard aside>div { padding: 10px; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted-foreground); }
.dashboard aside .side-active { color: var(--primary); background: color-mix(in oklch,var(--primary) 12%,transparent); border-radius: 7px; }
.dash-main { padding: 24px; }
.dash-head { display: flex; justify-content: space-between; font-size: 12px; }.dash-head span { color: var(--success); font-size: 9px; }
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 20px; }.stats>div { background: var(--muted); border: 1px solid var(--border); padding: 13px; border-radius: 9px; display:flex; flex-direction:column; gap:6px; }.stats small,.stats em { color: var(--muted-foreground); font-size: 7px; font-style:normal; }.stats b { font-size: 13px; }
.welcome { margin-top: 12px; padding: 14px; background: color-mix(in oklch,var(--primary) 8%,transparent); display:flex; flex-direction:column; gap:6px; font-size:10px; border-radius:9px; }.welcome span { color:var(--muted-foreground); }
.chart { margin-top:12px; height:130px; padding:14px; background:var(--muted); border-radius:9px; position:relative; }.chart>div:first-child {display:flex;flex-direction:column;font-size:10px}.chart small{color:var(--muted-foreground);font-size:7px}.chart-line{position:absolute;inset:38px 15px 8px;color:var(--primary);font-size:100px;line-height:.5;overflow:hidden}.chart>strong{position:absolute;right:18px;top:17px;font-size:12px}.chart>strong small{display:block;color:var(--success)}
.flow-label { position:absolute; z-index:3; width:205px; padding:13px 18px; border:1px solid color-mix(in oklch,var(--primary) 55%,transparent); border-radius:22px; color:var(--muted-foreground); font-size:11px; background:color-mix(in oklch,var(--background) 85%,transparent); }.flow-label.left{left:5px}.flow-label.right{right:-8px}.flow-label.one{top:142px}.flow-label.two{top:198px}.flow-label.three{top:254px}.processor{position:absolute;z-index:5;top:185px;left:50%;transform:translateX(-50%);width:174px;height:110px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:1px solid color-mix(in oklch,var(--primary) 35%,transparent);border-radius:28px;background:var(--card);box-shadow:0 0 48px color-mix(in oklch,var(--primary) 25%,transparent);font-family:var(--font-display)}.processor span{font-size:8px;letter-spacing:.25em;color:var(--muted-foreground)}.processor span::first-letter{color:var(--primary)}
.eyebrow { color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; margin-bottom: 14px; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.05; margin: 0; max-width: 850px; }
.lead { color: var(--muted-foreground); font-size: 18px; line-height: 1.65; max-width: 730px; }
.video-section { text-align:center; }.video-section h2,.video-section .lead {margin-inline:auto}.video-frame {display:block;position:relative;margin:48px auto 0;max-width:900px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 80px color-mix(in oklch,var(--secondary) 20%,transparent)}.video-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}.video-frame img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.problems h2 { max-width:900px; }.issue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}.issue-grid article,.features article{border-top:1px solid var(--border);padding:28px 8px 12px}.issue-grid svg,.features svg{color:var(--primary);width:25px}.issue-grid h3,.features h3{font-family:var(--font-display);font-size:20px;margin:20px 0 10px}.issue-grid p,.features p,.steps p{color:var(--muted-foreground);line-height:1.6;font-size:15px}
.how { text-align:center; }.how h2{margin-inline:auto}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;position:relative}.steps:before{content:"";position:absolute;top:27px;left:12%;right:12%;border-top:1px solid color-mix(in oklch,var(--primary) 35%,transparent)}.steps article{padding:0 18px;position:relative}.steps article>b{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--card);border:1px solid var(--primary);color:var(--primary);font-size:20px}.steps h3{font-family:var(--font-display);margin-top:25px}
.resources h2 { max-width:760px}.features{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:50px}.features article{grid-column:span 2;background:color-mix(in oklch,var(--card) 62%,transparent);padding:30px;border:1px solid var(--border);border-radius:8px}.features .featured{grid-column:span 3}.features article:nth-child(2){grid-column:span 3}
.compare{text-align:center}.compare h2,.compare .lead{margin-inline:auto}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;margin:50px auto 0;max-width:900px}.compare-grid article{padding:36px;border:1px solid var(--border);border-radius:8px;background:var(--card)}.compare-grid small{text-transform:uppercase;letter-spacing:.13em}.compare-grid h3{font-family:var(--font-display);font-size:28px;margin:12px 0 28px}.compare-grid p{display:flex;align-items:center;gap:12px;color:var(--muted-foreground)}.compare-grid svg{width:18px;flex:none}.before svg{color:var(--danger)}.after{box-shadow:inset 0 2px var(--success)}.after small,.after svg{color:var(--success)}
.pricing{text-align:center}.pricing h2,.pricing .lead,.plan-note{margin-inline:auto}.plan-note{color:var(--muted-foreground);line-height:1.6;max-width:820px}.slider-card{max-width:920px;margin:44px auto 26px;padding:25px 34px;background:var(--card);border:1px solid var(--border);border-radius:8px}.slider-title{display:flex;justify-content:space-between;margin-bottom:16px}.slider-title b{color:var(--primary);font-size:22px}.slider-card input{width:100%;accent-color:var(--primary)}.ticks{display:flex;justify-content:space-between;margin-top:8px}.ticks button{border:0;background:none;color:var(--muted-foreground);font-size:10px;padding:2px;cursor:pointer}.ticks button.active{color:var(--primary);font-weight:800}.price-card{max-width:920px;margin:auto;padding:42px 48px;text-align:left;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,var(--card),color-mix(in oklch,var(--secondary) 12%,var(--card)));border:1px solid color-mix(in oklch,var(--primary) 38%,transparent);border-radius:8px;box-shadow:0 20px 70px color-mix(in oklch,var(--primary) 8%,transparent)}.price-card small{text-transform:uppercase;color:var(--primary);font-weight:700;letter-spacing:.15em}.price-card h3{font-family:var(--font-display);font-size:38px;margin:5px 0}.price-card p{color:var(--muted-foreground)}.price-card ul{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 25px;margin-top:25px}.price-card li{display:flex;gap:8px;align-items:center;font-size:14px}.price-card li svg{width:16px;color:var(--success)}.price-side{text-align:right}.price-side sup{font-size:18px;color:var(--muted-foreground)}.price-side strong{font-family:var(--font-display);font-size:60px}.price-side span{color:var(--muted-foreground)}.price-side .button{margin-top:18px}
.cta{background:radial-gradient(circle at 50% 50%,color-mix(in oklch,var(--primary) 22%,transparent),transparent 48%),var(--card);border-block:1px solid var(--border);text-align:center}.cta .section{display:flex;flex-direction:column;align-items:center}.cta>.section>svg{color:var(--primary);width:34px;height:34px;margin-bottom:20px}.cta p{color:var(--muted-foreground);font-size:18px;max-width:650px;line-height:1.6}.cta .button{margin-top:18px}
.faq{text-align:center}.faq h2{margin:auto}.faq-list{max-width:850px;margin:45px auto 0;text-align:left;border-top:1px solid var(--border)}.faq-list article{border-bottom:1px solid var(--border)}.faq-list button{width:100%;border:0;background:none;color:var(--foreground);padding:23px 0;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:700;cursor:pointer}.faq-list button svg{width:20px;transition:transform .2s}.faq-list article p{max-height:0;overflow:hidden;margin:0;color:var(--muted-foreground);line-height:1.6;transition:.25s}.faq-list article.open p{max-height:150px;padding-bottom:23px}.faq-list article.open button svg{transform:rotate(180deg)}
footer{border-top:1px solid var(--border)}.footer-inner{padding-block:48px;display:flex;align-items:center;justify-content:space-between;color:var(--muted-foreground);font-size:13px}.whatsapp{position:fixed;z-index:90;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--primary-foreground);background:var(--success);box-shadow:0 10px 30px color-mix(in oklch,var(--success) 30%,transparent)}.whatsapp svg{width:27px}
@media (max-width: 900px){.header nav{display:none;position:absolute;top:75px;left:20px;right:20px;transform:none;padding:20px;background:var(--card);border:1px solid var(--border);flex-direction:column}.header nav.open{display:flex}.menu-button{display:block}.login{display:none}.hero-grid{grid-template-columns:1fr;text-align:center}.hero-copy h1,.hero-copy>p{margin-inline:auto}.spark-list{display:flex;flex-direction:column;align-items:center}.hero-copy .button{margin-inline:auto}.dashboard-wrap{transform:scale(.84);margin-inline:-80px}.issue-grid,.steps{grid-template-columns:1fr 1fr}.steps:before{display:none}.features{grid-template-columns:1fr 1fr}.features article,.features .featured,.features article:nth-child(2){grid-column:auto}.price-card{align-items:flex-start;gap:35px}.price-card ul{grid-template-columns:1fr}.price-side strong{font-size:48px}}
@media (max-width: 600px){.section{width:min(100% - 28px,1180px);padding-block:76px}.header{height:68px}.button.small{display:none}.hero{padding-top:115px}.hero-copy h1{font-size:40px}.hero-copy>p{font-size:16px}.dashboard-wrap{height:370px;transform:scale(.56);margin-inline:-180px}.video-frame{margin-top:30px}.issue-grid,.steps,.features,.compare-grid{grid-template-columns:1fr}.steps article{margin-bottom:28px}.slider-card{padding:22px 14px}.ticks button:nth-child(even){display:none}.price-card{padding:30px 24px;flex-direction:column}.price-side{text-align:left;width:100%}.price-side .button{width:100%}.footer-inner{flex-direction:column;gap:20px;text-align:center}.whatsapp{right:16px;bottom:16px}.nav-actions{gap:8px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.button,.faq-list p{transition:none}}