/* =====================================================================
   BANIXO — MAIN STYLESHEET
   =====================================================================
   ⚙️  DESIGN SYSTEM — ported from the original home.html palette:
   vibrant purple + pink-accented yellow on white, deep purple-black
   for the dark "feature" sections (header, hero, footer, stats,
   checkout sidebar). Every color is driven from this single :root
   block — change values here only.
   ===================================================================== */
:root{
  /* ---- CORE BRAND COLORS ---- */
  --primary:        #8B5CF6;   /* purple — CTAs, links, primary buttons (home.html --purple) */
  --primary-dark:   #7C3AED;   /* hover / pressed state */ 
  --primary-light:  #A855F7;   /* brighter purple — subtle accents, active borders (home.html --purple-2) */

  --secondary:       #0A0118;  /* deep purple-black — header, hero, footer, stats bar, checkout sidebar (home.html --dark) */
  --secondary-light: #1B0F3D;  /* lighter purple-black — depth within dark sections (home.html --dark-3) */
 
  --accent:      #FBBF24;      /* yellow — badges, countdown, savings %, ratings, CTA pop (home.html --yellow) */
  --accent-dark: #92400E;      /* deep amber — accent text/icons on light backgrounds (kept dark for contrast) */

  --success:     #22C55E;      /* green — checkmarks, guarantee, verified */
  --danger:      #F43F5E;      /* vivid rose — urgency/errors (home.html --pink-2) */

  /* ---- NEUTRALS / SURFACES ---- */
  --background:  #FFFFFF;      /* page background (home.html body bg) */
  --surface:     #FFFFFF;      /* card / panel background */
  --surface-alt: #F7F5FC;      /* soft lavender tint — alternating section background (home.html --section-alt) */

  --text-primary:   #170B30;   /* deep purple-black — headings, body copy (home.html --ink) */
  --text-secondary: #8D86A8;   /* muted lavender-gray — supporting text (home.html --muted) */
  --text-on-dark:   #FFFFFF;   /* white text on the dark "feature" sections */
  --text-on-dark-muted: rgba(255,255,255,.72);

  --border: #EEE6FB;           /* soft lavender hairline border against white/surface (home.html card border) */
  --border-on-dark: rgba(255,255,255,.12);

  /* ---- TYPE ---- */
  --font-bn: 'Hind Siliguri','Poppins',sans-serif;
  --font-en: 'Poppins','Hind Siliguri',sans-serif;

  /* ---- RADIUS / SHADOW (kept subtle — premium, not flashy) ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 4px 14px -8px rgba(0,0,0,.25);
  --shadow-md: 0 10px 28px -14px rgba(0,0,0,.32);
  --shadow-lg: 0 22px 48px -20px rgba(0,0,0,.4);

  /* ---- MOTION — single easing curve used by every animation on the site ---- */
  --ease-premium: cubic-bezier(.22,1,.36,1);
  --dur-fast: .2s;
  --dur-base: .35s;
  --dur-reveal: .65s;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--fixed-header-h, 110px);}
body{
  font-family:var(--font-bn);
  color:var(--text-primary);
  background:var(--background);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--fixed-header-h, 96px); /* reserves space for the fixed announce-bar + navbar */
}

/* ===================== FIXED HEADER WRAPPER ===================== */
/* Announcement bar + navbar stack together and are pinned as one unit.
   When the announce bar collapses (offer expired), the navbar rides up
   to take its place automatically since both are in normal flow inside
   this fixed container — js/main.js only needs to keep --fixed-header-h
   in sync with the wrapper's actual rendered height. */
.site-header-fixed{
  position:fixed; top:0; left:0; right:0; z-index:1000;
}
h1,h2,h3,h4,h5,.font-en{font-family:var(--font-en);}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.container-xl{max-width:1240px;}
section{position:relative;}

