:root {
  --elios-navy: #061638;
  --elios-blue: #0564ff;
  --elios-green: #16a34a;
  --elios-mint: #e9fbf2;
  --elios-border: #d8e6f5;
  --elios-soft: #f7fbff;
}

.commercial-page {
  background: var(--elios-soft);
  color: var(--elios-navy);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.commercial-header { max-width: 1440px; }
.commercial-brand { color: var(--elios-navy); font-size: 1.65rem; font-weight: 900; letter-spacing: -.04em; text-decoration: none; }
.commercial-brand span { color: #12b886; }
.commercial-nav-note { color: #65738b; font-size: .9rem; }
.commercial-nav-button { border-radius: 10px; font-weight: 800; }

.commercial-hero {
  background: linear-gradient(135deg, #fff 0%, #f5fbff 63%, #effcf6 100%);
  border: 1px solid var(--elios-border);
  box-shadow: 0 22px 60px rgba(15, 65, 125, .08);
}

.commercial-eyebrow, .section-kicker {
  color: #078244;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.commercial-eyebrow { background: var(--elios-mint); border: 1px solid #a7e8bf; }
.commercial-hero h1 { color: var(--elios-navy); letter-spacing: -.055em; }
.commercial-hero-claim { max-width: 650px; color: var(--elios-blue); font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.1; }
.commercial-hero-copy { max-width: 650px; color: #263854; line-height: 1.65; }
.commercial-primary-cta { display: inline-flex; gap: .65rem; font-weight: 800; }
.commercial-demo-note { color: #62718a; font-size: .9rem; }
.commercial-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px #fff4d6; }

.product-visual { position: relative; overflow: hidden; border: 1px solid #cfe3da; border-radius: 1.5rem; background: #fff; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 25px 55px rgba(15, 76, 145, .13); }
.product-visual::before { position: absolute; width: 220px; height: 220px; right: -100px; top: -100px; border-radius: 50%; background: #eafbf2; content: ""; }
.product-visual-top, .visual-progress-label, .visual-footer { position: relative; z-index: 1; }
.product-visual-top strong, .visual-kicker { display: block; }
.visual-kicker { color: #0e9f6e; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.product-visual-top strong { color: var(--elios-navy); font-size: 1.08rem; }
.visual-live-badge { border: 1px solid #b9d5ff; border-radius: 999px; color: var(--elios-blue); font-size: .75rem; font-weight: 800; padding: .35rem .65rem; }
.visual-progress { position: relative; z-index: 1; height: 8px; margin-top: 1.8rem; overflow: hidden; border-radius: 99px; background: #e9f0f8; }
.visual-progress span { display: block; width: 76%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--elios-blue), #42c99b); }
.visual-progress-label { color: #6b7a90; font-size: .75rem; margin-top: .55rem; }
.visual-item { display: flex; align-items: center; gap: .7rem; min-height: 78px; border: 1px solid #e7eef8; border-radius: .9rem; padding: .75rem; }
.visual-item-icon, .card-icon, .environment-icon, .demo-card-icon, .feature-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; }
.visual-item-icon { width: 34px; height: 34px; color: #fff; background: var(--elios-blue); font-weight: 900; }
.visual-item:nth-child(2) .visual-item-icon { background: #16a34a; }
.visual-item:nth-child(3) .visual-item-icon { background: #7c3aed; }
.visual-item:nth-child(4) .visual-item-icon { background: #f59e0b; }
.visual-item strong, .visual-item small { display: block; }
.visual-item strong { color: var(--elios-navy); font-size: .85rem; }
.visual-item small { color: #718096; font-size: .72rem; line-height: 1.25; }
.visual-footer { border-top: 1px solid #e7eef8; color: #52647d; font-size: .8rem; margin-top: 1rem; padding-top: 1rem; }
.visual-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: .4rem; border-radius: 50%; color: #fff; background: var(--elios-green); font-size: .75rem; font-weight: 900; }

.content-section { padding: .5rem 0; }
.section-heading h2, .journey-section h2, .data-section h2, .feature-panel h2, .demo-section h2, .final-cta h2 { color: var(--elios-navy); font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.08; margin: .65rem auto 0; max-width: 850px; }
.commercial-card { height: 100%; border: 1px solid var(--elios-border); border-radius: 1.25rem; background: #fff; box-shadow: 0 10px 30px rgba(15, 76, 145, .045); padding: 1.4rem; }
.commercial-card h3, .journey-step h3, .data-flow-item h3, .demo-card h3 { color: var(--elios-navy); font-size: 1.08rem; font-weight: 850; margin: .8rem 0 .45rem; }
.commercial-card p, .journey-step p, .data-flow-item p { color: #60708a; font-size: .92rem; line-height: 1.55; margin: 0; }
.card-icon { width: 45px; height: 45px; color: #fff; background: var(--elios-green); font-size: 1.35rem; font-weight: 900; }
.audience-card:nth-child(2) .card-icon { background: var(--elios-blue); }
.audience-card:nth-child(3) .card-icon { background: #7c3aed; }

.journey-section { border: 1px solid #d4e8de; background: linear-gradient(145deg, #f7fffa, #f4f9ff); }
.journey-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; position: relative; }
.journey-grid::before { position: absolute; top: 24px; right: 5%; left: 5%; height: 2px; background: #bfe5d0; content: ""; }
.journey-step { position: relative; z-index: 1; text-align: center; }
.journey-number { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0 auto 1rem; border: 5px solid #f7fffa; border-radius: 50%; color: #fff; background: var(--elios-green); font-size: .78rem; font-weight: 900; box-shadow: 0 0 0 1px #a7dcbc; }

.environment-card { padding: 1.25rem; }
.environment-icon { width: 42px; height: 42px; color: #fff; background: var(--elios-blue); font-weight: 900; }
.environment-card:nth-child(2) .environment-icon { background: var(--elios-green); }
.environment-card:nth-child(3) .environment-icon { background: #7c3aed; }
.environment-card:nth-child(4) .environment-icon { background: #f59e0b; }
.environment-card:nth-child(5) .environment-icon { background: #0e9f9c; }

.data-section { border: 1px solid #d8e6f5; background: #fff; }
.data-section h2 { margin-left: 0; }
.data-section > .row > div:first-child p { color: #60708a; line-height: 1.65; }
.data-flow { position: relative; }
.data-flow::before { position: absolute; top: 12px; bottom: 12px; left: 7px; width: 2px; background: #bcd6ff; content: ""; }
.data-flow-item { position: relative; display: flex; gap: 1rem; padding-bottom: 1.3rem; }
.data-flow-item:last-child { padding-bottom: 0; }
.data-flow-dot { position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 3px; border: 4px solid #fff; border-radius: 50%; background: var(--elios-blue); box-shadow: 0 0 0 1px #9ec4ff; }
.data-flow-item h3 { margin: 0 0 .25rem; }

.feature-panel { border: 1px solid var(--elios-border); background: #fff; }
.feature-ai { background: linear-gradient(145deg, #effcf6, #fff); border-color: #c8ecd7; }
.feature-security { background: linear-gradient(145deg, #f3f8ff, #fff); }
.feature-mark { width: 48px; height: 48px; margin-bottom: 1.3rem; color: #fff; background: var(--elios-green); font-size: 1.35rem; }
.feature-security .feature-mark { background: var(--elios-blue); }
.feature-panel h2 { margin-left: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.feature-panel p { color: #60708a; line-height: 1.65; margin-top: 1rem; }

.demo-section { border: 1px solid #d8e6f5; background: linear-gradient(135deg, #fff, #f2f8ff); }
.demo-section h2 { margin-left: 0; }
.demo-section p { color: #60708a; line-height: 1.6; }
.demo-card { height: 100%; border: 1px dashed #a9c4ee; border-radius: 1.1rem; background: rgba(255,255,255,.8); padding: 1.25rem; }
.demo-card-icon { width: 40px; height: 40px; color: #fff; background: #7c3aed; font-weight: 900; }
.demo-card:nth-child(2) .demo-card-icon { background: var(--elios-blue); }
.demo-card h3 { margin-top: 1rem; }

.final-cta { border: 1px solid #bde5cd; background: linear-gradient(135deg, #f1fff7, #f4f9ff); }
.final-cta h2 { max-width: 700px; }
.final-cta p { color: #61708a; }
.final-cta a:not(.btn) { color: var(--elios-blue); font-weight: 800; }

@media (max-width: 991.98px) {
  .journey-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .journey-grid::before { display: none; }
}

@media (max-width: 575.98px) {
  .commercial-hero h1 { font-size: 2.55rem; }
  .commercial-hero-claim { font-size: 1.55rem; }
  .journey-grid { grid-template-columns: 1fr; gap: 1rem; }
  .journey-step { display: grid; grid-template-columns: 50px 1fr; column-gap: 1rem; text-align: left; }
  .journey-number { grid-row: span 2; margin: 0; }
  .journey-step h3 { margin-top: .1rem; }
  .journey-step p { padding-bottom: .7rem; }
  .product-visual { border-radius: 1.1rem; }
}