/* =====================================================================
   WPilot AI — Landing Page Styles
   ---------------------------------------------------------------------
   1.  Design tokens (:root)
   2.  Reset & base elements
   3.  Layout helpers & shared components
   4.  Top bar (flash sale + countdown)
   5.  Hero
   6.  Social proof popup
   7.  Trust stats
   8.  Proof bar
   9.  Pain section
   10. Solution reveal
   11. Product demo collage
   12. Live activity feed
   13. Plugins bento
   14. A day with WPilot AI
   15. Money saved
   16. Philosophy sections
   17. Before / after
   18. AI era hook
   19. Value comparison
   20. Testimonials
   21. Income opportunity
   22. Pricing
   23. Bonuses
   24. Guarantee
   25. Who it's for
   26. FAQ
   27. Final CTA
   28. Footer
   29. Animation states
   30. Responsive
   31. Exit-intent popup
   ===================================================================== */

/* 1. DESIGN TOKENS ---------------------------------------------------- */
:root {
  --ink: #0a0e1a;
  --ink-2: #1a1f2e;
  --paper: #ffffff;
  --paper-2: #f8fafc;
  --paper-3: #f1f5f9;
  --line: #e2e8f0;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --body: #334155;
  --indigo: #4f46e5;
  --indigo-2: #7c3aed;
  --violet: #9333ea;
  --emerald: #10b981;
  --emerald-2: #059669;
  --amber: #f59e0b;
  --amber-2: #d97706;
  --coral: #f87171;
  --rose: #dc2626;
  --sky: #0ea5e9;
  --cyan: #06b6d4;

  --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
  --gradient-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warm: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 40px 100px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 20px 60px rgba(79, 70, 229, 0.25);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-full: 100px;

  --section-pad: clamp(64px, 8vw, 100px);
  --maxw: 1200px;
}

/* 2. RESET & BASE ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--body);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; }
h3 { font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; }

p { color: var(--body); font-size: 17px; line-height: 1.7; }

a { color: var(--indigo); text-decoration: none; transition: color 0.2s ease; }

:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.5); outline-offset: 3px; border-radius: 6px; }
.d-none {
    display: none;
}
/* 3. LAYOUT HELPERS & SHARED COMPONENTS ------------------------------ */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }

section { padding: var(--section-pad) 0; position: relative; }

/* Gradient text utilities */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-emerald-text {
  background: var(--gradient-emerald);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Reusable pink → blue text gradient */
.pink-blue-text-gradient {
  background: linear-gradient(90deg, #E01AFF 0%, #1295FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yellow-text-gradient {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Reusable lime-yellow accent color */
.text-lime { color: #E1FF00; }


/* Eyebrow badge */
/* .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: var(--radius-full); border: 1px solid #ddd6fe;
} */
 .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: #ede9fe78;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    border: 1px solid #d4cbff;
    text-align: center;
}
.eyebrow.dark-section { background: rgba(124, 58, 237, 0.2); border-color: rgba(139, 92, 246, 0.45); color: #c4b5fd; }
.eyebrow.green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857; border-color: #a7f3d0; }
.eyebrow.rose  { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; border-color: #fecaca; }

/* Section header block */
.section-header { text-align: center;
  /* max-width: 780px; */
  margin: 0 auto 64px; position: relative; }
.section-header h2 { font-size: clamp(24px, 4.6vw, 52px); margin: 16px 0 10px; position: relative; }

.section-header p { font-size: 20px; color: var(--muted); }

/* Dark-section headers get warm anchors */
.pain .section-header::before,
.value-section .section-header::before,
.final-cta .section-header::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

/* Tighter transition between pain -> solution */
.pain { padding-bottom: 40px; }
.solution { padding-top: 80px; padding-bottom: 78px; margin-top: -1px; }

/* 4. TOP BAR ---------------------------------------------------------- */
.top-bar {
  background: linear-gradient(60.59deg, #6E33FF 70.69%, #0BB7D3 111.66%), #090922;
  color: #fff; padding: 10px 24px; position: relative; z-index: 110;
  box-shadow: 0 2px 20px rgba(79, 70, 229, 0.3);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 380ms cubic-bezier(0.4, 0, 0.2, 1),
              background 380ms ease,
              backdrop-filter 380ms ease;
  transform: translateY(0) translateZ(0);
  will-change: transform;
}
/* Placeholder keeps page flow from jumping while the bar is position:fixed */
.top-bar-placeholder { height: 0; }
/* While this is present, the transform jump to/from off-screen happens
   instantly (no transition) — only .tb-visible toggling should animate. */
.top-bar.tb-no-anim { transition: none !important; }
/* Sticky state: pinned to the viewport, starts translated fully off-screen
   above so it can slide down smoothly instead of snapping into place. */
.top-bar.tb-fixed {
  position: fixed; top: 0; left: 0; right: 0;
  transform: translateY(-100%) translateZ(0);
}
.top-bar.tb-fixed.tb-visible {
  transform: translateY(0) translateZ(0);
  background: linear-gradient(60.59deg, rgba(110, 51, 255, 0.92) 70.69%, rgba(11, 183, 211, 0.92) 111.66%), rgba(9, 9, 34, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(9, 9, 34, 0.28);
}
/* Subtle dot texture fading in from the right, echoing the reference bar */
.top-bar::after {
  content: ''; position: absolute; inset: 0 0 0 auto; width: 220px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  pointer-events: none;
}
.top-bar-vector {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: 126px; height: 46px; display: block;
  pointer-events: none;
}
.top-bar.tb-fixed .top-bar-vector { display: none; }
.top-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }

.tb-block { display: inline-flex; align-items: center; gap: 10px; }
.tb-coupon-group { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.tb-line-main { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }

.tb-coupon-row { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); font-weight: 500; }
.tb-coupon-row .code {
  display: inline-block; padding: 4px 14px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.06); border: 1.5px dashed rgba(255, 255, 255, 0.55);
  color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; letter-spacing: 1.5px; font-size: 13px;
}

.tb-save-block .tb-save { color: #ffd055; font-weight: 800; }

.tb-countdown-wrap { display: inline-flex; align-items: center; gap: 10px; }
.tb-countdown-label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.tb-countdown { display: inline-flex; gap: 8px; }
.tb-count-box {
  background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px;
  padding: 6px 12px; min-width: 48px; text-align: center;
}
.tb-count-num { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: 18px; color: #fff; line-height: 1; }
.tb-count-label { font-size: 9px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-top: 3px; }
.tb-buy {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #4c1d95; padding: 11px 22px; border-radius: var(--radius-full);
  font-weight: 800; font-size: 14px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); transition: transform 0.25s ease, background 0.25s ease;
}
.tb-buy:hover { transform: translateY(-1px); background: #fbbf24; color: #4c1d95; }

/* 5. HERO ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; text-align: center; isolation: isolate;
  padding: 70px 0 80px;
  /* #0a0520 = dominant color of banner_bg.png — shows while the image loads (no white flash) */
  /* Dark overlay (top layer) blends the banner artwork into the page's own dark-violet tone,
     darkening more toward the center so the headline/CTA always keep strong contrast. */
  background:
    linear-gradient(180deg, rgba(10, 5, 32, 0.45) 0%, rgba(10, 5, 32, 0.15) 32%, rgba(10, 5, 32, 0.6) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(10, 5, 32, 0) 0%, rgba(10, 5, 32, 0.55) 60%, rgba(10, 5, 32, 0.9) 100%),
    url('images/banner/banner_bg.webp') center top / cover no-repeat #0a0520;
}

/* Banner artwork already contains the ambient decorations */
.hero-bg, .hero-char { display: none; }

/* Ambient background layer */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.hero-orb.orb-1 { width: 560px; height: 560px; top: -180px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124, 58, 237, 0.45), transparent 70%); }
.hero-orb.orb-2 { width: 420px; height: 420px; top: 40px; left: -120px; background: radial-gradient(circle, rgba(37, 99, 235, 0.35), transparent 70%); }
.hero-orb.orb-3 { width: 420px; height: 420px; bottom: -120px; right: -100px; background: radial-gradient(circle, rgba(6, 182, 212, 0.28), transparent 70%); }
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 78%);
}

/* Ambient side character accents */
.hero-char { position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; opacity: 0.28; pointer-events: none; }
.hero-char.left  { left: -70px; width: 250px; height: 380px; }
.hero-char.right { right: -70px; width: 250px; height: 380px; }
.hero-char img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 24px; filter: saturate(0.65);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}

.hero-inner { position: relative; z-index: 2; max-width: 1220px; margin: 0 auto; padding: 0 24px; }

/* Floating feature vectors */
.hero-vectors { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Zoom-in "pop" entrance for each vector */
@keyframes hvPop {
  0%   { opacity: 0; transform: scale(0.2); }
  65%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes heroVectorsFade { from { opacity: 0; } to { opacity: 1; } }
.hero-vectors .hv { position: absolute; display: block; filter: drop-shadow(0 12px 26px rgba(10, 4, 30, 0.35)); }
.hv.v1  { top:4%;  left: 3%;   opacity: 0; animation: hvPop 0.5s ease-out both 0.15s, heroFloatB 6s   ease-in-out infinite 0.65s; }
.hv.v2  { top: 7%;  left: 23%;  opacity: 0; animation: hvPop 0.5s ease-out both 0.27s, heroFloatA 5.5s ease-in-out infinite 0.77s; }
.hv.v3  { top: 15%; right: 13%; opacity: 0; animation: hvPop 0.5s ease-out both 0.39s, heroFloatC 6.5s ease-in-out infinite 0.89s; }
.hv.v4  { top: 5%;  right: 3%;  opacity: 0; animation: hvPop 0.5s ease-out both 0.51s, heroFloatA 6s   ease-in-out infinite 1.01s; }
.hv.v5  { top: 27%; left: 7%;  opacity: 0; animation: hvPop 0.5s ease-out both 0.63s, heroFloatC 7s   ease-in-out infinite 1.13s; }
.hv.v6  { top: 29%; right: 5%;  opacity: 0; animation: hvPop 0.5s ease-out both 0.75s, heroFloatB 6.2s ease-in-out infinite 1.25s; }
.hv.v7  { top: 47%; left: 2%;   opacity: 0; animation: hvPop 0.5s ease-out both 0.87s, heroFloatA 5.8s ease-in-out infinite 1.37s; }
.hv.v8  { top: 50%; right: 14%; opacity: 0; animation: hvPop 0.5s ease-out both 0.99s, heroFloatC 6.4s ease-in-out infinite 1.49s; }
.hv.v9  { top: 61%; left: 17%;  opacity: 0; animation: hvPop 0.5s ease-out both 1.11s, heroFloatB 6.8s ease-in-out infinite 1.61s; }
.hv.v10 { top: 73%; right: 2%;  opacity: 0; animation: hvPop 0.5s ease-out both 1.23s, heroFloatA 6.6s ease-in-out infinite 1.73s; }
@keyframes heroFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes heroFloatB { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(10px, -13px) rotate(4deg); } }
@keyframes heroFloatC { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-11px, 14px) rotate(-4deg); } }
@media (max-width: 1100px) { .hero-vectors { display: none; } }

