/*! OPTB Library v1.0 — variants styling (non-destructive) */
.optb-app{ --ink:#0b163d; --muted:#6b75a3; --accent:#3a8cff; --accent-2:#b3d3ff; --radius:22px }

/* Panel */
#optb-lib{ position:fixed; top:80px; left:16px; z-index:99990; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif }
#optb-lib .btn{ display:block; width:180px; text-align:left; margin:8px 0; padding:10px 12px; border-radius:12px; border:1px solid rgba(32,45,100,.22); background:#fff; font-weight:900; cursor:pointer; box-shadow:0 10px 26px rgba(10,15,30,.10) }
#optb-lib .group{ margin-bottom:16px }
#optb-lib .title{ font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:6px 0; opacity:.7 }

/* Hero: video, split, gradient, app, minimal */
.optb-app .hero.video{ position:relative; overflow:hidden; border-radius:var(--radius) }
.optb-app .hero.video .bg-video{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; filter: saturate(120%) contrast(105%); opacity:.9 }
.optb-app .hero.video .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)) }

.optb-app .hero.split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center }
@media (max-width:900px){ .optb-app .hero.split{ grid-template-columns:1fr } }
.optb-app .hero.split .visual img{ width:100%; height:auto; border-radius:16px }

.optb-app .hero.gradient{ position:relative; overflow:hidden; border-radius:var(--radius) }
.optb-app .hero.gradient::before{
  content:""; position:absolute; inset:-20%; z-index:-1;
  background:
    radial-gradient(700px 420px at 16% 26%, color-mix(in oklab, var(--accent), #fff 16%), transparent 60%),
    radial-gradient(800px 460px at 84% 22%, color-mix(in oklab, var(--accent-2), #fff 12%), transparent 60%);
  filter: blur(22px); opacity:.9
}

.optb-app .hero.app{ text-align:center }
.optb-app .hero.app .mock{ display:inline-block; margin-top:12px; border:1px solid rgba(0,0,0,.12); border-radius:28px; padding:10px; box-shadow:0 18px 60px rgba(10,15,30,.2) }
.optb-app .hero.app .mock img{ width:min(640px, 90%); height:auto; display:block; border-radius:20px }

/* Features variants */
.optb-app .features.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media (max-width:980px){ .optb-app .features.grid-3{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .optb-app .features.grid-3{ grid-template-columns:1fr } }
.optb-app .features.grid-3 .feature{ padding:18px; border:1px solid rgba(0,0,0,.12); border-radius:18px; background:#fff }
.optb-app .features.grid-3 .icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background: color-mix(in oklab, var(--accent-2), #fff 80%); border:1px solid rgba(0,0,0,.1) }

/* Timeline horizontal */
.optb-app .timeline.h{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:16px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px }
.optb-app .timeline.h .step{ scroll-snap-align:start; padding:16px; border-radius:16px; border:1px solid rgba(0,0,0,.12); background:#fff }

/* Pricing variants */
.optb-app .pricing.cols-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media (max-width:940px){ .optb-app .pricing.cols-3{ grid-template-columns:1fr } }
.optb-app .pricing.cols-3 .price{ padding:22px; border:1px solid rgba(0,0,0,.12); border-radius:18px; background:#fff }
.optb-app .pricing.single .price{ max-width:780px; margin-inline:auto; padding:24px; border:1px solid rgba(0,0,0,.12); border-radius:20px; background:#fff }

/* Reviews */
.optb-app .reviews.carousel{ display:grid; grid-auto-flow:column; grid-auto-columns: clamp(280px, 40%, 420px); gap:16px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px }
.optb-app .reviews.carousel .review{ scroll-snap-align:start; padding:18px; border:1px solid rgba(0,0,0,.12); border-radius:18px; background:#fff }

/* Stats pills */
.optb-app .stats.pills{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px }
@media (max-width:980px){ .optb-app .stats.pills{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .optb-app .stats.pills{ grid-template-columns:1fr } }
.optb-app .stats.pills .stat{ padding:14px; border-radius:16px; border:1px solid rgba(0,0,0,.12); background: color-mix(in oklab, var(--accent-2), #fff 94%) }

/* FAQ */
.optb-app .faq.clean details{ padding:14px 16px; border-radius:16px; border:1px solid rgba(0,0,0,.12); background:#fff }
.optb-app .faq.clean details + details{ margin-top:10px }

/* Logos marquee baseline */
.optb-app .partners.row, .optb-app .logos.row{ display:flex; gap:28px; align-items:center; overflow:hidden }
.optb-app .partners.row img, .optb-app .logos.row img{ height:34px; width:auto; opacity:.9 }

/* Footer */
.optb-app .footer.dark{ background:#0b1022; color:#e7eaf6; border-radius:20px; padding:22px }
.optb-app .footer.dark a{ color:#e7eaf6 }