:root { color-scheme: dark; }
html { scroll-padding-top: 5rem; }
body { overflow-x: hidden; }

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.82) 60%, transparent 100%);
}

.text-gradient {
  background: linear-gradient(100deg, #fff 0%, #a1a1aa 50%, #ff5a00 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-link { position: relative; transition: color .25s ease; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background: #ff5a00; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.pulse-dot { box-shadow: 0 0 0 0 rgba(255,90,0,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255,90,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,0,0); } }

.orbit-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.25), transparent 35%, rgba(255,90,0,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.metric-card { display: flex; min-height: 7.75rem; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; background: rgba(255,255,255,.035); padding: 1.1rem; color: #d4d4d8; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.metric-card svg { width: 1.35rem; height: 1.35rem; color: #ff5a00; }
.metric-card:hover { transform: translateY(-4px); border-color: rgba(255,90,0,.4); background: rgba(255,90,0,.06); }

.eyebrow { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; color: #ff5a00; }
.section-title { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 900; }
.section-copy { max-width: 48rem; font-size: 1.1rem; line-height: 1.8; color: #52525b; }

.service-card { min-height: 25rem; border-radius: 2rem; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 24px 80px rgba(0,0,0,.10); transition: transform .35s ease, box-shadow .35s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 30px 90px rgba(0,0,0,.18); }
.service-card h3 { margin-top: 4rem; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.service-card p { margin-top: 1.1rem; max-width: 42rem; line-height: 1.75; }
.service-top { display: flex; align-items: flex-start; justify-content: space-between; }
.service-top svg { width: 2.35rem; height: 2.35rem; }
.service-top span { font-size: .8rem; opacity: .5; }
.service-dark { background: #050505; color: #fff; }
.service-dark p { color: #a1a1aa; }
.service-dark svg { color: #ff5a00; }
.service-light { background: #fff; color: #09090b; }
.service-light p { color: #52525b; }
.service-light svg { color: #ff5a00; }
.service-orange { background: #ff5a00; color: #fff; }
.service-orange p { color: #fff7ed; }

.ecosystem-card { border: 1px solid rgba(255,255,255,.09); border-radius: 2rem; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); padding: 2rem; box-shadow: 0 26px 90px rgba(0,0,0,.25); transition: transform .35s ease, border-color .35s ease; }
.ecosystem-card:hover { transform: translateY(-7px); border-color: rgba(255,90,0,.45); }
.badge-orange, .badge-dark { display: inline-flex; border-radius: 999px; padding: .42rem .8rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.badge-orange { background: #ff5a00; color: #fff; }
.badge-dark { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #d4d4d8; }
.shield-mark { min-height: 16rem; display: flex; flex-direction: column; justify-content: center; border-radius: 1.75rem; background: radial-gradient(circle at 70% 20%, rgba(255,90,0,.28), transparent 32%), linear-gradient(145deg, #121214, #060607); border: 1px solid rgba(255,255,255,.08); padding: 2rem; }
.shield-mark span { font-size: clamp(3.6rem, 10vw, 6.5rem); line-height: .9; font-weight: 900; letter-spacing: -.06em; }
.shield-mark small { margin-top: .8rem; text-transform: uppercase; letter-spacing: .22em; color: #71717a; font-size: .7rem; }
.shield-mark + p { margin-top: 2rem; }

.company-pill { border: 1px solid #e4e4e7; border-radius: 999px; padding: .55rem 1rem; font-size: .82rem; font-weight: 700; color: #52525b; }

.insight-card { border-radius: 1.5rem; background: #fff; padding: 1.3rem; box-shadow: 0 18px 60px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease; }
.insight-card:hover { transform: translateY(-7px); box-shadow: 0 26px 75px rgba(0,0,0,.14); }
.insight-visual { display: flex; height: 12rem; align-items: center; justify-content: center; border-radius: 1rem; color: white; }
.insight-visual svg { width: 3.25rem; height: 3.25rem; }
.insight-card > p { margin-top: 1.4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: #ff5a00; }
.insight-card h3 { margin-top: .8rem; font-size: 1.28rem; line-height: 1.4; font-weight: 800; letter-spacing: -.02em; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Explicit category styling prevents malformed/cached card markup from losing the label style. */
.insight-card .insight-category { margin-top: 1.4rem !important; font-size: .72rem !important; line-height: 1 !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .18em !important; color: #ff5a00 !important; }