/* ═══════════════════════════════════════════
   OmniPATH WordPress Theme — Design System
   Clean build — no overrides, no !important
   ═══════════════════════════════════════════ */

/* ═══ 1. Design Tokens ═══ */
:root {
  /* Backgrounds */
  --op-bg: #060c16;
  --op-bg-card: rgba(255, 255, 255, 0.03);
  --op-bg-card-hover: rgba(255, 255, 255, 0.05);
  --op-bg-input: #0A1926;
  --op-bg-glass: rgba(8, 14, 28, 0.85);

  /* Accents */
  --op-cyan: #00FFCE;
  --op-blue: #1EDCFF;
  --op-cyan-glow: rgba(0, 255, 206, 0.3);
  --op-cyan-subtle: rgba(0, 255, 206, 0.08);

  /* Status */
  --op-success: #4ADE80;
  --op-warning: #FB923C;
  --op-error: #F87171;
  --op-red: #ef4444;
  --op-info: #60A5FA;
  --op-purple: #A78BFA;

  /* Text */
  --op-text: #FFFFFF;
  --op-text-sec: #F1F5F9;
  --op-text-muted: #E2E8F0;

  /* Borders */
  --op-border: rgba(255, 255, 255, 0.06);
  --op-border-hover: rgba(0, 255, 206, 0.15);
  --op-border-active: rgba(0, 255, 206, 0.3);
  --op-border-input: #1C293B;

  /* Fonts */
  --op-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --op-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Radii */
  --op-r-sm: 6px;
  --op-r-md: 10px;
  --op-r-lg: 16px;
  --op-r-xl: 20px;
  --op-r-pill: 100px;

  /* Layout */
  --op-mw: 1200px;
  --op-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ 2. Base Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--op-font);
  font-size: 17px;
  font-weight: 400;
  color: var(--op-text);
  background: var(--op-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; color: #fff; line-height: 1.1; }
p { color: #F1F5F9; }
a { color: #fff; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--op-cyan); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgba(0, 255, 206, 0.25); color: #fff; }
*:focus-visible { outline: 2px solid var(--op-cyan); outline-offset: 2px; }

/* ═══ 3. Layout ═══ */
.op-container { max-width: var(--op-mw); margin: 0 auto; padding: 0 24px; }
.op-section { padding: 48px 0; }

/* ═══ 4. Animated Background Mesh ═══ */
#op-bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
@media (max-width: 991px) {
  #op-bg-mesh { display: none; }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background:
      radial-gradient(ellipse 80% 60% at 20% 20%, rgba(0,230,255,0.35) 0%, transparent 65%),
      radial-gradient(ellipse 60% 50% at 75% 15%, rgba(255,50,220,0.25) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 60% 70%, rgba(0,255,206,0.20) 0%, transparent 55%),
      radial-gradient(ellipse 40% 45% at 30% 55%, rgba(120,50,255,0.18) 0%, transparent 55%);
  }
}

.page-wrapper { position: relative; z-index: 1; }

/* OP Icon watermark */
.body-icon {
  position: fixed;
  top: -15%;
  right: -8%;
  width: 720px;
  height: 810px;
  z-index: 0;
  opacity: 0.8;
  background-image: url('https://cdn.prod.website-files.com/667a81acb84289586f5aedf6/687f89251e7cda947d6559d0_OP%20Icon-trans.svg');
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: brightness(1.3) saturate(0.3);
  animation: op-icon-breathe 8s ease-in-out infinite alternate;
}
@media (max-width: 991px) {
  .body-icon { width: 576px; height: 648px; top: -12%; right: -26%; }
}

/* ═══ Hero Orbit Rings ═══ */
.op-orbit {
  position: absolute;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(0, 255, 206, 0.06);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: op-spin 30s linear infinite;
  pointer-events: none;
}

.op-orbit::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--op-cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--op-cyan);
}

.op-orbit-2 {
  width: 600px;
  height: 600px;
  border-color: rgba(30, 220, 255, 0.04);
  animation-duration: 40s;
  animation-direction: reverse;
}

.op-orbit-2::before {
  background: var(--op-blue);
  box-shadow: 0 0 12px var(--op-blue);
}

@keyframes op-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 991px) {
  .op-orbit, .op-orbit-2 { display: none; }
}

/* ═══ 5. Navigation ═══ */
.op-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
  transition: background .3s ease;
}
.op-header.is-scrolled {
  background: rgba(6, 12, 22, 0.95);
}

.op-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.op-header.is-scrolled .op-nav {
  background: rgba(6, 12, 22, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.op-nav__inner {
  display: flex;
  align-items: center;
  max-width: var(--op-mw);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  gap: 16px;
}

.op-nav__menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  list-style: none;
}

.op-nav__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.op-nav__logo img { height: auto; width: 180px; }

.op-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
}

.op-nav__link:hover { color: var(--op-cyan); }

/* Mega menu — JS controlled, not CSS hover */

.op-nav__arrow {
  transition: transform 0.3s ease;
  opacity: 0.5;
}

.op-nav__dropdown.is-open .op-nav__arrow {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--op-cyan);
}

[aria-expanded="true"] .op-nav__arrow {
  transform: rotate(180deg);
}

/* Nav buttons */
.op-nav__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  transition: all 0.3s ease;
}

.op-nav__btn--primary {
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  color: #060c16;
  box-shadow: 0 2px 20px rgba(0,255,206,.15), 0 0 40px rgba(14,165,233,.08);
}

.op-nav__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(14,165,233,.1), 0 0 60px rgba(0,255,206,.06);
  color: #060c16;
}

.op-nav__btn--ghost {
  border: 1px solid rgba(148,163,184,.2);
  color: var(--op-text-sec);
}

.op-nav__btn--ghost:hover {
  border-color: var(--op-cyan);
  color: var(--op-cyan);
  background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(0,255,206,.06));
}

/* nav actions defined above */

/* ═══ 6. Mega Menu ═══ */
.op-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-top: 0;
  display: none;
}

.op-mega.is-open { display: block; }

.op-mega__inner {
  background: var(--op-bg-glass);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--op-border);
  border-radius: var(--op-r-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 32px;
}

.op-mega__top-bar {
  height: 1px;
  background: linear-gradient(90deg, rgba(0,255,206,0.5), rgba(30,220,255,0.3), rgba(0,255,206,0.5));
  margin-bottom: 20px;
}

.op-mega__bottom-bar {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  margin-top: 24px;
}

.op-mega__intro { margin-bottom: 20px; }
.op-mega__intro-title { font-size: 18px; font-weight: 600; color: var(--op-cyan); margin-bottom: 6px; letter-spacing: -0.2px; }
.op-mega__intro-desc { font-size: 14px; color: rgba(255, 255, 255, 0.55); }

.op-mega__columns { display: flex; gap: 32px; }

.op-mega__col {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  padding-right: 24px;
}

.op-mega__col:last-child { border-right: none; padding-right: 0; }

.op-mega__col-title {
  font-size: 14px;
  font-weight: 500;
  color: orange;
  margin-bottom: 10px;
  padding-left: 12px;
}

.op-mega__links { list-style: none; }

.op-mega__link {
  display: block;
  padding: 6px 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.op-mega__link:hover {
  color: #fff;
  background: rgba(0, 255, 206, 0.06);
  transform: translateX(2px);
}

/* ═══ 7. Buttons ═══ */
.op-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 1.75rem;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  color: #060c16;
  font-family: var(--op-font);
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 20px rgba(0,255,206,.15), 0 0 40px rgba(14,165,233,.08);
}

.op-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(14,165,233,.1), 0 0 60px rgba(0,255,206,.06), 0 0 90px rgba(14,165,233,.04);
  color: #060c16;
}

.op-btn-primary svg { width: 16px; height: 16px; transition: transform .2s; }
.op-btn-primary:hover svg { transform: translateX(3px); }

.op-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 1.5rem;
  background: transparent;
  color: var(--op-text-sec);
  font-family: var(--op-font);
  font-size: 1rem;
  font-weight: 400;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}

.op-btn-secondary:hover {
  border-color: var(--op-cyan);
  color: var(--op-cyan);
  background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(0,255,206,.06));
}

.op-btn-secondary svg { width: 16px; height: 16px; }

/* ═══ 8. Section Headers ═══ */
.op-section-header { text-align: center; margin-bottom: 48px; }

.op-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--op-cyan);
  margin-bottom: 18px;
}

.op-section-label::before,
.op-section-label::after {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(0, 255, 206, 0.3);
}

.op-section-title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.08;
  margin-bottom: 16px;
}

.op-section-title span { color: var(--op-cyan); }

