/* ═══════════════════════════════════════════════════════════
   NovaClassHub — Product Website v4
   Brand palette: deep navy (matches the logo wordmark) plus
   indigo and a sky-blue accent.  Single navy gradient runs
   the brand so headings, CTAs and the glow under cards all
   feel like one product, not a colour parade.
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand: navy → indigo → sky.  The deep navy (`--navy`) is
        the logo wordmark colour and the anchor.  Indigo is the
        energetic mid-tone (used for hovers + CTAs).  Sky is the
        lightest accent and lifts gradients away from feeling
        heavy.  Backward-compat aliases `--violet*` keep the rest
        of the stylesheet working without a global rename. */
  --navy: #1e2a78;
  --navy-700: #182260;
  --navy-800: #121a48;
  --indigo: #3b50d6;
  --indigo-600: #2f42c2;
  --sky: #6c8bff;
  --sky-100: #e2e8ff;
  --sky-50: #eff2ff;

  --violet: var(--indigo);
  --violet-600: var(--indigo-600);
  --violet-700: var(--navy);
  --violet-100: var(--sky-100);
  --violet-50: var(--sky-50);

  --magenta: var(--indigo);
  --magenta-600: var(--indigo-600);

  --coral: var(--sky);
  --coral-600: var(--indigo-600);
  --coral-100: var(--sky-100);

  --primary: var(--navy);
  --primary-dark: var(--navy-700);
  --primary-light: var(--sky);
  --primary-bg: rgba(30, 42, 120, 0.06);
  --primary-soft: rgba(30, 42, 120, 0.10);

  --gradient-brand: linear-gradient(135deg, #1e2a78 0%, #3b50d6 55%, #6c8bff 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(30, 42, 120, 0.08), rgba(59, 80, 214, 0.06), rgba(108, 139, 255, 0.05));
  --gradient-cool: linear-gradient(135deg, #1e2a78 0%, #3b50d6 100%);
  --gradient-warm: linear-gradient(135deg, #3b50d6 0%, #6c8bff 100%);

  /* ── Functional accents (status only — never for branding) ── */
  --blue: #2563eb;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --cyan: #06b6d4;
  --pink: #ec4899;

  /* ── Neutral scale: cool off-white surfaces that complement the
        navy brand, so sectioning reads as cohesive rather than
        bare grey.  Borders + text follow the same hue. */
  --dark: #0a0e25;
  --dark-2: #111634;
  --dark-3: #1a2049;

  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;

  --border: #e5e9f5;
  --border-strong: #cdd5ea;
  --bg: #ffffff;
  --bg-alt: #f8faff;
  --bg-muted: #eff2fb;

  /* ── Geometry ── */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  /* ── Shadows: layered, slightly navy-tinted. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 6px 16px rgba(15, 23, 42, 0.07), 0 24px 56px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 12px 32px rgba(15, 23, 42, 0.12), 0 40px 80px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 8px 28px rgba(30, 42, 120, 0.25);
  --shadow-glow-coral: 0 8px 28px rgba(59, 80, 214, 0.25);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Belt-and-braces guard against rogue absolutely-positioned
     elements (hero floats, glows) causing a horizontal scrollbar
     on narrow viewports.  Pages should never scroll sideways. */
  overflow-x: hidden;
}
html { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
/* Belt-and-braces wrap rule.  Stops a single long token in copy
   (URL, brand name, code) from forcing a horizontal scrollbar on
   small phones, while preferring normal word boundaries when they
   exist. */
p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Selection ── */
::selection { background: var(--violet-100); color: var(--violet-700); }

/* ─────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 inherit; padding: 12px 22px;
  border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid transparent;
  transition: var(--transition);
  white-space: nowrap; position: relative; overflow: hidden;
  letter-spacing: 0.01em;
}

/* ── Buttons ──
   Flat, decisive fills.  Premium B2B reads as "confident", not
   "playful" — so the primary is a solid navy with a tightened
   hover (subtle lift + soft shadow), not a gradient.  Reserve the
   brand gradient for hero typography and the CTA banner only. */
.btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--primary:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 42, 120, 0.28);
}
.btn--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(30, 42, 120, 0.22); }

.btn--outline {
  background: #fff;
  color: var(--navy);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  background: var(--sky-50);
  border-color: var(--navy);
  color: var(--navy);
}

/* Used on the CTA banner only.  Solid white with navy text reads
   crisper than a transparent ghost button on the saturated
   banner background. */
.btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
}

.btn--ghost-nav {
  background: transparent; color: var(--text-2); border-color: transparent; font-weight: 500;
}
.btn--ghost-nav:hover { color: var(--navy); }

/* White CTA on the navy banner — reverses to navy text for max
   contrast.  Hover stays white (don't dim it) and adds a small
   shadow so the click affordance reads. */
.btn--white {
  background: #fff; color: var(--navy); border-color: #fff;
}
.btn--white:hover {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15px; border-radius: 14px; }
.btn--full { width: 100%; justify-content: center; }

/* Quiet sign-in link in the nav.  Stays neutral so the primary
   CTA next to it owns the eye. */
.btn--login {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
}
.btn--login:hover {
  background: var(--sky-50);
  border-color: var(--navy);
  color: var(--navy);
}
.btn--login svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────
   NAV  — glass with a subtle bottom border that reveals on scroll
   ───────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.nav--scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
/* ── Logo ──
   The brand artwork already contains the mark + wordmark, so the
   `<a class="logo">` element just hosts a single `<img>`.  We let
   the image keep its own aspect ratio and only constrain the
   height so the nav bar stays compact.  Width then scales to
   match (object-fit: contain on the implicit content box). */
.logo {
  display: inline-flex; align-items: center;
  height: 40px;
  line-height: 0;
}
.logo__img {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
/* Footer (dark) variant.  The wordmark is navy on transparent, so
   we invert luminance + tint the result back toward sky to keep
   it readable on the dark footer background. */
.logo--light .logo__img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font: 500 14px/1 inherit; color: var(--text-2);
  transition: var(--transition); padding: 4px 0;
}
.nav__links a:hover { color: var(--violet); }

.nav__right { display: flex; align-items: center; gap: 8px; }
.nav__burger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; flex-direction: column; gap: 5px;
  /* Bigger hit target on touch screens — full 44px square so it
     meets WCAG / Apple HIG tap-target guidance.  Visual is still
     just the three lines (padded). */
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.25s ease;
  transform-origin: center;
}
/* Burger → X animation when the mobile menu is open.  Top + bottom
   lines rotate to form an X; middle line fades out.  Tiny detail
   that makes the nav feel premium on phones. */
.nav__burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────
   HERO  — soft brand glow, gradient title, dashboard mockup,
   floating notification cards, animated trust strip
   ───────────────────────────────────────────────────────── */
.hero {
  padding: 150px 0 100px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(30, 42, 120, 0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(108, 139, 255, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.55; pointer-events: none; }
.hero__glow--1 { width: 640px; height: 640px; background: radial-gradient(circle, rgba(30, 42, 120, 0.16), transparent 70%); top: -240px; right: -120px; }
.hero__glow--2 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(108, 139, 255, 0.10), transparent 70%); bottom: -160px; left: -160px; }
.hero__glow--3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(59, 80, 214, 0.08), transparent 70%); top: 30%; left: 40%; }

.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px;
  align-items: center; position: relative;
}
/* Grid items need `min-width: 0` so their content (long words,
   dashboards, etc.) can shrink below the intrinsic min-content
   width.  Without this CSS Grid blows past the viewport on small
   screens with text that doesn't wrap. */
.hero__content, .hero__visual { min-width: 0; }

.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 10px;
  border-radius: 100px;
  font: 600 13px/1 inherit;
  color: var(--violet-700);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--violet-100);
  backdrop-filter: blur(10px);
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(30, 42, 120, 0.08);
}
.hero__pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
  animation: dotPulse 2s infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }

.hero__title {
  /* Fluid type — clamps between 32px (very small phones) and 56px
     (desktop) with the middle tracking the viewport.  Reads
     beautifully on every screen without per-breakpoint overrides. */
  font-size: clamp(32px, 7vw, 56px);
  font-weight: 800;
  line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: 22px; color: var(--text);
}
/* Hero headline accent — solid navy (the brand colour) so the
   second clause of the headline carries weight without a gradient
   shimmer.  Reads as confident and B2B, not consumer. */
