/* ============================================================
   Phase L24 — Premium marketing-site utilities (separate file
   to avoid touching the curated opsiq-saas-site.css). Loaded
   via _site.php after the main site stylesheet so these classes
   override or extend without conflicts. Light + dark themed.
   ============================================================ */

/* About hero — softer gradient on the title */
.op-about-hero{padding:88px 0 32px}
.op-about-hero .op-page-title{font-size:54px;line-height:1.05;letter-spacing:-.02em;background:linear-gradient(120deg,var(--op-text) 0%,var(--op-violet) 60%,var(--op-cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:760px){.op-about-hero .op-page-title{font-size:36px}}

/* Stat band — premium replaces the simple grid in the base sheet */
.op-section-tight .op-stat-line{padding:28px 30px;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:24px;backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow2);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.op-section-tight .op-stat-line .op-stat{padding:0;background:transparent;border:0;text-align:left;display:flex;flex-direction:column;gap:4px}
.op-section-tight .op-stat-line .op-stat b{font-size:34px;font-weight:900;letter-spacing:-.02em;background:linear-gradient(135deg,var(--op-blue),var(--op-violet));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Split section — image-card + copy. Used on about, developers */
.op-split{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:start}
@media(max-width:980px){.op-split{grid-template-columns:1fr;gap:26px}}
.op-split-copy h2{font-size:38px;letter-spacing:-.018em;line-height:1.1;margin:.4em 0 .6em}
.op-split-copy p{color:var(--op-muted);font-size:16px;line-height:1.7;margin:0 0 14px;max-width:62ch}
.op-split-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.op-split-card{background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:24px;overflow:hidden;backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow);position:relative}
.op-split-card::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 200px at 0% 0%,rgba(124,58,237,.18),transparent 60%),radial-gradient(800px 200px at 100% 100%,rgba(6,182,212,.16),transparent 60%);pointer-events:none}
.op-split-list{padding:18px 20px;position:relative;z-index:1}
.op-split-row{padding:14px 4px;border-bottom:1px dashed var(--op-stroke);display:flex;flex-direction:column;gap:3px}
.op-split-row:last-child{border-bottom:0}
.op-split-row b{font-size:14px;color:var(--op-text)}
.op-split-row span{font-size:12.5px;color:var(--op-muted)}

/* Mission card */
.op-mission-card{padding:42px 44px;background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(6,182,212,.04));border:1px solid var(--op-stroke)}
.op-mission-card h2{font-size:32px;line-height:1.2;letter-spacing:-.015em;margin:.4em 0 .7em}
.op-mission-card p{color:var(--op-muted);font-size:15.5px;line-height:1.75;margin:0 0 14px;max-width:72ch}
html[data-theme="dark"] .op-mission-card{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(6,182,212,.10))}

/* Section head wrapper */
.op-section-head{text-align:center;max-width:760px;margin:0 auto 28px}
.op-section-head h2{font-size:36px;letter-spacing:-.018em;line-height:1.15;margin:.4em 0 .5em}
.op-section-head p{color:var(--op-muted);font-size:15.5px;line-height:1.7}

/* Timeline rail */
.op-timeline-rail{display:grid;gap:14px;position:relative;padding-left:24px}
.op-timeline-rail::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--op-violet),var(--op-cyan));border-radius:2px;opacity:.4}
.op-time-step{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;position:relative}
.op-time-step::before{content:"";position:absolute;left:-21px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--op-bg);border:3px solid var(--op-violet);box-shadow:0 0 0 4px rgba(124,58,237,.15)}
.op-time-year{font-weight:900;color:var(--op-violet);font-size:14px;letter-spacing:.02em;padding-top:18px}
.op-time-card h3{margin:0 0 6px;font-size:17px}
.op-time-card p{color:var(--op-muted)}
@media(max-width:680px){.op-time-step{grid-template-columns:1fr;gap:6px}.op-time-year{padding-top:0;font-size:13px}}

