/* ═══════════════════════════════════════════════════
   EDUVORA360 — Professional Coaching Management SaaS
   Fonts: Plus Jakarta Sans (UI) + Lora (serif accents)
   Theme: App-matched dark → clean light content
   ═══════════════════════════════════════════════════ */

/* Fonts loaded via <link> in index.php for better performance */

/* ── Tokens (match SmartEduManage app palette) ── */
:root {
  /* Dark backgrounds — same as app */
  --ink:          #0a0e1a;
  --ink-2:        #0f172a;
  --ink-3:        #1e293b;
  --ink-4:        #334155;
  --ink-border:   rgba(148,163,184,.1);

  /* Light section backgrounds */
  --bg:           #f5f7fa;
  --bg-2:         #edf0f5;
  --white:        #ffffff;

  /* Brand violet — matches app exactly */
  --violet:       #7c3aed;
  --violet-soft:  #a78bfa;
  --violet-bg:    rgba(124,58,237,.1);
  --violet-border:rgba(124,58,237,.22);

  /* App accent colors */
  --amber:        #f59e0b;
  --teal:         #14b8a6;
  --blue:         #60a5fa;
  --green:        #4ade80;
  --rose:         #f87171;

  /* Dark section text — matches app */
  --d-heading:    #e2e8f0;
  --d-body:       #94a3b8;
  --d-muted:      #64748b;
  --d-subtle:     #475569;
  --d-border:     rgba(148,163,184,.08);

  /* Light section text */
  --l-heading:    #0f172a;
  --l-body:       #374151;
  --l-muted:      #6b7280;
  --l-light:      #9ca3af;
  --l-border:     rgba(0,0,0,.08);

  /* Fonts */
  --font:         'Plus Jakarta Sans', system-ui, sans-serif;
  --serif:        'Lora', Georgia, serif;

  /* Layout */
  --max:          1400px;
  --pad:          clamp(24px, 4vw, 80px);
  --sy:           96px;   /* section vertical padding */
  --r:            12px;
  --r-lg:         18px;
  --r-xl:         24px;
}

/* ── Large screens ─────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --max: 1520px;
    --sy: 112px;
  }
}
@media (min-width: 1920px) {
  :root {
    --max: 1680px;
  }
}

/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--violet) 0%, var(--violet-soft) 100%);
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}
body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--d-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ── Shared typography ─────────────────────────── */
/* Section eyebrow pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-soft);
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.eyebrow.dark { color: var(--violet); background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.16); }
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--violet);
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 50px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

/* Section heading — Lora serif for educated/scholarly feel */
.sec-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--d-heading);
  margin-bottom: 14px;
}
.sec-title.dark { color: var(--l-heading); }
.sec-title em { font-style: italic; color: var(--violet-soft); }
.sec-title.dark em { color: var(--violet); }

.sec-sub {
  font-size: .96rem;
  line-height: 1.72;
  color: var(--d-body);
  max-width: 640px;
}
.sec-sub.dark { color: var(--l-muted); }
.sec-sub.center { margin: 0 auto; text-align: center; }

/* ── Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 2px 14px rgba(124,58,237,.32);
}
.btn-primary:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(124,58,237,.42);
  color: #fff;
}
.btn-ghost {
  background: rgba(255,255,255,.06);
  color: var(--d-heading);
  border-color: rgba(255,255,255,.11);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--violet);
  border-color: var(--violet-border);
}
.btn-outline:hover {
  background: var(--violet-bg);
  border-color: var(--violet);
}
.btn-outline-violet {
  background: rgba(124,58,237,.12);
  color: #a78bfa;
  border: 1.5px solid rgba(124,58,237,.35);
}
.btn-outline-violet:hover {
  background: rgba(124,58,237,.22);
  border-color: #7c3aed;
  color: #c4b5fd;
}
.btn-lg { padding: 13px 30px; font-size: .93rem; }
.btn-sm { padding: 8px 16px; font-size: .78rem; }

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════
   MOBILE EARLY ACCESS BAR
   ══════════════════════════════════════════════ */
.mob-ea-bar {
  display: none; /* desktop pe hidden */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  background: linear-gradient(90deg, #1e1030, #2d1a4a);
  border-bottom: 1px solid rgba(124,58,237,.3);
  padding: 7px 16px;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  color: #e2e8f0;
}
.mob-ea-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a855f7;
  flex-shrink: 0;
  animation: eaNavPulse 2s ease-in-out infinite;
}
.mob-ea-text strong { color: #4ade80; font-weight: 800; }
.mob-ea-divider {
  width: 1px; height: 12px;
  background: rgba(124,58,237,.35);
  flex-shrink: 0;
}
.mob-ea-timer {
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  color: #c4b5fd;
  font-weight: 600;
  flex: 1;
}
.mob-ea-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(124,58,237,.25);
  border: 1px solid rgba(124,58,237,.4);
  color: #c4b5fd;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.mob-ea-cta:hover { background: rgba(124,58,237,.4); color: #e2e8f0; }

@media (max-width: 768px) {
  .mob-ea-bar { display: flex; }
  /* Nav pushed below EA bar (34px tall) */
  #nav { top: 34px !important; }
}

/* ══════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════ */
#nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  padding: 16px 0;
  transition: background .28s, border-color .28s;
  border-bottom: 1px solid transparent;
}
#nav.stuck {
  background: rgba(10,14,26,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(148,163,184,.07);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
/* Brand + pill group */
.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-mark {
  width: 33px; height: 33px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,.38);
  flex-shrink: 0;
}
.nav-name {
  font-size: .98rem;
  font-weight: 800;
  color: var(--d-heading);
  letter-spacing: -.02em;
}
.nav-name sub {
  font-size: .55rem;
  font-weight: 700;
  color: var(--violet-soft);
  vertical-align: baseline;
  position: relative;
  top: 0px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-360 {
  font-size: 1em;
  font-weight: 800;
  color: var(--violet-soft);
  letter-spacing: -.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-links a {
  font-size: .84rem;
  font-weight: 500;
  color: var(--d-body);
  padding: 6px 12px;
  border-radius: 7px;
  transition: color .15s, background .15s;
  position: relative;
}
.nav-links a:hover { color: var(--d-heading); background: rgba(255,255,255,.05); }
.nav-links a.nav-active {
  color: var(--d-heading);
  background: rgba(255,255,255,.06);
}
.nav-links a.nav-active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px;
  background: #a855f7;
  border-radius: 2px;
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Login button in nav — replaces inline style */
.btn-nav-login {
  background: rgba(167,139,250,.1);
  border: 1px solid rgba(167,139,250,.3);
  color: #a78bfa;
}
.btn-nav-login:hover {
  background: rgba(167,139,250,.18);
  border-color: rgba(167,139,250,.5);
  color: #c4b5fd;
}
.btn-nav-login i { font-size: .75rem; }

/* Early Access pill in nav */
.nav-ea-pill {
  display: none; /* hidden by default, shown when nav is stuck */
  align-items: center;
  gap: 7px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 50px;
  padding: 5px 13px 5px 10px;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 700;
  color: #a78bfa;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease, background .2s, border-color .2s;
}
.nav-ea-pill:hover {
  background: rgba(124,58,237,.16);
  border-color: rgba(124,58,237,.4);
  text-decoration: none;
  color: #c4b5fd;
}
nav.stuck .nav-ea-pill {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.nav-ea-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a855f7;
  flex-shrink: 0;
  animation: eaNavPulse 2s ease-in-out infinite;
}
@keyframes eaNavPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}
.nav-ea-text {
  color: #4ade80;
  font-weight: 800;
  letter-spacing: .02em;
}
.nav-ea-divider {
  width: 1px;
  height: 12px;
  background: rgba(124,58,237,.3);
  flex-shrink: 0;
}
.nav-ea-timer {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #c4b5fd;
  font-size: .72rem;
}

/* Hide pill on mobile — not enough space */
@media (max-width: 768px) {
  .nav-ea-pill { display: none !important; }
}

/* Mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  width: 40px; height: 40px;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, opacity .2s;
  position: relative;
  z-index: 1001;
}
.nav-burger:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.nav-burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--d-body);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              opacity   .2s ease,
              width     .2s ease;
  pointer-events: none;
}
/* Hide burger when drawer open — drawer has its own close button */
.nav-burger.open { opacity: 0; pointer-events: none; }
.nav-burger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-burger.open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-burger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Nav Overlay ─────────────────────────────────────── */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 20, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 998;
  opacity: 0;
  transition: opacity .35s ease;
}
.nav-overlay.show    { display: block; }
.nav-overlay.visible { opacity: 1; }

/* ── Drawer Shell ─────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 90vw);
  height: 100dvh;
  z-index: 999;
  transform: translateX(105%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nav-drawer.open { transform: translateX(0); }

/* Layered background */
.nav-drawer::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 80% -10%, rgba(124,58,237,.28) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at -10% 100%, rgba(8,145,178,.18) 0%, transparent 55%),
    linear-gradient(160deg, #0d1224 0%, #080d1a 100%);
  z-index: 0;
}
/* Noise texture */
.nav-drawer::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.04'/%3E%3C/svg%3E");
  z-index: 0;
  pointer-events: none;
}

/* ── Inner Layout ─────────────────────────────────────── */
.nav-drawer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 28px;
}

/* ── Drawer Header ─────────────────────────────────────── */
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.nav-drawer-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(124,58,237,.45);
  flex-shrink: 0;
}
.nav-drawer-wordmark {
  font-size: .88rem;
  font-weight: 800;
  color: var(--d-heading);
  letter-spacing: -.02em;
}
.nav-drawer-wordmark span {
  color: var(--violet-soft);
}
/* Close button */
.nav-drawer-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--d-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.nav-drawer-close:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.16);
  color: var(--d-heading);
}

/* ── Nav Links ─────────────────────────────────────── */
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 14px 8px;
}
.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--d-body);
  font-size: .93rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: color .2s;
  /* Stagger animation */
  opacity: 0;
  transform: translateX(18px);
}
.nav-drawer.open .nav-drawer-link {
  animation: drawerLinkIn .4s cubic-bezier(.16,1,.3,1) forwards;
}
.nav-drawer.open .nav-drawer-link:nth-child(1) { animation-delay: .05s; }
.nav-drawer.open .nav-drawer-link:nth-child(2) { animation-delay: .10s; }
.nav-drawer.open .nav-drawer-link:nth-child(3) { animation-delay: .15s; }
.nav-drawer.open .nav-drawer-link:nth-child(4) { animation-delay: .20s; }
.nav-drawer.open .nav-drawer-link:nth-child(5) { animation-delay: .25s; }

@keyframes drawerLinkIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Hover glow bg */
.nav-drawer-link::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  opacity: 0;
  transition: opacity .2s;
}
.nav-drawer-link:hover::before { opacity: 1; }
.nav-drawer-link:hover { color: var(--d-heading); text-decoration: none; }

/* Icon box */
.nd-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
  flex-shrink: 0;
  transition: transform .25s;
}
.nav-drawer-link:hover .nd-icon { transform: scale(1.1); }

/* Per-link icon colors — matches nav order: How It Works · Features · Pricing · FAQ · Contact */
.nav-drawer-link:nth-child(1) .nd-icon { background: rgba(20,184,166,.12);  color: #2dd4bf; } /* How It Works — teal   */
.nav-drawer-link:nth-child(2) .nd-icon { background: rgba(124,58,237,.15);  color: #a78bfa; } /* Features     — violet */
.nav-drawer-link:nth-child(3) .nd-icon { background: rgba(251,191,36,.10);  color: #fbbf24; } /* Pricing      — amber  */
.nav-drawer-link:nth-child(4) .nd-icon { background: rgba(96,165,250,.12);  color: #60a5fa; } /* FAQ          — blue   */
.nav-drawer-link:nth-child(5) .nd-icon { background: rgba(248,113,113,.12); color: #f87171; } /* Contact      — red    */

.nd-label { flex: 1; }
.nd-arrow {
  font-size: .72rem;
  color: var(--d-subtle);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.nav-drawer-link:hover .nd-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Divider ─────────────────────────────────────── */
.nav-drawer-divider {
  height: 1px;
  margin: 8px 20px 16px;
  background: linear-gradient(90deg,
    transparent,
    rgba(124,58,237,.25) 30%,
    rgba(124,58,237,.25) 70%,
    transparent
  );
}

/* ── CTA Block ─────────────────────────────────────── */
.nav-drawer-ctas {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
}
.nav-drawer.open .nav-drawer-ctas {
  animation: drawerCtaIn .4s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes drawerCtaIn {
  to { opacity: 1; transform: translateY(0); }
}

.nav-drawer-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-size: .88rem;
  font-weight: 600;
  color: var(--d-body);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.nav-drawer-login:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--d-heading);
  text-decoration: none;
}
.nav-drawer-login i { font-size: .85rem; }

/* Override btn inside drawer */
.nav-drawer-ctas .btn.btn-primary {
  border-radius: 12px !important;
  font-size: .88rem;
}

/* ── Stats strip ─────────────────────────────────────── */
.nav-drawer-stats {
  margin: 18px 14px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
}
.nav-drawer.open .nav-drawer-stats {
  animation: drawerCtaIn .4s cubic-bezier(.16,1,.3,1) .32s forwards;
}
.nd-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.nd-stat-n {
  font-size: .95rem;
  font-weight: 800;
  color: var(--d-heading);
  letter-spacing: -.02em;
  line-height: 1;
}
.nd-stat-l {
  font-size: .65rem;
  color: var(--d-muted);
  margin-top: 3px;
  letter-spacing: .02em;
}

/* ── Legal Footer ─────────────────────────────────────── */
.nav-drawer-legal {
  margin-top: auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .7rem;
  color: var(--d-subtle);
}
.nav-drawer-legal a {
  color: var(--d-subtle);
  text-decoration: none;
  transition: color .15s;
}
.nav-drawer-legal a:hover { color: var(--d-muted); }
.nav-drawer-legal span { opacity: .35; font-size: .6rem; }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
#hero {
  background: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 128px 0 96px;
  position: relative;
  overflow: hidden;
}

/* ── Animated background ── */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.hero-orb-1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(124,58,237,.22), transparent 70%);
  top: -240px; left: -180px;
  animation: orbDrift1 12s ease-in-out infinite;
}
.hero-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(167,139,250,.14), transparent 70%);
  bottom: -180px; right: -120px;
  animation: orbDrift2 15s ease-in-out infinite 2s;
}
.hero-orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(192,132,252,.1), transparent 70%);
  top: 50%; left: 42%;
  animation: orbDrift3 18s ease-in-out infinite 4s;
}
@keyframes orbDrift1 {
  0%,100% { opacity:.9; transform: translate(0,0) scale(1); }
  50%      { opacity:1;  transform: translate(32px, 28px) scale(1.08); }
}
@keyframes orbDrift2 {
  0%,100% { opacity:.7; transform: translate(0,0) scale(1); }
  50%      { opacity:.9; transform: translate(-24px,-20px) scale(1.06); }
}
@keyframes orbDrift3 {
  0%,100% { opacity:.5; transform: translate(0,0) scale(1); }
  50%      { opacity:.8; transform: translate(18px,-14px) scale(1.18); }
}

/* Animated grid drift — exact same as app login */
.hero-grid-layer {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 52px 52px; }
}

/* Noise texture overlay */
.hero-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .025;
  mix-blend-mode: overlay;
}

/* ── Layout ── */
.hero-container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

/* ── Left copy ── */
.hero-copy { animation: heroFadeUp .7s cubic-bezier(.22,.68,0,1.1) both; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-soft);
  margin-bottom: 22px;
  padding: 6px 14px 6px 10px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 50px;
}
.hero-kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.18);
  animation: kpulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes kpulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(74,222,128,.04); }
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.1vw, 3.4rem);
  font-weight: 600;
  line-height: 1.17;
  color: var(--d-heading);
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.hero-title em {
  font-style: italic;
  background: linear-gradient(90deg, #a78bfa, #c084fc, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: .97rem;
  line-height: 1.76;
  color: var(--d-body);
  margin-bottom: 34px;
  max-width: min(450px, 100%);
}

.hero-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Trust row */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--d-muted);
  font-weight: 500;
}
.hero-trust-item i { color: var(--violet-soft); font-size: .8rem; }
.hero-trust-sep { width: 1px; height: 14px; background: var(--d-border); }

/* ── Right visual ── */
.hero-visual {
  position: relative;
  animation: heroFadeUp .7s cubic-bezier(.22,.68,0,1.1) .15s both;
}

/* Floating chips */
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 12px;
  padding: 10px 14px;
  z-index: 10;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  white-space: nowrap;
  font-size: .76rem;
  color: var(--d-body);
  animation: chipFloat 4s ease-in-out infinite;
}
.hero-chip-1 { top: -18px; right: 10px; animation-delay: 0s; }
.hero-chip-2 { bottom: 60px; left: -20px; animation-delay: -2.4s; }
.hero-chip-3 { top: 38%; left: -28px; animation-delay: -1.2s; }
@keyframes chipFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-7px); }
}
.hero-chip-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.hero-chip-title { font-size: .74rem; color: var(--d-heading); font-weight: 500; line-height: 1.3; }
.hero-chip-sub   { font-size: .62rem; color: var(--d-muted); margin-top: 1px; }

/* Mockup window */
.hero-mockup {
  background: var(--ink-3);
  border: 1px solid rgba(148,163,184,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 32px 80px rgba(0,0,0,.55),
    0 0 60px rgba(124,58,237,.08);
}
.hero-mockup-chrome {
  background: var(--ink-2);
  border-bottom: 1px solid rgba(148,163,184,.06);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-chrome-dots { display: flex; gap: 5px; flex-shrink: 0; }
.hero-chrome-dots span { width: 9px; height: 9px; border-radius: 50%; }
.hero-chrome-url {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.06);
  border-radius: 5px;
  height: 20px;
  display: flex; align-items: center;
  padding: 0 9px;
  font-size: .58rem;
  color: var(--d-muted);
  gap: 5px;
}
.hero-chrome-actions { color: var(--d-muted); font-size: .8rem; }

.hero-mockup-body {
  display: flex;
  height: 340px;
  overflow: hidden;
}

/* Sidebar */
.hero-sidebar {
  width: 44px;
  background: rgba(10,14,26,.7);
  border-right: 1px solid rgba(148,163,184,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 2px;
  flex-shrink: 0;
}
.hero-sb-logo {
  margin-bottom: 14px;
}
.hero-sb-mark {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.hero-sb-item {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  color: var(--d-muted);
  cursor: pointer;
  transition: all .18s;
}
.hero-sb-item.active,
.hero-sb-item:hover {
  background: rgba(124,58,237,.18);
  color: #a78bfa;
}

/* Dash content */
.hero-dash {
  flex: 1;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Top bar */
.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-topbar-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--d-heading);
}
.hero-topbar-right { display: flex; align-items: center; gap: 8px; }
.hero-topbar-badge {
  position: relative;
  font-size: .78rem;
  color: var(--d-muted);
}
.hero-badge-dot {
  position: absolute;
  top: -1px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f87171;
  border: 1px solid var(--ink-3);
}
.hero-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  font-size: .6rem;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Stat cards */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hero-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.06);
  border-radius: 9px;
  padding: 8px;
}
.hero-stat-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  margin-bottom: 5px;
}
.hero-stat-val {
  font-size: .86rem;
  font-weight: 800;
  color: var(--d-heading);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-stat-label {
  font-size: .55rem;
  color: var(--d-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 1px;
}
.hero-stat-sub {
  font-size: .54rem;
  color: var(--d-subtle);
  margin-top: 3px;
}

/* Charts row */
.hero-charts {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.hero-chart-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.06);
  border-radius: 9px;
  padding: 8px 10px;
}
.hero-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: .6rem;
  font-weight: 700;
  color: var(--d-heading);
}
.hero-chart-period { color: var(--d-muted); font-weight: 400; }

/* Bar chart */
.hero-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
}
.hero-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}
.hero-bar {
  width: 100%;
  background: rgba(124,58,237,.35);
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(124,58,237,.4);
  animation: barGrow .8s cubic-bezier(.22,.68,0,1.1) both;
}
.hero-bar-hi {
  background: rgba(167,139,250,.55);
  border-color: rgba(167,139,250,.6);
  box-shadow: 0 0 8px rgba(167,139,250,.3);
}
@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); }
}
.hero-bar:nth-child(1) { animation-delay: .1s; }
.hero-bar:nth-child(2) { animation-delay: .18s; }
.hero-bar:nth-child(3) { animation-delay: .26s; }
.hero-bar:nth-child(4) { animation-delay: .34s; }
.hero-bar:nth-child(5) { animation-delay: .42s; }
.hero-bar:nth-child(6) { animation-delay: .50s; }
.hero-bar-lbl { font-size: .44rem; color: var(--d-muted); }

