.features-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 4%, rgba(37, 99, 255, .16), transparent 28%),
    radial-gradient(circle at 8% 34%, rgba(0, 184, 217, .09), transparent 25%),
    linear-gradient(180deg, #050912, #07101d 48%, #050a13);
}

.features-page a { color: inherit; text-decoration: none; }
.features-page .site-header {
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0;
  padding-inline: max(22px, calc((100vw - var(--max)) / 2));
  background: rgba(5, 9, 18, .94);
  border-bottom: 1px solid rgba(108, 138, 182, .16);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}
.features-page .header-actions { min-width: max-content; }
.features-page .header-actions .button.compact { white-space: nowrap; box-shadow: 0 8px 22px rgba(37, 99, 255, .22); }
.features-page .site-nav a.active { color: #fff; }
.features-page .site-nav a.active::after { content: ""; display: block; height: 2px; margin-top: 7px; border-radius: 2px; background: linear-gradient(90deg, #297bff, #20b8e4); }

.features-hero {
  width: min(calc(100% - 44px), var(--max));
  margin: 0 auto;
  padding: 82px 0 58px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);
  gap: 74px;
  align-items: center;
}

.features-hero h1 {
  margin: 22px 0;
  max-width: 760px;
  font-size: clamp(46px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -.052em;
}

.features-hero h1 span,
.features-hero h1 strong { display: block; }
.features-hero h1 strong { background: linear-gradient(90deg, #3a82ff, #20b8e4 58%, #6d6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.features-hero-copy > p { max-width: 690px; color: #a6b5ca; font-size: 16px; line-height: 1.75; }
.features-hero-actions { display: flex; gap: 14px; margin-top: 29px; }

.maturity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  border: 1px solid;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.status.available { color: #59dfa9; border-color: rgba(89, 223, 169, .23); background: rgba(38, 214, 157, .07); }
.status.pilot { color: #67a7ff; border-color: rgba(103, 167, 255, .25); background: rgba(37, 99, 255, .08); }
.status.test { color: #f4c56d; border-color: rgba(244, 197, 109, .24); background: rgba(211, 147, 27, .08); }
.status.roadmap { color: #b6a0ff; border-color: rgba(182, 160, 255, .24); background: rgba(113, 83, 214, .08); }

.journey-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #244774;
  border-radius: 20px;
  padding: 25px;
  background: linear-gradient(145deg, rgba(15, 28, 49, .96), rgba(6, 14, 27, .98));
  box-shadow: 0 35px 95px rgba(0, 0, 0, .43);
}

.journey-card::before { content: ""; position: absolute; inset: -80px -80px auto auto; width: 240px; height: 240px; border-radius: 50%; background: rgba(37, 99, 255, .16); filter: blur(65px); }
.journey-card > small { position: relative; color: #5f8fd9; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.journey-card h2 { position: relative; margin: 9px 0 22px; font-size: 22px; letter-spacing: -.03em; }
.journey-flow { position: relative; display: grid; gap: 9px; }
.journey-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 12px; border: 1px solid #1b304d; border-radius: 12px; background: rgba(6, 14, 27, .66); }
.journey-step > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #65a5ff; background: rgba(37, 99, 255, .11); border: 1px solid rgba(71, 139, 255, .24); font: 800 10px ui-monospace, monospace; }
.journey-step strong, .journey-step small { display: block; }
.journey-step strong { font-size: 12px; }
.journey-step small { margin-top: 3px; color: #7186a4; font-size: 9px; }
.journey-step em { color: #55d7a2; font: 750 9px ui-monospace, monospace; font-style: normal; }
.journey-summary { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.journey-summary span { padding: 10px; border: 1px solid #19304f; border-radius: 10px; background: rgba(8, 19, 34, .74); }
.journey-summary small, .journey-summary strong { display: block; }
.journey-summary small { color: #5f7695; font-size: 8px; }
.journey-summary strong { margin-top: 3px; color: #c7d6eb; font-size: 10px; }

.feature-index {
  position: sticky;
  top: 78px;
  z-index: 8;
  width: 100%;
  border-top: 1px solid #152640;
  border-bottom: 1px solid #152640;
  background: rgba(6, 13, 24, .9);
  backdrop-filter: blur(18px);
}

.feature-index-inner { width: min(calc(100% - 44px), var(--max)); margin: auto; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.feature-index-inner::-webkit-scrollbar { display: none; }
.feature-index a { flex: 0 0 auto; border: 1px solid transparent; border-radius: 999px; padding: 7px 10px; color: #8396b1; font-size: 10px; font-weight: 750; }
.feature-index a:hover { color: #dbe8f8; border-color: #24466f; background: rgba(14, 30, 53, .7); }

.capability-section {
  width: min(calc(100% - 44px), var(--max));
  margin: auto;
  padding: 86px 0;
  border-top: 1px solid #14243b;
}

.capability-heading { display: grid; grid-template-columns: 90px minmax(0, 760px); gap: 24px; margin-bottom: 36px; }
.capability-heading > span { color: #4e82cf; font: 800 11px ui-monospace, monospace; letter-spacing: .13em; }
.capability-heading h2 { margin: 0 0 12px; font-size: clamp(31px, 3.3vw, 50px); line-height: 1.08; letter-spacing: -.04em; }
.capability-heading p { margin: 0; color: #8da0ba; font-size: 14px; line-height: 1.7; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.capability-card { position: relative; min-height: 310px; display: flex; flex-direction: column; padding: 25px; border: 1px solid #1a2e49; border-radius: 16px; background: linear-gradient(145deg, rgba(13, 26, 45, .94), rgba(7, 15, 28, .96)); box-shadow: 0 20px 55px rgba(0, 0, 0, .18); }
.capability-card:hover { border-color: #285486; transform: translateY(-2px); transition: 180ms ease; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #285292; border-radius: 11px; color: #5fb2ff; background: rgba(32, 112, 242, .08); font-size: 17px; }
.capability-card h3 { margin: 20px 0 9px; font-size: 18px; letter-spacing: -.02em; }
.capability-card > p { margin: 0 0 16px; color: #8799b3; font-size: 12px; line-height: 1.65; }
.capability-card ul { display: grid; gap: 7px; margin: auto 0 0; padding: 0; list-style: none; }
.capability-card li { position: relative; padding-left: 16px; color: #aebdd1; font-size: 11px; line-height: 1.45; }
.capability-card li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: #3d88ee; }

.feature-matrix-section { width: min(calc(100% - 44px), var(--max)); margin: auto; padding: 86px 0; border-top: 1px solid #14243b; }
.matrix-wrap { overflow-x: auto; margin-top: 30px; border: 1px solid #1b304d; border-radius: 16px; background: rgba(8, 18, 32, .76); }
.feature-matrix { width: 100%; min-width: 760px; border-collapse: collapse; }
.feature-matrix th, .feature-matrix td { padding: 15px 18px; border-bottom: 1px solid #172a43; text-align: left; font-size: 11px; }
.feature-matrix th { color: #7fa4da; background: #0b192b; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.feature-matrix td:first-child { color: #e2eaf6; font-weight: 750; }
.feature-matrix td:not(:first-child) { color: #91a4be; }
.feature-matrix tr:last-child td { border-bottom: 0; }
.matrix-note { color: #6f839e; font-size: 10px; line-height: 1.6; }

.features-cta { width: min(calc(100% - 44px), var(--max)); margin: 15px auto 80px; padding: 56px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; border: 1px solid #285487; border-radius: 22px; background: radial-gradient(circle at 85% 15%, rgba(37, 99, 255, .22), transparent 36%), linear-gradient(135deg, #0b192d, #07111f); }
.features-cta small { color: #5589d8; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.features-cta h2 { max-width: 850px; margin: 10px 0 8px; font-size: clamp(29px, 3vw, 45px); line-height: 1.12; letter-spacing: -.04em; }
.features-cta p { max-width: 780px; margin: 0; color: #8fa1ba; font-size: 13px; }
.features-cta-actions { display: grid; gap: 10px; min-width: 190px; }

@media (max-width: 1120px) {
  .features-hero { grid-template-columns: 1fr; }
  .journey-card { max-width: 760px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .features-cta { grid-template-columns: 1fr; }
  .features-cta-actions { grid-template-columns: repeat(2, max-content); }
}

@media (max-width: 900px) {
  .features-page .site-header { top: 0; }
  .feature-index { top: 68px; }
  .capability-heading { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 680px) {
  .features-page .site-header { padding-inline: 14px; }
  .features-hero, .capability-section, .feature-matrix-section, .features-cta { width: calc(100% - 28px); }
  .features-hero { padding: 52px 0 46px; gap: 42px; }
  .features-hero h1 { font-size: 41px; }
  .features-hero-actions, .features-cta-actions { grid-template-columns: 1fr; display: grid; }
  .features-hero-actions .button, .features-cta-actions .button { width: 100%; }
  .journey-card { padding: 17px; }
  .journey-step { grid-template-columns: 32px 1fr; }
  .journey-step em { display: none; }
  .journey-summary { grid-template-columns: 1fr; }
  .feature-index-inner { width: calc(100% - 28px); }
  .capability-section, .feature-matrix-section { padding: 64px 0; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 0; }
  .features-cta { padding: 34px 23px; margin-bottom: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}