/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root {
  --bg:       #f5f4f0;
  --panel:    #eceae4;
  --card:     #f0ede8;
  --text:     #1a1c26;
  --muted:    #5a5f78;
  --accent:   #3a66d8;
  --accent2:  #0e8a62;
  --border:   rgba(0,0,0,.10);
  --shadow:   0 10px 30px rgba(0,0,0,.10);
  --radius:   16px;

  --bg-gradient:
    radial-gradient(1200px 600px at 20% 0%, rgba(58,102,216,.10), transparent 60%),
    radial-gradient(900px  500px at 80% 10%, rgba(14,138,98,.08),  transparent 60%),
    var(--bg);

  --input-bg: rgba(255,255,255,.70);

  --promo-border: rgba(14,138,98,.35);
  --promo-bg:     rgba(14,138,98,.08);

  --rate-border: rgba(58,102,216,.25);
  --rate-bg:     rgba(58,102,216,.06);

  --callout-border: rgba(14,138,98,.30);
  --callout-bg:     rgba(14,138,98,.07);

  --nav-active-border: rgba(58,102,216,.35);
  --nav-active-bg:     rgba(58,102,216,.08);
  --nav-cta-border:    rgba(14,138,98,.35);
  --nav-cta-bg:        rgba(14,138,98,.10);

  --brand-mark-bg: rgba(14,138,98,.10);
  /* --brand-mark-bg: linear-gradient(135deg, rgba(58,102,216,.25), rgba(14,138,98,.15)); */

  --hero-button-bg: linear-gradient(135deg, rgba(58,102,216,.20), rgba(14,138,98,.14));
  --hero-button-border: rgba(58,102,216,.30);

  --header-bg: rgba(245,244,240,.82);

  --section-alt-bg: linear-gradient(180deg, transparent, rgba(0,0,0,.02), transparent);

  --quote-color: rgba(58,102,216,.55);

  --footer-link: var(--muted);
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #0b1220;
    --panel: #111a2e;
    --card:  #0f1830;
    --text:  #e7ecff;
    --muted: #aab3d6;
    --accent:  #7aa2ff;
    --accent2: #78f0c6;
    --border:  rgba(255,255,255,.10);
    --shadow:  0 10px 30px rgba(0,0,0,.35);

    --bg-gradient:
      radial-gradient(1200px 600px at 20% 0%, rgba(122,162,255,.18), transparent 60%),
      radial-gradient(900px  500px at 80% 10%, rgba(120,240,198,.12), transparent 60%),
      var(--bg);

    --input-bg: rgba(0,0,0,.18);

    --promo-border: rgba(120,240,198,.30);
    --promo-bg:     rgba(120,240,198,.08);

    --rate-border: rgba(122,162,255,.25);
    --rate-bg:     rgba(122,162,255,.06);

    --callout-border: rgba(120,240,198,.30);
    --callout-bg:     rgba(120,240,198,.07);

    --nav-active-border: rgba(122,162,255,.35);
    --nav-active-bg:     rgba(122,162,255,.08);
    --nav-cta-border:    rgba(120,240,198,.35);
    --nav-cta-bg:        rgba(120,240,198,.10);

    /* --brand-mark-bg: rgba(120,240,198,.10); */
    --brand-mark-bg: linear-gradient(135deg, rgba(122,162,255,.35), rgba(120,240,198,.20));

    --hero-button-bg: linear-gradient(135deg, rgba(122,162,255,.35), rgba(120,240,198,.22));
    --hero-button-border: rgba(122,162,255,.35);

    --header-bg: rgba(11,18,32,.72);

    --section-alt-bg: linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent);

    --quote-color: rgba(122,162,255,.65);

    --footer-link: var(--muted);
  }
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html {
  background: var(--bg-gradient);
  background-attachment: fixed;
}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: transparent;
  color: var(--text);
  line-height:1.55;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(1100px, calc(100% - 2rem));
  margin-inline:auto;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:#000; padding:.75rem 1rem; border-radius:10px;
  z-index:1000;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */
.site-header{
  position:sticky; top:0;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0;
  gap:1rem;
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px;
  background: var(--brand-mark-bg);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  font-size:1.25rem;
}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-tag{font-size:.9rem; color:var(--muted)}

.nav{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:flex-end}
.nav-link{
  color:var(--text);
  padding:.45rem .65rem;
  border-radius:10px;
  border:1px solid transparent;
}
.nav-link:hover{border-color:var(--border); text-decoration:none}
.nav-link.active{
  border-color: var(--nav-active-border);
  background: var(--nav-active-bg);
}
.nav-cta{
  border-color: var(--nav-cta-border);
  background:   var(--nav-cta-bg);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:1.5rem 0}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:2rem;
  align-items:start;
}
@media (max-width: 880px){
  .hero-inner{grid-template-columns:1fr}
}

h1{font-size:clamp(2rem, 3.2vw, 3rem); line-height:1.12; margin:.2rem 0 1rem}
h2{margin:.2rem 0 .75rem; font-size:1.35rem}
h3{margin:.2rem 0 .5rem; font-size:1.1rem}