::selection{background:var(--primary-light); color:#fff;}

/* ===================== REVEAL ANIMATION ===================== */
/* Single items (cards, boxes) — fade + slide up once, on first entry into view */
[data-reveal]{
  opacity:0; transform:translate3d(0,32px,0);
  transition:opacity var(--dur-reveal) var(--ease-premium), transform var(--dur-reveal) var(--ease-premium);
  will-change:transform, opacity;
}
[data-reveal].in-view{opacity:1; transform:translate3d(0,0,0);}
[data-reveal="fade"]{transform:none;}

/* Grids/rows of cards — the wrapper is observed, but each direct child animates
   individually with a short stagger so cards don't all pop in at once. */
[data-reveal-group] > *{
  opacity:0; transform:translate3d(0,28px,0);
  transition:opacity var(--dur-reveal) var(--ease-premium), transform var(--dur-reveal) var(--ease-premium);
  will-change:transform, opacity;
}
[data-reveal-group].in-view > *{opacity:1; transform:translate3d(0,0,0);}
[data-reveal-group] > *:nth-child(1){transition-delay:.02s;}
[data-reveal-group] > *:nth-child(2){transition-delay:.08s;}
[data-reveal-group] > *:nth-child(3){transition-delay:.14s;}
[data-reveal-group] > *:nth-child(4){transition-delay:.20s;}
[data-reveal-group] > *:nth-child(5){transition-delay:.26s;}
[data-reveal-group] > *:nth-child(6){transition-delay:.32s;}
[data-reveal-group] > *:nth-child(7){transition-delay:.38s;}
[data-reveal-group] > *:nth-child(8){transition-delay:.44s;}

/* Checkout — billing form slides from the left, order summary from the right */
[data-reveal-left]{
  opacity:0; transform:translate3d(-36px,0,0);
  transition:opacity var(--dur-reveal) var(--ease-premium), transform var(--dur-reveal) var(--ease-premium);
}
[data-reveal-left].in-view{opacity:1; transform:translate3d(0,0,0);}
[data-reveal-right]{
  opacity:0; transform:translate3d(36px,0,0);
  transition:opacity var(--dur-reveal) var(--ease-premium), transform var(--dur-reveal) var(--ease-premium) .08s;
}
[data-reveal-right].in-view{opacity:1; transform:translate3d(0,0,0);}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes spinSlow{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* ---- Hero entrance (runs automatically on load, no JS needed) ---- */
@keyframes heroFadeDown{from{opacity:0; transform:translate3d(0,-14px,0);} to{opacity:1; transform:translate3d(0,0,0);}}
@keyframes heroFadeUp{from{opacity:0; transform:translate3d(0,22px,0);} to{opacity:1; transform:translate3d(0,0,0);}}
@keyframes heroFadeScale{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);}}
@keyframes heroFloatAmbient{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}

/* ---- Countdown digit change pulse ---- */
@keyframes tickPulse{from{opacity:.45; transform:scale(.86);} to{opacity:1; transform:scale(1);}}
.mini-timer span.tick-anim, .cd-nums span.tick-anim{animation:tickPulse .32s var(--ease-premium);}

/* ---- Offer badge — very subtle, non-distracting pulse ---- */
@keyframes badgePulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.045);}}

/* ---- WhatsApp icon gentle float ---- */
@keyframes waFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);}}

/* ===================== BUTTONS ===================== */
.btn-primary-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--primary), var(--primary-dark));
  color:#fff; border:none; font-weight:700; padding:14px 34px; border-radius:50px;
  font-size:1rem; box-shadow:0 10px 22px -10px rgba(124,58,237,.45);
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), background var(--dur-base) ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
/* subtle one-shot shine sweep on hover — not an infinite loop */
.btn-primary-cta::after{
  content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform:skewX(-20deg); transition:left .65s var(--ease-premium); pointer-events:none;
}
.btn-primary-cta:hover::after{left:130%;}
.btn-primary-cta:hover{transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(124,58,237,.55); color:#fff; background:var(--primary-dark);}
.btn-primary-cta:active{transform:translateY(-1px) scale(.97); transition-duration:var(--dur-fast);}
.btn-primary-cta.lg{padding:17px 42px; font-size:1.1rem;}
.btn-primary-cta.block{width:100%;}

.btn-outline-cta{
  background:transparent; border:1.5px solid var(--border); color:var(--primary);
  font-weight:700; padding:12px 28px; border-radius:50px; font-size:.95rem;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) ease;
}
.btn-outline-cta:hover{border-color:var(--primary); background:rgba(139,92,246,.16);}
.btn-outline-cta:active{transform:scale(.97);}

