/* SchoolOS product page — loaded only on schoolos.html, on top of style.css.
 * This page replaces the shared site header with its own minimal product nav,
 * so it reads as a standalone product microsite. Rules prefixed .schoolos-page
 * override shared components; everything else (product-*, po-*, stat-*) is new. */

:root { --po-nav-h: 64px; }
html { scroll-padding-top: calc(var(--po-nav-h) + var(--space-4)); }

@media (prefers-reduced-motion: no-preference) {
  .schoolos-page [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .schoolos-page [data-reveal].is-visible { opacity: 1; transform: none; }
  .schoolos-page [data-reveal="stagger"] > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  }
  .schoolos-page [data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
  .schoolos-page [data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 60ms; }
  .schoolos-page [data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 120ms; }
  .schoolos-page [data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 180ms; }
  .schoolos-page [data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 240ms; }
  .schoolos-page [data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 300ms; }
}

/* ---------- Product nav (replaces the site header on this page) ---------- */
.product-nav {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--po-nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-default);
}
.product-nav-inner { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding-block: var(--space-2); }
.po-brand { flex: none; min-height: 32px; margin-right: 0; }
.po-brand img { height: 26px; width: auto; }
.product-nav-links {
  display: none; flex: 1; gap: var(--space-6); overflow-x: auto; scrollbar-width: none;
  min-width: 0;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.product-nav-links::-webkit-scrollbar { display: none; }
.product-nav-links a {
  flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  text-decoration: none; white-space: nowrap; padding-block: var(--space-2);
  border-bottom: 2px solid transparent; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.product-nav-links a:hover { color: var(--text-primary); }
.product-nav-links a.is-active { color: var(--accent); border-color: var(--accent); }
.product-nav .lang-btn, .product-nav .theme-btn { flex: none; margin-left: auto; }
.product-nav .theme-btn { margin-left: 0; }
.po-nav-cta { flex: none; }
@media (min-width: 640px) {
  .product-nav-links { display: flex; }
  .product-nav .lang-btn { margin-left: 0; }
}

/* ---------- Hero ---------- */
.product-hero {
  position: relative; overflow: hidden;
  padding-block: var(--space-16) var(--space-16);
  background: var(--invert-bg); color: var(--invert-text);
  isolation: isolate;
}
@media (min-width: 768px) { .product-hero { padding-block: var(--space-24) var(--space-16); } }
.product-hero::before, .product-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px);
}
.product-hero::before {
  width: 640px; height: 640px; top: -220px; left: -160px;
  background: radial-gradient(circle, var(--brand) 0%, transparent 70%); opacity: .35;
}
.product-hero::after {
  width: 560px; height: 560px; bottom: -260px; right: -140px;
  background: radial-gradient(circle, var(--invert-accent) 0%, transparent 70%); opacity: .25;
}
@media (prefers-reduced-motion: no-preference) {
  .product-hero::before { animation: po-float-a 16s ease-in-out infinite; }
  .product-hero::after { animation: po-float-b 18s ease-in-out infinite; }
}
@keyframes po-float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, 30px); } }
@keyframes po-float-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, -40px); } }

.product-hero-inner { display: grid; gap: var(--space-12); justify-items: center; text-align: center; }
/* SchoolOS mark: dark disc, so a thin ring keeps it visible on dark backgrounds */
.product-logo { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 1px var(--invert-border), 0 12px 32px rgb(0 0 0 / .25); }
.product-logo + .product-eyebrow { margin-top: calc(var(--space-12) * -0.6); }
.product-logo-sm { display: block; width: 64px; height: 64px; margin: 0 0 var(--space-4); box-shadow: 0 0 0 1px var(--border-default); }
.product-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--invert-accent); padding: var(--space-1) var(--space-4);
  border: 1px solid var(--invert-border); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--invert-accent) 12%, transparent);
}
.product-title {
  font-size: clamp(2.75rem, 3.2rem + 3vw, 6rem); font-weight: 800; line-height: .98;
  letter-spacing: -.03em; max-width: 18ch; text-wrap: balance;
}
.product-lead {
  font-size: clamp(var(--fs-lg), 1rem + 1vw, 22px); line-height: 1.6; max-width: 54ch;
  color: var(--invert-muted);
}
.product-hero .btn-row { justify-content: center; }
.product-hero .btn-secondary { color: var(--invert-text); border-color: var(--invert-border); }
.product-hero .btn-secondary:hover { border-color: var(--invert-text); }
.product-hero .hero-note { justify-content: center; color: var(--invert-muted); }
.product-hero .hero-note a { color: var(--invert-text); }

/* Device mockup */
.product-mockup { width: 100%; max-width: 760px; margin-top: var(--space-8); }
.product-mockup svg { width: 100%; height: auto; display: block; overflow: visible; }
.po-laptop { filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .4)); }
.po-phone { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .product-mockup-float { animation: po-bob 7s ease-in-out infinite; }
}
@keyframes po-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.po-pulse-ring { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .po-pulse-ring { animation: po-pulse 2.2s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .po-pulse-ring { opacity: 0; } }
@keyframes po-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }

/* ---------- Stat band ---------- */
.stat-band { padding-block: var(--space-12); border-bottom: 1px solid var(--border-default); }
.stat-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item { display: grid; gap: var(--space-1); position: relative; }
.stat-item + .stat-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-4)); top: 10%; bottom: 10%; width: 1px;
  background: var(--border-default); display: none;
}
@media (min-width: 768px) { .stat-item::before { display: block; } .stat-item:first-child::before { display: none; } }
.stat-num {
  font-size: clamp(32px, 2rem + 2vw, 56px); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.stat-label { font-size: var(--fs-sm); color: var(--text-muted); max-width: 20ch; margin-inline: auto; }

/* ---------- Feature rows: small numbered index, not a watermark ---------- */
.schoolos-page .service-meta { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.po-index {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  color: var(--text-disabled); font-variant-numeric: tabular-nums; user-select: none;
}
.po-index span { color: var(--text-muted); }
.schoolos-page .check-list li { transition: transform 150ms var(--ease-out); }
.schoolos-page .check-list li:hover { transform: translateX(4px); }
.schoolos-page .service-meta svg.icon-lg { transition: transform 250ms var(--ease-out); }
.schoolos-page .service-row:hover .service-meta svg.icon-lg { transform: scale(1.12) rotate(-4deg); }

/* ---------- Cards (role grid + "also included" grid) ---------- */
.schoolos-page .grid-3 .card { border-top: 2px solid transparent; transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.schoolos-page .grid-3 .card:hover { border-top-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.schoolos-page .grid-3 .card .card-top svg.icon-lg { transition: transform 250ms var(--ease-out); }
.schoolos-page .grid-3 .card:hover .card-top svg.icon-lg { transform: scale(1.12); }

/* ---------- CTA ---------- */
.schoolos-page .cta-band { padding-block: var(--space-24); }
.schoolos-page .cta-box {
  background: linear-gradient(135deg, var(--invert-bg) 0%, #2A0A0A 60%, var(--accent-bg) 140%);
  padding: var(--space-16) var(--space-8);
}
.schoolos-page .cta-box .h-title { font-size: clamp(28px, 1.8rem + 1.6vw, 44px); max-width: 20ch; }

/* ---------- Pull quote ---------- */
.po-quote {
  font-size: clamp(22px, 1.2rem + 1.4vw, 34px); font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em; max-width: 24ch; text-wrap: balance;
}