/* Donut chart */
.hero-donut-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-donut {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: conic-gradient(#4ade80 0% 84%, rgba(248,113,113,.5) 84% 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.hero-donut-inner {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink-3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.hero-donut-pct { font-size: .6rem; font-weight: 800; color: var(--d-heading); line-height: 1; }
.hero-donut-lbl { font-size: .44rem; color: var(--d-muted); }
.hero-donut-legend { display: flex; flex-direction: column; gap: 5px; }
.hero-dl-row {
  display: flex; align-items: center; gap: 5px;
  font-size: .58rem; color: var(--d-muted);
}
.hero-dl-row b { color: var(--d-heading); margin-left: 2px; }
.hero-dl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Activity feed */
.hero-activity {
  flex: 1;
  overflow: hidden;
}
.hero-act-head {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--d-muted);
  margin-bottom: 6px;
}
.hero-act-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(148,163,184,.04);
}
.hero-act-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem;
  flex-shrink: 0;
}
.hero-act-info { flex: 1; min-width: 0; }
.hero-act-title { font-size: .66rem; color: var(--d-heading); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-act-sub   { font-size: .58rem; color: var(--d-muted); }
.hero-act-time  { font-size: .56rem; color: var(--d-subtle); flex-shrink: 0; }

/* ══════════════════════════════════════════════
   PROOF BAR
   ══════════════════════════════════════════════ */
#proof-bar {
  background: var(--ink-2);
  border-top: 1px solid var(--d-border);
  border-bottom: 1px solid var(--d-border);
  padding: 20px 0;
}
.proof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  color: var(--d-body);
  white-space: nowrap;
}
.proof-item i {
  color: var(--violet-soft);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.proof-n {
  font-size: 1rem;
  font-weight: 800;
  color: var(--d-heading);
  letter-spacing: -.01em;
}
.proof-sep {
  width: 1px;
  height: 24px;
  background: var(--d-border);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   FEATURES (light bg)
   ══════════════════════════════════════════════ */
#features {
  background: var(--bg);
  padding: var(--sy) 0;
}
.sec-header {
  text-align: center;
  margin-bottom: 52px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* ── mcard — Module overview cards grid ───────────────────────── */
.mcard-pyramid {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mcard-row {
  display: grid;
  gap: 12px;
}
.mcard-row-6 {
  grid-template-columns: repeat(6, 1fr);
}
.mcard-row-5 {
  grid-template-columns: repeat(6, 1fr); /* same 6-col base */
  /* shift row 2 right by half a column so cards sit in the gaps */
  padding-left: calc((100% + 12px) / 6 / 2);
  padding-right: calc((100% + 12px) / 6 / 2);
  /* 5 cards span the middle 5 columns of the 6-col grid */
  grid-template-columns: repeat(5, 1fr);
}
.mcard-row-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 75%;
  margin: 0 auto;
}
/* 2-row 7-column flat grid — replaces pyramid */
.mcard-grid-2row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-top: 48px;
}
/* Keep mcard-grid selector for mobile horizontal scroll fallback */
.mcard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 14px;
  background: var(--white);
  border: 1px solid var(--l-border);
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mcb);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.mcard:hover {
  border-color: var(--mcs);
  box-shadow: 0 8px 28px var(--mcb);
  transform: translateY(-3px);
}
.mcard:hover::before { opacity: 1; }
.mcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mcard-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--mcb);
  color: var(--mc);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  border: 1px solid var(--mcs);
  transition: background .2s, box-shadow .2s;
}
.mcard:hover .mcard-icon {
  background: var(--mcs);
  box-shadow: 0 0 14px var(--mcb);
}
.mcard-tag {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 50px;
  background: rgba(22,163,74,.08);
  color: #16a34a;
  border: 1px solid rgba(22,163,74,.18);
  white-space: nowrap;
}
.mcard-tag--pro    { background: rgba(124,58,237,.08); color: #7c3aed; border-color: rgba(124,58,237,.18); }
.mcard-tag--ent    { background: rgba(245,158,11,.08);  color: #d97706; border-color: rgba(245,158,11,.2); }
.mcard-tag--growth { background: rgba(96,165,250,.08);  color: #2563eb; border-color: rgba(96,165,250,.22); }
.mcard-num {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--l-muted);
  margin-bottom: 3px;
}
.mcard-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--l-heading);
  margin-bottom: 5px;
  line-height: 1.25;
}
.mcard-desc {
  font-size: .7rem;
  color: #4b5563;
  line-height: 1.5;
  flex: 1;
}
.mcard-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--mc);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.mcard:hover .mcard-foot {
  opacity: 1;
  transform: translateY(0);
}
.mcard-foot i { font-size: .65rem; transition: transform .2s; }
.mcard:hover .mcard-foot i { transform: translateX(3px); }

/* mcard scroll hint — mobile only */
.mcard-scroll-hint {
  display: none;
  text-align: center;
  font-size: .72rem;
  color: var(--l-muted);
  margin-top: 10px;
  gap: 5px;
  align-items: center;
  justify-content: center;
}


/* ══════════════════════════════════════════════
   PRICING (white bg)
   ══════════════════════════════════════════════ */
#pricing {
  background: var(--white);
  padding: var(--sy) 0 calc(var(--sy) + 32px);
  position: relative;
}
/* ══ PRICING CARDS v2 ══════════════════════════════════════════ */
.pc2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--l-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.06);
  margin-bottom: 40px;
}

/* Base card */
.pc2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--l-border);
  transition: background .2s;
}
.pc2-card:last-child { border-right: none; }

/* Featured card — dark */
.pc2-card.pc2-featured {
  background: var(--ink);
  border-right-color: rgba(124,58,237,.2);
  border-left: 1px solid rgba(124,58,237,.2);
  z-index: 2;
}
/* Subtle top accent line on featured */
.pc2-card.pc2-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #7c3aed);
  background-size: 200% 100%;
  animation: pc2Shimmer 3s linear infinite;
}
@keyframes pc2Shimmer { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }

/* Glow behind featured */
.pc2-glow {
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% -20%, rgba(124,58,237,.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Most popular badge */
.pc2-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Head section */
.pc2-head {
  padding: 28px 24px 22px;
  position: relative;
  z-index: 1;
}
.pc2-featured .pc2-head { padding-top: 38px; }

/* EA tag */
.pc2-ea-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.22);
  color: #9333ea;
  padding: 2px 9px;
  border-radius: 50px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pc2-ea-dark {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.25);
  color: #c4b5fd;
}
.pc2-ea-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: eaPulse 1.8s ease-in-out infinite;
}

/* Plan name */
.pc2-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--l-heading);
  margin-bottom: 6px;
}
.pc2-name-light { color: #e2e8f0; }

/* Tagline */
.pc2-tagline {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--l-muted);
  margin-bottom: 20px;
  min-height: 36px;
}
.pc2-tagline-light { color: #94a3b8; }

/* Price block */
.pc2-price-block { margin-bottom: 20px; }
.pc2-orig-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.pc2-orig {
  font-size: .9rem;
  color: var(--l-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(0,0,0,.35);
}
.pc2-orig-light {
  color: rgba(255,255,255,.4);
  text-decoration-color: rgba(255,255,255,.3);
}
.pc2-orig-per {
  font-size: .73rem;
  color: var(--l-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.25);
  margin-left: -2px;
}
.pc2-orig-per-light {
  color: rgba(255,255,255,.35);
}
.pc2-save {
  background: #16a34a;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
}
.pc2-price-row {
  display: flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
}
.pc2-rs {
  font-size: .95rem;
  font-weight: 700;
  color: var(--l-heading);
}
.pc2-rs-light { color: #e2e8f0; }
.pc2-amt {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--l-heading);
  line-height: 1;
}
.pc2-amt-light { color: #f1f5f9; }
.pc2-per {
  font-size: .75rem;
  color: var(--l-muted);
  margin-left: 4px;
  align-self: flex-end;
  padding-bottom: 4px;
}
.pc2-per-light { color: #94a3b8; }
.pc2-billed {
  font-size: .67rem;
  color: #6b7280;
  margin-top: 5px;
}
.pc2-billed-light { color: #94a3b8; }

/* CTA button */
.pc2-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: .83rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}
.pc2-cta-outline {
  border: 1.5px solid var(--l-border);
  color: var(--l-heading);
  background: transparent;
}
.pc2-cta-outline:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: rgba(124,58,237,.04);
}
.pc2-cta-primary {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
}
.pc2-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(124,58,237,.45);
  color: #fff;
  gap: 9px;
}

/* Divider */
.pc2-divider {
  height: 1px;
  background: var(--l-border);
  margin: 0 24px;
}
.pc2-divider-dark { background: rgba(255,255,255,.06); }

/* Body / features */
.pc2-body {
  padding: 20px 24px 26px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.pc2-group-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #6b7280;
  margin-bottom: 12px;
}
.pc2-group-label-light { color: #94a3b8; }

.pc2-feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .81rem;
  color: var(--l-body);
  margin-bottom: 9px;
  line-height: 1.4;
}
.pc2-feat-light { color: #94a3b8; }
.pc2-feat-no { opacity: .72; }
.pc2-feat-dim { opacity: .58; }

.pc2-feat strong { color: var(--l-heading); font-weight: 600; }
.pc2-feat-light strong { color: #e2e8f0; }

.pc2-yes {
  color: #16a34a;
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}
.pc2-yes-light { color: #a78bfa; font-size: .85rem; flex-shrink: 0; margin-top: 1px; font-weight: 700; }
.pc2-no { color: var(--l-light); font-size: .85rem; flex-shrink: 0; margin-top: 1px; }
.pc2-no-dim { color: #8899b0; font-size: .85rem; flex-shrink: 0; margin-top: 1px; }

.pc2-sep {
  height: 1px;
  background: var(--l-border);
  margin: 12px 0;
}
.pc2-sep-dark { background: rgba(255,255,255,.06); }

/* Responsive */
@media (max-width: 860px) {
  .pc2-grid {
    grid-template-columns: 1fr;
    border-radius: 16px;
    gap: 0;
  }
  .pc2-card {
    border-right: none;
    border-bottom: 1px solid var(--l-border);
  }
  .pc2-card:last-child { border-bottom: none; }
  .pc2-card.pc2-featured {
    border-left: none;
    border-right: none;
    border-top: 3px solid #7c3aed;
  }
  .pc2-card.pc2-featured::before { display: none; }
  .pc2-popular-badge {
    position: static;
    transform: none;
    display: inline-flex;
    border-radius: 6px;
    margin-bottom: 10px;
    left: auto;
  }
  .pc2-featured .pc2-head { padding-top: 22px; }
  .pc2-tagline { min-height: unset; }
}

/* ══ OLD PLAN-CARD kept for compat (hidden, replaced by pc2) ══ */
.plans-grid { display: none; }

.plan-popular-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(124,58,237,.09);
  border: 1px solid rgba(124,58,237,.18);
  padding: 3px 11px;
  border-radius: 50px;
  margin-bottom: 13px;
}
.plan-card.featured .plan-popular-tag {
  color: var(--violet-soft);
  background: rgba(167,139,250,.13);
  border-color: rgba(167,139,250,.22);
}
.plan-name {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--l-heading);
  margin-bottom: 5px;
}
.plan-card.featured .plan-name { color: var(--d-heading); }
.plan-tagline {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--l-muted);
  margin-bottom: 22px;
}
.plan-card.featured .plan-tagline { color: var(--d-body); }

.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 3px;
}
.plan-rs { font-size: .98rem; font-weight: 700; color: var(--l-heading); }
.plan-card.featured .plan-rs { color: var(--d-heading); }
.plan-amt {
  font-size: 2.55rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--l-heading);
  line-height: 1;
}
.plan-card.featured .plan-amt { color: var(--d-heading); }
.plan-per {
  font-size: .8rem;
  color: var(--l-muted);
  margin-left: 2px;
}
.plan-card.featured .plan-per { color: var(--d-muted); }
.plan-yr-note {
  font-size: .71rem;
  color: var(--l-muted);
  min-height: 15px;
  margin-bottom: 20px;
}
.plan-card.featured .plan-yr-note { color: var(--d-subtle); }

.plan-divider {
  height: 1px;
  background: rgba(0,0,0,.07);
  margin-bottom: 18px;
}
.plan-card.featured .plan-divider { background: rgba(255,255,255,.07); }

.plan-feat-hd {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #374151;
  margin-bottom: 12px;
}
.plan-card.featured .plan-feat-hd { color: var(--d-subtle); }

.plan-feats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  flex: 1;
}
.pf {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .83rem;
  color: var(--l-body);
}
.plan-card.featured .pf { color: var(--d-body); }
.pf-yes, .pf-no {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.pf-yes { background: rgba(74,222,128,.12); color: #16a34a; }
.pf-no  { background: rgba(0,0,0,.05); color: var(--l-light); }
.plan-card.featured .pf-yes { background: rgba(167,139,250,.15); color: var(--violet-soft); }
.plan-card.featured .pf-no  { background: rgba(255,255,255,.05); color: var(--d-subtle); }
.pf.off span { color: var(--l-muted); }
.plan-card.featured .pf.off span { color: var(--d-subtle); }

/* ── Custom Plan Strip ───────────────────────────────────────────── */
.custom-plan-strip {
  margin: 32px 0 0;
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,.07), rgba(167,139,250,.04));
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
}
.custom-plan-strip::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(124,58,237,.06);
  pointer-events: none;
}
.custom-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.custom-plan-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.custom-plan-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 240px;
}
.custom-plan-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.2);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.custom-plan-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--l-heading);
  margin-bottom: 5px;
}
.custom-plan-sub {
  font-size: .83rem;
  color: var(--l-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.custom-plan-eg {
  display: inline-block;
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(124,58,237,.15);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: .78rem;
  color: var(--violet);
  font-family: monospace;
  margin: 0 2px;
}
.custom-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.custom-plan-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid rgba(124,58,237,.15);
  border-radius: 8px;
  padding: 4px 11px;
  font-size: .78rem;
  color: #3d2d6b;
  font-weight: 500;
}
.custom-plan-chips span i {
  color: var(--violet);
  font-size: .75rem;
}
.custom-plan-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.custom-plan-price-block {
  text-align: center;
}
.custom-plan-from {
  font-size: .72rem;
  color: var(--l-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.custom-plan-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--violet);
  line-height: 1;
  margin-bottom: 4px;
}
.custom-plan-amount span {
  font-size: .9rem;
  font-weight: 500;
  color: var(--l-muted);
}
.custom-plan-note {
  font-size: .72rem;
  color: var(--l-muted);
}
.custom-plan-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 768px) {
  .custom-plan-strip { padding: 20px 20px; }
  .custom-plan-right { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .custom-plan-price-block { text-align: left; }
}
@media (max-width: 480px) {
  .custom-plan-right { flex-direction: column; align-items: flex-start; }
  .custom-plan-actions { width: 100%; }
  .custom-plan-actions .btn { flex: 1; justify-content: center; }
}

.pricing-footnote {
  text-align: center;
  font-size: .79rem;
  color: var(--l-muted);
  margin-top: 26px;
}
.pricing-footnote strong { color: var(--l-body); }

/* ── Early Access Countdown Banner ──────────────────────────── */
.ea-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(109,40,217,.08), rgba(168,85,247,.05));
  border: 1px solid rgba(167,139,250,.22);
  border-left: 3px solid #a855f7;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.ea-strip-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ea-strip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 8px #a855f7;
  flex-shrink: 0;
  animation: eaPulse 1.8s ease-in-out infinite;
}
@keyframes eaPulse { 0%,100%{opacity:1} 50%{opacity:.2} }
.ea-strip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ea-strip-title {
  font-size: .88rem;
  color: #1e1b4b;
}
.ea-strip-title strong { font-weight: 700; }
.ea-strip-sub {
  font-size: .74rem;
  color: #64748b;
}

