*,
*:before,
*::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
      --blue-900: #0b1f3b; /* deep navy text */
      --blue-700: #0e3a8a; /* primary dark */
      --blue-500: #1e90ff; /* bright blue */
      --lime-400: #a3e635; /* lime */
      --lime-500: #84cc16; /* darker lime */
      --orange-400: #fb923c; /* orange accent */
      --lemon-300: #fde047; /* lemon accent */
      --ink: #102a43;
      --slate: #475569;
      --muted: #64748b;
      --bg: var(--lime-400);
      --card: #ffffff;
      --ring: #0e3a8a33;
      --radius: 14px;
      --shadow-1: 0 10px 25px rgba(2, 6, 23, .07);
      --shadow-2: 0 24px 48px rgba(2, 6, 23, .12);
      --maxw: 1100px;
    }

    @media (prefers-color-scheme: dark) {:root { --bg: var(--lime-400);
        --card: #0f172a;
        --ink: #e2e8f0;
        --slate: #cbd5e1;
        --muted: #94a3b8;
        --ring: #1e90ff44;
        --shadow-1: 0 10px 25px rgba(0,0,0,.35);
        --shadow-2: 0 24px 48px rgba(0,0,0,.45);
      }
    }

    /* Reset-ish */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--ink); background: var(--bg); line-height: 1.6; }
    img { max-width: 100%; display: block; }
    a { color: var(--blue-700); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .container { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: 1rem; }
    .grid { display: grid; gap: 1.25rem; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap:.5rem; border-radius: calc(var(--radius) - 4px); padding: .9rem 1.2rem; font-weight: 700; letter-spacing: .2px; border: 2px solid transparent; box-shadow: var(--shadow-1); transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
    .btn:focus { outline: none; box-shadow: 0 0 0 4px var(--ring); }
    .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); text-decoration: none; }
    .btn-primary { background: #fff; color: var(--blue-900); border-color: var(--lime-500); }
    .btn-primary:hover { background: #fff; border-color: var(--blue-500); }
    .btn-ghost { background: transparent; color: var(--blue-500); border-color: var(--blue-500); }
    .badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; padding:.35rem .65rem; border-radius:999px; background: linear-gradient(90deg,var(--lemon-300),var(--orange-400)); color:#111827; font-weight:700; box-shadow: var(--shadow-1); }
    .section { padding: 4.5rem 0; }
    .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.25rem; }
    .muted { color: var(--muted); }
    .kicker { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 800; }
    .h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5rem 0; }
    .h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem 0; }
    .h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); margin: 0; }
    .lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--slate); }

    /* Header & Nav */
    .skip { position:absolute; inset-inline-start:1rem; inset-block-start:-40px; background: var(--lemon-300); color: #111827; padding:.5rem .75rem; border-radius:8px; transition: top .2s ease; z-index:100; }
    .skip:focus { top: 1rem; }

    header { position: sticky; top: 0; z-index: 50; background: color-mix(in lab, var(--bg) 85%, white 15%); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in lab, var(--bg), #000 10%); }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
    .brand { display:flex; align-items:center; gap:.75rem; font-weight:900; color: var(--blue-700); }
    .brand .logo { width: 36px; height: 36px; background: conic-gradient(from 45deg, var(--lime-400), var(--lemon-300), var(--orange-400), var(--lime-400)); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); box-shadow: var(--shadow-1); }
    .menu a { padding:.6rem .8rem; border-radius: 10px; font-weight:700; color: var(--ink); }
    .menu a:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
    .menu { display:flex; align-items:center; gap:.25rem; }
    .mobile-toggle { display:none; }

    @media (max-width: 880px) {
      .menu { display:none; position: absolute; inset-inline: 0; top: 64px; background: var(--card); box-shadow: var(--shadow-2); padding: .75rem; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
      .menu.open { display:grid; grid-template-columns: 1fr; }
      .mobile-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:2px solid var(--blue-500); color: var(--blue-500); background: transparent; }
      .mobile-toggle:focus { outline:none; box-shadow: 0 0 0 4px var(--ring); }
    }
    /* Pop up */
    .popup {
      background-color: #fde047;
      width: 450px;
      padding: 30px 40px;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      border-radius: 8px;
    }


    /* Hero */
    .hero { position: relative; overflow: clip; }
    .hero-wrap { display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
    .hero .octagon-bg { position:absolute; inset:auto -10% -40% auto; width: 62vmin; height: 62vmin; background: radial-gradient(120px 160px at 40% 40%, var(--lemon-300), transparent 70%), conic-gradient(from 0deg, #fff0, #fff0 260deg, var(--blue-500) 0 360deg); opacity:.18; filter: blur(1px) saturate(120%); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
    .hero .cta-row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1rem; }
    .hero .badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }

    @media (max-width: 980px) { .hero-wrap { grid-template-columns: 1fr; } }

    /* Feature blocks */
    .features { grid-template-columns: repeat(3,1fr); }
    @media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

    /* Week grid */
    .weeks { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 1024px) { .weeks { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 680px) { .weeks { grid-template-columns: 1fr; } }

    /* Testimonials */
    .quote { display:grid; grid-template-columns: auto 1fr; gap:.75rem; align-items:start; }
    .quote mark { background: linear-gradient(90deg,var(--lemon-300),#fff0); padding: .1rem .35rem; border-radius:6px; }
    .quote .avatar { width:42px; height:42px; border-radius:999px; background: linear-gradient(135deg, var(--blue-500), var(--lime-400)); box-shadow: var(--shadow-1); }

    /* FAQ */
    details { background: var(--card); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-1); }
    details + details { margin-top: .75rem; }
    summary { cursor: pointer; font-weight: 800; color: var(--ink); }
    summary:focus { outline: none; }
    summary::-webkit-details-marker { display:none; }

    /* Footer */
    footer { padding: 2.5rem 0; color: var(--muted); border-top: 1px solid color-mix(in lab, var(--bg), #000 10%); }

    /* Utility */
    .center { text-align:center; }
    .stack-xs > * + * { margin-top: .35rem; }
    .stack-s > * + * { margin-top: .6rem; }
    .stack > * + * { margin-top: 1rem; }
    .stack-l > * + * { margin-top: 1.5rem; }
    .row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
    .muted-bg { background: color-mix(in lab, var(--card) 80%, var(--lemon-300) 20%); }
    .accent-edge { border-left: 6px solid var(--orange-400); padding-left: .9rem; }

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }