/* ═══ Daylight — the homepage theme ═══
   Flat white and sky, the app's own blue and green, chunky 3D buttons, no glow.
   Layered over css/pages/home.css (which still holds the original dark theme).
   The A/B variants build copies this file into variants/c-daylight/. */

:root {
  --ink: #0E2A3B;
  --ink-3: #1B3E54;
  --paper: #FFFFFF;
  --paper-2: #EEF8FE;
  --text: #0E2A3B;
  --muted: #3D5566;
  --muted-light: #D6ECFA;
  --line: #DCE6EE;
  --sky: #1CB0F6;
  --sky-d: #1485C7;
  --sky-dd: #0B6FA8;
  --sky-ddd: #084E77;
  --green: #58CC02;
  --green-d: #3E8E00;
  --green-ink: #10300A;
  --yellow: #FFC800;
  --yellow-d: #D9A800;
  --pink: #FF4B9D;
  --pink-d: #D6246E;

  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow: 0 6px 0 var(--line);
  --shadow-lg: 0 24px 50px -22px rgba(14, 42, 59, .35);
  --radius-lg: 28px;
}

body { font-weight: 600; }
h1, h2, h3 { font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--sky-d); }
.eyebrow { color: var(--sky-dd); font-weight: 900; }
.eyebrow--light { color: var(--sky-dd); }
:focus-visible { outline-color: var(--sky-d); }

