/* EduCampusOS — shared design system. Apple/Microsoft-grade premium bar: generous whitespace,
   confident type scale, one accent color, alternating light/gray/dark sections, subtle motion.
   Loaded by every page — see companywebsite/TODO.md for the design decisions behind this. */

:root{
  /* ---- Neutrals (Apple's actual palette: #F5F5F7 gray, #1D1D1F ink) ---- */
  --bg:            #FFFFFF;
  --bg-alt:        #F5F5F7;
  --bg-dark:       #0B0C0E;
  --bg-dark-alt:   #141518;
  --ink:           #1D1D1F;
  --ink-soft:      #6E6E73;
  --ink-faint:     #A1A1A6;
  --line:          rgba(29,29,31,0.10);
  --line-dark:     rgba(255,255,255,0.12);
  --white:         #FFFFFF;

  /* ---- Accent: indigo (intelligence / AI) + green (growth) ---- */
  --accent:        #5B5FEF;
  --accent-ink:    #3A3DBE;
  --accent-soft:   #EEEEFD;
  --accent-glow:   rgba(91,95,239,0.35);
  --green:         #12B76A;
  --green-soft:    #E7F9F0;
  --amber:         #F59E0B;

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius / shadow ---- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow-sm: 0 2px 8px rgba(29,29,31,0.06);
  --shadow-md: 0 12px 32px rgba(29,29,31,0.10);
  --shadow-lg: 0 24px 64px rgba(29,29,31,0.16);
  --shadow-glow: 0 12px 40px var(--accent-glow);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; font-size:16px; line-height:1.6;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 28px; }
.wrap-med{ max-width:960px; margin:0 auto; padding:0 28px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
h1{ font-size:clamp(38px,6vw,72px); line-height:1.04; font-weight:700; }
h2{ font-size:clamp(28px,4.2vw,44px); line-height:1.1; }
h3{ font-size:clamp(20px,2.6vw,26px); line-height:1.25; }
p{ color:var(--ink-soft); }
.section-dark h1,.section-dark h2,.section-dark h3{ color:var(--white); }
.section-dark p{ color:rgba(255,255,255,0.72); }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow.neutral{ color:var(--ink-faint); }
.section-dark .eyebrow{ color:#9AA0FF; }
.eyebrow::before{ content:""; width:16px; height:2px; border-radius:2px; background:currentColor; }

.lede{ font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:var(--ink-soft); max-width:640px; }
.lede.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:15px;
  text-decoration:none; padding:14px 26px; border-radius:100px; border:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease;
}
.btn.primary{ background:var(--ink); color:var(--white); }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn.accent{ background:var(--accent); color:var(--white); box-shadow:0 8px 24px var(--accent-glow); }
.btn.accent:hover{ transform:translateY(-2px); box-shadow:0 14px 34px var(--accent-glow); }
.btn.ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.btn.ghost:hover{ transform:translateY(-2px); background:var(--bg-alt); }
.btn.on-dark.ghost{ border-color:var(--line-dark); color:var(--white); }
.btn.on-dark.ghost:hover{ background:rgba(255,255,255,0.08); }
.btn.sm{ padding:10px 18px; font-size:13.5px; }
.btn svg{ width:16px; height:16px; }

/* ---- Sections ---- */
section{ padding:120px 0; position:relative; }
section.tight{ padding:80px 0; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--bg-dark); color:var(--white); }
@media (max-width:820px){ section{ padding:80px 0; } section.tight{ padding:56px 0; } }

.cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cta-row.center{ justify-content:center; }

/* ---- Nav ---- */
/* backdrop-filter lives on ::before, NOT on nav.site-nav itself: a filter/backdrop-filter on an
   ancestor makes that ancestor the containing block for any position:fixed descendant (CSS spec),
   which broke the mobile menu panel below — it was fixing to the ~64px-tall nav bar instead of the
   viewport, rendering as a cropped sliver. Pseudo-elements don't carry this side effect back onto
   the host box, so the blur renders identically with none of that breakage. */
nav.site-nav{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line);
}
nav.site-nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,0.72); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
nav.site-nav .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1200px; margin:0 auto; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.01em; display:flex; align-items:center; gap:4px; text-decoration:none; }
.brand .accent-text{ color:var(--accent); }
.brand img{ height:24px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14px; font-weight:500; text-decoration:none; color:var(--ink-soft); transition:color .15s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle svg{ width:24px; height:24px; }
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  /* Compact dropdown, not a full-screen takeover — only as tall as its own links, anchored right
     below the sticky nav, with its own shadow since it no longer has a full backdrop behind it. */
  .nav-links.mobile-open{
    display:flex; flex-direction:column; position:fixed; top:64px; left:0; right:0; background:var(--bg);
    padding:12px 28px; gap:0; z-index:99; max-height:calc(100vh - 64px); overflow-y:auto;
    box-shadow:0 16px 32px rgba(29,29,31,0.14); border-bottom:1px solid var(--line);
  }
  .nav-links.mobile-open a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:17px; color:var(--ink); }
  .nav-links.mobile-open a:last-child{ border-bottom:none; }
}

/* ---- Hero ---- */
.hero{
  padding:130px 0 100px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 800px 500px at 20% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 10%, var(--green-soft) 0%, transparent 60%);
}
/* .hero's own padding is a class selector, so it beats the generic `section{padding:80px 0}`
   mobile rule below (media queries don't add specificity) — needs its own override, otherwise
   mobile gets ~200px of dead space (130px hero padding + the 64px sticky nav) before any content
   is visible. */
@media (max-width:820px){ .hero{ padding:56px 0 48px; } }
.hero-head{ max-width:900px; margin:0 auto; position:relative; z-index:1; }
.hero .lede{ margin:26px auto 0; }
.hero .cta-row{ margin-top:38px; justify-content:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
  border-radius:100px; padding:8px 16px; font-size:13px; font-weight:500; color:var(--ink-soft);
  box-shadow:var(--shadow-sm); margin-bottom:28px;
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }

/* ---- Cards / grids ---- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card .card-icon{
  width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px;
}
.card h3{ margin-bottom:8px; }
.card p{ font-size:14.5px; }
.section-dark .card{ background:var(--bg-dark-alt); border-color:var(--line-dark); }

.pill{
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.04em;
  padding:5px 12px; border-radius:100px; background:var(--bg-alt); color:var(--ink-soft); border:1px solid var(--line);
}
.pill.accent{ background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }
.pill.green{ background:var(--green-soft); color:#0A7A47; border-color:transparent; }

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.4s; }

/* ---- Page header (non-home pages) ---- */
.page-header{ padding:100px 0 60px; text-align:center; }
@media (max-width:820px){ .page-header{ padding:48px 0 40px; } }
.page-header .lede{ margin:20px auto 0; }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:18px; }
.breadcrumb a{ text-decoration:none; color:var(--ink-faint); }
.breadcrumb a:hover{ color:var(--accent); }

/* ---- Footer ---- */
footer.site-footer{ background:var(--bg-dark); color:rgba(255,255,255,0.6); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
.footer-brand .brand{ color:var(--white); }
.footer-brand p{ margin-top:14px; font-size:13.5px; color:rgba(255,255,255,0.5); max-width:280px; }
.footer-col h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.4); font-weight:500; margin-bottom:16px; }
.footer-col a{ display:block; font-size:14px; color:rgba(255,255,255,0.7); text-decoration:none; margin-bottom:12px; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:12.5px; color:rgba(255,255,255,0.4); }
.footer-bottom a{ color:rgba(255,255,255,0.4); text-decoration:none; }
.footer-bottom a:hover{ color:var(--white); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---- Comparison table ---- */
.compare{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--white); }
.compare-row{ display:grid; grid-template-columns:1.1fr 1fr 1fr; }
.compare-row + .compare-row{ border-top:1px solid var(--line); }
.compare-row.head .cell{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:18px 24px; font-weight:500; }
.compare-row.head .cell.label{ color:var(--ink-faint); }
.compare-row.head .cell.them{ color:var(--ink-faint); }
.compare-row.head .cell.us{ color:var(--accent); background:var(--accent-soft); }
.cell{ padding:20px 24px; font-size:14.5px; line-height:1.55; }
.cell.label{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.cell.them{ color:var(--ink-soft); }
.cell.us{ color:var(--ink); background:rgba(91,95,239,0.03); font-weight:500; }
@media (max-width:760px){
  .compare-row{ grid-template-columns:1fr; }
  .compare-row .cell{ border-bottom:1px dashed var(--line); }
  .compare-row.head{ display:none; }
  .compare-row:not(.head) .cell.them::before{ content:"Traditional — "; font-weight:700; color:var(--ink-faint); }
  .compare-row:not(.head) .cell.us::before{ content:"EduCampusOS — "; font-weight:700; color:var(--accent); }
}

/* ---- AI Chat Widget ---- */
.chat-launcher{
  position:fixed; right:24px; bottom:24px; z-index:200; width:60px; height:60px; border-radius:50%;
  background:var(--ink); color:var(--white); border:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:24px; box-shadow:var(--shadow-lg); transition:transform .2s ease;
}
.chat-launcher:hover{ transform:translateY(-3px) scale(1.04); }
.chat-launcher .dot{ position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--white); }
.chat-panel{
  position:fixed; right:24px; bottom:96px; z-index:200; width:min(380px, calc(100vw - 48px));
  max-height:min(580px, calc(100vh - 150px)); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:none; flex-direction:column; overflow:hidden;
}
.chat-panel.open{ display:flex; }
.chat-head{ background:var(--ink); color:var(--white); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; }
.chat-head .ch-title{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.chat-head .ch-sub{ font-family:var(--font-mono); font-size:10px; color:#9AA0FF; letter-spacing:.05em; text-transform:uppercase; margin-top:3px; }
.chat-head button{ background:none; border:none; color:var(--white); font-size:20px; cursor:pointer; opacity:.7; }
.chat-head button:hover{ opacity:1; }
.chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--bg-alt); }
.chat-msg{ max-width:86%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.chat-msg.bot{ align-self:flex-start; background:var(--white); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:3px; }
.chat-msg.user{ align-self:flex-end; background:var(--accent); color:var(--white); border-bottom-right-radius:3px; }
.chat-choices{ display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.chat-choices button{
  font-family:var(--font-body); font-size:13.5px; text-align:left; padding:10px 14px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); border-radius:10px; cursor:pointer; transition:all .15s ease; font-weight:500;
}
.chat-choices button:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.chat-input-row{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); background:var(--white); }
.chat-input-row input{
  flex:1; padding:11px 14px; border-radius:10px; border:1px solid var(--line); font-family:var(--font-body);
  font-size:13.5px; background:var(--bg-alt); color:var(--ink);
}
.chat-input-row input:focus{ outline:2px solid var(--accent); outline-offset:1px; background:var(--white); }
.chat-input-row button{
  font-family:var(--font-body); font-weight:600; font-size:13px; padding:0 18px; border-radius:10px;
  border:none; background:var(--ink); color:var(--white); cursor:pointer;
}
@media (max-width:480px){ .chat-panel{ right:12px; left:12px; width:auto; bottom:86px; } .chat-launcher{ right:16px; bottom:16px; } }