.ea-strip-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Countdown */
.ea-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ea-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(109,40,217,.1);
  border: 1px solid rgba(167,139,250,.2);
  border-radius: 7px;
  padding: 5px 9px;
  min-width: 44px;
}
.ea-cd-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #6d28d9;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.ea-cd-label {
  font-size: .6rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}
.ea-cd-sep {
  font-size: 1rem;
  font-weight: 700;
  color: #a855f7;
  margin-bottom: 10px;
}

.ea-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #fff;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all .22s ease;
  box-shadow: 0 4px 14px rgba(124,58,237,.25);
}
.ea-strip-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,58,237,.35);
  color: #fff;
  gap: 9px;
}

@media (max-width: 768px) {
  .ea-strip { flex-direction: column; align-items: flex-start; }
  .ea-strip-right { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .ea-strip-right { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ea-strip-link { width: 100%; justify-content: center; }
  .ea-cd-unit { min-width: 38px; padding: 4px 7px; }
  .ea-cd-num { font-size: .95rem; }
}

/* ── Early Access tag on plan cards ─────────────────────────── */
.plan-ea-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.25);
  color: #9333ea;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.plan-ea-tag.ea-featured {
  background: rgba(167,139,250,.15);
  border-color: rgba(167,139,250,.3);
  color: #c4b5fd;
}
.plan-ea-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  animation: eaPulse 1.8s ease-in-out infinite;
}

/* ── Original price row ─────────────────────────────────────── */
.plan-orig-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.plan-orig-amt {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--l-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.4);
  text-decoration-thickness: 2px;
}
.plan-orig-amt.ea-orig-featured {
  color: rgba(255,255,255,.45);
  text-decoration-color: rgba(255,255,255,.35);
}
.plan-orig-per {
  font-size: .78rem;
  color: var(--l-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.3);
  margin-left: -3px;
}
.plan-orig-per.ea-orig-featured {
  color: rgba(255,255,255,.4);
}
.plan-save-badge {
  display: inline-flex;
  align-items: center;
  background: #16a34a;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 2px;
}

/* ── Renews note ─────────────────────────────────────────────── */
.plan-renew-note {
  font-size: .71rem;
  color: var(--l-muted);
  margin-top: 2px;
  margin-bottom: 18px;
}
.plan-renew-note.ea-renew-featured {
  color: rgba(255,255,255,.4);
}

/* ── Original price strikethrough (old — keep for compat) ────── */
.plan-orig-price {
  font-size: .72rem;
  color: var(--l-muted);
  margin-bottom: 18px;
  text-decoration: line-through;
  opacity: .6;
}
.ea-orig-featured-old {
  color: var(--d-subtle);
}

@media (max-width: 640px) {
  .ea-strip { gap: 8px; }
  .ea-strip-link { width: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .mcard-grid { grid-template-columns: repeat(5, 1fr); }
  .mcard-row-6 { grid-template-columns: repeat(5, 1fr); }
  .mcard-row-5 {
    grid-template-columns: repeat(4, 1fr);
    padding-left: calc((100% + 12px) / 5 / 2);
    padding-right: calc((100% + 12px) / 5 / 2);
  }
  .mcard-grid-2row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1024px) {
  .mcard-grid { grid-template-columns: repeat(4, 1fr); }
  .mcard-row-6 { grid-template-columns: repeat(4, 1fr); }
  .mcard-row-5 {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0;
    padding-right: 0;
  }
  .mcard-grid-2row { grid-template-columns: repeat(4, 1fr); }

  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-card.featured { transform: none; }
  .plan-card.featured:hover { transform: translateY(-3px); }
}
@media (max-width: 768px) {
  :root { --sy: 56px; }
  /* Mobile: horizontal scroll with snap */
  .mcard-grid,
  .mcard-pyramid,
  .mcard-grid-2row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 10px;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .mcard-row { display: contents; }
  .mcard-grid::-webkit-scrollbar,
  .mcard-pyramid::-webkit-scrollbar,
  .mcard-grid-2row::-webkit-scrollbar { display: none; }
  .mcard {
    flex: 0 0 175px;
    scroll-snap-align: start;
    min-width: 175px;
  }
  .mcard-scroll-hint { display: flex; }

  /* ─ Nav ─ */
  .nav-links, .nav-end { display: none; }
  .nav-burger { display: flex; }
  #nav { background: rgba(10,14,26,.96) !important; backdrop-filter: blur(16px); }

  /* ─ Hero ─ */
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual { order: -1; }
  .hero-desc { max-width: 100%; font-size: .93rem; }
  .hero-btns { flex-wrap: wrap; gap: 10px; }
  .hero-btns .btn { flex: 1 1 auto; justify-content: center; min-width: 140px; }
  .hero-chip { display: none; }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  /* Hero pushed below EA bar (34px) + nav (68px) = 102px, add buffer */
  #hero { padding-top: 120px !important; }
  .hero-mockup-body { height: 280px; }
  .hero-orb-1 { width: 340px; height: 340px; }
  .hero-orb-2 { width: 280px; height: 280px; }

  /* ─ Social proof ─ */
  .proof-row { flex-wrap: wrap; gap: 10px 0; justify-content: center; }
  .proof-sep { display: none; }
  .proof-item { font-size: .8rem; }
  .proof-n { font-size: .95rem; }

  /* ─ How it works ─ */
  .how-grid { grid-template-columns: 1fr; gap: 24px; }
  .how-grid::before { display: none; }
  .how-step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
  .how-num { flex-shrink: 0; }

  /* ─ Features grid ─ */

  /* ─ Module sections ─ */
  .module-grid { grid-template-columns: 1fr; gap: 32px; }
  .module-grid.flipped { direction: ltr; }
  .module-visual { width: 100%; }
  .module-feats { gap: 10px; }

  /* ─ Testimonials ─ */
  .testi-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  /* ─ Pricing ─ */
  .plans-grid { grid-template-columns: 1fr; max-width: 390px; margin: 0 auto; }
  .plan-card.featured { transform: none; }

  /* ─ FAQ ─ */
  .faq-q { font-size: .93rem; }

  /* ─ CTA ─ */
  .cta-btns { flex-direction: column; align-items: center; gap: 10px; }
  .cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* ─ Contact ─ */
  .ct-cards { grid-template-columns: 1fr; max-width: 400px; }
  .ct-cta { flex-direction: column; align-items: flex-start; }
  .ct-trust-dot { display: none; }

  /* ─ Footer ─ */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* ─ Layout ─ */
  .f2col { grid-template-columns: 1fr; }
  .modal-box { padding: 26px 18px; }
}

@media (max-width: 480px) {
  :root { --sy: 48px; }

  /* ─ Nav ─ */
  .nav-mark { width: 29px; height: 29px; font-size: .7rem; }
  .nav-name { font-size: .9rem; }

  /* ─ Hero ─ */
  .hero-title { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
  .hero-btns .btn { font-size: .85rem; padding: 10px 18px; }
  .mockup-body { padding: 10px; }
  .m-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .m-charts { grid-template-columns: 1fr; gap: 8px; }

  /* ─ Section headers ─ */
  .sec-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .eyebrow { font-size: .68rem; }

  /* ─ Features / Modlist ─ */
  .mcard-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mcard { padding: 14px 13px; }
  .mcard-desc { display: none; }

  /* ─ Pricing ─ */
  .plan-card { padding: 22px 18px; }
  .plan-amt { font-size: 2.4rem; }

  /* ─ Footer ─ */
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand-col { text-align: center; }
  .footer-contact-link { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }

  /* ─ Contact ─ */
  .ct-card-value { font-size: .88rem; }
  .ct-cta-left { flex-direction: column; gap: 10px; }
  .ct-trust { gap: 6px 12px; font-size: .73rem; }

  /* ─ Legal pages ─ */
  .legal-content { padding: 22px 16px; border-radius: 12px; }
  .legal-hero { padding: 80px 0 40px; }
  .legal-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* ══════════════════════════════════════════════
   HOW IT WORKS
   ══════════════════════════════════════════════ */
#how-it-works {
  background: var(--ink);
  padding: var(--sy) 0;
  position: relative;
}
#how-it-works::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124,58,237,.08) 0%, transparent 70%);
  pointer-events: none;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
}
/* Connecting line between steps */
.how-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.67% + 28px);
  right: calc(16.67% + 28px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-border), var(--ink-border), transparent);
}
.how-step { text-align: center; }
.how-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--ink-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  font-size: .85rem;
  font-weight: 800;
  color: var(--violet-soft);
  position: relative;
  z-index: 1;
}
.how-num::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(124,58,237,.08);
}
.how-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-heading);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.how-step-desc {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--d-body);
  max-width: 240px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════
   MODULE DEEP DIVES
   ══════════════════════════════════════════════ */