/* Buttons — chunky 3D */
.btn { border-radius: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; transition: transform .1s ease, box-shadow .1s ease; }
.btn--lg { font-size: 1rem; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(4px); }
.btn--glow { background: var(--green); color: var(--green-ink); box-shadow: 0 5px 0 var(--green-d); }
.btn--glow:hover { box-shadow: 0 7px 0 var(--green-d); }
.btn--glow:active { box-shadow: 0 1px 0 var(--green-d); }
.btn--ghost { background: #fff; color: var(--sky-dd); border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); backdrop-filter: none; }
.btn--ghost:hover { background: #fff; border-color: var(--line); box-shadow: 0 7px 0 var(--line); }
.btn--dark { background: var(--sky-dd); color: #fff; box-shadow: 0 5px 0 var(--sky-ddd); }
.btn--dark:hover { background: var(--sky-dd); box-shadow: 0 7px 0 var(--sky-ddd); }
.btn--outline { border: 2px solid var(--line); color: var(--sky-dd); box-shadow: 0 5px 0 var(--line); }
.btn--outline:hover { background: var(--paper-2); color: var(--sky-dd); }

/* Nav */
.nav .nav__logo { color: var(--ink); font-weight: 900; }
.nav__links a { color: var(--muted); font-weight: 800; }
.nav__links a:hover { color: var(--sky-d); }
.nav__burger span { background: var(--ink); }
.nav.is-scrolled, .nav.is-open { background: rgba(255, 255, 255, .95); border-bottom: 2px solid var(--line); }
.nav__mobile { background: #fff; border-bottom-color: var(--line); }
.nav__mobile a:not(.btn) { color: var(--ink); border-bottom-color: var(--line); }

/* Hero — letter tiles */
.hero { background: var(--paper-2); color: var(--ink); }
.blob { display: none; }
/* :nth-child(n) matches the base sheet's per-letter font sizes so the tile size wins */
.hero__glyphs span:nth-child(n) {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px;
  font-family: var(--font-display); font-weight: 900; font-size: 50px; color: #fff; line-height: 1;
  animation-duration: 6s;
}
.hero__glyphs span:nth-child(1) { background: var(--sky);    box-shadow: 0 7px 0 var(--sky-d);   top: 14%; left: 50%; }
.hero__glyphs span:nth-child(2) { background: var(--green);  box-shadow: 0 7px 0 var(--green-d); color: var(--green-ink); top: auto; bottom: 10%; left: 46%; }
.hero__glyphs span:nth-child(3) { background: var(--yellow); box-shadow: 0 7px 0 var(--yellow-d); color: var(--ink); top: 9%; left: auto; right: 5%; font-size: 50px; }
.hero__glyphs span:nth-child(4) { background: var(--pink);   box-shadow: 0 7px 0 var(--pink-d); top: auto; bottom: 16%; left: auto; right: 3%; }
.hero__glyphs span:nth-child(5) { background: var(--sky);    box-shadow: 0 7px 0 var(--sky-d); top: 48%; right: auto; left: 58%; width: 72px; height: 72px; font-size: 38px; border-radius: 20px; }
.hero__glyphs span:nth-child(6) { background: var(--green);  box-shadow: 0 7px 0 var(--green-d); color: var(--green-ink); top: 44%; right: 1%; width: 72px; height: 72px; font-size: 38px; border-radius: 20px; }
.hero__glyphs span:nth-child(7), .hero__glyphs span:nth-child(8) { display: none; }
@media (max-width: 959px) {
  .hero__glyphs span:nth-child(n) { width: 64px; height: 64px; font-size: 34px; border-radius: 18px; opacity: .9; }
  .hero__glyphs span:nth-child(1) { top: 90px; left: auto; right: 4%; }
  .hero__glyphs span:nth-child(2) { bottom: 4%; left: 4%; }
  .hero__glyphs span:nth-child(3), .hero__glyphs span:nth-child(5), .hero__glyphs span:nth-child(6) { display: none; }
  .hero__glyphs span:nth-child(4) { bottom: 22%; right: 3%; }
}
.chip { background: #fff; border: 2px solid var(--line); color: var(--ink); font-weight: 800; }
.chip__dot { background: var(--green); box-shadow: 0 0 0 4px rgba(88, 204, 2, .2); }
.hero__lede { color: var(--muted); font-weight: 600; }
.hero__lede strong { color: var(--ink); font-weight: 900; }
.hero__proof { color: var(--muted); font-weight: 800; }
.hero__proof li::before, .ticks li::before {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.phone { background: var(--ink); box-shadow: var(--shadow-lg); }
.float-card { background: #fff; border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 5px 0 var(--line); font-weight: 800; }
.float-card__ru { font-family: var(--font-display); font-weight: 900; }
.float-card__arrow, .float-card__en { color: var(--sky-dd); }
.float-card__label { color: var(--pink-d); font-weight: 900; }
.eq { background: var(--yellow); }
.eq i { background: var(--ink); }

/* Word strip */
.marquee { background: var(--sky); box-shadow: none; }
.marquee__track span { font-family: var(--font-display); font-weight: 900; color: var(--ink); }
.marquee__track em { font-family: var(--font-body); font-weight: 800; color: var(--ink); opacity: .75; }
.marquee__track span::after { content: '★'; color: var(--yellow); opacity: 1; }

/* Alphabet */
.letter__face { border-radius: 26px; }
.letter__front { background: #fff; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line); font-family: var(--font-display); font-weight: 900; }
.letter:hover .letter__front { box-shadow: 0 9px 0 var(--line); }
.letter:nth-child(2) .letter__back { color: var(--green-ink); }
.letter:nth-child(4) .letter__back { background: var(--yellow); }
.word { border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 6px 0 var(--line); font-weight: 800; }
.word:hover { box-shadow: 0 8px 0 var(--line); }
.word:active { box-shadow: 0 2px 0 var(--line); }
.word__ru { font-weight: 900; }
.word:not(.is-read)::after { color: var(--sky-dd); font-weight: 900; }
.word.is-read { background: #E9F9D9; border-color: var(--green-d); box-shadow: 0 6px 0 var(--green-d); }
.word.is-read .word__answer { color: #2F6B00; }
.decode__bar { height: 16px; border: 0; background: var(--line); }
.decode__bar span { background: var(--green); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.decode-done { background: var(--sky-dd); }
.decode-done__burst { background: radial-gradient(circle at 50% 0%, rgba(255, 200, 0, .35), transparent 60%); }
.decode-done p { color: #E6F4FD; }
.liars span { background: rgba(255, 255, 255, .15); border: 2px solid rgba(255, 255, 255, .25); color: #fff; }
.decode-done .btn--glow { box-shadow: 0 5px 0 var(--green-d); }

/* Stress */
.stress { background: var(--paper-2); }
.stress__demo { border: 2px solid var(--line); border-radius: 28px; box-shadow: 0 8px 0 var(--line); }
.stress__hint { color: var(--sky-dd); font-weight: 900; }
.zamok { font-weight: 900; }
.zamok__vowel.is-on { color: var(--pink-d); }
.zamok__vowel::before { background: var(--pink); }

/* Audio — light and warm */
.audio { background: #FFF8DC; color: var(--ink); }
.audio__glow { display: none; }
.audio__copy p { color: var(--muted); }
.ticks--light li { color: var(--ink); }
.player { background: #fff; border: 2px solid #F0E3B0; box-shadow: 0 8px 0 #F0E3B0; backdrop-filter: none; }
.player__kicker { color: var(--muted); }
.player__title { font-weight: 900; }
.player__art { background: var(--yellow); }
.player__play { background: var(--green); color: var(--green-ink); box-shadow: 0 5px 0 var(--green-d); }
.player:not(.is-playing):not(.has-played) .player__play { animation: none; }
.wave i { background: #E6DDBB; }
.wave i.is-past { background: var(--green); }
.player__time { color: var(--muted); }
.cap--narrator { color: var(--muted); background: #FFF8DC; }
.cap--ru { background: #E8F7FF; }
.cap--ru.cap--m { background: #EAF9DC; }
.cap__en { color: var(--muted); }
.cap__who { color: var(--sky-dd); }

/* Features */
.tile { background: #fff; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line); }
.tile:hover { box-shadow: 0 9px 0 var(--line); }
.tile--path { background: #E8F7FF; border-color: #BFE6FB; box-shadow: 0 6px 0 #BFE6FB; }
.tile--read { background: #FFEFF6; border-color: #FBCFE2; box-shadow: 0 6px 0 #FBCFE2; }
.tile--practice { background: #EEFAE2; border-color: #CDEFAE; box-shadow: 0 6px 0 #CDEFAE; }
.tile__tag--blue { background: var(--sky); color: var(--ink); }
.tile__tag--purple { background: var(--pink); color: #fff; }
.tile__tag--green { background: var(--green); color: var(--green-ink); }
.tile__tag { font-weight: 900; }
.tile__shot { background: var(--ink); box-shadow: none; }
.tile--srs .tile__icon { background: var(--sky); color: #fff; }
.tile--offline .tile__icon { background: var(--green); color: var(--green-ink); }
.tile__icon--text { background: var(--yellow); color: var(--ink); }
.tile__icon { border-radius: 18px; }

/* Pricing */
.pricing { background: var(--paper-2); }
.plan { border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line); }
.plan__price span { font-weight: 900; }
.plan--premium { background: var(--sky-dd); box-shadow: 0 6px 0 var(--sky-ddd); }
.plan--premium::before { display: none; }
.plan__badge { background: var(--yellow); color: var(--ink); font-weight: 900; box-shadow: 0 3px 0 var(--yellow-d); }
.plan--premium .ticks li { color: #fff; }
.plan--premium .ticks li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FA8' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.plan--premium .btn--glow { box-shadow: 0 5px 0 var(--green-d); }
.plans__note a { color: var(--sky-dd); }

/* FAQ */
.faq details { background: #fff; border: 2px solid var(--line); border-radius: 20px; }
.faq details[open] { box-shadow: 0 5px 0 var(--line); }
.faq summary { font-weight: 900; }
.faq summary::after { color: var(--sky-d); font-weight: 900; }

/* Final CTA */
.final__card { background: var(--green); color: var(--green-ink); box-shadow: 0 10px 0 var(--green-d); }
.final__card h2 { color: var(--green-ink); }
.final__lede, .final__small, .signup__hint { color: #1E4A0C; }
.final__glyphs { color: rgba(16, 48, 10, .08); font-weight: 900; }
.signup__input { background: #fff; border: 2px solid transparent; border-radius: 16px; font-weight: 700; }
.signup__input:focus { border-color: var(--sky-d); }
.signup__device span { border: 2px solid rgba(16, 48, 10, .3); background: rgba(255, 255, 255, .5); color: var(--green-ink); font-weight: 800; }
.signup__device input:checked + span { background: var(--green-ink); color: #fff; border-color: var(--green-ink); }
.signup__msg--ok { background: var(--sky-dd); }

/* Footer */
.footer { background: var(--ink); }

/* Hero signup + launch countdown */
@media (max-width: 959px) { .nav { background: rgba(255, 255, 255, .95); border-bottom: 2px solid var(--line); } }
.countdown__label { color: var(--sky-dd); font-weight: 900; }
.countdown__unit { background: #fff; border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 4px 0 var(--line); }
.countdown__unit b { color: var(--ink); font-weight: 900; }
.countdown__unit small { color: var(--muted); font-weight: 800; }
.signup--hero .signup__input { background: #fff; border: 2px solid var(--line); border-radius: 16px; }
.signup--hero .signup__input:focus { border-color: var(--sky); }
.signup--hero .signup__device { color: var(--muted); }
.signup--hero .signup__device span { border: 2px solid var(--line); background: #fff; color: var(--sky-dd); font-weight: 800; }
.signup--hero .signup__device input:checked + span { background: var(--sky-dd); color: #fff; border-color: var(--sky-dd); }
.signup--hero .signup__device input:focus-visible + span { outline-color: var(--sky-d); }
.hero__signup .signup__msg--ok { background: var(--sky-dd); border: 0; color: #fff; }
.hero__signup .signup__msg--err { border: 2px solid var(--pink-d); }
.hero__listen { color: var(--sky-dd); }
.hero__listen:hover { color: var(--ink); }
@media (max-width: 600px) {
  .signup--hero { background: #fff; border: 2px solid var(--line); border-radius: 24px; box-shadow: 0 6px 0 var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .signup--hero .signup__input { background: var(--paper-2); }
}
.hero__live-label { color: var(--green-d); font-weight: 900; }