/* ==========================================================================
   Moina Mel — Kuhipaat
   Design system ported from papumba.com:
     · exact colour tokens (--papumba / --energy / --malibu / …)
     · Plus Jakarta Sans, letter-spacing -.03em
     · pill buttons that fill from the bottom on hover (.c-cta-bg wipe)
     · rotate(-2deg) solid-colour title banners
     · sticky 500vh scroll-pinned stat section
     · GSAP + SplitType word/letter reveals (see js/main.js)
   ========================================================================== */

/* ------------------------------------------------ 1. tokens -------------- */
:root {
  /* brand */
  --papumba:              #ff9c00;
  --papumba-light:        #fdb10e;
  --papumba-dark:         #f88f02;
  --active:               #e88500;

  /* neutrals */
  --black:                #0f0f0f;
  --white:                #ffffff;
  --concrete:             #f3f3f3;
  --mercury:              #e7e7e7;
  --alto:                 #d7d7d7;
  --silver-chalice:       #a4a4a4;

  /* accents (each with its darker "chunky shadow" pair) */
  --energy:               #fbe05d;
  --lightning:            #fdc412;
  --galliano:             #e4ae0d;
  --flamingo:             #f5663e;
  --flamingo-shadow:      #e94b1f;
  --lavender-rose:        #fea4e2;
  --lavender-rose-shadow: #e57bc4;
  --malibu:               #73bcf3;
  --malibu-shadow:        #4498d7;
  --amethyst:             #d366e0;
  --amethyst-shadow:      #b034be;
  --yellow-green:         #68dc18;
  --yellow-green-shadow:  #54c332;

  --success:              #72be44;
  --error:                #e93f1c;

  --ease-out:             cubic-bezier(.22, .61, .36, 1);
  --header-h:             5.5rem;
}

/* ------------------------------------------------ 2. reset / base -------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis drives scrolling once JS is up; native smooth would fight it */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background-color: var(--white);
  color: var(--black);
  font-family: "Plus Jakarta Sans", "Noto Sans Bengali", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: -.03em;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--papumba);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 999;
  padding: .75rem 1.25rem;
  border-radius: 64px;
  background: var(--black);
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------ 3. typography ---------- */
h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7.5vw, 5.75rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.08; }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.03em; line-height: 1.15; }

p { margin: 0; }

/* papumba's .c-subtitle-1 — the big centred stat headline */
.c-subtitle-1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 3.125rem;
  letter-spacing: -.03em;
  text-align: center;
}

.c-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 500;
}

.c-eyebrow {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--energy);
  padding: .625rem .875rem .5rem;
  border-radius: 4px;
  transform: rotate(-2deg);
}
.c-eyebrow.cc-orange { background: var(--papumba); }
.c-eyebrow.cc-pink   { background: var(--lavender-rose); }
.c-eyebrow.cc-blue   { background: var(--malibu); }
.c-eyebrow.cc-white  { background: var(--white); }

.c-center { text-align: center; }

/* rotate(-2deg) banner — papumba's signature highlight block */
.c-title-wrapper.cc-banner {
  display: inline-block;
  background: var(--papumba);
  padding: .5rem 1.25rem .75rem;
  transform: rotate(-2deg);
}
.c-title-wrapper.cc-banner.cc-energy { background: var(--energy); }

/* ------------------------------------------------ 4. bilingual ----------- */
/* Only one language is ever rendered; the other is removed from flow. */
html[data-lang="en"] .as,
html[data-lang="as"] .en { display: none; }

html[data-lang="as"] body,
html[data-lang="as"] h1,
html[data-lang="as"] h2,
html[data-lang="as"] h3 {
  font-family: "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -.01em;
}
/* Assamese script needs more vertical room than Latin */
html[data-lang="as"] h1 { line-height: 1.25; }
html[data-lang="as"] h2 { line-height: 1.3; }
html[data-lang="as"] .c-subtitle-1 { line-height: 1.35; }

/* ------------------------------------------------ 5. layout -------------- */
.c-container {
  width: 100%;
  max-width: 82.75rem;
  margin-inline: auto;
  padding-inline: 2rem;
}
.c-container.cc-8cols  { max-width: 60.25rem; }
.c-container.cc-10cols { max-width: 72.75rem; }

.c-section {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
  position: relative;
}
.c-section.cc-concrete { background: var(--concrete); }
.c-section.cc-lightning { background: var(--lightning); }

/* text hidden until SplitType has run, so characters never flash unsplit */
html.js [text-split] { opacity: 0; }