.op-section-sub {
  font-size: 15px;
  color: var(--op-text-sec);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

/* ═══ 9. Glass Cards ═══ */
.op-card {
  background: var(--op-bg-card);
  border: 1px solid var(--op-border);
  border-radius: var(--op-r-lg);
  padding: 32px;
  transition: all 0.35s ease;
}

.op-card:hover {
  background: var(--op-bg-card-hover);
  border-color: var(--op-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 255, 206, 0.06);
}

/* ═══ 10. Forms ═══ */
.op-form {
  max-width: 480px;
  margin: 0 auto;
  background: var(--op-bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.op-form__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--op-text-sec);
  margin-bottom: 6px;
}

.op-form__input,
.op-form__select,
.op-form__textarea {
  width: 100%;
  background: var(--op-bg-input);
  border: 1px solid var(--op-border-input);
  border-radius: var(--op-r-md);
  padding: 12px 14px;
  font-family: var(--op-font);
  font-size: 15px;
  color: var(--op-text);
  transition: all 0.2s ease;
  outline: none;
  appearance: none;
}

.op-form__input:focus,
.op-form__select:focus,
.op-form__textarea:focus {
  border-color: rgba(0, 255, 206, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 255, 206, 0.08);
}

.op-form__input::placeholder { color: var(--op-text-muted); }
.op-form__textarea { min-height: 120px; resize: vertical; }

.op-form__submit {
  width: 100%;
  margin-top: 12px;
}

/* ═══ 11. FAQ Accordion ═══ */
.op-faq { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

.op-faq details {
  background: var(--op-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--op-border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.op-faq details:hover { border-color: rgba(0, 255, 206, 0.12); }

.op-faq details[open] {
  background: rgba(0, 255, 206, 0.03);
  border-color: var(--op-border-hover);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.op-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  user-select: none;
}

.op-faq summary::-webkit-details-marker { display: none; }

.op-faq summary::after {
  content: '+';
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(0, 255, 206, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 16px;
  transition: all 0.3s ease;
}

.op-faq details[open] summary::after {
  content: '−';
  background: rgba(0, 255, 206, 0.08);
  border-color: rgba(0, 255, 206, 0.2);
  color: var(--op-cyan);
}

.op-faq details[open] summary { color: #fff; }

.op-faq__answer {
  padding: 0 24px 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  animation: op-faq-open 0.3s ease;
}

/* ═══ 12. Global CTA ═══ */
.op-cta { padding: 80px 24px 120px; }
.op-cta__card {
  max-width: 960px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: var(--op-r-xl);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.op-cta__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--op-blue), var(--op-cyan));
}
.op-cta__eyebrow {
  font-family: var(--op-mono);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--op-text-muted);
  margin-bottom: 16px;
}
.op-cta__title {
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  font-weight: 500;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.op-cta__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.op-cta__desc {
  font-size: .95rem;
  color: var(--op-text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}
.op-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.op-cta__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  color: #060c16;
  font-family: var(--op-font);
  font-size: 1rem;
  font-weight: 500;
  padding: .95rem 1.75rem;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 20px rgba(0,255,206,.15), 0 0 40px rgba(14,165,233,.08);
}
.op-cta__btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(14,165,233,.1), 0 0 60px rgba(0,255,206,.06);
}
.op-cta__btn-primary svg { width: 16px; height: 16px; transition: transform .2s; }
.op-cta__btn-primary:hover svg { transform: translateX(3px); }
.op-cta__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--op-text-sec);
  font-family: var(--op-font);
  font-size: 1rem;
  font-weight: 400;
  padding: .95rem 1.5rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(148,163,184,.2);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.op-cta__btn-ghost:hover {
  border-color: var(--op-cyan);
  color: var(--op-cyan);
  background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(0,255,206,.06));
}

/* ═══ 12b. Global Resolution / Before-After / Outcomes ═══ */
.op-resolution-section { padding: 80px 24px; }
.op-resolution-statement {
  background: rgba(26,35,50,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148,163,184,.06);
  border-top: 2px solid;
  border-image: linear-gradient(90deg, var(--op-blue), var(--op-cyan)) 1;
  border-radius: 0 0 var(--op-r-lg) var(--op-r-lg);
  padding: 40px;
  text-align: center;
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.op-resolution-label {
  font-family: var(--op-mono);
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--op-text-muted);
  margin-bottom: 16px;
}
.op-resolution-text {
  font-size: 1.1rem;
  color: var(--op-text-sec);
  line-height: 1.7;
}
.op-resolution-text em {
  font-style: normal;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.op-ba-grid {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
}
.op-ba-col-header {
  font-family: var(--op-mono);
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.op-ba-col-header--before { color: var(--op-red); border-bottom: 2px solid rgba(239,68,68,.3); }
.op-ba-col-header--after { color: var(--op-cyan); border-bottom: 2px solid rgba(0,255,206,.3); }
.op-ba-divider {
  background: linear-gradient(180deg, var(--op-blue), var(--op-cyan));
  border-radius: 2px;
  position: relative;
}
.op-ba-divider::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 12px; height: 12px;
  background: var(--op-cyan);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(0,255,206,.3);
}
.op-ba-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: var(--op-r-sm);
  transition: background .2s;
}
.op-ba-item:hover { background: rgba(255,255,255,.02); }
.op-ba-item + .op-ba-item { margin-top: 8px; }
.op-ba-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--op-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-ba-icon--red { background: rgba(239,68,68,.1); color: var(--op-red); }
.op-ba-icon--cyan { background: rgba(0,255,206,.1); color: var(--op-cyan); }
.op-ba-icon--orange { background: rgba(249,115,22,.1); color: #f97316; }
.op-ba-icon svg { width: 16px; height: 16px; }
.op-ba-text { font-size: .92rem; line-height: 1.55; color: var(--op-text-muted); }

.op-outcomes { padding: 80px 24px; }
.op-outcomes .op-section-header { text-align: center; margin-bottom: 56px; }
.op-outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.op-outcome-card {
  background: var(--op-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148,163,184,.06);
  border-radius: var(--op-r-lg);
  padding: 36px 28px;
  text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.op-outcome-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--op-blue), var(--op-cyan));
  opacity: 0;
  transition: opacity .3s;
}
.op-outcome-card:hover { border-color: rgba(0,255,206,.15); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.op-outcome-card:hover::before { opacity: 1; }
.op-outcome-card__metric {
  font-family: var(--op-mono);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.op-outcome-card__label { font-size: .95rem; font-weight: 500; color: #fff; margin-bottom: 12px; }
.op-outcome-card__desc { font-size: .88rem; color: var(--op-text-muted); line-height: 1.6; }

@media (max-width: 1024px) {
  .op-outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .op-ba-grid { grid-template-columns: 1fr; gap: 32px; }
  .op-ba-divider { display: none; }
}
@media (max-width: 640px) {
  .op-outcome-grid { grid-template-columns: 1fr; }
  .op-cta__card { padding: 40px 24px; }
  .op-cta__buttons { flex-direction: column; align-items: center; }
}

/* ═══ 13. Footer ═══ */
.op-footer { position: relative; }

.op-footer__sep { max-width: var(--op-mw); margin: 0 auto; padding: 0 24px; }
.op-footer__sep-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,255,206,0.3), transparent); position: relative; }
.op-footer__sep-diamond { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--op-cyan); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 12px rgba(0,255,206,0.6); }

.op-footer__inner { max-width: var(--op-mw); margin: 0 auto; padding: 64px 24px 0; }
.op-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.op-footer__desc { font-size: 14px; line-height: 1.75; color: var(--op-text-sec); margin-bottom: 24px; }
.op-footer__tagline { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--op-cyan); white-space: nowrap; }
.op-footer__tagline i { width: 5px; height: 5px; background: var(--op-cyan); border-radius: 50%; display: block; }
.op-footer__bottom { max-width: var(--op-mw); margin: 0 auto; padding: 0 24px 28px; }
.op-footer__bottom-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,0.08), transparent); margin-bottom: 20px; }
.op-footer__bottom-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.op-footer__copyright { font-size: 14px; color: var(--op-text-muted); }
.op-footer__legal { display: flex; align-items: center; gap: 20px; }
.op-footer__legal a { font-size: 14px; color: var(--op-text-muted); transition: color 0.2s; }
.op-footer__legal a:hover { color: var(--op-text-sec); }
.op-footer__legal i { width: 1px; height: 12px; background: var(--op-text-muted); opacity: 0.25; display: block; }

/* Footer link hover — sliding cyan underline */
.op-footer__grid ul { list-style: none; }
.op-footer__grid a {
  font-size: 14px;
  color: var(--op-text-sec);
  padding: 5px 0;
  display: inline-block;
  position: relative;
  transition: color 0.2s;
}
.op-footer__grid a::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--op-cyan), transparent);
  transition: width 0.3s ease;
}
.op-footer__grid a:hover { color: #fff; }
.op-footer__grid a:hover::before { width: 100%; }

/* Footer social hover — lift + cyan glow */
.op-footer__socials a:hover {
  background: rgba(0,255,206,0.08);
  border-color: rgba(0,255,206,0.25);
  color: var(--op-cyan);
  transform: translateY(-2px);
}

/* ═══ 13b. WPForms Dark Theme ═══ */
div.wpforms-container-full .wpforms-form {
  font-family: var(--op-font) !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label,
div.wpforms-container-full .wpforms-form label {
  color: var(--op-text-sec) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  color: var(--op-text-muted) !important;
  font-size: 12px !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-description {
  color: var(--op-text-muted) !important;
}
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form input[type="date"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(148,163,184,0.15) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: var(--op-font) !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
  border-color: var(--op-cyan) !important;
  background: rgba(0,255,206,0.04) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,255,206,0.08) !important;
}
div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {
  color: var(--op-text-muted) !important;
  opacity: 0.5 !important;
}
/* File upload field */
div.wpforms-container-full .wpforms-form input[type="file"],
div.wpforms-container-full .wpforms-form .wpforms-field-file-upload input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px dashed rgba(148,163,184,0.2) !important;
  border-radius: 10px !important;
  color: var(--op-text-sec) !important;
  padding: 12px 16px !important;
}
/* Radio and checkbox labels */
div.wpforms-container-full .wpforms-form .wpforms-field-radio li label,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label,
div.wpforms-container-full .wpforms-form .wpforms-image-choices-label {
  color: var(--op-text-sec) !important;
  font-size: 14px !important;
}
/* Select dropdown option text */
div.wpforms-container-full .wpforms-form select option {
  background: #0b1120 !important;
  color: #fff !important;
}
/* Full-width fields — override WPForms half-width defaults */
div.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 8px 0 !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-field-row-block {
  width: 100% !important;
  float: none !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-field-row-block input {
  width: 100% !important;
}
/* Name field — stack first/last vertically, full width */
div.wpforms-container-full .wpforms-form .wpforms-field-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-field-row-block {
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
}
/* Submit button */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  padding-top: 12px !important;
}
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan)) !important;
  color: #060c16 !important;
  font-family: var(--op-font) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: .95rem 1.75rem !important;
  border-radius: 100px !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
  box-shadow: 0 2px 20px rgba(0,255,206,.15), 0 0 40px rgba(14,165,233,.08) !important;
  width: auto !important;
  height: auto !important;
}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 30px rgba(14,165,233,.1), 0 0 60px rgba(0,255,206,.06) !important;
}
div.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: var(--op-cyan) !important;
}
div.wpforms-container-full .wpforms-form .wpforms-error,
div.wpforms-container-full .wpforms-form label.wpforms-error {
  color: var(--op-error) !important;
  font-size: 13px !important;
}

/* ═══ 13c. Legal Pages ═══ */
.op-legal p { margin-bottom: 16px; }
.op-legal p + p { margin-top: 0; }
.op-legal ul { list-style-type: disc; margin: 12px 0 20px 24px; }
.op-legal ul li { margin-bottom: 6px; padding-left: 4px; }
.op-legal h2 + p { margin-top: 0; }

/* ═══ 14. Scroll Reveal ═══ */
.op-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.op-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ═══ 15. Keyframes ═══ */
/* Mesh keyframes removed — now WebGL-driven */

/* ═══ Background Mesh Theme Variants ═══ */

/* Mesh theme variants now handled by WebGL shader in mesh-gradient.js */

@keyframes op-icon-breathe {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; }
}

@keyframes op-faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ 16. Scrollbars ═══ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(27,43,64,0.3); }
::-webkit-scrollbar-thumb { background: rgba(0,255,206,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,206,0.4); }

/* ═══ 17. Responsive ═══ */
/* ═══ Mobile Nav — Burger + Slide Panel ═══ */
.op-nav__mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 10001;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}

.op-nav__mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}
.op-nav__mobile-toggle span:nth-child(1) { top: 14px; }
.op-nav__mobile-toggle span:nth-child(2) { top: 21px; }
.op-nav__mobile-toggle span:nth-child(3) { top: 28px; }

.op-nav__mobile-toggle.is-open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.op-nav__mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.op-nav__mobile-toggle.is-open span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

.op-mob-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.op-mob-close svg { opacity: 0.7; transition: opacity 0.2s; }
.op-mob-close:hover svg, .op-mob-close:active svg { opacity: 1; }

/* Mobile slide panel */
.op-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(6, 12, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 10000;
  overflow-y: auto;
  padding: 80px 24px 40px;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), -webkit-transform 0.35s cubic-bezier(.4,0,.2,1);
}

.op-mobile-panel.is-open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
}

.op-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.op-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile nav items */
.op-mobile-panel .op-mob-section {
  margin-bottom: 24px;
}

.op-mobile-panel .op-mob-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--op-font);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.op-mobile-panel .op-mob-trigger svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
  opacity: 0.4;
}

.op-mobile-panel .op-mob-trigger.is-open svg {
  transform: rotate(180deg);
  color: var(--op-cyan);
  opacity: 1;
}

.op-mobile-panel .op-mob-submenu {
  display: none;
  padding: 8px 0 16px 0;
}

.op-mobile-panel .op-mob-submenu.is-open {
  display: block;
}

.op-mobile-panel .op-mob-col-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: orange;
  padding: 12px 0 6px;
}

.op-mobile-panel .op-mob-link {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s;
}

.op-mobile-panel .op-mob-link:hover {
  color: var(--op-cyan);
}