/* Brand lockup */
.hero-brand { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 22px; }
.hero-logo { width: clamp(180px, 34vw, 300px); height: auto; display: block; }
.hero-brand-mark {
  width: 54px; height: 54px; border-radius: 15px; background: var(--gradient-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; color: #fff; font-size: 24px;
  box-shadow: 0 20px 50px rgba(79, 70, 229, 0.4); position: relative;
}
.hero-brand-mark::before { content: ''; position: absolute; inset: -8px; background: var(--gradient-primary); border-radius: 24px; opacity: 0.3; filter: blur(16px); z-index: -1; }
.hero-brand-text { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: clamp(44px, 6.5vw, 76px); line-height: 0.9; letter-spacing: -0.05em; }
.hero-brand-text .brand-ai    { background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-brand-text .brand-press { color: var(--ink); }

/* Sub-hook pill */
/* Sub-hook pill — parent box (background) + inner text */
.hero-pill-box {
  width: 663px; max-width: 100%; height: 91px; margin: 0 auto 30px;
  display: flex; align-items: center; justify-content: center; padding: 0 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(23, 1, 72, 0.55) 0%, rgba(2, 4, 32, 0.55) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(146, 128, 242, 0.5);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero-pill-text {
  margin: 0; font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; font-size: clamp(16px, 4vw, 22px);
  line-height: 1.45; letter-spacing: -0.03em; text-align: center;
}


/* Dramatic headline */
.hero-headline {
  font-family: "Be Vietnam Pro", sans-serif; font-weight: 800;
  font-size: clamp(24px, 3.5vw, 60px); line-height: 1.2; letter-spacing: -0.03em; text-align: center;
  color: #FFFFFF; margin: 0 auto 34px; max-width: 1180px;
}
.hero-headline > span { display: block; margin-bottom: 10px; }
.hero-headline .hi-tail { font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; font-size: clamp(18px, 3.2vw, 30px); line-height: 1.45; letter-spacing: -0.03em; text-align: center; margin-top: 2px; }
.hero-headline .hi-blue { color: #2563eb; }
.hero-headline .hi-cyan { color: #06b6d4; }
.hero-headline .hi-green { color: #10b981; }
.hero-headline .hi-underline { position: relative; display: inline-block; }
.hero-headline .hi-underline::after {
  content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 12px;
  background: #fbbf24; opacity: 0.55; z-index: -1; border-radius: 2px;
}
.hero-headline .hi-money {
  display: inline-block; margin: 0 2px; padding: 3px 16px; color: #fff; border-radius: 10px;
  background: linear-gradient(45deg, #6E33FF 26.19%, #0BB7D3 77.95%);
  box-shadow: 0 10px 26px rgba(110, 51, 255, 0.35);
}

/* Hero video — glass frame in the site's violet/blue/cyan palette (matches .section-cta-btn's glow) */
.ma_video_wrapper {
  background-image:
    linear-gradient(180deg, rgba(20, 10, 45, 0.92), rgba(12, 6, 30, 0.96)),
    linear-gradient(120deg, #8F33FF -4.43%, #2575FC 50%, #4CC9FF 106.32%);
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 10px;
  margin: 12px auto 36px;
  max-width: 860px;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 20px 60px rgba(79, 70, 229, 0.28), 0 0 50px rgba(37, 117, 252, 0.16);
}

.ma_video_section .ma_video_wrapper{
  max-width: 100%;
   margin: 36px auto 36px;
}
.ma-tutorial-video {
  transition: all 0.5s ease-in-out;
  position: relative;
  z-index: 9;
  background: linear-gradient(120deg, rgba(143, 51, 255, 0.1) -4.43%, rgba(37, 117, 252, 0.1) 50%, rgba(76, 201, 255, 0.1) 106.32%);
  border-radius: 10px;
}
.ma-tutorial-video iframe { border-radius: 10px; }

/* Animated "Watch Now" accent */
.geo_banner_watch_vector {
  position: absolute;
  left: -13%;
  top: 30%;
  animation: geoWatchZigZag 3s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 20;
}
.geo_banner_watch_vector img { display: block; }
@keyframes geoWatchZigZag {
  0%     { transform: translate(0, 0); }
  16.65% { transform: translate(8px, 8px); }
  33.3%  { transform: translate(-6px, -6px); }
  49.95% { transform: translate(4px, 4px); }
  66.6%  { transform: translate(-2px, -2px); }
  83.25% { transform: translate(1px, 1px); }
  100%   { transform: translate(0, 0); }
}
@media (max-width: 640px) {
  .ma_video_wrapper { max-width: 92%; }
  .geo_banner_watch_vector { width: 60px; left: -4px; top: -28px; }
  .hero-inner {
    padding: 0 8px;
}


}
@media (max-width: 420px) {
  .geo_banner_watch_vector { width: 44px; left: -2px; top: -22px; }
}

/* Reusable CTA buttons */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 20px;
  padding:16px 46px; border-radius: var(--radius-full); letter-spacing: 0.3px;
  position: relative; overflow: hidden; cursor: pointer; border: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-yellow { background: linear-gradient(180deg, #FFD01B 0%, #FFA301 100%); color: #fff; text-shadow: 0 1px 2px rgba(120, 60, 0, 0.28); box-shadow: 0 18px 44px rgba(255, 163, 1, 0.42); }
.btn-yellow:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 26px 56px rgba(255, 163, 1, 0.55); }
.btn-default { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; box-shadow: 0 18px 44px rgba(79, 70, 229, 0.42); }
.btn-default:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 26px 56px rgba(79, 70, 229, 0.55); }

/* --------------------------------------------------------------------
   Premium liquid-gold treatment for .btn-yellow — layered on top of the
   rules above with zero change to size/padding/radius/font/gradient/text.
   Every layer here is a pseudo-element or box-shadow so the real box
   model (and the anchor's own hit area) never moves.
   -------------------------------------------------------------------- */
@property --flow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn-yellow {
  --flow-angle: 0deg;
  isolation: isolate;
  /* extra shadow layers stacked after the required base shadow — glass rim + soft depth */
  box-shadow:
    0 18px 44px rgba(255, 163, 1, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -14px 22px rgba(140, 70, 0, 0.16),
    0 0 22px rgba(255, 224, 130, 0.28);
  animation: btn-yellow-breathe 3.6s ease-in-out infinite;
}
/* Animated flowing-gold ring — conic gradient masked down to a hollow outline
   so it never covers the label, and never changes the button's real box size. */
.btn-yellow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--flow-angle),
    transparent 0%,
    rgba(255, 248, 213, 0) 2%,
    #FFF8D5 10%,
    #FFE27A 22%,
    #FFD01B 34%,
    #FFB000 46%,
    rgba(255, 176, 0, 0) 58%,
    transparent 100%);
  opacity: 0.9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: flow-rotate 3s linear infinite;
  pointer-events: none;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
/* Shine sweep — clipped by .btn-cta's own overflow:hidden, so it stays inside the pill */
.btn-yellow::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  z-index: 0;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: btn-yellow-shine 3.6s ease-in-out infinite;
}
.btn-yellow-label { position: relative; z-index: 1; }
.btn-yellow:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 26px 56px rgba(255, 163, 1, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -14px 22px rgba(140, 70, 0, 0.2),
    0 0 34px rgba(255, 224, 130, 0.5);
}
.btn-yellow:hover::before { opacity: 1; filter: brightness(1.2); }
@keyframes flow-rotate { to { --flow-angle: 360deg; } }
@keyframes btn-yellow-shine {
  0%   { left: -60%; }
  18%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes btn-yellow-breathe {
  0%, 100% {
    box-shadow:
      0 18px 44px rgba(255, 163, 1, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -14px 22px rgba(140, 70, 0, 0.16),
      0 0 22px rgba(255, 224, 130, 0.28);
  }
  50% {
    box-shadow:
      0 20px 48px rgba(255, 163, 1, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -14px 22px rgba(140, 70, 0, 0.18),
      0 0 36px rgba(255, 224, 130, 0.48);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-yellow, .btn-yellow::before, .btn-yellow::after { animation: none; }
}

/* Hero offer line + badges */
.hero-offer-line { font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; font-size: clamp(22px, 5vw, 50px); line-height: 1.2; letter-spacing: 0; text-align: center; color: #FFFFFF; margin: 6px 0 22px; }
.hero-offer-line .just-price { font-family: "Be Vietnam Pro", sans-serif; font-weight: 900; font-size: clamp(26px, 5vw, 50px); line-height: 1.2; letter-spacing: 0; color: #E1FF00; }
.hero-inner .btn-cta { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: clamp(20px, 4.2vw, 40px); letter-spacing: 0; text-align: center; }
.hero-badges { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }

/* Primary CTA */
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff;
  font-weight: 800; font-size: 20px; padding: 22px 48px; border-radius: var(--radius-full);
  letter-spacing: 0.3px; position: relative; overflow: hidden;
  box-shadow: 0 20px 55px rgba(79, 70, 229, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-cta::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transition: left 0.6s ease;
}
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 28px 70px rgba(79, 70, 229, 0.55); color: #fff; }
.hero-cta:hover::after { left: 120%; }

/* Trust indicators */
.hero-trust-row { display: flex; gap: 14px 26px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.hero-trust-row span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--body);
  padding: 8px 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line);
  border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
}
.hero-trust-row .ti-ico { width: 17px; height: 17px; flex-shrink: 0; display: block; }

/* 6. SOCIAL PROOF POPUP ---------------------------------------------- */
.social-proof-pop {
  position: fixed; bottom: 24px; left: 24px; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--indigo);
  border-radius: 12px; padding:10px 22px 10px 12px; max-width: 300px; font-size: 13px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
  opacity: 0; transform: translateX(-120%); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.social-proof-pop.is-visible {
  opacity: 1; transform: translateX(0); pointer-events: auto;
  animation: slideInLeft 0.6s ease-out both;
}
.spp-close {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.spp-close:hover { background: var(--paper-2); }
.spp-row { padding: 3px 0; color: var(--body); font-size: 10px; }
.spp-row strong { color: var(--ink); }
.spp-row .spp-loc { color: var(--indigo); }
.spp-row .spp-verified { color: var(--emerald); }
@keyframes slideInLeft { from { transform: translateX(-120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* 7. TRUST STATS ------------------------------------------------------ */
.trust-stats .container { max-width: 1300px; }
.trust-stats { background: #fff; padding: 80px 0 74px; position: relative; overflow: hidden; }
.trust-stats::before, .trust-stats::after {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  filter: blur(90px); opacity: 0.55; z-index: 0; pointer-events: none;
}
.trust-stats::before { background: radial-gradient(circle, rgba(124, 58, 237, 0.16), transparent 70%); top: 8%; left: -130px; }
.trust-stats::after  { background: radial-gradient(circle, rgba(6, 182, 212, 0.13), transparent 70%); bottom: -40px; right: -130px; }
.trust-stats .container { position: relative; z-index: 1; }
.trust-stats .section-header { margin-bottom: 44px; }
.trust-stats .section-header p strong { color: #6d28d9; }
.ts-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ts-eyebrow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient-primary); color: #fff; font-size: 10px;
}

.ts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 auto; }
.ts-item {
  position: relative; text-align: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: 34px 22px 30px;
  box-shadow: 0 20px 45px -15px rgba(30, 27, 75, 0.16), 0 2px 10px rgba(30, 27, 75, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ts-item:hover { transform: translateY(-6px); }

/* Subtle theme-colored wash + matching border per card, echoing each icon */
.ts-item:nth-child(1) { border-color: rgba(16, 185, 129, 0.28); background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), #fff 55%); }
.ts-item:nth-child(2) { border-color: rgba(124, 58, 237, 0.28); background: linear-gradient(180deg, rgba(124, 58, 237, 0.07), #fff 55%); }
.ts-item:nth-child(3) { border-color: rgba(59, 130, 246, 0.28); background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), #fff 55%); }
.ts-item:nth-child(4) { border-color: rgba(245, 158, 11, 0.3); background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), #fff 55%); }

/* Hover: background + border intensify in that same card's theme color */
.ts-item:nth-child(1):hover { border-color: #10b981; background: linear-gradient(180deg, rgba(16, 185, 129, 0.16), #fff 60%); box-shadow: 0 28px 56px -14px rgba(16, 185, 129, 0.3), 0 6px 16px rgba(16, 185, 129, 0.1); }
.ts-item:nth-child(2):hover { border-color: #7c3aed; background: linear-gradient(180deg, rgba(124, 58, 237, 0.16), #fff 60%); box-shadow: 0 28px 56px -14px rgba(124, 58, 237, 0.3), 0 6px 16px rgba(124, 58, 237, 0.1); }
.ts-item:nth-child(3):hover { border-color: #3b82f6; background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), #fff 60%); box-shadow: 0 28px 56px -14px rgba(59, 130, 246, 0.3), 0 6px 16px rgba(59, 130, 246, 0.1); }
.ts-item:nth-child(4):hover { border-color: #f59e0b; background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), #fff 60%); box-shadow: 0 28px 56px -14px rgba(245, 158, 11, 0.32), 0 6px 16px rgba(245, 158, 11, 0.12); }

.ts-icon {margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.ts-num { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(24px, 4vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; background: var(--ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-divider { position: relative; display: block; width: 56px; height: 2px; margin: 16px auto; background: var(--line); border-radius: 2px; }
.ts-divider::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--gradient-primary);
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(124, 58, 237, 0.45);
}
.ts-item:nth-child(1) .ts-divider { background: #a7f3d0; }
.ts-item:nth-child(1) .ts-divider::after { background: #10b981; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(16, 185, 129, 0.45); }
.ts-item:nth-child(2) .ts-divider { background: #ddd6fe; }
.ts-item:nth-child(2) .ts-divider::after { background: #7c3aed; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(124, 58, 237, 0.45); }
.ts-item:nth-child(3) .ts-divider { background: #bfdbfe; }
.ts-item:nth-child(3) .ts-divider::after { background: #3b82f6; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(59, 130, 246, 0.45); }
.ts-item:nth-child(4) .ts-divider { background: #fde68a; }
.ts-item:nth-child(4) .ts-divider::after { background: #f59e0b; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(245, 158, 11, 0.45); }

.ts-label { font-size: 15px; color: var(--muted); font-weight: 400; letter-spacing: 0.5px; }
.ts-hl { font-weight: 600; }
.ts-item:nth-child(1) .ts-hl { color: #059669; }
.ts-item:nth-child(2) .ts-hl { color: #7c3aed; }
.ts-item:nth-child(3) .ts-hl { color: #2563eb; }
.ts-item:nth-child(4) .ts-hl { color: #d97706; }

/* 8. PROOF CARD (merged trusted-by / compatibility bar) --------------- */
.proof-card {
  max-width: 1100px; margin: 44px auto 0;
  background: #fbfaff; border: 1px solid var(--line); border-radius: 28px;
  padding: 30px 32px; box-shadow: 0 16px 40px rgba(30, 27, 75, 0.06);
  text-align: center;
}
.proof-card p { color: var(--muted); font-size: 17px; font-weight: 500; margin-bottom: 22px; }
.proof-card p strong { color: #6d28d9; }
.proof-logos { display: flex; justify-content: center; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin: 0 auto; }
.proof-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; color: var(--ink);
  font-size: 15px; letter-spacing: -0.01em;
  padding: 8px 18px 8px 8px; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.proof-logo-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper-3);
}
.proof-logo img { width: auto; height: 18px; max-width: 22px; object-fit: contain; display: block; }
.proof-logo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124, 58, 237, 0.12); }

/* 9. PAIN SECTION ----------------------------------------------------- */
.pain {
  position: relative; color: #fff; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 14, 26, 0.6) 0%, rgba(20, 10, 18, 0.3) 45%, rgba(10, 14, 26, 0.72) 100%),
    url('images/hard_truth/bg.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #0a0e1a 0%, #1a0a12 50%, #2a0a12 100%);
}
.pain::before { content: ''; position: absolute; top: -200px; left: -100px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(220, 38, 38, 0.18), transparent 65%); pointer-events: none; }
.pain::after  { content: ''; position: absolute; bottom: -300px; right: -100px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(239, 68, 68, 0.12), transparent 65%); pointer-events: none; }
.pain .container { position: relative; z-index: 2; }
.pain .section-header h2 { color: #fff; }
.pain .section-header p { color: rgba(255, 255, 255, 0.7); }
.pain .eyebrow.rose { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
.pain .section-header h2 .bleed { position: relative; display: inline-block; background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }


.pain-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.pain-stat { position: relative; overflow: hidden; text-align: center; padding: 34px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(239, 68, 68, 0.2); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; }
.pain-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #ef4444, #dc2626, transparent); }
.pain-stat::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(239, 68, 68, 0.15), transparent 60%); pointer-events: none; }
.pain-stat:hover { transform: translateY(-6px); border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 20px 40px rgba(239, 68, 68, 0.2); background: rgba(255, 255, 255, 0.05); }
.pain-stat .num { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(36px, 6vw, 52px); font-weight: 900; line-height: 1; margin-bottom: 10px; letter-spacing: -0.03em; background: linear-gradient(135deg, #ef4444, #dc2626); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pain-stat .num small { font-size: 24px; }
.pain-stat p { font-size: 15px; color: rgba(255, 255, 255, 0.8); line-height: 1.55; }
.pain-stat strong { color: #fff; font-weight: 700; }

/* Chaos subscription tabs */
.chaos-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 40px auto 0; max-width: 900px; }
.chaos-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(239, 68, 68, 0.2); backdrop-filter: blur(10px); transition: border-color 0.25s ease, background 0.25s ease; }
.chaos-tab:hover { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.1); }
.chaos-tab .ct-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: pulseDot 1.5s infinite; }
.chaos-tab .ct-bill { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 800; font-size: 10px; color: #fff; background: linear-gradient(90deg, #ef4444, #dc2626); }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Total damage callout */
.damage-box { max-width: 720px; margin: 50px auto 0; padding: 32px; text-align: center; border-radius: 20px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05)); border: 1px solid rgba(239, 68, 68, 0.3); backdrop-filter: blur(10px); }
.damage-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fca5a5; margin-bottom: 12px; }
.damage-amount { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(48px, 6vw, 72px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(135deg, #ef4444, #dc2626); -webkit-background-clip: text; background-clip: text; color: transparent; }
.damage-sub { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.damage-sub strong { color: #fff; }
.damage-note { margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgba(239, 68, 68, 0.3); font-size: 16px; font-style: italic; color: rgba(255, 255, 255, 0.85); }
.damage-note strong { color: #fbbf24; font-style: normal; }

/* 10. SOLUTION REVEAL ------------------------------------------------- */
.solution {
   background: linear-gradient(180deg, #f3f0ff 0%, #faf8ff 50%, #f4f1ff 100%);
  text-align: center; overflow: hidden; }
.solution::before { content: ''; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(124, 58, 237, 0.10), transparent 70%); pointer-events: none; }
.solution-inner { max-width: 1500px; margin: 0 auto; position: relative; z-index: 2; }
.solution-inner .eyebrow { margin-bottom: 26px; }
.product-name-big { margin: 0 0 18px; }
.product-name-big img { width: 100%; max-width: 460px; height: auto; display: inline-block; }
.solution-tagline { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--ink); margin-bottom: 18px; line-height: 1.3; }
.solution-tagline .grad-brain { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.solution-sub { font-size: 18px; color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.6; }
.solution-sub strong { color: var(--ink); font-weight: 700; display: block; margin-top: 10px; }

/* Divider label */
.solution-divider { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 780px; margin: 48px auto 32px; color: #7c3aed; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.solution-divider::before, .solution-divider::after { content: ''; flex: 1; height: 1px; }
.solution-divider::before { background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.4)); }
.solution-divider::after  { background: linear-gradient(90deg, rgba(124, 58, 237, 0.4), transparent); }

/* Plugins overview mockup */
.solution-mockup { max-width: 1500px; margin: 0 auto; }
.solution-mockup img { width: 100%; height: auto; display: block; border-radius: 24px; }

/* CTA + trust line — button now uses the shared .section-cta-btn treatment */
.solution-trust { margin-top: 22px; font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; }

/* Shared plugin icon backgrounds (used by solution row + plugin cards) */
.p-icon-bg-1  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.p-icon-bg-2  { background: linear-gradient(135deg, #f3e8ff, #ddd6fe); color: #6d28d9; }
.p-icon-bg-3  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857; }
.p-icon-bg-4  { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #c2410c; }
.p-icon-bg-5  { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #be185d; }
.p-icon-bg-6  { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.p-icon-bg-7  { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #a16207; }
.p-icon-bg-8  { background: linear-gradient(135deg, #cffafe, #a5f3fc); color: #0e7490; }
.p-icon-bg-9  { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }
.p-icon-bg-10 { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4338ca; }

/* 11. PRODUCT DEMO COLLAGE ------------------------------------------- */
.demo-section { background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); overflow: hidden; }
.demo-section::before { content: ''; position: absolute; top: 100px; left: 5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(79, 70, 229, 0.08), transparent 65%); pointer-events: none; }
.demo-collage { position: relative; max-width: 1100px; margin: 60px auto 0; height: 600px; }
.demo-caption { text-align: center; margin-top: 60px; font-size: 14px; color: var(--muted); font-style: italic; }

.mock { position: absolute; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(15, 23, 42, 0.05); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.mock:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2); z-index: 10; }
.mock-header { background: var(--paper-2); padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.mock-header .m-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-header .m-dot:nth-child(1) { background: #ef4444; }
.mock-header .m-dot:nth-child(2) { background: #f59e0b; }
.mock-header .m-dot:nth-child(3) { background: #10b981; }
.mock-header .m-title { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 8px; font-family: 'Be Vietnam Pro', sans-serif; }
.mock-body { padding: 16px; }

/* Mock 1 — product editor */
.mock-1 { top: 40px; left: 240px; width: 520px; height: 400px; z-index: 2; transform: rotate(-2deg); }
.mock-1-badge { display: inline-block; padding: 3px 10px; margin-bottom: 10px; border-radius: var(--radius-full); font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; background: linear-gradient(90deg, #4f46e5, #9333ea); }
.mock-1 .field { margin-bottom: 12px; }
.mock-1 .field-label { font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.mock-1 .field-input { background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #1e293b; }
.mock-1 .ai-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #4f46e5, #9333ea); }
.mock-1 .desc-output { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #4f46e5; border-radius: 4px; background: #eef2ff; font-size: 11px; color: #1e1b4b; line-height: 1.5; }
.mock-1 .desc-output .typing::after { content: '|'; animation: blink 1s infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.mock-1-scores { display: flex; gap: 8px; margin-top: 12px; }
.mock-score { flex: 1; padding: 8px; border-radius: 6px; text-align: center; font-size: 10px; }
.mock-score.fraud { background: #ecfdf5; }
.mock-score.fraud strong { color: #047857; }
.mock-score.fraud .mock-score-val { color: #10b981; }
.mock-score.seo { background: #eef2ff; }
.mock-score.seo strong { color: #4f46e5; }
.mock-score.seo .mock-score-val { color: #4f46e5; }
.mock-score-val { display: block; font-size: 18px; font-weight: 900; }

/* Mock 2 — chat assistant */
.mock-2 { top: -20px; right: 20px; width: 340px; height: 320px; z-index: 3; transform: rotate(4deg); }
.mock-2 .chat-msg { display: flex; gap: 8px; margin-bottom: 10px; }
.mock-2 .chat-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #9333ea, #7c3aed); }
.mock-2 .chat-avatar.user { background: var(--muted); }
.mock-2 .chat-bubble { flex: 1; padding: 8px 12px; border-radius: 8px; font-size: 11px; color: #1e293b; line-height: 1.5; background: var(--paper-2); }
.mock-2 .chat-bubble.ai { background: #ede9fe; }

/* Mock 3 — GEO optimizer */
.mock-3 { bottom: 20px; left: 0; width: 320px; height: 300px; z-index: 2; transform: rotate(-4deg); }
.mock-3 .geo-score { font-family: 'Be Vietnam Pro', sans-serif; font-size: 44px; font-weight: 900; text-align: center; line-height: 1; margin: 8px 0; background: linear-gradient(135deg, #10b981, #059669); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mock-3 .geo-label { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.mock-3 .bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 10px; }
.mock-3 .bar-name { width: 60px; color: #475569; font-weight: 600; }
.mock-3 .bar-track { flex: 1; height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
.mock-3 .bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4f46e5, #9333ea); }
.mock-3 .bar-val { width: 30px; text-align: right; color: #1e293b; font-weight: 700; }
.mock-3 .ai-logos { display: flex; gap: 8px; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.mock-3 .ai-chip { padding: 3px 8px; border-radius: var(--radius-full); font-size: 9px; font-weight: 700; color: #4f46e5; background: #eef2ff; }

/* Mock 4 — fraud alert */
.mock-4 { bottom: 80px; right: 80px; width: 260px; padding: 16px; z-index: 4; transform: rotate(6deg); background: #fff; border-left: 4px solid #10b981; }
.mock-4 .fraud-title { font-size: 12px; font-weight: 800; color: #064e3b; margin-bottom: 4px; }
.mock-4 .fraud-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.mock-4 .fraud-score { font-family: 'Be Vietnam Pro', sans-serif; font-size: 28px; font-weight: 900; color: #10b981; line-height: 1; }
.mock-4 .fraud-risk { font-size: 11px; color: #dc2626; font-weight: 700; }
.mock-4 .fraud-meta { font-size: 10px; color: var(--muted); line-height: 1.4; }
.mock-4 .fraud-meta strong { color: #10b981; }

/* Mock 5 — WhatsApp */
.mock-5 { top: 20px; left: 0; width: 240px; padding: 12px; z-index: 3; transform: rotate(-6deg); background: #dcf8c6; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); }
.mock-5 .wa-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.mock-5 .wa-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: #25d366; }
.mock-5 .wa-name { font-size: 11px; font-weight: 800; color: #064e3b; }
.mock-5 .wa-online { font-size: 9px; color: #25d366; }
.mock-5 .wa-msg { font-size: 11px; color: #1f2937; line-height: 1.5; }
.mock-5 .wa-time { font-size: 9px; color: var(--muted); text-align: right; margin-top: 4px; }

/* 12. LIVE ACTIVITY FEED --------------------------------------------- */
.live-feed { background: var(--ink); color: #fff; padding: 60px 0; overflow: hidden; }
.live-feed-header { text-align: center; margin-bottom: 40px; }
.live-feed-header .live-dot { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 14px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6ee7b7; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }
.live-feed-header .live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.live-feed-header h2 { color: #fff; }
.live-feed-header p { color: rgb(255, 255, 255); }
.feed-scroller { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.feed-scroller + .feed-scroller { margin-top: 16px; }
.feed-track { display: flex; gap: 16px; width: max-content; animation: scrollFeed 70s linear infinite; }
.feed-track.reverse { animation-direction: reverse; animation-duration: 80s; }
.feed-track.slow { animation-duration: 90s; }
.feed-scroller:hover .feed-track { animation-play-state: paused; }
.feed-item { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 14px 20px; border-radius: 14px; white-space: nowrap; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.feed-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 14px; color: #fff; background: var(--gradient-primary); }
.feed-text { color: rgba(255, 255, 255, 0.85); font-size: 14px; }
.feed-text strong { color: #fff; }
.feed-text .feed-via { color: #a5f3fc; }
.feed-time { color: rgba(255, 255, 255, 0.4); font-size: 12px; margin-left: 8px; }
@keyframes scrollFeed { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 13. PLUGINS BENTO --------------------------------------------------- */
.plugins-bento { position: relative; overflow: hidden; background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 60%); }
.pb-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plugins-bento .container { position: relative; z-index: 1; }
.pb-decor .pbd.tl { top: 1%;  left: 3%; }
.pb-decor .pbd.tr { top: 2%;  right: 3%; background-image: radial-gradient(rgba(16, 185, 129, 0.4) 2px, transparent 2px); }
.pb-decor .pbd.cl { top: 50%; left: 2%;  transform: translateY(-50%); }
.pb-decor .pbd.cr { top: 50%; right: 2%; transform: translateY(-50%); background-image: radial-gradient(rgba(37, 99, 235, 0.35) 2px, transparent 2px); }
.pb-decor .pbd.bl { bottom: 8%; left: 3%; background-image: radial-gradient(rgba(16, 185, 129, 0.4) 2px, transparent 2px); }
.pb-decor .pbd.br { bottom: 8%; right: 3%; }
.plugin-cards { display: flex; flex-direction: column; gap: 26px; margin: 48px auto 0; max-width: 1200px; }
.plugin-card {
  --pc-accent: #7c3aed; --pc-dark: #6d28d9; --pc-tint: #f6f3ff;
  background: linear-gradient(180deg, var(--pc-tint) 0%, #ffffff 72%);
  border: 1px solid color-mix(in srgb, var(--pc-accent) 20%, transparent); border-radius: var(--radius-lg);
  padding: 40px 46px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 44px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.plugin-card:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--pc-accent) 42%, transparent); }
/* Per-card accent from mockup image color */
.plugin-card:nth-child(2)  { --pc-accent: #f97316; --pc-dark: #ea580c; --pc-tint: #fff6ed; }
.plugin-card:nth-child(3)  { --pc-accent: #ec4899; --pc-dark: #db2777; --pc-tint: #fdf2f8; }
.plugin-card:nth-child(4)  { --pc-accent: #2563eb; --pc-dark: #1d4ed8; --pc-tint: #eff4ff; }
.plugin-card:nth-child(5)  { --pc-accent: #0ea5e9; --pc-dark: #0284c7; --pc-tint: #eef9ff; }
.plugin-card:nth-child(6)  { --pc-accent: #16a34a; --pc-dark: #15803d; --pc-tint: #effdf4; }
.plugin-card:nth-child(7)  { --pc-accent: #0891b2; --pc-dark: #0e7490; --pc-tint: #ecfeff; }
.plugin-card:nth-child(8)  { --pc-accent: #f43f5e; --pc-dark: #e11d48; --pc-tint: #fff1f3; }
.plugin-card:nth-child(9)  { --pc-accent: #8b5cf6; --pc-dark: #7c3aed; --pc-tint: #f5f3ff; }
.plugin-card:nth-child(10) { --pc-accent: #4f46e5; --pc-dark: #4338ca; --pc-tint: #eef0ff; }
/* Alternate rows: even card = image left, content right */
.plugin-card:nth-child(even) { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.plugin-card:nth-child(even) .pc-content { order: 2; }
.plugin-card:nth-child(even) .pc-mockup  { order: 1; }

.pc-content { min-width: 0; }
.pc-content .p-step { display: inline-block; padding: 7px 18px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--pc-accent) 14%, #fff); color: var(--pc-dark); font-weight: 600; font-size: 13px; letter-spacing: 0.4px; margin-bottom: 20px; }
.pc-plugin-logo { margin: 0 0 15px; }
.pc-plugin-logo > img{}
.plugin-card .tagline { color: var(--muted); font-size: 16px; margin: 0 0 24px; line-height: 1.55;}
.plugin-card .p-features { list-style: none; margin: 0 0 26px; padding: 0; }
.plugin-card .p-features li { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; font-size: 15px; color: var(--body); }
.plugin-card .p-features li::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237c3aed'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.plugin-card:nth-child(2)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23f97316'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(3)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ec4899'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(4)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232563eb'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(5)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230ea5e9'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(6)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2316a34a'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(7)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230891b2'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(8)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23f43f5e'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(9)  .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%238b5cf6'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card:nth-child(10) .p-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234f46e5'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plugin-card .p-replaces { display: inline-block; padding: 10px 18px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--pc-dark); background: color-mix(in srgb, var(--pc-accent) 10%, #fff); }
.pc-mockup { min-width: 0; }
.pc-mockup img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* 14. A DAY WITH WPILOT AI -------------------------------------------- */
/* ---- A DAY IN THE LIFE — dark theme ---- */
.day-section {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 620px at 50% -12%, #1a1033 0%, transparent 60%),
    linear-gradient(180deg, #0c0819 0%, #0a0615 100%);
}
.day-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% 22%, rgba(124, 58, 237, 0.14), transparent 70%),
    radial-gradient(560px 420px at 88% 16%, rgba(124, 58, 237, 0.14), transparent 70%);
}
.day-section .container { position: relative; z-index: 2; max-width: 1600px; }

/* Floating vector accents */
.day-vector { position: absolute; z-index: 1; pointer-events: none; }
.day-vector img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 34px rgba(124, 58, 237, 0.45)); }
.day-vector-left  { width: 135px;  top: 84px; left: 4%;  animation: dayFloatL 7s ease-in-out infinite; }
.day-vector-right { width: 118px; top: 74px; right: 4%; animation: dayFloatR 8s ease-in-out infinite; }
@keyframes dayFloatL {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(10px, -18px) rotate(6deg); }
}
@keyframes dayFloatR {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-12px, 16px) rotate(-6deg); }
}

/* Header (dark) */

.day-section .section-header .day-h2 { color: #fff; }
.day-section .section-header .day-h2 .grad { background: linear-gradient(90deg, #a78bfa, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.day-section .section-header .day-h2::after { content: ''; display: block; width: 132px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #10b981, #06b6d4); margin: 16px auto 0; }
.day-section .section-header p { color: #b0a7c9; }
.day-section .section-header p .hl-green  { color: #34d399; font-weight: 600; }
.day-section .section-header p .hl-pink   { color: #f472b6; font-weight: 600; }
.day-section .section-header p .hl-purple { color: #a78bfa; font-weight: 600; }

/* Cards (dark) */
.day-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 24px; max-width: 1600px; margin: 52px auto 0; }
.day-card {
  position: relative;
  background: linear-gradient(180deg, rgba(31, 21, 55, 0.92), rgba(20, 13, 38, 0.92));
  border: 1px solid rgba(139, 92, 246, 0.16); border-radius: 20px;
  padding: 24px 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: grid; grid-template-columns: 115px 1fr; column-gap: 18px; align-items: start;
  grid-template-areas:
    "icon   time"
    "icon   title"
    "icon   desc"
    "result result";
}
.day-card:hover { transform: translateY(-4px); box-shadow: 0 28px 62px rgba(124, 58, 237, 0.3); border-color: rgba(139, 92, 246, 0.42); }
/* Connector node between cards (desktop) */
.day-card::after { content: ''; position: absolute; right: -12px; top: 50%; transform: translate(50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.22), 0 0 14px rgba(124, 58, 237, 0.7); z-index: 3; }
.day-card:nth-child(3n)::after { display: none; }
.day-card .day-time { grid-area: time; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: linear-gradient(135deg, #6d28d9, #7c3aed); }
.day-card .day-illustration { grid-area: icon; align-self: center; width: 115px; height: 115px; }
.day-card .day-illustration img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 10px 22px rgba(124, 58, 237, 0.4)); }
.day-card h4 { grid-area: title; font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.day-card p { grid-area: desc; font-size: 13.5px; color: #a79ec2; line-height: 1.55; margin: 0 0 16px; }
.day-card .day-result {
  grid-area: result; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.32);
}
.day-card .day-result::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2310b981'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.day-card .day-result strong { color: #a7f3d0; font-weight: 800; }

/* Bottom CTA bar (dark) */
.day-cta {
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  max-width: 720px; margin: 42px auto 0; padding: 16px 24px;
  background: linear-gradient(180deg, rgba(31, 21, 55, 0.92), rgba(20, 13, 38, 0.92));
  border: 1px solid rgba(139, 92, 246, 0.24); border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.day-cta-rocket { font-size: 30px; line-height: 1; }
.day-cta-text { margin: 0; font-size: 16px; font-weight: 600; color: #cfc7e6; }
.day-cta-text strong { color: #a78bfa; font-weight: 800; }
.day-cta-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: linear-gradient(48.08deg, #8F33FF 21.84%, #2575FC 126.9%); color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 15px; padding: 13px 26px; border-radius: var(--radius-full); box-shadow: -5px 8px 28.5px 0px #9347F34D, 0px 0px 16px 5px #FFFFFF40 inset; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.day-cta-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: -5px 12px 34px 0px #9347F366, 0px 0px 16px 5px #FFFFFF40 inset; }
.day-foot { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; margin: 22px auto 0; }
.day-foot span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #ffffff; }

/* 15. MONEY SAVED ----------------------------------------------------- */
.money-saved { position: relative; overflow: hidden; background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); }
.money-saved .container { position: relative; z-index: 2; }
/* Floating decorative figures + coins */
.ms-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ms-decor .msd { position: absolute; display: block; height: auto; filter: drop-shadow(0 16px 30px rgba(30, 27, 75, 0.14)); }
.msd-boy   { top: 1%;    left: 2%;  animation: heroFloatB 7s   ease-in-out infinite; }
.msd-girl  { top: 60px;    right: -12px;  animation: heroFloatA 7.5s ease-in-out infinite; }
.msd-money { bottom: 0%; left: 0%; animation: heroFloatC 8s   ease-in-out infinite; }
.msd-coin1 { bottom: 0%;     right: 0%;    width: 235px;  animation: heroFloatA 6s   ease-in-out infinite; }
.msd-coin2 { bottom: 30%;     right: 13%;    width: 240px;  animation: heroFloatC 6.5s ease-in-out infinite; }
/* Fade the figures' bottoms so they merge into the section (no hard cut) */
.msd-boy, .msd-girl {
  filter: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
}
/* Sparkles */
.ms-spark { position: absolute; line-height: 1; animation: msTwinkle 3s ease-in-out infinite; }
.ms-spark.sp1 { top: 10%; left: 8%; font-size: 28px; color: #a78bfa; }
.ms-spark.sp2 { top: 4%; right: 4%; font-size: 22px; color: #34d399; animation-delay: 0.6s; }
.ms-spark.sp3 { top: 42%; left: 5%; font-size: 23px; color: #fbbf24; animation-delay: 1s; }
.ms-spark.sp4 { bottom: 10%; right: 6%; font-size: 14px; color: #60a5fa; animation-delay: 1.4s; }
@keyframes msTwinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* Dotted vector patches */
.ms-dots { position: absolute; width: 85px; height: 72px; opacity: 0.5; background-image: radial-gradient(rgba(124, 58, 237) 2px, transparent 2px); background-size: 14px 14px; }
.ms-dots.dt1 { top: 14%; right: 4%; }
.ms-dots.dt2 { bottom: 20%; left: 4%; background-image: radial-gradient(rgba(16, 185, 129) 2px, transparent 2px); }
/* Dashed curved arrows */
.ms-arrow { position: absolute; width: 72px; height: auto; opacity: 0.85; }
.ms-arrow.ar1 { bottom: 30%; left: 11%; transform: rotate(-6deg); }
.ms-arrow.ar2 { top: 50%; right: 11%; transform: scaleX(-1) rotate(-6deg); }
@media (max-width: 1200px) { .ms-decor { display: none; } }
.ms-container { position: relative; overflow: hidden; max-width: 900px; margin: 40px auto 0; padding: 60px 40px; text-align: center; background: #fff; border: 1px solid #d1fae5; border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(16, 185, 129, 0.14); }
.ms-container::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(16, 185, 129, 0.1), transparent 70%); pointer-events: none; }
.ms-label { display: inline-block; margin-bottom: 16px; padding: 6px 16px; border-radius: var(--radius-full); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--gradient-emerald); }
.ms-container h3 { margin-bottom: 32px; font-size: clamp(24px, 3.6vw, 36px); }
.ms-formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; max-width: 740px; margin: 0 auto 44px; padding: 28px 24px; border-radius: var(--radius-lg); background: linear-gradient(180deg, #f8fafc, #f1f5f9); border: 1px solid var(--line); }
.ms-block { text-align: center; padding: 22px 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.ms-amount { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(24px, 3vw, 36px); font-weight: 900; line-height: 1; margin-bottom: 6px; }
.ms-amount.red { color: var(--rose); text-decoration: line-through; text-decoration-thickness: 3px; }
.ms-amount.green { color: var(--emerald-2); }
.ms-amount.ink { color: var(--ink); }
.ms-unit { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.ms-operator { width: 40px; height: 40px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-sm); }
.ms-result-big { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(56px, 8vw, 96px); font-weight: 900; line-height: 1; margin-bottom: 12px; letter-spacing: -0.03em; background: var(--gradient-emerald); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-result-text { font-size: 18px; color: var(--body); font-weight: 500; max-width: 500px; margin: 0 auto; }
.ms-result-text strong { color: var(--ink); }
.ms-breakdown { max-width: 720px; margin: 40px auto 0; padding: 24px; border-radius: 12px; border: 1px solid #6ee7b7; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.ms-breakdown-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #047857; }
.ms-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14px; color: #064e3b; }
.ms-breakdown-total { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #6ee7b7; font-size: 15px; font-weight: 600; text-align: center; color: #047857; }
.ms-breakdown-total strong { color: #065f46; font-weight: 800; }
.ms-breakdown-note { margin: 10px 0 0; font-size: 12px; font-style: italic; color: #065f46; }

/* 16. PHILOSOPHY SECTIONS — centered header + image-left / content-right */
.philo-section {
  position: relative; overflow: hidden; padding: 96px 0; color: #fff;
  background:
    radial-gradient(900px 520px at 15% 5%, rgba(124, 58, 237, 0.28), transparent 55%),
    radial-gradient(820px 520px at 85% 100%, rgba(37, 99, 235, 0.24), transparent 55%),
    linear-gradient(135deg, #0c0a20 0%, #16123a 52%, #1e1b4b 100%);
}
.philo-section .container { position: relative; z-index: 2; max-width: 1400px; }

/* Decorative layer — gradient rings, sparkles, dots */
.philo-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.philo-decor .ph-ring { position: absolute; top: 8%; left: 6%; width: 150px; height: 150px; border-radius: 50%; border: 2px dashed rgba(96, 165, 250, 0.22); }
.philo-decor .ph-ring.right { left: auto; right: 6%; top: 12%; border-color: rgba(34, 211, 238, 0.22); }
.philo-decor .ph-dots { position: absolute; bottom: 12%; right: 8%; width: 110px; height: 84px; opacity: 0.5; background-image: radial-gradient(rgba(96, 165, 250, 0.5) 2px, transparent 2px); background-size: 15px 15px; }
.philo-decor .ph-dots.right { right: auto; left: 8%; bottom: 14%; background-image: radial-gradient(rgba(34, 211, 238, 0.5) 2px, transparent 2px); }
.philo-decor .ph-spark { position: absolute; line-height: 1; animation: msTwinkle 3s ease-in-out infinite; }
.philo-decor .ph-spark.s1 { top: 20%; right: 12%; font-size: 20px; color: #93c5fd; }
.philo-decor .ph-spark.s2 { top: 62%; left: 9%; font-size: 15px; color: #67e8f9; animation-delay: 0.7s; }
.philo-decor .ph-spark.s3 { bottom: 22%; right: 22%; font-size: 17px; color: #c4b5fd; animation-delay: 1.2s; }

/* Centered header */
.philo-head h2 { color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: clamp(30px, 4vw, 46px); line-height: 1.18; letter-spacing: -0.02em; }
.philo-head p { color: rgba(255, 255, 255, 0.72); font-size: 18px; line-height: 1.7; max-width: 720px; margin: 0 auto; }

/* Grid */
.philo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 8px; }
.philo-grid.reverse .philo-visual  { order: 2; }
.philo-grid.reverse .philo-content { order: 1; }

/* Content */
.philo-content { position: relative; }
.philo-highlight-blue { color: #60a5fa; font-weight: 600; }
.philo-highlight-cyan { color: #22d3ee; font-weight: 600; }
.philo-highlight-green { color: #34d399; font-weight: 600; }
.philo-body { font-size: 17px; color: rgba(255, 255, 255, 0.78); line-height: 1.75; margin-bottom: 16px; }
.philo-body:first-of-type { font-size: 19px; color: rgba(255, 255, 255, 0.92); }
.philo-body strong { color: #fff; font-weight: 700; }
.philo-source { display: inline-flex; align-items: center; margin-top: 22px; padding: 12px 18px; border-radius: 12px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid #22d3ee; }
.philo-visual { position: relative; }
.philo-char-frame { position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.philo-char-frame:hover { transform: translateY(-6px); }
.philo-char-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.philo-char-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 24px; mix-blend-mode: overlay; background: linear-gradient(135deg, rgba(79, 70, 229, 0.25) 0%, transparent 50%, rgba(16, 185, 129, 0.15) 100%); }
.philo-char-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 24px; background: linear-gradient(180deg, transparent 60%, rgba(30, 27, 75, 0.7) 100%); }
.philo-section:nth-of-type(even) .philo-char-frame::before { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, transparent 50%, rgba(6, 182, 212, 0.2) 100%); }
.philo-dots { position: absolute; bottom: -30px; left: -30px; width: 120px; height: 120px; z-index: 0; opacity: 0.4; background-image: radial-gradient(circle, rgba(59, 130, 246, 0.5) 1.5px, transparent 1.5px); background-size: 12px 12px; }

/* ── Philosophy 1 ("The Real Reason") — fully independent, phc- prefix ── */
.phc-section .section-header{
  margin-bottom: 20px;
}
.phc-section {
  position: relative; overflow: hidden; padding: 96px 0; color: #fff;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(124, 58, 237, 0.06), transparent 50%),
    radial-gradient(820px 520px at 90% 100%, rgba(37, 99, 235, 0.05), transparent 50%),
    #01010d;
}
.phc-section .container { position: relative; z-index: 2; max-width: 1400px; }

/* Decorative layer — glow orbs, gradient ring, sparkles, dots */
.phc-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.phc-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.phc-orb.o1 { width: 420px; height: 420px; top: -140px; left: -120px; background: radial-gradient(circle, rgba(124, 58, 237, 0.35), transparent 70%); }
.phc-orb.o2 { width: 380px; height: 380px; bottom: -140px; right: -110px; background: radial-gradient(circle, rgba(37, 99, 235, 0.3), transparent 70%); }
.phc-ring { position: absolute; top: 8%; left: 6%; width: 150px; height: 150px; border-radius: 50%; border: 2px dashed rgba(96, 165, 250, 0.22); }
.phc-dot-cluster { position: absolute; bottom: 12%; right: 8%; width: 110px; height: 84px; opacity: 0.5; background-image: radial-gradient(rgba(96, 165, 250, 0.5) 2px, transparent 2px); background-size: 15px 15px; }
.phc-spark { position: absolute; line-height: 1; animation: msTwinkle 3s ease-in-out infinite; }
.phc-spark.s1 { top: 20%; right: 12%; font-size: 20px; color: #93c5fd; }
.phc-spark.s2 { top: 62%; left: 9%; font-size: 15px; color: #67e8f9; animation-delay: 0.7s; }
.phc-spark.s3 { bottom: 22%; right: 22%; font-size: 17px; color: #c4b5fd; animation-delay: 1.2s; }

/* Centered header */
.phc-head h2 { color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: clamp(30px, 4vw, 46px); line-height: 1.18; letter-spacing: -0.02em; }
.phc-head p { color: rgba(255, 255, 255, 0.72); font-size: 18px; line-height: 1.7; max-width: 720px; margin: 0 auto; }

/* Centered single-column grid */
.phc-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }

/* Image — natural size, no filters/overlays */
.phc-visual { position: relative; width: auto; height: auto; }
.phc-frame { position: relative; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.phc-frame img { width: auto; height: auto; object-fit: none; filter: none; border-radius: 0; display: block; margin: 0 auto; }
.phc-frame-dots { position: absolute; bottom: -30px; left: -30px; width: 120px; height: 120px; z-index: 0; opacity: 0.4; background-image: radial-gradient(circle, rgba(59, 130, 246, 0.5) 1.5px, transparent 1.5px); background-size: 12px 12px; }

/* Content */
.phc-content { position: relative; text-align: center;     max-width: 1100px;
    margin: auto;}
.phc-highlight-blue { color: #60a5fa; font-weight: 600; }
.phc-body { font-size: 17px; color: rgba(255, 255, 255, 0.78); line-height: 1.75; margin-bottom: 16px; }
.phc-body:first-of-type { font-size: 19px; color: rgba(255, 255, 255, 0.92); }
.phc-body strong { color: #fff; font-weight: 700; }
.phc-source { display: inline-flex; align-items: center; gap: 8px; margin: 26px auto 0; padding: 11px 22px; max-width: 820px; border-radius: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.82); background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(34, 211, 238, 0.08)); border: 1px solid rgba(148, 163, 253, 0.25); box-shadow: 0 10px 28px rgba(124, 58, 237, 0.16); backdrop-filter: blur(6px); }

@media (max-width: 576px) {
  .phc-section { padding: 64px 0; }
}

/* ── Philosophy: light-theme variant ─────────────────────────── */
.philo-light {
    color: var(--ink);
    background: radial-gradient(1000px 900px at 80% 46%, #ece6f8 0%, #ece6f8 34%, rgba(236, 230, 248, 0) 74%), radial-gradient(900px 520px at 15% 5%, rgba(124, 58, 237, 0.08), transparent 55%), radial-gradient(820px 520px at 85% 100%, rgba(37, 99, 235, 0.08), transparent 55%), linear-gradient(180deg, #f0edfb 0%, #f6f4ff 60%);
}

.philo-light .section-header { margin-bottom: 25px; }
.philo-light .philo-head h2 { color: var(--ink); font-size: clamp(28px, 3.8vw, 44px); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
.philo-light .philo-head p { color: var(--muted); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.65; }
.philo-light .philo-body { color: var(--body); font-size: clamp(16px, 1.8vw, 18px); line-height: 1.75; margin-bottom: 18px; }
.philo-light .philo-body:first-of-type { color: var(--ink); font-size: clamp(17px, 2vw, 20px); font-weight: 500; line-height: 1.65; }
.philo-light .philo-body strong { color: var(--ink); font-weight: 700; }
.philo-light .philo-source { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; line-height: 1.5; }
.philo-light .philo-highlight-blue { color: #2563eb; }
.philo-light .philo-highlight-cyan { color: #0891b2; }
.philo-light .philo-highlight-green { color: #059669; }
.philo-light .philo-source {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 26px;
  padding: 14px 20px 14px 16px; border-radius: 16px;
  color: var(--body); background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(37, 99, 235, 0.04));
  border: 1px solid rgba(124, 58, 237, 0.12); border-left: none;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.08);
}
.philo-light .philo-source .ps-icon {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 20px; background: rgba(124, 58, 237, 0.12);
}
.philo-light .philo-source .ps-text { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.philo-light .philo-source .ps-text strong { color: #6d28d9; font-weight: 800; }
.philo-light .philo-source .ps-cite { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted-2); }

.philo-light .philo-char-frame {
    border: none;
    box-shadow: none;
    background: transparent;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.philo-light .philo-char-frame:hover { transform: none; }
.philo-light .philo-char-frame img { border-radius: 0 }
.philo-light .philo-char-frame::before {
display: none;
}
.philo-light .philo-char-frame::after {
display: none;
}
.philo-light .philo-grid.reverse { gap: 40px; }
.philo-light .ph-ring { border-color: rgba(37, 99, 235, 0.18); }
.philo-light .ph-ring.right { border-color: rgba(6, 182, 212, 0.18); }
.philo-light .ph-dots { background-image: radial-gradient(rgba(37, 99, 235, 0.32) 2px, transparent 2px); }
.philo-light .ph-dots.right { background-image: radial-gradient(rgba(6, 182, 212, 0.32) 2px, transparent 2px); }
.philo-light .ph-spark.s1 { color: #3b82f6; }
.philo-light .ph-spark.s2 { color: #06b6d4; }
.philo-light .ph-spark.s3 { color: #7c3aed; }

/* 17. BEFORE / AFTER — dark mode (Intelligence Gap style) ------------- */
.before-after {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 50% -10%, #1a1033 0%, transparent 60%),
    linear-gradient(180deg, #0c0819 0%, #0a0615 100%);
}
.before-after::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 420px at 12% 28%, rgba(239, 68, 68, 0.1), transparent 70%),
    radial-gradient(520px 420px at 88% 28%, rgba(16, 185, 129, 0.1), transparent 70%);
}
.before-after .container { position: relative; z-index: 2; max-width: 1090px; }
.before-after .section-header h2 { color: #fff; }
.before-after .section-header p { color: rgba(255, 255, 255, 0.66); }

.ba-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; max-width: 980px; margin: 60px auto 0; align-items: center; position: relative; }
/* Side people figures — aligned to ba-col left/right, merged into bg at bottom */
.ba-people { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ba-person {
  position: absolute; bottom: 0; height: auto;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ba-person.left {
  left: 0; transform: translateX(-69%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 16%, #000 46%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 16%, #000 46%, transparent 100%);
}
.ba-person.right {
  right: 0; transform: translateX(70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 54%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 54%, #000 84%, transparent 100%);
}
/* Keep girls + middle table balanced as the screen narrows toward 1300px */
@media (max-width: 1799px) {
  .ba-grid { max-width: 940px; }
}
@media (max-width: 1600px) {
  .ba-person.left  { width: 455px; transform: translateX(-69%); }
  .ba-person.right { width: 455px; transform: translateX(69%); }
  .ba-grid { max-width: 880px; }
  .ba-grid {
    gap: 28px;
  }
}
@media (max-width: 1399px) {
  .hero-vectors .hv {
    max-width: 61px;
}
.hv.v7 {
    top: 58%;
}
.hv.v9 {
    top: 67%;
    left: 13%;
}
.hv.v3 {
    top: 15%;
    right: 10%;
}
}
/* Below 1300px: hide the side girls, give the table full width */
@media (max-width: 1300px) {
  .ba-people { display: none; }
  .ba-grid { max-width: 1180px; }
}
/* Ambient colour glows behind the cards (from reference) */
.ba-grid::before { content: ''; position: absolute; z-index: 1; pointer-events: none; width: 130px; height: 350px; right: 30px; top: 20%; border-radius: 50%; background: rgba(54, 255, 36, 0.26); filter: blur(136px); }
.ba-grid::after  { content: ''; position: absolute; z-index: 1; pointer-events: none; width: 130px; height: 350px; left: 30px;  top: 20%; border-radius: 50%; background: rgba(255, 78, 78, 0.26); filter: blur(147px); }
.ba-col {
  position: relative; z-index: 9; padding: 34px 30px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 18, 38, 0.92) 0%, rgba(12, 10, 24, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* VS circle */
.ba-vs { position: relative; z-index: 9; align-self: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.ba-vs img { width: 28px; height: 28px; object-fit: contain; }
/* Side figure (right.png) — reference .stack-good-img */
.ba-good-img { position: relative; z-index: 8; align-self: center; margin-left: -30px; max-width: 100%; height: auto; }
.ba-good-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45)); }
.ba-col.before { border-color: rgba(239, 68, 68, 0.22); }
.ba-col.after  { border-color: rgba(16, 185, 129, 0.22); }
.ba-col.before:hover { transform: translateY(-4px); border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 22px 60px rgba(239, 68, 68, 0.15); }
.ba-col.after:hover  { transform: translateY(-4px); border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 22px 60px rgba(16, 185, 129, 0.15); }
.ba-col::after { content: ''; position: absolute; inset: -2px; border-radius: 22px; opacity: 0.6; pointer-events: none; }
.ba-col.before::after { background: radial-gradient(600px 200px at 25% 18%, rgba(239, 68, 68, 0.14), transparent 55%); }
.ba-col.after::after  { background: radial-gradient(600px 200px at 25% 18%, rgba(16, 185, 129, 0.14), transparent 55%); }
.ba-col > * { position: relative; z-index: 1; }
.ba-face { position: absolute; top: -28px; right: -22px; width: 80px; object-fit: contain; z-index: 4; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); }
.ba-col.after .ba-face { width: 86px; height: 86px; top: -34px; }
.ba-col .ba-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 6px 14px; border-radius: var(--radius-full); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.ba-col.before .ba-label { background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; }
.ba-col.after .ba-label { background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.ba-col h3 { margin-bottom: 22px; font-size: 24px; color: #fff; }
.ba-col ul { list-style: none; margin: 0; padding: 0; }
.ba-col ul li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 15px; color: rgba(255, 255, 255, 0.82); line-height: 1.5; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ba-col ul li:last-child { border-bottom: none; }
.ba-col ul li::before { content: ''; width: 22px; min-width: 22px; height: 22px; margin-top: 1px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.ba-col.before ul li::before { background-image: url('images/before_after/cross.png'); }
.ba-col.after ul li::before  { background-image: url('images/before_after/arw.png'); }
.before-after .section-cta-note { color: rgba(255, 255, 255, 0.6); }

/* 18. AI ERA HOOK — light (Inside RecurHub Pro / marketer-card style) -- */
.ai-era {
  position: relative; overflow: hidden; color: var(--ink); text-align: center; padding: 90px 0;
  background:
    radial-gradient(900px 520px at 50% -12%, #dbe8ff 0%, transparent 60%),
    linear-gradient(180deg, #eef3ff 0%, #ffffff 64%);
}
.ai-era .container { position: relative; z-index: 2; }
/* Decorative background — blue glows, shape ring & dot patches */
.era-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.era-shape { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.55; }
.era-shape.sh1 { width: 360px; height: 360px; top: -120px; left: -100px; background: radial-gradient(circle, rgba(37, 99, 235, 0.3), transparent 70%); }
.era-shape.sh2 { width: 320px; height: 320px; bottom: -130px; right: -90px; background: radial-gradient(circle, rgba(6, 182, 212, 0.24), transparent 70%); }
.era-ring { position: absolute; top: 12%; right: 8%; width: 120px; height: 120px; border-radius: 50%; border: 2px dashed rgba(37, 99, 235, 0.25); }
.era-dots { position: absolute; width: 112px; height: 84px; opacity: 0.55; background-image: radial-gradient(rgba(37, 99, 235, 0.42) 2px, transparent 2px); background-size: 15px 15px; }
.era-dots.dd1 { top: 16%; left: 5%; }
.era-dots.dd2 { bottom: 14%; right: 6%; background-image: radial-gradient(rgba(6, 182, 212, 0.42) 2px, transparent 2px); }
.ai-era h2 { color: var(--ink); max-width: 940px; margin: 22px auto 18px; font-size: clamp(32px, 4.5vw, 52px); }
.ai-era h2 .grad-text { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-era .era-lead { color: var(--muted); font-size: 19px; max-width: 720px; margin: 18px auto 0; line-height: 1.7; }
.ai-era .era-lead strong { color: var(--ink); font-weight: 700; }
.ai-era .era-outro { margin-top: 42px; font-size: 18px; font-weight: 600; color: var(--ink); }
.era-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1080px; margin: 48px auto 0; }
.era-card {
  flex: 0 0 calc(33.333% - 20px); position: relative; overflow: hidden; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px 28px;
  box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.era-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.era-card:hover { transform: translateY(-6px); border-color: rgba(124, 58, 237, 0.22); box-shadow: 0 22px 56px rgba(124, 58, 237, 0.13); }
.era-card:hover::before { transform: scaleX(1); }
.era-icon { margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; }
.era-icon img { height: 92px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 12px 22px rgba(124, 58, 237, 0.2)); }
.era-card h3 { font-size: 22px; font-weight: 900; margin-bottom: 10px; color: var(--ink); line-height: 1.35; }
.era-card p { font-size: 15.5px; color: var(--muted); line-height: 1.6; }

/* 19. VALUE COMPARISON ------------------------------------------------ */
.value-section { background: var(--ink); color: #fff; overflow: hidden; }
.value-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(79, 70, 229, 0.15), transparent 70%); pointer-events: none; }
.value-section h2, .value-section h3 { color: #fff; }
.value-section .section-header p { color: rgba(255, 255, 255, 0.7); }
.value-card { max-width: 900px; margin: 40px auto 0; padding: 40px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.value-row { display: grid; grid-template-columns: 2fr 1fr; align-items: center; padding: 18px 0; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: padding-left 0.2s ease; }
.value-row:hover { padding-left: 8px; }
.value-row:last-of-type { border-bottom: none; }
.value-row .tool { color: rgba(255, 255, 255, 0.85); }
.value-row .price { text-align: right; color: var(--coral); font-weight: 700; font-family: 'Be Vietnam Pro', sans-serif; font-size: 17px; }
.value-row.total { margin: 24px -40px -40px; padding: 26px 40px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 20px; background: var(--gradient-warm); }
.value-row.total .tool { color: var(--ink); font-weight: 800; }
.value-row.total .price { color: var(--ink); font-size: 24px; font-weight: 900; }
.value-note { text-align: center; max-width: 720px; margin: 24px auto 0; font-size: 16px; font-weight: 600; line-height: 1.6; color: #fbbf24; }
.value-fineprint { text-align: center; max-width: 720px; margin: 12px auto 0; font-size: 12px; line-height: 1.5; color: rgb(255 255 255 / 80%); }

/* 20. TESTIMONIALS ---------------------------------------------------- */
.testimonials { background: var(--paper-2); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.testi-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi-card .stars { color: var(--amber); font-size: 16px; margin-bottom: 14px; letter-spacing: 2px; }
.testi-card blockquote { font-size: 15px; color: var(--body); line-height: 1.65; margin-bottom: 24px; font-style: italic; }
.testi-card blockquote::before { content: '"'; font-family: 'Be Vietnam Pro', serif; font-size: 40px; color: var(--indigo); line-height: 0.4; vertical-align: bottom; margin-right: 4px; opacity: 0.4; }
.testi-author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-info h5 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.testi-info p { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.testi-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--emerald); font-weight: 700; }

/* 21. INCOME OPPORTUNITY ---------------------------------------------- */
.income-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(119, 26, 255, 0.20), transparent 26%),
    radial-gradient(circle at 90% 100%, rgba(240, 114, 175, 0.14), transparent 22%),
    linear-gradient(180deg, #090611 0%, #0b0816 54%, #050308 100%);
  color: #fff;
}
.income-section::before,
.income-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 14px 34px rgba(124, 58, 237, 0.45));
}
.income-section::before {
  top: 56px;
  left: 1%;
  width: 150px;
  height: 150px;
  background-image: url('images/ten_ais/vector7.png');
}
.income-section::after {
  right: 1%;
  bottom: 54px;
  width: 160px;
  height: 160px;
  background-image: url('images/ten_ais/vector3.png');
}
.income-section .section-header h2,
.income-section .section-header p {
  color: #fff;
}
.income-section .section-header p {
  color: rgba(255, 255, 255, 0.7);
}
.income-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.income-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26, 19, 48, 0.98), rgba(15, 10, 28, 0.98));
  border: 1px solid rgba(139, 92, 246, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.income-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #771AFF 0%, #F072AF 100%);
  opacity: 0.9;
}
.income-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 114, 175, 0.34);
  background: linear-gradient(180deg, rgba(28, 20, 53, 0.98), rgba(16, 10, 31, 0.98));
  box-shadow: 0 18px 48px rgba(119, 26, 255, 0.22);
}
.income-card .ic-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(119, 26, 255, 0.18), rgba(240, 114, 175, 0.14));
  border: 1px solid rgba(240, 114, 175, 0.14);
  box-shadow: 0 8px 18px rgba(119, 26, 255, 0.20);
  padding: 12px;
}
.income-card .ic-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.income-card h4 { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.3; }
.income-card p { font-size: 14.5px; color: rgb(255 255 255 / 76%); margin-bottom: 22px; line-height: 1.6; flex: 1; }
.income-card .ic-earnings {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFD01B 0%, #FFA301 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.income-card .ic-unit {
  font-size: 12px;
  color: rgb(255 255 255);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
}
.income-disclaimer { max-width: 760px; margin: 36px auto 0; text-align: center; color: rgba(255, 255, 255, 0.58); font-size: 13px; line-height: 1.5; }
.income-section .container { position: relative; z-index: 1; }

/* 22. PRICING (light theme — pro section-pricing structure) ----------- */
.pricing-section { background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 52%, #f6f8ff 100%); color: var(--ink); overflow: hidden; }
.pricing-section::before { content: ''; position: absolute; top: -220px; left: 50%; transform: translateX(-50%); width: 760px; height: 760px; background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 65%); pointer-events: none; }
.pricing-section h3 { color: var(--ink); }
.pricing-section .section-header p { color: var(--muted); }

/* pricing box */
.jv-pricing-box { position: relative; z-index: 2; max-width: 640px; width: 100%; margin: 44px auto 0; }
.jv-pricing-box .section-header { margin-bottom: 40px; }
.jv-pric-inner { position: relative; border-radius: var(--radius-lg); padding: 30px 16px 34px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(79, 70, 229, 0.16); overflow: hidden; text-align: center; border: 1px solid #cdb0ff;    border-radius: var(--radius-lg);}
.jv-pric-inner::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 360px; background: linear-gradient(180deg, rgba(79, 70, 229, 0.12) 0%, rgba(147, 51, 234, 0.05) 55%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.jv-pric-inner > * { position: relative; z-index: 1; }

.jv-pric-ribbon { display: flex; width: fit-content; margin-inline: auto; align-items: center; justify-content: center; gap: 8px; padding: 9px 22px; border-radius: var(--radius-full); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--gradient-primary); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35); }

.jv-pric-logo { display: flex; justify-content: center; align-items: center; width: fit-content; margin: -30px auto 0; padding: 16px 40px; background: var(--gradient-primary); border-radius: 0 0 22px 22px; box-shadow: 0 14px 34px rgba(124, 58, 237, 0.3); }
.jv-pric-logo img { width: 100%; max-width: 210px; height: auto; }

.jv-pric-prod { margin-top: 22px; display: flex; justify-content: center; }
.jv-pric-prod img { max-width: 100%; height: auto; }

.jv-pric-header { margin-top: 18px; }
.jv-pric-heading-wrap { display: flex; justify-content: center; }
.jv-pric-heading { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 26px; border-radius: var(--radius-full); font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: var(--ink); background: linear-gradient(90deg, rgba(79, 70, 229, 0.08), rgba(147, 51, 234, 0.08)); border: 1px solid rgba(124, 58, 237, 0.25); }
.jv-pric-price { font-family: 'Be Vietnam Pro', sans-serif; display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0 0; font-size: clamp(58px, 9vw, 80px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.jv-pric-price span.two { font-size: 40%; font-weight: 800; color: var(--muted-2); text-decoration: line-through; text-decoration-thickness: 3px; letter-spacing: 0; }
.jv-pric-once { margin-top: 8px; font-size: clamp(15px, 2vw, 18px); font-weight: 700; color: var(--body); }

/* feature list — zebra rows like pro */
.jv-pric-list { list-style: none; margin: 24px 0 4px; padding: 0; text-align: left; }
.jv-pric-list li { display: flex; align-items: center; gap: 16px; border-radius: 10px; padding: 15px 14px 15px 20px; }
.jv-pric-list li:nth-child(even) { background: var(--paper-3); }
.jv-pric-list li p { font-size: clamp(15px, 2vw, 18px); font-weight: 600; color: var(--ink); margin: 0; }
.jv-tick { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 900; color: #fff; background: var(--gradient-emerald); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }

.coupon-box { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px auto 0; font-size: clamp(15px, 2vw, 18px); font-weight: 600; color: var(--body); line-height: 1.5; }
.coupon-box .cb-code { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 8px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; letter-spacing: 2px; font-size: 15px; color: var(--indigo-2); background: rgba(124, 58, 237, 0.07); border: 2px dashed rgba(124, 58, 237, 0.45); }
.coupon-box strong { color:var(--indigo-2); font-weight: 900; }
.pricing-cta { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 560px; margin: 24px auto 0; padding: 24px 32px; text-align: center; border-radius: var(--radius-full); font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: clamp(19px, 2.4vw, 26px); letter-spacing: 0.3px; color: #fff; background: linear-gradient(48.08deg, #8F33FF 21.84%, #2575FC 126.9%); box-shadow: -5px 8px 28.5px 0px #9347F34D, 0px 0px 16px 5px #FFFFFF40 inset; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pricing-cta:hover { transform: translateY(-3px); color: #fff; box-shadow: -5px 12px 34px 0px #9347F366, 0px 0px 16px 5px #FFFFFF40 inset; }
.pricing-microcopy { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Payment + guarantee + compat */
.compat-block { max-width: 1080px; margin: 44px auto 0; }
.compat-title { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 22px; }
.compat-title span { font-size: 14px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }
.compat-title::before, .compat-title::after { content: ''; width: clamp(30px, 8vw, 80px); height: 1px; background: linear-gradient(90deg, transparent, var(--muted-2)); }
.compat-title::after { background: linear-gradient(90deg, var(--muted-2), transparent); }
.compat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.compat-badge { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
.compat-badge .cb-logo { flex: none; width: 52px; height: 52px; object-fit: contain; }
.compat-badge .cb-text { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.compat-badge .cb-name { font-size: 19px; color: var(--ink); font-weight: 600; line-height: 1.1; }
.compat-badge .cb-verified { align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; color: var(--indigo-2); background: rgba(124, 58, 237, 0.09); }

/* launch note — reference banner */
.launch-note { max-width: 1080px; margin: 34px auto 0; padding: 30px 34px 22px; border-radius: 22px; text-align: left; background: linear-gradient(180deg, #fff5ec 0%, #fdece0 100%); border: 1px solid rgba(245, 158, 11, 0.28); }
.launch-note .ln-main { display: flex; align-items: center; gap: 28px; }
.launch-note .ln-watch { flex: none; width: 108px; height: auto; }
.launch-note .ln-copy { flex: 1; min-width: 0; }
.launch-note .ln-lead { font-size: clamp(18px, 3vw, 24px); font-weight: 500; color: var(--ink); line-height: 1.2; }
.launch-note .ln-body { margin-top: 4px; font-size: clamp(20px, 2.6vw, 28px); font-weight: 500; color: var(--ink); line-height: 1.25; }
.launch-note .ln-price { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; color: var(--ink); line-height: 1.25; }
.launch-note .ln-price span { font-size: clamp(34px, 4.6vw, 50px); font-weight: 900; color: #ea580c; }
.launch-note .ln-divider { flex: none; align-self: stretch; width: 2px; background: rgba(234, 88, 12, 0.25); border-radius: 2px; }
.launch-note .ln-lock { flex: none; display: flex; align-items: center; gap: 14px; }
.launch-note .ln-lock-badge { flex: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; background: rgba(234, 88, 12, 0.1); }
.launch-note .ln-lock-text { font-size: clamp(16px, 2.2vw, 20px); font-weight: 500; color: var(--ink); line-height: 1.25; }
.launch-note .ln-lock-text strong { font-weight: 600; }
.launch-note .ln-bar { margin-top: 22px; padding: 15px 24px; border-radius: 12px; text-align: center; font-size: clamp(15px, 2vw, 19px); font-weight: 500; color: #fff; background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); }
.launch-note .ln-bar strong { font-weight: 600; }

/* 23. BONUSES — alternating list (rankonai structure, dark theme) ------ */
.bonuses { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 620px at 50% -12%, #1a1033 0%, transparent 60%), linear-gradient(180deg, #0c0819 0%, #0a0615 100%); }
.bonuses .container { max-width: 1300px; position: relative; z-index: 2; }
.fb-head { text-align: center; margin-bottom: 44px; }
.fb-pill { display: inline-block; margin-bottom: 18px;}
.fb-title { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(30px, 5vw, 60px); font-weight: 800; line-height: 1.1; color: #fff; margin: 0 0 14px; }
.fb-sub { font-size: clamp(16px, 2vw, 20px); font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.72); max-width: 720px; margin: 0 auto; }

.fe_bonus_list { display: flex; flex-direction: column; gap: 40px; }
.fe_bonus_item { position: relative; overflow: hidden; border-radius: 40px; padding: 34px 50px; background: linear-gradient(180deg, rgba(31, 21, 55, 0.92), rgba(20, 13, 38, 0.92)); border: 1px solid rgba(139, 92, 246, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.fe_bonus_item:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(124, 58, 237, 0.22); border-color: rgba(139, 92, 246, 0.4); }
.fe_bonus_glow { position: absolute; top: -90px; left: -40px; width: 274px; height: 274px; border-radius: 50%; background: #7c3aed; filter: blur(130px); opacity: 0.5; z-index: 0; pointer-events: none; }
.fe_bonus_item:nth-child(even) .fe_bonus_glow { left: auto; right: -40px; }
.fe_bonus_inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 50px; }
.fe_bonus_item:nth-child(even) .fe_bonus_inner { flex-direction: row-reverse; }
.fe_bonus_media { flex: 0 0 36%; display: flex; justify-content: center; align-items: center; }
.fe_bonus_media img { width: 300px; max-width: 100%; height: auto; display: block; border-radius: 16px; }
.fe_bonus_content { flex: 1; min-width: 0; }
.fe_bonus_badge_row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.fe_bonus_badge { flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: 26px; color: #fff; background: linear-gradient(135deg, #6d28d9, #7c3aed); box-shadow: 0 10px 26px rgba(124, 58, 237, 0.4); }
.fe_bonus_sub_heading { font-size: clamp(20px, 3vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: 1px; color: #a78bfa; }
.fe_bonus_content .bonus-value { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; color: #6ee7b7; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.32); }
.fe_bonus_content h3 { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.2; color: #fff; margin: 0 0 12px; }
.fe_bonus_content > p { font-size: clamp(14px, 2vw, 18px); font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0 0 14px; }
.fe_bonus_content .bonus-sample { padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(139, 92, 246, 0.22); font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.fe_bonus_content .bonus-sample strong { color: #c4b5fd; }

/* money-back section START — light theme, matches site's light sections */
.fe_moneyBack_section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(124, 58, 237, 0.10), transparent 65%),
    linear-gradient(180deg, #f7f5ff 0%, #ffffff 55%, #f8fbff 100%);
}
.fe_moneyBack_section .section-header {
    margin: 0 auto 154px;
}
.fe_mback_box {
  position: relative;
  max-width: 1074px;
  margin: 110px auto 0;
  padding: 120px 38px 44px;
  border-radius: 28px;
  border: 1px solid transparent;
  background: #ffffff;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(108.72deg, rgba(79, 70, 229, 0.22) 6.78%, rgba(6, 182, 212, 0.18) 96.42%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 30px 70px rgba(79, 70, 229, 0.12), 0 4px 14px rgba(15, 23, 42, 0.04);
}
.fe_mback_box::before {
  content: '';
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.16), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.fe_mback_badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 26px rgba(79, 70, 229, 0.22));
}
.fe_mback_badge img {
  width: 210px;
  height: auto;
}
.fe_mback_text {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
}
.fe_mback_list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  max-width: 800px;
  margin: 0 auto;
}
.fe_mback_item {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.fe_mback_item:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 70, 229, 0.28);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.12);
}
.fe_mback_item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.fe_mback_check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald);
  font-size: 13px;
  font-weight: 900;
}
/* money-back section END */
/* 25. WHO IT'S FOR — dark gradient-border cards (pro limits style) ----- */
.who-for { position: relative; overflow: hidden; background: #0b0918; color: #fff; }
.who-for .section-header h2 { color: #fff; }
.who-for .section-header p { color: rgba(255, 255, 255); }
.who-for .container { max-width: 1330px; }

.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 8px auto 0; }
.who-card { border-radius: 15px; padding: 2px; background: linear-gradient(152deg, #8b5cf6 2%, rgba(124, 58, 237, 0.12) 88%); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.who-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(124, 58, 237, 0.22); }
.who-card .wc-inner { height: 100%; border-radius: 15px; padding: 30px; text-align: left; background: linear-gradient(180deg, #0a0818 0%, #100b22 100%); }
.who-card .wc-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 265px; margin: 0 auto; border-radius: 12px; }
.who-card h4 { font-size: 22px; font-weight: 700; color: #fff; margin: 20px 0 12px; line-height: 1.25; }
.who-card p { font-size: 16px; color: rgba(255, 255, 255, 0.5); margin: 0; line-height: 1.5; }

/* 26. FAQ ------------------------------------------------------------- */
.faq { background: var(--paper-2); }
.faq-list { max-width: 820px; margin: 40px auto 0; }
.faq-item { overflow: hidden; margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item:hover { border-color: var(--indigo); box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 32px; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--ink); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 26px; font-weight: 400; color: var(--indigo); transition: transform 0.3s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item .faq-body { padding: 20px 32px 26px; }
.faq-item .faq-body p { font-size: 15.5px; color: var(--body); margin: 0; line-height: 1.65; }

/* 27. FINAL CTA ------------------------------------------------------- */
.final-cta { background: var(--ink); color: #fff; text-align: center; overflow: hidden; padding: 90px 0; }
.final-cta::before { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(79, 70, 229, 0.25), transparent 65%); pointer-events: none; }
.final-cta .container { position: relative; z-index: 2; }
.final-cta h2 { color: #fff; margin: 20px auto 22px; font-size: clamp(36px, 5vw, 60px); }
.final-cta h2 .accent { background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-cta p { color: rgba(255, 255, 255, 0.7); font-size: 20px; max-width: 620px; margin: 0 auto 40px; line-height: 1.6; }
.final-cta .pricing-microcopy { margin-top: 22px; color: rgba(255, 255, 255, 0.5); }
.final-cta .final-cta-note { margin: 22px auto 0; font-size: 15px; color: rgba(255, 255, 255, 0.62); max-width: none; }
.final-cta .final-cta-note strong { color: #a78bfa; font-weight: 800; }

/* Final CTA — bordered card (reference) */
.final-cta .section-cta {
  position: relative; margin: 6px auto 0; max-width: 1060px;
  padding: clamp(34px, 5vw, 58px) clamp(22px, 4vw, 60px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 17, 44, 0.55) 0%, rgba(11, 9, 22, 0.5) 100%);
  box-shadow: 0 34px 90px rgba(79, 70, 229, 0.18), inset 0 0 70px rgba(124, 58, 237, 0.06);
}
.final-cta .section-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: 28px; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.75) 0%, rgba(37, 99, 235, 0.45) 50%, rgba(147, 51, 234, 0.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* 28. FOOTER — disclaimer style (power-pack) -------------------------- */
.logo-mark { position: relative; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #fff; background: var(--gradient-primary); box-shadow: var(--shadow-glow); }
.site-foot { position: relative; background: #05040c; padding: 80px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-foot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.45), rgba(6, 182, 212, 0.45), transparent); }
.disc-title { text-align: center; font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-bottom: 28px; }
.disc-text { max-width: 1080px; margin: 0 auto 48px; text-align: center; }
.disc-text p { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, 0.55); margin: 0; }
.disc-promo { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; border: 1px solid rgba(124, 58, 237, 0.24); }
.disc-promo-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(124, 58, 237, 0.22), transparent 70%), radial-gradient(ellipse 60% 80% at 80% 50%, rgba(6, 182, 212, 0.16), transparent 70%), linear-gradient(135deg, #0d0a1d 0%, #0a081a 100%); }
.disc-promo-inner { position: relative; z-index: 1; text-align: center; padding: 52px 40px; }
.disc-promo-brand { margin-bottom: 22px; display: flex; justify-content: center; }
.disc-promo-brand img { height: 52px; width: auto; filter: drop-shadow(0 6px 24px rgba(124, 58, 237, 0.4)); }
.disc-promo-copy { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); }
.disc-promo-copy strong { font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.disc-bottom { text-align: center; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.disc-copy { font-size: 15px; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; line-height: 1.7; }
.disc-copy a { color: #fff; font-weight: 600; transition: color 0.2s ease; }
.disc-copy a:hover { color: #22d3ee; }
.disc-heart { color: #ef476f; display: inline-block; font-size: 13px; transform: translateY(1px); }
.disc-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.disc-links a { font-size: 14px; color: rgba(255, 255, 255, 0.5); padding: 4px 6px; transition: color 0.2s ease; }
.disc-links a:hover { color: #22d3ee; }
.disc-sep { color: rgba(255, 255, 255, 0.18); font-size: 13px; user-select: none; }

/* 28b. INLINE SECTION CTA (repeated buy gateway, in-flow) ------------- */
.section-cta { text-align: center; margin-top: 52px; }
.section-cta-heading {
    font-weight: 900;
    font-size: clamp(24px, 5vw, 50px);
}
.dark-section-cta .section-cta-heading { color: #fff; }
.section-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: clamp(17px, 2.6vw, 34px);
  padding: 16px 36px; border-radius: var(--radius-full);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  background: linear-gradient(48.08deg, #8F33FF 21.84%, #2575FC 126.9%);
  box-shadow: -5px 8px 28.5px 0px #9347F34D, 0px 0px 16px 5px #FFFFFF40 inset;
}
.section-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 24px 56px rgba(79, 70, 229, 0.52); color: #fff; }
.section-cta-note { margin-top: 14px; font-size: 13px; color: var(--muted); }


.fe_video_wrapper{
  border: 1px solid #FF950066;
    margin: auto;
    max-width: 1000px;
    border-radius: 22px;
}

.fe_video_inner_box {
    backdrop-filter: blur(104.5999984741211px);
    background: linear-gradient(180deg, rgba(255, 161, 29, 0.2) 0%, rgba(255, 77, 0, 0.2) 121.87%);
    padding: 10px;
    border-radius: 22px;
}
/* --------------------------------------------------------------------
   Premium energy-beam treatment for .section-cta-btn — additive only.
   Existing background gradient, shadow values, padding, radius, font,
   text and markup are all kept intact; every effect below is a
   pseudo-element, an extra shadow layer, or an idle keyframe animation
   layered on top. Scoped strictly to .section-cta-btn — the yellow
   hero button (.btn-cta.btn-yellow) is a separate class and unaffected.
   -------------------------------------------------------------------- */
@property --scta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.section-cta-btn {
  --scta-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
  box-shadow:
    -5px 8px 28.5px 0px #9347F34D,
    0px 0px 16px 5px #FFFFFF40 inset,
    0 0 20px 2px rgba(143, 51, 255, 0.26),
    0 0 34px 5px rgba(37, 117, 252, 0.13),
    0 0 44px 6px rgba(76, 201, 255, 0.06),
    inset 0 -12px 16px rgba(20, 8, 46, 0.15);
  animation: scta-breathe 3.6s ease-in-out infinite;
}
/* Animated energy border — conic beam masked to a hollow ring so it can
   never sit over the label text, however the paint order resolves. */
.section-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--scta-angle),
    transparent 0%,
    rgba(255, 255, 255, 0) 2%,
    #FFFFFF 8%,
    #A855F7 20%,
    #8F33FF 32%,
    #2575FC 46%,
    #4CC9FF 58%,
    rgba(76, 201, 255, 0) 70%,
    transparent 100%);
  opacity: 0.9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: scta-rotate 3.6s linear infinite;
  pointer-events: none;
  transition: opacity 0.28s ease, filter 0.28s ease;
}
/* Apple-style soft diagonal shine, clipped to the pill by overflow:hidden above */
.section-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 35%; height: 100%;
  z-index: 0;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: scta-shine 4.6s ease-in-out infinite;
}
.section-cta-btn-label { position: relative; z-index: 1; }
.section-cta-btn:hover {
  animation: none;
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    -5px 8px 28.5px 0px #9347F34D,
    0px 0px 16px 5px #FFFFFF40 inset,
    0 0 32px 7px rgba(168, 85, 247, 0.42),
    0 0 50px 10px rgba(37, 117, 252, 0.2),
    0 0 64px 12px rgba(76, 201, 255, 0.1),
    inset 0 -12px 16px rgba(20, 8, 46, 0.2);
}
.section-cta-btn:hover::before { opacity: 1; filter: brightness(1.25); }
.section-cta-btn:hover::after { animation-duration: 2.4s; }
@keyframes scta-rotate { to { --scta-angle: 360deg; } }
@keyframes scta-shine {
  0%   { left: -60%; }
  16%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes scta-breathe {
  0%, 100% {
    box-shadow:
      -5px 8px 28.5px 0px #9347F34D,
      0px 0px 16px 5px #FFFFFF40 inset,
      0 0 20px 2px rgba(143, 51, 255, 0.26),
      0 0 34px 5px rgba(37, 117, 252, 0.13),
      0 0 44px 6px rgba(76, 201, 255, 0.06),
      inset 0 -12px 16px rgba(20, 8, 46, 0.15);
  }
  50% {
    box-shadow:
      -5px 8px 28.5px 0px #9347F34D,
      0px 0px 16px 5px #FFFFFF40 inset,
      0 0 28px 5px rgba(168, 85, 247, 0.36),
      0 0 44px 9px rgba(37, 117, 252, 0.18),
      0 0 56px 10px rgba(76, 201, 255, 0.09),
      inset 0 -12px 16px rgba(20, 8, 46, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-cta-btn, .section-cta-btn::before, .section-cta-btn::after { animation: none; }
}
/* Legible on dark sections */
.value-section .section-cta-note { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 576px) {
  .section-cta { margin-top: 40px; }
  .section-cta-btn { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
}

/* 29. ANIMATION STATES ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(30px); }
.count-up { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* 30. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1500px) {
  .ba-grid { grid-template-columns: 1fr auto 1fr; }
  .ba-good-img { display: none; }
  .ba-grid::before, .ba-grid::after { display: none; }
}

@media (max-width: 860px) {
  .compat-row { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .launch-note .ln-main { flex-direction: column; text-align: center; gap: 20px; }
  .launch-note { text-align: center; }
  .launch-note .ln-copy { text-align: center; }
  .launch-note .ln-divider { width: 100%; height: 2px; align-self: auto; }
  .launch-note .ln-lock { flex-direction: column; text-align: center; gap: 10px; }
  .compat-badge { justify-content: center; }
}

@media (max-width: 1199px) {
  .ma_video_wrapper {
    max-width: 75%;
}
}
@media (max-width: 1024px) {
  .ba-grid { grid-template-columns: 1fr; gap: 18px; }
  .ba-people { display: none; }
  .ba-vs { margin: 0 auto; }
  .ba-face, .ba-col.after .ba-face { right: -17px; top: -45px; }
  .plugin-cards { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
  .day-timeline { grid-template-columns: repeat(2, 1fr); }
  .day-card::after { display: none; }
  .pain-stats { grid-template-columns: repeat(2, 1fr); }
  .testi-grid, .who-grid { grid-template-columns: repeat(2, 1fr); }
  .income-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .demo-collage { height: 500px; }
  .mock-1 { width: 400px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
  .section-header p {
    font-size: 16px;
    line-height: 1.4;
    color: var(--muted);
}
}

/* Top bar has no wrap between 901px-1099px (only wraps at <=900px below), causing
   the Buy Now button to overflow the viewport on small laptop/tablet-landscape sizes. */
@media (max-width: 1099px) and (min-width: 901px) {
  .top-bar-inner { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .tb-deal { display: none; }
}

@media (max-width: 900px) {
  .fe_mback_box { padding: 110px 24px 28px; }
  .fe_mback_list { grid-template-columns: 1fr; gap: 12px; padding: 20px 22px; }
  .hero-char { display: none; }
  .top-bar-inner { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .tb-deal { display: none; }
  .philo-grid, .philo-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
  .philo-grid.reverse .philo-content { order: 1; }
  .philo-grid.reverse .philo-visual { order: 2; }
  .philo-visual { height: 400px; }
  .era-card { flex: 0 0 calc(50% - 20px); }
  /* Hero responsive */
.hero-offer-line .just-price { font-size: 38px; line-height: 48px; }
  .hero-inner .btn-cta { font-size: 26px; line-height: 1.25; padding: 18px 30px; }
  .hero-pill-box { height: auto; min-height: 91px; padding: 16px 22px; }
  .geo_banner_watch_vector {
    max-width: 60px;
}
}

@media (max-width: 768px) {
  .section-header { margin-bottom: 48px; }
  .plugin-card, .plugin-card:nth-child(even) { grid-template-columns: 1fr; gap: 30px; padding: 32px 28px; }
  .plugin-card .pc-content, .plugin-card:nth-child(even) .pc-content { order: 1; }
  .plugin-card .pc-mockup,  .plugin-card:nth-child(even) .pc-mockup  { order: 2; }
  .day-timeline { grid-template-columns: 1fr; }
  .day-card::after { display: none; }
  .day-vector { display: none; }
  .day-cta { flex-direction: column; gap: 14px; text-align: center; }
  .day-foot { gap: 16px 22px; }
  .pain-stats { grid-template-columns: 1fr; }
  .testi-grid, .who-grid { grid-template-columns: 1fr; }
  .income-grid { grid-template-columns: 1fr; }
  .fe_bonus_item { padding: 26px 24px; border-radius: 28px; }
  .fe_bonus_inner, .fe_bonus_item:nth-child(even) .fe_bonus_inner { flex-direction: column; gap: 24px; }
  .fe_bonus_media { flex: 0 0 auto; width: 100%; max-width: 360px; }
  .ts-icon img {
    max-width: 60px;
}
}

@media (max-width: 700px) {
  .proof-logo { font-size: 13px; padding: 6px 14px 6px 6px; gap: 8px; }
  .proof-logo-badge { width: 26px; height: 26px; }
  .proof-logo img { height: 15px; max-width: 18px; }
  .demo-collage { height: auto; display: flex; flex-direction: column; gap: 20px; }
  .mock { position: static; transform: none !important; width: 100% !important; max-width: 400px; margin: 0 auto; }
  .value-row { grid-template-columns: 1.5fr 1fr; font-size: 14px; padding: 14px 0; }
  .value-row .price { font-size: 14px; }
}

@media (max-width: 576px) {
  section { padding: 64px 0; }
  .ai-era, .philo-section, .final-cta { padding: 64px 0; }
  .era-card { flex: 0 0 100%; }
  .container { padding-inline: 18px; }
  .top-bar { padding: 10px 12px; }
  .tb-coupon-row .code { font-size: 11px; padding: 3px 10px; }
  .tb-countdown { gap: 6px; }
  .tb-count-box { padding: 4px 8px; min-width: 38px; }
  .tb-count-num { font-size: 15px; }
  .tb-count-label { font-size: 8px; }
  .tb-buy { padding: 8px 14px; font-size: 12px; }
  .hero { padding: 56px 0 72px; }
  .hero-brand { gap: 12px; margin-bottom: 20px; }
  .hero-brand-mark { width: 56px; height: 56px; font-size: 24px; }
  .hero-pill { font-size: 14px; padding: 12px 20px; }
  .hero-cta { font-size: 18px; padding: 20px 34px; width: 100%; justify-content: center; }
  .hero-headline .hi-tail { font-size: 24px; line-height: 32px; }
 .hero-offer-line .just-price { font-size: 28px; line-height: 36px; }
  .hero-inner .btn-cta { font-size: 20px; line-height: 1.25; padding: 16px 20px; width: 100%; }
  .ms-formula { grid-template-columns: 1fr; }
  .ms-operator { display: none; }
  .ms-breakdown-grid { grid-template-columns: 1fr; }
  .jv-pric-inner { padding: 26px 12px 30px; }
  .jv-pric-logo { margin: -26px auto 0; padding: 14px 28px; }
  .jv-pric-list li { padding: 13px 12px 13px 16px; gap: 12px; }
  .guarantee-card { padding: 40px 24px; }
  .geo_banner_watch_vector {
    display: none;
}
}

@media (max-width: 480px) {
  .ba-face, .ba-col.after .ba-face { right: -10px; top: -10px; width: 62px; height: 62px; }
  .hero-trust-row { gap: 10px; }
  .hero-trust-row span { font-size: 13px; padding: 7px 13px; }
  .pain-stat { padding: 28px 20px; }
  .pain-stat .num { font-size: 44px; }
  .ms-container { padding: 44px 22px; }
  .value-card { padding: 28px 22px; }
  .value-row.total { margin: 24px -22px -28px; padding: 22px 22px; }
  .bonus-card, .testi-card { padding: 26px 22px; }
  .plugin-card, .plugin-card:nth-child(even) { padding: 26px 22px; gap: 24px; }
  .plugin-card .p-features li { font-size: 14px; }
  .pricing-cta { font-size: 18px; padding: 22px 22px; }
  .hero-headline .hi-money {
    margin: 4px 0 2px;
}
.hero-headline > span {
    margin-bottom: 3px;
}
.hero-pill-box {
    margin: 0 auto 20px;
}
.hero-headline {
    margin: 0 auto 24px;

}
.hero-inner .btn-cta {
    font-size: 18px;
    line-height: 1.25;
    padding: 16px 10px;
    width: 100%;
    border-radius: 10px;
}
}

@media (max-width: 390px) {
  .hero-brand-text { font-size: 48px; }
  .hero-offer-line, .hero-offer-line .just-price { font-size: 23px; line-height: 30px; }
  .jv-pric-price { font-size: 54px; }
  .ms-result-big { font-size: 52px; }
  .tb-count-box { min-width: 34px; padding: 4px 6px; }
  .ts-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
}

@media (max-width: 360px) {
  .container { padding-inline: 14px; }
  .hero-brand-mark { width: 50px; height: 50px; font-size: 22px; }
  .hero-brand-text { font-size: 42px; }
  .tb-line-main { font-size: 12px; }
  .tb-coupon-row .code { font-size: 10px; padding: 3px 8px; }
  .damage-amount { font-size: 44px; }
}




.forgeContainer .price-wrap span:first-child {
    text-shadow: none!important;
    color: #9d9d9d;
}
.forgeContainer .price-wrap span:last-child {
    color: var(--indigo-2);
}

/* 31. EXIT-INTENT POPUP ------------------------------------------------ */
.exit-popup-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(4, 2, 16, 0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.exit-popup-overlay.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.exit-popup {
  position: relative; width: 100%; max-width: 600px;
  background: linear-gradient(160deg, #ffffff 0%, #fff7e8 100%);
  border: 1px solid #ffe1b5;
  border-radius: 28px;
  padding: 44px 40px 36px;
  text-align: center;
  color: #1d1d1f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(255, 106, 0, 0.04),
    0 12px 32px rgba(255, 138, 0, 0.1),
    0 40px 90px rgba(120, 80, 20, 0.14);
  transform: scale(0.94) translateY(12px); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  max-height: 90vh; overflow-y: auto;
}
.exit-popup-overlay.is-visible .exit-popup { transform: scale(1) translateY(0); opacity: 1; }

.exit-popup-close {
  position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff7e8; border: 1px solid #ffe1b5;
  color: #ff6a00; font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}
.exit-popup-close:hover { background: #ffb800; border-color: #ffb800; color: #fff; transform: rotate(90deg) scale(1.06); }

.ep-decor { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ep-spark { position: absolute; font-size: 16px; animation: msTwinkle 3s ease-in-out infinite; }
.ep-spark.s1 { top: 16%; left: 8%; color: #fb923c; transform: rotate(-20deg); }
.ep-spark.s2 { top: 10%; right: 10%; color: #f97316; animation-delay: 0.5s; font-size: 12px; transform: rotate(15deg); }
.ep-spark.s3 { bottom: 30%; left: 6%; color: #fdba74; animation-delay: 1s; font-size: 12px; transform: rotate(-8deg); }
.ep-spark.s4 { top: 46%; right: 6%; color: #fb923c; animation-delay: 1.5s; transform: rotate(25deg); }

.ep-icon { margin: 0 auto 14px; filter: drop-shadow(0 4px 10px rgba(255, 106, 0, 0.3)); }
.ep-icon svg path, .ep-icon svg line { stroke: #ff6a00 !important; }
.ep-icon svg circle { fill: #ff6a00 !important; }
.ep-title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; line-height: 1.25; margin-bottom: 10px; color: #1d1d1f; }
.ep-title-grad {
  background: linear-gradient(90deg, #ff9a00, #ff6a00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ep-underline { display: block; width: 84px; height: 3px; margin: 0 auto 24px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffc72c, transparent); }

.ep-coupon-line { font-size: 18px; color: #666666; margin-bottom: 16px; }
.ep-code {
  display: inline-block; margin-left: 6px; padding: 5px 18px; border-radius: 999px;
  background: #fff7e8; border: 1.5px solid #ff6a00;
  color: #ff6a00; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; letter-spacing: 2px; font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 44, 0.25), 0 2px 8px rgba(255, 106, 0, 0.12);
}

.ep-offer-upto { display: block; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #ff9a00; margin-top: 4px; }
.ep-offer { margin: 4px 0 24px; line-height: 1; }
.ep-offer-num, .ep-offer-pct {
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: clamp(58px, 11vw, 88px);
  background: linear-gradient(120deg, #ffc72c 0%, #ff9a00 50%, #ff6a00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 16px rgba(255, 122, 24, 0.25));
}
.ep-offer-word {
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: clamp(36px, 7vw, 56px);
  color: #1d1d1f; vertical-align: middle;
}
.ep-price-line { font-size: 14px; color: #666666; margin-bottom: 24px; }
.ep-price-strike { text-decoration: line-through; color: #999999; }
.ep-price-sep { margin: 0 8px; color: #ffe1b5; }
.ep-price-now { color: #ff6a00; font-weight: 700; }

.ep-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 19px 24px; border-radius: 18px;
  background: linear-gradient(90deg, #ff9a00 0%, #ff6a00 55%, #ff3d00 100%);
  color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.4px;
  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.3), 0 2px 8px rgba(255, 61, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.ep-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(255, 106, 0, 0.4), 0 4px 12px rgba(255, 61, 0, 0.28); color: #fff; }
.ep-cta-dots {
  position: absolute; left: 0; top: 0; bottom: 0; width: 90px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
}
.ep-cta-arrow { transition: transform 0.25s ease; }
.ep-cta:hover .ep-cta-arrow { transform: translateX(4px); }

.ep-foot { margin-top: 18px; font-size: 12px; color: #999999; }

@media (max-width: 640px) {
  .exit-popup { padding: 34px 24px 28px; border-radius: 22px; }
}
@media (max-width: 380px) {
  .ep-offer-num, .ep-offer-pct { font-size: clamp(44px, 15vw, 58px); }
  .ep-offer-word { font-size: clamp(26px, 9vw, 36px); }
  .ep-coupon-line { font-size: 16px; }
  .ep-code { font-size: 15px; padding: 4px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .exit-popup-overlay, .exit-popup, .ep-spark { transition: none !important; animation: none !important; }
}