.btn-nav-cta{
  background:var(--primary); color:#fff; font-weight:700;
  padding:9px 20px; border-radius:50px; font-size:.86rem; box-shadow:0 6px 16px -6px rgba(124,58,237,.5);
  transition:background var(--dur-base) ease, transform var(--dur-fast) ease;
}
.btn-nav-cta:hover{color:#fff; background:var(--primary-dark);}
.btn-nav-cta:active{transform:scale(.96);}

/* ===================== TOP ANNOUNCEMENT BAR ===================== */
/* Visible only while the offer countdown is running. .hide is toggled by
   js/main.js once the deadline passes; the max-height/padding transition
   collapses it smoothly and the navbar rides up to take its place since
   both live in normal flow inside .site-header-fixed. */
.announce-bar{
  background:var(--secondary);
  color:var(--text-on-dark); text-align:center; font-size:.82rem; font-weight:600; padding:8px 14px;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--border-on-dark);
  max-height:100px; overflow:hidden;
  transition:max-height .4s var(--ease-premium), padding .4s var(--ease-premium), opacity .3s ease, border-bottom-width .4s ease;
}
.announce-bar.hide{
  max-height:0; padding-top:0; padding-bottom:0; opacity:0; border-bottom-width:0;
}
.announce-bar .fire{color:var(--accent);}
.announce-bar .mini-timer{
  display:inline-flex; gap:4px; font-family:var(--font-en); font-weight:800; letter-spacing:.5px;
}
.announce-bar .mini-timer span{
  background:rgba(255,255,255,.08); color:var(--accent); padding:2px 7px; border-radius:5px; min-width:28px; text-align:center;
}

/* ===================== NAVBAR ===================== */
/* Positioning now comes from the .site-header-fixed wrapper — the navbar
   itself stays in normal flow so it naturally sits right below the
   announce bar, and rides up automatically when that bar collapses. */
.navbar-banixo{
  background:rgba(10,1,24,.9);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:12px 0; transition:padding .25s ease;
  border-bottom:1px solid var(--border-on-dark);
}
.navbar-banixo.scrolled{padding:7px 0;}
.brand-mark{display:flex; align-items:center; gap:10px;}
.brand-mark img{height:38px; width:auto;}
.brand-name-wrap{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-family:var(--font-en); font-weight:900; font-size:1.25rem; color:#fff; letter-spacing:.3px;}
.brand-tagline{font-size:.56rem; letter-spacing:2.6px; color:var(--accent); font-weight:700; margin-top:3px;}
.nav-links a{color:var(--text-on-dark-muted); font-weight:600; font-size:.9rem; margin:0 12px; position:relative;}
.nav-links a:hover{color:#fff;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}

/* ===================== HERO ===================== */
.hero{
  position:relative; padding:70px 0 60px;
  background:linear-gradient(180deg, var(--secondary) 0%, var(--secondary-light) 100%);
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px; mask-image:radial-gradient(ellipse 80% 70% at 50% 20%, #000 40%, transparent 90%); pointer-events:none;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid var(--border-on-dark);
  color:var(--text-on-dark); padding:7px 18px; border-radius:50px; font-size:.8rem; font-weight:600;
  animation:heroFadeDown .6s var(--ease-premium) 0s backwards;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(251,191,36,.6); animation:pulse 1.6s infinite;}
.hero h1{color:#fff; font-weight:800; font-size:2.6rem; line-height:1.28; margin-top:18px; animation:heroFadeUp .65s var(--ease-premium) .1s backwards;}
.hero h1 .hl{color:var(--accent);}
.hero-sub{color:var(--text-on-dark-muted); font-size:1.08rem; line-height:1.8; margin-top:16px; max-width:540px; animation:heroFadeUp .65s var(--ease-premium) .2s backwards;}
.hero-points{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:10px; animation:heroFadeUp .65s var(--ease-premium) .3s backwards;}
.hero-points li{display:flex; align-items:center; gap:10px; color:var(--text-on-dark); font-weight:600; font-size:.94rem;}
.hero-points li i{color:var(--accent); font-size:1.1rem;}
.hero > .container-xl > .row > .col-lg-6:first-child > .mt-4{animation:heroFadeUp .65s var(--ease-premium) .4s backwards;}

.hero-visual{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border-on-dark);
  animation:heroFadeScale .7s var(--ease-premium) .25s backwards, heroFloatAmbient 6s ease-in-out .95s infinite;
}
.hero-visual .thumb-frame{
  position:relative; aspect-ratio:16/10; background:linear-gradient(135deg, var(--secondary-light), var(--secondary));
  display:flex; align-items:center; justify-content:center;
}
.hero-visual .thumb-frame::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(251,191,36,.14), transparent 65%);}
.play-orb{
  position:relative; z-index:2; width:78px; height:78px; border-radius:50%;
  background:var(--primary); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.8rem; box-shadow:0 0 0 14px rgba(255,255,255,.06), 0 16px 34px -12px rgba(0,0,0,.55);
  cursor:pointer; transition:transform var(--dur-base) var(--ease-premium), background var(--dur-base) ease;
}
.play-orb:hover{transform:scale(1.08); background:var(--primary-dark);}
.play-orb:active{transform:scale(.96);}
.hero-visual .unmute-chip{
  position:absolute; top:16px; right:16px; z-index:2; background:rgba(0,0,0,.5); color:#fff; font-size:.72rem; font-weight:700;
  padding:6px 14px; border-radius:50px; display:flex; align-items:center; gap:6px; backdrop-filter:blur(4px);
}
.hero-visual .demo-caption{background:var(--secondary); color:var(--text-on-dark); padding:14px 20px; font-size:.85rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border-on-dark);}
.scroll-cue{display:flex; align-items:center; gap:8px; justify-content:center; color:var(--text-on-dark-muted); font-size:.78rem; margin-top:26px; font-weight:600; animation:heroFadeUp .6s var(--ease-premium) .55s backwards;}
.scroll-cue i{animation:floaty 1.8s ease-in-out infinite;}