.op-mobile-panel .op-mob-direct {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.op-mobile-panel .op-mob-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.op-mobile-panel .op-btn-primary {
  color: #060c16 !important;
}

@media (max-width: 991px) {
  .op-nav__menu { display: none !important; }
  .op-nav__actions { display: none !important; }
  .op-nav__inner { justify-content: space-between; }
  .op-nav__mobile-toggle { display: block !important; margin-left: auto; }
  .op-mobile-overlay { display: block; }
  .op-footer__grid { grid-template-columns: 1fr 1fr; }
  .op-section-title { font-size: clamp(24px, 5vw, 36px); }
  .op-btn-primary, .op-btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .op-footer__grid { grid-template-columns: 1fr; }
  .op-container { padding: 0 16px; }
  .op-section { padding: 32px 0; }
  .op-cta__card { padding: 32px 20px; }
  .op-faq summary { padding: 16px 18px; font-size: 14px; }
}

@media (max-width: 480px) {
  .op-footer__grid { grid-template-columns: 1fr; }
  .op-cta__card { padding: 40px 24px; }
  .op-btn-primary, .op-btn-secondary { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
}
/* ═══ .op-f Design System (Purchasing pages) ═══ */

/* ── GLOBAL DESIGN TOKENS ──
   These replicate omnipath-global.min.css so the embed is self-contained.
   Swap for a <link> to the real global sheet in production. */
.op-f {
  --op-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --op-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --op-white: #f8fafc;
  --op-bg-dark: #0b1120;
  --op-bg-card: rgba(255, 255, 255, 0.03);
  --op-text-sec: #E2E8F0;
  --op-text-muted: #E2E8F0;
  --op-blue: #0ea5e9;
  --op-cyan: #00ffce;
  --op-warn: #f59e0b;
  --op-r-sm: 8px;
  --op-r-md: 12px;
  --op-r-lg: 16px;
  --op-r-xl: 20px;
  --op-r-full: 9999px;
  --op-mw: 1200px;
}

/* ── SECTION-SPECIFIC STYLES ──
   Consumes --op-* tokens above. */

.op-f {
  font-family: var(--op-font);
  font-weight: 400;
  color: var(--op-text-sec);
  line-height: 1.65;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  padding-top: 40px;
}
.op-f *, .op-f *::before, .op-f *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Icon base ── */
.op-f .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.op-f .icon-lg {
  width: 40px;
  height: 40px;
}
.op-f .icon-sm {
  width: 16px;
  height: 16px;
}
.op-f .icon-xs,
.op-f .ico-xs {
  width: 12px;
  height: 12px;
}

/* ── HERO ── */
.op-f .hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 40px 2rem;
  overflow: hidden;
}
.op-f .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 15% 50%, rgba(14,165,233,.06), transparent),
    radial-gradient(ellipse 40% 50% at 80% 60%, rgba(0,255,206,.06), transparent),
    radial-gradient(ellipse 35% 55% at 85% 30%, rgba(0,255,206,.03), transparent);
  pointer-events: none;
  z-index: 0;
}
.op-f .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,206,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,206,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 10%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.op-f .hero__grid {
  position: relative;
  z-index: 1;
  max-width: var(--op-mw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

/* ── Content column ── */
.op-f .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.5rem;
}
.op-f .badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, rgba(14,165,233,.1), rgba(0,255,206,.1));
  border: 1px solid rgba(0,255,206,.25);
  color: var(--op-cyan);
  font-family: var(--op-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border-radius: var(--op-r-full, 9999px);
  width: fit-content;
  animation: opUp .6s ease-out both;
}
.op-f .badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--op-cyan);
  box-shadow: 0 0 8px var(--op-cyan);
}
.op-f .hero__title {
  font-family: var(--op-font);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--op-text);
  letter-spacing: -1.5px;
  margin-bottom: 22px;
  animation: opUp .6s ease-out .1s both;
}
.op-f .hero__title .gradient-text {
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.op-f .hero__sub {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--op-text-muted);
  max-width: 540px;
  animation: opUp .6s ease-out .2s both;
}

/* ── Benefit pills ── */
.op-f .pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  animation: opUp .6s ease-out .3s both;
}
.op-f .pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.1);
  color: var(--op-text-sec);
  font-size: .9rem;
  font-weight: 400;
  padding: .5rem .95rem;
  border-radius: var(--op-r-full, 9999px);
  transition: border-color .2s, background .2s;
}
.op-f .pill:hover {
  border-color: rgba(0,255,206,.25);
  background: linear-gradient(135deg, rgba(14,165,233,.05), rgba(0,255,206,.05));
}
.op-f .pill svg {
  width: 20px;
  height: 20px;
  color: var(--op-cyan);
  flex-shrink: 0;
}

/* ── CTAs ── */
.op-f .ctas {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  animation: opUp .6s ease-out .4s both;
}
.op-f .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  color: #060c16;
  font-family: var(--op-font);
  font-size: 1rem;
  font-weight: 500;
  padding: .95rem 1.75rem;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 20px rgba(0,255,206,.15), 0 0 40px rgba(14,165,233,.08);
}
.op-f .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(14,165,233,.1), 0 0 60px rgba(0,255,206,.06), 0 0 90px rgba(14,165,233,.04);
}
.op-f .btn-primary svg {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}
.op-f .btn-primary:hover svg {
  transform: translateX(3px);
}
.op-f .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--op-text-sec);
  font-family: var(--op-font);
  font-size: 1rem;
  font-weight: 400;
  padding: .95rem 1.5rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(148,163,184,.2);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.op-f .btn-ghost:hover {
  border-color: var(--op-cyan);
  color: var(--op-cyan);
  background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(0,255,206,.06));
}
.op-f .btn-ghost svg { width: 16px; height: 16px; }

/* ── Proof strip ── */
.op-f .proof {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--op-blue), var(--op-cyan), transparent) 1;
  animation: opUp .6s ease-out .5s both;
}
.op-f .proof__stat { display: flex; flex-direction: column; }
.op-f .proof__num {
  font-family: var(--op-mono);
  font-size: 1.5rem;
  font-weight: 500;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.op-f .proof__label {
  font-size: .78rem;
  font-weight: 400;
  color: var(--op-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.op-f .proof__div {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--op-blue), var(--op-cyan));
  opacity: .3;
}

/* ── VISUAL COLUMN ── */
.op-f .hero__visual {
  position: relative;
  animation: opUp .8s ease-out .3s both;
}

/* ── UI Card ── */
.op-f .ui-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(14,165,233,.12);
  border-radius: var(--op-r-xl, 20px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    0 20px 48px rgba(0,0,0,.3),
    0 0 60px rgba(0,255,206,.04);
  overflow: hidden;
  position: relative;
}
.op-f .ui-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--op-blue), var(--op-cyan), transparent 95%);
}
.op-f .ui-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,206,.15), transparent);
}
.op-f .card__header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(148,163,184,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.op-f .card__title-group { display: flex; flex-direction: column; gap: 3px; }
.op-f .card__label {
  font-family: var(--op-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--op-text-muted);
  font-weight: 400;
}
.op-f .card__title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--op-white);
}
.op-f .status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--op-warn);
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.18);
  padding: .35rem .75rem;
  border-radius: var(--op-r-full, 9999px);
}
.op-f .status-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--op-warn);
  animation: opPRPulse 2s ease-in-out infinite;
}

/* ── Request rows ── */
.op-f .card__body {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.op-f .req-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .65rem 1rem;
  background: rgba(255,255,255,0.04);
  border-radius: var(--op-r-md, 12px);
  border: 1px solid rgba(148,163,184,.04);
}
.op-f .req-row__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--op-r-md, 12px);
  background: rgba(14,165,233,.06);
  border: 1px solid rgba(14,165,233,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op-cyan);
}
.op-f .req-row__icon svg {
  width: 24px;
  height: 24px;
}
.op-f .req-row__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.op-f .req-row__name {
  font-size: .92rem;
  font-weight: 500;
  color: var(--op-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-f .req-row__meta {
  font-size: .75rem;
  color: var(--op-text-muted);
  font-family: var(--op-mono);
  font-weight: 400;
}
.op-f .req-row__amount {
  font-family: var(--op-mono);
  font-size: .95rem;
  font-weight: 500;
  color: var(--op-white);
  white-space: nowrap;
}

/* ── Approval chain ── */
.op-f .card__footer {
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid rgba(148,163,184,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.op-f .approvers {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.op-f .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 500;
  border: 2px solid rgba(255,255,255,0.03);
  margin-left: -6px;
}
.op-f .avatar:first-child { margin-left: 0; }
.op-f .avatar--ok   { background: var(--op-cyan); color: #060c16; }
.op-f .avatar--cur  {
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  color: #060c16;
  box-shadow: 0 0 0 3px rgba(0,255,206,.2);
}
.op-f .avatar--pn   {
  background: var(--op-bg-card);
  color: var(--op-text-muted);
  border-color: rgba(148,163,184,.12);
}
.op-f .approvers__label {
  font-size: .78rem;
  color: var(--op-text-muted);
  margin-left: .25rem;
  font-weight: 400;
}
.op-f .btn-review {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--op-font);
  font-size: .85rem;
  font-weight: 500;
  color: var(--op-cyan);
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(0,255,206,.08));
  border: 1px solid rgba(0,255,206,.25);
  padding: .45rem .95rem;
  border-radius: var(--op-r-sm, 8px);
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.op-f .btn-review:hover {
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(0,255,206,.15));
  box-shadow: 0 0 16px rgba(0,255,206,.1);
}

/* ── Float badges ── */
.op-f .float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148,163,184,.08);
  padding: .6rem 1rem;
  border-radius: var(--op-r-lg, 16px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 20px rgba(0,255,206,.04);
  font-size: .85rem;
  animation: opFloat 6s ease-in-out infinite;
  z-index: 2;
}
.op-f .float-badge--tr { top: -18px; right: -14px; animation-delay: 0s; }
.op-f .float-badge--bl { bottom: -16px; left: -18px; animation-delay: 3s; }
.op-f .float-badge__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--op-r-sm, 8px);
  background: linear-gradient(135deg, rgba(14,165,233,.1), rgba(0,255,206,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op-cyan);
}
.op-f .float-badge__icon svg { width: 18px; height: 18px; }
.op-f .float-badge__text { display: flex; flex-direction: column; }
.op-f .float-badge__text strong {
  color: var(--op-white);
  font-weight: 500;
  font-size: .85rem;
}
.op-f .float-badge__text span {
  color: var(--op-text-muted);
  font-size: .7rem;
  font-family: var(--op-mono);
  font-weight: 400;
}

/* ── FEATURES GRID ── */
.op-f .features {
  position: relative;
  padding: 6rem 2rem;
  background: transparent;
}
.op-f .features__inner {
  max-width: var(--op-mw);
  margin: 0 auto;
}
.op-f .section-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 4rem;
}
.op-f .section-header__eyebrow {
  font-family: var(--op-mono);
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--op-cyan);
  margin-bottom: .5rem;
}
.op-f .section-header__title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 500;
  color: var(--op-white);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.op-f .section-header__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.op-f .section-header__desc {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--op-text-muted);
  line-height: 1.7;
}
.op-f .features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.op-f .feature-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(148,163,184,.06);
  border-radius: var(--op-r-xl, 20px);
  padding: 2rem 2rem 3rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.op-f .feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--op-blue), var(--op-cyan));
  opacity: 0;
  transition: opacity .3s;
}
.op-f .feature-card:hover {
  border-color: rgba(0,255,206,.2);
  transform: translateY(-3px);
  box-shadow: 0 4px 24px rgba(0,255,206,.06), 0 0 40px rgba(14,165,233,.04);
}
.op-f .feature-card:hover::before { opacity: 1; }
.op-f .feature-card:hover h3 {
  background: linear-gradient(135deg, var(--op-blue), var(--op-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Feature card icon container */
.op-f .feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--op-r-md, 12px);
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(0,255,206,.08));
  border: 1px solid rgba(14,165,233,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--op-cyan);
  transition: box-shadow .3s;
}
.op-f .feature-card:hover .feature-card__icon {
  box-shadow: 0 0 20px rgba(0,255,206,.08);
}
.op-f .feature-card__icon svg {
  width: 26px;
  height: 26px;
}
.op-f .feature-card h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--op-white);
  margin-bottom: .5rem;
  transition: all .3s;
}
.op-f .feature-card p {
  font-size: .95rem;
  font-weight: 400;
  color: var(--op-text-muted);
  line-height: 1.65;
}