/* ------------------------------------------------ 6. buttons ------------- */
/* Structure mirrors papumba exactly:
   <a class="c-button"><span class="c-cta-bg cc-orange"></span>
                       <span class="c-cta-label">…</span></a>
   The .c-cta-bg sits at the bottom with zero height and grows to fill. */
.c-cta-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.c-cta-wrapper.cc-links { justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.c-cta-wrapper.cc-form  { flex-direction: column; width: 100%; max-width: 24.0625rem; margin-inline: auto; }

.c-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 1.5rem 4rem;
  border: 0;
  border-radius: 64px;
  background-color: var(--black);
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: -.02em;
  text-align: center;
  transition: border-color .3s, color .3s, transform .18s var(--ease-out);
}
.c-button:active { background-color: var(--active); transform: scale(.97); }

.c-cta-bg {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background-color: var(--concrete);
  transition: height .4s var(--ease-out);
}
.c-cta-bg.cc-orange { background-color: var(--papumba); }
.c-cta-bg.cc-black  { background-color: var(--black); }
.c-cta-bg.cc-energy { background-color: var(--energy); }

.c-button:hover .c-cta-bg,
.c-button:focus-visible .c-cta-bg { height: 100%; }

.c-cta-label {
  position: relative;
  z-index: 1;
  transition: color .3s;
}
/* the yellow wipe is too light to keep a white label legible */
.c-button:hover .c-cta-bg.cc-energy ~ .c-cta-label,
.c-button:focus-visible .c-cta-bg.cc-energy ~ .c-cta-label { color: var(--black); }

/* — store badges ——————————————————————————————— */
/* Secondary to .c-button on purpose: same pill silhouette, roughly half the
   height, so the hero keeps one dominant CTA instead of four equal ones. */
.c-store-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.c-store-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1.375rem .5rem 1.125rem;
  border: 2px solid var(--black);
  border-radius: 64px;
  background-color: var(--black);
  color: var(--white);
  text-align: left;
  transition: transform .18s var(--ease-out), border-color .3s, box-shadow .3s;
}
.c-store-badge:hover,
.c-store-badge:focus-visible {
  transform: translateY(-3px);
  border-color: var(--papumba);
  box-shadow: 0 10px 24px rgba(15, 15, 15, .18);
}
.c-store-badge:active { transform: translateY(0) scale(.97); }

/* Apple inherits the label colour; the Play mark keeps its own four fills. */
.c-store-badge_glyph {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  fill: currentColor;
}

.c-store-badge_text {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  line-height: 1;
}
.c-store-badge_kicker {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.c-store-badge_name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* — variants —————————————————————————————————— */
/* Outline buttons don't wipe — papumba recolours border + label to orange. */
.c-button.cc-secondary,
.c-button.cc-secondary-white {
  background-color: transparent;
  border: 2px solid var(--black);
}
.c-button.cc-secondary       { color: var(--black); }
.c-button.cc-secondary-white { border-color: var(--white); color: var(--white); }

.c-button.cc-secondary:hover,
.c-button.cc-secondary-white:hover {
  border-color: var(--papumba);
  color: var(--papumba);
}
.c-button.cc-secondary:active,
.c-button.cc-secondary-white:active {
  background-color: transparent;
  border-color: var(--active);
  color: var(--active);
}
.c-button.cc-secondary .c-cta-bg,
.c-button.cc-secondary-white .c-cta-bg { display: none; }

.c-button.cc-white {
  background-color: var(--white);
  color: var(--black);
}

.c-button.cc-small {
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1rem;
}
.c-button.cc-submit { min-height: 4.875rem; width: 100%; }

/* circular arrow button — papumba's scroll cue */
.c-arrow-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--black);
  border-radius: 100%;
  color: var(--black);
  transition: background-color .3s, color .3s, border-color .3s;
}
.c-arrow-button:hover { background-color: var(--black); color: var(--white); }
.c-arrow-button.cc-on-dark { border-color: var(--white); color: var(--white); }
.c-arrow-button.cc-on-dark:hover { background-color: var(--white); color: var(--black); }
.c-arrow-button .icon { width: 1.25rem; height: 1.25rem; }

.c-arrow-wrapper {
  position: absolute;
  inset: auto 0 1rem;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}
.c-arrow-animation { animation: arrow-bob 1.8s ease-in-out infinite; }
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ------------------------------------------------ 7. header / nav -------- */
.c-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color .35s, box-shadow .35s, padding .35s;
  padding-block: 1.25rem;
}
.c-nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(15, 15, 15, .08);
  padding-block: .75rem;
}