.hero__title-highlight {
  color: var(--navy);
  display: inline;
}
.hero__sub {
  /* Fluid sub-headline — 15px on small phones, 18px on desktop.
     Reads comfortably at any width without the per-breakpoint
     overrides that used to clip text on small viewports. */
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.65; color: var(--text-2);
  margin-bottom: 36px; max-width: 540px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__trust { display: flex; align-items: center; gap: 16px; }
.hero__avatars { display: flex; }
.hero__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; font: 700 13px/36px inherit; text-align: center;
  border: 2.5px solid #fff;
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(20, 17, 42, 0.15);
}
.hero__avatar:first-child { margin-left: 0; }
.hero__stars { color: var(--amber); font-size: 14px; letter-spacing: 1px; }
.hero__trust-text span { font-size: 13px; color: var(--text-3); }

/* Hero Dashboard Mockup */
.hero__visual { position: relative; }
.hero__dashboard {
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
}
.hero__dashboard::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(30, 42, 120, 0.20), transparent 70%);
  pointer-events: none;
}
.hero__dash-header {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  background: rgba(0, 0, 0, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}
.hero__dash-dots { display: flex; gap: 6px; }
.hero__dash-dots span { width: 11px; height: 11px; border-radius: 50%; }
.hero__dash-dots span:nth-child(1) { background: #ff5f56; }
.hero__dash-dots span:nth-child(2) { background: #ffbd2e; }
.hero__dash-dots span:nth-child(3) { background: #27c93f; }
.hero__dash-header > span { font: 500 12px/1 inherit; color: var(--text-3); }
.hero__dash-body { display: flex; min-height: 280px; position: relative; }
.hero__dash-sidebar {
  width: 130px; background: rgba(0, 0, 0, 0.20);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  padding: 14px 0;
}
.hero__dash-nav-item {
  padding: 10px 16px; font: 500 12px/1 inherit;
  color: var(--text-3); cursor: default; transition: var(--transition);
  border-left: 2px solid transparent;
}
.hero__dash-nav-item.active {
  color: #fff; background: rgba(30, 42, 120, 0.18);
  border-left-color: var(--violet);
}
.hero__dash-main { flex: 1; padding: 18px; }
.hero__dash-stats { display: flex; gap: 10px; margin-bottom: 18px; }
.hero__dash-stat {
  flex: 1; background: rgba(255, 255, 255, 0.04);
  border-radius: 10px; padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative; overflow: hidden;
}
.hero__dash-stat::before {
  content: ''; position: absolute; top: 0; left: 0; width: 32px; height: 2px;
  background: var(--accent, var(--violet));
}
.hero__dash-stat span {
  display: block; font: 800 22px/1 inherit;
  color: var(--accent, #fff);
}
.hero__dash-stat small {
  font: 500 10px/1 inherit; color: var(--text-3);
  margin-top: 4px; display: block;
}
.hero__dash-chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 90px; padding: 8px 0;
}
.hero__dash-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating notification cards on hero */
.hero__float {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  animation: floatUp 3.5s ease-in-out infinite alternate;
  z-index: 2; border: 1px solid rgba(255, 255, 255, 0.8);
}
.hero__float--1 { top: 30px; right: -28px; animation-delay: 0s; }
.hero__float--2 { bottom: 50px; left: -38px; animation-delay: 1.5s; }
@keyframes floatUp { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.hero__float-icon {
  width: 38px; height: 38px; border-radius: 11px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.hero__float strong { display: block; font-size: 13px; color: var(--text); }
.hero__float small { font-size: 11px; color: var(--text-3); display: block; }

/* ─────────────────────────────────────────────────────────
   STATS BAR — dark band right under the hero
   ───────────────────────────────────────────────────────── */
.stats-bar {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  padding: 36px 0; position: relative; z-index: 1; overflow: hidden;
}
.stats-bar::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(40% 100% at 0% 50%, rgba(30, 42, 120, 0.25), transparent 60%),
    radial-gradient(40% 100% at 100% 50%, rgba(108, 139, 255, 0.15), transparent 60%);
  pointer-events: none;
}
.stats-bar__inner {
  display: flex; justify-content: center; align-items: center;
  gap: 0; flex-wrap: wrap; position: relative;
}
.stats-bar__item { text-align: center; padding: 0 44px; }
.stats-bar__item strong {
  display: block; font-size: 32px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #c5d0ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats-bar__item span { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.stats-bar__divider { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.12); }

/* ─────────────────────────────────────────────────────────
   SECTIONS
   ───────────────────────────────────────────────────────── */
.section { padding: 110px 0; position: relative; }
.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section__header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
/* Section eyebrow — solid indigo, a pill background, properly
   tracked.  Gradient text at 12px is barely legible; a tinted
   pill reads cleanly and adds a structural hint that "this is
   a label, not body copy". */
.section__eyebrow {
  display: inline-block;
  font: 700 12px/1 inherit;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--navy);
  background: var(--sky-50);
  border: 1px solid var(--sky-100);
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.section__title {
  /* Fluid scale 26 → 42px between narrow phones and desktop so the
     per-breakpoint overrides further down can be removed. */
  font-size: clamp(26px, 4.5vw, 42px);
  font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: 16px; color: var(--text);
}
.section__desc {
  font-size: 17px; color: var(--text-2); line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────
   FEATURE TABS
   ───────────────────────────────────────────────────────── */
.ftabs__nav {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 48px; flex-wrap: wrap;
}
.ftabs__btn {
  padding: 11px 24px; border-radius: 100px;
  font: 600 14px/1 inherit; color: var(--text-2);
  background: var(--bg); border: 1.5px solid var(--border);
  cursor: pointer; transition: var(--transition);
}
.ftabs__btn:hover {
  border-color: var(--violet);
  color: var(--violet-700);
  transform: translateY(-1px);
}
.ftabs__btn.active {
  background: var(--navy);
  color: #fff; border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(30, 42, 120, 0.22);
}
.ftabs__panel { display: none; animation: fadeIn 0.4s ease; }
.ftabs__panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ftabs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}

.fcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px; transition: var(--transition);
  position: relative; overflow: hidden;
}
.fcard::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-brand-soft);
  opacity: 0; transition: var(--transition);
  pointer-events: none;
}
.fcard:hover {
  border-color: var(--violet-100);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.fcard:hover::before { opacity: 1; }
.fcard > * { position: relative; z-index: 1; }
.fcard__icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: var(--transition);
}
.fcard:hover .fcard__icon { transform: scale(1.06) rotate(-2deg); }
.fcard h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.fcard p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }

/* ─────────────────────────────────────────────────────────
   WHY US — numbered cards with gradient corner
   ───────────────────────────────────────────────────────── */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.why-card::before {
  content: ''; position: absolute;
  top: -2px; right: -2px;
  width: 100px; height: 100px;
  background: var(--gradient-brand);
  filter: blur(40px); opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.why-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.why-card:hover::before { opacity: 0.18; }
.why-card__num {
  font: 800 56px/1 inherit;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.18;
  position: absolute; top: 14px; right: 22px;
  letter-spacing: -0.04em;
}
.why-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; position: relative; }
.why-card p { font-size: 14px; color: var(--text-2); line-height: 1.7; position: relative; }

/* ─────────────────────────────────────────────────────────
   SPOTLIGHT (Transport)
   ───────────────────────────────────────────────────────── */
.spotlight__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center;
}
.spotlight__desc {
  font-size: 17px; color: var(--text-2); line-height: 1.7; margin-bottom: 32px;
}
.spotlight__list { display: flex; flex-direction: column; gap: 22px; }
.spotlight__item { display: flex; gap: 16px; align-items: flex-start; }
.spotlight__check {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
  box-shadow: 0 3px 8px rgba(30, 42, 120, 0.22);
}
.spotlight__item strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.spotlight__item div:last-child { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Phone mockup */
.phone {
  width: 296px; margin: 0 auto;
  background: linear-gradient(180deg, #1a1830 0%, #0a0817 100%);
  border-radius: 44px; padding: 8px;
  position: relative;
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone__notch {
  width: 110px; height: 26px;
  background: #0a0817;
  border-radius: 0 0 18px 18px;
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%); z-index: 3;
}
.phone__screen {
  background: #fff; border-radius: 36px;
  overflow: hidden; position: relative;
}
.phone__status-bar {
  display: flex; justify-content: space-between;
  padding: 16px 26px 8px;
  font: 600 12px/1 inherit; color: #000;
  position: relative; z-index: 4;
}
.phone__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 22px 14px;
  font: 700 17px/1 inherit; color: var(--text);
}
.phone__live-badge {
  font: 700 10px/1 inherit; color: #fff;
  background: var(--red);
  padding: 5px 11px; border-radius: 100px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.phone__map {
  position: relative; height: 220px;
  background: linear-gradient(160deg, #ede9fe 0%, #fce7f3 50%, #ffedd5 100%);
  overflow: hidden;
}
.phone__map-road {
  position: absolute; left: 8%; top: 8%;
  width: 84%; height: 84%;
  border: 3px dashed rgba(30, 42, 120, 0.35);
  border-radius: 50%;
  transform: rotate(-20deg);
}
.phone__map-bus {
  position: absolute; top: 42%; left: 48%;
  font-size: 30px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
  animation: busMove 4s ease-in-out infinite alternate;
}
@keyframes busMove { from { transform: translate(0, 0); } to { transform: translate(14px, -10px); } }
.phone__map-marker {
  position: absolute; width: 26px; height: 26px;
  border-radius: 50%; background: #cbd5e1; color: #fff;
  font: 700 11px/26px inherit; text-align: center;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.phone__map-marker--done { background: var(--green); }
.phone__map-marker--active {
  background: var(--navy);
  box-shadow: 0 0 0 8px rgba(30, 42, 120, 0.18), 0 2px 8px rgba(0, 0, 0, 0.18);
  animation: markerPulse 2s ease-in-out infinite;
}
@keyframes markerPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(30, 42, 120, 0.18), 0 2px 8px rgba(0, 0, 0, 0.18); }
  50% { box-shadow: 0 0 0 12px rgba(30, 42, 120, 0.08), 0 2px 8px rgba(0, 0, 0, 0.18); }
}
.phone__info-bar {
  display: flex; padding: 16px;
  border-top: 1px solid var(--border);
}
.phone__info { flex: 1; text-align: center; }
.phone__info small { display: block; font-size: 10.5px; color: var(--text-3); margin-bottom: 3px; }
.phone__info strong { font-size: 17px; }
.phone__alert {
  margin: 0 14px 16px;
  padding: 12px 16px;
  background: var(--gradient-brand-soft);
  border: 1px solid rgba(30, 42, 120, 0.16);
  border-radius: 12px;
  font: 600 12.5px/1.4 inherit;
  color: var(--violet-700);
  display: flex; align-items: center; gap: 10px;
}

/* ─────────────────────────────────────────────────────────
   ROLES
   ───────────────────────────────────────────────────────── */

/* Inline gradient phrase for headings (used by the Roles title to
   highlight "unlimited roles" without dragging the whole headline
   into colour). */
/* Inline emphasis inside a heading — solid indigo so the phrase
   stands out without dragging the whole line into colour. */
.section__title-grad {
  color: var(--indigo);
}

/* Capability chips under the Roles section header.  Visually
   communicates that every role is configured per-module with
   create / view / edit / delete granularity — the ACL story without
   a wall of text. */
.section__chips {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin-top: 22px;
}
.role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  font: 600 12.5px/1 inherit; color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
}
.role-chip--accent {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 4px 12px rgba(30, 42, 120, 0.20);
}

.roles__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.role-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 28px;
  text-align: center; transition: var(--transition);
  position: relative;
}
.role-card:hover {
  border-color: var(--violet-100);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.role-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 6px 16px rgba(20, 17, 42, 0.15);
}
.role-card__icon svg { width: 24px; height: 24px; }
.role-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.role-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }

/* "+ Add Custom Role" card — dashed border + transparent fill so
   it visually reads as an empty slot the school can fill, rather
   than another fixed role.  Hover lifts the same as siblings but
   borrows the brand gradient on the border. */
.role-card--add {
  background: transparent;
  border: 2px dashed var(--violet-100);
  box-shadow: none;
}
.role-card--add:hover {
  background: var(--bg);
  border-style: dashed;
  border-color: var(--violet);
}
.role-card--add h3 {
  color: var(--indigo);
}
.role-card__icon--ghost {
  background: var(--sky-50) !important;
  color: var(--indigo);
  border: 1.5px dashed var(--sky-100);
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────
   TESTIMONIALS
   ───────────────────────────────────────────────────────── */
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testimonial {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.testimonial::before {
  content: '"';
  position: absolute; top: -32px; right: 18px;
  font: 800 160px/1 'Plus Jakarta Sans', serif;
  color: var(--navy);
  opacity: 0.08; pointer-events: none;
}
.testimonial:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--violet-100);
  transform: translateY(-3px);
}
.testimonial__stars { color: var(--amber); font-size: 16px; margin-bottom: 18px; letter-spacing: 2px; }
.testimonial p { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 24px; position: relative; }
.testimonial__author { display: flex; align-items: center; gap: 14px; position: relative; }
.testimonial__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font: 700 17px/44px inherit;
  text-align: center; flex-shrink: 0;
}
.testimonial__author strong { display: block; font-size: 14px; color: var(--text); }
.testimonial__author span { font-size: 12px; color: var(--text-3); }