/* ── KEYFRAMES ── */
@keyframes opUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes opPRPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .op-f .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .op-f .hero__visual { max-width: 540px; margin: 0 auto; }
  .op-f .features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .op-f .hero { padding: 3rem 1.25rem; }
  .op-f .ctas { flex-direction: column; align-items: stretch; }
  .op-f .btn-primary, .op-f .btn-ghost { justify-content: center; }
  .op-f .proof { flex-wrap: wrap; gap: 1rem; }
  .op-f .proof__div { display: none; }
  .op-f .features__grid { grid-template-columns: 1fr; }
  .op-f .float-badge { display: none; }
}

/* ═══ .op-fp Design System (Feature pages) ═══ */

.op-fp{--op-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--op-mono:'JetBrains Mono','SF Mono','Fira Code',monospace;--op-white:#f8fafc;--op-bg-dark:#0b1120;--op-bg-card:rgba(255,255,255,0.03);--op-text-sec:#F1F5F9;--op-text-muted:#E2E8F0;--op-blue:#0ea5e9;--op-cyan:#00ffce;--op-warn:#f59e0b;--op-green:#22c55e;--op-red:#ef4444;--op-r-sm:8px;--op-r-md:12px;--op-r-lg:16px;--op-r-xl:20px;--op-r-full:9999px;--op-mw:1200px}

/* ── Base ── */
.op-fp{font-family:var(--op-font);color:var(--op-text-sec);line-height:1.6;padding-top:40px}
.op-fp *,.op-fp *::before,.op-fp *::after{box-sizing:border-box;margin:0;padding:0}
.op-fp section{padding:80px 24px}
.op-fp .container{max-width:var(--op-mw);margin:0 auto}
.op-fp strong{color:var(--op-white);font-weight:500}
.op-fp em{background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal}

.op-fp .hero>.wrap,.op-fp .hero>.container{width:100%}
.op-fp .hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.op-fp .hero__content{animation:opUp .6s ease both}
.op-fp .hero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--op-r-pill,9999px);background:linear-gradient(135deg,rgba(30,220,255,.10),rgba(0,255,206,.10));border:1px solid rgba(0,255,206,.2);color:var(--op-cyan);font-family:var(--op-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:20px}
.op-fp .hero__eyebrow-dot{width:6px;height:6px;background:var(--op-cyan);border-radius:50%;box-shadow:0 0 8px var(--op-cyan);animation:opFPPulse 2.5s ease-in-out infinite}
.op-fp .hero__title{font-size:clamp(36px,5vw,56px);font-weight:500;color:var(--op-text);letter-spacing:-1.5px;line-height:1.05;margin-bottom:22px}
.op-fp .hero__desc{font-size:1.05rem;color:var(--op-text-muted);line-height:1.75;margin-bottom:36px;max-width:540px}
.op-fp .hero__desc strong{color:var(--op-white)}
.op-fp .hero__ctas{display:flex;gap:16px;flex-wrap:wrap}
.op-fp .hero__visual{animation:opUp .6s ease .15s both}
.op-fp .hero__image-wrap{background:rgba(26,35,50,.4);border:1px solid rgba(148,163,184,.08);border-radius:var(--op-r-xl);padding:32px;position:relative;overflow:hidden}
.op-fp .hero__image-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--op-blue),var(--op-cyan))}
.op-fp .hero__image-wrap svg{width:100%;height:auto;display:block}

/* ── Intro ── */
.op-fp .intro{padding:80px 24px 40px}
.op-fp .intro__title{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:500;color:var(--op-white);letter-spacing:-.02em;line-height:1.25;margin-bottom:20px}
.op-fp .intro__desc{font-size:1rem;color:var(--op-text-muted);line-height:1.7;max-width:760px}

/* ── Feature Blocks (alternating image/text) ── */
.op-fp .features{padding:40px 24px 80px}
.op-fp .feature-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.op-fp .feature-block:last-child{margin-bottom:0}
.op-fp .feature-block--reverse{direction:rtl}
.op-fp .feature-block--reverse > *{direction:ltr}
.op-fp .feature-block__content{}
.op-fp .feature-block__title{font-size:1.25rem;font-weight:500;color:var(--op-white);margin-bottom:14px;line-height:1.35}
.op-fp .feature-block__desc{font-size:.95rem;color:var(--op-text-muted);line-height:1.65}
.op-fp .feature-block__visual{background:rgba(26,35,50,.35);border:1px solid rgba(148,163,184,.06);border-radius:var(--op-r-lg);padding:28px;display:flex;align-items:center;justify-content:center;min-height:200px}
.op-fp .feature-block__visual svg{width:100%;max-width:280px;height:auto}

/* ── KPI Strip ── */
.op-fp .kpis{padding:0 24px 80px}
.op-fp .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.op-fp .kpi-card{background:rgba(255,255,255,0.03);border:1px solid rgba(148,163,184,.06);border-radius:var(--op-r-lg);padding:28px 24px;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s}
.op-fp .kpi-card:hover{border-color:rgba(0,255,206,.15);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.op-fp .kpi-card__label{font-family:var(--op-mono);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--op-text-muted);margin-bottom:12px}
.op-fp .kpi-card__value{font-family:var(--op-mono);font-size:1.6rem;font-weight:600;margin-bottom:10px}
.op-fp .kpi-card__delta{display:block;font-size:.88rem;font-weight:400;font-family:var(--op-font);text-transform:none;letter-spacing:normal;line-height:1.6;color:var(--op-text-muted);padding:0}
.op-fp .resolution__statement--mt{margin-top:3rem}
.op-fp .kpi-card__delta--pos{background:rgba(34,197,94,.1);color:var(--op-green)}
.op-fp .kpi-card__delta--neg{background:rgba(239,68,68,.1);color:var(--op-red)}
.op-fp .kpi-card__delta--neutral{background:rgba(245,158,11,.1);color:var(--op-warn)}

/* ── Resolution (With / Without) ── */
.op-fp .resolution{padding:80px 24px}
.op-fp .resolution__statement{background:rgba(26,35,50,.4);border:1px solid rgba(148,163,184,.06);border-top:2px solid;border-image:linear-gradient(90deg,var(--op-blue),var(--op-cyan)) 1;border-radius:0 0 var(--op-r-lg) var(--op-r-lg);padding:40px;text-align:center;margin-bottom:48px;max-width:800px;margin-left:auto;margin-right:auto}
.op-fp .resolution__statement-title{font-family:var(--op-mono);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--op-text-muted);margin-bottom:16px}
.op-fp .resolution__statement-text{font-size:1.1rem;color:var(--op-text-sec);line-height:1.7}
.op-fp .ba-grid{display:grid;grid-template-columns:1fr 2px 1fr;gap:40px;max-width:960px;margin:0 auto}
.op-fp .ba-col__header{font-family:var(--op-mono);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;padding-bottom:12px;margin-bottom:20px}
.op-fp .ba-col__header--before{color:var(--op-red);border-bottom:2px solid rgba(239,68,68,.3)}
.op-fp .ba-col__header--after{color:var(--op-cyan);border-bottom:2px solid rgba(0,255,206,.3)}
.op-fp .ba-divider{background:linear-gradient(180deg,var(--op-blue),var(--op-cyan));border-radius:2px;position:relative}
.op-fp .ba-divider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--op-cyan);border-radius:50%;box-shadow:0 0 16px rgba(0,255,206,.3)}
.op-fp .ba-item{display:flex;align-items:flex-start;gap:14px;padding:12px;border-radius:var(--op-r-sm);transition:background .2s}
.op-fp .ba-item:hover{background:rgba(255,255,255,.02)}
.op-fp .ba-item+.ba-item{margin-top:8px}
.op-fp .ba-item__icon{flex-shrink:0;width:32px;height:32px;border-radius:var(--op-r-sm);display:flex;align-items:center;justify-content:center}
.op-fp .ba-item__icon--red{background:rgba(239,68,68,.1);color:var(--op-red)}
.op-fp .ba-item__icon--cyan{background:rgba(0,255,206,.1);color:var(--op-cyan)}
.op-fp .ba-item__icon svg{width:16px;height:16px}
.op-fp .ba-item__text{font-size:.92rem;line-height:1.55;color:var(--op-text-muted)}

/* ── Outcomes ── */
.op-fp .outcomes{padding:80px 24px}
.op-fp .section-header{text-align:center;margin-bottom:56px}
.op-fp .section-header__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--op-r-pill,9999px);background:linear-gradient(135deg,rgba(30,220,255,.10),rgba(0,255,206,.10));border:1px solid rgba(0,255,206,.2);color:var(--op-cyan);font-family:var(--op-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:16px}
.op-fp .section-header__eyebrow--green{color:var(--op-green);background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(34,197,94,.05));border-color:rgba(34,197,94,.25)}
.op-fp .section-header__title{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:500;color:var(--op-white);letter-spacing:-.02em;line-height:1.2;margin-bottom:16px}
.op-fp .section-header__desc{font-size:.95rem;color:var(--op-text-muted);max-width:560px;margin:0 auto;line-height:1.65}
.op-fp .outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.op-fp .outcome-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.06);border-radius:var(--op-r-lg);padding:36px 28px;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.op-fp .outcome-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--op-blue),var(--op-cyan));opacity:0;transition:opacity .3s}
.op-fp .outcome-card:hover{border-color:rgba(0,255,206,.15);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.op-fp .outcome-card:hover::before{opacity:1}
.op-fp .outcome-card__metric{font-family:var(--op-mono);font-size:2rem;font-weight:600;margin-bottom:8px}
.op-fp .outcome-card__label{font-size:.95rem;font-weight:500;color:var(--op-white);margin-bottom:12px}
.op-fp .outcome-card__desc{font-size:.88rem;color:var(--op-text-muted);line-height:1.6}

/* ── CTA Banner ── */
.op-fp .cta-section{padding:80px 24px 120px}
.op-fp .cta-card{max-width:960px;margin:0 auto;background:rgba(255,255,255,0.03);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(148,163,184,.08);border-radius:var(--op-r-xl);padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.op-fp .cta-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--op-blue),var(--op-cyan))}
.op-fp .cta-card__eyebrow{font-family:var(--op-mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--op-text-muted);margin-bottom:16px}
.op-fp .cta-card__title{font-size:clamp(1.6rem,2.8vw,2rem);font-weight:500;color:var(--op-white);letter-spacing:-.02em;margin-bottom:16px}
.op-fp .cta-card__desc{font-size:.95rem;color:var(--op-text-muted);line-height:1.7;max-width:520px;margin:0 auto 32px}
.op-fp .cta-card__buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── Keyframes ── */
@keyframes opFPPulse{0%,100%{box-shadow:0 0 12px rgba(0,255,206,.08)}50%{box-shadow:0 0 28px rgba(0,255,206,.18)}}

