/* ═══════════════════════════════════════════════════════
   DINBOX.TV — enhancements.css
   Unified enhancement styles for all sections
═══════════════════════════════════════════════════════ */

/* ── VARIANT: .vbg — Black glass → Grey on hover (nav pills) ── */
.vbg .b-base { background: rgba(10, 10, 16, 0.25); }
.vbg .b-ring { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 20px 50px rgba(0, 0, 0, 0.5); }
.vbg .b-bt { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.12) 0%, transparent 75%); }
.vbg .b-tt { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.10) 0%, transparent 80%); }
.vbg .b-sp { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 0%, transparent 100%); }
.vbg .b-sh { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.06) 52%, transparent 70%); }
.vbg:hover .b-base { background: rgba(180, 180, 190, 0.2); }
.vbg:hover .b-ring { border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 255, 255, 0.06); }
.vbg:hover .b-bt { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.18) 0%, transparent 75%); }
.vbg:hover .b-tt { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.14) 0%, transparent 80%); }
.vbg:hover .b-sp { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.38) 0%, transparent 100%); }

/* ── VARIANT: .vob — Orange → Black on hover (Contul meu, S4 CTA) ── */
.vob .b-base { background: rgba(197, 85, 24, 0.35); }
.vob .b-ring { border: 1px solid rgba(255, 160, 80, 0.35); box-shadow: inset 0 1px 0 rgba(255, 200, 140, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 20px 50px rgba(197, 85, 24, 0.3); }
.vob .b-bt { background: radial-gradient(ellipse, rgba(255, 140, 60, 0.25) 0%, transparent 75%); }
.vob .b-tt { background: radial-gradient(ellipse, rgba(255, 160, 80, 0.18) 0%, transparent 80%); }
.vob .b-sp { background: linear-gradient(to bottom, rgba(255, 180, 120, 0.3) 0%, transparent 100%); }
.vob .b-sh { background: linear-gradient(105deg, transparent 30%, rgba(255, 160, 80, 0.08) 48%, rgba(255, 180, 100, 0.14) 50%, rgba(255, 160, 80, 0.08) 52%, transparent 70%); }
.vob:hover .b-base { background: rgba(10, 10, 16, 0.4); }
.vob:hover .b-ring { border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 20px 50px rgba(0, 0, 0, 0.5); }
.vob:hover .b-bt { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1) 0%, transparent 75%); }
.vob:hover .b-tt { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.08) 0%, transparent 80%); }
.vob:hover .b-sp { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 100%); }

/* ── All buttons — hover lift ── */
.btn:hover {
  transform: translateY(-3px) !important;
}


/* ══════════════════════════════════════════════════════
   GLOBAL — Ambience, Strips, Popcorn
══════════════════════════════════════════════════════ */

/* Global ambient orange glow — behind everything */
#global-ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 8% 20%, rgba(197, 85, 24, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 92% 45%, rgba(140, 50, 8, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 15% 70%, rgba(197, 85, 24, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 80% 85%, rgba(120, 40, 5, 0.10) 0%, transparent 50%);
}

/* Global glass strips — fixed behind content */
#global-strips {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 1;
  pointer-events: none;
}
.global-gs {
  flex: 1;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.02);
}
.global-gs:nth-child(3n+1) {
  background: rgba(255, 255, 255, 0.008);
  animation-delay: 0s;
}
.global-gs:nth-child(3n+2) {
  background: rgba(0, 0, 0, 0.04);
  animation-delay: 1.4s;
}
.global-gs:nth-child(3n) {
  background: rgba(0, 0, 0, 0.025);
  animation-delay: 2.8s;
}
.global-gs:nth-child(5n) {
  background: rgba(0, 0, 0, 0.05);
  animation-delay: 4.2s;
}
.global-gs:nth-child(7n) {
  background: rgba(255, 255, 255, 0.01);
  animation-delay: 5.5s;
}

/* All sections sit above global layers */
#hero, #s2, #s3, #s4, #s6, #s7, #s8, #footer {
  position: relative;
  z-index: 2;
}

/* Footer safety — always visible as baseline; GSAP animates from this */
#footer .ft-nav,
#footer .ft-left,
#footer .ft-email,
#footer .ft-ctas {
  opacity: 1;
  visibility: visible;
}