/* Leader cards */
.op-leader{text-align:center;display:flex;flex-direction:column;align-items:center}
.op-leader-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--op-violet),var(--op-cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;margin-bottom:14px;box-shadow:0 8px 24px rgba(124,58,237,.28)}
.op-leader h3{margin:0 0 6px;font-size:17px}
.op-leader p{color:var(--op-muted)}

/* Industry / use-case card with accent strip */
.op-use-card{position:relative;overflow:hidden;padding:26px;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:22px;backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow2);display:flex;flex-direction:column;gap:12px;min-height:240px;transition:transform .25s ease,box-shadow .25s ease}
.op-use-card:hover{transform:translateY(-3px);box-shadow:var(--op-shadow)}
.op-use-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--op-blue),var(--op-violet),var(--op-cyan))}
.op-use-card h3{margin:0;font-size:19px}
.op-use-card .op-use-icon{font-size:28px;line-height:1}
.op-use-card .op-use-bullets{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.op-use-card .op-use-bullets li{padding-left:22px;position:relative;color:var(--op-muted);font-size:13.5px;line-height:1.55}
.op-use-card .op-use-bullets li::before{content:"";position:absolute;left:6px;top:8px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--op-cyan),var(--op-violet))}

/* Quote / testimonial card */
.op-quote{padding:28px;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:22px;backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow2);position:relative;display:flex;flex-direction:column;gap:18px}
.op-quote::before{content:"\201C";position:absolute;top:8px;left:18px;font-size:64px;line-height:1;font-family:Georgia,serif;color:var(--op-violet);opacity:.18}
.op-quote-body{font-size:16px;line-height:1.7;color:var(--op-text);position:relative;z-index:1}
.op-quote-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--op-stroke);padding-top:14px}
.op-quote-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--op-violet),var(--op-cyan));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.op-quote-name{font-weight:800;font-size:14px}
.op-quote-role{color:var(--op-muted);font-size:12px}

/* Code panel — for developers page */
.op-code-block{background:#0b1020;border:1px solid rgba(148,163,184,.18);border-radius:18px;overflow:hidden;font-family:"IBM Plex Mono",Consolas,monospace;color:#e0e7ff;box-shadow:var(--op-shadow2)}
.op-code-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(148,163,184,.18);background:rgba(0,0,0,.18)}
.op-code-lang{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a5b4fc}
.op-code-actions{display:flex;gap:8px}
.op-code-tab{background:transparent;border:1px solid rgba(148,163,184,.22);color:#cbd5e1;font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;font-family:inherit}
.op-code-tab.active{background:rgba(124,58,237,.22);color:#fff;border-color:rgba(124,58,237,.55)}
.op-code-body{padding:18px 20px;font-size:13px;line-height:1.65;overflow-x:auto;white-space:pre;max-height:480px;overflow-y:auto;color:#e0e7ff}
.op-code-body .kw{color:#c084fc}
.op-code-body .str{color:#86efac}
.op-code-body .num{color:#fde68a}
.op-code-body .com{color:#64748b;font-style:italic}

/* Comparison table — pricing */
.op-compare-wrap{overflow-x:auto;border-radius:20px}
.op-compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:20px;overflow:hidden;backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow2);min-width:680px}
.op-compare th,.op-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--op-stroke);font-size:14px}
.op-compare th{background:rgba(124,58,237,.06);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--op-muted)}
.op-compare th:not(:first-child),.op-compare td:not(:first-child){text-align:center}
.op-compare tbody tr:last-child td{border-bottom:0}
.op-compare td.yes{color:var(--op-green);font-weight:800}
.op-compare td.no{color:var(--op-muted);opacity:.6}
.op-compare-pop{background:linear-gradient(180deg,rgba(124,58,237,.08),transparent)}

/* FAQ accordion (details element) */
.op-faq-acc{display:flex;flex-direction:column;gap:10px}
.op-faq-acc details{background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:16px;padding:16px 22px;box-shadow:var(--op-shadow2)}
.op-faq-acc summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.op-faq-acc summary::-webkit-details-marker{display:none}
.op-faq-acc summary::after{content:"+";font-size:22px;font-weight:600;color:var(--op-violet);line-height:1;transition:transform .25s}
.op-faq-acc details[open] summary::after{transform:rotate(45deg)}
.op-faq-acc details p{color:var(--op-muted);margin:12px 0 0;line-height:1.7;font-size:14px}

/* Trust grid: large badges */
.op-trust-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.op-trust-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 16px;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:20px;box-shadow:var(--op-shadow2)}
.op-trust-badge .op-tb-icon{font-size:30px}
.op-trust-badge h4{margin:0;font-size:14px;font-weight:800}
.op-trust-badge p{color:var(--op-muted);font-size:12px;margin:0;line-height:1.55}

/* Customer logos strip */
.op-logo-strip{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:center;opacity:.7;padding:18px 0}
.op-logo-strip span{font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--op-muted2)}