/* ── Responsive ── */
@media(max-width:1024px){
  .op-fp .hero__grid{grid-template-columns:1fr;gap:40px}
  .op-fp .hero__visual{order:-1}
  .op-fp .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .op-fp .outcome-grid{grid-template-columns:repeat(2,1fr)}
  .op-fp .ba-grid{grid-template-columns:1fr;gap:32px}
  .op-fp .ba-divider{display:none}
  .op-fp .feature-block{grid-template-columns:1fr;gap:32px}
  .op-fp .feature-block--reverse{direction:ltr}
}
@media(max-width:640px){
  .op-fp .kpi-grid{grid-template-columns:1fr}
  .op-fp .outcome-grid{grid-template-columns:1fr}
  .op-fp .hero__ctas{flex-direction:column;align-items:flex-start}
  .op-fp .cta-card{padding:40px 24px}
  .op-fp .cta-card__buttons{flex-direction:column;align-items:center}
}


/* ═══ .op-fp v2 Design System (Platform feature pages) ═══ */

.op-fp{--op-bg:#0B1120;--op-bg-card:rgba(255,255,255,0.03);--op-bg-raised:rgba(255,255,255,0.05);--op-bg-inset:rgba(255,255,255,0.04);--op-text:#FFFFFF;--op-text-dim:#FFFFFF;--op-text-mute:rgba(255,255,255,0.92);--op-white:#FFFFFF;--op-white-pure:#FFF;--op-accent:#00FFCE;--op-accent-2:#1EDCFF;--op-accent-bg:rgba(0,255,206,0.08);--op-accent-bg2:rgba(0,255,206,0.12);--op-accent-bg3:rgba(0,255,206,0.05);--op-accent-bdr:rgba(0,255,206,0.12);--op-accent-bdr2:rgba(0,255,206,0.25);--op-accent-glow:rgba(0,255,206,0.15);--op-blue:#0EA5E9;--op-blue-bg:rgba(14,165,233,0.08);--op-ok:#4ADE80;--op-warn:#F59E0B;--op-warn-bg:rgba(245,158,11,0.08);--op-danger:#ff5050;--op-bdr:rgba(148,163,184,0.06);--op-bdr-light:rgba(148,163,184,0.1);--op-bdr-hover:rgba(229,231,235,0.2);--op-ff:'Outfit',sans-serif;--op-fm:'JetBrains Mono',monospace;--op-r-sm:6px;--op-r-md:10px;--op-r-lg:16px;--op-r-xl:24px;--op-r-full:9999px;--op-mw:1200px;--op-grad:linear-gradient(135deg,var(--op-accent),var(--op-accent-2));--op-grad-blue:linear-gradient(135deg,var(--op-blue),var(--op-accent));--op-grad-sub:linear-gradient(135deg,var(--op-blue-bg),var(--op-accent-bg));--op-grad-line:linear-gradient(90deg,transparent 5%,var(--op-blue),var(--op-accent),transparent 95%);font-family:var(--op-ff);font-weight:400;color:var(--op-text);line-height:1.65;-webkit-font-smoothing:antialiased}
.op-fp *,.op-fp *::before,.op-fp *::after{box-sizing:border-box;margin:0;padding:0}

/* Override wildcard reset for global FAQ inside .op-fp */
.op-fp .op-faq{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.op-fp .op-faq details{background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-radius:14px;overflow:hidden;transition:all .3s ease}
.op-fp .op-faq details:hover{border-color:rgba(0,255,206,0.12)}
.op-fp .op-faq details[open]{background:rgba(0,255,206,0.03);border-color:rgba(0,255,206,0.15);box-shadow:0 4px 24px rgba(0,0,0,0.15)}
.op-fp .op-faq summary{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;list-style:none;font-size:15px;font-weight:500;color:rgba(255,255,255,0.85);user-select:none}
.op-fp .op-faq summary::-webkit-details-marker{display:none}
.op-fp .op-faq summary::after{content:'+';width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(0,255,206,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:50%;flex-shrink:0;margin-left:16px;transition:all .3s ease}
.op-fp .op-faq details[open] summary::after{content:'−';background:rgba(0,255,206,0.08);border-color:rgba(0,255,206,0.2);color:var(--op-cyan)}
.op-fp .op-faq details[open] summary{color:#fff}
.op-fp .op-faq__answer{padding:0 24px 20px;font-size:14px;color:rgba(255,255,255,0.55);line-height:1.75}

/* Override wildcard reset for global CTA inside .op-fp */
.op-fp .op-cta{padding:80px 24px 120px}
.op-fp .op-cta__card{max-width:960px;margin:0 auto;background:rgba(255,255,255,0.04);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,0.1);border-radius:var(--op-r-xl);padding:56px 48px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06)}
.op-fp .op-cta__card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--op-blue),var(--op-cyan))}
.op-fp .op-cta__eyebrow{font-family:var(--op-fm);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--op-text-muted);margin-bottom:16px}
.op-fp .op-cta__title{font-size:clamp(1.6rem,2.8vw,2rem);font-weight:500;color:#fff;letter-spacing:-.02em;margin-bottom:16px}
.op-fp .op-cta__title em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-fp .op-cta__desc{font-size:.95rem;color:var(--op-text-muted);line-height:1.7;max-width:520px;margin:0 auto 32px}
.op-fp .op-cta__buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.op-fp .op-cta__btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));color:#0b1120;font-family:var(--op-font);font-size:1rem;font-weight:500;padding:.95rem 1.75rem;border-radius:100px;text-decoration:none;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 20px rgba(0,255,206,.15),0 0 40px rgba(14,165,233,.08)}
.op-fp .op-cta__btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(14,165,233,.1),0 0 60px rgba(0,255,206,.06)}
.op-fp .op-cta__btn-primary svg{width:16px;height:16px;transition:transform .2s}
.op-fp .op-cta__btn-primary:hover svg{transform:translateX(3px)}
.op-fp .op-cta__btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--op-text-sec);font-family:var(--op-font);font-size:1rem;font-weight:400;padding:.95rem 1.5rem;border-radius:100px;text-decoration:none;border:1px solid rgba(148,163,184,.2);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.op-fp .op-cta__btn-ghost:hover{border-color:var(--op-cyan);color:var(--op-cyan);background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(0,255,206,.06))}

/* Callout box spacing inside .op-fp */
.op-fp .resolution__statement--mt{margin-top:3rem}