/* ===================== SECTION GENERIC ===================== */
.section{padding:80px 0;}
.section-light{background:var(--surface);}
.section-alt{background:var(--surface-alt);}
.section-dark{background:var(--secondary); color:var(--text-on-dark);}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-weight:700; font-size:.8rem;
  letter-spacing:1.3px; text-transform:uppercase; background:rgba(139,92,246,.16); padding:6px 16px; border-radius:50px; margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--accent); background:rgba(251,191,36,.12);}
.sec-title{font-weight:800; font-size:2.15rem; color:var(--text-primary); line-height:1.3;}
.sec-title.on-dark{color:#fff;}
.sec-sub{color:var(--text-secondary); font-size:1.02rem; margin-top:12px; max-width:640px;}
.sec-sub.on-dark{color:var(--text-on-dark-muted);}
.center-head{text-align:center; margin-bottom:48px;}
.center-head .sec-sub{margin-left:auto; margin-right:auto;}

/* ===================== PACKAGE COMPARISON CARDS ===================== */
.pkg-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; height:100%;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) ease; position:relative; overflow:hidden;
}
.pkg-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--primary-light);}
.row.g-4 > [data-reveal]:nth-of-type(2){transition-delay:.1s;}
.pkg-card.is-free{background:var(--surface-alt); border-style:dashed;}
.pkg-card .pkg-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff;
  background:var(--primary); margin-bottom:18px;
}
.pkg-card.is-free .pkg-icon{background:var(--accent); color:var(--secondary);}
.pkg-card h3{font-weight:800; font-size:1.3rem; color:var(--text-primary);}
.pkg-card .pkg-tag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.8px; color:var(--primary); background:rgba(139,92,246,.16); padding:4px 12px; border-radius:50px; margin-bottom:10px;}
.pkg-card.is-free .pkg-tag{color:var(--accent-dark); background:rgba(251,191,36,.14);}
.pkg-list{list-style:none; padding:0; margin:18px 0 0;}
.pkg-list li{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--text-secondary); padding:7px 0; font-weight:500;}
.pkg-list li i{color:var(--success); margin-top:3px;}

/* ===================== DEMO SHOWCASE (video-style grids) ===================== */
.demo-feature{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border); max-width:560px; margin:0 auto;
}
.demo-feature .frame{aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--secondary), var(--secondary-light));}
.demo-feature .caption{background:var(--surface); padding:16px 20px; text-align:center; color:var(--text-primary); font-weight:600;}
.watch-badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(251,191,36,.14); color:var(--accent-dark); font-weight:800; font-size:.7rem;
  padding:5px 14px; border-radius:50px; margin-bottom:10px;
}

