/* ============================================================
   LearnMate — premium landing styles
   Palette = the logo's true brand colours:
     Learn #021d6a (navy, primary) · M #6a3ec5 (purple)
     A #fe477d (pink) · T #febf12 (gold) · E #0ba8b0 (teal)
   Deep navy is the premium foundation; the brain-emblem hues
   (purple / pink / gold / teal) are the playful accents.
   ============================================================ */

:root {
  /* primary navy ramp */
  --navy:    #021d6a;   /* brand primary  (Learn) */
  --navy-d:  #01133f;   /* deepest, for gradients */
  --navy-d2: #010d2e;
  --navy-l:  #0a2f97;   /* lighter navy */
  --navy-l2: #1746c2;

  /* brand accents */
  --purple:  #6a3ec5;   /* M */
  --pink:    #fe477d;   /* A */
  --gold:    #febf12;   /* T */
  --gold-d:  #d99c00;   /* gold for text/contrast on light */
  --gold-s:  #ffe08a;
  --teal:    #0ba8b0;   /* E */

  /* neutrals (cool paper to sit under navy) */
  --paper:   #F6F7FB;
  --paper2:  #EDEFF7;
  --paper3:  #DCE0EE;
  --white:   #FFFFFF;
  --ink:     #141729;
  --ink2:    #353A52;
  --ink3:    #6E7390;

  --shadow-sm: 0 4px 18px rgba(2,29,106,.08);
  --shadow:    0 14px 50px rgba(2,29,106,.16);
  --shadow-lg: 0 30px 80px rgba(2,29,106,.26);

  --radius:    18px;
  --radius-lg: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink2);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display { font-family: 'Playfair Display', Georgia, serif; color: var(--navy); }

a { text-decoration: none; }

.serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── kicker / eyebrow ── */
.kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--purple);
}
.kicker.on-dark { color: var(--gold); }

/* ── buttons ── */
.btn {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: .68rem 1.55rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: translateY(1px); }

/* primary CTA = brand gold (T), navy text */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: var(--navy);
  border: none;
  box-shadow: 0 8px 22px rgba(254,191,18,.38);
}
.btn-gold:hover { color: var(--navy-d); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(254,191,18,.5); }

/* secondary on light = navy ghost */
.btn-ghost-green {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--paper3);
}
.btn-ghost-green:hover { border-color: var(--navy); color: var(--navy); background: var(--white); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.38);
}
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.7); }

.btn-lg { padding: .85rem 2rem; font-size: 1.02rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
.lm-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(246,247,251,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.lm-nav.scrolled {
  border-color: var(--paper3);
  box-shadow: var(--shadow-sm);
}
.lm-nav .navbar-brand img { height: 42px; width: auto; }
.lm-nav .nav-link {
  font-weight: 500;
  color: var(--ink2);
  margin: 0 .35rem;
  position: relative;
}
.lm-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .5rem; right: .5rem; bottom: .15rem;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  border-radius: 2px;
}
.lm-nav .nav-link:hover { color: var(--navy); }
.lm-nav .nav-link:hover::after { transform: scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(254,191,18,.18), transparent 60%),
    radial-gradient(820px 460px at -8% 108%, rgba(11,168,176,.20), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(106,62,197,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-d2) 0%, var(--navy) 58%, var(--navy-l) 135%);
  color: rgba(255,255,255,.82);
  overflow: hidden;
}
.hero::before {  /* warm glow accent */
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(254,71,125,.16), transparent 65%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

.hero h1 {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-sub {
  color: rgba(255,255,255,.74);
  font-size: 1.08rem;
  max-width: 33rem;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
}
.hero-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(254,191,18,.28); }

/* hero image stack */
.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 6px solid rgba(255,255,255,.92);
}
.hero-badge {
  position: absolute;
  background: var(--white);
  color: var(--navy);
  border-radius: 16px;
  padding: .75rem 1rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 600;
  font-size: .88rem;
}
.hero-badge .ic {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.1rem; color: var(--white);
  flex-shrink: 0;
}
.hero-badge small { display: block; font-weight: 400; color: var(--ink3); font-size: .74rem; }
.hero-badge.b1 { top: 1.2rem; left: -1.6rem; }
.hero-badge.b2 { bottom: 1.4rem; right: -1.4rem; }

@media (max-width: 991px) {
  .hero-badge.b1 { left: .4rem; }
  .hero-badge.b2 { right: .4rem; }
}

/* wave divider into paper */
.hero-wave { display: block; width: 100%; height: auto; margin-top: -1px; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
  background: var(--white);
  border-bottom: 1px solid var(--paper2);
}
.stat .n {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--navy);
  line-height: 1;
}
.stat .l { font-size: .82rem; color: var(--ink3); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section { padding: 5rem 0; }
.section-head h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
}
.lead-muted { color: var(--ink3); font-size: 1.04rem; }

/* feature cards */
.feature-card {
  background: var(--white);
  border: 1px solid var(--paper2);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--paper3); }
.feature-ic {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 1.1rem;
}
.feature-card h3 { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--navy); margin-bottom: .4rem; }
.feature-card p { font-size: .92rem; color: var(--ink3); margin: 0; }