@keyframes opDotPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes opFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes opFloatIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.op-fp .anim{opacity:0;animation:opUp .7s ease-out forwards}
.op-fp .d1{animation-delay:.1s}.op-fp .d2{animation-delay:.2s}.op-fp .d3{animation-delay:.35s}.op-fp .d4{animation-delay:.5s}.op-fp .d5{animation-delay:.6s}.op-fp .d6{animation-delay:.7s}
.op-fp .anim-fi{opacity:0;animation:opFloatIn .8s ease-out forwards}
.op-fp .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--op-ff);font-weight:500;font-size:15px;border:none;border-radius:100px;cursor:pointer;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .3s,background .3s}
.op-fp .btn svg{width:16px;height:16px;transition:transform .25s}
.op-fp .btn-p{padding:.95rem 1.75rem;border-radius:100px;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));color:#060c16;box-shadow:0 2px 20px rgba(0,255,206,.15),0 0 40px rgba(14,165,233,.08)}
.op-fp .btn-p:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(14,165,233,.1),0 0 60px rgba(0,255,206,.06)}
.op-fp .btn-p:hover svg{transform:translateX(3px)}
.op-fp .btn-s{padding:.95rem 1.5rem;border-radius:100px;background:transparent;color:var(--op-text-sec);border:1px solid rgba(148,163,184,.2)}
.op-fp .btn-s:hover{border-color:var(--op-cyan);color:var(--op-cyan);background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(0,255,206,.06))}
.op-fp .ben{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.03);border:1px solid var(--op-bdr-light);color:var(--op-text);font-size:.9rem;font-weight:400;padding:.5rem .95rem;border-radius:var(--op-r-full);transition:border-color .2s,background .2s}
.op-fp .ben:hover{border-color:var(--op-accent-bdr2);background:var(--op-grad-sub)}
.op-fp .prf{display:flex;align-items:center;gap:2rem;padding-top:1.5rem;border-top:1px solid transparent;border-image:linear-gradient(90deg,var(--op-blue),var(--op-accent),transparent) 1}
.op-fp .prf-s{display:flex;flex-direction:column}
.op-fp .prf-n{font-family:var(--op-fm);font-size:1.5rem;font-weight:500;background:var(--op-grad-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-fp .prf-l{font-size:.78rem;font-weight:400;color:var(--op-text-dim);text-transform:uppercase;letter-spacing:.04em}
.op-fp .prf-d{width:1px;height:36px;background:linear-gradient(to bottom,var(--op-blue),var(--op-accent));opacity:.3}
.op-fp .ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--op-r-md)}
.op-fp .ico svg{display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.op-fp .ico-s{width:28px;height:28px}.op-fp .ico-s svg{width:16px;height:16px}
.op-fp .ico-l{width:56px;height:56px;border-radius:var(--op-r-lg)}.op-fp .ico-l svg{width:28px;height:28px}
.op-fp .ico-sub{background:var(--op-grad-sub);border:1px solid var(--op-accent-bdr)}.op-fp .ico-sub svg{color:var(--op-accent)}
.op-fp .ico-glow{background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(0,255,206,.12));border:1px solid rgba(0,255,206,.15);box-shadow:0 0 16px rgba(0,255,206,.06),0 2px 8px rgba(0,0,0,.15)}.op-fp .ico-glow svg{color:var(--op-accent);filter:drop-shadow(0 0 3px rgba(0,255,206,.25))}
.op-fp .hero{position:relative;min-height:80vh;display:flex;align-items:center;padding:40px 2rem;overflow:hidden}
/* Hero pseudo-elements removed — WebGL mesh provides background */
.op-fp .hero-in{position:relative;z-index:1;max-width:var(--op-mw);margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.op-fp .hero-c{display:flex;flex-direction:column;gap:1.5rem}
.op-fp .h1{font-size:clamp(2.6rem,4.5vw,3.8rem);font-weight:500;line-height:1.1;color:var(--op-white-pure);letter-spacing:-.025em}
.op-fp .h1 .ac{background:var(--op-grad-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-fp .sub{font-size:1.15rem;font-weight:400;line-height:1.75;color:var(--op-text);max-width:540px}
.op-fp .bens{display:flex;flex-wrap:wrap;gap:.5rem}
.op-fp .vis{position:relative}
.op-fp .ui-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);border:1px solid rgba(14,165,233,.12);border-radius:var(--op-r-lg);box-shadow:0 4px 12px rgba(0,0,0,.4),0 20px 48px rgba(0,0,0,.3),0 0 60px rgba(0,255,206,.04);overflow:hidden;position:relative}
.op-fp .ui-card::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--op-grad-line)}
.op-fp .ui-hdr{padding:1.25rem 1.5rem;border-bottom:1px solid var(--op-bdr);display:flex;justify-content:space-between;align-items:center}
.op-fp .ui-lbl{font-family:var(--op-fm);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--op-text-dim);font-weight:400}
.op-fp .ui-ttl{font-size:1.05rem;font-weight:500;color:var(--op-white-pure)}
.op-fp .ui-sts{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:500;color:var(--op-ok);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);padding:.35rem .75rem;border-radius:var(--op-r-full)}
.op-fp .ui-sts-w{color:var(--op-warn);background:var(--op-warn-bg);border-color:rgba(245,158,11,.18)}
.op-fp .ui-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:opDotPulse 2s ease-in-out infinite}
.op-fp .ui-body{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}
.op-fp .fl{position:absolute;display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.08);padding:.6rem 1rem;border-radius:var(--op-r-lg);box-shadow:0 4px 16px rgba(0,0,0,.3);font-size:.85rem;animation:opFloat 6s ease-in-out infinite;z-index:2}
.op-fp .fl-tr{top:-18px;right:-14px}.op-fp .fl-bl{bottom:-16px;left:-18px;animation-delay:3s}
.op-fp .fl-t{display:flex;flex-direction:column}
.op-fp .fl-t strong{color:var(--op-white-pure);font-weight:500;font-size:.85rem}
.op-fp .fl-t span{color:var(--op-text-dim);font-size:.7rem;font-family:var(--op-fm);font-weight:400}
.op-fp .sec-ctr{max-width:var(--op-mw);margin:0 auto}
.op-fp .sec-hdr{text-align:center;max-width:660px;margin:0 auto 4rem}
.op-fp .sec-ey{font-family:var(--op-fm);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--op-accent);margin-bottom:.5rem}
.op-fp .sec-t{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:500;color:var(--op-white-pure);line-height:1.2;letter-spacing:-.02em;margin-bottom:1rem}
.op-fp .sec-t em{font-style:normal;background:var(--op-grad-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-fp .sec-sub{font-size:1.05rem;font-weight:400;color:var(--op-text);line-height:1.7}
.op-fp .fg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.op-fp .fc{background:rgba(255,255,255,0.03);backdrop-filter:blur(8px);border:1px solid var(--op-bdr);border-radius:var(--op-r-lg);padding:2rem 2rem 2.5rem;transition:border-color .3s,transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.op-fp .fc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--op-grad-blue);opacity:0;transition:opacity .3s}
.op-fp .fc:hover{border-color:rgba(0,255,206,.2);transform:translateY(-3px);box-shadow:0 4px 24px rgba(0,255,206,.06)}
.op-fp .fc:hover::before{opacity:1}
.op-fp .fc .ico-l{margin-bottom:1.25rem;transition:box-shadow .3s}
.op-fp .fc:hover .ico-l{box-shadow:0 0 24px rgba(0,255,206,.12)}
.op-fp .fc h3{font-size:1.05rem;font-weight:500;color:var(--op-white-pure);margin-bottom:.4rem}
.op-fp .fc:hover h3{background:var(--op-grad-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-fp .fc p{font-size:.92rem;font-weight:400;color:var(--op-text);line-height:1.6}
.op-fp .cmp{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}
.op-fp .cmp-col{background:rgba(255,255,255,0.03);border:1px solid var(--op-bdr);border-radius:var(--op-r-lg);padding:2.5rem 2rem;position:relative;overflow:hidden}
.op-fp .cmp-col::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.op-fp .cmp-w::before{background:linear-gradient(90deg,#ff5050,#F59E0B)}
.op-fp .cmp-g{border-color:rgba(0,255,206,.2)}.op-fp .cmp-g::before{background:var(--op-grad-blue)}
.op-fp .cmp-t{font-size:1.1rem;font-weight:500;margin-bottom:1.5rem}
.op-fp .cmp-w .cmp-t{color:var(--op-text-dim)}.op-fp .cmp-g .cmp-t{color:var(--op-accent)}
.op-fp .cmp-items{display:flex;flex-direction:column;gap:12px}
.op-fp .cmp-i{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.55}
.op-fp .cmp-ic{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.op-fp .cmp-ic svg{width:11px;height:11px;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.op-fp .cmp-w .cmp-ic{background:rgba(255,80,80,.1)}.op-fp .cmp-w .cmp-ic svg{stroke:var(--op-danger)}
.op-fp .cmp-g .cmp-ic{background:rgba(0,255,206,.1)}.op-fp .cmp-g .cmp-ic svg{stroke:var(--op-accent)}
.op-fp .cmp-i strong{color:var(--op-white-pure);font-weight:500}
.op-fp .imp{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.op-fp .imp-c{background:rgba(255,255,255,0.03);border:1px solid var(--op-bdr);border-radius:var(--op-r-lg);padding:2rem 1.5rem;text-align:center;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.op-fp .imp-c:hover{border-color:rgba(0,255,206,.2);transform:translateY(-4px)}
.op-fp .imp-c::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--op-grad-blue);opacity:0;transition:opacity .3s}
.op-fp .imp-c:hover::before{opacity:1}
.op-fp .imp-n{font-family:var(--op-fm);font-size:2.8rem;font-weight:500;background:var(--op-grad-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:.5rem;letter-spacing:-2px}
.op-fp .imp-l{font-size:1rem;font-weight:500;color:var(--op-white-pure);margin-bottom:.3rem}
.op-fp .imp-d{font-size:.85rem;color:var(--op-text);line-height:1.5}
.op-fp .wf{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:3rem}
.op-fp .wf-s{background:rgba(255,255,255,0.03);border:1px solid var(--op-bdr);padding:2rem 1.5rem 2.5rem;transition:border-color .3s,background .3s}
.op-fp .wf-s:first-child{border-radius:var(--op-r-lg) 0 0 var(--op-r-lg)}.op-fp .wf-s:last-child{border-radius:0 var(--op-r-lg) var(--op-r-lg) 0}
.op-fp .wf-s:hover{border-color:rgba(0,255,206,.15);background:rgba(0,255,206,.03)}
.op-fp .wf-n{font-family:var(--op-fm);font-size:11px;color:var(--op-accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:1.25rem;display:flex;align-items:center;gap:8px}
.op-fp .wf-n::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--op-accent),transparent);opacity:.25}
.op-fp .wf-s h3{font-size:1.05rem;font-weight:500;color:var(--op-white-pure);margin-bottom:.5rem}
.op-fp .wf-s p{font-size:.88rem;color:var(--op-text);line-height:1.6;font-weight:400}
@media(max-width:1024px){.op-fp .hero-in{grid-template-columns:1fr;gap:3rem}.op-fp .fg{grid-template-columns:repeat(2,1fr)}.op-fp .cmp{grid-template-columns:1fr 1fr}.op-fp .imp{grid-template-columns:repeat(2,1fr)}.op-fp .wf{grid-template-columns:repeat(2,1fr)}.op-fp .wf-s:first-child{border-radius:var(--op-r-lg) 0 0 0}.op-fp .wf-s:nth-child(2){border-radius:0 var(--op-r-lg) 0 0}.op-fp .wf-s:nth-child(3){border-radius:0 0 0 var(--op-r-lg)}.op-fp .wf-s:last-child{border-radius:0 0 var(--op-r-lg) 0}}
@media(max-width:640px){.op-fp .hero{padding:3rem 1.25rem}.op-fp .hero-in{gap:2rem}.op-fp .ctas{flex-direction:column;align-items:stretch}.op-fp .btn-p,.op-fp .btn-s{justify-content:center}.op-fp .fg,.op-fp .imp{grid-template-columns:1fr}.op-fp .cmp{grid-template-columns:1fr}.op-fp .wf{grid-template-columns:1fr}.op-fp .wf-s,.op-fp .wf-s:first-child,.op-fp .wf-s:nth-child(2),.op-fp .wf-s:nth-child(3),.op-fp .wf-s:last-child{border-radius:var(--op-r-lg)}.op-fp .fl{display:none}.op-fp .prf{flex-wrap:wrap;gap:1rem}.op-fp .prf-d{display:none}}

/* ═══ .op-fp Shared Framework (consolidated from 18 template parts) ═══ */

/* Base reset */
.op-fp{--ease:.22s cubic-bezier(.4,0,.2,1);background:transparent}
.op-fp *,.op-fp *::before,.op-fp *::after{margin:0;padding:0;box-sizing:border-box}

/* Layout */
.op-fp .wrap{max-width:var(--op-mw);margin:0 auto;padding:0 24px}
@media(max-width:768px){.op-fp .wrap{padding:0 16px}}
.op-fp .sec{padding:80px 24px;position:relative}
.op-fp .sec.sm{padding:64px 24px}
.op-fp .sec > .wrap{padding:0}
@media(max-width:768px){.op-fp .sec{padding:64px 16px}.op-fp .sec.sm{padding:48px 16px}}

/* Hero */
.op-fp .hero{padding:40px 24px 64px;position:relative}
@media(max-width:980px){.op-fp .hero-grid{grid-template-columns:1fr;gap:48px}}

/* Badge */
.op-fp .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:9999px;background:linear-gradient(135deg,rgba(30,220,255,.10),rgba(0,255,206,.10));border:1px solid rgba(0,255,206,.2);color:var(--op-cyan);font-family:var(--op-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:24px}
.op-fp .badge__dot{width:6px;height:6px;border-radius:50%;background:var(--op-cyan);box-shadow:0 0 8px var(--op-cyan);animation:opFpPulse 2s ease-in-out infinite}
@keyframes opFpPulse{0%,100%{opacity:1}50%{opacity:.5}}
.op-fp .badge.blue{background:linear-gradient(135deg,rgba(30,220,255,.10),rgba(30,220,255,.05));border-color:rgba(30,220,255,.2);color:var(--op-blue)}
.op-fp .badge.blue .badge__dot{background:var(--op-blue);box-shadow:0 0 8px var(--op-blue)}
.op-fp .badge.purple{background:linear-gradient(135deg,rgba(116,84,246,.10),rgba(116,84,246,.05));border-color:rgba(116,84,246,.25);color:#a394ff}
.op-fp .badge.purple .badge__dot{background:#a394ff;box-shadow:0 0 8px #a394ff}
.op-fp .badge.warn{background:linear-gradient(135deg,rgba(255,157,0,.10),rgba(255,157,0,.05));border-color:rgba(255,157,0,.25);color:var(--op-warn)}
.op-fp .badge.warn .badge__dot{background:var(--op-warn);box-shadow:0 0 8px var(--op-warn)}
.op-fp .gradient-text{background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Typography */
.op-fp h1.hero__title{font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1.05;letter-spacing:-1.5px;margin-bottom:20px;color:var(--op-text)}
.op-fp h1.hero__title em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}
.op-fp .hero__sub{font-size:18px;color:var(--op-text-sec);line-height:1.6;margin-bottom:32px;max-width:540px;font-weight:400}
.op-fp .hero__sub strong{color:var(--op-text);font-weight:500}

/* Buttons */
.op-fp .ctas{display:flex;gap:12px;flex-wrap:wrap}
.op-fp .btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.75rem;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));color:#060c16;font-family:var(--op-font);font-size:1rem;font-weight:500;border-radius:9999px;border:none;cursor:pointer;transition:var(--ease);box-shadow:0 2px 20px rgba(0,255,206,.15),0 0 40px rgba(14,165,233,.08);text-decoration:none}
.op-fp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 32px rgba(0,255,206,.25),0 0 60px rgba(14,165,233,.15)}
.op-fp .btn-primary svg{transition:var(--ease);width:16px;height:16px}
.op-fp .btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.5rem;background:transparent;color:var(--op-text-sec);font-family:var(--op-font);font-size:1rem;font-weight:400;border-radius:9999px;border:1px solid rgba(148,163,184,.2);cursor:pointer;transition:var(--ease);text-decoration:none}
.op-fp .btn-ghost:hover{border-color:var(--op-cyan);color:var(--op-cyan);background:linear-gradient(135deg,rgba(30,220,255,.05),rgba(0,255,206,.05))}
.op-fp .btn-ghost svg{width:16px;height:16px}

/* Hero stats */
.op-fp .hero-stats{display:flex;gap:32px;margin-top:48px;padding-top:32px;border-top:1px solid var(--op-border);flex-wrap:wrap}
.op-fp .hero-stat .num{font-family:var(--op-mono);font-size:28px;font-weight:700;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.op-fp .hero-stat .lbl{font-size:12px;color:var(--op-text-muted);margin-top:6px;text-transform:uppercase;letter-spacing:.8px;font-family:var(--op-mono)}

/* Section head */
.op-fp .sec-head{text-align:center;max-width:780px;margin:0 auto 56px}
.op-fp .sec-head .badge{margin:0 auto 20px}
.op-fp .sec-head h2{font-size:clamp(28px,3.5vw,40px);font-weight:500;line-height:1.15;letter-spacing:-1px;margin-bottom:16px;color:var(--op-text)}
.op-fp .sec-head h2 em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}
.op-fp .sec-head p{font-size:17px;color:var(--op-text-sec);line-height:1.6}

/* Two-view (alternating sections) */
.op-fp .two-view{background:transparent;border-top:1px solid var(--op-border);border-bottom:1px solid var(--op-border)}
.op-fp .tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:var(--op-mw);margin:0 auto}
@media(max-width:980px){.op-fp .tv-grid{grid-template-columns:1fr;gap:40px}}
.op-fp .tv-grid.reverse .tv-text{order:2}
@media(max-width:980px){.op-fp .tv-grid.reverse .tv-text{order:0}}
.op-fp .tv-text .role{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:9999px;background:linear-gradient(135deg,rgba(30,220,255,.10),rgba(30,220,255,.05));border:1px solid rgba(30,220,255,.2);color:var(--op-blue);font-family:var(--op-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
.op-fp .tv-text h3{font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-.5px;margin-bottom:18px;color:var(--op-text)}
.op-fp .tv-text h3 em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}
.op-fp .tv-text p{font-size:16px;color:var(--op-text-sec);line-height:1.65;margin-bottom:20px}
.op-fp .tv-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px}
.op-fp .tv-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--op-text)}
.op-fp .tv-list .check{width:20px;height:20px;border-radius:50%;background:rgba(0,255,206,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.op-fp .tv-list .check svg{width:11px;height:11px;color:var(--op-cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.op-fp .tv-list b{background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}

/* CTA */
.op-fp .cta-band{background:transparent;border-top:1px solid var(--op-border)}
.op-fp .cta-inner{text-align:center;max-width:960px;margin:0 auto;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:var(--op-r-xl);padding:56px 40px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06)}
.op-fp .cta-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan))}
.op-fp .cta-inner .badge{margin-bottom:20px}
.op-fp .cta-inner h2{font-size:clamp(28px,3.5vw,42px);font-weight:500;line-height:1.15;letter-spacing:-1px;margin-bottom:18px;color:var(--op-text)}
.op-fp .cta-inner h2 em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}
.op-fp .cta-inner p{font-size:17px;color:var(--op-text-sec);margin-bottom:32px;line-height:1.6}
.op-fp .cta-foot{margin-top:24px;font-size:13px;color:var(--op-text-muted);font-family:var(--op-mono)}