.module-section {
  padding: var(--sy) 0;
  border-top: 1px solid var(--l-border);
}
.module-section:first-of-type { border-top: none; }
.module-section:nth-child(odd)  { background: var(--bg); }
.module-section:nth-child(even) { background: var(--white); }

.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.module-grid.flipped { direction: rtl; }
.module-grid.flipped > * { direction: ltr; }

/* Module text side */
.mod-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 50px;
  margin-bottom: 14px;
}
/* mod-eyebrow color variants — replaces per-module inline styles */
.mod-eyebrow--blue   { background:rgba(96,165,250,.09);  color:#2563eb; border:1px solid rgba(96,165,250,.2); }
.mod-eyebrow--purple { background:rgba(124,58,237,.09);  color:#7c3aed; border:1px solid rgba(124,58,237,.2); }
.mod-eyebrow--pink   { background:rgba(244,114,182,.09); color:#db2777; border:1px solid rgba(244,114,182,.2); }
.mod-eyebrow--amber  { background:rgba(245,158,11,.09);  color:#d97706; border:1px solid rgba(245,158,11,.2); }
.mod-eyebrow--green  { background:rgba(52,211,153,.09);  color:#059669; border:1px solid rgba(52,211,153,.2); }
.mod-eyebrow--red    { background:rgba(248,113,113,.09); color:#ef4444; border:1px solid rgba(248,113,113,.2); }
.mod-eyebrow--teal   { background:rgba(20,184,166,.09);  color:#0d9488; border:1px solid rgba(20,184,166,.2); }
.mod-eyebrow--indigo { background:rgba(99,102,241,.09);  color:#4f46e5; border:1px solid rgba(99,102,241,.2); }
.mod-eyebrow--lime   { background:rgba(74,222,128,.09);  color:#15803d; border:1px solid rgba(74,222,128,.2); }
.mod-eyebrow--orange { background:rgba(251,146,60,.09);  color:#ea580c; border:1px solid rgba(251,146,60,.2); }

.mod-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--l-heading);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.mod-desc {
  font-size: .93rem;
  line-height: 1.75;
  color: var(--l-muted);
  margin-bottom: 28px;
}
.mod-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.mod-feat {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.mod-feat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.mod-feat-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--l-heading);
  margin-bottom: 2px;
}
.mod-feat-desc {
  font-size: .8rem;
  line-height: 1.55;
  color: #4b5563;
}

/* Module visual card side */
.mod-visual {
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.mod-vis-header {
  background: var(--ink-2);
  border-bottom: 1px solid var(--d-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mod-vis-title-row {
  font-size: .75rem;
  font-weight: 700;
  color: var(--d-heading);
  display: flex;
  align-items: center;
  gap: 7px;
}
.mod-vis-title-row i { color: var(--violet-soft); }
.mod-vis-badge {
  font-size: .64rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  background: rgba(74,222,128,.12);
  color: #4ade80;
}
.mod-vis-body { padding: 12px; }

/* Attendance visual elements */
.att-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--d-border);
}
.att-row:last-child { border-bottom: none; }
.att-name {
  font-size: .78rem;
  color: var(--d-heading);
  font-weight: 500;
  width: 110px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
}
.att-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.att-pct {
  font-size: .72rem;
  font-weight: 700;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* Fee visual elements */
.fee-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--d-border);
  font-size: .8rem;
}
.fee-summary-row:last-child { border-bottom: none; }
.fee-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 50px;
}
.fee-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  margin-top: 12px;
}
.fee-mini-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(167,139,250,.2);
}
.fee-mini-bar.hi { background: #a78bfa; }

/* Enquiry pipeline visual */
.pipe-stages {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.pipe-stage {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.pipe-stage-name {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--d-muted);
  margin-bottom: 5px;
}
.pipe-stage-count {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--d-heading);
  line-height: 1;
}
.pipe-lead-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--d-border);
  font-size: .78rem;
}
.pipe-lead-row:last-child { border-bottom: none; }
.pipe-lead-name { color: var(--d-heading); font-weight: 600; flex: 1; }
.pipe-lead-sub  { font-size: .65rem; color: var(--d-muted); margin-top: 1px; }

/* Assignment visual */
.assign-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.assign-card:last-child { margin-bottom: 0; }
.assign-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
}
.assign-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--d-heading);
  margin-bottom: 2px;
}
.assign-meta {
  font-size: .65rem;
  color: var(--d-muted);
}
.assign-due {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Batch donut visual */
.batch-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.batch-donut-mock {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: conic-gradient(
    #4ade80 0% 48%,
    #facc15 48% 68%,
    #60a5fa 68% 88%,
    #f87171 88% 100%
  );
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.batch-donut-hole {
  width: 46px; height: 46px;
  background: var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  color: var(--d-heading);
  text-align: center;
  line-height: 1.2;
}
.batch-legend { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.batch-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  color: var(--d-body);
}
.batch-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.batch-upcoming-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--d-border);
  font-size: .78rem;
}
.batch-upcoming-row:last-child { border-bottom: none; }
.batch-upcoming-name { color: var(--d-heading); font-weight: 600; }
.batch-upcoming-date { font-size: .65rem; color: var(--d-muted); margin-top: 1px; }
.days-badge {
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
}

/* Staff permission visual */
.staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--d-border);
}
.staff-row:last-child { border-bottom: none; }
.staff-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  flex-shrink: 0;
}
.staff-info { flex: 1; }
.staff-name { font-size: .78rem; font-weight: 600; color: var(--d-heading); }
.staff-role { font-size: .62rem; color: var(--d-muted); margin-top: 1px; }
.perm-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.perm-pill {
  font-size: .58rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 50px;
  background: rgba(124,58,237,.12);
  color: var(--violet-soft);
  border: 1px solid rgba(124,58,237,.2);
}

/* ══════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════ */
#testimonials {
  background: var(--ink-2);
  padding: var(--sy) 0;
  position: relative;
}
#testimonials::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 45% at 20% 60%, rgba(124,58,237,.07) 0%, transparent 65%),
              radial-gradient(ellipse 40% 35% at 80% 30%, rgba(167,139,250,.05) 0%, transparent 60%);
  pointer-events: none;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}
.testi-card {
  background: rgba(30,41,59,.6);
  border: 1px solid var(--d-border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: border-color .2s;
}
.testi-card:hover { border-color: rgba(124,58,237,.22); }
.testi-quote-mark {
  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: .8;
  color: rgba(167,139,250,.25);
  margin-bottom: 8px;
  font-style: normal;
}
.testi-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--d-heading);
  margin-bottom: 20px;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 11px;
}
.testi-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-name {
  font-size: .84rem;
  font-weight: 700;
  color: var(--d-heading);
}
.testi-institute {
  font-size: .72rem;
  color: var(--d-muted);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════ */
#faq {
  background: var(--bg);
  padding: var(--sy) 0;
}

/* ── Layout ── */
.faq-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: flex-start;
  margin-top: 3rem;
}

/* ── Left nav ── */
.faq-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 90px;
}
.faq-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all .18s;
  width: 100%;
}
.faq-nav-btn:hover {
  background: var(--bg-2);
  border-color: var(--l-border);
}
.faq-nav-btn.active {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.18);
}
.faq-nav-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.faq-nav-label {
  flex: 1;
  font-size: .83rem;
  font-weight: 600;
  color: var(--l-muted);
  transition: color .15s;
}
.faq-nav-btn.active .faq-nav-label {
  color: var(--l-heading);
}
.faq-nav-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--violet);
  background: rgba(124,58,237,.1);
  border-radius: 20px;
  padding: 2px 8px;
}

/* ── Right panels ── */
.faq-panels {
  min-width: 0;
}
.faq-panel {
  display: none;
}
.faq-panel.active {
  display: block;
}
.faq-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.faq-panel-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

/* ── Accordion ── */
.faq-wrap {
  max-width: 100%;
  margin: 0;
}
.faq-item {
  border-bottom: 1px solid var(--l-border);
}
.faq-item:first-child {
  border-top: 1px solid var(--l-border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  text-align: left;
  color: var(--l-heading);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  user-select: none;
  transition: color .16s;
}
.faq-q:hover { color: var(--violet); }
.faq-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--l-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: var(--l-muted);
  flex-shrink: 0;
  transition: transform .25s ease, background .16s, color .16s;
}
.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  background: var(--violet-bg);
  border-color: rgba(124,58,237,.2);
  color: var(--violet);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-a-inner {
  overflow: hidden;
}
.faq-a-inner span {
  display: block;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--l-muted);
  padding-bottom: 20px;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}

/* ── Bottom CTA ── */
.faq-cta {
  margin-top: 3rem;
}
.faq-cta-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-2);
  border: 1px solid var(--l-border);
  border-radius: 14px;
  padding: 18px 24px;
  flex-wrap: wrap;
}
.faq-cta-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(124,58,237,.15);
  color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.faq-cta-inner > div:nth-child(2) {
  flex: 1;
  min-width: 160px;
}
.faq-cta-inner .btn {
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .faq-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    gap: 6px;
    margin-bottom: 24px;
  }
  .faq-nav-btn {
    flex: 0 0 auto;
    padding: 7px 12px;
  }
  .faq-nav-label { font-size: .78rem; }
  .faq-q { font-size: .93rem; }
  .faq-cta-inner { gap: 12px; }
}

/* ══════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════ */
#cta-banner {
  background: var(--ink);
  padding: var(--sy) 0;
  position: relative;
}
#cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(124,58,237,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% 50%, rgba(167,139,250,.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#cta-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(148,163,184,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  z-index: 0;
}
.cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--d-heading);
  line-height: 1.22;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.cta-title em { font-style: italic; color: var(--violet-soft); }
.cta-sub {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--d-body);
  margin-bottom: 34px;
}
.cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-reassure {
  margin-top: 20px;
  font-size: .78rem;
  color: var(--d-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-reassure span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cta-reassure i { color: var(--violet-soft); font-size: .82rem; }

/* ══════════════════════════════════════════════
   FOOTER (full)
   ══════════════════════════════════════════════ */
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-col {}
.footer-brand-desc {
  font-size: .84rem;
  line-height: 1.68;
  color: var(--d-body);
  margin: 14px 0 20px;
  max-width: 220px;
}
.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--d-muted);
  margin-bottom: 7px;
  transition: color .15s;
}
.footer-contact-link:hover { color: var(--violet-soft); }
.footer-contact-link i { font-size: .82rem; }
.footer-col-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--d-muted);
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: .83rem;
  color: var(--d-body);
  transition: color .15s;
}
.footer-links a:hover { color: var(--violet-soft); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--d-border);
  padding-top: 22px;
}
.footer-copy { font-size: .77rem; color: var(--d-subtle); }
.footer-copy b { color: var(--d-muted); font-weight: 600; }
.footer-legal {
  display: flex;
  gap: 18px;
}
.footer-legal a {
  font-size: .77rem;
  color: var(--d-subtle);
  transition: color .15s;
}
.footer-legal a:hover { color: var(--d-body); }

/* ══════════════════════════════════════════════
   RESPONSIVE — new sections
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .module-grid { gap: 48px; }
  .testi-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-top  { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-grid::before { display: none; }
  .module-grid { grid-template-columns: 1fr; gap: 36px; }
  .module-grid.flipped { direction: ltr; }
  .testi-grid  { grid-template-columns: 1fr; }
  .footer-top  { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cta-btns    { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════
   SECTION DIAGONAL DIVIDERS
   
   Two classes applied to the section whose
   BOTTOM edge needs a diagonal cut.
   
   .diag-right  \  bottom-right drops (into light section)
   .diag-left   /  bottom-left drops  (into dark section)
   
   Each section that needs a custom next-color
   gets an inline --diag-color CSS variable.
   Default: diag-right → var(--bg), diag-left → var(--ink)
   ══════════════════════════════════════════════ */

/* Prevent subpixel grey lines between sections */
#proof-bar,
#who-for, #how-it-works, #features,
#modules, #roi, #why-eduvora,
#testimonials, #pricing, #faq,
#cta-banner, #contact, #site-footer {
  position: relative;
  margin-top: -1px;
}

/* New sections missing padding rules */
#who-for {
  padding: var(--sy) 0;
}
#roi {
  padding: var(--sy) 0;
}
#why-eduvora {
  padding: var(--sy) 0;
}

.diag-right,
.diag-left {
  position: relative;
  padding-bottom: calc(var(--sy) + 32px);
}

/* \ — right side drops: triangle in NEXT section's bg color */
.diag-right::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: var(--diag-color, var(--bg));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
  z-index: 2;
}

/* / — left side drops: triangle in NEXT section's bg color */
.diag-left::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: var(--diag-color, var(--ink));
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
  z-index: 2;
}

/* Real div diagonals — for sections that already use ::after pseudo-element */
.section-diag-right,
.section-diag-left {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  pointer-events: none;
  z-index: 3;
}
.section-diag-right {
  background: var(--diag-color, var(--bg));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.section-diag-left {
  background: var(--diag-color, var(--ink));
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* cta_banner needs extra padding for the triangle div */
#cta-banner { padding-bottom: calc(var(--sy) + 32px); }

@media (max-width: 768px) {
  .diag-right,
  .diag-left {
    padding-bottom: calc(var(--sy) + 20px);
  }
  .diag-right::after,
  .diag-left::after { height: 20px; }
  .section-diag-right,
  .section-diag-left { height: 20px; }
  #cta-banner { padding-bottom: calc(var(--sy) + 20px); }
  #pricing    { padding-bottom: calc(var(--sy) + 20px); }
  #features   { padding-bottom: calc(var(--sy) + 20px); }
}

/* ══════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   NAV ACTIVE STATE
   ══════════════════════════════════════════════ */
.nav-links a.nav-active {
  color: var(--white);
}
.nav-links a.nav-active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--violet-soft);
  border-radius: 2px;
  margin-top: 2px;
  animation: navUnderline .2s ease forwards;
}
@keyframes navUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ══════════════════════════════════════════════
   FLOATING WIDGETS (WhatsApp + Back to Top)
   ══════════════════════════════════════════════ */
.float-widgets {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Floating WhatsApp button */
.float-wa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  border-radius: 50px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 4px 16px rgba(37,211,102,.28);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  overflow: hidden;
}
.float-wa::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.35) 50%,
    transparent 100%
  );
  animation: waShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes waShimmer {
  0%   { left: -75%; opacity: 1; }
  50%  { left: 125%; opacity: 1; }
  51%, 100% { left: 125%; opacity: 0; }
}
.float-wa i {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.float-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(37,211,102,.52);
  color: #fff;
  text-decoration: none;
}
.float-wa-label {
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* SVG orbit overlay — injected by JS, sized to button exactly */
.float-wa-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

/* Back to top button */
.float-top {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(148,163,184,.15);
  color: var(--d-body);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, opacity .25s ease, background .15s;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.float-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.float-top:hover {
  background: var(--violet);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .float-widgets { bottom: 16px; right: 14px; }
  .float-wa { padding: 11px 14px; }
  .float-wa-label { display: none; }
  .float-wa { border-radius: 50%; width: 48px; height: 48px; justify-content: center; max-width: 48px; }
}

/* ══════════════════════════════════════════════
   ROI SECTION — Cards
   ══════════════════════════════════════════════ */
.roi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.roi-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.08);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  transition: border-color .2s, transform .2s;
}
.roi-card:hover {
  border-color: rgba(148,163,184,.16);
  transform: translateY(-3px);
}
.roi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.roi-number {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.roi-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--d-heading);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.roi-desc {
  font-size: .8rem;
  line-height: 1.65;
  color: var(--d-body);
}
@media (max-width: 1024px) {
  .roi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .roi-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ══════════════════════════════════════════════
   WHY EDUVORA — Comparison Table
   ══════════════════════════════════════════════ */
.comp-table-wrap {
  margin-top: 40px;
}
.comp-table-scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--l-border);
}
.comp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
  background: var(--white);
}
.comp-table thead th {
  padding: 16px 18px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--l-heading);
  background: var(--bg);
  border-bottom: 1px solid var(--l-border);
  line-height: 1.4;
}
.comp-table thead th.comp-feat-col {
  text-align: left;
  width: 34%;
  color: var(--l-muted);
  font-weight: 600;
  font-size: .72rem;
}
.comp-table thead th.comp-eduvora {
  background: rgba(124,58,237,.06);
  color: var(--violet);
  border-left: 1px solid rgba(124,58,237,.15);
  border-right: 1px solid rgba(124,58,237,.15);
}
.comp-our-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--violet);
}
.comp-table tbody td {
  padding: 11px 18px;
  text-align: center;
  font-size: .83rem;
  color: var(--l-body);
  border-bottom: 1px solid var(--l-border);
}
.comp-table tbody td:first-child {
  text-align: left;
}
.comp-feat-label {
  font-size: .83rem;
  color: var(--l-heading);
  font-weight: 500;
}
.comp-table tbody td.comp-eduvora {
  background: rgba(124,58,237,.03);
  border-left: 1px solid rgba(124,58,237,.12);
  border-right: 1px solid rgba(124,58,237,.12);
}
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover { background: var(--bg); }
.comp-table tbody tr:hover td.comp-eduvora { background: rgba(124,58,237,.06); }
.comp-yes    { color: #16a34a; font-size: 1rem; }
.comp-no     { color: #cbd5e1; font-size: 1rem; }
.comp-partial { color: #d97706; font-size: 1rem; }
@media (max-width: 768px) {
  .comp-table-scroll { border-radius: 12px; }
  .comp-table { min-width: 520px; }
  .comp-table thead th,
  .comp-table tbody td { padding: 9px 12px; font-size: .75rem; }
}

/* ══════════════════════════════════════════════
   PRICING — ROI Math Bar + Card extras
   ══════════════════════════════════════════════ */
.pricing-roi-bar {
  background: rgba(124,58,237,.04);
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 32px;
}
.pricing-roi-inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.pricing-roi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .81rem;
  color: var(--l-body);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
  padding: 6px 14px;
}
.pricing-roi-item i {
  color: var(--violet);
  font-size: .9rem;
  flex-shrink: 0;
}
.pricing-roi-sep {
  width: 1px;
  height: 32px;
  background: rgba(124,58,237,.15);
  flex-shrink: 0;
}
.pc2-roi-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: #16a34a;
  margin-top: 8px;
  font-weight: 500;
}
.pc2-roi-hint i { font-size: .75rem; }
.pc2-addon {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .76rem;
  color: var(--l-muted);
  margin-top: 14px;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--l-border);
  border-radius: 8px;
  line-height: 1.5;
}
.pc2-addon i { color: var(--violet); font-size: .78rem; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 768px) {
  .pricing-roi-inner { flex-direction: column; gap: 2px; }
  .pricing-roi-sep { display: none; }
  .pricing-roi-item { min-width: unset; padding: 4px 0; }
}

/* ══════════════════════════════════════════════
   PRICING COMPARISON TABLE
   ══════════════════════════════════════════════ */
.compare-wrap {
  margin-top: 64px;
}

/* Mobile: hide table, show cards */
.compare-mobile-cards { display: none; }