/* Premium two-column with image */
.op-feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:40px 0;border-bottom:1px solid var(--op-stroke)}
.op-feature-row:last-child{border-bottom:0}
.op-feature-row.flip{direction:rtl}
.op-feature-row.flip>*{direction:ltr}
@media(max-width:980px){.op-feature-row,.op-feature-row.flip{grid-template-columns:1fr;direction:ltr;padding:24px 0}}
.op-feature-row h3{font-size:30px;letter-spacing:-.015em;line-height:1.15;margin:.3em 0 .5em}
.op-feature-row p{color:var(--op-muted);font-size:15.5px;line-height:1.7;margin:0 0 14px}
.op-feature-row .op-mock{background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:22px;padding:22px;box-shadow:var(--op-shadow);backdrop-filter:var(--op-blur);min-height:260px}
.op-feature-row .op-mock-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--op-stroke);font-size:13px}
.op-feature-row .op-mock-row:last-child{border-bottom:0}
.op-feature-row .op-mock-row b{color:var(--op-text)}
.op-feature-row .op-mock-row span{color:var(--op-muted)}

/* Resource / blog card */
.op-res-card{background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:18px;backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow2);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.op-res-card:hover{transform:translateY(-2px);box-shadow:var(--op-shadow)}
.op-res-thumb{height:140px;background:linear-gradient(135deg,var(--op-violet),var(--op-cyan));display:flex;align-items:center;justify-content:center;font-size:42px;color:#fff;opacity:.92}
.op-res-body{padding:18px 20px}
.op-res-body h4{margin:0 0 6px;font-size:16px}
.op-res-body p{color:var(--op-muted);font-size:13px;margin:0}

/* Premium hero band */
.op-hero-band{padding:64px 56px;border-radius:32px;background:linear-gradient(135deg,#0c1228,#1d1850 50%,#0a233f);color:#f8fafc;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--op-shadow)}
.op-hero-band::before{content:"";position:absolute;inset:-40%;background:radial-gradient(700px 400px at 80% 30%,rgba(124,58,237,.4),transparent 60%),radial-gradient(700px 400px at 10% 80%,rgba(6,182,212,.3),transparent 60%);pointer-events:none}
@media(max-width:880px){.op-hero-band{grid-template-columns:1fr;padding:42px 32px}}
.op-hero-band h2{font-size:34px;margin:0 0 12px;letter-spacing:-.015em}
.op-hero-band p{color:#cdd6fa;font-size:15.5px;line-height:1.7;margin:0}
.op-hero-band .op-band-actions{position:relative;z-index:1}

/* Sticky-feeling section dividers used on long pages */
.op-divider{height:1px;background:linear-gradient(90deg,transparent,var(--op-stroke) 30%,var(--op-stroke) 70%,transparent);margin:32px 0;border:0}


/* Footer — wider grid for the 6 link columns + tighter type */
.op-footer-main{grid-template-columns:1.4fr repeat(6,1fr)!important;gap:24px!important}
.op-footer-col{min-width:0}
.op-footer-links a{font-size:13px}
@media(max-width:1180px){.op-footer-main{grid-template-columns:1.4fr repeat(3,1fr)!important}}
@media(max-width:760px){.op-footer-main{grid-template-columns:1fr!important}}

/* ============================================================
   Mobile menu — premium 3-bar toggle + full-screen drawer
   ============================================================ */

/* Animated hamburger button */
.op-mobile-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--op-stroke);
  background: var(--op-surface);
  backdrop-filter: var(--op-blur);
  cursor: pointer;
  position: relative;
  transition: all .25s ease;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  z-index: 2147483030;
}
.op-mobile-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--op-text);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(0.65, 0, 0.35, 1), opacity .25s ease;
  transform-origin: center;
}
.op-mobile-btn:hover {
  border-color: var(--op-violet);
  box-shadow: 0 8px 22px rgba(124,58,237,.18);
}
.op-mobile-btn[aria-expanded="true"] {
  background: linear-gradient(135deg,var(--op-violet),var(--op-cyan));
  border-color: transparent;
}
.op-mobile-btn[aria-expanded="true"] span {
  background: #fff;
}
.op-mobile-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.op-mobile-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.op-mobile-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer — full screen overlay */
.op-mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(7,12,28,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  z-index: 2147483020;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease, backdrop-filter .3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: block;
}
html[data-theme="light"] .op-mobile-menu { background: rgba(247,249,255,0); }
.op-mobile-menu.open {
  opacity: 1;
  visibility: visible;
  background: rgba(7,12,28,.92);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
html[data-theme="light"] .op-mobile-menu.open { background: rgba(247,249,255,.96); }

.op-mm-inner {
  width: min(560px, 92vw);
  margin: 0 auto;
  padding: 110px 22px 60px;
  display: grid;
  gap: 22px;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .35s ease;
}
.op-mobile-menu.open .op-mm-inner {
  transform: translateY(0);
  opacity: 1;
  transition-delay: .08s;
}

.op-mm-section {
  background: var(--op-surface);
  border: 1px solid var(--op-stroke);
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: var(--op-shadow2);
  backdrop-filter: var(--op-blur);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-mm-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--op-violet);
  padding: 4px 6px 10px;
  display: block;
}