/* ═══ .op-sp wrapper (integration / partner pages) ═══ */
.op-sp{padding-top:40px}
.op-sp .hero{min-height:80vh;display:flex;align-items:center}
.op-sp .hero>.wrap,.op-sp .hero>.container{width:100%}

/* Module grid (shared by .op-sp and .op-fp) */
.op-sp .mod-grid,.op-fp .mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--op-mw);margin:0 auto}
@media(max-width:980px){.op-sp .mod-grid,.op-fp .mod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.op-sp .mod-grid,.op-fp .mod-grid{grid-template-columns:1fr}}
.op-sp .mod-card,.op-fp .mod-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--op-r-lg);padding:24px;transition:all .22s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06);display:flex;flex-direction:column}
.op-sp .mod-card:hover,.op-fp .mod-card:hover{border-color:rgba(0,255,206,.15);transform:translateY(-2px)}
.op-sp .mod-h,.op-fp .mod-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.op-sp .mod-icon,.op-fp .mod-icon{width:36px;height:36px;border-radius:var(--op-r-md);background:linear-gradient(135deg,rgba(30,220,255,.10),rgba(0,255,206,.10));color:var(--op-cyan);display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,255,206,.2);flex-shrink:0}
.op-sp .mod-icon svg,.op-fp .mod-icon svg{width:18px;height:18px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-sp .mod-name,.op-fp .mod-name{font-size:16px;font-weight:600;color:var(--op-text);letter-spacing:-.2px}
.op-sp .sec-head{text-align:center;max-width:780px;margin:0 auto 56px}
.op-sp .sec-head .badge{margin:0 auto 20px}
.op-sp .sec-head h2{font-size:clamp(28px,3.5vw,40px);font-weight:500;line-height:1.15;letter-spacing:-1px;margin-bottom:16px;color:var(--op-text)}
.op-sp .sec-head h2 em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}
.op-sp .sec-head p{font-size:17px;color:var(--op-text-sec);line-height:1.6}
.op-sp .badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(30,220,255,.15),rgba(0,255,206,.12));border:1px solid rgba(0,255,206,.3);color:var(--op-cyan);font-family:var(--op-mono);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 14px;border-radius:9999px;width:fit-content;margin-bottom:24px}
.op-sp .badge__dot{width:6px;height:6px;border-radius:50%;background:var(--op-cyan);box-shadow:0 0 8px var(--op-cyan)}

/* ═══ .op-biz Design System (Business tier pages) ═══
   Shared by: enterprise-business, mid-tier-businesses, small-business, micro-business
   Each page sets --acc, --acc-r/g/b and --biz-sec via inline <style> */

.op-biz{font-family:var(--op-font);font-weight:400;color:var(--op-text-sec);line-height:1.65;background:transparent;-webkit-font-smoothing:antialiased;--biz-sec:var(--op-cyan);padding-top:40px}
.op-biz *,.op-biz *::before,.op-biz *::after{box-sizing:border-box;margin:0;padding:0}
.op-biz .op-cta{padding:80px 24px 120px}
.op-biz .op-cta > div{max-width:var(--op-mw);margin:0 auto}
.op-biz .op-cta__card{max-width:960px;margin:0 auto;background:rgba(255,255,255,0.04);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,0.1);border-radius:var(--op-r-xl);padding:56px 48px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06)}
.op-biz .op-cta__card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--op-blue),var(--op-cyan))}
.op-biz .op-cta__eyebrow{font-family:var(--op-mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--op-text-muted);margin-bottom:16px}
.op-biz .op-cta__title{font-size:clamp(1.6rem,2.8vw,2rem);font-weight:500;color:#fff;letter-spacing:-.02em;margin-bottom:16px}
.op-biz .op-cta__title em{font-style:normal;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-biz .op-cta__desc{font-size:.95rem;color:var(--op-text-muted);line-height:1.7;max-width:520px;margin:0 auto 32px}
.op-biz .op-cta__buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.op-biz .op-cta__btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--op-blue),var(--op-cyan));color:#060c16;font-family:var(--op-font);font-size:1rem;font-weight:500;padding:.95rem 1.75rem;border-radius:100px;text-decoration:none;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 20px rgba(0,255,206,.15),0 0 40px rgba(14,165,233,.08)}
.op-biz .op-cta__btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(14,165,233,.1),0 0 60px rgba(0,255,206,.06)}
.op-biz .op-cta__btn-primary svg{width:16px;height:16px;transition:transform .2s}
.op-biz .op-cta__btn-primary:hover svg{transform:translateX(3px)}
.op-biz .op-cta__btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--op-text-sec);font-family:var(--op-font);font-size:1rem;font-weight:400;padding:.95rem 1.5rem;border-radius:100px;text-decoration:none;border:1px solid rgba(148,163,184,.2);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.op-biz .op-cta__btn-ghost:hover{border-color:var(--op-cyan);color:var(--op-cyan);background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(0,255,206,.06))}

/* ── Hero ── */
.op-biz .hero{position:relative;min-height:80vh;display:flex;align-items:center;padding:40px 2rem;overflow:hidden}
.op-biz .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 30% 50%,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.07),transparent),radial-gradient(ellipse 45% 55% at 75% 55%,rgba(0,255,206,.05),transparent);pointer-events:none;z-index:0}
.op-biz .hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(var(--acc-r),var(--acc-g),var(--acc-b),.02) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.02) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 10%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 10%,transparent 65%);pointer-events:none;z-index:0}
.op-biz .hero__inner{position:relative;z-index:1;max-width:var(--op-mw);margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.op-biz .hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.op-biz .badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.15),rgba(0,255,206,.12));border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.3);color:var(--acc);font-family:var(--op-mono);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 14px;border-radius:9999px;animation:opUp .6s ease-out both}
.op-biz .badge__dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.op-biz .hero__title{font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1.05;color:var(--op-text);letter-spacing:-1.5px;margin-bottom:22px;animation:opUp .6s ease-out .1s both}
.op-biz .hero__title .gradient-text{background:linear-gradient(135deg,var(--acc),var(--biz-sec));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-biz .hero__sub{font-size:1.15rem;line-height:1.75;color:var(--op-text-muted);max-width:520px;animation:opUp .6s ease-out .2s both}
.op-biz .hero__sub strong{color:var(--op-white);font-weight:500}
.op-biz .ctas{display:flex;gap:1rem;align-items:center;margin-top:.5rem;animation:opUp .6s ease-out .3s both}
.op-biz .btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--acc),var(--biz-sec));color:#060c16;font-family:var(--op-font);font-size:1rem;font-weight:500;padding:.85rem 1.6rem;border-radius:9999px;text-decoration:none;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 20px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.15),0 0 40px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.08)}
.op-biz .btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.15),0 0 60px rgba(0,255,206,.06)}
.op-biz .btn-primary svg{width:16px;height:16px;transition:transform .2s}
.op-biz .btn-primary:hover svg{transform:translateX(3px)}
.op-biz .btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--op-text-sec);font-family:var(--op-font);font-size:1rem;font-weight:400;padding:.85rem 1.4rem;border-radius:9999px;text-decoration:none;border:1px solid rgba(148,163,184,.2);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.op-biz .btn-ghost:hover{border-color:var(--acc);color:var(--acc);background:linear-gradient(135deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.06),rgba(0,255,206,.06))}
.op-biz .btn-ghost svg{width:16px;height:16px}

/* ── Hero visual ── */
.op-biz .hero__visual{position:relative;animation:opUp .8s ease-out .3s both}
.op-biz .visual-stack{display:flex;flex-direction:column;gap:1rem;padding:2rem}
.op-biz .visual-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.08);border-radius:var(--op-r-lg);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:.85rem;transition:border-color .3s,box-shadow .3s}
.op-biz .visual-card:hover{border-color:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.2);box-shadow:0 0 20px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.06)}
.op-biz .visual-card__icon{width:44px;height:44px;border-radius:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.08);border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.15);color:var(--acc)}
.op-biz .visual-card__icon svg{width:22px;height:22px}
.op-biz .visual-card__info{display:flex;flex-direction:column;gap:2px}
.op-biz .visual-card__label{font-size:.88rem;font-weight:500;color:var(--op-white)}
.op-biz .visual-card__detail{font-size:.72rem;font-family:var(--op-mono);color:var(--op-text-muted)}
.op-biz .visual-card__tag{margin-left:auto;font-size:.7rem;font-family:var(--op-mono);font-weight:500;padding:.25rem .6rem;border-radius:var(--op-r-full);white-space:nowrap;color:var(--acc);background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.08);border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.18)}
.op-biz .hub-badge{display:flex;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(135deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.12),rgba(0,255,206,.12));border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.3);border-radius:var(--op-r-lg);padding:.75rem 1.5rem;margin:.5rem auto;width:fit-content;animation:opBizPulse 4s ease-in-out infinite}
.op-biz .hub-badge__icon{width:28px;height:28px;color:var(--acc)}
.op-biz .hub-badge__icon svg{width:28px;height:28px}
.op-biz .hub-badge__text{font-family:var(--op-mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--acc)}