@media (max-width: 768px) {
  .compare-table-scroll { display: none; }
  .compare-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
  .cmc-card {
    border-radius: 14px;
    border: 1px solid var(--l-border);
    background: var(--white);
    overflow: hidden;
  }
  .cmc-card--pro {
    border-color: rgba(124,58,237,.3);
    box-shadow: 0 0 0 2px rgba(124,58,237,.1);
  }
  .cmc-head {
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--l-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cmc-card--pro .cmc-head {
    background: rgba(124,58,237,.06);
    border-bottom-color: rgba(124,58,237,.15);
  }
  .cmc-plan-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--l-heading);
  }
  .cmc-card--pro .cmc-plan-name { color: #7c3aed; }
  .cmc-plan-price {
    font-size: .78rem;
    color: var(--l-muted);
  }
  .cmc-plan-price s { opacity: .45; font-size: .7rem; }
  .cmc-plan-price strong { color: var(--l-heading); font-size: .92rem; }
  .cmc-pro-badge {
    font-size: .6rem;
    font-weight: 700;
    background: rgba(124,58,237,.12);
    color: #7c3aed;
    padding: 3px 8px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .cmc-body { padding: 6px 0; }
  .cmc-group {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--l-muted);
    padding: 10px 20px 4px;
    background: var(--bg);
    border-top: 1px solid var(--l-border);
    border-bottom: 1px solid var(--l-border);
  }
  .cmc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    font-size: .82rem;
    color: var(--l-body);
    border-bottom: 1px solid var(--l-border);
  }
  .cmc-row:last-child { border-bottom: none; }
  .cmc-feat { color: var(--l-heading); font-weight: 500; }
  .cmc-val-yes { color: #16a34a; font-size: .95rem; }
  .cmc-val-no  { color: #cbd5e1; font-size: .95rem; }
  .cmc-val-text { font-size: .74rem; color: var(--l-muted); font-weight: 500; }
  .cmc-cta {
    display: block;
    margin: 12px 16px 16px;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--bg);
    border: 1px solid var(--l-border);
    color: var(--heading);
    transition: all .15s;
  }
  .cmc-card--pro .cmc-cta {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
  }
}
.compare-title {
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.compare-table-scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--l-border);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  background: var(--white);
}
.compare-table thead th {
  padding: 16px 20px;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--heading);
  background: var(--bg);
  border-bottom: 1px solid var(--l-border);
}
.compare-table thead th.compare-feat-col {
  text-align: left;
  width: 38%;
  color: var(--muted);
  font-weight: 600;
}
.compare-table thead th.compare-featured-col {
  background: rgba(124,58,237,.06);
  color: var(--violet);
  border-left: 1px solid rgba(124,58,237,.15);
  border-right: 1px solid rgba(124,58,237,.15);
}
.compare-price {
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.compare-table tbody td {
  padding: 11px 20px;
  text-align: center;
  font-size: .84rem;
  color: var(--body);
  border-bottom: 1px solid var(--l-border);
}
.compare-table tbody td:first-child {
  text-align: left;
  color: var(--heading);
  font-weight: 500;
}
.compare-table tbody td.compare-featured-col {
  background: rgba(124,58,237,.03);
  border-left: 1px solid rgba(124,58,237,.12);
  border-right: 1px solid rgba(124,58,237,.12);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: var(--bg); }
.compare-table tbody tr:hover td.compare-featured-col { background: rgba(124,58,237,.06); }

/* Group header rows */
.compare-group-row td {
  background: var(--bg) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted) !important;
  padding: 10px 20px 6px !important;
  border-bottom: 1px solid var(--l-border);
}
.compare-group-row td.compare-featured-col {
  background: rgba(124,58,237,.05) !important;
}

.compare-yes { color: #16a34a; font-size: 1rem; }
.compare-no  { color: #cbd5e1; font-size: 1rem; }
.compare-limit {
  font-size: .76rem;
  color: var(--muted);
  font-weight: 500;
}

/* ══════════════════════════════════════════════
   FEATURES SECTION — Tiles & Grid
   ══════════════════════════════════════════════ */
#features {
  background: #ffffff;
  padding: var(--sy) 0 calc(var(--sy) + 32px);
  position: relative;
  overflow: hidden;
}
#features::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 10% 20%, rgba(124,58,237,.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 90% 80%, rgba(20,184,166,.04) 0%, transparent 55%);
  pointer-events: none;
}
#features::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.feat-container { position: relative; z-index: 2; }
.feat-header { text-align: center; margin-bottom: 56px; }
.feat-header .eyebrow { color: var(--violet); background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.16); }
.feat-header .sec-title { color: var(--l-heading); }
.feat-header .sec-title em { color: var(--violet); }
.feat-header .sec-sub { color: var(--l-body); margin: 0 auto; }
.feat-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.feat-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: #64748b;
}
.feat-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.feat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.07);
  background: #ffffff;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.feat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ft-bg, rgba(124,58,237,.04));
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.feat-tile:hover {
  border-color: var(--ft-c, rgba(124,58,237,.35));
  background: #fafbff;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 0 0 1px var(--ft-c, rgba(124,58,237,.15));
  text-decoration: none;
}
.feat-tile:hover::before { opacity: 1; }
.feat-tile--finance {
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.03);
}
.feat-tile--finance:hover {
  border-color: rgba(16,185,129,.5);
  box-shadow: 0 12px 32px rgba(16,185,129,.1), 0 0 0 1px rgba(16,185,129,.2);
}
.feat-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.feat-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ft-bg, rgba(124,58,237,.1));
  color: var(--ft-c, #a78bfa);
  border: 1px solid var(--ft-border, rgba(124,58,237,.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  transition: background .2s, box-shadow .2s;
  flex-shrink: 0;
}
.feat-tile:hover .feat-tile-icon {
  background: var(--ft-border, rgba(124,58,237,.2));
  box-shadow: 0 0 16px var(--ft-bg, rgba(124,58,237,.15));
}
.feat-tile-badge {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 50px;
  white-space: nowrap;
  line-height: 1.6;
}
.feat-badge--all      { background: rgba(74,222,128,.1);  color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.feat-badge--growth   { background: rgba(96,165,250,.1);  color: #60a5fa; border: 1px solid rgba(96,165,250,.2); }
.feat-badge--pro      { background: rgba(245,158,11,.1);  color: #fbbf24; border: 1px solid rgba(245,158,11,.2); }
.feat-badge--exclusive{ background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.25); font-weight: 800; }
.feat-tile-num  { font-size: .52rem; font-weight: 700; letter-spacing: .12em; color: #94a3b8; margin-bottom: 4px; }
.feat-tile-name { font-size: .82rem; font-weight: 700; color: #0f172a; margin-bottom: 5px; line-height: 1.25; }
.feat-tile-desc { font-size: .68rem; color: #64748b; line-height: 1.5; flex: 1; }
.feat-tile-arrow {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: .64rem;
  font-weight: 600;
  color: var(--ft-c, #a78bfa);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
}
.feat-tile:hover .feat-tile-arrow { opacity: 1; transform: translateY(0); }
.feat-tile-arrow i { font-size: .6rem; transition: transform .18s; }
.feat-tile:hover .feat-tile-arrow i { transform: translateX(3px); }
.feat-row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.feat-row-label::before,
.feat-row-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.07);
}
.feat-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.feat-cta-note {
  font-size: .78rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.feat-cta-note i { color: var(--violet); }
@media (max-width: 1100px) { .feat-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px)  { .feat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) {
  .feat-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 9px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .feat-grid::-webkit-scrollbar { display: none; }
  .feat-tile {
    flex: 0 0 155px;
    min-width: 155px;
    scroll-snap-align: start;
  }
  .feat-row-label { display: none; }
}

/* ══════════════════════════════════════════════
   CONTACT SECTION
   ══════════════════════════════════════════════ */

.ct-section {
  background: var(--bg);
  padding: 96px 0 80px;
  position: relative;
}

/* Two-column layout */
.ct-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}

/* ── LEFT — Info ─────────────────────────────── */
.ct-left {
  display: flex;
  flex-direction: column;
}
.ct-left-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

.ct-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--l-heading);
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 14px 0 12px;
}
.ct-title em { font-style: italic; color: var(--violet); }
.ct-sub {
  font-size: .92rem;
  color: var(--l-muted);
  line-height: 1.75;
  margin-bottom: 24px;
}

/* Live badge */
.ct-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22,163,74,.07);
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: .77rem;
  font-weight: 600;
  color: #15803d;
  margin-bottom: 28px;
}
.ct-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

/* Channel cards */
.ct-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.ct-channel {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--l-border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ct-channel:hover {
  transform: translateX(4px);
  text-decoration: none;
}
.ct-channel--wa:hover  { border-color: rgba(37,211,102,.35); box-shadow: 0 4px 16px rgba(37,211,102,.08); }
.ct-channel--call:hover { border-color: rgba(37,99,235,.3);  box-shadow: 0 4px 16px rgba(37,99,235,.06); }
.ct-channel--email:hover { border-color: rgba(124,58,237,.3); box-shadow: 0 4px 16px rgba(124,58,237,.06); }

.ct-ch-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.ct-channel--wa   .ct-ch-icon { background: rgba(37,211,102,.1);  color: #16a34a; }
.ct-channel--call .ct-ch-icon { background: rgba(37,99,235,.1);   color: #2563eb; }
.ct-channel--email .ct-ch-icon { background: rgba(124,58,237,.1); color: #7c3aed; }

.ct-ch-body { flex: 1; min-width: 0; }
.ct-ch-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--l-muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ct-ch-badge {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: rgba(22,163,74,.1);
  color: #15803d;
  border: 1px solid rgba(22,163,74,.2);
  padding: 1px 7px;
  border-radius: 20px;
  text-transform: uppercase;
}
.ct-ch-value {
  font-size: .9rem;
  font-weight: 700;
  color: var(--l-heading);
}
.ct-ch-arrow {
  font-size: .85rem;
  color: var(--l-light);
  flex-shrink: 0;
  transition: transform .2s, color .2s;
}
.ct-channel:hover .ct-ch-arrow { transform: translate(3px,-3px); color: var(--l-heading); }

/* Trust pills */
.ct-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ct-trust-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  color: var(--l-muted);
  background: var(--bg-2);
  border: 1px solid var(--l-border);
  padding: 5px 11px;
  border-radius: 50px;
}
.ct-trust-pills span i { font-size: .75rem; }
.ct-trust-pills span:nth-child(1) i { color: #16a34a; }
.ct-trust-pills span:nth-child(2) i { color: #d97706; }
.ct-trust-pills span:nth-child(3) i { color: #7c3aed; }

/* ── RIGHT — Form card ───────────────────────── */
.ct-right {
  display: flex;
  flex-direction: column;
}
.ct-form-card {
  background: var(--white);
  border: 1px solid var(--l-border);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ct-form-card form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ct-textarea {
  resize: none;
  min-height: 80px;
  flex: 1;
}
.ct-submit { margin-top: auto; }

.ct-form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--l-border);
}
.ct-form-avatars {
  display: flex;
}
.ct-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
  margin-right: -8px;
  flex-shrink: 0;
}
.ct-form-heading {
  font-size: .97rem;
  font-weight: 700;
  color: var(--l-heading);
  margin-bottom: 2px;
}
.ct-form-sub {
  font-size: .77rem;
  color: var(--l-muted);
}

/* Form fields */
.ct-fg {
  margin-bottom: 14px;
}
.ct-fl {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--l-heading);
  margin-bottom: 5px;
  letter-spacing: .01em;
}
.ct-req { color: #f87171; }
.ct-fi {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg);
  border: 1px solid var(--l-border);
  border-radius: 10px;
  font-size: .87rem;
  font-family: inherit;
  color: var(--l-heading);
  outline: none;
  transition: border-color .16s, box-shadow .16s;
  box-sizing: border-box;
}
.ct-fi:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
  background: var(--white);
}
.ct-fi::placeholder { color: var(--l-light); }
.ct-fi option { color: var(--l-heading); background: var(--white); }

.ct-f2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ct-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.ct-form-note {
  font-size: .72rem;
  color: var(--l-muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

/* Success state */
.ct-success {
  text-align: center;
  padding: 20px 0;
}
.ct-success-icon { font-size: 2.5rem; margin-bottom: 12px; }
.ct-success-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--l-heading);
  margin-bottom: 10px;
}
.ct-success-sub {
  font-size: .87rem;
  color: var(--l-muted);
  line-height: 1.7;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  .ct-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 520px;
  }
  .ct-title { font-size: 2rem; }
}
@media (max-width: 480px) {
  .ct-form-card { padding: 24px 18px; }
  .ct-f2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   MODULES — Tabbed Explorer
   ══════════════════════════════════════════════ */

.modules-tab-section {
  background: var(--bg);
  padding: var(--sy) 0;
}

/* ── Shell ── */
.mtab-shell {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.8) inset;
}

/* ── Sidebar ── */
.mtab-nav {
  display: flex;
  flex-direction: column;
  background: #0d1117;
  padding: 8px 6px;
  gap: 1px;
  border-right: 1px solid rgba(148,163,184,.07);
}

.mtab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
  color: #94a3b8;
  position: relative;
  outline: none;
}
.mtab-btn:hover {
  background: rgba(255,255,255,.04);
  color: #94a3b8;
}
/* Active: left accent bar + icon bg + label color */
.mtab-btn.active {
  background: var(--tb);
  color: var(--tc);
}
.mtab-btn.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--tc);
  opacity: .9;
}
.mtab-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.mtab-btn:hover .mtab-icon {
  background: rgba(255,255,255,.08);
}
.mtab-btn.active .mtab-icon {
  background: rgba(255,255,255,.12);
  color: var(--tc);
}
.mtab-label {
  font-size: .76rem;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.mtab-arrow {
  font-size: .65rem;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  color: var(--tc);
}
.mtab-btn.active .mtab-arrow {
  opacity: .7;
  transform: translateX(1px);
}

/* ── Panels ── */
.mtab-panels { background: #ffffff; }
.mtab-panel { display: none; }
.mtab-panel.active {
  display: block;
  animation: mtabFade .18s ease;
}
@keyframes mtabFade {
  from { opacity: 0; transform: translateX(5px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mtab-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 22px 26px;
  align-items: start;
  min-height: 420px;
}
.mtab-title {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--l-heading);
  margin: 6px 0 7px;
}
.mtab-desc {
  font-size: .81rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 13px;
}
.mtab-visual {
  position: sticky;
  top: 80px;
  align-self: start;
}

/* ── mod-features: 2-col compact grid ── */
.mod-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 16px;
}
.mod-feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,.05);
  transition: border-color .15s, background .15s;
}
.mod-feat:hover {
  background: #f1f5f9;
  border-color: rgba(0,0,0,.08);
}
.mod-feat-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem;
  flex-shrink: 0;
}
.mod-feat-title {
  font-size: .75rem;
  font-weight: 600;
  color: var(--l-heading);
  margin-bottom: 1px;
}
.mod-feat-desc {
  font-size: .69rem;
  line-height: 1.45;
  color: #6b7280;
}

