 {} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --black:#0b0f10; --ink:#0f1720; --white:#ffffff; --teal:#0bb2b8; --green:#10b981; --teal-700:#0b8f94; --green-700:#0e986c; --muted:#667085; --border:#e5e7eb; --card:#f8fafc; --shadow:0 10px 30px rgba(0,0,0,.08); --radius:18px; } /* Base */ *{box-sizing:border-box} body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:linear-gradient(180deg, rgba(11,178,184,.08), rgba(16,185,129,.08) 45%, rgba(255,255,255,.9) 85%), var(--white); } a{color:var(--teal); text-decoration:none} img{max-width:100%; height:auto; display:block} .container{width:min(1120px, 92%); margin:0 auto} /* Topbar and Nav */ .topbar{ background:linear-gradient(90deg, var(--teal), var(--green)); color:#fff; font-weight:600; font-size:.95rem; letter-spacing:.2px; } .topbar .container{display:flex; align-items:center; justify-content:center; padding:.5rem 0} .topbar a{color:#fff; text-decoration:underline} .nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--border) } .nav .row{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0} .brand{display:flex; gap:.6rem; align-items:center; font-weight:800; font-size:1.1rem; color:var(--black)} .brand .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg, var(--teal), var(--green))} .nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap} .nav a{color:var(--ink); font-weight:600} .cta-mini{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:999px; background:linear-gradient(90deg, var(--teal), var(--green)); color:#fff; font-weight:700; box-shadow:var(--shadow) } /* Hero */ .hero{ padding:48px 0 22px; /* tighter top gap per your note */ } .hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center; } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border:1px solid rgba(11,178,184,.25); background:rgba(11,178,184,.08); color:var(--teal-700); font-weight:700; border-radius:999px; font-size:.85rem; } h1{font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.1; margin:.6rem 0} .lead{font-size:1.1rem; color:var(--muted); margin:0 0 1.1rem} .actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:.6rem} .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:14px 18px; border-radius:12px; font-weight:800; color:#fff; background:linear-gradient(90deg, var(--teal), var(--green)); box-shadow:var(--shadow); } .phone-line{font-weight:700; color:var(--ink)} .phone-line a{color:var(--teal); text-decoration:underline} .hero-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) } .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px} .stat{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px} .stat b{font-size:1.2rem} /* Steps */ .steps{padding:26px 0} .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px} .step{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px} .step h3{margin:.2rem 0 .4rem; font-size:1.05rem} .step p{margin:0; color:var(--muted)} /* Dashboard block with inline SVG chart */ .dash{padding:24px 0} .card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)} .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px} .kpi{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px} .kpi .label{color:var(--muted); font-size:.9rem} /* Social proof */ .proof{padding:26px 0} .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .quote{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px} .quote b{display:block; margin-bottom:.2rem} .metrics{display:flex; gap:16px; margin-top:.6rem} .pill{background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); color:var(--green-700); font-weight:800; padding:.35rem .6rem; border-radius:999px} /* Pricing */ .pricing{padding:26px 0} .price-box{display:grid; grid-template-columns:1.1fr .9fr; gap:16px} .price{background:linear-gradient(180deg, #f8fffe, #ffffff); border:1px solid var(--border); border-radius:var(--radius); padding:18px} .price h3{margin:.2rem 0 .4rem} .guarantee{background:#fff; border:1px dashed rgba(11,178,184,.45); border-radius:var(--radius); padding:18px} /* FAQ */ .faq{padding:26px 0} .faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px} .qa{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px} /* Final CTA */ .final{padding:28px 0 36px; text-align:center} .final .note{color:var(--muted)} /* Footer */ footer{border-top:1px solid var(--border); padding:18px 0; background:#fff} .foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} .trust{display:flex; gap:12px; flex-wrap:wrap; align-items:center} .trust .chip{border:1px solid var(--border); border-radius:999px; padding:.45rem .7rem; background:#fff; font-weight:700} /* Responsive */ @media (max-width: 960px){ .hero .wrap{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr 1fr} .quotes{grid-template-columns:1fr} .price-box{grid-template-columns:1fr} .faq-grid{grid-template-columns:1fr} .kpis{grid-template-columns:1fr} } :root{ --green:#16a34a; --teal:#0d9488; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff; --glass:0 10px 30px rgba(2,132,199,.08); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:#fff;color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial} a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1100px;margin:0 auto;padding:0 20px} /* Announcement bar */ .announce{background:var(--teal);color:#fff} .announce .inner{display:flex;gap:8px;justify-content:center;align-items:center;min-height:38px;font-weight:700} .announce a{color:#fff;text-decoration:underline} /* Header */ header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50} .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px} .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(22,163,74,.15)} nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0} nav a{color:var(--ink);padding:8px 10px;border-radius:10px} nav a[aria-current="page"]{background:rgba(13,148,136,.08)} .nav-cta{display:flex;justify-content:flex-end} .pill{display:inline-flex;align-items:center;gap:8px;background:#0ea5a3;color:#fff;border-radius:999px;padding:10px 16px;font-weight:800;box-shadow:var(--glass)} .pill:hover{text-decoration:none;filter:brightness(.97)} /* Hero */ .hero{background:linear-gradient(180deg,rgba(13,148,136,.08),rgba(22,163,74,.05));} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;padding:54px 0 38px} .tag{display:inline-block;background:#e6fffa;color:#04786f;border:1px solid rgba(13,148,136,.25);padding:8px 12px;border-radius:999px;font-weight:700} h1{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:14px 0 12px} .lead{color:var(--muted);font-size:19px;margin:0 0 18px;max-width:58ch} .btn{display:inline-flex;align-items:center;justify-content:center;background:#10b981;border:1px solid #10b981;color:#fff;padding:14px 18px;border-radius:14px;font-weight:800;box-shadow:var(--glass)} .btn:hover{filter:brightness(.97)} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px} .stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--glass)} .stat b{font-size:22px} .stat small{display:block;color:var(--muted);margin-top:4px} .why-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px 20px;box-shadow:0 20px 60px rgba(2,132,199,.08)} .why-card h3{margin:0 0 8px} .why-card ul{margin:0;padding-left:20px;color:#334155} .why-card li{margin:10px 0} /* Steps */ .section{padding:30px 0} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--glass)} .card b{display:block;margin-bottom:6px} .muted{color:var(--muted)} /* Results + chart */ .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px} .kpi{border:1px dashed #e2e8f0;border-radius:14px;padding:12px} .kpi b{display:block;margin-bottom:4px} .kpi small{display:block;color:var(--muted)} .chart{width:100%;height:180px} .chart path.line{stroke:url(#gradStroke);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round} .chart path.area{fill:url(#gradFill)} .chart .axis text{font-size:11px;fill:#64748b} .chart .axis line{stroke:#e5e7eb} /* Social proof */ .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .quote{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;box-shadow:var(--glass)} .badges{display:flex;gap:16px;margin-top:8px} .badge{display:grid;place-items:center;border:1px solid var(--border);border-radius:12px;padding:8px 10px;min-width:90px} /* Pricing */ .pricing{display:grid;grid-template-columns:1fr .9fr;gap:18px} .price{font-size:34px;font-weight:900} ul.clean{margin:10px 0 0;padding:0 0 0 18px} .note{font-size:13px;color:var(--muted);margin-top:8px} /* FAQ */ details{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff} details+details{margin-top:10px} summary{cursor:pointer;font-weight:800} /* Footer */ footer{border-top:1px solid var(--border);padding:22px 0 38px;color:#4b5563} /* Responsive */ @media (max-width:980px){ .nav{grid-template-columns:1fr auto 1fr;gap:10px} .hero .wrap{grid-template-columns:1fr;gap:20px} .hero-stats{grid-template-columns:1fr;gap:12px} .steps-grid{grid-template-columns:1fr 1fr} .kpis{grid-template-columns:1fr} .proof{grid-template-columns:1fr} .pricing{grid-template-columns:1fr} .nav-cta{display:none} } :root{ --green:#16a34a; --teal:#0d9488; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff; --glass:0 10px 30px rgba(2,132,199,.08); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:#fff;color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial} a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1100px;margin:0 auto;padding:0 20px} /* Announcement bar */ .announce{background:var(--teal);color:#fff} .announce .inner{display:flex;gap:8px;justify-content:center;align-items:center;min-height:38px;font-weight:700} .announce a{color:#fff;text-decoration:underline} /* Header */ header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50} .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px} .brand .logo{height:28px;width:auto;display:block} nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0} nav a{color:var(--ink);padding:8px 10px;border-radius:10px} nav a[aria-current="page"]{background:rgba(13,148,136,.08)} .nav-cta{display:flex;justify-content:flex-end} .pill{display:inline-flex;align-items:center;gap:8px;background:#0ea5a3;color:#fff;border-radius:999px;padding:10px 16px;font-weight:800;box-shadow:var(--glass)} .pill:hover{text-decoration:none;filter:brightness(.97)} /* Hero */ .hero{background:linear-gradient(180deg,rgba(13,148,136,.08),rgba(22,163,74,.05));} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;padding:54px 0 38px} .tag{display:inline-block;background:#e6fffa;color:#04786f;border:1px solid rgba(13,148,136,.25);padding:8px 12px;border-radius:999px;font-weight:700} h1{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:14px 0 12px} .lead{color:var(--muted);font-size:19px;margin:0 0 18px;max-width:58ch} .btn{display:inline-flex;align-items:center;justify-content:center;background:#10b981;border:1px solid #10b981;color:#fff;padding:14px 18px;border-radius:14px;font-weight:800;box-shadow:var(--glass)} .btn:hover{filter:brightness(.97)} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px} .stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--glass)} .stat b{font-size:22px} .stat small{display:block;color:var(--muted);margin-top:4px} .why-col{display:grid;gap:16px} .phone-fig{background:#fff;border:1px solid var(--border);border-radius:22px;padding:10px;box-shadow:0 20px 60px rgba(2,132,199,.08)} .why-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px 20px;box-shadow:0 20px 60px rgba(2,132,199,.08)} .why-card h3{margin:0 0 8px} .why-card ul{margin:0;padding-left:20px;color:#334155} .why-card li{margin:10px 0} /* Sections */ .section{padding:30px 0} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--glass)} .card b{display:block;margin-bottom:6px} .muted{color:var(--muted)} .icon{width:28px;height:28px;display:inline-block;vertical-align:middle} /* Results + chart */ .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px} .kpi{border:1px dashed #e2e8f0;border-radius:14px;padding:12px} .kpi b{display:block;margin-bottom:4px} .kpi small{display:block;color:var(--muted)} .chart{width:100%;height:180px} .chart path.line{stroke:url(#gradStroke);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round} .chart path.area{fill:url(#gradFill)} .chart .axis text{font-size:11px;fill:#64748b} .chart .axis line{stroke:#e5e7eb} /* Social proof */ .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .quote{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;box-shadow:var(--glass)} .badges{display:flex;gap:16px;margin-top:8px} .badge{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;min-width:110px} /* Pricing */ .pricing{display:grid;grid-template-columns:1fr .9fr;gap:18px} .price{font-size:34px;font-weight:900} ul.clean{margin:10px 0 0;padding:0 0 0 18px} .note{font-size:13px;color:var(--muted);margin-top:8px} /* FAQ */ details{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff} details+details{margin-top:10px} summary{cursor:pointer;font-weight:800} /* Footer */ footer{border-top:1px solid var(--border);padding:22px 0 38px;color:#4b5563} /* Responsive */ @media (max-width:980px){ .nav{grid-template-columns:1fr auto 1fr;gap:10px} .hero .wrap{grid-template-columns:1fr;gap:20px} .hero-stats{grid-template-columns:1fr;gap:12px} .steps-grid{grid-template-columns:1fr 1fr} .kpis{grid-template-columns:1fr} .proof{grid-template-columns:1fr} .pricing{grid-template-columns:1fr} .nav-cta{display:none} }
