html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: rgb(var(--bg-rgb));
  font-family: var(--font-sans);
  color: rgb(var(--text-rgb));
  overflow-x: clip;
}
a { color: var(--amber-light); text-decoration: none; }
a:hover { color: var(--amber-light); }
::selection { background: rgba(var(--orange-deep-rgb), .4); }

m/* Visually-hidden text kept available to screen readers & search engines */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Prevent single-word widows on headlines and subheads site-wide */
h1, h2, h3, h4,
.hero-h1, .page-hero-h1, .triad-h2, .cta-h2, .how-h2, .how-step-title,
.feature-row-title, .knockout-card-title, .ai-highlight-title, .usecase-title,
.feature-card-title, .curriculum-phase-title, .triad-card-title,
.hero-sub, .page-hero-sub, .triad-p, .cta-sub, .feature-row-body,
.testimonial-quote {
  text-wrap: balance;
}
.hero-sub, .page-hero-sub, .triad-p, .cta-sub, .feature-row-body {
  text-wrap: pretty;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.gradient-text {
  background: linear-gradient(90deg, var(--orange), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--amber-light);
}

.btn {
  display: inline-block;
  border-radius: 11px;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary {
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep) 60%, var(--orange-red));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 50px rgba(var(--orange-deep-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 70px rgba(var(--orange-deep-rgb), .65), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-secondary {
  padding: 18px 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .03);
  color: rgb(var(--text-rgb));
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, .13); }
.btn-white {
  padding: 19px 46px;
  background: #fff;
  color: rgb(var(--bg-rgb));
  font-weight: 800;
  box-shadow: 0 10px 60px rgba(255, 255, 255, .15);
}
.btn-white:hover { transform: translateY(-3px); }
.btn-outline {
  padding: 19px 46px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-weight: 600;
}
.btn-outline:hover { background: rgba(255, 255, 255, .12); }
/* Buttons rendered as links (<a class="btn ...">) must keep their own color in
   every state. The global `a:hover` rule above has specificity (0,1,1), which
   would otherwise beat a variant's (0,1,0) color and turn button text amber. */
a.btn-primary, a.btn-primary:hover { color: #fff; }
a.btn-white, a.btn-white:hover { color: rgb(var(--bg-rgb)); }
a.btn-secondary, a.btn-secondary:hover { color: rgb(var(--text-rgb)); }
a.btn-outline, a.btn-outline:hover { color: rgb(var(--text-rgb)); }
.btn-pop {
  padding: 13px 30px;
  font-size: 15px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep) 60%, var(--orange-red));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(var(--orange-deep-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-pop:hover { transform: translateY(-3px); box-shadow: 0 16px 46px rgba(var(--orange-deep-rgb), .68), inset 0 1px 0 rgba(255, 255, 255, .3); }

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes aurora {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg) scale(1); opacity: .85; }
  33% { transform: translate(-48%, 2%) rotate(8deg) scale(1.08); opacity: 1; }
  66% { transform: translate(-52%, -2%) rotate(-6deg) scale(.96); opacity: .75; }
}
@keyframes orbPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes floatY2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .6); }
  50% { box-shadow: 0 0 0 6px rgba(var(--green-rgb), 0); }
}
@keyframes spinSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spinSlowRev {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes beamFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}