/* Global popcorn container */
#global-popcorn {
  display: none !important;
}
.gpc {
  display: none !important;
  position: absolute;
  pointer-events: auto;
  z-index: 3;
  will-change: transform;
  transform: translateZ(0);
  --push-x: 0px;
  --push-y: 0px;
  --parallax-y: 0px;
  translate: var(--push-x) calc(var(--push-y) + var(--parallax-y));
  transition: translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gpc img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Floating animations for global popcorns */
.gpc:nth-child(1)  { animation: gpc-f1 11s ease-in-out infinite; }
.gpc:nth-child(2)  { animation: gpc-f2 14s ease-in-out infinite; animation-delay: -4s; }
.gpc:nth-child(3)  { animation: gpc-f3 10s ease-in-out infinite; animation-delay: -7s; }
.gpc:nth-child(4)  { animation: gpc-f4 16s ease-in-out infinite; animation-delay: -2s; }
.gpc:nth-child(5)  { animation: gpc-f1 13s ease-in-out infinite; animation-delay: -5s; }
.gpc:nth-child(6)  { animation: gpc-f2 10s ease-in-out infinite; animation-delay: -9s; }
.gpc:nth-child(7)  { animation: gpc-f3 15s ease-in-out infinite; animation-delay: -3s; }
.gpc:nth-child(8)  { animation: gpc-f4 12s ease-in-out infinite; animation-delay: -8s; }
.gpc:nth-child(9)  { animation: gpc-f1 18s ease-in-out infinite; animation-delay: -6s; }
.gpc:nth-child(10) { animation: gpc-f2 13s ease-in-out infinite; }
.gpc:nth-child(11) { animation: gpc-f3 10s ease-in-out infinite; animation-delay: -5s; }
.gpc:nth-child(12) { animation: gpc-f4 14s ease-in-out infinite; animation-delay: -4s; }
.gpc:nth-child(13) { animation: gpc-f1 16s ease-in-out infinite; animation-delay: -7s; }
.gpc:nth-child(14) { animation: gpc-f2 11s ease-in-out infinite; animation-delay: -2s; }
.gpc:nth-child(15) { animation: gpc-f3 13s ease-in-out infinite; animation-delay: -9s; }
.gpc:nth-child(16) { animation: gpc-f4 10s ease-in-out infinite; animation-delay: -3s; }
.gpc:nth-child(17) { animation: gpc-f1 15s ease-in-out infinite; animation-delay: -8s; }
.gpc:nth-child(18) { animation: gpc-f2 12s ease-in-out infinite; animation-delay: -6s; }
.gpc:nth-child(19) { animation: gpc-f3 20s ease-in-out infinite; animation-delay: -11s; }
.gpc:nth-child(20) { animation: gpc-f4 22s ease-in-out infinite; animation-delay: -14s; }
.gpc:nth-child(21) { animation: gpc-f1 18s ease-in-out infinite; animation-delay: -10s; }

@keyframes gpc-f1 {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  30%      { transform: translateY(-25px) rotate(-2deg) translateX(8px); }
  60%      { transform: translateY(-10px) rotate(-10deg) translateX(-5px); }
}
@keyframes gpc-f2 {
  0%, 100% { transform: translateY(0) rotate(12deg); }
  40%      { transform: translateY(-20px) rotate(5deg) translateX(12px); }
  70%      { transform: translateY(-8px) rotate(16deg) translateX(-3px); }
}
@keyframes gpc-f3 {
  0%, 100% { transform: translateY(0) rotate(-15deg); }
  35%      { transform: translateY(-18px) rotate(-8deg) translateX(6px); }
  65%      { transform: translateY(-5px) rotate(-18deg) translateX(-8px); }
}
@keyframes gpc-f4 {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  35%      { transform: translateY(-22px) rotate(12deg) translateX(-10px); }
  65%      { transform: translateY(-8px) rotate(3deg) translateX(5px); }
}


/* ══════════════════════════════════════════════════════
   HERO SECTION — Cinematic intro + enhanced popcorn
══════════════════════════════════════════════════════ */

.intro-hidden {
  opacity: 0 !important;
  visibility: hidden;
}
.intro-fade-down {
  animation: intro-fd 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-fade-up {
  animation: intro-fu 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-scale-in {
  animation: intro-si 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.intro-fade-left {
  animation: intro-fl 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-fade-right {
  animation: intro-fr 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes intro-fd {
  0%   { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes intro-fu {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes intro-si {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes intro-fl {
  0%   { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes intro-fr {
  0%   { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* ══════════════════════════════════════════════════════
   SECTION 2 — Films Slider
══════════════════════════════════════════════════════ */

/* ─── Watermark orbiting glow — injected near every watermark ─── */
.wm-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.wm-glow-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translateZ(0);
}

.wm-orb-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 20%;
  background: radial-gradient(circle, rgba(197, 85, 24, 0.2) 0%, rgba(197, 85, 24, 0.05) 30%, transparent 50%);
  animation: wm-orbit-1 16s ease-in-out infinite;
}

.wm-orb-2 {
  width: 250px;
  height: 250px;
  top: 40%;
  left: 60%;
  background: radial-gradient(circle, rgba(255, 140, 85, 0.16) 0%, rgba(197, 85, 24, 0.04) 30%, transparent 50%);
  animation: wm-orbit-2 20s ease-in-out infinite;
}

/* GPU-composited: transform only, no top/left */
@keyframes wm-orbit-1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(30%, 5%) scale(1.2); }
  50%  { transform: translate(50%, 20%) scale(0.9); }
  75%  { transform: translate(20%, 0%) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes wm-orbit-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-30%, -20%) scale(1.1); }
  66%  { transform: translate(-5%, -5%) scale(0.85); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── Watermark row — shared base for all section watermarks ── */
.s2-watermark, .s3-watermark, .s4-watermark,
.s6-watermark, .s7-watermark, .s8-watermark {
  position: relative;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(197, 85, 24, 0.18);
  background: linear-gradient(180deg, rgba(197, 85, 24, 0.15) 0%, rgba(197, 85, 24, 0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  padding: 50px 0 40px;
  line-height: 1.1;
  animation: wm-drift 20s ease-in-out infinite;
}
@keyframes wm-drift {
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(15px) scale(1.04); }
}
.s2-watermark {
  font-size: clamp(75px, 10vw, 165px);
  letter-spacing: 0.05em;
}
.s2-head { position: relative; z-index: 2; }

.s2-sliders {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.slider-wrap {
  overflow: visible !important;
  clip-path: inset(-50px 0px -50px 0px);
  padding: 10px 0;
}
.slider-track {
  display: flex;
  gap: 24px !important;
  padding: 10px 40px 20px !important;
  overflow: visible !important;
}
.card {
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease,
              opacity 0.35s ease,
              filter 0.35s ease !important;
}
.card:hover {
  transform: translateY(-12px) scale(1.12) !important;
  box-shadow:
    0 8px 30px rgba(197, 85, 24, 0.4),
    0 20px 60px rgba(197, 85, 24, 0.25),
    0 0 80px rgba(197, 85, 24, 0.15) !important;
  z-index: 10 !important;
  opacity: 1 !important;
  filter: brightness(1.05) !important;
}
.card:hover img {
  transform: scale(1) !important;
}
.slider-track:hover .card:not(:hover) {
  transform: scale(0.92) !important;
  opacity: 0.45 !important;
  filter: brightness(0.7) !important;
}
.pill { cursor: pointer; transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pill:hover:not(.active) { width: 55px; }

/* ── Film Strip Hover Effect ── */
.film-strip-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: 16px;
}

/* Left & Right perforated strips */
.fs-left, .fs-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  background: rgba(15, 12, 8, 0.88);
  z-index: 2;
}
.fs-left  { left: 0; border-radius: 16px 0 0 16px; }
.fs-right { right: 0; border-radius: 0 16px 16px 0; }

/* Sprocket holes — repeating along the strips */
.fs-left::after, .fs-right::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 3px;
  right: 3px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(80, 65, 45, 0.6) 3px,
    rgba(80, 65, 45, 0.6) 11px,
    transparent 11px,
    transparent 15px
  );
  border-radius: 1.5px;
}

/* Top & Bottom bars */
.fs-top, .fs-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: rgba(15, 12, 8, 0.88);
  z-index: 3;
}
.fs-top    { top: 0; border-radius: 16px 16px 0 0; }
.fs-bottom { bottom: 0; border-radius: 0 0 16px 16px; }

/* Film strip frame line — inner accent */
.fs-top::after, .fs-bottom::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  height: 1px;
  background: rgba(197, 85, 24, 0.35);
}
.fs-top::after    { bottom: 2px; }
.fs-bottom::after { top: 2px; }

/* Orange glow when strip appears — inner border glow */
.fs-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1.5px solid rgba(197, 85, 24, 0.4);
  box-shadow:
    inset 0 0 20px rgba(197, 85, 24, 0.15),
    inset 0 0 40px rgba(197, 85, 24, 0.06);
  z-index: 4;
}


/* ══════════════════════════════════════════════════════
   SECTION 3 — Platform Devices
══════════════════════════════════════════════════════ */

.s3-watermark {
  font-size: clamp(60px, 9vw, 140px);
  letter-spacing: 0.04em;
  padding-bottom: 50px;
}
@media (max-width: 768px) {
  .s3-watermark { padding-bottom: 44px !important; padding-top: 20px !important; }
}

.tv-img-box img {
  animation: tv-breathe 8s ease-in-out infinite !important;
  transform-origin: center center;
}
@keyframes tv-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.s3-tv { position: relative; z-index: 1 !important; }
.s3-text { position: relative; z-index: 3 !important; }
.s3-row2 { position: relative; z-index: 5; }

.s3-title {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.78) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.s3-title .light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.pcard {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease,
              opacity 0.35s ease,
              filter 0.35s ease,
              border-color 0.45s ease !important;
}
.s3-cards-grid:hover .pcard:not(:hover) {
  opacity: 0.7 !important;
  filter: brightness(0.8) !important;
  transform: scale(0.97) !important;
}
.pcard:hover {
  opacity: 1 !important;
  filter: brightness(1) !important;
  box-shadow:
    0 8px 30px rgba(197, 85, 24, 0.35),
    0 20px 55px rgba(197, 85, 24, 0.2),
    0 0 70px rgba(197, 85, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6) !important;
}


/* ══════════════════════════════════════════════════════
   SECTION 4 — Showcase
══════════════════════════════════════════════════════ */

.s4-watermark {
  font-size: clamp(60px, 10vw, 160px);
  letter-spacing: 0.05em;
  -webkit-text-stroke: 1.5px rgba(197, 85, 24, 0.16);
  background: linear-gradient(180deg, rgba(197, 85, 24, 0.14) 0%, rgba(197, 85, 24, 0.05) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* No glow orbs on FAQ section */
#s4 .wm-glow { display: none; }

.s4-glass { overflow: hidden !important; }
.s4-strips {
  width: 100% !important;
  left: 0 !important;
  transform-origin: center center;
  transform: scaleX(1.4);
  animation: glass-strips-drift 10s ease-in-out infinite !important;
}
@keyframes glass-strips-drift {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(25px); }
  50%      { transform: translateX(-20px); }
  75%      { transform: translateX(12px); }
}


/* ══════════════════════════════════════════════════════
   SECTION 6 — Pricing
══════════════════════════════════════════════════════ */

.s6-watermark {
  font-size: clamp(60px, 9vw, 140px);
  letter-spacing: 0.04em;
}

.s6-grid { align-items: stretch !important; }
.prc { display: flex; flex-direction: column; overflow: hidden; }
.prc-extras { overflow: visible !important; position: relative; z-index: 20; }
.prc-inner { flex: 1; display: flex; flex-direction: column; overflow: visible !important; }
.prc-features { min-height: 180px; }

/* Duration toggle pills */
.duration-toggle {
  display: flex; gap: 4px; width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 100px; padding: 3px; margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dur-pill {
  flex: 1; padding: 8px 4px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5);
  text-align: center; cursor: pointer; border: none; background: transparent;
  transition: color 0.35s ease, background 0.35s ease;
  position: relative;
}
.dur-pill:hover { color: rgba(255, 255, 255, 0.8); }
.dur-pill.active {
  background: rgba(197, 85, 24, 0.7);
  color: #fff;
  box-shadow: 0 4px 16px rgba(197, 85, 24, 0.3);
}
.dur-save {
  display: none; font-size: 9px; font-weight: 700;
  color: #C55518; margin-top: 2px;
}
.dur-pill.active .dur-save { display: block; color: rgba(255, 255, 255, 0.8); }

.prc-price { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s; }
.prc-price.bump { transform: scale(1.08); color: #FF8C55; }

.prc-popular-block {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 0; margin-bottom: 8px;
}
.prc-popular-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(197, 85, 24, 0.45) 0%, rgba(197, 85, 24, 0.15) 100%);
  border: 1px solid rgba(197, 85, 24, 0.35);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: 0 4px 20px rgba(197, 85, 24, 0.2);
  width: 100%;
}
.prc-popular-ribbon svg { color: #FF8C55; }
.prc-included {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Mona Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}
.prc-included svg { color: #C55518; flex-shrink: 0; }

.prc-inner > .btn {
  margin-top: auto; min-height: 46px; width: 100%;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.prc-inner > .btn .b-lbl { justify-content: center !important; width: 100%; }
.prc-extras { margin-bottom: 24px; }
.prc-pci { margin-bottom: 12px; }

/* Info icon tooltip */
.extra-row { position: relative; }
.extra-label { display: inline-flex; align-items: center; gap: 6px; }
.extra-info { position: relative; cursor: pointer; flex-shrink: 0; margin-left: 0 !important; }
.extra-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  transform: translateX(0) scale(0.9);
  background: rgba(20, 10, 4, 0.95);
  border: 1px solid rgba(197, 85, 24, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Mona Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 300; line-height: 1.5;
  padding: 10px 14px; border-radius: 10px;
  width: 220px; white-space: normal; text-align: left;
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 85, 24, 0.1);
}
.extra-info:hover::after { opacity: 1; transform: translateX(0) scale(1); }
.prc:not(.premium) .extra-info::after { left: auto; right: -230px; }
.prc:not(.premium) .extra-info:hover::after { transform: scale(1); }
.prc.premium .extra-info::after { left: -230px; right: auto; }
.prc.premium .extra-info:hover::after { transform: scale(1); }

/* Animated glass stripes on pricing cards */
.prc-bg::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; z-index: 1;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px,
    transparent 1px, transparent 14px,
    rgba(0, 0, 0, 0.06) 14px, rgba(0, 0, 0, 0.06) 15px,
    transparent 15px, transparent 28px,
    rgba(255, 255, 255, 0.015) 28px, rgba(255, 255, 255, 0.015) 29px,
    transparent 29px, transparent 42px
  );
  background-size: 200% 100%;
  animation: prc-stripes-slide 8s ease-in-out infinite;
  pointer-events: none;
}
.prc.premium .prc-bg::after { animation-delay: -3s; }
@keyframes prc-stripes-slide {
  0%, 100% { background-position: 0% 0; }
  25%      { background-position: 15% 0; }
  50%      { background-position: -10% 0; }
  75%      { background-position: 8% 0; }
}

.prc.premium .prc-bg {
  background: linear-gradient(180deg,
    rgba(120, 45, 8, 0.6) 0%,
    rgba(50, 20, 4, 0.85) 20%,
    rgba(18, 8, 2, 0.95) 45%,
    rgba(8, 4, 1, 1.0) 100%) !important;
}

.prc-extra-toggle svg { display: none !important; }
.prc-extras { display: flex !important; flex-direction: column; gap: 8px; }

/* Spotlight hover on pricing cards */
.prc {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease, opacity 0.35s ease, filter 0.35s ease !important;
}

/* Default state: Premium is the hero, Basic is receded */
.prc.premium {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(197, 85, 24, 0.3),
              0 20px 55px rgba(197, 85, 24, 0.15),
              0 0 70px rgba(197, 85, 24, 0.08);
}
.prc:not(.premium) {
  opacity: 0.7; filter: brightness(0.8); transform: scale(0.97);
}

/* On Premium hover — just lift it more */
.prc.premium:hover {
  transform: translateY(-8px) scale(1.08) !important;
  box-shadow: 0 8px 30px rgba(197, 85, 24, 0.35),
              0 20px 55px rgba(197, 85, 24, 0.2),
              0 0 70px rgba(197, 85, 24, 0.12) !important;
}

/* On Basic hover — Basic pops up, Premium recedes (inverted) */
.prc.basic-active {
  opacity: 1 !important; filter: brightness(1) !important;
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(197, 85, 24, 0.35),
              0 20px 55px rgba(197, 85, 24, 0.2),
              0 0 70px rgba(197, 85, 24, 0.12) !important;
}
.prc.premium.premium-inactive {
  transform: scale(0.97) !important;
  opacity: 0.7 !important; filter: brightness(0.8) !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════
   SECTION 7 — Info Cards
══════════════════════════════════════════════════════ */

.s7-watermark {
  font-size: clamp(60px, 9vw, 140px);
  letter-spacing: 0.04em;
}
.s7-grid { position: relative; z-index: 1; }

.s7card {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease, opacity 0.35s ease, filter 0.35s ease !important;
}
.s7-grid:hover .s7card:not(:hover) {
  opacity: 0.7; filter: brightness(0.8); transform: scale(0.97);
}
.s7card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 8px 30px rgba(197, 85, 24, 0.3),
              0 20px 55px rgba(197, 85, 24, 0.15),
              0 0 60px rgba(197, 85, 24, 0.1) !important;
  opacity: 1 !important; filter: brightness(1) !important;
}


/* ══════════════════════════════════════════════════════
   SECTION 8 — FAQ
══════════════════════════════════════════════════════ */

.s8-watermark {
  font-size: clamp(70px, 10vw, 160px);
  letter-spacing: 0.04em;
}
.s8-head, .faq-list { position: relative; z-index: 2; }

.faq-item {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease, opacity 0.35s ease, filter 0.35s ease !important;
}
.faq-list:hover .faq-item:not(:hover) {
  opacity: 0.7;
  filter: brightness(0.8);
  transform: scale(0.97);
}
.faq-item:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 8px 30px rgba(197, 85, 24, 0.3),
    0 20px 55px rgba(197, 85, 24, 0.15),
    0 0 60px rgba(197, 85, 24, 0.1) !important;
  opacity: 1 !important;
  filter: brightness(1) !important;
  z-index: 5;
}


/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */

.ft-nav a {
  transition: color 0.3s ease, transform 0.3s ease;
}
.ft-nav a:hover {
  color: var(--orange-light);
  transform: translateY(-2px);
}
.pay-icon svg { fill: rgba(255, 255, 255, 0.5); width: 20px; height: 20px; transition: fill 0.3s; }
.pay-icon:hover svg { fill: #fff; }


/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */

/* ─── Mobile: disable premium scale & spotlight hover ─── */
@media (max-width: 768px) {
  .prc.premium { transform: none !important; box-shadow: none !important; }
  .prc:not(.premium) { opacity: 1 !important; filter: none !important; transform: none !important; }
  .prc.premium:hover { transform: translateY(-4px) !important; }
  .prc.basic-active { transform: none !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; }
  .prc.premium.premium-inactive { transform: none !important; opacity: 1 !important; filter: none !important; }
}

/* ─── Mobile: reduce compositing layers for smooth scroll ─── */
@media (max-width: 768px) {
  #global-strips { display: none !important; }
  #global-ambience { position: absolute !important; }
  .hero-glow-orb { animation: none !important; }
  #hero video { will-change: auto !important; }
}

/* ─── Mobile watermarks & cards ─── */
@media (max-width: 768px) {
  .s2-watermark, .s3-watermark, .s4-watermark,
  .s6-watermark, .s7-watermark, .s8-watermark {
    font-size: clamp(36px, 12vw, 70px) !important;
    -webkit-text-stroke: 1px rgba(197, 85, 24, 0.14) !important;
    padding: 20px 0 36px !important;
  }
  .card {
    width: 160px !important;
    height: 240px !important;
    border-radius: 12px !important;
  }
  .slider-track {
    gap: 14px !important;
    padding: 8px 20px 14px !important;
  }
  .s2-sliders {
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .s2-watermark, .s3-watermark, .s4-watermark,
  .s6-watermark, .s7-watermark, .s8-watermark {
    font-size: clamp(28px, 11vw, 50px) !important;
    padding: 16px 0 30px !important;
  }
  .card {
    width: 130px !important;
    height: 195px !important;
    border-radius: 10px !important;
  }
  .slider-track {
    gap: 10px !important;
    padding: 6px 14px 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gpc,
  .intro-fade-down, .intro-fade-up, .intro-scale-in,
  .intro-fade-left, .intro-fade-right,
  .s2-watermark, .s3-watermark, .s4-watermark,
  .s6-watermark, .s7-watermark, .s8-watermark,
  .s4-strips,
  .global-gs, #global-ambience,
  .wm-glow-orb, .hero-glow-orb,
  .mesh-blob, .gs, .hero-badge-dot,
  .tv-glow::before, .tv-glow::after,
  .s6-glow-right::before, .s6-glow-right::after,
  #hero video {
    animation: none !important;
  }
  .intro-hidden { opacity: 1 !important; visibility: visible; }
}

/* ─── Scroll-to-Top Glass Button ─── */
.stt {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity .4s cubic-bezier(.4,0,.2,1),
              visibility .4s,
              transform .4s cubic-bezier(.34,1.56,.64,1);
}
.stt.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.stt:hover {
  transform: translateY(-3px);
}
.stt:active {
  transform: scale(0.92) !important;
  transition-duration: 0.08s;
}
/* Glass layers — circular adaptation of .btn system */
.stt .b-blur {
  border-radius: 50%;
  background: rgba(15, 12, 8, 0.75);
}
.stt .b-base {
  border-radius: 50%;
  background: rgba(197, 85, 24, 0.32);
}
.stt .b-ring {
  border-radius: 50%;
  border: 1px solid rgba(197, 85, 24, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,180,100,0.5),
              inset 0 -1px 0 rgba(0,0,0,0.5),
              0 0 30px rgba(197,85,24,0.2),
              0 8px 32px rgba(0,0,0,0.55);
}
.stt .b-bt {
  bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 80%; height: 60%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(197,85,24,0.38) 0%, transparent 75%);
}
.stt .b-tt {
  top: -6px; left: 8px;
  width: 55%; height: 50%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(230,120,50,0.28) 0%, transparent 80%);
}
.stt .b-sp {
  top: 0; left: 12px; right: 12px;
  height: 35%; border-radius: 0 0 50% 50%;
  background: linear-gradient(to bottom, rgba(255,180,100,0.42) 0%, transparent 100%);
}
.stt .b-dp {
  inset: 3px; border-radius: 50%;
  box-shadow: inset 0 6px 18px rgba(0,0,0,0.3),
              inset 0 -3px 8px rgba(255,255,255,0.04);
}
.stt .b-sh {
  border-radius: 50%;
  background: linear-gradient(108deg, transparent 10%, rgba(255,160,80,0.22) 40%, rgba(255,130,50,0.09) 52%, transparent 76%);
}
/* Hover state — brighter orange glow */
.stt:hover .b-base {
  background: rgba(197, 85, 24, 0.45);
}
.stt:hover .b-ring {
  border-color: rgba(255, 140, 60, 0.6);
  box-shadow: inset 0 1px 0 rgba(255,200,120,0.6),
              inset 0 -1px 0 rgba(0,0,0,0.6),
              0 0 50px rgba(197,85,24,0.4),
              0 8px 32px rgba(0,0,0,0.55);
}
.stt:hover .b-bt {
  background: radial-gradient(ellipse, rgba(197,85,24,0.55) 0%, transparent 75%);
}
.stt:hover .b-tt {
  background: radial-gradient(ellipse, rgba(255,140,60,0.35) 0%, transparent 80%);
}
.stt:hover .b-sp {
  background: linear-gradient(to bottom, rgba(255,200,120,0.55) 0%, transparent 100%);
}
/* Arrow icon */
.stt-arrow {
  position: relative;
  z-index: 3;
  width: 20px;
  height: 20px;
  color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
@media (max-width: 600px) {
  .stt { bottom: 1.25rem; right: 1.25rem; width: 46px; height: 46px; }
  .stt-arrow { width: 18px; height: 18px; }
}