.showcase-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.showcase-card{
  border-radius:14px; overflow:hidden; position:relative; aspect-ratio:3/4; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium); cursor:pointer;
}
.showcase-card:hover{transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-md);}
.showcase-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);}
.showcase-card .mini-play{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.2); border:1.4px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; backdrop-filter:blur(3px);
}
.showcase-card .cap{position:absolute; z-index:2; left:10px; bottom:8px; color:#fff; font-weight:700; font-size:.7rem;}

/* Admin-uploaded showcase video lightbox (click a .showcase-card with data-yt) */
.bx-video-lightbox{
  position:fixed; inset:0; z-index:1100; background:rgba(10,1,24,.86);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.bx-video-lightbox-inner{position:relative; width:100%; max-width:720px; aspect-ratio:9/16; max-height:88vh;}
.bx-video-lightbox-inner iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:14px; background:#000;}
.bx-video-close{
  position:absolute; top:-40px; right:0; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.bx-video-close:hover{background:rgba(255,255,255,.26);}

/* Premium collection */
.premium-card{
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); position:relative;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.premium-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.premium-card .p-frame{aspect-ratio:16/10; position:relative; overflow:hidden; transition:transform .45s var(--ease-premium);}
.premium-card:hover .p-frame{transform:scale(1.06);}
.premium-card .p-frame .play-orb{transition:transform var(--dur-base) var(--ease-premium), background var(--dur-base) ease;}
.premium-card .p-frame .play-orb:hover{transform:translate(-50%,-50%) scale(1.08);}
.premium-badge{position:absolute; top:10px; left:10px; z-index:2; background:var(--accent); color:var(--secondary); font-weight:800; font-size:.65rem; padding:4px 12px; border-radius:50px;}
.premium-card .p-cap{background:var(--surface); padding:12px 16px; font-weight:700; font-size:.85rem; color:var(--text-primary);}

/* ===================== PROBLEM CARDS ===================== */
.problem-card2{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 22px; height:100%;
  box-shadow:var(--shadow-sm); display:flex; gap:14px; align-items:flex-start;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) ease;
}
.problem-card2:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--primary-light);}
.problem-card2 .pic{
  width:42px; height:42px; min-width:42px; border-radius:12px; background:rgba(244,63,94,.1); color:var(--danger);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.problem-card2 h5{font-weight:700; font-size:1rem; color:var(--text-primary); margin-bottom:4px;}
.problem-card2 p{margin:0; color:var(--text-secondary); font-size:.86rem; line-height:1.55;}

/* ===================== SUCCESS STORY QUOTE ===================== */
.story-quote{max-width:760px; margin:0 auto; text-align:center; position:relative; padding:0 20px;}
.story-quote .qmark-big{font-family:Georgia,serif; font-size:5rem; color:var(--primary); opacity:.14; line-height:1; margin-bottom:-30px;}
.story-quote p{font-size:1.3rem; font-weight:600; color:var(--text-primary); line-height:1.7;}
.story-quote .attrib{margin-top:20px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;}
.story-quote .attrib b{color:var(--text-primary); font-size:.95rem;}
.verified-chip{display:inline-flex; align-items:center; gap:4px; background:rgba(34,197,94,.1); color:var(--success); font-weight:700; font-size:.72rem; padding:3px 10px; border-radius:50px;}

/* ===================== OUTPUT CATEGORY CARDS ===================== */
.category-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; height:100%;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.category-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.category-card .cat-frame{aspect-ratio:16/9; position:relative; overflow:hidden; transition:transform .45s var(--ease-premium);}
.category-card:hover .cat-frame{transform:scale(1.06);}
.category-card .cat-body{padding:18px 20px;}
.category-card h5{font-weight:700; font-size:1.02rem; color:var(--text-primary); margin-bottom:4px;}
.category-card p{color:var(--text-secondary); font-size:.83rem; margin-bottom:0;}
.category-card .credit{display:block; margin-top:8px; font-size:.7rem; color:var(--text-secondary); font-style:italic; opacity:.8;}

/* ===================== BONUS GRID ===================== */
.bonus-card2{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:14px; padding:20px 20px; height:100%;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.bonus-card2:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.bonus-card2 .emoji{font-size:1.7rem; margin-bottom:10px; display:block;}
.bonus-card2 h5{font-weight:700; font-size:.98rem; color:var(--text-primary); margin-bottom:6px;}
.bonus-card2 p{color:var(--text-secondary); font-size:.82rem; margin-bottom:8px;}
.bonus-value{font-size:.76rem; font-weight:700; color:var(--text-secondary);}
.bonus-value b{color:var(--accent-dark);}

/* ===================== TESTIMONIAL CARDS ===================== */
.testi-card2{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 22px; height:100%; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) ease;
}
.testi-card2:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--primary-light);}
.testi-top{display:flex; align-items:center; gap:12px;}
.testi-avatar2{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1rem;}
.testi-name2{font-weight:700; color:var(--text-primary); font-size:.92rem; margin-bottom:1px;}
.testi-stars2 i{color:var(--accent); font-size:.75rem;}
.testi-card2 p.txt{color:var(--text-secondary); font-size:.88rem; line-height:1.65; margin-top:12px; margin-bottom:0;}