.c-nav_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.c-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.c-logo_icon { width: 8rem; height: 8rem; }
.c-logo_text {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.c-logo_icon {
  display: inline-block;
  width: 8rem;
  height: 8rem;
}

.c-logo_icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.c-nav_menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.c-nav_link { position: relative; padding-block: .25rem; }
.c-nav_link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  border-radius: 2px;
  background: var(--papumba);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.c-nav_link:hover::after { transform: scaleX(1); }

.c-nav_actions { display: flex; align-items: center; gap: .75rem; flex: none; }

/* language pill toggle */
.c-lang-toggle {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 2px solid var(--black);
  border-radius: 64px;
  background: var(--white);
}
.c-lang-pill {
  padding: .375rem .75rem;
  border-radius: 64px;
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--black);
  transition: background-color .3s, color .3s;
}
html[data-lang="en"] .c-lang-pill[data-active-lang="en"],
html[data-lang="as"] .c-lang-pill[data-active-lang="as"] {
  background: var(--papumba);
  color: var(--black);
}

.c-nav_menu-button { display: none; }
.c-nav_menu-button_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.125rem;
  height: 1.875rem;
}
.c-nav_menu-button_wrapper span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--black);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.c-nav.nav-open .c-nav_menu-button_wrapper span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.c-nav.nav-open .c-nav_menu-button_wrapper span:nth-child(2) { opacity: 0; }
.c-nav.nav-open .c-nav_menu-button_wrapper span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------ 8. hero --------------- */
.c-hero.cc-home {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding-top: 9rem;
  /* reserves the strip the absolutely-positioned .c-arrow-wrapper sits in,
     so hero content can never grow underneath the scroll cue */
  padding-bottom: 5.5rem;
  display: flex;
  align-items: center;
  background:
    radial-gradient(60rem 40rem at 78% 20%, rgba(255, 156, 0, .16), transparent 62%),
    radial-gradient(48rem 34rem at 12% 78%, rgba(115, 188, 243, .18), transparent 60%),
    var(--white);
}

.c-hero_video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.c-hero_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.c-hero_mascot-wrapper {
  position: absolute;
  inset: 0;
  max-width: 90rem;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  pointer-events: none;
  z-index: 2;
}

.c-hero_inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.c-hero_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 43.25rem;
  text-align: center;
}

.c-hero_tags {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--papumba-dark);
  text-transform: uppercase;
}

.c-hero_sub {
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: 34rem;
}

/* mascot waving in the corner, like papumba's "Coco" */
.c-hero_mascot-wrapper {
  position: absolute;
  inset: 0;
  max-width: 90rem;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  pointer-events: none;
}
.c-mascot-wave {
  position: absolute;
  inset: auto 2rem 3rem auto;
  width: 15rem;
  max-width: 18.75rem;
  animation: mascot-wave 3.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes mascot-wave {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-10px); }
}

/* ------------------------------------------------ 9. marquee ------------- */
/* papumba tilts its marquee rows: .c-marquees { transform: rotate(-8deg) } */
.c-marquee-section {
  padding-block: 4.5rem;
  overflow: hidden;
  background: var(--concrete);
}
.c-marquees {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: rotate(-3deg);
}
.c-marquee {
  display: flex;
  width: 100%;
}
/* No gap on the row: the seam between copies has to be the same 1rem as the
   gaps inside one, or translating by -100% leaves a visible jump. */
.c-marquee_content {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;
  animation: marquee-left 32s linear infinite;
}
.c-marquee.cc-reverse .c-marquee_content { animation-name: marquee-right; }
@keyframes marquee-left  { from { transform: translateX(0); }     to { transform: translateX(-100%); } }
@keyframes marquee-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.c-marquee_item {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: none;
  padding: .75rem 1.5rem;
  border-radius: 64px;
  background: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}
.c-marquee_item .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.c-marquee_item.cc-orange { background: var(--papumba); }
.c-marquee_item.cc-energy { background: var(--energy); }
.c-marquee_item.cc-malibu { background: var(--malibu); }
.c-marquee_item.cc-pink   { background: var(--lavender-rose); }
.c-marquee_item.cc-green  { background: var(--yellow-green); }
.c-marquee_item.cc-black  { background: var(--black); color: var(--white); }

/* ------------------------------------------------ 10. sticky stats ------- */
/* 500vh tall section, 100vh sticky viewport, three cards cross-faded by
   a scrubbed GSAP timeline — exactly papumba's #stats mechanic. */