.lead{color:var(--muted); font-size:1.3rem; max-width:60ch}
.section{padding:1.5rem 0}
.section.alt{background: var(--section-alt-bg)}
.section-tight{margin-top:1.5rem}

.hero-badges{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 1.2rem}
.badge{
  border:1px solid var(--border);
  background:rgba(128,128,128,.06);
  padding:.45rem .65rem;
  border-radius:999px;
  color:var(--text);
  font-size:.92rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin:1.2rem 0}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(128,128,128,.06);
  color:var(--text);
  font-weight:700;
  box-shadow: none;
}
.button:hover{background:rgba(128,128,128,.12); text-decoration:none}
.button.primary{
  background: var(--hero-button-bg);
  border-color: var(--hero-button-border);
  /* margin-top: 1rem; */
}
.button.ghost{background:transparent}
.button.full{width:100%}

/* ============================================================
   COMPONENTS
   ============================================================ */
.promo{
  margin-top:1rem;
  padding:.85rem 1rem;
  border-radius:12px;
  border:1px solid var(--promo-border);
  background: var(--promo-bg);
  color:var(--text);
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:1.1rem 1.1rem;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.grid-2-span{grid-column: span 2;}

@media (max-width: 880px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-2-span{grid-column: span 1;}
}

.panel{
  background: rgba(128,128,128,.04);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1rem;
}

.text-link{font-weight:700}
.muted{color:var(--muted)}

.facts{
  /* margin:.75rem 0 0; */
  margin: 0;
  display:grid; gap:.65rem;
}
.facts div{display:grid; gap:.15rem}
dt{color:var(--muted); font-size:.92rem}
dd{margin:0}

.rate-box{
  margin-top:1rem;
  padding:.85rem .9rem;
  border-radius:14px;
  border:1px solid var(--rate-border);
  background: var(--rate-bg);
}
.rate-line{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
}
.rate-label-30{color:var(--muted); font-weight:600}
.rate-value-30{font-size:1.2rem; font-weight:900}
.rate-label-other{color:var(--muted); font-size: smaller; font-weight: 300;}
.rate-value-other{font-size:smaller; font-weight:300;}

.rate-note{margin:.4rem 0 0; color:var(--muted); font-size:.92rem; text-align: center;}
.payment-note{margin:.2rem 0 0; color:var(--muted); font-size:.75rem; text-align: center; font-style: italic;}

.divider{
  border:0; height:1px;
  background: var(--border);
  margin:2rem 0;
}

.bullets{margin:.7rem 0 0; padding-left:1.1rem}
.bullets li{margin:.35rem 0}
.steps{margin:.7rem 0 0; padding-left:1.1rem}
.steps li{margin:.4rem 0}

.callout{
  margin:1.25rem 0;
  padding:1rem;
  border-radius:14px;
  border:1px solid var(--callout-border);
  background: var(--callout-bg);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns: 1fr;
  gap:1.2rem;
  align-items:start;
}
@media (max-width: 880px){
  .contact{grid-template-columns:1fr}
}

.contact-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
  margin-top:1rem;
}
.mini-card{
  border:1px solid var(--border);
  background: rgba(128,128,128,.03);
  border-radius:14px;
  padding:.9rem;
}
.mini-title{color:var(--muted); font-size:.9rem}
.mini-value{font-weight:900; font-size:1.05rem; display:inline-block; margin:.15rem 0}
.mini-sub{color:var(--muted); font-size:.95rem}

/* ============================================================
   FORM
   ============================================================ */
.form label{display:grid; gap:.35rem; margin:.75rem 0; grid-template-columns: 1fr 4fr;}
input, select, textarea{
  font-size: 1rem;
  width:100%;
  padding:.1rem .7rem;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--input-bg);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.checkbox{
  grid-template-columns: 18px 1fr;
  align-items:center;
}
.checkbox input{width:18px; height:18px}
.fineprint{color:var(--muted); font-size:.9rem; margin:.8rem 0 0}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--border);
  padding:1.2rem 0;
  color:var(--muted);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-links{display:flex; gap:.9rem}
.footer-links a{color:var(--footer-link)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.section-head { margin-bottom: 1rem; }

.testimonials-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
  margin-top:1rem;
}
@media (max-width: 880px){
  .testimonials-grid{ grid-template-columns: 1fr; }
}

.testimonial blockquote{
  margin:0;
  font-size:1.02rem;
  color:var(--text);
}
.testimonial blockquote::before{
  content:"\201C";
  color: var(--quote-color);
  font-size:2rem;
  line-height:0;
  vertical-align:-.35rem;
  margin-right:.15rem;
}
.testimonial blockquote::after{
  content:"\201D";
  color: var(--quote-color);
  font-size:2rem;
  line-height:0;
  vertical-align:-.35rem;
  margin-left:.15rem;
}

.testimonial figcaption{
  margin-top:.8rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .5rem;
  align-items:baseline;
  color:var(--muted);
  font-size:.92rem;
}
.testimonial .who{ font-weight:800; color: var(--text); opacity:.92; }
.testimonial .where{ color:var(--muted); }

.testimonial-note{
  margin-top:1rem;
}