/* ============================================================================
   BolEnglish page shell — brand tokens + unified header + site footer.
   Extracted from mastery.html so any static page can wear the same brand.
   Pair with /css/learn-nav.css for the .bnav menu.
   ========================================================================== */
:root{
    /* BolEnglish brand palette */
    --purple:#7c3aed;        /* primary brand purple */
    --purple-2:#6d28d9;      /* deeper purple */
    --purple-3:#a78bfa;      /* soft lavender */
    --green:#ec4899;         /* accent (brand pink) */
    --green-bright:#f472b6;  /* lighter pink */
    --green-glow:#fbbf24;    /* bright highlight (sunshine yellow) */
    --ink:#1f1b3a;
    --muted:#6b6786;
    --bg:#f7f5ff;
    --card:#FFFFFF;
    --line:#ece8fb;
    --footer:#4c1d95;
    --footer-2:#2e1065;
    --shadow:0 10px 30px rgba(124,58,237,.10);
    --shadow-lg:0 22px 50px rgba(124,58,237,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display{font-family:'Inter',sans-serif;line-height:1.08}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .pp{color:var(--purple)}
  .gg{color:var(--green)}

  
/* ---------- TOP BAR ---------- */
  .topbar{position:sticky;top:0;z-index:50;background:transparent;padding-top:16px}
  .topbar .wrap{display:flex;align-items:center;gap:22px;max-width:1216px;width:calc(100% - 2rem);margin:0 auto;
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:11px 22px;
    box-shadow:0 14px 38px -16px rgba(124,58,237,.34);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6)}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
  .brand .logo{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;font-size:20px;
    background:linear-gradient(135deg,var(--purple),var(--green));box-shadow:0 8px 20px -6px rgba(124,58,237,.55)}
  .brand .tx{display:flex;flex-direction:column;line-height:1.04}

/* ---------- brand mark ----------
   The logo chip now holds the cat's face instead of an emoji. The image fills
   the chip and inherits its rounding, so the gradient behind only shows while
   the picture is still loading. */
  .brand .logo, .sf-logo { overflow: hidden; padding: 0; }
  .brand .logo .brandcat, .sf-logo .brandcat { width: 100%; height: 100%;
    object-fit: cover; border-radius: inherit; display: block; }

  .brand .nm{font-family:'Fredoka';font-weight:700;font-size:20px;
    background:linear-gradient(135deg,var(--purple),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .brand .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  .top-right{display:flex;align-items:center;gap:12px;margin-left:auto}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Inter';font-weight:700;font-size:14px;color:var(--ink);
    background:#f3f0ff;border:0;border-radius:9999px;padding:9px 14px;cursor:pointer;transition:.2s}
  .lang-btn:hover{background:#e9e3ff}
  .nav-cta{font-family:'Inter';font-weight:600;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--purple),var(--green));
    padding:10px 20px;border-radius:9999px;text-decoration:none;transition:.25s;border:none;cursor:pointer;box-shadow:0 8px 20px -6px rgba(124,58,237,.5)}
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -6px rgba(124,58,237,.6)}

  
/* ---------- SITE FOOTER (pixel-match to index.html footer) ---------- */
  .site-footer{margin-top:40px}
  .site-footer .fwrap{max-width:1280px;margin:0 auto;padding:0 24px 40px}
  .sf-card{background:color-mix(in srgb,#ffffff 78%,transparent);background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(124,58,237,.12);box-shadow:0 8px 24px -8px rgba(124,58,237,.18);border-radius:24px;padding:32px}
  @media(min-width:768px){.sf-card{padding:48px}}
  .sf-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}
  @media(min-width:768px){.sf-grid{grid-template-columns:repeat(4,1fr)}.sf-brand{grid-column:span 2}}
  .sf-id{display:flex;align-items:center;gap:8px;margin-bottom:16px}
  .sf-logo{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;font-size:24px;background:linear-gradient(135deg,#7c3aed,#ec4899)}
  .sf-name{font-family:'Fredoka';font-weight:700;font-size:18px;background:linear-gradient(135deg,#7c3aed,#ec4899,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sf-tag{font-size:14px;color:#5b5878;max-width:384px;margin-bottom:20px;line-height:1.55}
  .sf-news{display:flex;gap:8px;max-width:384px}
  .sf-news input{flex:1;padding:12px 16px;border-radius:12px;border:1px solid rgba(124,58,237,.12);background:#f3f0ff;color:#1f1b3a;font-size:14px;font-family:'Inter';outline:none}
  .sf-news input:focus{border-color:#7c3aed}
  .sf-news button{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:0;border-radius:14px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 8px 22px -8px rgba(124,58,237,.6);transition:transform .2s ease,box-shadow .2s ease}
  .sf-news button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px -10px rgba(236,72,153,.65)}
  .sf-news button svg{width:16px;height:16px}
  .sf-msg{font-size:12px;margin-top:8px;color:#10b981}
  .sf-col h4{font-family:'Inter';font-weight:700;font-size:16px;color:#1f1b3a;margin:0 0 12px}
  .sf-col a{display:block;font-size:14px;color:#5b5878;text-decoration:none;margin-bottom:8px;transition:color .18s ease}
  .sf-col a:hover{color:#7c3aed}
  .sf-bottom{display:flex;flex-direction:column;gap:16px;align-items:center;padding-top:24px;border-top:1px solid rgba(124,58,237,.12)}
  @media(min-width:640px){.sf-bottom{flex-direction:row;justify-content:space-between}}
  .sf-copy{font-size:12px;color:#5b5878;text-align:center}
  .sf-copy a{font-weight:600;text-decoration:underline;color:inherit}
  .sf-copy a:hover{color:#7c3aed}
  .sf-social{display:flex;gap:12px}
  .sf-social a{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:#1f1b3a;background:#f3f0ff;transition:transform .2s ease}
  .sf-social a:hover{transform:scale(1.1)}
  .sf-social svg{width:16px;height:16px}

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:880px){
    .hero .grid{grid-template-columns:1fr;gap:34px}
    .badge{top:14px;right:14px;width:104px;height:104px}
    .badge .num .b{font-size:34px}
    .pillars{grid-template-columns:1fr}
    .cl-list{grid-template-columns:1fr}
    .cta .grid{grid-template-columns:1fr;gap:26px}
    .cta .right{border-left:none;border-top:1px solid rgba(255,255,255,.18);padding-left:0;padding-top:24px}
    .divider h2{white-space:normal;font-size:18px}
  }
  @media(max-width:520px){
    .offer{flex-wrap:wrap;gap:12px}
    .cl-head{flex-direction:column;align-items:flex-start}
    .cl-meter{text-align:left}
    .nav-cta{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }
  :focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}

/* base */
body{ margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--bg); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }