/* ---------- tokens ---------- */
:root{
  --bg:#05070C;
  --ink:#F5F7FA;
  --ink-dim:rgba(245,247,250,0.62);
  --ink-dimmer:rgba(245,247,250,0.4);
  --teal:#2FE6E0;
  --teal-soft:#5fbfea;
  --purple:#8B5CFF;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.1);
  --glass:rgba(255,255,255,0.03);
  --radius-lg:20px;
  --radius-md:14px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 0%, rgba(139,92,255,0.16), transparent 45%),
    radial-gradient(circle at 88% 8%, rgba(47,230,224,0.13), transparent 42%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--teal);color:var(--bg)}
a{color:var(--teal);text-decoration:none}
a:hover{color:#7CF2EE}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0}
.accent{color:var(--teal)}

/* ---------- nav & logo ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 48px;
  background:rgba(8,11,18,0.65);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:background .35s ease, padding .35s ease;
}
.nav.scrolled{background:rgba(8,11,18,0.85)}

.brand{
  display:flex;align-items:center;gap:10px;
  transform-origin:left center;
  transform:scale(1.55);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.nav.scrolled .brand{transform:scale(1)}

.logo{position:relative;width:28px;height:28px;flex:none}
.logo-ring{position:absolute;border-radius:50%}
.logo-ring--outer{
  inset:0;
  border:1.5px solid rgba(47,230,224,0.35);
  animation:ringPulseTeal 3.4s ease-in-out infinite;
}
.logo-ring--inner{
  inset:4px;
  border:1.5px solid rgba(139,92,255,0.55);
  animation:ringPulsePurple 3.4s ease-in-out infinite;
  animation-delay:-1.1s;
}
.logo-dot{
  position:absolute;inset:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  animation:dotPulse 3.4s ease-in-out infinite;
}
@keyframes ringPulseTeal{
  0%,100%{border-color:rgba(47,230,224,0.32);filter:drop-shadow(0 0 0 rgba(47,230,224,0))}
  50%{border-color:rgba(47,230,224,0.95);filter:drop-shadow(0 0 5px rgba(47,230,224,0.85))}
}
@keyframes ringPulsePurple{
  0%,100%{border-color:rgba(139,92,255,0.5);filter:drop-shadow(0 0 0 rgba(139,92,255,0))}
  50%{border-color:rgba(139,92,255,1);filter:drop-shadow(0 0 5px rgba(139,92,255,0.9))}
}
@keyframes dotPulse{
  0%,100%{filter:drop-shadow(0 0 2px rgba(139,92,255,0.35));transform:scale(1)}
  50%{filter:drop-shadow(0 0 9px rgba(47,230,224,0.85));transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .logo-ring,.logo-dot{animation:none}
  .brand{transition:none}
}

.wordmark{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:0.02em;white-space:nowrap;color:var(--ink)}

.nav-links{display:flex;gap:28px;font-size:13px;color:var(--ink-dim)}
.nav-links a{color:var(--ink-dim)}
.nav-links a:hover{color:var(--ink)}

/* ---------- floating orb ---------- */
/* Temporarily disabled — see the matching note in main.js. Hidden here too
   so nothing shows even before/without JS running. */
.orb,.orb-trail{display:none}
/* z-index sits above the plain page background and the hero image, but
   below every section's own content (see ".page > section, .page > footer"
   below) so the orb visibly passes *behind* cards, screenshots and text
   instead of covering them, and only shows in the empty space around them. */
.orb{
  position:fixed;
  top:var(--orb-y, 34vh);
  left:var(--orb-x, 82vw);
  width:200px;height:200px;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .6s cubic-bezier(.3,.7,.4,1);
  z-index:2;
  pointer-events:none;
}
.orb.orb--away{transform:translate(-50%,-50%) scale(0.5)}
/* A couple of docks (beside "IEP Tracker", beside the admin console title)
   sit right next to the page's own edge padding, which isn't wide enough
   to fit the regular away-size orb without either overlapping the heading
   or spilling off the browser edge. Those stops shrink further so the full
   orb — and the gap next to the text — both stay on screen. */
.orb.orb--away.orb--compact{transform:translate(-50%,-50%) scale(0.25)}

/* Persistent comet trail: drawn once into document coordinates (not
   viewport-fixed), so it stays in place on the page as the orb travels
   past and scrolls do not erase it. Two overlaid polylines give the
   soft-glow-around-a-thin-line look: a wide blurred halo underneath a
   crisp hairline on top. */
.orb-trail{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:2;
}
.orb-trail-glow{
  fill:none;
  stroke:rgba(255,255,255,0.5);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:blur(5px);
}
.orb-trail-line{
  fill:none;
  stroke:rgba(255,255,255,0.92);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (prefers-reduced-motion:reduce){
  .orb-trail{display:none}
}
/* Rotation + glow are gated behind .orb--glowing (set by JS) rather than
   running always: the rings sit still and dim while the orb is resting at
   its home/hero position, and only spin up once it actually leaves — see
   the "orb--glowing" comment in main.js for the on/off timing. */
.orb-spin{
  position:absolute;inset:0;
}
.orb.orb--glowing .orb-spin{
  animation:orbSpin 14s linear infinite;
}
.orb-ring{position:absolute;border-radius:50%}
.orb-ring--outer{
  inset:0;
  border:2px solid rgba(47,230,224,0.32);
  filter:drop-shadow(0 0 0 rgba(47,230,224,0));
  transition:border-color .8s ease, filter .8s ease;
}
.orb.orb--glowing .orb-ring--outer{
  animation:orbPulseTeal 3.6s ease-in-out infinite;
}
.orb-ring--inner{
  inset:35px;
  border:2px solid rgba(139,92,255,0.5);
  filter:drop-shadow(0 0 0 rgba(139,92,255,0));
  transition:border-color .8s ease, filter .8s ease;
}
.orb.orb--glowing .orb-ring--inner{
  animation:orbPulsePurple 3.6s ease-in-out infinite;
  animation-delay:-1.2s;
}
.orb-core{
  position:absolute;inset:75px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  transition:filter .8s ease;
}
.orb.orb--glowing .orb-core{
  animation:orbCorePulse 3.6s ease-in-out infinite;
}
@keyframes orbSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orbPulseTeal{
  0%,100%{border-color:rgba(47,230,224,0.28);filter:drop-shadow(0 0 0 rgba(47,230,224,0))}
  50%{border-color:rgba(47,230,224,0.85);filter:drop-shadow(0 0 16px rgba(47,230,224,0.6))}
}
@keyframes orbPulsePurple{
  0%,100%{border-color:rgba(139,92,255,0.45);filter:drop-shadow(0 0 0 rgba(139,92,255,0))}
  50%{border-color:rgba(139,92,255,0.95);filter:drop-shadow(0 0 16px rgba(139,92,255,0.65))}
}
@keyframes orbCorePulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(139,92,255,0.4));transform:scale(1)}
  50%{filter:drop-shadow(0 0 22px rgba(47,230,224,0.75));transform:scale(1.1)}
}
@media (max-width:900px){
  .orb{width:130px;height:130px}
  .orb-ring--inner{inset:22px}
  .orb-core{inset:48px}
}
@media (max-width:560px){
  .orb{opacity:0.7}
}
@media (prefers-reduced-motion:reduce){
  .orb{transition:none !important}
  .orb-spin,.orb-ring,.orb-core{animation:none}
}

/* ---------- layout helpers ---------- */
.page{max-width:1240px;margin:0 auto;padding:0 48px}
/* Every top-level block of real content outranks the fixed orb (z-index:2)
   so the orb can never sit visually on top of text, cards, or screenshots —
   it only shows through the transparent gaps around them. The hero is the
   deliberate exception: its own background image stays below the orb
   (z-index:0, see .hero-bg) while its text (.hero-content) stays above it. */
.page > section, .page > footer{position:relative;z-index:5}
.kicker{font-family:var(--font-mono);font-size:13px;color:var(--teal)}
.kicker--purple{color:var(--purple)}
.body{font-size:16px;line-height:1.65;color:var(--ink-dim);margin:0 0 28px;max-width:440px}
.body--lg{font-size:16px;line-height:1.65;color:rgba(245,247,250,0.75);margin:0;max-width:none}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  width:100%;min-height:620px;
  display:flex;align-items:center;justify-content:center;
  padding:150px 48px 110px;text-align:center;
}
/* deliberately z-index:0 (not the .page>section z-index:5) so the orb
   still shows over the hero artwork itself before it detaches */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(5,7,12,0.35) 0%, rgba(5,7,12,0.6) 55%, rgba(5,7,12,0.92) 100%),
    linear-gradient(90deg, rgba(5,7,12,0.6), rgba(5,7,12,0.1) 30%, rgba(5,7,12,0.1) 70%, rgba(5,7,12,0.6));
}
.hero-content{position:relative;z-index:5;max-width:820px;margin:0 auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:100px;
  background:rgba(139,92,255,0.16);border:1px solid rgba(139,92,255,0.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:#B9A6FF;
  margin-bottom:28px;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--purple);animation:glowPulse 2.2s infinite}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}

.hero h1{
  font-size:64px;line-height:1.05;margin:0 auto 22px;letter-spacing:-0.02em;max-width:780px;
  text-shadow:0 4px 32px rgba(0,0,0,0.55);
}
.lede{
  font-size:18px;line-height:1.6;color:rgba(245,247,250,0.82);max-width:560px;margin:0 auto 0;
  text-shadow:0 2px 16px rgba(0,0,0,0.6);
}

/* ---------- section intro ---------- */
.section-intro{padding:20px 0 40px;text-align:center}
.section-intro h2{font-size:38px;margin-top:12px}

/* ---------- split sections ---------- */
.split{
  padding:60px 0 100px;
  display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;
}
.split--reverse{grid-template-columns:1.15fr 1fr}
.split--reverse > *:first-child{order:1}
.split--reverse > *:last-child{order:2}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:100px;
  font-family:var(--font-mono);font-size:11px;margin-bottom:18px;
}
.tag--teal{background:rgba(47,230,224,0.12);border:1px solid rgba(47,230,224,0.3);color:var(--teal)}
.tag--purple{background:rgba(139,92,255,0.12);border:1px solid rgba(139,92,255,0.3);color:var(--purple)}

.split h3{font-size:38px;margin:0 0 18px}

.feature-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px}
.feature-list li{position:relative;padding-left:26px;font-size:14px;color:rgba(245,247,250,0.75)}
.feature-list li::before{position:absolute;left:0;top:0;font-size:15px}
.feature-list--teal li::before{content:'◈';color:var(--teal)}
.feature-list--purple li::before{content:'◆';color:var(--purple)}

.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:600;font-size:14px}
.btn--solid{background:var(--teal);color:var(--bg)}
.btn--solid:hover{background:#5fefe9;color:var(--bg)}
.btn--outline{border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.05);color:var(--ink)}
.btn--outline:hover{background:rgba(255,255,255,0.1);color:var(--ink)}

/* ---------- phone mockups ---------- */
.phone-stack{position:relative;height:560px}
.phone-shell{
  background:#0B0F18;border-radius:26px;padding:8px;
  border:1px solid var(--border-strong);
}
.phone-shell img{border-radius:19px}
.phone-card{position:absolute;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5))}
.phone-card--1{left:0;top:60px;width:190px;transform:rotate(-6deg);z-index:1}
.phone-card--2{left:150px;top:0;width:200px;transform:rotate(-1deg);z-index:2;filter:drop-shadow(0 24px 48px rgba(0,0,0,0.55))}
.phone-card--3{left:330px;top:70px;width:190px;transform:rotate(5deg);z-index:1}

/* ---------- wide glass card (FERPA) ---------- */
.wide-card-section{padding:0 0 100px}
.wide-card{
  border-radius:var(--radius-lg);padding:36px;
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
}
.wide-card-phone{width:220px;margin:0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5))}

/* ---------- browser-chrome mockups ---------- */
.browser-section{padding:0 0 110px}
.mobile-app-section{padding:0 0 120px}
.browser-section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.browser-title{font-size:26px;margin:0 0 24px}

.browser-frame{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-strong);box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.browser-frame--flex{display:flex;flex-direction:column}
.browser-chrome{
  background:#12172A;padding:10px 16px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--border);
}
.dot{width:11px;height:11px;border-radius:50%}
.dot--red{background:#FF5F57}
.dot--yellow{background:#FEBC2E}
.dot--green{background:#28C840}
.browser-url{margin-left:14px;font-family:var(--font-mono);font-size:11px;color:var(--ink-dimmer)}
.browser-frame img{width:100%;display:block}
#products ~ .browser-section img,
.browser-section img{max-height:520px;object-fit:cover;object-position:top}
.browser-frame--flex img{max-height:none;object-fit:fill;object-position:top}

/* ---------- triptych ---------- */
.triptych{padding:0 0 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.triptych-item{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);height:260px}
.triptych-item img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- mobile trio ---------- */
.mobile-trio{display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.mobile-trio .phone-card{position:static;width:220px;filter:drop-shadow(0 24px 48px rgba(0,0,0,0.55))}

/* ---------- footer ---------- */
.footer{
  padding:36px 48px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--ink-dimmer);
  max-width:1240px;margin:0 auto;
}
.mono{font-family:var(--font-mono)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .nav{padding:14px 24px}
  .nav-links{display:none}
  .page{padding:0 24px}
  .hero{padding:90px 24px 64px}
  .hero h1{font-size:42px}
  .split,.split--reverse{grid-template-columns:1fr;gap:40px}
  .split--reverse > *:first-child{order:2}
  .split--reverse > *:last-child{order:1}
  .wide-card{grid-template-columns:1fr}
  .phone-stack{height:380px}
  .phone-card--1{width:130px;top:40px}
  .phone-card--2{width:140px;left:100px}
  .phone-card--3{width:130px;left:220px;top:50px}
  .triptych{grid-template-columns:1fr}
  .footer{flex-direction:column;gap:8px}
}