/* ===========================================================================
   Home page — hero, phone mockup, feature rows, download band.
   Everything here is page-specific; shared tokens live in app.css.
   =========================================================================== */

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 100px; overflow: hidden; position: relative; }

/* Soft marigold wash behind the artwork, off-centre so the layout doesn't
   read as a symmetrical template. */
.hero::after {
  content: ''; position: absolute; z-index: 0;
  top: -140px; right: -180px; width: 720px; height: 720px;
  background: radial-gradient(circle, color-mix(in srgb, var(--marigold) 13%, transparent) 0%, transparent 66%);
  pointer-events: none;
}

.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { letter-spacing: -.03em; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ico { width: 17px; height: 17px; display: inline-grid; place-items: center; }
.btn-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

.hero-proof { display: flex; align-items: center; gap: 22px; }
.proof b { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; display: block; line-height: 1.1; }
.proof span { font-size: 12.5px; color: var(--ink-faint); }
.proof-sep { width: 1px; height: 32px; background: var(--line-strong); }

/* ── phone mockup ───────────────────────────────────────────────────────── */
.hero-art { position: relative; z-index: 1; display: grid; place-items: center; min-height: 520px; }

.phone-shell {
  width: 284px; height: 580px;
  background: linear-gradient(160deg, #2A2C36, #16171D);
  border-radius: 40px; padding: 11px;
  box-shadow: 0 30px 70px rgba(60,44,20,.26), 0 6px 16px rgba(60,44,20,.14),
              inset 0 0 0 1.5px rgba(255,255,255,.09);
  position: relative;
  transform: rotate(-3.2deg);
  transition: transform .45s cubic-bezier(.22,.9,.3,1);
}
.hero-art:hover .phone-shell { transform: rotate(-1.2deg) translateY(-6px); }

.phone-notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 24px; background: #16171D;
  border-radius: 0 0 15px 15px; z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 31px;
  padding: 40px 18px 16px;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}

.ph-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.ph-qmeta { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ph-qmeta span { font-weight: 500; color: var(--ink-faint); }
.ph-timer {
  display: flex; align-items: center; gap: 5px;
  background: var(--wrong-bg); color: var(--wrong);
  padding: 4px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ph-timer svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.ph-chip {
  display: inline-block; align-self: flex-start;
  background: var(--indigo-100); color: var(--indigo);
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
  margin-bottom: 11px;
}
.ph-q { font-size: 13.5px; font-weight: 600; line-height: 1.45; margin-bottom: 14px; color: var(--ink); }

.ph-opt {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; font-weight: 500; margin-bottom: 8px;
  display: flex; align-items: center; color: var(--ink-soft);
}
.ph-opt.is-picked {
  border-color: var(--indigo);
  background: var(--indigo-100); color: var(--indigo); font-weight: 700;
}
.ph-tick { margin-left: auto; width: 15px; height: 15px; }
.ph-tick svg { width: 15px; height: 15px; stroke: var(--indigo); fill: none; stroke-width: 2.6; }

.ph-bottom { margin-top: auto; }
.ph-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 11px; }
.ph-dots i { aspect-ratio: 1; border-radius: 3.5px; background: var(--surface-2); border: 1px solid var(--line); }
.ph-dots i.on    { background: var(--correct); border-color: var(--correct); }
.ph-dots i.wrong { background: var(--wrong);   border-color: var(--wrong); }
.ph-dots i.mark  { background: var(--review);  border-color: var(--review); }
.ph-dots i.now   { background: var(--marigold); border-color: var(--marigold);
                   box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--marigold) 30%, transparent); }