.op-mm-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--op-text);
  font-weight: 700;
  font-size: 15px;
  transition: background .18s ease, transform .18s ease;
  border: 1px solid transparent;
}
.op-mm-link span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg,rgba(124,58,237,.14),rgba(6,182,212,.10));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.op-mm-link:hover, .op-mm-link:active {
  background: linear-gradient(135deg,rgba(124,58,237,.10),rgba(6,182,212,.06));
  border-color: var(--op-stroke);
  transform: translateX(4px);
}

.op-mm-bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.op-mm-theme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--op-stroke);
  background: var(--op-surface);
  color: var(--op-text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: .2s;
  flex: 1;
}
.op-mm-theme:hover { border-color: var(--op-violet); transform: translateY(-1px); }
.op-mm-theme svg { width: 18px; height: 18px; }
.op-mm-theme-text { font-size: 13px; }
.op-mm-bottom .op-btn { flex: 1; justify-content: center }

/* Lock body scroll when drawer is open */
body.op-mm-open { overflow: hidden; }

/* Show the drawer trigger only on small screens */
@media (max-width: 1040px) {
  .op-mobile-btn { display: inline-flex; }
}
/* Hide the inline link list that the original CSS rendered when .open was set */
.op-mobile-menu.open[data-op-mobile-menu] > a { display: none !important; }


/* ============================================================
   PREMIUM DESIGN SYSTEM — 3D, motion, bento, marquee, depth
   ============================================================ */