/* accent fills — drawn straight from the logo letters */
.fill-green  { background: linear-gradient(135deg, var(--navy-l), var(--navy)); }   /* primary navy */
.fill-gold   { background: linear-gradient(135deg, var(--gold), var(--gold-d)); }   /* T */
.fill-teal   { background: linear-gradient(135deg, #16c6cf, var(--teal)); }         /* E */
.fill-purple { background: linear-gradient(135deg, #8659da, var(--purple)); }       /* M */
.fill-pink   { background: linear-gradient(135deg, #ff6f98, var(--pink)); }         /* A */
.fill-sky    { background: linear-gradient(135deg, var(--navy-l2), var(--navy-l)); }

/* ============================================================
   SHOWCASE (image + copy)
   ============================================================ */
.showcase { background: var(--paper2); }
.showcase-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  border: 6px solid var(--white);
}
.check-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .8rem; color: var(--ink2); }
.check-list li i { color: var(--teal); font-size: 1.15rem; margin-top: .15rem; flex-shrink: 0; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.6rem 1.7rem;
  height: 100%;
  position: relative;
  border: 1px solid var(--paper2);
}
.step-n {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-l), var(--navy));
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  box-shadow: 0 6px 16px rgba(2,29,106,.28);
}
.step h3 { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--navy); }
.step p { font-size: .92rem; color: var(--ink3); margin: 0; }

/* ============================================================
   PUBLISHERS BAND
   ============================================================ */
.publishers {
  background:
    radial-gradient(760px 380px at 110% 0%, rgba(254,191,18,.16), transparent 60%),
    radial-gradient(620px 420px at -5% 110%, rgba(106,62,197,.30), transparent 62%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-l) 120%);
  color: rgba(255,255,255,.8);
  border-radius: var(--radius-lg);
  padding: 3rem 2.6rem;
}
.publishers h2 { color: var(--white); }
.mini-stat .n { font-family: 'Playfair Display', serif; color: var(--gold); font-weight: 700; font-size: 1.6rem; }
.mini-stat .l { font-size: .8rem; color: rgba(255,255,255,.62); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-band {
  background:
    radial-gradient(620px 320px at 0% 0%, rgba(11,168,176,.22), transparent 55%),
    radial-gradient(620px 320px at 100% 100%, rgba(254,71,125,.18), transparent 55%),
    linear-gradient(160deg, var(--navy-d) 0%, var(--navy) 100%);
  color: rgba(255,255,255,.82);
  text-align: center;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* ============================================================
   FOOTER
   ============================================================ */
.lm-footer { background: var(--navy-d); color: rgba(255,255,255,.6); padding: 3rem 0 1.6rem; }
.lm-footer img { height: 40px; filter: brightness(0) invert(1); opacity: .92; }
.lm-footer a { color: rgba(255,255,255,.6); transition: color .18s ease; }
.lm-footer a:hover { color: var(--gold); }
.lm-footer .tag { font-family: 'Playfair Display', serif; font-style: italic; color: var(--gold); }
.footer-rule { border-top: 1px solid rgba(255,255,255,.12); }

/* ============================================================
   COMING SOON PAGE
   ============================================================ */
.coming {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(254,191,18,.18), transparent 60%),
    radial-gradient(760px 480px at -5% 110%, rgba(106,62,197,.30), transparent 60%),
    radial-gradient(680px 460px at 60% 120%, rgba(11,168,176,.18), transparent 60%),
    linear-gradient(160deg, var(--navy-d2) 0%, var(--navy) 60%, var(--navy-l) 135%);
  color: rgba(255,255,255,.8);
  overflow: hidden;
  text-align: center;
}
.coming .logo-mark { height: 64px; margin-bottom: 2rem; }
.coming h1 { color: var(--white); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.1; }
.coming h1 em { font-style: italic; color: var(--gold); }
.coming .sub { color: rgba(255,255,255,.72); font-size: 1.1rem; max-width: 38rem; margin: 1.2rem auto 0; }
.coming-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  padding: .45rem 1rem; border-radius: 999px;
  font-size: .8rem; letter-spacing: .04em; color: var(--gold); font-weight: 600;
  margin-bottom: 1.8rem;
}
.coming .float {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); opacity: .55;
}
.coming .float.f1 { width: 16px; height: 16px; background: var(--teal);   top: 22%; left: 14%; }
.coming .float.f2 { width: 22px; height: 22px; background: var(--pink);   top: 70%; left: 22%; }
.coming .float.f3 { width: 14px; height: 14px; background: var(--gold);   top: 30%; right: 18%; }
.coming .float.f4 { width: 20px; height: 20px; background: var(--purple); bottom: 18%; right: 14%; }

/* notify form */
.notify {
  max-width: 26rem; margin: 2.2rem auto 0;
  display: flex; gap: .6rem; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); padding: .4rem; border-radius: 999px;
}
.notify input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--white); padding: .4rem 1rem; font-size: .95rem;
}
.notify input::placeholder { color: rgba(255,255,255,.5); }