.ph-next {
  width: 100%; background: var(--indigo); color: #fff; border: 0;
  border-radius: 10px; padding: 11px; font-size: 13px; font-weight: 700; cursor: default;
}
:root[data-theme="dark"] .ph-next { color: #14151A; }

/* Floating cards — deliberately overlapping the phone so it reads as a
   composed illustration rather than a screenshot dropped on a background. */
.float-card {
  position: absolute; z-index: 4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px; padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }

.float-rank { top: 54px; left: 0; animation-delay: -1s; }
.fc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.fc-value { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.fc-delta { font-size: 11.5px; font-weight: 700; }
.fc-delta.up { color: var(--correct); }

.float-score { bottom: 58px; right: 0; width: 176px; animation-delay: -3.2s; }
.fc-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.fc-row b { color: var(--ink); }
.fc-bar { height: 5px; background: var(--surface-2); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.fc-bar i { display: block; height: 100%; background: var(--indigo); border-radius: 3px; }

/* ── section heads ──────────────────────────────────────────────────────── */
.sec-head { max-width: 620px; }
.sec-head .lede { font-size: 1.05rem; }

/* ── feature rows ───────────────────────────────────────────────────────── */
.feature-rows { display: grid; gap: 0; }
.frow {
  display: grid; grid-template-columns: 62px 1fr 220px;
  gap: 28px; align-items: center;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.frow:last-child { border-bottom: 1px solid var(--line); }
.frow-num {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: var(--marigold); line-height: 1;
}
.frow-body h3 { margin-bottom: 8px; }
.frow-body p { max-width: 58ch; font-size: 15px; }
.frow-art svg { width: 100%; height: auto; }

/* ── exam cards ─────────────────────────────────────────────────────────── */
.exams-band { background: var(--surface-2); border-block: 1px solid var(--line); }
.exam-card { position: relative; overflow: hidden; }
.exam-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c, var(--indigo)); }
.exam-neet { --c: var(--neet); } .exam-jee { --c: var(--jee); } .exam-cuet { --c: var(--cuet); }
.exam-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exam-tag { color: var(--c, var(--indigo)); font-size: 13px; font-weight: 600; margin-top: 2px; }
.exam-stats { display: flex; gap: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.exam-stats b { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; display: block; line-height: 1.15; }
.exam-stats span { font-size: 11.5px; color: var(--ink-faint); }

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 30px; }
.steps li { position: relative; }
/* Dashed connector between steps, hidden on the last and on small screens. */
.steps li:not(:last-child)::after {
  content: ''; position: absolute; top: 17px; left: calc(100% - 8px); width: 30px;
  border-top: 2px dashed var(--line-strong);
}
.step-n {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--indigo); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 16px;
  margin-bottom: 13px;
}
:root[data-theme="dark"] .step-n { color: #14151A; }
.steps h4 { margin-bottom: 6px; }
.steps p { font-size: 14.5px; }

/* ── download band ──────────────────────────────────────────────────────── */
.download-band {
  background: linear-gradient(135deg, var(--indigo-700), var(--indigo));
  padding: 76px 0; margin-top: 20px; position: relative; overflow: hidden;
}
:root[data-theme="dark"] .download-band { background: linear-gradient(135deg, #1A1D30, #262B4A); }
.dl-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: center; }
.dl-grid h2 { letter-spacing: -.025em; }
.dl-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: #101218; color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px 20px; border-radius: 12px;
  transition: transform .14s, background .14s;
}
.store-btn:hover { transform: translateY(-2px); background: #1A1D26; }
.store-btn svg { width: 25px; height: 25px; flex: none; }
.store-btn small { display: block; font-size: 10px; opacity: .7; line-height: 1.3; }
.store-btn b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.store-btn.is-soon { opacity: .55; }
.dl-art svg { width: 100%; height: auto; }

.hide-sm { display: inline-flex; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-art { min-height: 0; margin-top: 8px; }
  .float-rank { left: 4%; } .float-score { right: 4%; }
  .frow { grid-template-columns: 48px 1fr; }
  .frow-art { display: none; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-art { display: none; }
}
@media (max-width: 768px) {
  .hero { padding: 48px 0 66px; }
  .hero-proof { gap: 16px; }
  .steps li:not(:last-child)::after { display: none; }
  .hide-sm { display: none; }
  .phone-shell { width: 258px; height: 528px; }
}
@media (max-width: 420px) {
  .float-card { display: none; }
}