/* =========================================================
   JackFrost Coaching — Unified, Mobile-First Styles
   ========================================================= */

/* ===== Design Tokens ===== */
:root{
    /* Core palette */
    --bg:#0a0a0a;
    --panel:#111215;
    --ink:#0f1115;
    --text:#ffffff;
    --muted:rgba(255,255,255,.70);
    --muted2:rgba(255,255,255,.60);
    --line:rgba(255,255,255,.12);
    --line2:rgba(255,255,255,.08);
  
    /* Accents (both set to your blue per request) */
    --fuchsia:#2286c8;
    --emerald:#2286c8;
    --sky:#0ea5e9;
  
    --white:#fff;
    --black:#000;
  
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius-xl:1.25rem;
    --radius-2xl:1.75rem;
    --radius-3xl:2rem;
  
    --max:72rem; /* 1152px */
  
    /* NAV vars */
    --nav-height: 64px;
    --nav-bg: rgba(14,17,19,.78);
    --nav-border: var(--line);
    --nav-blur: 10px;
    --nav-radius: 14px;
    --nav-link: rgba(255,255,255,.92);
    --nav-link-dim: rgba(255,255,255,.72);
    --nav-underline: currentColor;
  
    /* Global gutters */
    --gutter: clamp(16px, 4vw, 32px);
  }
  
  /* Safe-area support for iOS notches */
  @supports (padding-left: env(safe-area-inset-left)) {
    :root{
      --gutter-left:  calc(var(--gutter) + env(safe-area-inset-left));
      --gutter-right: calc(var(--gutter) + env(safe-area-inset-right));
    }
  }
  @supports not (padding-left: env(safe-area-inset-left)) {
    :root{
      --gutter-left:  var(--gutter);
      --gutter-right: var(--gutter);
    }
  }
  
  /* Tiny bump on very small screens */
  @media (max-width: 400px){
    :root{ --gutter: clamp(18px, 6vw, 28px); }
  }
  
  /* ===== Base ===== */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .container{
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter-left) var(--gutter-right);
  }
  
  /* Utils */
  .muted{color:var(--muted)}
  .muted.sm{font-size:.95rem}
  .center{text-align:center}
  .txt-gradient{
    background:linear-gradient(90deg,var(--fuchsia),var(--emerald),var(--fuchsia));
    -webkit-background-clip:text;background-clip:text;color:transparent
  }
  .sm{font-size:.95rem}
  i{display:inline-block;vertical-align:middle}
  
  /* ===== Brand ===== */
  .brand{
    display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text)
  }
  .brand__logo{
    height:40px; width:auto; display:block; /* unified size */
  }
  .brand--sm .brand__logo{ height:28px; }
  .brand__name{
    font-weight:700; font-size:1rem; letter-spacing:.04em; color:rgba(255,255,255,.92)
  }
  
  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.9rem 1.1rem;border-radius:1rem;font-weight:700;
    border:1px solid var(--line);text-decoration:none;
    transition:background .2s ease, color .2s ease, transform .08s ease, border-color .2s ease;
    background:rgba(255,255,255,.06);color:var(--text)
  }
  .btn:active{transform:scale(.98)}
  .btn i{width:1.1rem;height:1.1rem}
  
  /* Primary → your blue, with proper contrast (white text) */
  .btn--light{background:var(--fuchsia);color:#fff;border-color:transparent}
  .btn--light:hover{background:#1c73aa}
  
  /* Secondary ghost */
  .btn--ghost{background:rgba(255,255,255,.06)}
  .btn--ghost:hover{background:rgba(255,255,255,.12)}
  
  /* Dark/ink */
  .btn--dark{background:var(--white);color:#0b0b0b}
  .btn--ink{background:#0b0b0b;color:#fff;border-color:#0b0b0b}
  
  .btn--block{display:flex;justify-content:center;width:100%}
  .btn--sm{padding:.55rem .8rem;font-weight:600;border-radius:.9rem}
  
  /* ===== NAV — desktop polish + mobile drawer ===== */
  .nav{
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg); backdrop-filter: blur(var(--nav-blur));
    border-bottom: 1px solid var(--nav-border);
  }
  .nav__row{
    min-height: var(--nav-height);
    display: flex; align-items: center; justify-content: space-between;
  }
  
  /* Desktop links */
  .nav__links{
    display: none; align-items: center; gap: 1.4rem;
  }
  .nav__links a{
    position: relative;
    color: var(--nav-link);
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    padding: .4rem 0;
    opacity: .95;
  }
  
  /* Underline hover / active (desktop only) */
  .nav__links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
    background: linear-gradient(90deg,var(--fuchsia),var(--emerald));
    transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
  }
  .nav__links a:is(:hover,.is-active)::after{ transform: scaleX(1); }
  
  /* CTA button in nav */
  .nav__links .btn{
    padding:.55rem .8rem; border-radius:.75rem; font-weight:800;
  }
  
  /* Toggle (mobile) */
  .nav__toggle{
    display: inline-flex; align-items: center; gap:.5rem;
    border: 1px solid var(--nav-border);
    background: rgba(229,220,214,.06);
    color: var(--text);
    padding: .6rem .75rem;
    border-radius: .7rem;
    min-height: 44px;
  }
  
  /* Desktop breakpoint */
  @media (min-width: 768px){
    .nav__links{ display: flex; }
    .nav__toggle{ display: none; }
  }
  
  /* Mobile drawer behavior */
  .nav::after{
    content:"";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  @media (max-width: 767px){
    .nav__links{
      position: fixed;
      left: 16px; right: 16px;
      top: calc(var(--nav-height) + 10px);
      display: grid;
      gap: .6rem;
      background: rgba(14,17,19,.92);
      border: 1px solid var(--nav-border);
      border-radius: var(--nav-radius);
      padding: .8rem;
      transform: translateY(-10px);
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    .nav__links a{
      font-size: 1.05rem; padding: .9rem 0;
      color: var(--nav-link);
    }
    .nav__links .btn{ margin-top: .25rem; }
  
    .nav.is-open::after{
      opacity: 1; pointer-events: auto;
    }
    .nav.is-open .nav__links{
      transform: translateY(0);
      opacity: 1; pointer-events: auto;
    }
  
    /* Hide animated underline on mobile list for cleaner look */
    .nav__links a::after{ display: none; }
  }
  
  /* Focus styles */
  .nav__links a:focus-visible,
  .nav__toggle:focus-visible{
    outline: 2px solid var(--emerald);
    outline-offset: 3px;
    border-radius: 8px;
  }
  
  /* Active link color (set via JS scroll-spy) */
  .nav__links a.is-active{ color:#fff; }
  
  /* Ensure anchored sections don't hide under sticky nav */
  section[id]{ scroll-margin-top: calc(var(--nav-height) + 12px); }
  
  /* ===== Hero ===== */
  .hero{position:relative;overflow:hidden}
  .hero__bg .blob{
    position:absolute;border-radius:50%;filter:blur(64px);opacity:.7;pointer-events:none
  }
  .blob--fuchsia{width:40rem;height:40rem;left:-22rem;top:-20rem;background:radial-gradient(ellipse at center, color-mix(in oklab, var(--fuchsia) 55%, transparent), transparent 60%)}
  .blob--emerald{width:42rem;height:42rem;right:-22rem;bottom:-24rem;background:radial-gradient(ellipse at center, color-mix(in oklab, var(--emerald) 55%, transparent), transparent 60%)}
  .hero__bg .glow{position:absolute;inset:0;background:conic-gradient(at 120% 10%, transparent, color-mix(in oklab, var(--emerald) 30%, transparent), transparent 30%)}
  .hero__topband{position:absolute;left:0;right:0;top:-2.2rem;height:3.5rem;background:color-mix(in oklab, var(--fuchsia) 18%, transparent);transform:rotate(2deg)}
  
  .hero__grid{display:grid;gap:2.25rem;padding:6rem 0 3rem}
  @media (min-width:768px){.hero__grid{grid-template-columns:1fr 1fr;padding:8rem 0 4rem}}
  
  .pill{
    display:inline-flex;gap:.5rem;align-items:center;
    border:1px solid var(--line);background:rgba(255,255,255,.05);
    padding:.45rem .7rem;border-radius:999px;font-size:.85rem
  }
  .hero__title{font-size:clamp(2.4rem,5.5vw,3.75rem);line-height:1.05;margin:.6rem 0 0}
  .hero__cta{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
  .hero__badges{display:flex;gap:1.25rem;margin-top:1rem;color:var(--muted2);align-items:center;flex-wrap:wrap}
  .hero__badges span{display:inline-flex;gap:.5rem;align-items:center}
  
  .hero__panel{position:relative}
  .hero__panel-glow{
    position:absolute;inset:-1.2rem;z-index:-1;border-radius:2rem;
    background:linear-gradient(135deg,var(--fuchsia),var(--emerald));
    opacity:.3;filter:blur(30px)
  }
  .panel{
    border:1px solid var(--line);background:#0f1014;
    border-radius:2rem;padding:1.2rem;box-shadow:var(--shadow)
  }
  .feature-card{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:1rem;border-radius:1rem;margin:.6rem 0}
  .feature-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.9rem;background:rgba(255,255,255,.06)}
  .feature-title{font-weight:700}
  .feature-text{color:var(--muted);font-size:.95rem}
  
  .hero__bottomcut{display:block;position:relative;height:2.2rem}
  .hero__bottomcut::before{content:"";position:absolute;inset:0;background:var(--bg);transform:skewY(-3deg)}
  .panel i,.pill i,.hero__badges i{width:1rem;height:1rem}
  
  /* ===== Stats ===== */
  .stats{position:relative;background:#131417}
  .stats__bg{position:absolute;inset:0;opacity:.10;background:
    radial-gradient(40rem 40rem at 10% 10%, var(--emerald), transparent),
    radial-gradient(35rem 35rem at 90% 50%, var(--fuchsia), transparent)}
  .stats__grid{position:relative;display:grid;gap:1rem;padding:2.2rem 0;text-align:center}
  @media (min-width:640px){.stats__grid{grid-template-columns:repeat(3,1fr)}}
  .kpi{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:1.25rem;padding:1.2rem}
  .kpi__num{font-size:2rem;font-weight:800;letter-spacing:.02em}
  .kpi__label{color:var(--muted);font-size:.95rem;margin-top:.25rem}
  
  /* (Gutter already applied to .container; keep extra on very small if needed) */
  @media (max-width:640px){
    .stats__grid{ padding-left: var(--gutter-left); padding-right: var(--gutter-right); }
  }
  
  /* ===== Stripes ===== */
  .stripe{position:relative;color:#fff}
  .stripe--fuchsia{background:var(--fuchsia)}
  .stripe--emerald{background:var(--emerald)}
  .stripe--sky{background:var(--sky)}
  .stripe__row{display:flex;align-items:center;gap:1rem;padding:1rem 0}
  .stripe__icon{display:inline-flex;background:rgba(255,255,255,.15);padding:.4rem;border-radius:.75rem}
  .stripe__title{font-weight:700;font-size:1.1rem}
  .stripe__rule{display:none;height:1px;background:rgba(255,255,255,.25);flex:1}
  .stripe__text{font-size:.95rem}
  @media (min-width:768px){.stripe__row{gap:1.2rem}.stripe__rule{display:block}}
  
  /* ===== Services ===== */
  .services{padding:4.5rem 0}
  .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.2rem;gap:1rem}
  .section-head h2{font-size:clamp(1.8rem,4.2vw,2.4rem);font-weight:800}
  .services__grid{display:grid;gap:1rem;margin-top:1rem;grid-template-columns:1fr}
  @media (min-width:768px){.services__grid{grid-template-columns:repeat(5,1fr)}}
  .tile{border:1px solid var(--line);background:#0d0e12;border-radius:1.75rem;padding:1rem;position:relative}
  .tile--visual{grid-column:span 1}
  @media (min-width:768px){.tile--visual{grid-column:span 3}}
  .tile__glow{position:absolute;inset:0;pointer-events:none}
  .tile__glow::before,.tile__glow::after{
    content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.25
  }
  .tile__glow::before{width:26rem;height:26rem;left:-16rem;top:-16rem;background:var(--fuchsia)}
  .tile__glow::after{width:22rem;height:22rem;right:-14rem;bottom:-14rem;background:var(--emerald)}
  .tile__media{aspect-ratio:16/9;border:1px solid var(--line);border-radius:1.25rem;background:#0a0a0a}
  .card{border:1px solid var(--line);background:#0f1014;border-radius:1.5rem;padding:1.1rem}
  .card__icon{display:inline-flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:.9rem;background:rgba(255,255,255,.06);margin-bottom:.6rem}
  .card__title{font-weight:700}
  .checklist{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
  .checklist li{display:flex;gap:.5rem;align-items:center;color:rgba(255,255,255,.85)}
  .checklist i{width:1rem;height:1rem}
  
  /* ===== Results ===== */
  .results{position:relative;padding:4.5rem 0}
  .results__bg{position:absolute;inset:0;background:linear-gradient(90deg,var(--fuchsia),var(--emerald));opacity:.20}
  .results .section-head{position:relative}
  .results__grid{position:relative;display:grid;gap:1rem;margin-top:1rem}
  @media (min-width:768px){.results__grid{grid-template-columns:repeat(3,1fr)}}
  .tcard{border:1px solid var(--line);background:#0f1014;border-radius:1.5rem;padding:1.1rem}
  .stars i{width:1rem;height:1rem;color:#fbbf24;fill:currentColor}
  .tcard__name{color:var(--muted2);font-size:.9rem;margin-top:.5rem}
  
  /* ===== Transform banner ===== */
  .transform{position:relative}
  .transform__bg{position:absolute;inset:0;background:linear-gradient(90deg,var(--fuchsia),var(--emerald));opacity:.20}
  .transform__card{
    position:relative;overflow:hidden;border:1px solid var(--line);background:#0f1014;border-radius:1.75rem;
    padding:1.4rem 1.2rem;margin:0 auto
  }
  @media (min-width:768px){
    .transform__card{display:flex;align-items:center;justify-content:space-between;padding:2rem}
  }
  .transform__card::after{
    content:"";position:absolute;inset:0;background:#0f1014;
    clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
    pointer-events:none;opacity:.45
  }
  .transform__copy h3{font-size:clamp(1.4rem,3.2vw,1.9rem);margin:0}
  
  /* ===== Pricing ===== */
  .pricing{padding:4.5rem 0}
  .toggle{
    margin:1rem auto 0;display:inline-flex;gap:.3rem;align-items:center;
    border:1px solid var(--line);background:rgba(255,255,255,.06);padding:.2rem .2rem;border-radius:999px
  }
  .toggle__btn{
    background:transparent;border:none;color:#fff;padding:.45rem .8rem;border-radius:999px;cursor:pointer
  }
  .toggle__btn.is-active{background:#fff;color:#0b0b0b}
  .chip{margin-left:.4rem;background:rgba(34,197,94,.22);color:#b6f2c8;border-radius:.35rem;padding:.05rem .25rem;font-size:.65rem}
  .pricing__grid{display:grid;gap:1rem;margin-top:1rem}
  @media (min-width:768px){.pricing__grid{grid-template-columns:repeat(3,1fr)}}
  .pcard{border:1px solid var(--line);background:#0f1014;border-radius:1.5rem;padding:1.1rem;position:relative}
  .pcard--highlight{background:#fff;color:#0b0b0b;border-color:#fff}
  .pcard--highlight .checklist li{color:#0b0b0b}
  .pcard__tag{position:absolute;left:1.1rem;top:-.7rem;background:var(--fuchsia);color:#fff;border-radius:.75rem;padding:.15rem .45rem;font-size:.75rem;font-weight:700}
  .pcard__label{opacity:.8;font-size:.95rem}
  .pcard__price{display:flex;align-items:flex-end;gap:.4rem;margin:.3rem 0 .6rem}
  .pcard__num{font-size:2.2rem;font-weight:800}
  .pcard__period{font-size:.9rem;opacity:.65;padding-bottom:.2rem}
  .pricing__foot{margin-top:1rem;text-align:center;color:var(--muted2)}
  .pricing__foot i{width:1rem;height:1rem}
  
  /* ===== FAQ ===== */
  .faq{padding:4.5rem 0}
  .faq__list{max-width:48rem;margin:0 auto;display:grid;gap:.8rem}
  .faq__item{border:1px solid var(--line);background:#0f1014;border-radius:1rem;padding:.85rem 1rem}
  .faq__item summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem
  }
  .faq__item summary::-webkit-details-marker{display:none}
  .faq__item .chev{transition:.2s}
  .faq__item[open] .chev{transform:rotate(180deg)}
  .faq__item p{color:var(--muted);margin:.6rem 0 0}
  
  /* ===== Contact ===== */
  .contact{position:relative;padding:4.5rem 0}
  .contact__grid{position:relative;display:grid;gap:1rem}
  @media (min-width:768px){.contact__grid{grid-template-columns:1fr 2fr}}
  .contact__card{border:1px solid var(--line);background:#0f1014;border-radius:1.5rem;padding:1.1rem}
  .contact__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
  .contact__list i{width:1rem;height:1rem}
  .disclaimer{margin-top:.9rem;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:1rem;padding:.8rem;color:var(--muted);font-size:.85rem}
  .form{border:1px solid var(--line);background:#0f1014;border-radius:1.5rem;padding:1.1rem}
  .field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
  .field--full{grid-column:1/-1}
  label{font-size:.92rem;color:rgba(255,255,255,.85)}
  .req{color:#ffd1ff}
  input,textarea{
    width:100%;background:#0a0a0a;color:#fff;border:1px solid var(--line);
    border-radius:.9rem;padding:.65rem .75rem;outline:none
  }
  input:focus,textarea:focus{border-color:rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(34,197,94,.25)}
  .form__status{min-height:1.2rem;margin-top:.5rem;font-size:.95rem}
  
  /* ===== Footer ===== */
  .footer{border-top:1px solid var(--line);background:#0a0a0a}
  .footer__grid{display:grid;gap:1.5rem;padding:2rem 0}
  @media (min-width:768px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
  .foot__title{font-weight:700;font-size:.95rem;color:rgba(255,255,255,.85);margin-bottom:.5rem}
  .foot__links{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
  .foot__links a{color:var(--muted);text-decoration:none}
  .foot__links a:hover{color:#fff}
  .footer__bar{border-top:1px solid var(--line);text-align:center;font-size:.8rem;color:rgba(255,255,255,.55);padding:1rem 0}
  
  /* ===== Global Edge Gutters for full-bleed rows ===== */
  .edge-pad{ padding-inline: var(--gutter-left) var(--gutter-right); }
  
  .hero__grid,
  .stats__grid,
  .stripe__row,
  .services__grid,
  .results__grid,
  .transform__card,
  .pricing__grid,
  .faq__list,
  .contact__grid,
  .footer__grid,
  .section-head{
    padding-inline: var(--gutter-left) var(--gutter-right);
  }
  
  /* Optional: if a section lacks a .container child, pad the section itself */
  @supports(selector(:has(*))){
    section:not(:has(> .container)),
    header.nav:not(:has(> .container)),
    footer.footer:not(:has(> .container)){
      padding-inline: var(--gutter-left) var(--gutter-right);
    }
  }

  /* Fix: make decorative hero background non-interactive */
.hero__bg,
.hero__bg * {
  pointer-events: none;
}

/* (Optional) ensure hero content is above any backgrounds in odd stacking cases */
.hero { position: relative; }
.hero .container { position: relative; z-index: 1; }