/* ── Shared section styles ── */
.op-biz .section-header{text-align:center;max-width:680px;margin:0 auto 4rem}
.op-biz .section-header__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--op-r-full,9999px);background:linear-gradient(135deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.12),rgba(0,255,206,.08));border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.25);color:var(--acc);font-family:var(--op-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}
.op-biz .section-header__eyebrow--red{color:var(--op-red)}
.op-biz .section-header__eyebrow--acc{color:var(--acc)}
.op-biz .section-header__eyebrow--blue{color:var(--op-blue)}
.op-biz .section-header__eyebrow--green{color:var(--op-green)}
.op-biz .section-header__title{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:500;color:var(--op-white);line-height:1.2;letter-spacing:-.02em;margin-bottom:1rem}
.op-biz .section-header__title em{font-style:normal;background:linear-gradient(135deg,var(--acc),var(--biz-sec));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-biz .section-header__desc{font-size:1.05rem;color:var(--op-text-muted);line-height:1.7}

/* ── Pain ── */
.op-biz .pain{position:relative;padding:6rem 2rem}
.op-biz .pain__inner{max-width:var(--op-mw);margin:0 auto}
.op-biz .pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.op-biz .pain-card{background:rgba(255,255,255,0.03);border:1px solid rgba(239,68,68,.08);border-radius:var(--op-r-xl);padding:2rem;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.op-biz .pain-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 10%,rgba(239,68,68,.4),rgba(245,158,11,.4),transparent 90%);opacity:0;transition:opacity .3s}
.op-biz .pain-card:hover{border-color:rgba(239,68,68,.15);transform:translateY(-2px)}
.op-biz .pain-card:hover::before{opacity:1}
.op-biz .pain-card__scenario{font-family:var(--op-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--op-red);margin-bottom:.75rem;opacity:.8}
.op-biz .pain-card__title{font-size:1.1rem;font-weight:500;color:var(--op-white);margin-bottom:.6rem;line-height:1.3}
.op-biz .pain-card__desc{font-size:.92rem;color:var(--op-text-muted);line-height:1.65}

/* ── Resolution ── */
.op-biz .resolution{position:relative;padding:6rem 2rem}
.op-biz .resolution__inner{max-width:var(--op-mw);margin:0 auto}
.op-biz .resolution__statement{text-align:center;max-width:740px;margin:0 auto 4rem;padding:3rem;background:linear-gradient(135deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.04),rgba(0,255,206,.04));border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.12);border-radius:var(--op-r-xl);position:relative}
.op-biz .resolution__statement::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc),var(--biz-sec),transparent)}
.op-biz .resolution__statement-label{font-family:var(--op-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:.75rem}
.op-biz .resolution__statement-text{font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:500;color:var(--op-white);line-height:1.4;letter-spacing:-.01em}
.op-biz .resolution__statement-text em{font-style:normal;background:linear-gradient(135deg,var(--acc),var(--biz-sec));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-biz .ba-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:stretch}
.op-biz .ba-col{display:flex;flex-direction:column;gap:1rem}
.op-biz .ba-col__header{font-family:var(--op-mono);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding-bottom:.75rem;border-bottom:1px solid;margin-bottom:.25rem}
.op-biz .ba-col__header--before{color:var(--op-red);border-color:rgba(239,68,68,.2)}
.op-biz .ba-col__header--after{color:var(--acc);border-color:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.2)}
.op-biz .ba-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:100px;transition:background .2s}
.op-biz .ba-item:hover{background:rgba(255,255,255,.02)}
.op-biz .ba-item__icon{width:32px;height:32px;border-radius:var(--op-r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.op-biz .ba-item__icon svg{width:16px;height:16px}
.op-biz .ba-item__icon--before{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.12);color:var(--op-red)}
.op-biz .ba-item__icon--after{background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.06);border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.12);color:var(--acc)}
.op-biz .ba-item__text{font-size:.92rem;color:var(--op-text-muted);line-height:1.55}
.op-biz .ba-item__text strong{color:var(--op-white);font-weight:500}
.op-biz .ba-divider{width:2px;border-radius:2px;position:relative;background:linear-gradient(to bottom,transparent,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.3),rgba(0,255,206,.3),transparent)}
.op-biz .ba-divider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--op-bg-dark);border:2px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.3);box-shadow:0 0 16px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.1)}

/* ── Features ── */
.op-biz .features{position:relative;padding:6rem 2rem}
.op-biz .features__inner{max-width:var(--op-mw);margin:0 auto}
.op-biz .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.op-biz .feature-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.06);border-radius:var(--op-r-xl);padding:2.25rem;position:relative;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.op-biz .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--acc),var(--biz-sec));opacity:0;transition:opacity .3s}
.op-biz .feature-card:hover{border-color:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.18);transform:translateY(-3px);box-shadow:0 4px 24px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.06)}
.op-biz .feature-card:hover::before{opacity:1}
.op-biz .feature-card__icon{width:52px;height:52px;border-radius:100px;display:flex;align-items:center;justify-content:center;background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.08);border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.12);color:var(--acc);margin-bottom:1.25rem;transition:box-shadow .3s}
.op-biz .feature-card:hover .feature-card__icon{box-shadow:0 0 20px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.08)}
.op-biz .feature-card__icon svg{width:26px;height:26px}
.op-biz .feature-card__title{font-size:1.1rem;font-weight:500;color:var(--op-white);margin-bottom:.6rem;line-height:1.3}
.op-biz .feature-card__desc{font-size:.9rem;color:var(--op-text-muted);line-height:1.6;margin-bottom:1rem}
.op-biz .feature-card__benefits{display:flex;flex-direction:column;gap:.4rem}
.op-biz .feature-benefit{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--op-text-muted)}
.op-biz .feature-benefit svg{width:14px;height:14px;color:var(--acc);flex-shrink:0}

/* ── Journey ── */
.op-biz .journey{position:relative;padding:6rem 2rem}
.op-biz .journey__inner{max-width:var(--op-mw);margin:0 auto}
.op-biz .journey-track{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.op-biz .journey-track::before{content:'';position:absolute;top:52px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.3),rgba(0,255,206,.3));z-index:0}
.op-biz .journey-step{text-align:center;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.op-biz .journey-step__number{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--op-mono);font-size:.85rem;font-weight:600;color:var(--acc);background:var(--op-bg-dark);border:2px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.3);box-shadow:0 0 16px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.1);transition:box-shadow .3s,border-color .3s}
.op-biz .journey-step:hover .journey-step__number{border-color:var(--acc);box-shadow:0 0 24px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.2)}
.op-biz .journey-step__icon{width:48px;height:48px;border-radius:100px;background:rgba(255,255,255,0.03);border:1px solid rgba(148,163,184,.08);display:flex;align-items:center;justify-content:center;color:var(--acc);transition:border-color .3s}
.op-biz .journey-step:hover .journey-step__icon{border-color:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.2)}
.op-biz .journey-step__icon svg{width:22px;height:22px}
.op-biz .journey-step__label{font-size:.92rem;font-weight:500;color:var(--op-white)}
.op-biz .journey-step__desc{font-size:.8rem;color:var(--op-text-muted);line-height:1.5;max-width:180px}

/* ── Outcomes ── */
.op-biz .outcomes{position:relative;padding:6rem 2rem}
.op-biz .outcomes__inner{max-width:var(--op-mw);margin:0 auto}
.op-biz .outcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;max-width:960px;margin:0 auto}
.op-biz .outcome-card{background:rgba(255,255,255,0.03);border:1px solid rgba(148,163,184,.06);border-radius:var(--op-r-xl);padding:2rem 1.5rem;text-align:center;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.op-biz .outcome-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--acc),var(--biz-sec));opacity:0;transition:opacity .3s}
.op-biz .outcome-card:hover{border-color:rgba(var(--acc-r),var(--acc-g),var(--acc-b),.15);transform:translateY(-2px)}
.op-biz .outcome-card:hover::before{opacity:1}
.op-biz .outcome-card__metric{font-family:var(--op-mono);font-size:2rem;font-weight:600;background:linear-gradient(135deg,var(--acc),var(--biz-sec));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem}
.op-biz .outcome-card__label{font-size:.85rem;font-weight:500;color:var(--op-white);margin-bottom:.4rem}
.op-biz .outcome-card__desc{font-size:.8rem;color:var(--op-text-muted);line-height:1.5}

/* ── CTA ── */
.op-biz .cta-section{position:relative;padding:6rem 2rem}
.op-biz .cta-banner{max-width:860px;margin:0 auto;text-align:center;padding:4rem 3rem;background:linear-gradient(135deg,rgba(var(--acc-r),var(--acc-g),var(--acc-b),.06),rgba(0,255,206,.06));border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),.15);border-radius:var(--op-r-xl);position:relative;overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.op-biz .cta-banner::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc),var(--biz-sec),transparent)}
.op-biz .cta-banner__title{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:500;color:var(--op-white);line-height:1.25;margin-bottom:1rem;letter-spacing:-.02em}
.op-biz .cta-banner__title em{font-style:normal;background:linear-gradient(135deg,var(--acc),var(--biz-sec));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.op-biz .cta-banner__desc{font-size:1.05rem;color:var(--op-text-muted);line-height:1.7;max-width:560px;margin:0 auto 2rem}
.op-biz .cta-banner__actions{display:flex;gap:1rem;justify-content:center;align-items:center}

/* ── Keyframes ── */
@keyframes opBizPulse{0%,100%{box-shadow:0 0 12px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.08)}50%{box-shadow:0 0 28px rgba(var(--acc-r),var(--acc-g),var(--acc-b),.18)}}

/* ── Responsive ── */
@media(max-width:1024px){
  .op-biz .hero__inner{grid-template-columns:1fr;gap:3rem}
  .op-biz .hero__visual{max-width:540px;margin:0 auto}
  .op-biz .pain-grid{grid-template-columns:1fr 1fr}
  .op-biz .ba-grid{grid-template-columns:1fr;gap:2rem}
  .op-biz .ba-divider{display:none}
  .op-biz .feature-grid{grid-template-columns:1fr 1fr}
  .op-biz .journey-track{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .op-biz .journey-track::before{display:none}
  .op-biz .outcome-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .op-biz .hero{padding:3rem 1.25rem}
  .op-biz .ctas{flex-direction:column;align-items:stretch}
  .op-biz .btn-primary,.op-biz .btn-ghost{justify-content:center}
  .op-biz .pain-grid{grid-template-columns:1fr}
  .op-biz .feature-grid{grid-template-columns:1fr}
  .op-biz .journey-track{grid-template-columns:1fr 1fr}
  .op-biz .outcome-grid{grid-template-columns:1fr}
  .op-biz .cta-banner{padding:3rem 1.5rem}
  .op-biz .cta-banner__actions{flex-direction:column;align-items:stretch}
}