/*! OPTB Nitro v1.0 — "Webflow-tier" design & motion for EXISTING blocks
    Scope strictly under .optb-app (no theme leaks). */

.optb-app{
  --ink:#0b163d;
  --muted:#6b75a3;
  --surface:#ffffff;
  --surface-2:#f7f9ff;
  --accent:#3a8cff;
  --accent-2:#b3d3ff;
  --good:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --radius:22px;
  --bd: color-mix(in oklab, var(--ink), #000 88%);
  --sh-xs: 0 2px 6px rgba(10,15,30,.06);
  --sh-sm: 0 10px 26px rgba(10,15,30,.10);
  --sh-md: 0 22px 60px rgba(10,15,30,.12);
  --sh-lg: 0 40px 110px rgba(10,15,30,.16);
  color: var(--ink);
}

/* Dark mode opt-in: add .dark on .optb-app */
.optb-app.dark{
  --surface:#0b1022;
  --surface-2:#0d1535;
  --ink:#e7eaf6;
  --muted:#9aa3c4;
  --bd: color-mix(in oklab, var(--ink), #000 84%);
  --sh-xs: 0 2px 6px rgba(0,0,0,.25);
  --sh-sm: 0 10px 26px rgba(0,0,0,.30);
  --sh-md: 0 22px 60px rgba(0,0,0,.38);
  --sh-lg: 0 40px 110px rgba(0,0,0,.44);
}

@media (prefers-reduced-motion: reduce){
  .optb-app *{ animation: none !important; transition: none !important; }
}

/* Base layout polish */
.optb-app .section{ position:relative; padding:clamp(22px,4.6vw,48px); isolation:isolate; }
.optb-app h1{ font-size: clamp(34px,6.6vw,66px); line-height:1.05; letter-spacing:-.02em; font-weight:900 }
.optb-app h2{ font-size: clamp(24px,3.8vw,38px); line-height:1.1; font-weight:850 }
.optb-app h3{ font-size: clamp(18px,2.8vw,22px); font-weight:800 }
.optb-app p{ color: var(--muted) }

/* Cards & interactive elements (applies to common block children) */
.optb-app .card,
.optb-app .feature,
.optb-app .price,
.optb-app .review,
.optb-app .stat,
.optb-app .step,
.optb-app .faq details,
.optb-app .gallery .shot{
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  will-change: transform;
}
.optb-app .card:hover,
.optb-app .feature:hover,
.optb-app .price:hover,
.optb-app .review:hover{ transform: translateY(-6px); box-shadow: var(--sh-md) }

/* Buttons & chips */
.optb-app .btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--bd); border-radius:999px;
  padding:12px 16px; font-weight:900;
  background: color-mix(in oklab, var(--accent-2), #fff 80%);
  box-shadow: var(--sh-xs);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.optb-app .btn.primary{ background: color-mix(in oklab, var(--accent), #fff 78%) }
.optb-app .btn:hover{ box-shadow: var(--sh-sm) }
.optb-app .btn:active{ transform: translateY(1px) }
.optb-app .chip{ display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--bd); background: color-mix(in oklab, var(--accent), #fff 86%); font-weight:800 }

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

/* FEATURES — grid + hover focus */
.optb-app .features{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:980px){ .optb-app .features{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .optb-app .features{ grid-template-columns:1fr } }
.optb-app .features .feature,
.optb-app .features .card{ padding:18px; transform-style:preserve-3d }
.optb-app .features .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 var(--bd); box-shadow: var(--sh-xs) }
.optb-app .features[data-focus-grid] .card{ opacity:.6 }
.optb-app .features[data-focus-grid] .card:hover{ opacity:1; transform: translateY(-6px); box-shadow: var(--sh-md) }

/* PRICING — solid tiles */
.optb-app .pricing{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:940px){ .optb-app .pricing{ grid-template-columns:1fr } }
.optb-app .pricing .price, .optb-app .pricing .tile{ padding:22px }
.optb-app .pricing .price .amount, .optb-app .pricing .tile .price{ font-size: clamp(30px,4.4vw,46px); font-weight:900 }
.optb-app .pricing .price.is-pop, .optb-app .pricing .tile.is-pop{ transform: translateY(-4px) scale(1.01); box-shadow: var(--sh-lg);
  background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--accent-2), #fff 88%)) }
.optb-app .pricing .badge{ display:inline-block; padding:6px 10px; border-radius:999px; background: color-mix(in oklab, var(--accent-2), #fff 84%); border:1px solid var(--bd); font-weight:800 }

/* REVIEWS — tilt + carousel on mobile */
.optb-app .reviews{ --gap:16px; gap:var(--gap) }
@media (max-width:820px){
  .optb-app .reviews{ display:grid; grid-auto-flow:column; grid-auto-columns: 85%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px }
  .optb-app .reviews > *{ scroll-snap-align:start }
}

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

/* TIMELINE — progress */
.optb-app .timeline .step{ border:1px solid var(--bd); border-radius:16px; padding:16px; box-shadow:var(--sh-xs) }
.optb-app .timeline .progress{ height:4px; background: color-mix(in oklab, var(--accent-2), #fff 60%); border-radius:999px; overflow:hidden; margin-bottom:8px }
.optb-app .timeline .progress .bar{ height:100%; width:0%; background: color-mix(in oklab, var(--accent), #fff 30%); transition: width .25s }

/* FAQ */
.optb-app .faq details{ padding:14px 16px }
.optb-app .faq details[open]{ background: color-mix(in oklab, var(--accent-2), #fff 92%) }
.optb-app .faq summary{ cursor:pointer; font-weight:800 }

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

/* Galleries */
.optb-app .gallery{ display:grid; grid-auto-flow:column; grid-auto-columns: clamp(220px, 30%, 380px); gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding:6px }
.optb-app .gallery .shot{ scroll-snap-align:start; overflow:hidden }
.optb-app .gallery .shot img{ display:block; width:100%; height:220px; object-fit:cover; transition: transform .35s }
.optb-app .gallery .shot:hover img{ transform: scale(1.04) }

/* Reveal base */
.optb-app .reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease }
.optb-app .reveal.in{ opacity:1; transform:none }

/* Background helpers (toggle with data-bg="gradient|blobs|noise") */
.optb-app [data-bg="gradient"]::before{
  content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 420px at 12% 26%, color-mix(in oklab, var(--accent), #fff 14%), transparent 60%),
    radial-gradient(800px 460px at 88% 22%, color-mix(in oklab, var(--accent-2), #fff 12%), transparent 60%);
  filter: blur(22px); opacity:.85;
}
.optb-app [data-bg="blobs"]::before{
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(220px 180px at 15% 30%, color-mix(in oklab, var(--accent), #fff 70%), transparent 60%),
    radial-gradient(260px 220px at 70% 20%, color-mix(in oklab, var(--accent-2), #fff 70%), transparent 60%);
  filter: blur(18px); opacity:.7;
}
.optb-app [data-bg="noise"]::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, transparent 1px, transparent 2px);
  opacity:.6;
}

/* Focus accessibility */
.optb-app a:focus-visible, .optb-app button:focus-visible, .optb-app summary:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent), #000 30%); outline-offset:2px;
}