/* ===================== STATS ROW ===================== */
.stat-item{text-align:center;}
.stat-item .num{font-family:var(--font-en); font-weight:900; font-size:2.1rem; color:#fff;}
.stat-item .lbl{color:var(--text-on-dark-muted); font-size:.82rem; font-weight:600; margin-top:4px;}

/* ===================== GUARANTEE ===================== */
.guarantee-box{
  max-width:780px; margin:0 auto; text-align:center; background:var(--surface-alt);
  border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:44px 36px;
}
.guarantee-box .g-icon{width:70px; height:70px; border-radius:50%; margin:0 auto 16px; background:var(--success); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem; box-shadow:var(--shadow-sm);}
.guarantee-box h3{font-weight:800; font-size:1.5rem; color:var(--text-primary);}
.guarantee-box p{color:var(--text-secondary); font-size:.96rem; line-height:1.75; margin-top:10px; margin-bottom:0;}

/* ===================== PRICING CARD ===================== */
.pricing-card2{
  max-width:640px; margin:0 auto; background:var(--surface); border-radius:var(--radius-lg); padding:0; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--border); transition:box-shadow .4s ease;
}
.pricing-card2:hover{box-shadow:0 30px 60px -20px rgba(0,0,0,.35);}
.pricing-card2 .pc-head{background:var(--secondary); color:var(--text-on-dark); padding:26px 32px; text-align:center; position:relative;}
.pricing-card2 .pc-head .pc-badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(251,191,36,.16); color:var(--accent); font-weight:800; font-size:.75rem; padding:5px 16px; border-radius:50px; margin-bottom:10px;
  animation:badgePulse 2.6s ease-in-out infinite;
}
.pricing-card2 .pc-head h3{font-weight:800; font-size:1.35rem; margin-bottom:4px;}
.pricing-card2 .pc-head .rating{color:var(--text-on-dark-muted); font-size:.82rem; font-weight:600;}
.pricing-card2 .rating i{color:var(--accent);}
.pricing-card2 .pc-body{padding:30px 32px;}
.pc-feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin-bottom:8px;}
.pc-feature-grid .pcf{display:flex; align-items:flex-start; gap:8px; font-size:.85rem; color:var(--text-secondary); font-weight:500; padding:5px 0;}
.pc-feature-grid .pcf i{color:var(--success); margin-top:3px; font-size:.85rem;}
.pc-divider{border-top:1px dashed var(--border); margin:18px 0;}
.pc-value-row{display:flex; justify-content:space-between; align-items:center; font-size:.9rem; color:var(--text-secondary); font-weight:600;}
.pc-value-row .val{text-decoration:line-through;}
.pc-save-row{display:flex; justify-content:space-between; align-items:center; font-size:.92rem; font-weight:700; color:var(--success); margin-top:6px;}
.pc-price-block{text-align:center; margin-top:20px;}
.pc-old-price{font-size:1.15rem; color:var(--text-secondary); text-decoration:line-through; font-weight:700;}
.pc-new-price{
  font-family:var(--font-en); font-size:3rem; font-weight:900; color:var(--text-primary); line-height:1;
  display:inline-block; opacity:0; transform:scale(.85);
  transition:opacity .5s var(--ease-premium) .25s, transform .5s var(--ease-premium) .25s;
}
[data-reveal].in-view .pc-new-price{opacity:1; transform:scale(1);}
.pc-price-note{font-size:.8rem; color:var(--text-secondary); font-weight:600; margin-top:4px;}
.pc-countdown{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; background:rgba(244,63,94,.08);
  color:var(--danger); font-weight:700; font-size:.85rem; padding:10px 16px; border-radius:12px;
}
.pc-countdown .cd-nums{display:flex; gap:4px; font-family:var(--font-en); font-weight:900;}
.pc-countdown .cd-nums span{background:rgba(244,63,94,.1); padding:2px 7px; border-radius:6px; min-width:26px; text-align:center;}

/* trust badges */
.trust-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px;}
.trust-chip{display:flex; align-items:center; gap:6px; background:var(--surface-alt); border:1px solid var(--border); color:var(--text-secondary); font-weight:700; font-size:.76rem; padding:7px 14px; border-radius:50px;}
.trust-chip i{color:var(--success);}