/* ── Mobile: pill tabs instead of dropdown ── */
.mtab-mobile-select { display: none; }

.mtab-mobile-tabs {
  display: none;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 16px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mtab-mobile-tabs::-webkit-scrollbar { display: none; }
.mtab-mobile-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.1);
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.mtab-mobile-tab.active {
  background: var(--tb);
  color: var(--tc);
  border-color: transparent;
}
.mtab-mobile-tab i { font-size: .72rem; }

/* Mobile: visual card shown below content */
.mtab-visual-mobile-label {
  display: none;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  margin: 20px 0 10px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .mtab-inner { gap: 22px; padding: 20px 18px; }
  .mtab-shell { grid-template-columns: 166px 1fr; }
  .mtab-label { font-size: .7rem; }
  .mod-features { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .mtab-shell {
    grid-template-columns: 1fr;
    border-radius: 16px;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .mtab-nav { display: none; }
  .mtab-mobile-select { display: none; }
  .mtab-mobile-tabs { display: flex; }
  .mtab-panels {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
  }
  .mtab-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 18px 16px;
  }
  .mtab-visual {
    position: static;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .mtab-visual-mobile-label { display: block; }
  .mtab-title { font-size: 1.08rem; }
  .mod-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .mtab-inner { padding: 14px 12px; }
  .mtab-title { font-size: 1rem; }
  .mtab-mobile-tab { font-size: .68rem; padding: 5px 9px; }
  .mod-features { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   FOOTER — compact 4-col
   ══════════════════════════════════════════════ */

#site-footer {
  background: var(--ink-2);
  padding: 60px 0 0;
  position: relative;
  overflow: hidden;
}
.ft-bg  { position: absolute; inset: 0; pointer-events: none; }
.ft-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.ft-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(124,58,237,.1), transparent 70%); top: -200px; right: -100px; animation: orbDrift2 16s ease-in-out infinite; }
.ft-orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(167,139,250,.07), transparent 70%); bottom: 0; left: -80px; animation: orbDrift1 20s ease-in-out infinite 3s; }
.ft-grid  { position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.03) 1px, transparent 1px); background-size: 48px 48px; }

.ft-wrap { position: relative; z-index: 2; }

/* ── Main 4-col grid ── */
.ft-main {
  display: grid;
  grid-template-columns: 1.8fr 0.7fr 0.9fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(148,163,184,.07);
}

/* Brand col */
.ft-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ft-tagline {
  font-size: .84rem;
  line-height: 1.72;
  color: #cbd5e1;
  max-width: 300px;
  margin-bottom: 20px;
}
.ft-contacts { display: flex; flex-direction: column; gap: 9px; }
.ft-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .79rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: color .15s;
}
.ft-contact-chip i { font-size: .76rem; color: #94a3b8; transition: color .15s; }
.ft-contact-chip:hover { color: #e2e8f0; }
.ft-contact-chip:hover i { color: #a78bfa; }
.ft-contact-chip--wa:hover { color: #4ade80; }
.ft-contact-chip--wa:hover i { color: #4ade80; }

/* Col titles */
.ft-col-title {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #e2e8f0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148,163,184,.08);
}
.ft-col-badge {
  font-style: normal;
  font-size: .58rem;
  font-weight: 700;
  background: rgba(168,85,247,.18);
  color: #c084fc;
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: .03em;
}

/* Nav links */
.ft-nav-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ft-nav-links a {
  font-size: .8rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.ft-nav-links a s    { opacity: .5; font-size: .85em; }
.ft-nav-links a strong { color: #e2e8f0; font-weight: 700; }
.ft-nav-links a:hover  { color: #a78bfa; }
.ft-mod-icon { font-size: .7rem; color: #7c3aed; flex-shrink: 0; }
.ft-try-demo {
  margin-top: 4px;
  color: #a78bfa !important;
  font-weight: 600;
}
.ft-try-demo i { color: #a78bfa !important; }
.ft-trust-list span {
  display: block;
  font-size: .8rem;
  color: #94a3b8;
  cursor: default;
  padding-left: 12px;
  position: relative;
  line-height: 1.5;
}
.ft-trust-list span::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #64748b;
}
.ft-trust-list { gap: 9px; }
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 10px;
  flex-wrap: wrap;
}
.ft-bottom-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ft-bottom-dot { width: 3px; height: 3px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.ft-copy   { font-size: .74rem; color: #94a3b8; }
.ft-copy b { color: #cbd5e1; font-weight: 600; }
.ft-legal  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ft-legal a { font-size: .74rem; color: #94a3b8; text-decoration: none; transition: color .15s; }
.ft-legal a:hover { color: #e2e8f0; }
.ft-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: #64748b; flex-shrink: 0; }

/* Disclaimer */
.ft-disclaimer {
  font-size: .68rem;
  color: #94a3b8;
  line-height: 1.65;
  text-align: center;
  padding-bottom: 22px;
  margin-top: 2px;
}
.ft-disclaimer a { color: #94a3b8; text-decoration: underline; text-underline-offset: 2px; }
.ft-disclaimer a:hover { color: #e2e8f0; }

/* SEO only */
.ft-address { display: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ft-main { grid-template-columns: 1.4fr 0.7fr 0.9fr 0.8fr; gap: 32px; }
}
@media (max-width: 768px) {
  .ft-main { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ft-brand-col { grid-column: 1 / -1; }
  .ft-bottom { flex-direction: column; text-align: center; }
  .ft-bottom-left { justify-content: center; }
  .ft-legal { justify-content: center; }
}
@media (max-width: 480px) {
  .ft-main { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   EFFECT 1 — Feat tile stagger entrance
   ══════════════════════════════════════════════ */
.feat-tile--anim {
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .4s ease, transform .4s ease,
              border-color .2s, background .2s, box-shadow .2s;
}
.feat-tile--anim.tile-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ══════════════════════════════════════════════
   EFFECT 2 — ROI counter number pop
   ══════════════════════════════════════════════ */
[data-count] {
  display: inline-block;
  transition: transform .15s ease;
}
[data-count].counter-pop {
  animation: counterPop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes counterPop {
  0%   { transform: scale(.85); opacity: .6; }
  100% { transform: scale(1);   opacity: 1;  }
}

/* ══════════════════════════════════════════════
   EFFECT 3 — btn-primary breathing pulse ring
   ══════════════════════════════════════════════ */
.btn-primary {
  position: relative;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 2px solid rgba(124,58,237,.5);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}
.btn-primary:hover::before {
  animation: btnPulseRing .6s ease-out forwards;
}
@keyframes btnPulseRing {
  0%   { opacity: .7; transform: scale(1);    }
  100% { opacity: 0;  transform: scale(1.12); }
}

/* ══════════════════════════════════════════════
   EFFECT 4 — Per-student pill shimmer sweep
   ══════════════════════════════════════════════ */
.pc2-per-student {
  position: relative;
  overflow: hidden;
}
.pc2-per-student::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.45) 50%,
    transparent 100%
  );
  animation: pillShimmer 3.5s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}
.pc2-per-student-light::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.22) 50%,
    transparent 100%
  );
}
@keyframes pillShimmer {
  0%        { left: -80%; opacity: 1; }
  45%       { left: 130%; opacity: 1; }
  46%, 100% { left: 130%; opacity: 0; }
}

/* ══════════════════════════════════════════════
   EFFECT 5 — WhatsApp float idle pulse ring
   ══════════════════════════════════════════════ */
.float-wa--idle-pulse {
  animation: waIdlePulse 1.8s ease-out 3;
}
@keyframes waIdlePulse {
  0%   { box-shadow: 0 4px 16px rgba(37,211,102,.28), 0 0 0 0   rgba(37,211,102,.5); }
  50%  { box-shadow: 0 4px 16px rgba(37,211,102,.28), 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 16px rgba(37,211,102,.28), 0 0 0 0   rgba(37,211,102,0); }
}