/* ============================================================
   HOME REFRESH — homepage-only polish layer
   Loaded after index.css on index.html only.
   Modern visual refresh + mobile + trust/conversion tweaks.
   ============================================================ */

:root{
  --shadow-sm:0 1px 2px rgba(30,42,61,.06),0 4px 12px rgba(30,42,61,.06);
  --shadow-md:0 2px 4px rgba(30,42,61,.06),0 12px 28px rgba(30,42,61,.12);
  --shadow-lg:0 4px 8px rgba(30,42,61,.08),0 24px 48px rgba(30,42,61,.16);
  --radius:16px;
}

/* ---------- Buttons ---------- */
.btn{border-radius:12px;letter-spacing:.01em}
.btn:focus-visible{outline:3px solid rgba(91,142,207,.55);outline-offset:2px}
.btn-gold{background:linear-gradient(160deg,#fbd45c,#f5c842);box-shadow:0 6px 18px rgba(245,200,66,.35),inset 0 1px 0 rgba(255,255,255,.5);font-weight:700}
.btn-gold:hover{background:linear-gradient(160deg,#fde07a,#f8cf55);box-shadow:0 10px 26px rgba(245,200,66,.45),inset 0 1px 0 rgba(255,255,255,.55)}

/* ---------- Nav ---------- */
.navbar{box-shadow:0 4px 18px rgba(10,16,30,.22);background:rgba(30,42,61,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nphone{display:inline-flex;align-items:center;gap:.4rem;min-height:42px;padding:.5rem 1rem;border-radius:12px;border:1px solid rgba(245,200,66,.35);background:rgba(245,200,66,.1);transition:background .2s,border-color .2s}
.nphone:hover{background:rgba(245,200,66,.2);border-color:rgba(245,200,66,.6)}
.nphone::before{content:'📞';font-size:.85em}

/* ---------- Hero ---------- */
/* <picture> becomes the absolute background layer so it stays out of the hero grid,
   exactly as the bare <img> did before (prevents the text stack shifting columns) */
.hero picture{position:absolute;inset:0;z-index:0}
.hero-glass{border-radius:18px;box-shadow:0 24px 60px rgba(7,12,24,.35)}
.hero-trust-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hero-trust-chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;background:rgba(20,28,45,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(245,200,66,.28);color:rgba(255,255,255,.94);font-size:.8rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hero-book-btn{border-radius:14px;font-size:1.05rem;padding:.95rem 2.4rem}
.hero-price-top{border-radius:12px}

/* ---------- Strip ---------- */
.strip{background:linear-gradient(90deg,#2c4a7a,#3a5f95 45%,#4a6fa5)}
.si2{font-size:.85rem}

/* ---------- Sections ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:'';width:26px;height:3px;border-radius:2px;background:var(--gold)}
.sec-h2{letter-spacing:-.015em}

/* ---------- Quick links strip ---------- */
.quick-links{background:var(--surf);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.1rem 4rem}
.quick-links-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.quick-links-label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.quick-links-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.quick-links-nav a{display:inline-flex;align-items:center;min-height:36px;padding:.35rem .85rem;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--green2);font-size:.84rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.quick-links-nav a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.quick-links-nav .quick-links-all{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.quick-links-nav .quick-links-all:hover{background:var(--ink2);border-color:var(--ink2);color:var(--gold)}
@media (max-width:768px){
  .quick-links{padding:1rem}
  .quick-links-nav a{min-height:40px}
}

/* ---------- Proof cards ---------- */
.proof-wrap{gap:1.1rem;margin-top:1.6rem}
.proof-card{position:relative;border-radius:var(--radius);padding:1.45rem 1.5rem;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s;overflow:hidden}
.proof-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-lt));opacity:0;transition:opacity .22s}
.proof-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(245,200,66,.55)}
.proof-card:hover::before{opacity:1}
.proof-card h3{font-size:1.14rem}
.proof-card p{margin-bottom:.85rem}
.proof-card a{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:.42rem .95rem;border-radius:999px;background:var(--surf);border:1px solid var(--border);color:var(--green2);font-weight:700;font-size:.85rem;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.proof-card a::after{content:'→';transition:transform .2s}
.proof-card a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.proof-card a:hover::after{transform:translateX(3px)}
.proof-shift{color:var(--green2)}

/* ---------- Levels / age cards ---------- */
.agrid{gap:1.4rem}
.ac{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.ac:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.ac-bot{border-radius:0 0 var(--radius) var(--radius)}
.ac-top{position:relative;overflow:hidden}
.ac-top::after{content:'';position:absolute;top:-40%;right:-25%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.aamt{color:var(--green2)}

/* ---------- How it works ---------- */
.hiw{background:linear-gradient(160deg,#1a2434,#1e2a3d 55%,#243450)}
.hgrid{gap:1.2rem}
.hs{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:1.5rem 1.4rem;transition:transform .22s,border-color .22s,background .22s}
.hs:hover{transform:translateY(-4px);border-color:rgba(245,200,66,.35);background:rgba(255,255,255,.07)}
.hs .sn{color:rgba(245,200,66,.4)}
.hs p{color:rgba(255,255,255,.62)}

/* ---------- FAQ (collapsed accordion) ---------- */
.faq-grid{display:flex;flex-direction:column;gap:.65rem;margin-top:2rem;max-width:820px}
details.faq-item{border-radius:var(--radius);padding:0;border-left:4px solid var(--gold);box-shadow:var(--shadow-sm);transition:box-shadow .2s;overflow:hidden}
details.faq-item:hover{box-shadow:var(--shadow-md)}
details.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.3rem;min-height:52px;user-select:none}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'+';flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surf);border:1px solid var(--border);color:var(--green2);font-weight:700;font-size:1.1rem;line-height:1;transition:transform .2s,background .2s,color .2s}
details.faq-item[open] summary::after{content:'−';background:var(--gold);border-color:var(--gold);color:var(--ink)}
details.faq-item summary h3{font-size:1rem;line-height:1.4;margin:0}
details.faq-item summary:focus-visible{outline:3px solid rgba(91,142,207,.55);outline-offset:-3px}
details.faq-item p{padding:0 1.3rem 1.15rem;color:var(--muted);font-size:.92rem;line-height:1.65}
details.faq-item a{color:var(--green2);font-weight:700}

/* ---------- Reviews ---------- */
.reviews-rating{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;padding:.55rem 1rem;border-radius:999px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-size:.92rem;color:var(--muted)}
.reviews-rating .stars{color:var(--gold);letter-spacing:.1em;font-size:1rem}
.reviews-rating strong{color:var(--ink);font-family:'Fraunces',serif;font-size:1.05rem}
.tte{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.review-link{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .9rem;border-radius:999px;background:var(--surf);border:1px solid var(--border);transition:background .2s,border-color .2s}
.review-link:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.review-dot{width:12px;height:12px}
.areas-banner{border-radius:var(--radius);box-shadow:var(--shadow-sm);border-left:4px solid var(--green)}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(160deg,#243450,#2c3a52 55%,#1e2a3d);position:relative;overflow:hidden}
.ctaband::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -20%,rgba(245,200,66,.16),transparent 55%);pointer-events:none}
.ctaband>*{position:relative}
.ctaband h2{font-size:2.6rem}
.ctaph{font-size:1.9rem;display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.6rem;border-radius:16px;background:rgba(245,200,66,.12);border:1px solid rgba(245,200,66,.35);transition:background .2s,transform .2s}
.ctaph::before{content:'📞';font-size:.8em}
.ctaph:hover{background:rgba(245,200,66,.22);transform:translateY(-2px)}
.ctaband .cta-form-btn{display:inline-flex;margin-top:1.2rem}

/* ---------- Mobile polish ---------- */
@media (max-width:768px){
  .nlinks a{min-height:44px;padding:.65rem 1rem;font-size:.82rem}
  .nphone{min-height:48px}
  .hero-trust-chips{gap:.45rem}
  .hero-trust-chips li{font-size:.74rem;padding:.4rem .7rem;background:rgba(245,200,66,.1);border-color:rgba(245,200,66,.22)}
  .hero-stack{box-shadow:0 22px 48px rgba(10,16,30,.32)}
  .proof-card a{min-height:44px}
  .review-link{min-height:44px}
  .ctaband h2{font-size:1.9rem}
  .ctaph{font-size:1.45rem}
  .reviews-rating{font-size:.85rem}
}
@media (max-width:480px){
  .hero-trust-chips li{font-size:.7rem}
  .ctaph{width:100%;justify-content:center}
  .ctaband .cta-form-btn{width:100%;justify-content:center;min-height:48px}
}