/* Educircle V2 — homepage-specific layout. Depends on tokens.css + components.css. */

/* ============ Hero ============ */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; color: #fff; overflow: hidden; isolation: isolate; }
/* Full-page screenshot helper (?shot=1) — cap the hero so one tall capture fits. */
.shotmode .hero { min-height: 720px; }
.shotmode .hero__scroll { display: none; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--c-navy-900); }
.hero__bg picture { display: contents; }
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__bg::after { /* readability + brand tint, not a rainbow gradient */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,31,61,.72) 0%, rgba(2,44,84,.62) 45%, rgba(4,31,61,.88) 100%);
}
.hero__content { padding-block: 8rem 4rem; max-width: 60ch; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .lead { color: #DCE9FB; margin-top: var(--sp-5); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }
.hero__trust { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); font-size: var(--fs-small); color: #BBD0EC; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #BBD0EC; display: grid; justify-items: center; gap: 6px; }
.hero__scroll .line { width: 1px; height: 34px; background: linear-gradient(#BBD0EC, transparent); }
@media (prefers-reduced-motion: no-preference) { html.js .hero__scroll .line { animation: scrollpulse 1.8s var(--ease-in-out) infinite; transform-origin: top; } }
@keyframes scrollpulse { 0%,100%{ transform: scaleY(.4); opacity:.5 } 50%{ transform: scaleY(1); opacity:1 } }

/* ============ Plan entry ============ */
.plan-card { background: #fff; border-radius: var(--r-2xl); box-shadow: var(--sh-lg); padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--c-line); }
.plan-steps { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-4); }
.plan-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.plan-steps .n { flex: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--grad-primary); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.plan-steps b { color: var(--c-navy); }
.plan-steps p { color: var(--c-muted); font-size: var(--fs-small); }

/* ============ Journey timeline ============ */
.journey { display: grid; gap: var(--sp-6); }
@media (min-width:768px){ .journey { grid-template-columns: repeat(5, 1fr); } }
.journey__step { padding: var(--sp-5); border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.journey__step .k { font-size: 13px; font-weight: 800; color: #6FD0FF; letter-spacing: .1em; }
.journey__step h3 { color: #fff; margin: var(--sp-2) 0; font-size: var(--fs-h4); }
.journey__step p { color: var(--c-on-dark-muted); font-size: var(--fs-small); }

/* ============ Dashboard product preview ============ */
.dash { border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--c-line); background: #fff; }
.dash__bar { display: flex; align-items: center; gap: 8px; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); background: var(--c-surface-2); }
.dash__dot { width: 11px; height: 11px; border-radius: 50%; background: #d7e0ea; }
.dash__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.dash__tile { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); background: #fff; }
.dash__tile .t { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); font-weight: 700; }
.dash__tile .v { font-size: var(--fs-h3); font-weight: 800; color: var(--c-primary); }
.dash__progress { height: 8px; border-radius: 8px; background: var(--c-surface-3); overflow: hidden; margin-top: 10px; }
.dash__progress i { display: block; height: 100%; background: var(--grad-primary); border-radius: 8px; }

/* ============ Logo strip (universities) ============ */
.logo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (min-width: 640px){ .logo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .logo-strip { grid-template-columns: repeat(6, 1fr); } }

/* ============ Section number label ============ */
.section-index { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--c-primary); }
.section--dark .section-index, .plan-actions-card .section-index { color: #6FD0FF; }

/* Small helpers */
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.center { text-align: center; }
.two-col { display: grid; gap: var(--sp-8); }
@media (min-width: 900px){ .two-col { grid-template-columns: 1.05fr .95fr; align-items: center; } }