/* ─────────────────────────────────────────────────────────
   PRICING
   ───────────────────────────────────────────────────────── */
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  align-items: start;
}
.price-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 20px; padding: 0; overflow: hidden;
  transition: var(--transition); position: relative;
}
.price-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.price-card--pop {
  border: 2px solid var(--navy);
  box-shadow: 0 8px 24px rgba(30, 42, 120, 0.14);
  transform: scale(1.03);
}
.price-card--pop:hover { transform: scale(1.03) translateY(-3px); }
.price-card__pop-badge {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--navy); color: #fff;
  text-align: center; font: 700 12px/1 inherit;
  padding: 9px; letter-spacing: 0.6px;
}
.price-card__header { padding: 40px 30px 24px; text-align: center; }
.price-card--pop .price-card__header { padding-top: 56px; }
.price-card__header h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.price-card__price {
  font-size: 52px; font-weight: 800;
  color: var(--text); letter-spacing: -0.025em;
  line-height: 1;
}
.price-card--pop .price-card__price {
  color: var(--navy);
}
.price-card__price small { font-size: 16px; font-weight: 500; color: var(--text-3); }
.price-card__header p { font-size: 14px; color: var(--text-3); margin-top: 10px; }
.price-card__features { padding: 0 30px; margin-bottom: 28px; }
.price-card__features li {
  padding: 12px 0 12px 28px;
  font-size: 14px; color: var(--text-2);
  border-bottom: 1px solid var(--bg-muted);
  position: relative;
}
.price-card__features li:last-child { border: none; }
.price-card__features li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 16px; height: 16px;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}
.price-card__features li strong {
  color: var(--navy);
  font-weight: 700;
}
.price-card .btn { margin: 0 30px 30px; width: calc(100% - 60px); }

