/* ============================================================
   SADRA — Site-wide Premium Enhancement Layer
   Shared across all inner pages (about, ceo, faq, installments,
   plan-*). Same design tokens as styles.css / pages.css.
   ============================================================ */

/* ---------- Back to top ---------- */
.back-to-top{position:fixed;bottom:28px;inset-inline-end:28px;width:52px;height:52px;border-radius:50%;
  background:var(--glass-bg-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);display:grid;place-items:center;
  color:var(--ink);z-index:90;opacity:0;pointer-events:none;transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.back-to-top:hover{background:var(--grad-blue);color:#fff;transform:translateY(-3px) scale(1.05)}
.back-to-top svg{width:20px;height:20px}

/* ---------- Trust strip (generic badges) ---------- */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
.trust-strip__item{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;
  border-radius:var(--radius-pill);background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm);font-size:.92rem;font-weight:700;color:var(--ink-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease)}
.trust-strip__item svg{width:19px;height:19px;color:var(--blue-2);flex-shrink:0}
.trust-strip__item:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}

/* ---------- Marquee (infinite scrolling strip) ---------- */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);font-weight:700;
  font-size:.95rem;color:var(--ink-soft);white-space:nowrap}
.marquee__item svg{width:18px;height:18px;color:var(--blue-2)}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- Live search box (FAQ) ---------- */
.search-box{position:relative;max-width:560px;margin:0 auto 40px}
.search-box__icon{position:absolute;top:50%;inset-inline-start:22px;transform:translateY(-50%);
  width:20px;height:20px;color:var(--muted);pointer-events:none}
.search-box__input{width:100%;padding:18px 54px 18px 22px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);background:#fff;font-family:inherit;font-size:1rem;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:border-color .3s,box-shadow .3s}
.search-box__input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(225,29,46,.14)}
.search-box__count{text-align:center;font-size:.9rem;color:var(--muted);font-weight:600;margin-top:-24px;margin-bottom:20px}
.faq-item.is-filtered-out{display:none}

/* ---------- Verified badge (CEO) ---------- */
.verified-badge{position:absolute;bottom:2px;inset-inline-end:2px;width:34px;height:34px;border-radius:50%;
  background:var(--grad-blue);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-glow);
  border:3px solid #FBF9F7}
.verified-badge svg{width:16px;height:16px}
.ceo-portrait{position:relative}

.quote-copy{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:9px 18px;
  border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);
  font-size:.85rem;font-weight:700;transition:all .35s var(--ease)}
.quote-copy svg{width:14px;height:14px}
.quote-copy:hover{border-color:var(--blue);color:var(--blue)}
.quote-copy.is-copied{background:#1FAE5C;border-color:transparent;color:#fff}

/* ---------- Section connector accents ---------- */
.hub-switch__pill.is-active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}

/* ---------- Micro polish for existing plan/detail components ---------- */
.plan-step{position:relative}
.plan-steps{position:relative}
.pplan__icon{transition:transform .5s var(--ease)}
.pplan:hover .pplan__icon{transform:scale(1.08) rotate(-4deg)}
.plan-doc__num{transition:transform .4s var(--ease),background .4s var(--ease)}
.plan-doc:hover .plan-doc__num{transform:scale(1.08);background:var(--grad-blue);color:#fff}
.compare tbody tr{transition:background .3s var(--ease)}
.compare tbody tr:hover td{background:rgba(225,29,46,.035)}
.compare__featured tbody tr:hover td,.compare__featured tr:hover td{background:transparent}

/* ---------- CEO letter paragraphs (class-based reveal) ---------- */
.letter__body p.letter-p{opacity:0;transform:translateY(28px)}
.letter__body p.letter-p.is-visible{opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media (prefers-reduced-motion:reduce){.letter__body p.letter-p{opacity:1;transform:none}}

/* ---------- Media collage (framed photo + floating product cards) ---------- */
.media-collage{position:relative;padding:6px 6px 30px}
/* halo / dots decorative background removed per "just the image" design */
.media-collage__halo,.media-collage__dots{display:none}
.media-collage__main{position:relative;z-index:2;margin:0;
  aspect-ratio:4/3.1;
  filter:drop-shadow(0 30px 34px rgba(139,10,30,.16));
  transform:rotate(0);transition:transform .7s var(--ease)}
.media-collage__main img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 1.1s var(--ease)}
.media-collage:hover .media-collage__main{transform:translateY(-6px) rotate(-.6deg)}
.media-collage:hover .media-collage__main img{transform:scale(1.04)}
/* floating mini product cutouts — frameless, silhouette shadow only */
.media-collage__chip{position:absolute;z-index:3;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(24,24,27,.25));
  will-change:transform}
