:root{
  --bg:#fff6f8;
  --banner-1:#d83a3a;
  --banner-2:#fa1b5a;
  --accent1:#ff1100;
  --accent2:#fd5182;
  --muted:#6b7280;
  --card:#fff;
  --glass:rgba(255,255,255,0.85);
  --radius:20px;
  --shadow-lg: 0 30px 60px rgba(12,18,30,0.08);
  --smooth: cubic-bezier(.2,.9,.2,1);
}
*{box-sizing:border-box}
body{height:100%;margin:0;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);font-family:Inter,system-ui,Arial;color:#071023;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* top promo banner */
.top-banner{
  position:fixed;left:0;right:0;top:0;z-index:999;padding:8px 12px;text-align:center;font-weight:800;color:#fff;
  background:linear-gradient(90deg,var(--banner-1),var(--banner-2));box-shadow:0 6px 30px rgba(0,0,0,0.12);
  transform:translateY(0);animation:bannerDrop .6s var(--smooth) both;
}
@keyframes bannerDrop{from{transform:translateY(-100%)} to{transform:none}}

/* layout container */
.wrap{max-width:1240px;margin:92px auto;padding:28px;position:relative}

/* grid background */
.grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.12;background-image:linear-gradient(transparent 30px, rgba(2,6,23,0.03) 31px),linear-gradient(90deg,transparent 30px, rgba(2,6,23,0.03) 31px);background-size:31px 31px}