.c-section.cc-home-stats {
  width: 100%;
  height: 400vh; /* 300vh of pinned scroll + 100vh to scroll away */
  padding-block: 0;
}
.c-home-stats_sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
}
.c-home-stat_wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  height: 100vh;
  padding-inline: 2rem;
}
.c-home-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .625rem;
  width: 100%;
  max-width: 32.4rem;
  min-height: 34.375rem;
}
/* cards 2 and 3 stack on top of card 1 */
.c-home-stat-card.cc-2,
.c-home-stat-card.cc-3 { position: absolute; }

.c-home-stat-card_visual {
  display: grid;
  place-items: center;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  margin-bottom: 1.5rem;
}
.c-home-stat-card_visual .icon { width: 8rem; height: 8rem; }
.c-home-stat-card.cc-1 .c-home-stat-card_visual { background: var(--papumba); color: var(--black); }
.c-home-stat-card.cc-2 .c-home-stat-card_visual { background: var(--malibu);  color: var(--black); }
.c-home-stat-card.cc-3 .c-home-stat-card_visual { background: var(--energy);  color: var(--black); }

.c-title-wrapper.cc-stat-card {
  text-align: center;
  transform: rotate(-2deg);
}

/* ------------------------------------------------ 11. feature cards ----- */
.c-cards-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  margin-bottom: 4rem;
}

.c-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}

/* chunky "3D" card — solid colour with a darker offset shadow, the same
   colour/shadow pairing papumba uses for its illustration blocks */
.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 2.25rem 1.75rem 2.5rem;
  border-radius: 2rem;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.c-card:hover { transform: translateY(-8px); }

.c-card.cc-orange { background: var(--papumba);       box-shadow: 0 10px 0 var(--papumba-dark); }
.c-card.cc-orange:hover { box-shadow: 0 18px 0 var(--papumba-dark); }
.c-card.cc-malibu { background: var(--malibu);        box-shadow: 0 10px 0 var(--malibu-shadow); }
.c-card.cc-malibu:hover { box-shadow: 0 18px 0 var(--malibu-shadow); }
.c-card.cc-green  { background: var(--yellow-green);  box-shadow: 0 10px 0 var(--yellow-green-shadow); }
.c-card.cc-green:hover  { box-shadow: 0 18px 0 var(--yellow-green-shadow); }
.c-card.cc-pink   { background: var(--lavender-rose); box-shadow: 0 10px 0 var(--lavender-rose-shadow); }
.c-card.cc-pink:hover   { box-shadow: 0 18px 0 var(--lavender-rose-shadow); }

.c-card_icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  color: var(--black);
  margin-bottom: .5rem;
}
.c-card_icon .icon { width: 2.5rem; height: 2.5rem; }
.c-card p { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }

/* small inline video used inside feature cards */
.c-card_video-wrap {
  width: 100%;
  height: 10rem;
  overflow: hidden;
  border-radius: 1rem;
  margin-bottom: .75rem;
}
.c-card_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------ 12. split sections ---- */
.c-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.c-split.cc-reverse .c-split_visual { order: -1; }

.c-split_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.c-split_visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.c-blob {
  position: absolute;
  inset: 8%;
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
  background: var(--papumba);
  animation: blob-morph 14s ease-in-out infinite;
}
.c-blob.cc-malibu { background: var(--malibu); }
.c-blob.cc-energy { background: var(--energy); }
@keyframes blob-morph {
  0%, 100% { border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%; transform: rotate(0deg); }
  50%      { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; transform: rotate(8deg); }
}
.c-split_visual .c-mascot-big {
  position: relative;
  z-index: 1;
  width: 72%;
}

/* circular mascot video */
.c-split_video-wrap {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.c-split_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------ 13. parents card ------ */
.c-parents-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 55rem;
  margin-inline: auto;
  padding: 4rem 3rem;
  border-radius: 3rem;
  background: var(--white);
  box-shadow: 0 12px 0 var(--mercury);
  text-align: center;
}
.c-parents-icons { display: flex; gap: 1rem; }
.c-mini-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: var(--black);
}
.c-mini-icon .icon { width: 2.25rem; height: 2.25rem; }
.c-mini-icon:nth-child(1) { background: var(--yellow-green); }
.c-mini-icon:nth-child(2) { background: var(--flamingo); }
.c-mini-icon:nth-child(3) { background: var(--lavender-rose); }