/* ─────────────────────────────────────────────────────────
   CTA BANNER  — solid navy with a very soft directional sheen.
   The earlier multi-stop brand gradient pulled too much focus
   from the headline + actions; a single navy field with a
   restrained highlight reads premium and lets the buttons own
   the attention.
   ───────────────────────────────────────────────────────── */
.cta-banner {
  background: var(--navy);
  padding: 80px 0;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(108, 139, 255, 0.18), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
  pointer-events: none;
}
.cta-banner__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap; position: relative;
}
.cta-banner h2 {
  font-size: 36px; font-weight: 800; color: #fff;
  margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.15;
}
.cta-banner p {
  font-size: 17px; color: rgba(255, 255, 255, 0.92);
  max-width: 520px; line-height: 1.55;
}
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────────────────── */
.contact__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: start;
}
.contact__info > p {
  font-size: 17px; color: var(--text-2);
  line-height: 1.7; margin-bottom: 32px;
}
.contact__checks { display: flex; flex-direction: column; gap: 14px; }
.contact__check {
  display: flex; align-items: center; gap: 12px;
  font: 500 14.5px/1 inherit; color: var(--text);
}
.contact__check span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.contact__form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font: 600 13px/1 inherit;
  color: var(--text); margin-bottom: 7px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  /* 16px is the magic number — anything smaller triggers iOS
     Safari's auto-zoom on focus, which yanks the layout around
     and looks unprofessional.  Stay above the threshold. */
  font: 400 16px/1.5 inherit;
  transition: var(--transition);
  background: var(--bg-alt);
  font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--violet);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30, 42, 120, 0.10);
}
.form-group textarea { resize: vertical; min-height: 96px; }

/* ─────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────── */
.faq__list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px; overflow: hidden;
  transition: var(--transition); background: #fff;
}
.faq-item[open] {
  border-color: var(--violet-100);
  box-shadow: 0 4px 20px rgba(30, 42, 120, 0.08);
}
.faq-item summary {
  padding: 20px 26px;
  font: 600 16px/1.4 inherit; color: var(--text);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 26px; font-weight: 300; color: var(--text-3);
  transition: transform 0.2s ease;
  flex-shrink: 0; margin-left: 16px;
  width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
}
.faq-item[open] summary::after {
  content: '−';
  background: var(--navy); color: #fff;
}
.faq-item[open] summary { color: var(--navy); }
.faq-item p {
  padding: 0 26px 22px;
  font-size: 14.5px; color: var(--text-2); line-height: 1.75;
}

