:root{ --bg:#0b1220; --bg-soft:#0f172a; --card:#0f172a; --text:#e5e7eb; --muted:#9ca3af;
--brand:#22c55e; --brand-2:#0ea5e9; --ring:0 0 0 3px rgba(34,197,94,.35); --shadow:0 10px 30px rgba(2,6,23,.35) }
*,*::before,*::after{ box-sizing:border-box } html,body{ height:100%; scroll-behavior:smooth }
body{ margin:0; font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.08), transparent),
                       radial-gradient(1200px 600px at 110% 10%, rgba(34,197,94,.08), transparent), var(--bg) }
a{ color:inherit; text-decoration:none } img{ max-width:100%; display:block }
.container{ width:min(1120px,92%); margin-inline:auto } .section{ padding:clamp(48px,6vw,96px) 0 }
.card{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow:var(--shadow) }
.btn{ display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; font-weight:700; letter-spacing:.2px;
  padding:.85rem 1.15rem; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b1220; border:none; cursor:pointer; transition:.2s transform,.2s filter }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) } .btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16) }
.tag{ font-size:.8rem; padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:var(--muted) }
.header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,18,32,.6); border-bottom:1px solid rgba(255,255,255,.06) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0 }
.nav a.logo{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px }
.nav img{ width:42px; height:42px } .nav ul{ list-style:none; display:flex; gap:1rem; padding:0; margin:0; align-items:center }
.nav ul a{ padding:.6rem .8rem; border-radius:10px } .nav ul a:focus-visible, .btn:focus-visible, input:focus, select:focus, textarea:focus{ outline:none; box-shadow:var(--ring) }
.mobile-toggle{ display:none }
@media (max-width:880px){ .nav ul{ display:none; position:absolute; inset:64px 0 auto 0; background:rgba(11,18,32,.95); padding:1rem; flex-direction:column }
  .nav ul.open{ display:flex } .mobile-toggle{ display:inline-flex } }
.hero{ position:relative; padding-top:clamp(48px,8vw,120px); padding-bottom:clamp(48px,8vw,120px) }
.hero .grid{ display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(24px,3vw,48px); align-items:center }
@media (max-width:960px){ .hero .grid{ grid-template-columns:1fr } }
.kicker{ color:var(--brand-2); font-weight:700; letter-spacing:.3px } .hero h1{ font-size:clamp(2rem,4vw,3.2rem); line-height:1.1; margin:.5rem 0 1rem }
.hero p{ color:var(--muted); font-size:clamp(1rem,1.5vw,1.1rem) } .hero-card{ overflow:hidden }
.hero-visual{ aspect-ratio:4/3; border-radius:16px; overflow:hidden; position:relative;
  background:#0a0f1b url("https://wallpaperbat.com/img/112623142-money-tree-realistic-graphics.jpg") center/cover no-repeat }
.hero-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,6,23,.1),rgba(2,6,23,.5)) }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2vw,36px); align-items:start }
@media (max-width:960px){ .split{ grid-template-columns:1fr } } h2.section-title{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 1rem } .lead{ color:var(--muted) }
.grid{ display:grid; gap:clamp(16px,2vw,24px) } .grid-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1000px){ .grid-3{ grid-template-columns:repeat(2,1fr) } } @media (max-width:680px){ .grid-3{ grid-template-columns:1fr } }
.state{ padding:1rem } .state summary{ list-style:none; cursor:pointer; font-weight:700 } .state summary::-webkit-details-marker{ display:none }
.state ul{ margin:.4rem 0 0 1rem; padding:0; color:var(--muted) } .state li{ margin:.35rem 0 }
.calculator{ padding:1rem; display:grid; gap:1rem } .input{ display:grid; gap:.35rem } label{ font-weight:600 }
input[type="number"],input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  background:rgba(255,255,255,.05); color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.8rem .9rem }
input::placeholder,textarea::placeholder{ color:#8b95a3 } .output{ display:flex; gap:1rem; flex-wrap:wrap }
.testimonials{ display:grid; grid-template-columns:1fr 1fr; gap:1rem } .testimonial{ padding:1rem } @media (max-width:840px){ .testimonials{ grid-template-columns:1fr } }
.faq details{ border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1rem 1.1rem; background:rgba(255,255,255,.03) }
.faq summary{ cursor:pointer; font-weight:700 } .faq .answer{ color:var(--muted); margin-top:.5rem }
.form{ display:grid; gap:1rem } .consent{ font-size:.9rem; color:var(--muted) }
.success,.error{ display:none; font-weight:700 } .success.show{ display:block; color:#22c55e } .error.show{ display:block; color:#ef4444 }
small.hint{ color:var(--muted) } .footer{ padding:2rem 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.08) }
.cookie-banner{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); width:min(720px,92%); z-index:60; padding:1rem; display:none }
.cookie-banner.show{ display:block } .row{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center }
.hidden{ display:none } hr.div{ border:0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.18),rgba(255,255,255,.04)); margin:1.2rem 0 }

/* ===== Exit-Intent Modal ===== */
.modal{ position:fixed; inset:0; display:none; z-index:100; }
.modal.show{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.68); backdrop-filter:blur(6px); }
.modal-panel{ position:relative; z-index:1; width:min(980px,92%); margin:6vh auto; padding:clamp(16px,2vw,24px); border-radius:16px; }
.modal-close{ position:absolute; top:.6rem; right:.6rem; }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); align-items:stretch }
.modal-visual{ border-radius:12px; overflow:hidden; background:#0a0f1b }
.modal-visual img{ width:100%; height:100%; object-fit:cover; display:block }
.modal-body .lead{ color:var(--muted) }
@media (max-width:900px){ .modal-grid{ grid-template-columns:1fr } }