/* === 3D stage with layered screen mocks === */
.op-stage{position:relative;perspective:1600px;perspective-origin:50% 30%;min-height:540px;transform-style:preserve-3d}
.op-stage-screen{position:absolute;border-radius:20px;background:linear-gradient(145deg,var(--op-surface),var(--op-surface2));border:1px solid var(--op-stroke);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 50px 120px rgba(15,23,42,.32),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.op-stage-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 32%,rgba(124,58,237,.12) 70%,rgba(6,182,212,.16));pointer-events:none;mix-blend-mode:overlay}
.op-stage-screen.s1{width:60%;left:0;top:0;transform:rotateY(-12deg) rotateX(6deg) translateZ(40px);z-index:3}
.op-stage-screen.s2{width:52%;right:0;top:14%;transform:rotateY(14deg) rotateX(-3deg) translateZ(0);z-index:2}
.op-stage-screen.s3{width:44%;left:22%;bottom:0;transform:rotateY(-4deg) rotateX(-8deg) translateZ(-50px);z-index:1;opacity:.92}
.op-stage:hover .op-stage-screen.s1{transform:rotateY(-8deg) rotateX(3deg) translateZ(60px) translateY(-8px)}
.op-stage:hover .op-stage-screen.s2{transform:rotateY(10deg) rotateX(-1deg) translateZ(20px) translateY(-4px)}
.op-stage:hover .op-stage-screen.s3{transform:rotateY(-2deg) rotateX(-5deg) translateZ(-30px)}
.op-ss-bar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--op-stroke);font-size:11px;color:var(--op-muted2);font-weight:700;letter-spacing:.04em}
.op-ss-bar i{width:9px;height:9px;border-radius:50%}
.op-ss-body{padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.op-ss-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(99,102,241,.08);font-size:12px;font-weight:700}
.op-ss-row span{color:var(--op-muted);font-weight:600}
.op-ss-stat{font-size:26px;font-weight:950;letter-spacing:-.04em;background:linear-gradient(135deg,var(--op-blue),var(--op-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:1080px){
  .op-stage{min-height:auto;perspective:none}
  .op-stage-screen.s1,.op-stage-screen.s2,.op-stage-screen.s3{transform:none!important;position:relative!important;width:100%!important;margin-bottom:14px;inset:auto!important;box-shadow:var(--op-shadow2);opacity:1}
}

/* === Marquee logo strip === */
.op-marquee{position:relative;overflow:hidden;border-top:1px solid var(--op-stroke);border-bottom:1px solid var(--op-stroke);background:var(--op-surface2);backdrop-filter:var(--op-blur);padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.op-marquee-track{display:inline-flex;gap:60px;white-space:nowrap;animation:opMarquee 32s linear infinite;padding-right:60px}
.op-marquee:hover .op-marquee-track{animation-play-state:paused}
.op-marquee span{font-weight:900;letter-spacing:-.01em;font-size:22px;color:var(--op-muted2);flex-shrink:0;display:inline-flex;align-items:center;gap:8px}
.op-marquee span::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--op-violet),var(--op-cyan));display:inline-block}
@keyframes opMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === Bento grid (mixed sizes, premium hover) === */
.op-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:14px}
.op-bento-cell{position:relative;border:1px solid var(--op-stroke);border-radius:22px;background:linear-gradient(145deg,var(--op-surface),var(--op-surface2));backdrop-filter:var(--op-blur);box-shadow:var(--op-shadow2);padding:24px;display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s}
.op-bento-cell::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at var(--mx,50%) var(--my,50%),rgba(124,58,237,.18),transparent 40%);opacity:0;transition:opacity .35s;pointer-events:none}
.op-bento-cell:hover{transform:translateY(-4px);box-shadow:var(--op-shadow);border-color:rgba(124,58,237,.3)}
.op-bento-cell:hover::before{opacity:1}
.op-bento-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--op-violet)}
.op-bento-cell h3{font-size:22px;letter-spacing:-.018em;line-height:1.15;margin:4px 0 6px}
.op-bento-cell p{color:var(--op-muted);font-size:14px;line-height:1.6;margin:0}
.op-bento-cell.x2{grid-column:span 2}
.op-bento-cell.x3{grid-column:span 3}
.op-bento-cell.x4{grid-column:span 4}
.op-bento-cell.x6{grid-column:span 6}
.op-bento-cell.y2{grid-row:span 2}
.op-bento-cell.tall{min-height:380px}
.op-bento-cell.dark{background:linear-gradient(145deg,#0a1428,#1a1648 55%,#10283d);color:#f8fafc;border-color:rgba(255,255,255,.08)}
.op-bento-cell.dark p{color:#cdd6fa}
.op-bento-cell.dark .op-bento-eyebrow{color:#a5b4fc}
.op-bento-cell.dark::before{background:radial-gradient(700px 240px at var(--mx,50%) var(--my,50%),rgba(124,58,237,.45),transparent 40%)}
.op-bento-cell.gradient{background:linear-gradient(135deg,#2563eb,#06b6d4 50%,#7c3aed);color:#fff;border-color:transparent}
.op-bento-cell.gradient p,.op-bento-cell.gradient h3{color:#fff}
.op-bento-cell.gradient .op-bento-eyebrow{color:rgba(255,255,255,.85)}
.op-bento-visual{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;flex:1;position:relative;z-index:1}
@media(max-width:980px){.op-bento{grid-template-columns:repeat(2,1fr)}.op-bento-cell.x2,.op-bento-cell.x3,.op-bento-cell.x4,.op-bento-cell.x6{grid-column:span 2}.op-bento-cell.y2{grid-row:span 1}.op-bento-cell.tall{min-height:280px}}
@media(max-width:600px){.op-bento{grid-template-columns:1fr}.op-bento-cell.x2,.op-bento-cell.x3,.op-bento-cell.x4,.op-bento-cell.x6{grid-column:span 1}}

/* === Big gradient stat === */
.op-big-stat{display:flex;flex-direction:column;gap:6px}
.op-big-stat b{font-size:clamp(48px,6vw,84px);line-height:.95;font-weight:950;letter-spacing:-.06em;background:linear-gradient(135deg,var(--op-blue) 0%,var(--op-cyan) 45%,var(--op-violet) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.op-big-stat span{font-size:13px;color:var(--op-muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* === Glow primary button === */
.op-btn-glow{position:relative;border:0;color:#fff;background:linear-gradient(135deg,#2563eb,#06b6d4 55%,#7c3aed);box-shadow:0 16px 42px rgba(37,99,235,.31),0 0 0 1px rgba(255,255,255,.12) inset;isolation:isolate}
.op-btn-glow::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--op-cyan),var(--op-violet));z-index:-1;filter:blur(16px);opacity:.55;transition:opacity .25s}
.op-btn-glow:hover::after{opacity:.85}

/* === Pulse dot (live indicator) === */
.op-pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--op-green,#13b981);position:relative;flex-shrink:0;display:inline-block;vertical-align:middle}
.op-pulse-dot::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--op-green,#13b981);opacity:.4;animation:opPulse 1.6s infinite ease-out}
@keyframes opPulse{0%{transform:scale(.5);opacity:.6}100%{transform:scale(2.4);opacity:0}}

/* === Live ticker === */
.op-ticker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--op-surface);border:1px solid var(--op-stroke);backdrop-filter:var(--op-blur);font-size:12.5px;font-weight:700;color:var(--op-muted)}
.op-ticker b{color:var(--op-text);font-weight:900}

/* === Premium ribbon === */
.op-ribbon{position:absolute;top:14px;right:-28px;padding:4px 36px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;transform:rotate(28deg);box-shadow:0 6px 20px rgba(37,99,235,.4);z-index:4;pointer-events:none}

/* === Spotlight card (mouse-tracked) === */
.op-spot-card{position:relative;border:1px solid var(--op-stroke);border-radius:22px;background:var(--op-surface);padding:26px;overflow:hidden;isolation:isolate}
.op-spot-card::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 250px at var(--mx,0%) var(--my,0%),rgba(124,58,237,.25),transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:0}
.op-spot-card:hover::before{opacity:1}
.op-spot-card>*{position:relative;z-index:1}

/* === Reveal-on-scroll === */
.op-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.op-reveal.is-in{opacity:1;transform:translateY(0)}

/* === Mega heading === */
.op-mega-h2{font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.025em;font-weight:950;margin:0 0 18px;max-width:900px}
.op-mega-h2 em{font-style:normal;background:linear-gradient(120deg,var(--op-violet),var(--op-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* === Gradient line divider === */
.op-line{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--op-stroke) 25%,var(--op-violet) 50%,var(--op-stroke) 75%,transparent);margin:48px 0}

/* === Halo (radial glow) === */
.op-halo{position:absolute;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.34),transparent 60%);filter:blur(40px);pointer-events:none;z-index:-1}
.op-halo.cyan{background:radial-gradient(circle,rgba(6,182,212,.32),transparent 60%)}

/* === Live data card === */
.op-live-card{position:relative;border:1px solid var(--op-stroke);border-radius:18px;background:var(--op-surface);backdrop-filter:var(--op-blur);padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--op-shadow2)}
.op-live-num{font-size:28px;font-weight:900;letter-spacing:-.03em}
.op-live-lbl{font-size:12px;color:var(--op-muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* === Long-form / legal layout === */
.op-doc{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
@media(max-width:880px){.op-doc{grid-template-columns:1fr}}
.op-doc-toc{position:sticky;top:120px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.op-doc-toc a{color:var(--op-muted);text-decoration:none;padding:7px 12px;border-radius:10px;transition:.15s;border-left:2px solid transparent}
.op-doc-toc a:hover{background:var(--op-surface);color:var(--op-text)}
.op-doc-toc a.active{background:var(--op-surface);color:var(--op-violet);border-left-color:var(--op-violet);font-weight:800}
.op-doc-body{max-width:760px}
.op-doc-body h2{font-size:24px;letter-spacing:-.015em;margin:36px 0 12px;padding-top:8px;scroll-margin-top:120px}
.op-doc-body h2:first-of-type{margin-top:0}
.op-doc-body h3{font-size:17px;margin:24px 0 8px}
.op-doc-body p, .op-doc-body li{color:var(--op-muted);font-size:14.5px;line-height:1.75}
.op-doc-body ul, .op-doc-body ol{padding-left:22px}
.op-doc-body li{margin:6px 0}
.op-doc-body strong{color:var(--op-text)}
.op-doc-body code{background:var(--op-surface2);border:1px solid var(--op-stroke);padding:1px 6px;border-radius:5px;font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.op-doc-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.op-doc-body table th,.op-doc-body table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--op-stroke)}
.op-doc-body table th{background:var(--op-surface2);font-weight:800;color:var(--op-text);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.op-doc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--op-muted);padding:14px 18px;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:14px;margin-bottom:24px}
.op-doc-meta b{color:var(--op-text)}

/* === Status page === */
.op-status-bar{display:flex;align-items:center;gap:14px;padding:24px 28px;border-radius:20px;background:linear-gradient(135deg,rgba(19,185,129,.10),rgba(6,182,212,.06));border:1px solid rgba(19,185,129,.3);margin-bottom:28px}
.op-status-bar .op-pulse-dot{width:14px;height:14px}
.op-status-bar h2{margin:0;font-size:22px;letter-spacing:-.01em}
.op-status-bar p{margin:2px 0 0;color:var(--op-muted);font-size:13px}
.op-status-list{display:flex;flex-direction:column;gap:10px}
.op-status-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 20px;border-radius:14px;background:var(--op-surface);border:1px solid var(--op-stroke)}
.op-status-row b{font-size:14.5px}
.op-status-row span.op-small{display:block;font-size:12.5px;color:var(--op-muted)}
.op-status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.op-status-pill.ok{background:rgba(19,185,129,.12);color:#059669}
.op-status-pill.deg{background:rgba(245,158,11,.12);color:#b45309}
.op-status-pill.down{background:rgba(239,68,68,.12);color:#b91c1c}
html[data-theme="dark"] .op-status-pill.ok{color:#6ee7b7}
html[data-theme="dark"] .op-status-pill.deg{color:#fcd34d}
html[data-theme="dark"] .op-status-pill.down{color:#fca5a5}

/* === Roadmap kanban === */
.op-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.op-kanban{grid-template-columns:1fr}}
.op-kanban-col{background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;backdrop-filter:var(--op-blur)}
.op-kanban-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.op-kanban-head b{font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.op-kanban-count{padding:3px 10px;border-radius:999px;background:rgba(124,58,237,.12);color:var(--op-violet);font-weight:900;font-size:11px}
.op-kanban-card{padding:14px 16px;border-radius:14px;background:var(--op-surface2);border:1px solid var(--op-stroke);display:flex;flex-direction:column;gap:6px}
.op-kanban-card h4{margin:0;font-size:14px;font-weight:800}
.op-kanban-card p{margin:0;color:var(--op-muted);font-size:12.5px;line-height:1.55}
.op-kanban-card .op-tag{font-size:10.5px;padding:3px 9px}
.op-kanban-col.shipped .op-kanban-count{background:rgba(19,185,129,.12);color:#059669}
.op-kanban-col.progress .op-kanban-count{background:rgba(245,158,11,.12);color:#b45309}

/* === 404 hero === */
.op-404{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:80px 20px;text-align:center;position:relative;overflow:hidden}
.op-404 .op-mega-num{font-size:clamp(120px,18vw,240px);line-height:.85;font-weight:950;letter-spacing:-.08em;background:linear-gradient(135deg,var(--op-blue),var(--op-violet) 60%,var(--op-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.op-404 h1{font-size:clamp(28px,4vw,48px);margin:8px 0 14px}
.op-404 p{color:var(--op-muted);font-size:16px;max-width:540px;margin:0 auto 24px}

/* === Integration grid === */
.op-int-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.op-int-cell{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--op-surface);border:1px solid var(--op-stroke);border-radius:18px;backdrop-filter:var(--op-blur);transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none;color:inherit}
.op-int-cell:hover{transform:translateY(-3px);box-shadow:var(--op-shadow2);border-color:rgba(124,58,237,.3)}
.op-int-cell .op-int-logo{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(6,182,212,.10));font-weight:900;color:var(--op-violet)}
.op-int-cell h4{margin:6px 0 0;font-size:15px}
.op-int-cell p{color:var(--op-muted);font-size:12.5px;margin:0;line-height:1.55}
.op-int-cell .op-int-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.op-int-cell .op-int-cat{color:var(--op-muted)}
.op-int-cell .op-int-status{color:var(--op-green,#13b981)}
.op-int-cell .op-int-status.soon{color:var(--op-amber,#f59e0b)}

/* === VS comparison hero === */
.op-vs-hero{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;text-align:center;margin-bottom:32px}
.op-vs-side{padding:32px;border-radius:24px;background:var(--op-surface);border:1px solid var(--op-stroke);backdrop-filter:var(--op-blur)}
.op-vs-side.ours{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(124,58,237,.10));border-color:rgba(124,58,237,.3)}
.op-vs-side h3{margin:6px 0 4px;font-size:20px}
.op-vs-side p{color:var(--op-muted);font-size:13px;margin:0}
.op-vs-x{font-size:32px;font-weight:900;color:var(--op-violet)}
@media(max-width:760px){.op-vs-hero{grid-template-columns:1fr}.op-vs-x{transform:rotate(90deg)}}