/* hero layout */
.hero{
  display:grid;
  grid-template-columns:1fr 560px;
  gap:40px;
  align-items:center;
  position:relative;
}
.left{z-index:2}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid rgba(255,59,46,0.06);box-shadow:0 8px 26px rgba(255,59,46,0.06);font-weight:700;color:var(--accent1)}
.badge .emoji{background:linear-gradient(90deg,#fff0f0,#ffd7d7);padding:6px;border-radius:8px;display:inline-grid;place-items:center}

/* headline (smaller now) */
h1{
  font-family:Rubik,Inter,sans-serif;font-weight:900;margin:18px 0 12px;line-height:0.95;color:#071023;font-size:clamp(28px,5vw,56px);
  letter-spacing:-1px;will-change:transform;
}
h1 .accent{
  display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 200%;
  animation:gradShift 6s linear infinite;
}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.lead{color:var(--muted);max-width:720px;font-size:16px;margin-bottom:18px;opacity:.98}

/* info boxes */
.info-row{display:flex;gap:14px;margin-top:6px;flex-wrap:wrap}
.info{display:flex;gap:12px;align-items:center;background:var(--card);padding:12px 14px;border-radius:12px;box-shadow:0 12px 24px rgba(6,10,20,0.04);min-width:190px;transition:transform .28s var(--smooth)}
.info:hover{transform:translateY(-8px)}
.info .ico{width:44px;height:44;border-radius:10px;background:linear-gradient(90deg,#fff7f6,#ffdede);display:grid;place-items:center;font-size:18px}

/* price block */
.price-card{display:flex;gap:18px;align-items:center;margin-top:26px;background:linear-gradient(180deg,#fff,#fff);padding:18px;border-radius:24px;box-shadow:var(--shadow-lg);border:1px solid rgba(10,20,30,0.04);position:relative;overflow:visible}
.price-left{display:flex;gap:16px;align-items:center}
.price-col{min-width:170px}
.price-old{color:var(--muted);text-decoration:line-through;font-size:13px}
.price-now{font-weight:900;font-size:32px;margin-top:6px}
.discount{background:#dff7ea;color:#0b6b3e;padding:6px 8px;border-radius:8px;font-weight:800;margin-left:8px;font-size:13px}

.timer{color:var(--accent1);font-weight:800;font-size:13px;margin-top:6px}

/* right device */
.right{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.device-wrap{position:relative;border-radius:22px;padding:12px;background:linear-gradient(180deg,#fff,#fff);box-shadow:var(--shadow-lg);border:8px solid #fff;transition:transform .6s var(--smooth);will-change:transform}
.device-wrap:hover{transform:translateY(-10px) rotate(-1deg)}
.device-img{border-radius:12px;display:block;width:520px;height:320px;object-fit:cover}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 22px 48px rgba(255,59,46,0.14);cursor:pointer;
  transition:transform .28s var(--smooth),box-shadow .28s;
}
.play:hover{transform:translate(-50%,-50%) scale(1.08) rotate(-6deg);box-shadow:0 36px 80px rgba(255,59,46,0.18)}
.play:active{transform:translate(-50%,-50%) scale(.98)}

/* sticky Pay Now uses same CTA visual */
.sticky-cta{position:fixed;right:18px;bottom:28px;z-index:999}
.sticky-cta .cta-strong{padding:12px 18px;border-radius:999px;font-size:15px}

/* trainer floating card */
.trainer{
  position:absolute;right:34px;top:60%;transform:translateY(-50%);background:var(--card);padding:12px;border-radius:14px;box-shadow:0 26px 60px rgba(12,18,30,0.12);display:flex;gap:12px;align-items:center;border:1px solid rgba(10,20,30,0.04);transition:transform .35s var(--smooth),opacity .35s var(--smooth)
}
.trainer img{width:66px;height:66;border-radius:999px;object-fit:cover}
.trainer .meta{font-weight:800}
.trainer small{display:block;color:var(--muted);font-size:13px}

/* social proof */
.social-proof{display:flex;align-items:center;gap:8px;margin-top:18px}
.social-proof .avatars{display:flex}
.social-proof img{width:44px;height:44;border-radius:999px;border:3px solid #fff;margin-left:-12px;box-shadow:0 8px 26px rgba(2,6,23,0.06)}
.social-proof span{color:var(--muted);margin-left:8px;font-weight:600}

/* entrance animations & reveals */
.fade{opacity:0;transform:translateY(18px);transition:opacity .6s var(--smooth),transform .6s var(--smooth)}
.fade.visible{opacity:1;transform:none}
.title-split{display:inline-block;overflow:hidden}
.title-split span{display:inline-block;transform:translateY(110%);transition:transform .6s var(--smooth)}
.title-split.show span{transform:none}

/* small screens - DESKTOP -> TABLET adjustments */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 420px}
  .device-img{width:420px;height:260px}
  .trainer{right:16px}
}

/* CORE MOBILE: reorder right (video) to appear first on mobile,
   keep desktop grid unchanged. This replaces the previous mobile rules
   that only changed grid-template-columns. */
@media (max-width:800px){
  /* lay out as column on mobile so we can reorder */
  .hero{
    display:flex;
    flex-direction:column;
    gap:25px; /* slightly tighter */
  }

  /* make right (video) appear before left content on mobile */
  .hero .right { order: 1; width: 100%; align-self: stretch; }
  .hero .left  { order: 2; width: 100%; align-self: stretch; }

  /* ensure device visuals expand nicely */
  .device-wrap { margin: 0 auto 12px; width: 100%; max-width: 820px; box-sizing: border-box; }
  .device-img { width: 100%; height: auto; max-height: 360px; object-fit:cover; border-radius: 14px; }

  /* trainer card becomes inline under device */
  .trainer{ position: relative; right: auto; top: auto; transform:none; margin-top:12px; align-self:flex-start; }

  /* other adjustments from mobile rules preserved */
  .wrap{margin:120px 18px}
  .price-card{flex-direction:column;align-items:flex-start}
  .cta-strong{margin-left:0;margin-top:12px;width:100%}
  .cta-strong::after{left:-6px;right:-6px;top:-6px;bottom:-6px}
}

/* smaller mobile tweaks */
@media (max-width:420px){
  h1{font-size:28px}
  .price-now{font-size:22px}
  .device-img{height:160px}
  .badge{padding:6px 10px}
  .cta-strong{padding:12px 16px;font-size:15px}
  /* reduce device top margin a bit */
  .device-wrap { max-height: 320px; }
  .top-banner{
    font-size: 15px;
  }
}

/* micro effects */
.pulse{animation:pulse 1.8s infinite ease-in-out}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* social proof mobile stack (keeps original adjustments) */
@media (max-width: 600px) {
  .social-proof {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 12px !important;
  }

  .social-proof .avatars {
    justify-content: center;
    display: flex;
  }

  .social-proof .avatars img {
    width: 38px;
    height: 38px;
  }
  .hero{
    margin-top: -65px;
  }
  .wj_section{
    margin-top: -120px;
  }
}

/* accessibility reduce-motion */
@media (prefers-reduced-motion: reduce){
  .device-wrap, .play, .trainer, .info, .price-card, .cta-strong, .prx_card { transition: none !important; animation: none !important; }
}




/* Primary CTA Button – matches your site aesthetic */
.cta-strong {
  background: linear-gradient(90deg, #ff1100, #d83a3a);
  color: #ffffff;
  border: none;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 20px 60px rgba(232, 75, 75, 0.20);
  transition: 
      transform .25s cubic-bezier(.2, .9, .2, 1),
      box-shadow .25s,
      filter .25s;
}

/* Hover lift + glow */
.cta-strong:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 120px rgba(232, 75, 75, 0.32);
  filter: brightness(1.05);
}

/* Pulse Animation (optional) */
.pulse {
  animation: ctaPulse 1.8s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Mobile refinement */
@media (max-width: 480px) {
  .cta-strong {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
  }
}


  
/* footer */
/* DataEdge Footer v2 - isolated styles (prefix: dedge-) */
.dedge-footer {
  background-color: #111; /* theme dark */
  color: #eee;
  padding: 28px 16px;
  font-family: "Segoe UI", Arial, sans-serif;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.dedge-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Top Links */
.dedge-links-top {
  margin-bottom: 10px;
  font-size: 0.95rem;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  color: #ccc;
}

.dedge-top-link {
  color: #ddd;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease, transform 200ms ease;
}

.dedge-top-link:hover {
  color: #f44336; /* red accent */
  transform: translateY(-2px);
}

.dedge-sep {
  color: rgba(255,255,255,0.18);
  font-weight: 600;
}

/* Disclaimer paragraph */
.dedge-disclaimer {
  max-width: 980px;
  margin: 8px auto 12px;
  padding: 0 12px;
  color: #cfcfcf;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Copyright */
.dedge-copyright {
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 14px;
  padding-top: 12px;
  color: #999;
  font-size: 0.85rem;
}

/* Small screens */
@media (max-width: 540px) {
  .dedge-disclaimer {
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .dedge-links-top {
    gap: 8px;
    font-size: 0.9rem;
  }
  .dedge-top-link {
    text-decoration: none; /* cleaner on tiny displays */
  }
}
/* Certification section */

/* ===============================
   DataEdge — Premium Single Certificate
   =============================== */

#dedge-cert-single {
  background: #fff;
  padding: 50px 20px; /* reduced padding */
  text-align: center;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #111;
}

.dedge-cert-single-wrapper {
  max-width: 700px; /* tighter content width */
  margin: 0 auto;
}

/* Title */
.dedge-cert-single-title {
  font-size: 1.9rem; /* smaller for perfect fit */
  margin-bottom: 20px;
  font-weight: 800;
}
.dedge-cert-single-title span {
  color: #f44336;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Card entrance */
.dedge-cert-single-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
}
.dedge-cert-single-card.dedge-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Certificate frame */
.dedge-cert-single-frame {
  position: relative;
  max-width: 580px; /* smaller frame */
  margin: 0 auto;
  padding: 14px; /* reduced padding */
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  transition: transform .4s ease;
  will-change: transform;
}

/* Hover lift (subtle) */
.dedge-cert-single-frame:hover {
  transform: translateY(-6px) scale(1.01);
}

/* Certificate image */
.dedge-cert-single-img {
  width: 100%;
  border-radius: 10px;
  display: block;
  border: 8px solid #fff; /* white frame */
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .6s ease, transform .6s ease;
}
.dedge-cert-single-img.loaded {
  opacity: 1;
  transform: scale(1);
}

/* Animated dotted red border */
.dedge-cert-single-dash {
  position: absolute;
  inset: 10px; /* matches reduced size */
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events: none;
}
.dedge-cert-single-rect {
  fill: none;
  stroke: #f44336;
  stroke-width: 2.2;
  stroke-dasharray: 5 5;
  animation: dedge-dash 1.6s linear infinite;
}
@keyframes dedge-dash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 20; }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .dedge-cert-single-title {
    font-size: 1.5rem;
  }
  .dedge-cert-single-frame {
    max-width: 95%;
    padding: 10px;
  }
  .dedge-cert-single-dash {
    inset: 8px;
  }
}


/* wj-why.css - unique prefixed classes to avoid conflict */
#wj_section { padding: 48px 0; background: transparent; }
#wj_inner { max-width: 1100px; margin: 0 auto; padding: 6px 24px; }

/* heading */
.wj_tag { text-align:center; color: var(--accent1); font-weight:700; font-size:13px; letter-spacing:1px; margin-bottom:8px; }
.wj_title { text-align:center; font-family: Rubik, Inter, sans-serif; font-weight:900; font-size: clamp(30px, 4.5vw, 48px); margin:0; color:#071023; }
.wj_underline { width:88px; height:6px; margin:14px auto 30px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:6px; }

/* grid */
#wj_grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: stretch; padding: 0 6px; }

/* card */
.wj_card {
  background: var(--card);
  border-radius: 20px;
  padding: 32px;
  display:flex;
  gap:20px;
  align-items:flex-start;
  box-shadow: 0 18px 44px rgba(10,20,30,0.05);
  position:relative;
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, background-color .36s;
  cursor: pointer;
  outline: none;
}

/* decorative top-right quarter circle */
.wj_card::before{
  content:"";
  position:absolute;
  right:14px;
  top:12px;
  width:84px;
  height:84px;
  border-radius:0 0 0 84px;
  background: radial-gradient(60% 60% at 10% 10%, rgba(255,230,230,0.5), rgba(255,245,245,0.28));
  opacity:0.08;
  pointer-events:none;
  transition: opacity .36s, transform .36s;
}

/* icon box */
.wj_icon{
  width:64px;
  height:64px;
  min-width:64px;
  border-radius:14px;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 30px rgba(255,86,96,0.10);
  transform: translateY(0);
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, background .36s, filter .36s;
}

/* ensure svg icons show white */
.wj_icon svg path, .wj_icon svg rect, .wj_icon svg circle { fill: white !important; stroke: none !important; }

/* body text */
.wj_body .wj_h{ font-size:20px; margin:2px 0 10px; color:#071023; font-weight:900; }
.wj_body .wj_p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; }

/* default per-icon soft gradients (varied per card) */
#wj_card_1 .wj_icon { background: linear-gradient(140deg,#e5986b,#ffd0b9); } /* viz - soft orange */
#wj_card_2 .wj_icon { background: linear-gradient(140deg,#da7d80,#ffbfc7); } /* functions - pink */
#wj_card_3 .wj_icon { background: linear-gradient(140deg,#775da2,#d5c2ff); } /* dashboard - purple */
#wj_card_4 .wj_icon { background: linear-gradient(140deg,#72c29a,#bff0d7); } /* automation - green */
#wj_card_5 .wj_icon { background: linear-gradient(140deg,#91736c,#ffddd3); } /* cleaning - light pink */
#wj_card_6 .wj_icon { background: linear-gradient(140deg,#e1c5a8,#ffd9b3); } /* career - orange */

/* hover state - unified vivid gradient and tint */
.wj_card:hover {
  transform: translateY(-12px);
  box-shadow: 0 36px 110px rgba(9,12,20,0.12);
  background: linear-gradient(180deg,#fff, rgba(255,247,247,0.75));
}
.wj_card:hover::before { opacity: 0.28; transform: translateY(-6px); }

/* icon hover effect and color change */
.wj_card:hover .wj_icon {
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 36px 90px rgba(255,86,96,0.16);
  filter: saturate(1.05);
  background: linear-gradient(135deg,#ff6b2e,#d83a3a); /* vivid on hover */
}

/* keyboard focus visible */
.wj_card:focus-visible { box-shadow: 0 36px 110px rgba(9,12,20,0.12); transform: translateY(-8px); outline: 3px solid rgba(255,107,148,0.12); outline-offset:4px; }

/* responsive */
@media (max-width:1100px){
  #wj_grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  #wj_inner { padding: 8px 20px; }
}
@media (max-width:640px){
  #wj_grid { grid-template-columns: 1fr; gap: 20px; }
  .wj_card { padding: 20px; }
  .wj_icon { width:56px; height:56px; min-width:56px; border-radius:12px; }
}


/* wj2-who.css (unique wj2_ prefix) */
#wj2_section { padding: 72px 0; background: transparent; }
#wj2_inner { max-width: 1160px; margin: 0 auto; padding: 6px 28px; }

/* heading */
.wj2_tag { text-align:center; color: var(--accent1); font-weight:700; font-size:13px; letter-spacing:1px; margin-bottom:8px; }
.wj2_title { text-align:center; font-family: Rubik, Inter, sans-serif; font-weight:900; font-size: clamp(32px, 5vw, 56px); margin:6px 0 10px; color:#071023; }
.wj2_underline { width:100px; height:6px; margin:14px auto 36px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:6px; }

/* grid */
#wj2_grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items:stretch; padding: 0 6px; }

/* card */
.wj2_card {
  background: var(--card);
  border-radius: 20px;
  padding: 30px;
  display:flex;
  gap:22px;
  align-items:flex-start;
  box-shadow: 0 20px 60px rgba(10,20,30,0.05);
  position:relative;
  overflow:visible;
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, background-color .36s;
  cursor: pointer;
  outline: none;
}

/* top-right quarter circle */
.wj2_card::before{
  content:"";
  position:absolute;
  right:16px;
  top:10px;
  width:88px;
  height:88px;
  border-radius:0 0 0 88px;
  background: radial-gradient(60% 60% at 10% 10%, rgba(255,230,230,0.5), rgba(255,245,245,0.28));
  opacity:0.08;
  pointer-events:none;
  transition: opacity .36s, transform .36s;
}

/* icon */
.wj2_icon {
  width:68px;
  height:68px;
  min-width:68px;
  border-radius:16px;
  display:grid;
  place-items:center;
  box-shadow: 0 16px 36px rgba(255,86,96,0.10);
  transform: translateY(0);
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, background .36s, filter .36s;
}

/* default icon gradients for variety */
#wj2_card_1 .wj2_icon { background: linear-gradient(140deg,#e47b92,#ffcfcf); } /* cap */
#wj2_card_2 .wj2_icon { background: linear-gradient(140deg,#9e2838,#ffd9e1); } /* briefcase */
#wj2_card_3 .wj2_icon { background: linear-gradient(140deg,#a087dc,#e0d1ff); } /* group */
#wj2_card_4 .wj2_icon { background: linear-gradient(140deg,#d8b87d,#ffe6c9); } /* trend */
#wj2_card_5 .wj2_icon { background: linear-gradient(140deg,#74d9a0,#c7f7df); } /* rocket */
#wj2_card_6 .wj2_icon { background: linear-gradient(140deg,#d4a366,#ffe0bd); } /* laptop */

.wj2_icon svg path, .wj2_icon svg rect, .wj2_icon svg circle { fill: white !important; stroke: none !important; }

/* text */
.wj2_h { font-size:20px; margin:2px 0 10px; color:#071023; font-weight:900; }
.wj2_p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }

/* hover */
.wj2_card:hover {
  transform: translateY(-14px);
  box-shadow: 0 46px 140px rgba(9,12,20,0.12);
  background: linear-gradient(180deg,#fff, rgba(255,247,247,0.78));
}
.wj2_card:hover::before { opacity: 0.28; transform: translateY(-6px); }
.wj2_card:hover .wj2_icon {
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 40px 110px rgba(255,86,96,0.16);
  filter: saturate(1.05);
  background: linear-gradient(135deg,#ff6b2e,#d83a3a);
}

/* focus */
.wj2_card:focus-visible { outline: 3px solid rgba(255,107,148,0.12); outline-offset:4px; transform: translateY(-10px); }

/* responsive */
@media (max-width:1100px){
  #wj2_grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  #wj2_inner { padding: 8px 20px; }
}
@media (max-width:640px){
  #wj2_grid { grid-template-columns: 1fr; gap: 20px; }
  .wj2_card { padding: 20px; }
  .wj2_icon { width:56px; height:56px; min-width:56px; border-radius:12px; }
  .wj2_title { font-size: clamp(22px, 6.5vw, 36px); }
}

/* ========================= */
/*    WJ3 Dashboard Styles   */
/* ========================= */

#wj3_section {
  padding: 60px 0 140px;
  position: relative;
  background: linear-gradient(180deg,#0f1b2a 0%, #081224 100%);
  color: #fff;
  overflow: hidden;
}

.wj3_inner {
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}

.wj3_tag {
  color: #ff6b6b;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:10px;
}

.wj3_title {
  font-family:Rubik, Inter;
  font-weight:900;
  font-size:clamp(28px,6vw,64px);
  margin:0 0 8px;
}

.wj3_accent {
  background: linear-gradient(90deg,#ff4b4b,#d83a3a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.wj3_underline {
  width:92px;
  height:6px;
  margin:12px auto 28px;
  background:linear-gradient(90deg,#ff4b4b,#d83a3a);
  border-radius:6px;
}

/* SCROLL → HORIZONTAL CONTAINER */
.wj3_scroll_container {
  width:100%;
  position:relative;
  height:420px;
  overflow:hidden;
  margin-top:28px;
}

/* HORIZONTAL TRACK */
.wj3_carousel {
  position:absolute;
  left:0; top:0;
  height:100%;
  display:flex;
  gap:28px;
  padding:0 28px;
  align-items:center;
  will-change:transform;
}

/* SLIDES */
.wj3_card {
  min-width:560px;
  height:320px;
  flex:0 0 auto;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,0.02);
  box-shadow:0 10px 40px rgba(2,8,20,0.6),
             inset 0 0 0 1px rgba(255,255,255,0.03);
  transition:transform .36s, box-shadow .36s;
}

.wj3_card_inner {
  width:100%;
  height:100%;
  position:relative;
}

/* IMAGES */
.wj3_img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .6s ease, transform .6s ease;
  border-radius:14px;
  filter:saturate(.95) contrast(.95) brightness(.9);
}

/* HOVER CROSSFADE */
.wj3_before { opacity:1; z-index:1; }
.wj3_after  { opacity:0; z-index:2; }

.wj3_card:hover .wj3_after { opacity:1; transform:scale(1); }
.wj3_card:hover .wj3_before { opacity:0.08; transform:scale(1.02); }

.wj3_card:hover {
  transform: translateY(-8px);
  box-shadow:0 40px 140px rgba(0,0,0,0.6);
}

/* MANUAL SLIDER CONTROLS */
.wj3_controls {
  margin-top:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

.wj3_arrow {
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:26px;
  cursor:pointer;
  transition:background .22s ease, transform .22s ease;
}

.wj3_arrow:hover { background:rgba(255,255,255,0.14); transform:translateY(-3px); }

.wj3_dots {
  display:flex;
  gap:10px;
}

.wj3_dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
  cursor:pointer;
  transition:background .22s ease, transform .22s ease;
}

.wj3_dot.active {
  background:#d83a3a;
  transform:scale(1.35);
  box-shadow:0 6px 18px rgba(255,107,156,0.12);
}


/* RESPONSIVE */
@media (max-width:1000px){
  .wj3_scroll_container{ height:300px; }
  .wj3_card{ min-width:420px; height:260px; }
}

@media (max-width:640px){
  .wj3_scroll_container{ height:240px; }
  .wj3_card{ min-width:300px; height:200px; }
  .wj3_carousel{ gap:18px; padding:0 14px; }
}



/* ================= STICKY CTA (centered timer + animations) ================= */

.ucta_wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  will-change: transform, opacity;
}

/* strip (full width) */
.ucta_strip {
  width: 100%;
  background: linear-gradient(90deg, #fff6f6 0%, #fff9f9 100%);
  padding: 12px 0;
  border-top: 1px solid rgba(255, 90, 90, 0.06);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.06);
  animation: ucta_entrance .6s cubic-bezier(.2,.9,.2,1) both;
}

/* entrance */
@keyframes ucta_entrance {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* inner grid: left | center | right.
   Use 1fr auto 1fr so center stays exactly centered */
.ucta_inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 0 14px;
}

/* left */
.ucta_left {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

/* badge with subtle hover lift */
.ucta_badge {
  background: #fff1f2;
  color: #ff2b4e;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid rgba(255,80,80,0.08);
  box-shadow: 0 6px 18px rgba(255,80,80,0.04);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s;
}
.ucta_strip:hover .ucta_badge { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 36px rgba(255,80,80,0.08); }

/* prices (left cluster) */
.ucta_prices { display:flex; align-items: baseline; gap:8px; }
.ucta_price {
  background: linear-gradient(90deg,#ff1100,#d83a3a);
  color:#fff;
  padding:7px 12px;
  border-radius:10px;
  font-weight:900;
  font-size:16px;
  transition: transform .22s;
}
.ucta_old { text-decoration: line-through; color:#8b8b8b; font-weight:700; font-size:13px; }

/* CENTER: exact middle */
.ucta_center {
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ucta_timer {
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  color:#e84b4b;
  box-shadow: 0 12px 30px rgba(232,75,75,0.08);
  transition: transform .18s ease, box-shadow .22s;
  position: relative;
  overflow: visible;
}

/* gentle glow animation on timer */
@keyframes ucta_glow {
  0% { box-shadow: 0 10px 22px rgba(232,75,75,0.06); transform: translateY(0); }
  50% { box-shadow: 0 18px 40px rgba(232,75,75,0.10); transform: translateY(-2px); }
  100% { box-shadow: 0 10px 22px rgba(232,75,75,0.06); transform: translateY(0); }
}
.ucta_timer.ucta_pulse { animation: ucta_glow 2.8s ease-in-out infinite; }

/* small badge next to timer on hover */
.ucta_timer:hover { transform: translateY(-3px); }

/* right button */
.ucta_right { justify-self: end; display:flex; justify-content:flex-end; }
.ucta_btn {
  background: linear-gradient(90deg,#ff1100 0%,#fd4b7a 50%, #d83a3a 100%);
  background-size: 200% 100%;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(255,60,60,0.22);
  transition: transform .22s ease, box-shadow .22s ease, background-position .6s ease;
}
.ucta_btn:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 30px 80px rgba(255,60,60,0.30);
  background-position: 100% 0;
}
.ucta_btn:active { transform: translateY(-2px) scale(.98); }

/* small icon inside timer */
.ucta_icon { font-size: 15px; }

/* ================= MOBILE: decongest & single-line ================= */
@media (max-width: 760px) {
  .ucta_inner {
    grid-template-columns: auto 1fr auto; /* badge | price+timer area | button */
    gap: 10px;
    padding: 0 10px;
  }

  .ucta_left { gap: 8px; align-items:center; }

  /* shrink badge & prices */
  .ucta_badge { padding: 5px 8px; font-size: 12px; border-radius: 8px; }
  .ucta_price { padding: 6px 10px; font-size: 14px; }
  .ucta_old { display: none; } /* hide old price on narrow screens to avoid wrap */

  /* compact timer */
  .ucta_timer { padding: 6px 10px; font-size: 13px; box-shadow: 0 8px 22px rgba(232,75,75,0.06); }

  /* button becomes compact but still tappable */
  .ucta_btn { padding: 8px 12px; font-size: 14px; min-width: 96px; border-radius: 10px; }

  /* reduce overall strip padding to keep single-line height */
  .ucta_strip { padding: 8px 0; box-shadow: 0 -8px 20px rgba(0,0,0,0.04); }
}

/* very small screens: tiny tweaks */
@media (max-width: 420px) {
  .ucta_price { font-size: 13px; padding: 5px 8px; }
  .ucta_btn { padding: 8px 10px; font-size: 13px; }
  .ucta_timer { font-size: 12px; padding: 5px 8px; }
  .ucta_badge{
    display: none;
  }
}

/* accessibility: reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .ucta_strip, .ucta_inner, .ucta_btn, .ucta_timer, .ucta_badge {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== UPGRADED HIGH-CONVERSION CTA BUTTON ===== */
.ucta_btn {
  background: linear-gradient(90deg, #d80606 0%, #b50532 50%, #b70434 100%);
  background-size: 250% 100%;
  color: #fff;
  border: none;
  padding: 14px 28px; /* bigger button */
  border-radius: 14px;
  font-weight: 900;
  font-size: 18px; /* bigger text */
  letter-spacing: 0.3px;

  cursor: pointer;

  transition: background-position .5s ease,
              transform .25s ease,
              box-shadow .25s ease;
}

.ucta_btn:hover {
  background-position: 100% 0;
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 26px 65px rgba(200, 0, 0, 0.45),
              0 10px 24px rgba(0,0,0,0.25);
}

.ucta_btn:active {
  transform: scale(.97);
  box-shadow: 0 12px 30px rgba(200, 0, 0, 0.30);
}

/* Mobile adjustments (still attractive but readable) */
@media (max-width: 760px){
  .ucta_btn {
    padding: 12px 22px;
    font-size: 14px;
  }
}









/* Trainer Section — trn_ prefix */
#trn_section {
  padding: 48px 20px;
  display: block;
  background: linear-gradient(180deg, #fff7f7 0%, #fff1f3 100%);
}

/* inner card look */
.trn_inner {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  box-shadow: 0 30px 80px rgba(2,8,20,0.06);
}

/* left portrait */
.trn_left {
  background: linear-gradient(180deg,#fff,#fff);
  min-height: 520px;
  position: relative;
}
.trn_figure {
  margin: 0;
  height: 100%;
  width: 100%;
  display: block;
}
.trn_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 28px 0 0 28px; /* rounded left corners */
  filter: saturate(.98) contrast(.98);
  transition: transform .9s cubic-bezier(.2,.9,.2,1), filter .6s;
}

/* right dark panel */
.trn_right {
  background: linear-gradient(180deg,#081224 0%, #0b1830 100%);
  color: #fff;
  padding: 56px 56px;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 0 28px 28px 0;
  overflow: hidden;
}

/* subtle pattern overlay using CSS repeating-gradients */
.trn_right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  opacity: 0.06;
  pointer-events: none;
}

/* content */
.trn_content { position: relative; z-index: 2; max-width: 520px; }

.trn_kicker {
  color: #ff6b6b;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0 0 12px 0;
  font-size: 13px;
}

.trn_heading {
  margin: 0 0 14px 0;
  font-family: Rubik, Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 48px);
  color: #ffffff;
  line-height: 1.02;
}

.trn_text {
  margin: 0 0 26px 0;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1.7;
  max-width: 520px;
}

/* divider */
.trn_divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  margin: 20px 0 26px;
  width: 100%;
}

/* stats */
.trn_stats {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 6px;
}
.trn_stat {
  text-align: left;
}
.trn_stat_num {
  font-family: Rubik, Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #ffffff;
  text-shadow: 0 6px 18px rgba(2,8,20,0.45);
}
.trn_stat_lbl {
  margin-top: 6px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  font-size: 13px;
}

/* hover / reveal micro interaction */
.trn_inner:hover .trn_image { transform: scale(1.02); filter: saturate(1.02) contrast(1.02); }
.trn_inner { transform-origin: center; transition: transform .6s cubic-bezier(.2,.9,.2,1); }
.trn_inner.trn_reveal { transform: translateY(-4px); }

/* responsive */
@media (max-width: 980px) {
  .trn_inner { grid-template-columns: 1fr; border-radius: 20px; }
  .trn_image { border-radius: 20px 20px 0 0; height: 340px; }
  .trn_right { border-radius: 0 0 20px 20px; padding: 28px; min-height: auto; }
  .trn_stats { flex-wrap: wrap; gap: 18px; }
  .trn_stat_num { font-size: 24px; }
}

/* mobile tweaks */
@media (max-width: 520px) {
  #trn_section { padding: 26px 12px; }
  .trn_text { font-size: 14px; }
  .trn_heading { font-size: 26px; }
  .trn_image { height: 260px; }
}

@media (max-width: 980px) {
  .trn_inner {
    grid-template-columns: 1fr;
    border-radius: 20px;
    overflow: hidden;  /* ensures no gap appears */
  }

  .trn_left {
    min-height: auto;
  }

  .trn_image {
    border-radius: 20px 20px 0 0;
    height: 320px;
    display: block;
  }

  .trn_right {
    border-radius: 0 0 20px 20px;
    padding: 26px 24px;
    margin-top: 0 !important;   /* removes gap */
  }

  .trn_content {
    margin-top: 0 !important;   /* prevents spacing above text */
  }

  .trn_stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  .trn_stat_num {
    font-size: 24px;
  }
}

@media (max-width: 520px) {
  #trn_section {
    padding: 20px 10px;
  }

  .trn_image {
    height: 240px;              /* tighter & nicer */
  }

  .trn_heading {
    font-size: 24px;
  }

  .trn_text {
    font-size: 14px;
    line-height: 1.6;
  }
}


/* FAQs  */
:root{
    --bg: #fff6f7;
    --accent-red1:#e84b4b;
    --accent-red2:#ff6b94;
    --muted:#6b7280;
    --card:#ffffff;
  }

  /* base */
  html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;color:#071023;background:linear-gradient(180deg,#fff6f8 0%, #fff1f3 100%);}
  .faq-section{padding:46px 20px 80px;text-align:center}
  .faq-title{font-family:Rubik,Inter;font-size:clamp(34px,5.4vw,56px);margin:0 0 8px;font-weight:900;color:#071023}
  .faq-sub{color:var(--muted);margin:0 0 28px;font-size:15px}

  /* list container */
  .faq-list{max-width:980px;margin:20px auto 0;display:grid;gap:14px;padding:0 14px}

  /* item */
  .faq-item{border-radius:18px;overflow:visible}

  /* question button */
  .faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--card);border:1px solid rgba(7,16,35,0.06);
    padding:20px 22px;border-radius:18px;font-weight:800;font-size:18px;color:#071023;
    cursor:pointer;text-align:left;box-shadow:0 10px 30px rgba(2,6,23,0.03);
    transition: box-shadow .28s, transform .22s, background .22s;
  }
  .faq-q:focus{outline:3px solid rgba(232,75,75,0.12);outline-offset:4px}
  .faq-q .q-num{margin-right:10px;color:rgba(7,16,35,0.38);font-weight:900}
  .faq-q .chev{
    min-width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
    background: rgba(2,6,23,0.04);color:#0b1724;font-weight:900;font-size:20px;
    transition: transform .22s, background .22s, color .22s;
  }

  /* answer panel */
  .faq-a{
    margin-top:10px;border-radius:14px;padding:18px 22px;background:rgba(255,240,240,0.42);
    border:1px solid rgba(224,70,70,0.06);color:rgba(7,16,35,0.8);line-height:1.85;font-size:15px;
    overflow:hidden;height:0;opacity:0;transition:opacity .22s ease;will-change:height,opacity;
  }

  /* closed vs open visuals */
  .faq-item:not(.is-open) .faq-q{background:#fff}
  .faq-item:not(.is-open) .faq-q .chev{background: rgba(2,6,23,0.04); color:#0b1724}

  .faq-item.is-open .faq-q{
    background: linear-gradient(180deg,#fff6f6,#fff0f0);
    border-color: rgba(224,70,70,0.12);
    box-shadow: 0 22px 60px rgba(224,70,70,0.06);
  }
  .faq-item.is-open .faq-q .chev{
    background: linear-gradient(90deg,var(--accent-red1),var(--accent-red2));
    color:#fff; transform: rotate(45deg);
  }
  .faq-item.is-open .faq-a{opacity:1}

  /* tight spacing to match screenshot */
  .faq-list{gap:14px}
  .faq-q{padding:16px 20px;font-size:17px}
  .faq-a{padding:14px 20px;margin-top:8px}

  /* responsive */
  @media(max-width:760px){
    .faq-title{font-size:30px}
    .faq-q{font-size:16px;padding:12px 14px}
    .faq-a{padding:12px 14px}
    .faq-list{gap:12px}
  }


/* stx  */
/* ================= TESTIMONIALS — tst_eco_ ================= */
.tst_eco_section{padding:64px 20px;background:linear-gradient(180deg,#fff 0%,#fff6f6 100%);}
.tst_eco_inner{max-width:1200px;margin:0 auto;font-family:Inter,system-ui,Arial;text-align:center;}
.tst_eco_title{font-size:clamp(28px,5vw,48px);font-weight:900;margin:0;color:#071023}
.tst_eco_meta{color:#6b7280;margin-top:6px}
.tst_eco_stars{color:#ffcf33;letter-spacing:3px}

/* wrapper */
.tst_eco_wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-top:28px}

/* arrows */
.tst_eco_nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;background:#ffffffcc;border:1px solid rgba(10,20,30,0.04);font-size:28px;cursor:pointer;z-index:40;
  transition:transform .18s,box-shadow .18s}
.tst_eco_prev{left: -36px} .tst_eco_next{right: -36px}
.tst_eco_nav:active{transform:translateY(-50%) scale(.96)}
@media(max-width:720px){.tst_eco_nav{display:none}}

/* stage & track */
.tst_eco_stage{overflow:hidden;width:100%;max-width:1100px;touch-action:pan-y}
.tst_eco_track{display:flex;gap:28px;align-items:center;transition:transform .62s cubic-bezier(.22,.9,.2,1);will-change:transform;padding:18px}

/* card */
.tst_eco_card{flex:0 0 100%;max-width:840px;margin:auto;background:#fff;border-radius:28px;padding:34px;border:0;
  box-shadow:0 30px 70px rgba(2,8,20,0.06);transition:transform .42s cubic-bezier(.2,.9,.2,1),box-shadow .32s;min-height:220px;position:relative;opacity:0;transform:translateY(12px)}
.tst_eco_card.tst_eco_visible{opacity:1;transform:none}

/* quote marks */
.tst_eco_card::before,.tst_eco_card::after{content:"“";position:absolute;font-size:110px;color:rgba(241,224,224,.55);opacity:.18;pointer-events:none}
.tst_eco_card::before{left:18px;top:6px} .tst_eco_card::after{right:22px;bottom:10px;transform:rotate(180deg)}

/* content */
.tst_eco_quote{font-size:20px;line-height:1.45;color:#334155;font-weight:600;margin:0 8px 18px}
.tst_eco_profile{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
.tst_eco_avatar{width:86px;height:86px;border-radius:50%;object-fit:cover;border:8px solid #fff;box-shadow:0 8px 20px rgba(2,8,20,.08)}
.tst_eco_name{font-weight:900;color:#0b1724;margin:6px 0 0;font-size:18px}
.tst_eco_role{color:#ff6b6b;font-weight:800;font-size:12px;letter-spacing:1px}
.tst_eco_rate{color:#ffcf33;margin-top:8px}

/* active centred pop */
.tst_eco_card.is-active{transform:translateY(-8px) scale(1.02);box-shadow:0 40px 120px rgba(2,8,20,.08)}

/* dots */
.tst_eco_dots{display:flex;justify-content:center;gap:12px;margin-top:22px}
.tst_eco_dot{width:12px;height:12px;border-radius:50%;background:#dfdfe0;cursor:pointer;border:0;transition:all .24s}
.tst_eco_dot.tst_eco_active{width:40px;height:12px;border-radius:20px;background:linear-gradient(90deg,#ff4b4b,#ff6bb3);transform:translateY(-2px)}

/* hover micro */
.tst_eco_card:hover{transform:translateY(-12px) scale(1.01);box-shadow:0 50px 140px rgba(2,8,20,.09)}
.tst_eco_card:hover .tst_eco_avatar{transform:translateY(-4px);box-shadow:0 18px 40px rgba(255,75,75,.14);transition:transform .4s}

/* responsive sizing: show narrower card width at breakpoints so center math is stable */
@media(min-width:900px){.tst_eco_card{flex:0 0 70%}}
@media(min-width:1200px){.tst_eco_card{flex:0 0 58%}}
@media(max-width:640px){.tst_eco_card{padding:22px 16px;border-radius:20px}.tst_eco_quote{font-size:16px}.tst_eco_avatar{width:68px;height:68px;border-width:6px}}

/* reduced motion */
@media(prefers-reduced-motion:reduce){.tst_eco_track,.tst_eco_card{transition:none!important;animation:none!important}}





/* ===== Premium Resources (prx_) ===== */
:root{
  --prx-bg:#fff7f6;
  --prx-card:#fff;
  --prx-accent1:#ff4b4b;
  --prx-accent2:#ff6bb3;
  --prx-muted:#6b7280;
  --prx-radius:20px;
  --prx-shadow: 0 28px 68px rgba(12,18,30,0.06);
}

/* section layout */
.prx_section { background: linear-gradient(180deg,#fff #fff6f6); padding:64px 18px; }
.prx_inner { max-width:1200px; margin:0 auto; }

/* header */
.prx_top { text-align:center; margin-bottom:34px; }
.prx_pill {
  display:inline-block; padding:8px 14px; background:linear-gradient(90deg,#fff0f0,#ffdede);
  border-radius:999px; color:var(--prx-accent1); font-weight:700; margin-bottom:12px;
  box-shadow:0 6px 20px rgba(255,75,75,0.06);
}
.prx_title { font-size:clamp(26px,4vw,44px); margin:8px 0 6px; font-weight:900; color:#071023; }
.prx_sub { color:var(--prx-muted); margin:0 0 6px; }

/* grid */
.prx_grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style:none;
  padding:0;
  margin:32px 0 0;
}

/* card base */
.prx_card {
  background:var(--prx-card);
  border-radius: var(--prx-radius);
  padding:22px;
  box-shadow: var(--prx-shadow);
  position:relative;
  overflow:visible;
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .28s, border-radius .2s;
  cursor:default;
  outline: none;
}

/* focusable keyboard state */
.prx_card:focus { box-shadow: 0 40px 120px rgba(12,18,30,0.09); transform: translateY(-6px); }

/* inner */
.prx_card_inner { display:flex; flex-direction:column; height:100%; }

/* icon badge */
.prx_icon {
  width:62px; height:62px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:16px;
  box-shadow: 0 12px 30px rgba(255,75,75,0.12);
  background: linear-gradient(90deg, rgba(255,75,75,0.12), rgba(255,107,179,0.06));
}

/* title + description */
.prx_card_title { font-size:18px; margin:0 0 10px; color:#081224; font-weight:800; }
.prx_card_desc { margin:0 0 18px; color:var(--prx-muted); line-height:1.6; }

/* footer row */
.prx_card_foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid rgba(10,20,30,0.03); }
.prx_val_label { color:var(--prx-muted); font-size:13px; }
.prx_val_amount { color:var(--prx-accent1); font-weight:900; }

/* ribbon top-right */
.prx_ribbon {
  position:absolute; right:12px; top:12px; z-index:12;
  display:inline-block; pointer-events:none;
}
.prx_ribbon span {
  display:inline-block;
  background: linear-gradient(90deg,var(--prx-accent1),var(--prx-accent2));
  color:#fff; font-weight:800; padding:6px 10px; border-radius:12px 12px 8px 8px;
  box-shadow: 0 10px 30px rgba(255,75,75,0.14);
  font-size:13px;
}

/* hover effect: lift + subtle accent change */
.prx_card:hover {
  transform: translateY(-12px);
  box-shadow: 0 50px 140px rgba(12,18,30,0.10);
  border-radius: calc(var(--prx-radius) + 4px);
}
.prx_card:hover .prx_icon { box-shadow: 0 18px 46px rgba(255,75,75,0.16); transform: translateY(-4px); }

/* subtle accent overlay when active */
.prx_card[data-value]:hover::after {
  content: "";
  position: absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,75,75,0.015), rgba(255,107,179,0.008));
  pointer-events:none;
}

/* entrance reveal (will be toggled by JS) */
.prx_card { opacity:0; transform-origin:center; transform: translateY(10px) scale(0.996); transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .5s; }
.prx_card.prx_visible { opacity:1; transform: none; }

/* responsive */
@media (max-width: 980px) {
  .prx_grid { grid-template-columns: repeat(2, 1fr); gap:20px; }
  .prx_icon { width:56px; height:56px; }
}
@media (max-width: 600px) {
  .prx_grid { grid-template-columns: 1fr; gap:16px; }
  .prx_section { padding:40px 14px; }
  .prx_title { font-size:28px; }
  .prx_card { padding:18px; border-radius:16px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .prx_card, .prx_icon { transition: none !important; }
}
/* ============================================================
   PREMIUM RESOURCES – ADVANCED HOVER ANIMATIONS (prx_ani_)
   ============================================================ */

/* Smooth hover lift + aura glow */
.prx_card {
  transition: transform .45s cubic-bezier(.19,1,.22,1),
              box-shadow .45s cubic-bezier(.19,1,.22,1),
              border-radius .35s cubic-bezier(.19,1,.22,1),
              background .35s ease-out;
  position: relative;
  overflow: hidden;
}

/* Pink aura glow + floating effect */
.prx_card:hover {
  transform: translateY(-14px) scale(1.015);
  box-shadow: 0 60px 160px rgba(255, 80, 120, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #fff8fa 100%);
}

/* Gradient highlight sweep */
.prx_card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 110, 140, 0.06),
    rgba(255, 160, 200, 0.03),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.prx_card:hover::after {
  opacity: 1;
}

/* Icon hover pop + shine */
.prx_icon {
  transition: transform .45s cubic-bezier(.19,1,.22,1),
              box-shadow .45s cubic-bezier(.19,1,.22,1);
  position: relative;
  overflow: hidden;
}

/* Pop + glow on hover */
.prx_card:hover .prx_icon {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 20px 50px rgba(255, 75, 100, 0.32);
}

/* Shine animation inside icon */
.prx_icon::before {
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(
      100deg,
      transparent 0%,
      rgba(255,255,255,0.55) 50%,
      transparent 100%
  );
  transform:skewX(-30deg);
  transition: .6s;
}
.prx_card:hover .prx_icon::before {
  left:130%;
}

/* Title subtle lift */
.prx_card_title {
  transition: transform .35s ease, color .35s ease;
}
.prx_card:hover .prx_card_title {
  transform: translateY(-2px);
  color: #ff4b6b;
}

/* Ribbon micro-wiggle animation */
@keyframes prx_ribbon_wiggle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}
.prx_card:hover .prx_ribbon span {
  animation: prx_ribbon_wiggle .45s ease-in-out;
}

/* Ripple-in reveal animation */
.prx_visible {
  animation: prx_card_reveal .55s cubic-bezier(.19,1,.22,1) forwards;
}
@keyframes prx_card_reveal {
  0% { opacity:0; transform: translateY(20px) scale(0.96); }
  100% { opacity:1; transform: none; }
}

/* Mobile optimized — reduce motion impact */
@media (max-width: 600px) {
  .prx_card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 40px 120px rgba(255, 80, 120, 0.16);
  }
}
/* Rotating Gift Emoji Animation (Unique Prefix: prx_gift_) */
.prx_gift_spin {
  display: inline-block;
  animation: prx_gift_rotate 2.8s linear infinite;
  transform-origin: center;
}

/* Smooth 360° rotation */
@keyframes prx_gift_rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* If you want a softer premium wobble rotation instead */
@keyframes prx_gift_wobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(12deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-12deg); }
  100% { transform: rotate(0deg); }
}

@media (max-width: 800px) {

    .title-split{
      margin-left: -100px;
    }
    .badge{
      margin-top: -10px;
            margin-left: -70px;
    }
    .lead{
      margin-top: -10px;
      margin-left: 8px;
    }
}

/* === MOBILE REORDER FIX: exact sequence requested === */
@media (max-width: 800px) {

  /* Hero becomes a reorderable flex layout */
  .hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Flatten .left so its children can be reordered */
  .left {
    display: contents;
  }

  /* 1️⃣ Badge FIRST */
  .hero > .badge {
    order: 1;
  }

  /* 2️⃣ H1 SECOND */
  .hero > h1 {
    order: 2;
  }

  /* 3️⃣ Lead paragraph THIRD */
  .hero > .lead {
    order: 3;
  }

  /* 4️⃣ Device (video) */
  .hero > .right {
    order: 4;
    width: 100%;
    align-self: stretch;
  }

  .device-wrap {
    width: 100%;
    margin: 0 auto 6px;
  }

  /* 5️⃣ Trainer card */
  .hero > .trainer {
    order: 5;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 12px;
  }

  /* Keep original left-column elements after trainer */
  .info-row { order: 6; }
  .price-card { order: 7; }
  .social-proof { order: 8; }
}


/* promo-section-4bars.css - paste into your stylesheet */

/* theme-safe variables */
:root{
  --par-primary: var(--primary, #e72d46);
  --par-accent:  var(--accent,  #FF6B6B);
  --par-surface: var(--card, #ffffff);
  --par-muted: var(--muted, #6b7280);
}

/* SECTION */
.par-section {
  padding: 44px 18px;
  background: linear-gradient(180deg, rgba(215,35,45,0.02), rgba(255,250,250,0.02));
}

/* PANEL */
.par-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 34px;
  align-items: center;
  padding: 28px;
  border-radius: 34px;
  background: linear-gradient(180deg, var(--par-surface), color-mix(in srgb, var(--par-surface) 96%, #fff 4%));
  box-shadow: 0 40px 120px rgba(15,20,30,0.06);
  border: 1px solid rgba(0,0,0,0.03);
  position: relative;
  overflow: visible;
}

/* ART */
.par-art { display:flex; align-items:center; justify-content:center; padding:8px; }
.par-svg { width:100%; max-width:520px; height:auto; display:block; border-radius:22px; transform-origin:center; }

/* CONTENT */
.par-content { padding:6px 8px; max-width:760px; }
.par-eyebrow { font-weight:800; color: var(--par-primary); letter-spacing:0.6px; font-size:13px; margin-bottom:8px; }
.par-head { margin:6px 0 14px; font-weight:900; font-size: clamp(28px, 4.8vw, 48px); line-height:1.02; color: color-mix(in srgb, #000 8%, #071023 92%); }
.par-lead { margin:0 0 16px; color: var(--par-muted); line-height:1.6; font-size:15px; }
.par-affirm { margin:6px 0 4px; font-weight:900; font-size:20px; color: color-mix(in srgb, var(--par-primary) 8%, #071023 92%); }
.par-sub { margin:0 0 14px; font-weight:700; color:#26313a; }

/* ACTIONS */
.par-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0; }
.par-cta {
  display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border-radius:14px;
  color:#fff; text-decoration:none; font-weight:800; font-size:15px;
  background: linear-gradient(90deg, var(--par-primary), var(--par-accent));
  box-shadow: 0 20px 60px rgba(215,35,45,0.12);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s;
  border: none;
}
.par-cta:focus { outline: 3px solid rgba(209, 34, 43, 0.704); outline-offset:4px; }
.par-cta-old { margin-left:8px; text-decoration:line-through; opacity:0.9; font-weight:700; font-size:0.95em; }

.par-ghost { background:transparent; border:1px solid rgba(10,20,30,0.06); padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
.par-note { margin-top:8px; color: color-mix(in srgb, #000 24%, #334155 76%); font-weight:600; font-size:15px; }

/* BARS: initial collapsed state */
.par-svg .par-bar {
  transform-origin: center bottom;
  transform: scaleY(0.02);
  transition: transform 980ms cubic-bezier(.18,.88,.32,1);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.07));
}

/* FOUR-BAR STAGGER on .bars-animate */
.par-inner.bars-animate .par-svg .par-bar[data-i="0"] { transform: scaleY(0.55);  transition-delay:100ms; }
.par-inner.bars-animate .par-svg .par-bar[data-i="1"] { transform: scaleY(0.78);  transition-delay:220ms; }
.par-inner.bars-animate .par-svg .par-bar[data-i="2"] { transform: scaleY(0.95);  transition-delay:340ms; }
.par-inner.bars-animate .par-svg .par-bar[data-i="3"] { transform: scaleY(1);     transition-delay:460ms; }

/* hover micro interactions */
.par-art:hover .par-svg { transform: translateY(-6px) scale(1.01); transition: transform .26s ease; }
.par-cta:hover { transform: translateY(-6px); box-shadow: 0 36px 110px rgba(229, 35, 45, 0.14); }
.par-ghost:hover { transform: translateY(-4px); }

/* Responsive: stack for small screens and make art smaller */
@media (max-width:980px) {
  .par-inner { grid-template-columns: 1fr; gap:20px; padding:18px; }
  .par-art { order:-1; }
  .par-svg { max-width:92%; height:200px; }
  .par-head { font-size: clamp(22px, 7vw, 36px); }
  .par-cta { padding:12px 18px; }
}

/* mobile very small: reduce art height more */
@media (max-width:420px) {
  .par-svg { height:160px; }
  .par-head { font-size: 20px; }
}

/* Reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
  .par-svg .par-bar { transform: scaleY(1) !important; transition:none !important; }
  .par-art, .par-cta, .par-ghost { transition:none !important; transform:none !important; }
}

/* who can join this section css */
/* ===== who-section styling (paste near end of your stylesheet) ===== */

:root{
  --bg-1: #eef9ff;
  --bg-2: #f7fbff;
  --card-bg: #ffffff;
  --muted: #556070;
  --accent-1: #ff1100;
  --accent-2: #fd5182;
  --radius: 14px;
  --grid-gap: 18px;
  --max-w: 1200px;
}

/* Section wrapper */
#wj2_section.wj2_section {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  padding: 48px 14px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* inner container */
#wj2_inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 14px;
}

/* heading */
.wj2_tag {
  color: #ff4d4d;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wj2_title {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 900;
  color: #0b2030;
  margin: 6px 0 8px;
  line-height: 1.02;
}
.wj2_underline {
  width: 82px;
  height: 8px;
  border-radius: 6px;
  margin: 16px auto 26px;
  background: linear-gradient(90deg,#ff6b6b,#ff3b8d);
  box-shadow: 0 10px 30px rgba(255,90,90,0.06);
}

/* grid */
.wj2_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--grid-gap);
  margin-bottom: 22px;
  align-items: center;
  padding: 0 6px;
}

/* card (reduced height) */
.wj2_card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;        /* reduced padding -> smaller height */
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(6,18,31,0.06);
  transition: transform .26s cubic-bezier(.2,.9,.2,1), box-shadow .28s, background .18s;
  cursor: default;
  transform: translateY(12px);
  opacity: 0;
  outline: none;
}

/* icon tile */
.wj2_icon {
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;         /* emoji size */
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 10px 28px rgba(6,18,31,0.06);
}

/* tile gradients */
.wj2_i1 { background: linear-gradient(135deg,#ffd6fb,#ff9aa2); } /* HR */
.wj2_i2 { background: linear-gradient(135deg,#bde4ff,#59b3ff); } /* Eng */
.wj2_i3 { background: linear-gradient(135deg,#ffd6a5,#ff8a65); } /* Sales */
.wj2_i4 { background: linear-gradient(135deg,#c7f2e5,#4fd1a8); } /* Stat */
.wj2_i5 { background: linear-gradient(135deg,#fff1c6,#ffb86b); } /* Finance */
.wj2_i6 { background: linear-gradient(135deg,#e6d7ff,#b085ff); } /* Law */
.wj2_i7 { background: linear-gradient(135deg,#bfe3ff,#66b2ff); } /* Invest */
.wj2_i8 { background: linear-gradient(135deg,#d1fae5,#60a5fa); } /* Share */
.wj2_i9 { background: linear-gradient(135deg,#ffdada,#ff9aa2); } /* Student */

/* body text */
.wj2_body { text-align: left; }
.wj2_h { font-size: 1.02rem; margin: 0; color: #0b2030; font-weight: 800; }
.wj2_p { margin: 0; color: var(--muted); font-weight: 600; font-size: 0.95rem; }

/* hover & focus */
.wj2_card:hover, .wj2_card:focus {
  transform: translateY(-6px);
  box-shadow: 0 28px 80px rgba(6,18,31,0.12);
  border-radius: calc(var(--radius) + 2px);
}

/* CTA button */
.cta-strong {
  display:inline-block;
  margin: 6px auto 12px;
  padding: 12px 28px;
  border-radius: 12px;
  border: 0;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  box-shadow: 0 18px 56px rgba(11,93,255,0.12);
  cursor: pointer;
  font-size: 1rem;
}

/* pulse animation for CTA */
.cta-strong.pulse {
  animation: ctaPulse 2.6s infinite;
}
@keyframes ctaPulse {
  0% { transform: translateY(0); box-shadow: 0 18px 56px rgba(11,93,255,0.12); }
  50% { transform: translateY(-3px); box-shadow: 0 28px 80px rgba(11,93,255,0.16); }
  100% { transform: translateY(0); box-shadow: 0 18px 56px rgba(11,93,255,0.12); }
}

/* note text */
.wj2_note {
  margin-top: 14px;
  color: #0b2030;
  font-weight: 700;
  font-size: 0.98rem;
}

/* revealed helper */
.wj2_card.revealed { opacity: 1; transform: translateY(0) scale(1); }

/* responsive: tablets */
@media (max-width: 980px) {
  .wj2_grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .wj2_card { padding: 10px 14px; gap: 12px; }
  .wj2_icon { min-width: 50px; min-height: 50px; font-size: 28px; }
}

/* responsive: mobile */
@media (max-width: 520px) {
  .wj2_grid { grid-template-columns: 1fr; gap: 12px; padding: 0 8px; }
  #wj2_inner { padding: 0 10px; }
  .wj2_title { font-size: clamp(20px, 8vw, 30px); }
  .wj2_card { padding: 12px; gap: 10px; }
  .wj2_icon { min-width: 46px; min-height: 46px; font-size: 24px; }
  .cta-strong { width: 100%; padding: 12px; font-size: 1rem; }
}

/* reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .wj2_card, .cta-strong { transition: none !important; animation: none !important; }
}
.wj2_title {
  font-size: clamp(18px, 5.2vw, 36px) !important;
  white-space: nowrap !important;
}

/* ===================== PREMIUM RESOURCES SECTION ===================== */

.premium-resources {
  padding: 60px 20px;
  background: linear-gradient(180deg, #fff7f7 0%, #fff2f5 100%);
  font-family: Inter, system-ui, sans-serif;
}

.premium-resources .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Badge */
.premium-resources .badge {
  display: inline-block;
  background: #ffe8ec;
  color: #ff2752;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 40, 80, 0.2);
}

/* Titles */
.premium-resources .section-title {
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 900;
  margin: 0 0 10px;
  color: #071023;
}

.premium-resources .section-sub {
  color: #6b7280;
  margin-bottom: 28px;
  font-weight: 600;
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 20px;
}

/* Frame around card for hover glow */
.card-frame {
  border-radius: 20px;
  transition: transform .35s cubic-bezier(.2, .9, .2, 1),
              box-shadow .35s cubic-bezier(.2, .9, .2, 1);
}

.card-frame:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 90px rgba(0,0,0,0.08);
}

/* Actual card */
.card {
  background: #fff;
  border-radius: 20px;
  padding-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(5,10,20,0.06);
  transition: transform .35s, box-shadow .35s;
}

/* Card hover effect */
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 80px rgba(10,20,30,0.10);
}

/* Cover Image */
.card-art {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.card:hover .cover-img {
  transform: scale(1.08);
}

/* FREE pill */
.free-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(90deg, #ff5331, #ff2fa9);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 10px 25px rgba(255,40,80,0.22);
  animation: pillFloat 2.6s ease-in-out infinite;
}

@keyframes pillFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Card Content */
.card-body {
  padding: 18px 20px 10px;
  text-align: left;
}

.card-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #0b1724;
}

.card-desc {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 16px;
}

/* Footer */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.value-label {
  color: #6b7280;
  font-weight: 700;
  font-size: 13px;
}

.price {
  font-weight: 900;
  color: #ff2f68;
  font-size: 18px;
}

/* ===================== Responsive ===================== */

@media (max-width: 720px) {
  .premium-resources {
    padding: 40px 18px;
  }

  .card-art {
    height: 150px;
  }

  .card-title {
    font-size: 16px;
  }

  .card-desc {
    font-size: 13px;
  }

  .price {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .premium-resources .section-title {
    font-size: 26px;
  }

  .premium-resources .badge {
    font-size: 13px;
    padding: 6px 14px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card-art {
    height: 140px;
  }
  .ucta_badge{
    display: none;
  }
}


.btn-everywhere{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

/* ================= NOTIFICATION WIDGET (notif_ prefix) ================= */

.notif_widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000001;
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg,#fff,#fffefc);
  border: 1px solid rgba(10,10,10,0.06);
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(6,10,20,0.12);
  min-width: 260px;
  max-width: 360px;
  transform: translateY(18px) scale(.98);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .42s;
  font-family: Inter, system-ui, Arial;
  pointer-events: auto;
}

/* visible state */
.notif_widget.notif_show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* exit */
.notif_widget.notif_hide {
  transform: translateY(18px) scale(.98);
  opacity: 0;
}

/* icon */
.notif_icon {
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff7f6,#ffecec);
  font-size:20px; box-shadow:0 8px 22px rgba(255,50,80,0.06);
  transform-origin:center;
  animation: notif_icon_bounce 3s ease-in-out infinite;
}
@keyframes notif_icon_bounce {
  0%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(-8deg)}100%{transform:translateY(0)}
}

/* text */
.notif_text { display:flex;flex-direction:column; gap:2px; }
.notif_line1 { font-weight:800; color:#071023; font-size:14px; }
.notif_line2 { font-size:13px; color:#6b7280; }

/* close button */
.notif_close {
  position:absolute;
  right:8px;
  top:8px;
  background:transparent;border:none;color:#9aa0ac;font-size:14px;cursor:pointer;padding:6px;border-radius:6px;
  transition: transform .18s, color .18s;
}
.notif_close:hover { transform:scale(1.06); color:#ff4b4b; }

/* mobile placement: above bottom CTA (JS will update bottom) */
@media (max-width: 760px) {
  .notif_widget { left: auto; right: 14px; bottom: 96px; min-width:220px; max-width:300px; }
}

/* small screens: tighten */
@media (max-width:420px){
  .notif_widget { padding:10px 12px; min-width:200px; }
  .notif_line1{ font-size:13px } .notif_line2{ font-size:12px }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .notif_widget, .notif_icon { animation: none !important; transition: none !important; }
}


/* ================= ACTION TAKER SECTION (actk_) ================= */

.actk_section {
  background: linear-gradient(180deg, #fff3f4 0%, #ffe8eb 100%);
  padding: 70px 20px;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  position: relative;
  overflow: hidden;
}

.actk_inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  animation: actk_fadeIn 1s ease-out forwards;
  opacity: 0;
}

@keyframes actk_fadeIn {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.actk_tag {
  font-weight: 800;
  color: #ff1d40;
  background: #ffe3e6;
  padding: 8px 18px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 18px;
  border: 1px solid rgba(255,0,30,0.15);
}

.actk_heading {
  font-size: clamp(28px, 6vw, 50px);
  font-weight: 900;
  margin-bottom: 12px;
  color: #111;
}

.actk_accent {
  background: linear-gradient(90deg, #ff2e2e, #ff5b9a);
  -webkit-background-clip: text;
  color: transparent;
}

.actk_sub {
  color: #6b7280;
  max-width: 700px;
  margin: 10px auto 30px;
  font-size: 16px;
}

/* Stats */
.actk_stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.actk_stat {
  text-align: center;
}

.actk_stat_num {
  font-size: 38px;
  font-weight: 900;
  background: linear-gradient(90deg, #ff2e2e, #ff5b9a);
  -webkit-background-clip: text;
  color: transparent;
}

.actk_stat_label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-top: 4px;
}

/* CTA Button */
.actk_cta_btn {
  background: linear-gradient(90deg, #d80606, #b10532, #8b0428);
  background-size: 200% 100%;
  color: #fff;
  border: none;
  padding: 16px 36px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(150,0,0,0.25);
  transition: background-position .45s ease, transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .4s ease;
}

.actk_cta_btn:hover {
  background-position: 100% 0;
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 28px 70px rgba(150,0,0,0.35);
  animation: actk_wiggle .45s ease;
}

@keyframes actk_wiggle {
  0% { transform: translateY(-6px) scale(1.05) translateX(0); }
  25% { transform: translateY(-6px) scale(1.05) translateX(3px); }
  50% { transform: translateY(-6px) scale(1.05) translateX(-3px); }
  75% { transform: translateY(-6px) scale(1.05) translateX(2px); }
  100% { transform: translateY(-6px) scale(1.05) translateX(0); }
}

.actk_small_note {
  color: #ff2e2e;
  margin-top: 16px;
  font-weight: 700;
  font-size: 15px;
}

/* MOBILE VIEW */
@media (max-width: 730px) {
  .actk_stats {
    gap: 24px;
  }

  .actk_cta_btn {
    width: 100%;
    font-size: 18px;
  }

  .actk_stat_num {
    font-size: 30px;
  }
}