.media-collage__chip--a{width:clamp(96px,11vw,142px);aspect-ratio:3/4;inset-inline-end:-26px;top:-30px;
  transform:rotate(7deg);animation:collageChipA 8s ease-in-out infinite}
.media-collage__chip--b{width:clamp(84px,9.5vw,120px);aspect-ratio:3/4;inset-inline-start:-20px;bottom:6px;
  transform:rotate(-8deg);animation:collageChipB 10s ease-in-out infinite}
@keyframes collageChipA{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(5deg) translateY(-12px)}}
@keyframes collageChipB{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(10px)}}
/* glass caption badge */
.media-collage__badge{position:absolute;z-index:4;bottom:12px;inset-inline-end:22px;
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);font-size:.92rem;font-weight:800;color:var(--ink);
  white-space:nowrap;max-width:calc(100% - 44px)}
.media-collage__badge svg{width:19px;height:19px;color:var(--blue);flex:none}
.media-collage__badge strong{color:var(--blue-2)}

@media (max-width:640px){
  .media-collage{padding:2px 2px 20px}
  .media-collage__main{aspect-ratio:4/3}
  .media-collage__chip--a{inset-inline-end:-8px;top:-18px}
  .media-collage__chip--b{inset-inline-start:-8px;bottom:0}
  .media-collage__badge{inset-inline-end:12px;bottom:4px;font-size:.82rem;padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){
  .media-collage__chip,.media-collage__halo{animation:none}
}

/* ---------- Section head underline accent (animated in on reveal) ---------- */
.section__head::after{content:"";display:block;width:76px;height:4px;border-radius:99px;
  margin:26px auto 0;background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease) .25s}
.section__head.is-visible::after{transform:scaleX(1)}

/* ---------- Footer legal copy line (careers / calculations) ---------- */
.footer__copy{font-size:.9rem;color:rgba(234,241,251,.55)}

/* ---------- Primary button sheen sweep ---------- */
.btn--primary::after{content:"";position:absolute;top:0;bottom:0;width:44%;z-index:1;
  inset-inline-start:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transition:inset-inline-start .8s var(--ease);pointer-events:none}
.btn--primary:hover::after{inset-inline-start:120%}

@media (max-width:768px){
  .back-to-top{width:46px;height:46px;bottom:20px;inset-inline-end:20px}
  .trust-strip__item{padding:11px 16px;font-size:.85rem}
}


/* ---------- Image slots (styled placeholder until custom photos added) ---------- */
.img-slot{position:relative;min-height:240px;border-radius:var(--radius-lg);
  border:1.5px dashed rgba(225,29,46,.35);overflow:hidden;
  background:repeating-linear-gradient(-45deg,rgba(225,29,46,.045) 0 14px,rgba(225,29,46,.015) 14px 28px);
  display:grid;place-items:center;color:var(--muted)}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s var(--ease)}
.img-slot.is-filled{border-style:solid;border-color:var(--line)}
.img-slot.is-filled img{opacity:1}
.img-slot__label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:24px;text-align:center;font-size:.92rem;font-weight:700}
.img-slot__label bdi{direction:ltr;display:inline-block;color:var(--blue-2)}
.img-slot__label svg{width:34px;height:34px;color:var(--blue);opacity:.75}
.img-slot.is-filled .img-slot__label{display:none}
.img-slot--band{min-height:280px}
@media (max-width:640px){.img-slot--band{min-height:200px}}