:root {
  --bg: #ffffff;
  --text: #0b1f1f;
  --muted: #4a5a5a;
  --card: #f5fbfb;
  --line: #dbe7e7;
  --teal: #039CA1;
  --deep: #022D2D;
  --lime: #D5FB31;
  --magenta: #D62051;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(2,45,45,.10);
  --shadow2: 0 10px 24px rgba(2,45,45,.10);
  --maxw: 1180px;
  --pad: 20px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 90% -20%, rgba(213,251,49,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(3,156,161,.16), transparent 55%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

.skip-link {
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  left: var(--pad); top: var(--pad); width:auto; height:auto;
  background: var(--deep); color: #fff; padding: 10px 12px; border-radius: 10px; z-index: 9999;
}

.topbar{
  font-size:14px; color:var(--muted);
  border-bottom:1px solid rgba(219,231,231,.9);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
}
.topbar .row{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:10px 0}
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:#fff}
.pill .dot{width:9px; height:9px; border-radius:999px; background:var(--teal); box-shadow:0 0 0 4px rgba(3,156,161,.16)}
.pill strong{color:var(--deep)}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(219,231,231,.9);
}
.header .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: conic-gradient(from 220deg, var(--lime), var(--teal), var(--magenta), var(--lime));
  box-shadow: 0 14px 30px rgba(214,32,81,.12), 0 14px 30px rgba(3,156,161,.12);
}
.brand span{font-size:18px}
.nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nav a{
  padding:9px 10px; border-radius:12px; color:var(--deep);
}
.nav a.active, .nav a:hover{background: rgba(3,156,161,.10); text-decoration:none}
.nav .cta{background: var(--deep); color:#fff}
.nav .cta:hover{background:#041f1f}

.menuBtn{display:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px}
@media (max-width: 940px){
  .nav{display:none}
  .menuBtn{display:inline-flex}
  .nav.open{display:flex; width:100%; padding:10px 0 6px; border-top:1px solid rgba(219,231,231,.9)}
  .header .row{flex-wrap:wrap}
}

.hero{padding:34px 0 16px}
.heroGrid{display:grid; grid-template-columns: 1.25fr .85fr; gap:18px; align-items:stretch}
@media (max-width: 980px){.heroGrid{grid-template-columns:1fr}}

.card{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(219,231,231,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.heroCard{padding:22px}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--deep)}
.kicker .spark{width:10px; height:10px; border-radius:999px; background: var(--lime)}
h1{margin:12px 0 10px; font-size:44px; line-height:1.05; letter-spacing:-.5px}
@media (max-width: 520px){h1{font-size:36px}}
.sub{color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 16px}

.toggle{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 6px 0 14px}
.toggle button{
  border:1px solid var(--line); background:#fff; color:var(--deep);
  padding:10px 12px; border-radius: 999px; cursor:pointer; font-weight:700;
}
.toggle button.active{border-color: rgba(3,156,161,.6); background: rgba(3,156,161,.10)}

.formRow{display:flex; gap:10px; flex-wrap:wrap}
input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
}
input:focus, textarea:focus, select:focus{border-color: rgba(3,156,161,.7); box-shadow:0 0 0 4px rgba(3,156,161,.15)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius: 14px; border:1px solid rgba(2,45,45,.14);
  background: var(--deep); color:#fff; font-weight:800; cursor:pointer; box-shadow: var(--shadow2);
}
.btn.secondary{background:#fff; color:var(--deep)}
.btn.secondary:hover{background: rgba(3,156,161,.08)}
.btn:hover{filter: brightness(.98)}
.smallPrint{font-size:12px; color: var(--muted); margin-top:10px}

.sideCard{padding:18px; background: linear-gradient(180deg, rgba(3,156,161,.14), rgba(213,251,49,.10));}
.sideCard h3{margin:0 0 10px; font-size:18px}
.badgeRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: 14px; background:#fff; border:1px solid rgba(219,231,231,.9);
}
.badge svg{width:18px; height:18px}

.section{padding:18px 0}
.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin: 0 0 12px}
.sectionHead h2{margin:0; font-size:26px; letter-spacing:-.2px}
.sectionHead p{margin:0; color:var(--muted)}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}
.planCard{padding:16px; background: var(--card); border:1px solid rgba(219,231,231,.95)}
.planTop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.planCard h3{margin:0; font-size:18px}
.tag{font-size:12px; padding:6px 10px; border-radius:999px; background: rgba(214,32,81,.10); border:1px solid rgba(214,32,81,.20); color: #7a1230; font-weight:800}
.tag.teal{background: rgba(3,156,161,.10); border-color: rgba(3,156,161,.22); color: #064b4d}
.price{font-size:34px; font-weight:900; letter-spacing:-.6px; margin:12px 0 2px}
.price small{font-size:14px; color:var(--muted); font-weight:700}
.bullets{margin:10px 0 0; padding-left:18px; color:var(--deep)}
.bullets li{margin:6px 0; color:var(--muted)}
.planFoot{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center}
.note{font-size:12px; color:var(--muted)}

.callout{padding:16px; border:1px dashed rgba(3,156,161,.45); background: rgba(255,255,255,.72)}
.callout .row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.callout strong{font-size:18px}
.callout a.tel{font-weight:900; color: var(--deep)}
.callout .meta{color: var(--muted); font-size:13px}

.tiles{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){.tiles{grid-template-columns:1fr}}
.tile{padding:16px; background:#fff; border:1px solid rgba(219,231,231,.95)}
.tile h3{margin:0 0 6px}
.tile p{margin:0; color:var(--muted)}
.tile .link{display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-weight:900; color: var(--deep)}
.arrow{display:inline-block; transform: translateY(1px)}

.accordion{display:grid; gap:10px}
details{
  background:#fff; border:1px solid rgba(219,231,231,.95); border-radius: 16px; padding: 12px 14px;
}
summary{cursor:pointer; font-weight:900; color:var(--deep)}
details p{color:var(--muted); margin:10px 0 0; line-height:1.55}

.footer{margin-top:22px; border-top:1px solid rgba(219,231,231,.95); background: rgba(255,255,255,.72)}
.footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:14px; padding: 22px 0}
@media (max-width: 980px){.footer .cols{grid-template-columns:1fr}}
.footer h4{margin:0 0 8px}
.footer a{display:block; padding:6px 0; color:var(--muted)}
.footer a:hover{color: var(--deep)}
.footer .bottom{border-top:1px solid rgba(219,231,231,.95); padding: 14px 0; color: var(--muted); font-size:13px}
.footer .brandline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between}
.footer .legal{max-width: 900px; line-height:1.45}