/* ===================== COMMUNITY SECTION ===================== */
.community-feature{text-align:center; padding:22px 16px;}
.community-feature .cf-icon{width:60px; height:60px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; background:var(--primary-light);}
.community-feature h5{font-weight:700; font-size:1.02rem; color:#fff; margin-bottom:6px;}
.community-feature p{color:var(--text-on-dark-muted); font-size:.85rem; margin-bottom:0;}
.community-highlight{
  background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.28); border-radius:16px; padding:24px 26px; margin-top:34px; max-width:760px; margin-left:auto; margin-right:auto;
}
.community-highlight h5{color:var(--accent); font-weight:800; font-size:1rem; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.community-highlight p{color:var(--text-on-dark-muted); font-size:.88rem; margin-bottom:0; line-height:1.7;}

/* ===================== FAQ ===================== */
.faq-item{border:1px solid var(--border); border-radius:14px; margin-bottom:14px; overflow:hidden; background:var(--surface); transition:border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;}
.faq-item:hover{border-color:var(--primary-light); box-shadow:var(--shadow-sm);}
.faq-q{display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; user-select:none;}
.faq-q .fq-num{font-family:var(--font-en); font-weight:800; font-size:1.35rem; color:var(--border); min-width:36px;}
.faq-q h5{flex:1; margin:0; font-weight:700; font-size:.98rem; color:var(--text-primary);}
.faq-q .chev{color:var(--primary); transition:transform .3s ease; font-size:1rem;}
.faq-item.open .chev{transform:rotate(180deg);}
.faq-item.open .faq-q{background:var(--surface-alt);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a-inner{padding:0 22px 20px 74px; color:var(--text-secondary); font-size:.88rem; line-height:1.7;}

/* ===================== FINAL CTA ===================== */
.final-cta2{text-align:center; padding:70px 0;}
.final-cta2 h2{font-weight:800; font-size:2.1rem; color:#fff; line-height:1.35;}
.final-cta2 p{color:var(--text-on-dark-muted); font-size:1rem; margin-top:14px;}

/* ===================== RECENT ORDER SNIPPET / TOAST ===================== */
.recent-order-toast{
  position:fixed; left:18px; bottom:18px; z-index:998; background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-md); padding:12px 16px; display:flex; align-items:center; gap:12px; max-width:320px;
  transform:translateY(140%); opacity:0; transition:transform .5s var(--ease-premium), opacity .5s ease; pointer-events:none;
}
.recent-order-toast.show{transform:translateY(0); opacity:1;}
.recent-order-toast .ro-icon{width:38px; height:38px; border-radius:50%; background:rgba(34,197,94,.12); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;}
.recent-order-toast .ro-name{font-weight:700; font-size:.82rem; color:var(--text-primary); margin-bottom:1px;}
.recent-order-toast .ro-meta{font-size:.72rem; color:var(--text-secondary);}

/* ===================== CHECKOUT ===================== */
.checkout-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 30px; box-shadow:var(--shadow-sm);}
.checkout-panel h4{font-weight:800; font-size:1.15rem; color:var(--text-primary); margin-bottom:20px;}
.form-label-c{font-weight:700; font-size:.85rem; color:var(--text-primary); margin-bottom:6px;}
.form-control-c{
  width:100%; border:1.4px solid var(--border); border-radius:10px; padding:12px 16px; font-size:.92rem; color:var(--text-primary);
  transition:border-color .2s ease, box-shadow .2s ease; background:var(--surface-alt);
}
.form-control-c:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(139,92,246,.22); background:var(--surface);}
.form-control-c.is-invalid{border-color:var(--danger);}
.form-control-c::placeholder{color:var(--text-secondary); opacity:.7;}
.field-error{color:var(--danger); font-size:.76rem; margin-top:5px; display:none;}
.field-error.show{display:block;}

.pay-method{
  display:flex; align-items:center; gap:12px; border:1.4px solid var(--border); border-radius:12px; padding:14px 16px; cursor:pointer;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) ease;
}
.pay-method:hover{border-color:var(--primary-light); background:rgba(139,92,246,.05);}
.pay-method:active{transform:scale(.99);}
.pay-method.active{border-color:var(--primary); background:rgba(139,92,246,.14);}
.pay-method input{accent-color:var(--primary); width:18px; height:18px;}
.pay-method .pm-label{font-weight:700; font-size:.88rem; color:var(--text-primary);}
.pay-method .pm-sub{font-size:.76rem; color:var(--text-secondary); margin-top:1px;}