/* ─────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, var(--dark) 0%, #050410 100%);
  color: #fff; padding: 80px 0 32px;
  position: relative; overflow: hidden;
}
.footer::before {
  content: ''; position: absolute;
  top: -200px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(50% 50%, rgba(30, 42, 120, 0.20), transparent 70%);
  pointer-events: none;
}
.footer__top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px; margin-bottom: 56px; position: relative;
}
.footer__brand p {
  font-size: 14px; color: rgba(255, 255, 255, 0.6);
  margin-top: 18px; line-height: 1.65; max-width: 280px;
}
.footer__col h4 {
  font: 700 13px/1 inherit; color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.footer__col a {
  display: block; font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 0; transition: var(--transition);
}
.footer__col a:hover { color: var(--coral); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 28px;
  font-size: 13px; color: rgba(255, 255, 255, 0.45);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* "Powered by Amigo Smart Tech" — small attribution on the right
   of the footer.  Stays understated so it doesn't compete with the
   NovaClassHub brand above, but the link is clickable + opens in
   a new tab. */
.footer__poweredby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.45);
}
.footer__poweredby-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1px;
  transition: var(--transition);
}
.footer__poweredby-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ─────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────
   Four breakpoints, mobile-up logic:
     • ≤1024 : tablet — single-column hero, 2-col grids
     • ≤768  : phone landscape / large phone — burger nav, single-col
     • ≤560  : standard phone — hide hero floats, tighten paddings
     • ≤400  : small phone — single-col footer, fluid logo
   Title sizes are handled via `clamp()` on the base rules so the
   per-breakpoint font-size overrides aren't needed here.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 56px; text-align: center; }
  .hero__sub { margin: 0 auto 32px; max-width: 100%; }
  .hero__ctas { justify-content: center; }
  .hero__trust { justify-content: center; }
  .hero__visual { max-width: 540px; margin: 0 auto; }
  /* Hide the floating notification cards on tablet and below —
     they were causing horizontal overflow with their negative
     positioning and never read clearly at smaller sizes anyway. */
  .hero__float { display: none; }
  .ftabs__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight__grid { grid-template-columns: 1fr; gap: 56px; }
  .spotlight__visual { order: -1; }
  .roles__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Tighter container — 20px gutters instead of 24px so cards
     get more usable width on the typical 360-414px phone. */
  .container { padding: 0 20px; }

  /* Mobile nav menu — slides down from the bar with a soft
     border, hidden until burger is tapped.  Reset legacy
     hover styling that read as an underline shimmer. */
  .nav__links {
    display: none; position: fixed; top: 72px; left: 0; right: 0;
    background: #fff; flex-direction: column;
    padding: 8px 20px 16px;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav__links.active { display: flex; }
  .nav__links a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
  }
  .nav__links li:last-child a { border-bottom: none; }
  .nav__burger { display: flex; }
  /* On mobile the primary CTA in the nav and any ghost-nav link
     are hidden — the burger menu carries them.  Login pill stays
     because that's the highest-intent action. */
  .nav__right .btn--ghost-nav, .nav__right .btn--primary { display: none; }

  /* Hero gets a touch less vertical breathing room on phones. */
  .hero { padding: 120px 0 56px; }

  /* Stats bar — 2-up grid is cleaner than wrap-flex on small
     viewports.  Removes the awkward "14-day" reflow. */
  .stats-bar { padding: 32px 0; }
  .stats-bar__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  .stats-bar__divider { display: none; }
  .stats-bar__item { padding: 0; text-align: center; }
  .stats-bar__item strong { font-size: 24px; }
  .stats-bar__item span { font-size: 12px; }

  .section { padding: 56px 0; }

  /* Feature tabs — overflow horizontally instead of wrapping to
     ragged rows.  Snap-scroll gives a polished phone feel. */
  .ftabs__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -20px 36px;
    padding: 0 20px;
    /* Hide scrollbar on Webkit; Firefox uses `scrollbar-width`. */
    scrollbar-width: none;
  }
  .ftabs__nav::-webkit-scrollbar { display: none; }
  .ftabs__btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 18px;
  }

  /* All multi-col grids collapse to single column. */
  .ftabs__grid, .why__grid, .roles__grid, .testimonials__grid, .pricing__grid {
    grid-template-columns: 1fr;
  }
  .price-card--pop { transform: none; }
  .price-card--pop:hover { transform: translateY(-3px); }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner { padding: 56px 0; }
  .cta-banner__inner { flex-direction: column; text-align: center; gap: 24px; }
  .cta-banner__actions { width: 100%; justify-content: center; }
  .cta-banner__actions .btn { flex: 1; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Footer-bottom stacks centred on mobile so the powered-by line
     doesn't collide with the copyright. */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* Touch-target lift — 44px min height for primary actions. */
  .btn--lg { padding: 14px 22px; font-size: 15px; }
  .btn--sm { padding: 11px 16px; font-size: 13px; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  /* Constrain the long horizontal logo so it never crowds the
     burger / sign-in buttons on small phones. */
  .logo__img { max-width: 150px; height: 34px; }
  /* Hero CTAs stack and span full width — clearer hierarchy. */
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .hero__pill {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* Smaller pill on phones — long "Trusted by 50+ schools…" was
       breaking the visual rhythm. */
    font-size: 12px;
    padding: 7px 14px 7px 10px;
  }
  /* Hero visual — must never exceed the viewport.  width:100% lets
     the dashboard mock fill the column without overflowing. */
  .hero__visual { width: 100%; max-width: 480px; }
  .hero__dashboard { width: 100%; }

  /* Phone mock — scale down so it fits comfortably with margins. */
  .phone { width: 240px; }
  .spotlight__visual { display: flex; justify-content: center; }

  /* Tighten cards / testimonials so they don't waste padding. */
  .testimonial { padding: 24px 20px; }
  .fcard { padding: 24px 22px; }
  .why-card { padding: 28px 24px; }
  .price-card__header { padding: 32px 24px 20px; }
  .price-card--pop .price-card__header { padding-top: 48px; }

  /* Hero dashboard mock — tighten the sidebar + body padding so it
     fits comfortably on small phones without horizontal squashing. */
  .hero__dashboard { border-radius: 14px; }
  .hero__dash-body { min-height: 220px; }
  .hero__dash-sidebar { width: 88px; padding: 10px 0; }
  .hero__dash-nav-item { padding: 8px 10px; font-size: 11px; }
  .hero__dash-main { padding: 12px; min-width: 0; }
  .hero__dash-stats { gap: 6px; margin-bottom: 12px; }
  .hero__dash-stat { padding: 8px 10px; min-width: 0; }
  .hero__dash-stat span { font-size: 18px; }
  .hero__dash-stat small { font-size: 9px; }
  .hero__dash-chart { height: 84px; }
}

/* iPhone SE / older Android territory (~320-400px).  Below this
   we shrink the dashboard mock dramatically, drop the legacy
   sidebar nav since it's no longer readable, and stack the stats
   so each one gets its own row. */
@media (max-width: 400px) {
  .container { padding: 0 14px; }
  /* Single-column footer for very small phones — 2-col gets
     cramped below this width. */
  .footer__top { grid-template-columns: 1fr; gap: 24px; }
  /* Slightly smaller logo so the burger has room to breathe. */
  .logo__img { max-width: 130px; height: 30px; }
  /* Single-column stats for very narrow phones too. */
  .stats-bar__inner { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .stats-bar__item strong { font-size: 22px; }

  /* Hero dashboard — drop the sidebar entirely (it's just chrome at
     this size).  Chart + stats stay; that's the actual story. */
  .hero__dash-header { padding: 10px 12px; }
  .hero__dash-header > span { font-size: 10px; }
  .hero__dash-body { flex-direction: column; min-height: auto; }
  .hero__dash-sidebar { display: none; }
  .hero__dash-main { padding: 14px; }
  .hero__dash-stats { gap: 8px; }
  .hero__dash-stat span { font-size: 20px; }

  /* Phone mock further down to 220px so it has air on either side. */
  .phone { width: 220px; border-radius: 38px; }
  .phone__screen { border-radius: 32px; }

  /* Hero pill — keep it punchy but readable. */
  .hero__pill { font-size: 11.5px; }

  /* Spotlight items — vertical rhythm tighter so the list reads as
     one scan instead of six paragraphs. */
  .spotlight__list { gap: 16px; }
  .spotlight__item div:last-child { font-size: 13.5px; }

  /* Tighter card paddings everywhere. */
  .fcard { padding: 20px 18px; }
  .why-card { padding: 24px 20px; }
  .testimonial { padding: 22px 18px; }

  /* Smaller trust avatars on tiny phones. */
  .hero__avatar { width: 32px; height: 32px; line-height: 32px; font-size: 12px; }
  .hero__trust { gap: 12px; flex-wrap: wrap; justify-content: center; }
  .hero__trust-text span { font-size: 12px; }
}