/* ------------------------------------------------ 14. AI story ---------- */
.c-section.cc-ai-story { background: var(--black); color: var(--white); }
.c-section.cc-ai-story .c-eyebrow { background: var(--energy); }

.c-story-mockup {
  position: relative;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  padding: 2.5rem;
  border-radius: 2.5rem;
  background: linear-gradient(160deg, #1d1a3a, #2f2559 55%, #4a2f6b);
  box-shadow: 0 16px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}
.c-story-mockup .icon-moon {
  position: absolute;
  top: 2.5rem; right: 2.5rem;
  width: 4.5rem; height: 4.5rem;
  color: var(--energy);
}
.c-story-lines { display: flex; flex-direction: column; gap: .875rem; }
.c-story-lines span {
  display: block;
  height: .875rem;
  border-radius: 64px;
  background: rgba(255, 255, 255, .28);
}
.c-story-lines span.cc-short { width: 55%; }
.c-story-lines span.cc-accent { background: var(--papumba); width: 72%; }

.c-twinkle { position: absolute; color: var(--energy); animation: twinkle 3s ease-in-out infinite; }
.c-twinkle.cc-1 { top: 22%; left: 16%; width: 1.75rem; animation-delay: .2s; }
.c-twinkle.cc-2 { top: 40%; right: 22%; width: 1.25rem; animation-delay: 1.1s; }
.c-twinkle.cc-3 { top: 58%; left: 28%; width: 1.5rem;  animation-delay: 1.9s; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ------------------------------------------------ 15. final CTA --------- */
.c-section.cc-get-moinamel {
  overflow: hidden;
  background:
    radial-gradient(50rem 34rem at 50% 0%, var(--papumba-light), transparent 65%),
    var(--papumba);
  text-align: center;
}
/* the mascot is orange too, so it needs a light disc to read on the orange section */
.c-cta-mascot-badge {
  display: grid;
  place-items: center;
  width: 12rem;
  height: 12rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 10px 0 rgba(15, 15, 15, .1);
  animation: mascot-wave 3.6s ease-in-out infinite;
}
.c-cta-mascot { width: 78%; }

.c-form {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  width: 100%;
  max-width: 24.0625rem;
  margin: 2.5rem auto 0;
}
.c-input {
  width: 100%;
  padding: 1.375rem 1.75rem;
  border: 2px solid var(--black);
  border-radius: 64px;
  background: var(--white);
  color: var(--black);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500; /* matches the placeholder; keeps 600 out of the font payload */
  letter-spacing: -.02em;
}
.c-input::placeholder { color: var(--silver-chalice); font-weight: 500; }
.c-input:focus { outline: none; border-color: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); }

.c-form-success {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ------------------------------------------------ 16. footer ------------ */
.c-footer {
  padding-block: 4.5rem 2.5rem;
  background: var(--black);
  color: var(--white);
  text-align: center;
}
.c-footer_inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.c-footer .c-logo_text { color: var(--white); }
.c-footer_tag {
  display: inline-block;
  background: var(--papumba);
  color: var(--black);
  padding: .5rem 1.25rem .625rem;
  font-size: 1.125rem;
  font-weight: 800;
  transform: rotate(-2deg);
}
.c-footer_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
}
.c-footer_nav a:hover { color: var(--papumba); }
.c-footer_note { font-size: 1rem; color: var(--alto); }
.c-footer_copy { font-size: .875rem; color: var(--silver-chalice); }

/* ------------------------------------------------ 17. decor ------------- */
.c-decor { position: absolute; color: var(--papumba); pointer-events: none; z-index: 0; }
.c-decor.cc-leaf-1  { top: 18%; left: 6%;  width: 3.5rem; color: var(--yellow-green); animation: float 7s ease-in-out infinite; }
.c-decor.cc-leaf-2  { bottom: 14%; right: 8%; width: 2.75rem; color: var(--yellow-green); animation: float 9s ease-in-out infinite reverse; }
.c-decor.cc-star-1  { top: 26%; right: 14%; width: 2.25rem; color: var(--energy); animation: spin-slow 18s linear infinite; }
.c-decor.cc-star-2  { bottom: 26%; left: 12%; width: 1.75rem; color: var(--lavender-rose); animation: spin-slow 24s linear infinite reverse; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(8deg); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.icon-inline { display: inline-block; vertical-align: -.15em; width: 1.25em; height: 1.25em; }

/* ------------------------------------------------ 18. responsive -------- */
@media (max-width: 991px) {
  body { font-size: 1rem; line-height: 1.5rem; }
  .c-subtitle-1 { font-size: 2.25rem; line-height: 2.5rem; }
  .c-button { padding: 1rem 2rem; font-size: 1rem; line-height: 1.25rem; }
  .c-section { padding-block: 4rem; }

  .c-nav_menu {
    position: fixed;
    inset: 0 0 auto;

  /* Center the logo in the header on small screens */
  .c-nav_inner { position: relative; }
  .c-logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 12; }

    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    background: var(--white);
    box-shadow: 0 12px 32px rgba(15, 15, 15, .12);
    transform: translateY(-110%);
    transition: transform .4s var(--ease-out);
    font-size: 1.125rem;
  }
  .c-nav.nav-open .c-nav_menu { transform: translateY(0); }
  .c-nav_menu .c-nav_link { padding-block: .75rem; border-bottom: 2px solid var(--concrete); }
  .c-nav_menu-button { display: block; }
  .c-nav_actions .c-button { display: none; }

  .c-split { grid-template-columns: 1fr; gap: 3rem; }
  .c-split.cc-reverse .c-split_visual { order: 0; }
  .c-split_visual { max-width: 26rem; margin-inline: auto; }

  .c-mascot-wave { width: 10rem; inset: auto 1rem 2rem auto; }
  .c-parents-card { padding: 2.5rem 1.5rem; border-radius: 2rem; }

  .c-home-stat-card { max-width: 20rem; min-height: auto; }
  .c-home-stat-card_visual { width: 11rem; height: 11rem; }
  .c-home-stat-card_visual .icon { width: 5.5rem; height: 5.5rem; }
}

@media (max-width: 767px) {
  .c-container { padding-inline: 1rem; }
  .c-subtitle-1 { font-size: 1.75rem; line-height: 2.125rem; }
  /* The hero is 100vh on desktop. On a phone that's a full screen of hero
     before anything else appears, and 100vh measures the viewport WITHOUT the
     browser chrome, so the bottom is cut until you scroll. Let the content set
     the height instead — the next section then peeks above the fold. */
  .c-hero.cc-home {
    min-height: auto;
    padding-top: 7rem;
    padding-bottom: 4.5rem;
  }
  /* The footage is 16:9 landscape. Covering a portrait phone meant scaling it
     until only ~25% of the frame was left on screen — the "zoomed in" look.
     `contain` shows the whole frame; the hero gradient fills the rest. */
  .c-hero_video-wrap { display: flex; align-items: center; }
  .c-hero_video {
    position: relative;
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    /* Contained footage ends in two hard horizontal lines against the hero
       gradient, which reads as a stray band. Fading the edges lets it sit in
       the background the way the covered version used to. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .c-hero_sub { font-size: 1.0625rem; }
  /* Stack rather than wrap. English pills are wide enough to wrap on their own,
     but the Assamese labels are ~20px narrower and both fit on one row — which
     pushed the row's right edge from 273 to 336 and put the mascot 56px
     underneath it. Forcing a column keeps the badge block a predictable
     centred width in both languages, so the mascot's corner stays clear. */
  .c-store-badges { gap: .5rem; flex-direction: column; align-items: center; }
  .c-store-badge { gap: .5rem; padding: .4375rem 1rem .4375rem .875rem; }
  .c-store-badge_glyph { width: 1.375rem; height: 1.375rem; }
  .c-store-badge_name { font-size: .9375rem; }
  /* The store badges are a centred 171px column, and .c-hero_inner sits at
     z-index 3 against the mascot wrapper's 2 — so at 8rem the bird ran 46px
     under the Google Play pill and got painted over. Tuck it into the ~102px
     strip to the right of that column instead. 5.5rem leaves ~10px of daylight,
     which the wave animation (±2deg about the feet, ~3px of swing) stays
     inside. */
  .c-mascot-wave { width: 5.5rem; inset: auto 0 1.25rem auto; opacity: .9; }
  .c-cards-grid { grid-template-columns: 1fr; }
  .c-home-stat-card { max-width: 18rem; }
  .c-story-mockup { padding: 1.75rem; border-radius: 2rem; }

}

/* ------------------------------------------------ 19. reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [text-split] { opacity: 1 !important; }
  /* collapse the pinned scroll section to normal flow */
  .c-section.cc-home-stats { height: auto; }
  .c-home-stats_sticky { position: static; height: auto; }
  .c-home-stat_wrapper { height: auto; padding-block: 3rem; }
  .c-home-stat-card.cc-2,
  .c-home-stat-card.cc-3 { position: static; opacity: 1 !important; transform: none !important; }
}