.order-summary-card{
  background:var(--secondary); color:var(--text-on-dark); border-radius:var(--radius-lg); padding:28px 28px; position:sticky; top:110px;
  box-shadow:var(--shadow-md);
}
.order-summary-card h4{font-weight:800; font-size:1.1rem; margin-bottom:18px;}
.os-item{display:flex; gap:14px; align-items:center; padding-bottom:16px; border-bottom:1px dashed var(--border-on-dark); margin-bottom:16px;}
.os-item img{width:64px; height:64px; border-radius:10px; object-fit:cover; background:rgba(255,255,255,.08);}
.os-item .os-name{font-weight:700; font-size:.9rem;}
.os-item .os-meta{font-size:.75rem; color:var(--text-on-dark-muted); margin-top:2px;}
.os-item .os-price{font-weight:700; font-size:.9rem; margin-left:auto;}
.os-row{display:flex; justify-content:space-between; font-size:.86rem; color:var(--text-on-dark-muted); padding:6px 0;}
.os-row.total{color:#fff; font-weight:800; font-size:1.1rem; border-top:1px solid var(--border-on-dark); margin-top:10px; padding-top:14px;}
.os-coupon{margin-top:8px; color:var(--accent); font-weight:700; font-size:.85rem;}
.os-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.os-badges span{display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--text-on-dark-muted); background:rgba(255,255,255,.06); padding:5px 10px; border-radius:50px;}

/* whatsapp support strip */
.wa-strip{text-align:center; background:var(--surface-alt); border-radius:var(--radius-lg); padding:34px 28px; max-width:640px; margin:0 auto;}
.wa-strip h5{font-weight:700; font-size:1.05rem; color:var(--text-primary);}
.wa-strip p{color:var(--text-secondary); font-size:.9rem; margin-top:6px;}
.wa-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--success); color:#fff; font-weight:700; padding:11px 26px; border-radius:50px; margin-top:14px; font-size:.9rem; box-shadow:0 8px 18px -8px rgba(34,197,94,.45);
  transition:transform var(--dur-base) var(--ease-premium), filter var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.wa-btn:hover{color:#fff; filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(34,197,94,.55);}
.wa-btn:active{transform:translateY(-1px) scale(.97);}
.wa-btn i{display:inline-block; animation:waFloat 2.6s ease-in-out infinite;}

/* ===================== FOOTER ===================== */
.site-footer{background:#060010; color:var(--text-on-dark-muted); padding-top:60px;}
.footer-brand img{height:40px; margin-bottom:12px;}
.footer-brand p{font-size:.85rem; line-height:1.7; max-width:280px;}
.footer-social{display:flex; gap:10px; margin-top:16px;}
.footer-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s ease;}
.footer-social a:hover{background:var(--primary-light);}
.footer-col h6{color:#fff; font-weight:700; font-size:.9rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:.6px;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:.85rem; color:var(--text-on-dark-muted); transition:color .2s ease;}
.footer-col ul li a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border-on-dark); margin-top:40px; padding:20px 0; text-align:center; font-size:.78rem; color:rgba(255,255,255,.4);}

/* ===================== STICKY MOBILE CTA ===================== */
.mobile-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:997; background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.35); padding:10px 14px; display:none; align-items:center; justify-content:space-between; gap:12px;
  transform:translateY(100%); transition:transform .4s var(--ease-premium);
}
.mobile-sticky-cta.show{transform:translateY(0);}
.mobile-sticky-cta .ms-price{font-weight:800; color:var(--text-primary); font-size:1rem;}
.mobile-sticky-cta .ms-price small{display:block; font-size:.65rem; color:var(--text-secondary); text-decoration:line-through; font-weight:600;}

/* ===================== BACK TO TOP ===================== */
.back-to-top{
  position:fixed; bottom:24px; right:18px; z-index:999; width:44px; height:44px; border-radius:50%; border:none;
  background:var(--primary); color:#fff; font-size:1.05rem;
  box-shadow:0 10px 22px -8px rgba(124,58,237,.5); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.back-to-top:hover{background:var(--primary-dark);}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}

/* helpers */
.text-primary-c{color:var(--primary) !important;}
.text-accent-c{color:var(--accent) !important;}
.bg-soft{background:var(--surface-alt);}

/* =====================================================================
   ACCESSIBILITY — respect prefers-reduced-motion.
   Content becomes immediately visible (no waiting on a transition that
   will never fire) and every decorative/looping animation is disabled.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal], [data-reveal-group] > *, [data-reveal-left], [data-reveal-right], .pc-new-price{
    opacity:1 !important; transform:none !important;
  }
  .hero-visual{animation:none !important;}
}