/* OpSync phase 2: commercial and visual refinement */
.opsync-shell,
.studio-header,
.studio-footer { font-family: Tahoma, "Segoe UI", Arial, sans-serif; }

.ops-section-heading h2,
.ops-hero-copy h1,
.ops-messaging-grid h2,
.ops-cta h2,
.ops-page-hero h1,
.solutions-intro h1 { letter-spacing: 0; }

.ops-section-heading h2,
.ops-hero-copy h1,
.ops-page-hero h1,
.solutions-intro h1 { line-height: 1.25; }

.ops-wordmark strong,
.ops-stage-center strong { font-family: "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: -.02em; }

.ops-hero { padding: 128px 0 72px; }
.ops-hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(500px,.95fr); gap: 56px; }
.ops-hero-copy h1 { font-size: clamp(42px,4.5vw,62px); line-height: 1.2; }
.ops-wordmark { margin-block: 20px; }
.ops-hero-copy > p { margin-block: 18px 24px; }

.nav-panel .nav-product-link { color: var(--ops-700); }
.ops-pricing-link { padding: 10px 5px; color: rgba(223,255,246,.76); font-size: 14px; font-weight: 900; border-bottom: 1px solid rgba(116,244,208,.35); }
.ops-pricing-link:hover { color: #fff; border-color: var(--ops-300); }
.ops-endorsement { display: flex; align-items: center; gap: 11px; width: fit-content; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.ops-endorsement img { width: 38px; height: 38px; object-fit: contain; padding: 5px; border-radius: 11px; background: rgba(255,255,255,.95); }
.ops-endorsement span { display: grid; line-height: 1.3; }
.ops-endorsement small { color: rgba(255,255,255,.48); font-size: 10px; }
.ops-endorsement strong { font-size: 12px; }

.ops-story-intro { max-width: 720px; }
.ops-story-intro h2 { margin: 18px 0 13px; font-size: clamp(34px,4.8vw,58px); line-height: 1.3; letter-spacing: 0; }
.ops-story-intro p { margin: 0; color: var(--ops-muted); font-size: 17px; line-height: 1.9; }

/* Honest product stage: a conceptual operating rhythm, replaceable by an approved screenshot. */
.ops-product-stage {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--ops-radius-lg);
  background:
    radial-gradient(circle at 50% 48%, rgba(116,244,208,.18), transparent 15rem),
    linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 35px 90px rgba(0,0,0,.25);
}
.ops-product-stage::before { content: ""; position: absolute; inset: 0; 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: 42px 42px; mask-image: radial-gradient(circle,#000,transparent 72%); }
.ops-stage-rings { position: absolute; inset: 50% auto auto 50%; width: 390px; height: 390px; transform: translate(-50%,-55%); }
.ops-stage-rings span { position: absolute; inset: 0; border: 1px solid rgba(116,244,208,.14); border-radius: 50%; }
.ops-stage-rings span:nth-child(2) { inset: 50px; }
.ops-stage-rings span:nth-child(3) { inset: 100px; }
.ops-stage-center { position: absolute; z-index: 2; inset: 50% auto auto 50%; display: grid; place-items: center; transform: translate(-50%,-72%); }
.ops-stage-center img { width: 90px; height: 90px; border-radius: 25px; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.ops-stage-center strong { margin-top: 12px; font-size: 19px; }
.ops-stage-center small { color: rgba(255,255,255,.5); font-size: 10px; }
.ops-stage-flow { position: absolute; z-index: 3; inset: auto 22px 55px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 0; margin: 0; list-style: none; }
.ops-stage-flow li { position: relative; display: grid; gap: 4px; padding: 14px 12px; border-top: 1px solid rgba(116,244,208,.32); background: linear-gradient(180deg,rgba(255,255,255,.06),transparent); }
.ops-stage-flow li::after { content: ""; position: absolute; top: -4px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ops-300); }
.ops-stage-flow span { color: var(--ops-300); font-size: 9px; font-weight: 950; }
.ops-stage-flow strong { font-size: 11px; }
.ops-stage-flow small { color: rgba(255,255,255,.48); font-size: 8px; line-height: 1.6; }
.ops-stage-note { position: absolute; z-index: 3; top: 22px; right: 22px; padding: 7px 11px; border: 1px solid rgba(116,244,208,.18); border-radius: 999px; color: rgba(223,255,246,.68); background: rgba(5,45,41,.42); font-size: 9px; font-weight: 850; }
.ops-real-product-shot { position: absolute; inset: 24px; margin: 0; overflow: hidden; border-radius: 22px; background: #fff; }
.ops-real-product-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Homepage story */
.ops-day-story { display: grid; grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr); gap: 80px; align-items: start; padding-block: var(--ops-space-section); }
.ops-day-story > header { position: sticky; top: 125px; }
.ops-day-sequence { border-top: 1px solid var(--ops-line); }
.ops-day-sequence article { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 31px 4px; border-bottom: 1px solid var(--ops-line); }
.ops-day-sequence article > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(8,117,101,.18); border-radius: 50%; color: var(--ops-700); font-size: 10px; font-weight: 950; }
.ops-day-sequence h3 { margin: 0 0 8px; font-size: 22px; }
.ops-day-sequence p { margin: 0; color: var(--ops-muted); line-height: 1.8; }

.ops-product-pillars { padding-block: var(--ops-space-section); background: #f0f8f5; }
.ops-product-pillars .ops-story-intro { margin-bottom: 55px; }
.ops-pillar-list { border-top: 1px solid var(--ops-line); }
.ops-pillar-list article { display: grid; grid-template-columns: 54px 1fr 210px; gap: 35px; align-items: center; padding: 42px 0; border-bottom: 1px solid var(--ops-line); }
.ops-pillar-list article > span { color: var(--ops-500); font-size: 11px; font-weight: 950; }
.ops-pillar-list small { color: var(--ops-700); font-weight: 900; }
.ops-pillar-list h3 { max-width: 720px; margin: 7px 0 9px; font-size: clamp(25px,3vw,38px); line-height: 1.4; }
.ops-pillar-list p { max-width: 700px; margin: 0 0 12px; color: var(--ops-muted); }
.ops-pillar-list a { color: var(--ops-700); font-size: 13px; font-weight: 950; }
.ops-pillar-list article > i { justify-self: end; padding-inline-start: 28px; border-inline-start: 1px solid var(--ops-line); color: rgba(7,59,53,.24); font-size: 27px; font-style: normal; font-weight: 950; line-height: 1.4; }

.ops-solution-lines article { display: grid; grid-template-columns: 180px 1fr; align-items: center; box-shadow: none; }
.ops-solution-lines img { height: 100%; min-height: 160px; }
.ops-solution-lines article div { border-top: 0; border-inline-start: 3px solid var(--accent); }

/* How it works */
.ops-journey-overview { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 16px; margin-top: 52px; padding: 21px 28px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-md); background: #fff; box-shadow: 0 12px 42px rgba(5,45,41,.05); }
.ops-journey-overview span { color: var(--ops-800); font-size: 12px; font-weight: 900; white-space: nowrap; }
.ops-journey-overview i { height: 1px; background: linear-gradient(90deg,var(--ops-line),var(--ops-500),var(--ops-line)); }
.ops-journey-editorial .ops-journey-list { border-top: 1px solid var(--ops-line); }
.ops-journey-editorial .ops-journey-list article { grid-template-columns: 70px 1fr 250px; padding: 38px 0; border: 0; border-bottom: 1px solid var(--ops-line); border-radius: 0; background: transparent; }
.ops-journey-editorial .ops-journey-number { border-radius: 50%; background: var(--ops-900); }
.ops-journey-editorial .ops-journey-copy > small { color: var(--ops-600); font-size: 10px; font-weight: 900; }
.ops-journey-editorial .ops-outcome { align-self: center; background: transparent; border-inline-start: 1px solid var(--ops-line); border-radius: 0; }

/* Capabilities: challenge → product → impact */
.ops-capability-stories { padding-block: var(--ops-space-section); }
.ops-capability-stories > .ops-story-intro { margin-bottom: 55px; }
.ops-capability-stories > div { border-top: 1px solid var(--ops-line); }
.ops-capability-stories article { display: grid; grid-template-columns: 210px repeat(3,1fr); gap: 28px; padding: 38px 0; border-bottom: 1px solid var(--ops-line); scroll-margin-top: 110px; }
.ops-capability-stories article header { display: grid; align-content: start; gap: 8px; }
.ops-capability-stories article header span { color: var(--ops-500); font-size: 10px; font-weight: 950; }
.ops-capability-stories article h2 { margin: 0; font-size: 23px; }
.ops-capability-stories article section { padding-inline-start: 20px; border-inline-start: 1px solid var(--ops-line); }
.ops-capability-stories article small { color: var(--ops-600); font-size: 10px; font-weight: 950; }
.ops-capability-stories article p { margin: 7px 0 0; color: var(--ops-muted); font-size: 13px; line-height: 1.85; }
.ops-capability-stories article .impact p { color: var(--ops-900); font-weight: 850; }

/* Messaging */
.ops-message-narrative { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-block: var(--ops-space-section); }
.ops-message-narrative > header { position: sticky; top: 125px; align-self: start; }
.ops-message-narrative ol { padding: 0; margin: 0; border-top: 1px solid var(--ops-line); list-style: none; }
.ops-message-narrative li { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--ops-line); }
.ops-message-narrative li > span { color: var(--ops-500); font-size: 10px; font-weight: 950; }
.ops-message-narrative h3 { margin: 0 0 7px; font-size: 21px; }
.ops-message-narrative p { margin: 0; color: var(--ops-muted); }
.ops-message-service { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; margin-bottom: var(--ops-space-section); padding: 45px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: var(--ops-50); }
.ops-message-service h2 { margin: 16px 0 8px; font-size: clamp(28px,3.6vw,43px); line-height: 1.35; }
.ops-message-service p { max-width: 700px; margin: 0; color: var(--ops-muted); }

/* Solutions */
.solutions-catalog { padding-block: var(--ops-space-section); }
.solutions-catalog > header { margin-bottom: 60px; }
.solutions-catalog > div { border-top: 1px solid var(--ops-line); }
.solution-editorial-row { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: 48px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--ops-line); }
.solution-editorial-row:nth-child(even) .solution-editorial-image { order: 2; }
.solution-editorial-image { overflow: hidden; aspect-ratio: 16/9; border-radius: var(--ops-radius-md); background: var(--paper-2); }
.solution-editorial-image img { width: 100%; height: 100%; object-fit: cover; }
.solution-editorial-row > div:last-child > span { color: var(--ops-600); font-size: 11px; font-weight: 950; }
.solution-editorial-row h2 { margin: 7px 0 10px; font-size: clamp(29px,3.6vw,44px); }
.solution-editorial-row p { margin: 0 0 14px; color: var(--ops-muted); }
.solution-editorial-row .tag-cloud { margin-bottom: 18px; }
.solutions-rasd { display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: center; margin-bottom: var(--ops-space-section); padding: 42px; border-radius: var(--ops-radius-lg); color: #fff; background: linear-gradient(135deg,var(--ops-950),var(--ops-800)); }
.solutions-rasd h2 { margin: 15px 0 4px; font-size: 46px; }
.solutions-rasd p { max-width: 700px; margin: 0; color: rgba(255,255,255,.65); }
.solutions-capabilities { padding-bottom: var(--ops-space-section); }
.solutions-capabilities > header { margin-bottom: 44px; }
.solutions-capabilities > div { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ops-line); }
.solutions-capabilities article { padding: 28px 22px; border-inline-start: 1px solid var(--ops-line); }
.solutions-capabilities article:first-child { border-inline-start: 0; }
.solutions-capabilities i { color: var(--ops-500); font-size: 24px; font-style: normal; }
.solutions-capabilities h3 { margin: 17px 0 7px; }
.solutions-capabilities p { margin: 0; color: var(--ops-muted); font-size: 13px; }

.not-found-mark { width: 68px; height: 68px; margin-bottom: 18px; }
.not-found-shell .ops-actions { justify-content: center; }
.solutions-page .btn-primary { --btn-bg: linear-gradient(135deg,#087565,#17b890); --btn-fg: #fff; --btn-border: rgba(255,255,255,.1); }
.solutions-page .solutions-intro { background: radial-gradient(circle at 15% 10%,rgba(116,244,208,.15),transparent 25rem),linear-gradient(140deg,var(--ops-950),var(--ops-800)); }

@media (max-width: 1140px) {
  .ops-capability-stories article { grid-template-columns: 180px repeat(3,1fr); gap: 18px; }
}

@media (max-width: 880px) {
  .ops-hero-grid { grid-template-columns: 1fr; gap: 45px; }
  .ops-hero-copy { max-width: 700px; }
  .ops-product-stage { width: min(650px,100%); margin-inline: auto; }
  .ops-day-story,
  .ops-message-narrative { grid-template-columns: 1fr; gap: 45px; }
  .ops-day-story > header,
  .ops-message-narrative > header { position: static; }
  .ops-pillar-list article { grid-template-columns: 48px 1fr; }
  .ops-pillar-list article > i { display: none; }
  .ops-capability-stories article { grid-template-columns: 1fr 1fr; }
  .ops-capability-stories article header { grid-column: 1/-1; }
  .ops-message-service,
  .solutions-rasd { grid-template-columns: 1fr; }
  .solutions-capabilities > div { grid-template-columns: repeat(2,1fr); }
  .solution-editorial-row { gap: 28px; }
}

@media (max-width: 640px) {
  .ops-pricing-link { width: 100%; text-align: center; border: 0; }
  .ops-endorsement { margin-inline: auto; }
  .ops-product-stage { min-height: 460px; margin-top: 18px; }
  .ops-stage-rings { width: 300px; height: 300px; }
  .ops-stage-center { transform: translate(-50%,-88%); }
  .ops-stage-center img { width: 72px; height: 72px; }
  .ops-stage-flow { grid-template-columns: repeat(2,1fr); inset-inline: 12px; bottom: 18px; }
  .ops-stage-flow li { padding: 10px 8px; }
  .ops-stage-note { top: 14px; right: 14px; }
  .ops-day-story { padding-block: 74px; }
  .ops-story-intro h2 { font-size: 34px; }
  .ops-day-sequence article { grid-template-columns: 44px 1fr; gap: 14px; padding: 24px 0; }
  .ops-day-sequence article > span { width: 36px; height: 36px; }
  .ops-product-pillars { padding-block: 74px; }
  .ops-pillar-list article { grid-template-columns: 38px 1fr; gap: 10px; padding: 30px 0; }
  .ops-pillar-list h3 { font-size: 24px; }
  .ops-solution-lines article { grid-template-columns: 1fr; }
  .ops-solution-lines img { min-height: 170px; }
  .ops-solution-lines article div { border-inline-start: 0; border-top: 3px solid var(--accent); }
  .ops-journey-overview { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .ops-journey-overview i { width: 1px; height: 14px; margin-inline-start: 7px; }
  .ops-journey-editorial .ops-journey-list article { grid-template-columns: 42px 1fr; padding: 28px 0; }
  .ops-journey-editorial .ops-outcome { grid-column: 2; border-inline-start: 0; border-top: 1px solid var(--ops-line); padding-top: 14px; }
  .ops-capability-stories { padding-block: 74px; }
  .ops-capability-stories article { grid-template-columns: 1fr; gap: 16px; padding: 30px 0; }
  .ops-capability-stories article header { grid-column: auto; }
  .ops-capability-stories article section { padding: 0; border: 0; }
  .ops-capability-stories article section + section { padding-top: 15px; border-top: 1px solid var(--ops-line); }
  .ops-message-narrative { padding-block: 74px; }
  .ops-message-service { padding: 28px 22px; }
  .ops-message-service .ops-actions,
  .ops-message-service .btn { width: 100%; }
  .solution-editorial-row { grid-template-columns: 1fr; padding: 30px 0; }
  .solution-editorial-row:nth-child(even) .solution-editorial-image { order: 0; }
  .solutions-rasd { padding: 28px 22px; }
  .solutions-rasd .btn { width: 100%; }
  .solutions-capabilities > div { grid-template-columns: 1fr; }
  .solutions-capabilities article { border-inline-start: 0; border-bottom: 1px solid var(--ops-line); }
}

@media (prefers-reduced-motion: reduce) {
  .ops-product-stage *,
  .ops-product-stage *::before,
  .ops-product-stage *::after { animation: none !important; transition: none !important; }
}