:root {
  color-scheme: dark; --bg: #07111f; --surface: #0b1828; --surface-2: #102237; --text: #f6f8fb; --muted: #aebed0;
  --line: #24364a; --accent: #4fd1c5; --accent-strong: #75e6dc; --ink: #06111d; --warning: #f5c96a;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 10px; --radius-md: 18px; --max: 1200px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: inherit; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--accent); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-header, footer { width: min(var(--max), calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { min-height: 82px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; letter-spacing: -.02em; }
.brand strong { color: var(--accent); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent); border-radius: 9px; color: var(--accent); font-weight: 800; font-size: .72rem; }
nav { display: flex; gap: 32px; } nav a { color: var(--muted); text-decoration: none; font-size: .9rem; } nav a:hover { color: var(--text); }
.hero { width: min(var(--max), calc(100% - 40px)); min-height: 690px; margin: auto; padding: 92px 0 84px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(48px, 8vw, 110px); align-items: center; }
.eyebrow { color: var(--accent); font-size: .76rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 22px; height: 1px; vertical-align: middle; background: var(--accent); margin-right: 8px; }
h1, h2, h3, p { margin-top: 0; } h1, h2 { letter-spacing: -.055em; line-height: .96; }
h1 { margin: 22px 0 28px; font-size: clamp(4rem, 8vw, 7.6rem); font-weight: 720; } h1 em { color: var(--accent); font-style: normal; }
.lead { max-width: 670px; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.38rem); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 54px; padding: 0 23px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--ink); font: inherit; font-weight: 760; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--accent-strong); } .button:focus-visible, a:focus-visible, input:focus-visible + span { outline: 3px solid var(--warning); outline-offset: 3px; }
.button-small { min-height: 42px; padding: 0 17px; font-size: .88rem; }.button-quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
.text-link { color: var(--muted); text-underline-offset: 5px; }.trust-list { display: flex; gap: 22px; padding: 0; margin: 44px 0 0; list-style: none; color: var(--muted); font-size: .8rem; }.trust-list li::before { content: "✓"; color: var(--accent); margin-right: 7px; }
.analysis-card { position: relative; padding: 28px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 36px 80px #0006; }
.analysis-card::before { content: ""; position: absolute; inset: -80px -50px auto auto; width: 180px; height: 180px; border: 1px solid #4fd1c533; border-radius: 50%; pointer-events: none; }
.card-head, .metric > div { display: flex; justify-content: space-between; }.card-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; }
.live { color: var(--accent); }.live i { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 10px var(--accent); }
.score { display: flex; align-items: end; gap: 10px; padding: 30px 0 24px; }.score strong { font-size: 4.6rem; line-height: .8; letter-spacing: -.08em; }.score span { color: var(--muted); font-size: .74rem; line-height: 1.25; }
.metric { margin: 20px 0; }.metric div { font-size: .83rem; }.metric b { color: var(--accent); }progress { appearance: none; width: 100%; height: 4px; border: 0; margin-top: 9px; }progress::-webkit-progress-bar { background: var(--line); }progress::-webkit-progress-value { background: var(--accent); }progress::-moz-progress-bar { background: var(--accent); }
.finding { display: flex; gap: 14px; margin-top: 28px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #06101c88; }.finding > span { color: var(--accent); font-size: .75rem; }.finding p { margin: 0; color: var(--muted); font-size: .78rem; }.finding strong { display: block; color: var(--text); margin-bottom: 3px; }.example-label { margin: 14px 0 0; color: var(--muted); font-size: .68rem; }
.signal { border-block: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .82rem; letter-spacing: .05em; }.signal p { margin: 0; padding: 22px; }
.section { width: min(var(--max), calc(100% - 40px)); margin: auto; padding: 120px 0; }.section-intro { max-width: 720px; margin-bottom: 58px; }.section-intro h2, .start h2 { margin: 15px 0 24px; font-size: clamp(3rem, 6vw, 5.6rem); }.section-intro > p:last-child { color: var(--muted); font-size: 1.12rem; line-height: 1.7; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.product-card { padding: 40px; min-height: 490px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.product-card.featured { background: var(--text); color: var(--ink); }.number { align-self: end; color: var(--muted); font-size: .78rem; }.kicker { margin-top: 34px; color: #1f7f79; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; }.product-card h3 { max-width: 420px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.045em; }.product-card > p:not(.kicker) { color: var(--muted); max-width: 520px; }.featured > p:not(.kicker) { color: #455567; }.product-card ul { padding: 0; margin: 24px 0 34px; list-style: none; }.product-card li { padding: 10px 0; border-bottom: 1px solid #78889933; font-size: .9rem; }.product-card li::before { content: "↳"; margin-right: 9px; color: var(--accent); }.product-card a, .muted-link { margin-top: auto; font-weight: 750; }.product-card a { color: var(--ink); }.muted-link { color: var(--muted); }
.method { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; border-top: 1px solid var(--line); }.steps { margin: 0; padding: 0; list-style: none; }.steps li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }.steps > li > span { color: var(--accent); font-size: .75rem; }.steps h3 { margin-bottom: 6px; font-size: 1.18rem; }.steps p { color: var(--muted); margin: 0; }
.deliverables { border-top: 1px solid var(--line); }.deliverable-grid { display: grid; grid-template-columns: 1fr 1fr; }.deliverable-grid div { min-height: 220px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; border: solid var(--line); border-width: 1px 0 0 1px; }.deliverable-grid div:nth-child(even) { border-right-width: 1px; }.deliverable-grid div:nth-last-child(-n+2) { border-bottom-width: 1px; }.deliverable-grid span { color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }.deliverable-grid strong { max-width: 480px; font-size: 1.45rem; line-height: 1.35; }
.decision { border-top: 1px solid var(--line); }.decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 44px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }.decision-grid article { min-height: 260px; padding: 34px; background: var(--surface); }.decision-grid span { color: var(--accent); font-size: .72rem; letter-spacing: .12em; }.decision-grid h3 { margin-top: 70px; font-size: 1.45rem; }.decision-grid p { margin: 0; color: var(--muted); }
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; border-top: 1px solid var(--line); }.faq-list details { padding: 24px 0; border-bottom: 1px solid var(--line); }.faq-list summary { cursor: pointer; color: var(--text); font-size: 1.08rem; font-weight: 760; }.faq-list summary::marker { color: var(--accent); }.faq-list details p { max-width: 680px; margin: 16px 0 0; color: var(--muted); }
.start { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: start; border-top: 1px solid var(--line); }.start > div > p { color: var(--muted); }.direct-contact { display: grid; gap: 7px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }.direct-contact span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }.direct-contact a { color: var(--accent); text-underline-offset: 5px; }
.project-starter { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.field { display: grid; gap: 8px; }.field > span { color: var(--muted); font-size: .78rem; font-weight: 700; }.field-wide { grid-column: 1 / -1; }.field input,.field select,.field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; }.field textarea { resize: vertical; }.field input:focus,.field select:focus,.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }.field input::placeholder,.field textarea::placeholder { color: #71859b; }.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 20px 0; color: var(--muted); font-size: .8rem; }.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }.consent a { color: var(--text); }.project-starter .button { width: 100%; }.button:disabled { cursor: wait; opacity: .65; }.honeypot { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }.form-assurance { margin: 12px 0 0; color: var(--muted); font-size: .72rem; text-align: center; }.form-status { display: grid; gap: 6px; min-height: 24px; margin: 16px 0 0; font-size: .85rem; }.form-status:empty { display: none; }.form-status strong { color: var(--text); font-size: 1rem; }.form-status span { color: var(--muted); }.form-status a { color: var(--accent); font-weight: 760; }.form-status-success,.form-status-error { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }.form-status-success { border-color: #4fd1c566; }.form-status-error { border-color: #f5c96a66; }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border: 1px solid #4fd1c577; border-radius: 999px; background: #07111fee; color: var(--text); box-shadow: 0 14px 40px #0007; text-decoration: none; backdrop-filter: blur(10px); }.whatsapp-float span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: .68rem; font-weight: 900; }.whatsapp-float strong { font-size: .78rem; }
footer { padding: 45px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }footer p { margin: 0; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 850px) { nav { display: none; }.hero, .method, .start, .faq { grid-template-columns: 1fr; }.hero { padding-top: 65px; }.method, .start, .faq { gap: 30px; }.product-grid { grid-template-columns: 1fr; }.decision-grid { grid-template-columns: 1fr; }.decision-grid article { min-height: 210px; }.decision-grid h3 { margin-top: 42px; }.section { padding: 86px 0; }.trust-list { flex-wrap: wrap; }.analysis-card { max-width: 600px; }.site-header > .button { display: none; }footer { align-items: flex-start; gap: 26px; flex-direction: column; }.deliverable-grid { grid-template-columns: 1fr; }.deliverable-grid div, .deliverable-grid div:nth-child(even) { border-width: 1px 1px 0; }.deliverable-grid div:last-child { border-bottom-width: 1px; } }
@media (max-width: 520px) { .site-header, footer, .hero, .section { width: min(100% - 28px, var(--max)); }.hero { min-height: auto; }h1 { font-size: 3.7rem; }.hero-actions { align-items: stretch; flex-direction: column; }.trust-list { flex-direction: column; gap: 8px; }.product-card { padding: 26px; min-height: 440px; }.field-grid { grid-template-columns: 1fr; }.field-wide { grid-column: auto; }.project-starter { padding: 20px; }.analysis-card { padding: 20px; }.score strong { font-size: 3.8rem; }.whatsapp-float { right: 12px; bottom: 12px; }.whatsapp-float strong { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-color-scheme: light) { :root { color-scheme: light; --bg: #f6f8fb; --surface: #fff; --surface-2: #edf3f7; --text: #07111f; --muted: #526477; --line: #cdd8e2; --ink: #06111d; }.product-card.featured { background: #07111f; color: #f6f8fb; }.featured > p:not(.kicker) { color: #aebed0; }.product-card.featured a { color: #f6f8fb; }.finding { background: #ffffff88; }.analysis-card { box-shadow: 0 36px 80px #24364a22; } }
@media (forced-colors: active) { .button, .brand-mark, .project-starter input:checked + span { border: 2px solid ButtonText; }.live i { forced-color-adjust: none; } }