:root {
    --ink: #071018;
    --ink-2: #101a27;
    --paper: #f3f6fa;
    --white: #fff;
    --text: #172333;
    --muted: #657286;
    --line: #dce4ee;
    --blue: #6278ff;
    --violet: #9569f5;
    --mint: #50e6c0;
    --lime: #caff70;
    --display: "Space Grotesk", "Segoe UI", sans-serif;
    --body: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --shadow: 0 24px 70px rgba(14, 31, 52, .12);
    --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--paper); font-family: var(--body); }
img { max-width: 100%; }
a { text-underline-offset: .18em; }
.container { width: min(1160px, calc(100% - 2.5rem)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 40; top: .75rem; left: .75rem; padding: .7rem 1rem; color: var(--ink); background: var(--mint); border-radius: 10px; font-weight: 800; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.cluster-header { position: sticky; z-index: 20; top: 0; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(7,16,24,.95); backdrop-filter: blur(18px); }
.cluster-nav { min-height: 76px; display: flex; align-items: center; gap: .9rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--white); font: 700 1.18rem/1 var(--display); text-decoration: none; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span span { color: var(--mint); }
.page-label { max-width: 250px; padding-left: .9rem; color: #9fabb9; border-left: 1px solid rgba(255,255,255,.14); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cluster-menu { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.cluster-menu a { padding: .65rem .7rem; color: #b5c0cc; border-radius: 10px; font-size: .8rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.cluster-menu a:hover, .cluster-menu a:focus { color: var(--white); background: rgba(255,255,255,.07); }
.cluster-menu .talk { margin-left: .45rem; color: #03261d; background: var(--mint); }
.cluster-menu .talk:hover, .cluster-menu .talk:focus { color: #03261d; background: #78efd2; }

.hero { position: relative; overflow: hidden; min-height: 760px; display: grid; align-items: center; padding: 7rem 0; color: var(--white); background: var(--ink); }
.hero::before { content: ""; position: absolute; width: 760px; height: 760px; top: -450px; right: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(98,120,255,.36), rgba(98,120,255,0) 70%); }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; bottom: -390px; left: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(80,230,192,.22), rgba(80,230,192,0) 70%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(330px,.82fr); gap: 4rem; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; color: var(--mint); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.kicker::before { content: ""; width: 23px; height: 2px; background: currentColor; }
.kicker.dark { color: #4056dd; }
h1, h2, h3 { font-family: var(--display); }
h1 { max-width: 820px; margin: 0; font-size: clamp(3.2rem,6.7vw,6.5rem); line-height: .94; letter-spacing: -.065em; }
h1 span { color: transparent; background: linear-gradient(100deg,#9ba8ff,var(--mint)); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 720px; margin: 1.45rem 0 0; color: #aebbc9; font-size: clamp(1.04rem,1.6vw,1.22rem); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .82rem 1.05rem; border: 1px solid transparent; border-radius: 13px; font-size: .88rem; font-weight: 850; text-decoration: none; }
.button.primary { color: #03261d; background: var(--mint); box-shadow: 0 16px 35px rgba(80,230,192,.2); }
.button.primary:hover, .button.primary:focus { background: #78efd2; }
.button.secondary { color: var(--white); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.055); }
.button.secondary:hover, .button.secondary:focus { background: rgba(255,255,255,.1); }
.button.dark { color: var(--white); background: var(--ink); }
.hero-signals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 2.2rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero-signal { padding: 1rem 1rem 0 0; }
.hero-signal + .hero-signal { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.1); }
.hero-signal strong { display: block; font: 700 .86rem/1.3 var(--display); }
.hero-signal span { display: block; margin-top: .35rem; color: #8795a6; font-size: .75rem; line-height: 1.45; }

.hero-art { position: relative; min-height: 480px; }
.browser { position: absolute; inset: 5% 0 auto; overflow: hidden; min-height: 390px; border: 1px solid rgba(255,255,255,.15); border-radius: 25px; background: #111a29; box-shadow: 0 35px 80px rgba(0,0,0,.36); transform: rotate(1.5deg); }
.browser-bar { height: 48px; display: flex; align-items: center; gap: .35rem; padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff6c79; }
.browser-bar i:nth-child(2) { background: #ffc65f; }
.browser-bar i:nth-child(3) { background: var(--mint); }
.browser-bar span { margin-left: .65rem; padding: .35rem .65rem; color: #8e9aab; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; font-size: .67rem; }
.browser-screen { padding: 1.2rem; }
.mock-hero { height: 142px; padding: 1.3rem; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: linear-gradient(145deg,#243454,#19283a); }
.mock-accent { width: 30%; height: 8px; border-radius: 999px; background: var(--mint); }
.mock-line { width: 78%; height: 15px; margin-top: 20px; border-radius: 999px; background: #e7edf3; }
.mock-line.short { width: 61%; margin-top: 9px; }
.mock-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; margin-top: .75rem; }
.mock-card { height: 96px; padding: .9rem; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #151f2e; }
.mock-card::before { content: ""; display: block; width: 28px; height: 28px; border-radius: 9px; background: rgba(98,120,255,.38); }
.mock-card::after { content: ""; display: block; width: 66%; height: 7px; margin-top: 12px; border-radius: 999px; background: #687588; }
.art-chip { position: absolute; right: -18px; bottom: 17px; display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: #101925; box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.art-chip i { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); border-radius: 10px; background: var(--mint); font-size: 1rem; }
.art-chip strong { display: block; font-size: .78rem; }
.art-chip span { display: block; margin-top: .18rem; color: #8795a6; font-size: .68rem; }

.proof-strip { color: var(--white); background: #0d1523; }
.proof-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.proof-label { color: #77869a; font-size: .67rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.proof-links { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.proof-links a { color: #d4dbe4; font-size: .78rem; font-weight: 800; text-decoration: none; }
.proof-links a:hover, .proof-links a:focus { color: var(--mint); }

.section { padding: 6.5rem 0; }
.section.white { background: var(--white); }
.section.soft { background: var(--paper); }
.section.dark { color: var(--white); background: var(--ink); }
.section-head { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 3.5rem; align-items: end; margin-bottom: 2.7rem; }
.section-head h2, .large-heading { margin: 0; font-size: clamp(2.35rem,4.8vw,4.45rem); line-height: 1; letter-spacing: -.055em; }
.section-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.section.dark .section-head p { color: #9caaba; }
.card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.info-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 14px 38px rgba(14,31,52,.055); }
.info-card .icon { display: grid; place-items: center; width: 46px; height: 46px; color: var(--blue); border-radius: 14px; background: #eef0ff; font-size: 1.2rem; }
.info-card h3 { margin: 1.2rem 0 .65rem; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.035em; }
.info-card p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.68; }

.include-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.include-item { padding: 1.3rem; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.6); }
.include-item h3 { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: 1rem; }
.include-item h3 i { color: #4056dd; }
.include-item p { margin: .6rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }

.outcome-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.outcome { padding: 1.5rem; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; background: rgba(255,255,255,.035); }
.outcome span { color: var(--mint); font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.outcome h3 { margin: 1.1rem 0 .65rem; color: var(--white); font-size: 1.3rem; }
.outcome p { margin: 0; color: #9fabb9; font-size: .86rem; line-height: 1.65; }

.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.process-step { position: relative; padding: 1.4rem 1.7rem 0 0; border-top: 1px solid var(--line); }
.process-step:not(:last-child)::after { content: ""; position: absolute; top: -4px; right: 1rem; width: 8px; height: 8px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg); }
.process-step span { color: var(--blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.process-step h3 { margin: .85rem 0 .55rem; font-size: 1.15rem; }
.process-step p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.62; }

.evidence-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.evidence { overflow: hidden; color: var(--white); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #111b29; }
.evidence-visual { min-height: 130px; padding: 1rem; background: linear-gradient(135deg,rgba(98,120,255,.25),rgba(80,230,192,.08)); }
.evidence-window { height: 98px; padding: .8rem; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(7,16,24,.62); }
.evidence-window::before { content: ""; display: block; width: 35%; height: 8px; border-radius: 999px; background: var(--mint); }
.evidence-window::after { content: ""; display: block; width: 72%; height: 12px; margin-top: 20px; border-radius: 999px; background: #dce4ee; box-shadow: 0 19px 0 #687588; }
.evidence-copy { padding: 1.35rem; }
.evidence-copy small { color: var(--mint); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.evidence-copy h3 { margin: .7rem 0 .55rem; font-size: 1.35rem; }
.evidence-copy p { margin: 0 0 1rem; color: #9eabb9; font-size: .84rem; line-height: 1.62; }
.evidence-copy a { color: var(--white); font-size: .78rem; font-weight: 850; text-decoration: none; }
.evidence-copy a:hover, .evidence-copy a:focus { color: var(--mint); }

.resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
.resource { padding: 1.4rem; color: var(--text); border: 1px solid var(--line); border-radius: 18px; background: var(--white); text-decoration: none; }
.resource small { color: #4056dd; font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.resource strong { display: block; margin-top: .65rem; font: 700 1.05rem/1.35 var(--display); }
.resource span { display: block; margin-top: .65rem; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.resource:hover, .resource:focus { border-color: #aeb9ff; box-shadow: 0 14px 34px rgba(64,86,221,.1); transform: translateY(-2px); }

.faq-wrap { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 4rem; align-items: start; }
.faq-intro p { max-width: 510px; color: var(--muted); line-height: 1.7; }
.faq-list { display: grid; gap: .65rem; }
.faq { border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.faq summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.15rem; font: 700 .96rem/1.45 var(--display); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; color: var(--blue); font-size: 1.35rem; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0; padding: 0 1.15rem 1.15rem; color: var(--muted); font-size: .88rem; line-height: 1.68; }
.faq a { color: #4056dd; font-weight: 750; }

.cta { padding: 6rem 0; color: var(--white); background: linear-gradient(120deg,#5c73f7,#8c62ef); }
.cta-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3rem; align-items: center; }
.cta h2 { max-width: 830px; margin: 0; font-size: clamp(2.55rem,5vw,5rem); line-height: .98; letter-spacing: -.06em; }
.cta p { max-width: 670px; margin: 1rem 0 0; color: rgba(255,255,255,.82); line-height: 1.7; }
.cta-actions { display: grid; gap: .7rem; }

footer { padding: 2rem 0; color: #aeb9c6; background: var(--ink); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-row p { margin: 0; font-size: .8rem; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: .9rem; }
.footer-row nav a { color: #c1ccd7; font-size: .78rem; font-weight: 750; text-decoration: none; }
.footer-row nav a:hover, .footer-row nav a:focus { color: var(--mint); }
.whatsapp { position: fixed; z-index: 25; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: .5rem; padding: .82rem 1rem; color: #03261d; background: var(--mint); border: 1px solid rgba(0,0,0,.08); border-radius: 999px; box-shadow: 0 15px 35px rgba(7,16,24,.22); font-size: .8rem; font-weight: 900; text-decoration: none; }

@media (max-width: 1050px) {
    .page-label { display: none; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero { min-height: auto; }
    .hero-art { min-height: 450px; }
    .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .outcome-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .evidence-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .evidence:last-child { grid-column: span 2; }
}

@media (max-width: 850px) {
    .cluster-nav { flex-wrap: wrap; padding: .75rem 0; }
    .cluster-menu { width: 100%; margin-left: 0; overflow-x: auto; }
    .cluster-menu a { white-space: nowrap; }
    .section-head, .faq-wrap, .cta-inner { grid-template-columns: 1fr; gap: 2rem; }
    .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
    .process-step:nth-child(2)::after { display: none; }
    .resource-grid { grid-template-columns: 1fr; }
    .cta-actions { display: flex; flex-wrap: wrap; }
}

@media (max-width: 620px) {
    .container { width: min(100% - 1.5rem,1160px); }
    .cluster-menu a:not(.talk) { display: none; }
    .cluster-menu { width: auto; margin-left: auto; }
    .cluster-menu .talk { margin-left: 0; }
    .hero { padding: 5rem 0 4.5rem; }
    h1 { font-size: clamp(3rem,14vw,4.5rem); }
    .hero-actions .button { width: 100%; }
    .hero-signals, .card-grid, .include-grid, .outcome-grid, .process-grid, .evidence-grid { grid-template-columns: 1fr; }
    .hero-signal + .hero-signal { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .hero-art { min-height: 370px; }
    .browser { min-height: 330px; }
    .mock-card { height: 78px; }
    .art-chip { right: 5px; }
    .proof-row { align-items: flex-start; flex-direction: column; padding: 1.1rem 0; }
    .proof-links { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 1.2rem; padding-bottom: .3rem; }
    .proof-links a { white-space: nowrap; }
    .section { padding: 4.6rem 0; }
    .process-step::after { display: none !important; }
    .evidence:last-child { grid-column: auto; }
    .footer-row { align-items: flex-start; flex-direction: column; }
    .whatsapp { width: 54px; height: 54px; padding: 0; justify-content: center; font-size: 1.2rem; }
    .whatsapp span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}