/* Binding visual system from design-spec/opsrivo-website. */
:root {
  --ops-bg-950: #020812;
  --ops-bg-925: #030b17;
  --ops-bg-900: #05101f;
  --ops-surface: rgba(7, 22, 39, .82);
  --ops-surface-solid: #071627;
  --ops-cyan: #22e4ee;
  --ops-cyan-strong: #00cbd8;
  --ops-text: #edf6ff;
  --ops-muted: #9aa9b8;
  --ops-border: rgba(133, 176, 201, .16);
  --ops-border-strong: rgba(34, 228, 238, .34);
  --ops-shadow: 0 18px 60px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.025);
  --ops-container: 1320px;
  --ops-header-height: 76px;
}

html { background: var(--ops-bg-950); }
body {
  overflow-x: clip;
  background:
    radial-gradient(circle at 68% 12%, rgba(0, 203, 216, .075), transparent 31%),
    radial-gradient(circle at 15% 60%, rgba(0, 144, 166, .04), transparent 27%),
    linear-gradient(180deg, var(--ops-bg-925), var(--ops-bg-950) 58%);
  color: var(--ops-text);
  line-height: 1.6;
}

[data-theme="light"] body { background: #f8fafc; color: #0a0f1a; }
[data-theme="light"] .site-header { border-bottom-color: rgba(16,26,43,.12); background: rgba(248,250,252,.9); }
[data-theme="light"] .site-nav a { color: #0a0f1a; }
[data-theme="light"] .site-nav a:hover, [data-theme="light"] .site-nav a[aria-current="page"] { color: #007e8c; }
[data-theme="light"] .trust-strip { border-color: rgba(16,26,43,.12); background: #eef5f7; }
[data-theme="light"] .trust-strip p { color: #536170; }
[data-theme="light"] .trust-strip strong { color: #0a0f1a; }
[data-theme="light"] .solution-card, [data-theme="light"] .proof-method, [data-theme="light"] .demo-panel, [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .metric, [data-theme="light"] .demo-shell { border-color: rgba(16,26,43,.14); background: #ffffff; box-shadow: 0 12px 36px rgba(15,23,42,.08); }
[data-theme="light"] .solution-card h2, [data-theme="light"] .solution-card h3, [data-theme="light"] .proof-method h3, [data-theme="light"] .demo-panel h3, [data-theme="light"] .proof-method strong { color: #0a0f1a; }
[data-theme="light"] .solution-card p, [data-theme="light"] .proof-method p, [data-theme="light"] .demo-panel p, [data-theme="light"] .proof-metric span { color: #536170; }
[data-theme="light"] .proof-metrics { border-color: rgba(16,26,43,.14); background: #ffffff; }
[data-theme="light"] .proof-metric + .proof-metric { border-color: rgba(16,26,43,.14); }

.site-header {
  position: sticky;
  height: var(--ops-header-height);
  border-bottom: 1px solid rgba(133,176,201,.15);
  background: rgba(2, 8, 18, .82);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.site-header.is-scrolled { background: rgba(2, 8, 18, .94); box-shadow: 0 10px 36px rgba(0,0,0,.2); }
.site-header__inner, .section, .site-footer__inner { width: min(var(--ops-container), calc(100% - 80px)); }
.site-header__inner { min-height: var(--ops-header-height); gap: 24px; }
.brand-logo { width: 156px; height: auto; }
[data-theme="dark"] .brand-logo { content: url("/assets/brand/opsrivo_primary_horizontal_transparent.png"); }
[data-theme="light"] .brand-logo { content: url("/assets/brand/opsrivo_monochrome_horizontal_transparent.png"); }
.site-nav { gap: 12px; margin-left: auto; }
.site-nav a {
  position: relative;
  min-height: 44px;
  padding: 10px 8px;
  color: #edf6ff;
  font-size: 14px;
  font-weight: 600;
}
.site-nav a::after { position: absolute; right: 8px; bottom: 3px; left: 8px; height: 1px; background: var(--ops-cyan); content: ""; opacity: 0; transform: scaleX(.2); transition: transform 180ms ease, opacity 180ms ease; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: transparent; color: var(--ops-cyan); }
.shell-actions { gap: 10px; }
.region-switch, .theme-switch { min-height: 34px; padding: 2px; border-color: rgba(133,176,201,.22); background: rgba(7,22,39,.8); }
.region-switch button, .theme-switch button { min-width: 32px; min-height: 30px; padding: 0 6px; font-size: 11px; }
.cta-button, .button.primary { min-height: 44px; border-radius: 7px; background: linear-gradient(135deg, #00aaba, #00cbd8); box-shadow: 0 12px 30px rgba(0,203,216,.14); color: #001018; font-weight: 750; }
.button.secondary { border-color: var(--ops-border-strong); background: rgba(3,11,23,.48); color: var(--ops-text); }
.cta-button:hover, .button:hover { transform: translateY(-2px); }
.menu-button { border-radius: 7px; }

.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 690px;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: 32px;
  padding-block: 76px 44px;
}
.home-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(rgba(34,228,238,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,228,238,.035) 1px, transparent 1px),
    radial-gradient(circle at 72% 42%, rgba(0,203,216,.14), transparent 28%);
  background-size: 72px 72px, 72px 72px, auto;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-copy { align-self: center; padding-block: 22px; }
.home-hero h1 { max-width: 11.5ch; margin-bottom: 22px; font-size: clamp(54px, 5vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.home-hero h1 .accent, .accent { color: var(--ops-cyan); }
.home-hero .lead { max-width: 53ch; font-size: 18px; line-height: 1.65; }
.value-markers { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; color: #c7d6e2; font-size: 13px; }
.value-markers span { display: inline-flex; align-items: center; gap: 8px; }
.value-markers svg { width: 18px; height: 18px; color: var(--ops-cyan); }

.hero-visual { position: relative; display: grid; min-height: 520px; place-items: center; overflow: hidden; }
.hero-visual::before { position: absolute; inset: 6% 2% 3%; border: 1px solid rgba(34,228,238,.16); border-radius: 50%; box-shadow: 0 0 120px rgba(0,203,216,.1); content: ""; transform: perspective(700px) rotateX(59deg); }
.hero-visual::after { position: absolute; bottom: 20px; width: min(88%, 530px); height: 122px; border: 1px solid rgba(34,228,238,.36); border-radius: 50%; box-shadow: 0 0 42px rgba(0,203,216,.3), inset 0 0 32px rgba(0,203,216,.12); content: ""; }
.hero-symbol { position: relative; z-index: 2; width: min(94%, 560px); height: auto; aspect-ratio: auto; filter: drop-shadow(0 18px 28px rgba(0, 203, 216, .18)); }
.home-hero .hero-visual::before,
.home-hero .hero-visual::after,
.home-hero .hero-visual .orbit,
.home-hero .hero-visual .circuit-line { display: none; }
.home-hero .hero-symbol { filter: none; }
.orbit { position: absolute; z-index: 1; width: 76%; aspect-ratio: 1; border: 1px solid rgba(34,228,238,.22); border-radius: 50%; transform: rotateX(67deg) rotateZ(-20deg); }
.orbit--two { width: 90%; border-color: rgba(34,228,238,.11); transform: rotateX(69deg) rotateZ(24deg); }
.circuit-line { position: absolute; z-index: 0; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, var(--ops-cyan), transparent); opacity: .5; }
.circuit-line--one { top: 18%; right: 0; transform: rotate(-22deg); }
.circuit-line--two { bottom: 25%; left: 0; transform: rotate(20deg); }

.trust-strip { border-block: 1px solid rgba(133,176,201,.15); background: rgba(3,11,23,.58); padding-block: 20px; text-align: center; }
.trust-strip p { margin: 0; max-width: none; color: var(--ops-muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.trust-strip strong { color: #dcebf7; font-weight: 650; }

.design-section { position: relative; padding-block: clamp(88px, 9vw, 128px); }
.section-intro { margin-bottom: 40px; }
.section-intro.centered { max-width: 720px; margin-inline: auto; text-align: center; }
.section-intro h2 { max-width: 16ch; margin-bottom: 12px; font-size: clamp(38px, 4vw, 48px); line-height: 1.08; }
.centered h2 { margin-inline: auto; }
.section-intro p { color: var(--ops-muted); }
.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.solution-card { min-height: 276px; border: 1px solid var(--ops-border); border-radius: 12px; background: linear-gradient(180deg, rgba(10,27,45,.78), rgba(5,16,31,.76)); box-shadow: var(--ops-shadow); padding: 26px 22px; }
.solution-card:hover { border-color: var(--ops-border-strong); transform: translateY(-3px); }
.solution-icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 24px; border: 1px solid rgba(34,228,238,.25); border-radius: 50%; color: var(--ops-cyan); box-shadow: 0 0 22px rgba(34,228,238,.13); }
.solution-icon svg { width: 30px; height: 30px; }
.solution-card h3 { font-size: 19px; }
.solution-card p { color: var(--ops-muted); font-size: 14px; }
.solution-card a { color: var(--ops-cyan); font-size: 13px; font-weight: 750; text-decoration: none; }

.proof-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--ops-border); border-radius: 12px; background: rgba(7,22,39,.56); }
.proof-metric { padding: 24px; text-align: center; }
.proof-metric + .proof-metric { border-left: 1px solid var(--ops-border); }
.proof-metric strong { display: block; color: var(--ops-cyan); font-size: clamp(28px,3vw,38px); font-variant-numeric: tabular-nums; }
.proof-metric span { color: var(--ops-muted); font-size: 13px; }
.proof-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.72fr); gap: 28px; align-items: stretch; margin-top: 36px; }
.proof-method, .demo-panel { border: 1px solid var(--ops-border); border-radius: 12px; background: rgba(7,22,39,.7); box-shadow: var(--ops-shadow); padding: 28px; }
.proof-method h3, .demo-panel h3 { margin-bottom: 10px; font-size: 22px; }
.proof-method p, .demo-panel p { color: var(--ops-muted); }
.demo-panel { display: grid; place-items: center; text-align: center; border-color: rgba(34,228,238,.55); box-shadow: 0 0 28px rgba(34,228,238,.16), var(--ops-shadow); }
.demo-panel .play-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: rgba(0,203,216,.15); color: var(--ops-cyan); box-shadow: 0 0 28px rgba(0,203,216,.35); }

.final-cta { overflow: hidden; border-block: 1px solid rgba(34,228,238,.2); background: linear-gradient(90deg, rgba(0,203,216,.06), transparent 25% 75%, rgba(0,203,216,.06)); text-align: center; }
.final-cta .section { padding-block: 68px; }
.final-cta h2 { max-width: none; margin-bottom: 10px; font-size: clamp(34px,4vw,46px); }
.final-cta p { margin-inline: auto; color: var(--ops-muted); }

.site-footer { border-top: 1px solid rgba(133,176,201,.16); background: #030b17; }
.site-footer__inner { display: grid; grid-template-columns: minmax(260px,1.4fr) repeat(4,minmax(110px,.65fr)); gap: 32px; padding-block: 48px; }
.site-footer .legal-block { color: var(--ops-muted); font-size: 13px; }
.footer-links { display: grid; gap: 4px; align-content: start; }
.footer-heading { margin: 0 0 8px; color: #edf6ff; font-size: 13px; font-weight: 750; }
.footer-links a { min-height: 26px; padding: 2px 0; color: var(--ops-muted); font-size: 13px; }

.page-hero, .text-page { width: min(var(--ops-container), calc(100% - 80px)); margin-inline: auto; }
.text-page { padding-block: 96px; }
.text-page h1, .page-hero h1 { max-width: 15ch; font-size: clamp(44px,5vw,68px); }
.text-page h2 { margin-top: 48px; }
.text-page p, .text-page li { color: var(--ops-muted); }
.card, .panel, .metric, .demo-shell { border-color: var(--ops-border); border-radius: 12px; background: linear-gradient(180deg, rgba(10,27,45,.78), rgba(5,16,31,.76)); box-shadow: var(--ops-shadow); }
.card, .panel, .metric, .demo-shell, .solution-card, .proof-method { overflow-wrap: anywhere; }
.card--featured { border-color: rgba(34,228,238,.7); box-shadow: 0 0 28px rgba(34,228,238,.18), var(--ops-shadow); }
.price--premium { border-left-color: #f5b21a; }
.panel--risk-reversal { border-color: rgba(245,178,26,.65); box-shadow: inset 3px 0 #f5b21a, var(--ops-shadow); }

.about-layout { display: grid; grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr); gap: 56px; align-items: center; }
.about-points { display: grid; gap: 14px; padding: 0; list-style: none; }
.about-points li { display: flex; gap: 10px; align-items: center; color: #dcebf7; }
.about-points svg { width: 18px; color: var(--ops-cyan); }
.mission-panel { width: min(88%, 360px); margin: -75px 20px 0 auto; border: 1px solid rgba(34,228,238,.45); border-radius: 12px; background: rgba(3,11,23,.9); box-shadow: var(--ops-shadow); padding: 20px; }
.mission-panel h2 { margin: 0 0 8px; font-size: 18px; }
.mission-panel p { margin: 0; color: var(--ops-muted); font-size: 14px; }

.process-timeline { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding-top: 26px; }
.process-timeline::before { position: absolute; top: 47px; right: 12.5%; left: 12.5%; height: 1px; background: linear-gradient(90deg, rgba(34,228,238,.5), rgba(34,228,238,.16)); content: ""; }
.process-step { position: relative; z-index: 1; text-align: center; }
.step-number { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 20px; border: 1px solid var(--ops-cyan); border-radius: 50%; background: var(--ops-bg-925); color: var(--ops-cyan); font-size: 13px; box-shadow: 0 0 22px rgba(34,228,238,.14); }
.step-icon { display: grid; width: 66px; height: 66px; place-items: center; margin: 0 auto 16px; border: 1px solid rgba(34,228,238,.22); border-radius: 50%; color: var(--ops-cyan); }
.step-icon svg { width: 32px; height: 32px; }
.process-step h3 { margin-bottom: 8px; }
.process-step p { color: var(--ops-muted); font-size: 14px; }

.mobile-panel { background: #030b17; }
@media (prefers-reduced-motion: no-preference) {
  .hero-symbol { animation: ops-float 6s ease-in-out infinite alternate; }
  .hero-visual::after { animation: ops-pulse 5s ease-in-out infinite alternate; }
  .solution-card, .cta-button, .button { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
}
@keyframes ops-float { to { transform: translateY(-8px); } }
@keyframes ops-pulse { to { box-shadow: 0 0 58px rgba(0,203,216,.48), inset 0 0 32px rgba(0,203,216,.18); } }

@media (max-width: 1100px) {
  .home-hero, .about-layout { grid-template-columns: 1fr; }
  .hero-visual { min-height: 400px; }
  .solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .site-header__inner, .section, .site-footer__inner, .text-page, .page-hero { width: min(var(--ops-container), calc(100% - 44px)); }
  .site-nav, .shell-actions > .cta-button { display: none; }
  .shell-actions { margin-left: auto; }
  .menu-button { display: grid; }
  .mobile-panel.is-open { padding: 18px 22px 28px; }
  .mobile-panel nav { display: grid; gap: 8px; }
  .mobile-panel nav a { width: 100%; }
  .home-hero { min-height: auto; padding-top: 58px; }
  .home-hero h1 { font-size: clamp(44px,11vw,60px); }
  .proof-story { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .site-header__inner, .section, .site-footer__inner, .text-page, .page-hero { width: min(var(--ops-container), calc(100% - 36px)); }
  .brand-logo { width: 126px; }
  .region-switch, .theme-switch { display: none; }
  .home-hero { padding-block: 42px 30px; }
  .home-hero h1 { max-width: 10.5ch; font-size: 46px; }
  .home-hero .lead { font-size: 17px; }
  .hero-visual { min-height: 300px; }
  .value-markers { gap: 12px; font-size: 12px; }
  .solution-grid, .proof-metrics, .process-timeline { grid-template-columns: 1fr; }
  .proof-metric + .proof-metric { border-top: 1px solid var(--ops-border); border-left: 0; }
  .process-timeline::before { top: 12%; bottom: 12%; left: 26px; width: 1px; height: auto; }
  .process-step { display: grid; grid-template-columns: 52px 66px 1fr; gap: 14px; align-items: center; text-align: left; }
  .step-number, .step-icon { margin: 0; }
  .process-step h3, .process-step p { grid-column: 3; }
  .process-step h3 { margin: 0; }
  .process-step p { margin-top: -8px; }
  .site-footer__inner { grid-template-columns: 1fr; }
}