/* ============================================================================
   b-redesign.css — premium redesign of the "Activate your Digital Business Card"
   page (b-redesign.html). Scoped under `body.b-activate-redesign` so it only
   affects the new page. Built to MATCH the EventTitans Home Page design system
   (styles-et.css tokens: #8B5CF6 purple, #3B82F6 blue, #0F172A dark, glass cards,
   0.5–1rem radius, purple→blue gradients, AOS motion). Original b.html untouched.
   ========================================================================== */

body.b-activate-redesign{
  /* DigitalBusinessCardRedesign palette (indigo -> violet -> fuchsia over dark aurora) */
  --bar-purple:#6366f1; --bar-violet:#a855f7; --bar-fuchsia:#e647c9; --bar-cyan:#22d3ee; --bar-primary:#7c5cff;
  --bar-dark:#0b0a1a; --bar-dark2:#14122b;
  --bar-text:#e7e6f3; --bar-muted:#a7a3c4; --bar-line:rgba(255,255,255,.10);
  --bar-grad:linear-gradient(120deg,#6366f1 0%,#a855f7 50%,#e647c9 100%);
  --bar-grad-text:linear-gradient(120deg,#c4b5fd 0%,#a855f7 45%,#e647c9 100%);
  --bar-card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  --bar-radius:1rem; --bar-radius-lg:1.5rem;
  --bar-shadow:0 24px 60px -30px rgba(0,0,0,.72);
  --bar-glow:0 0 0 1px rgba(255,255,255,.06), 0 30px 80px -30px rgba(124,92,255,.6);
  --bar-ease:cubic-bezier(.16,.84,.44,1);
  font-family:"Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  color:var(--bar-text) !important;
  /* aurora applied on the body itself (fixed) — no ::before/z-index trap that broke the nav dropdowns */
  background:
    radial-gradient(1100px 720px at 10% 0%, rgba(124,92,255,.22) 0%, transparent 55%),
    radial-gradient(950px 620px at 92% 4%, rgba(230,71,201,.16) 0%, transparent 52%),
    radial-gradient(900px 820px at 82% 100%, rgba(34,211,238,.10) 0%, transparent 55%),
    linear-gradient(180deg,#0b0a1a 0%,#100e24 45%,#0c0b1e 100%) !important;
  background-attachment:fixed !important;
  overflow-x:hidden;
}

/* ---------- shared bits ---------- */
body.b-activate-redesign .bar-container{ max-width:1200px; margin-inline:auto; padding-inline:20px; }
body.b-activate-redesign .bar-grad-text{ background:var(--bar-grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.b-activate-redesign .bar-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; letter-spacing:.04em;
  font-size:.8rem; color:#c4b5fd; background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.32);
  padding:.45rem .95rem; border-radius:999px;
}
body.b-activate-redesign .bar-section{ padding:clamp(3.5rem,6vw,5.5rem) 0; position:relative; }
body.b-activate-redesign .bar-head{ text-align:center; max-width:720px; margin:0 auto clamp(2rem,4vw,3rem); }
body.b-activate-redesign .bar-head h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:700; margin:1rem 0 .6rem; color:#fff; }
body.b-activate-redesign .bar-head p{ color:var(--bar-muted); font-size:1.08rem; margin:0; }

/* reveal (IntersectionObserver adds .is-in) */
body.b-activate-redesign .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--bar-ease), transform .7s var(--bar-ease); }
body.b-activate-redesign .reveal.is-in{ opacity:1; transform:none; }
body.b-activate-redesign .reveal[data-d="1"]{ transition-delay:.08s } body.b-activate-redesign .reveal[data-d="2"]{ transition-delay:.16s }
body.b-activate-redesign .reveal[data-d="3"]{ transition-delay:.24s } body.b-activate-redesign .reveal[data-d="4"]{ transition-delay:.32s }

/* ---------- HERO ---------- */
body.b-activate-redesign .bar-hero{ position:relative; overflow:hidden; padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem); }
body.b-activate-redesign .bar-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
body.b-activate-redesign .bar-hero h1{ font-size:clamp(2.4rem,5vw,4.2rem); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:1.2rem 0 1rem; color:#fff; }
body.b-activate-redesign .bar-hero h1 .bar-grad-text{ display:block; }
body.b-activate-redesign .bar-hero .bar-lead{ color:var(--bar-muted); font-size:clamp(1.02rem,1.35vw,1.2rem); max-width:44ch; }
body.b-activate-redesign .bar-hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
body.b-activate-redesign .bar-hero-stats{ display:flex; gap:2rem; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--bar-line); }
body.b-activate-redesign .bar-hero-stats b{ display:block; font-size:1.5rem; font-weight:700; background:var(--bar-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.b-activate-redesign .bar-hero-stats span{ color:var(--bar-muted); font-size:.82rem; }
body.b-activate-redesign .bar-hero-visual{ position:relative; }
body.b-activate-redesign .bar-hero-visual .bar-glow{ position:absolute; inset:-8% -4%; background:var(--bar-grad); filter:blur(70px); opacity:.32; border-radius:40px; }
body.b-activate-redesign .bar-hero-visual img{ position:relative; z-index:2; width:100%; height:auto; border-radius:20px; filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)); animation:bar-float 6s ease-in-out infinite; }
@keyframes bar-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* ---------- MOBILE APP ---------- */
body.b-activate-redesign .bar-app{ }
body.b-activate-redesign .bar-app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
body.b-activate-redesign .bar-app-card{ background:var(--bar-card); border:1px solid var(--bar-line); border-radius:var(--bar-radius-lg); padding:clamp(1rem,2.5vw,1.8rem); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--bar-shadow); }
body.b-activate-redesign .bar-app-card img{ width:100%; height:auto; border-radius:var(--bar-radius); display:block; }
body.b-activate-redesign .bar-app h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:700; color:#fff; margin:1rem 0; }
body.b-activate-redesign .bar-app p{ color:var(--bar-muted); font-size:1.05rem; line-height:1.7; }
body.b-activate-redesign .bar-store-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
body.b-activate-redesign .bar-store-btn{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid var(--bar-line); border-radius:14px; padding:.7rem 1.1rem;
  color:#fff; transition:transform .25s var(--bar-ease), border-color .25s, background .25s;
}
body.b-activate-redesign .bar-store-btn:hover{ transform:translateY(-3px); border-color:rgba(124,92,255,.55); background:rgba(255,255,255,.1); }
body.b-activate-redesign .bar-store-btn .bar-store-ico{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--bar-grad); font-size:1.2rem; }
body.b-activate-redesign .bar-store-btn small{ color:var(--bar-muted); font-size:.72rem; display:block; line-height:1; }
body.b-activate-redesign .bar-store-btn b{ color:#fff; font-size:1.05rem; }

/* ---------- ACTIVATION STEPS (premium card grid) ---------- */
body.b-activate-redesign .bar-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
body.b-activate-redesign .bar-step{
  position:relative; background:var(--bar-card); border:1px solid var(--bar-line); border-radius:var(--bar-radius-lg);
  overflow:hidden; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--bar-shadow); transition:transform .35s var(--bar-ease), box-shadow .35s var(--bar-ease), border-color .35s var(--bar-ease);
}
body.b-activate-redesign .bar-step::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--bar-grad); opacity:0; transition:opacity .3s; }
body.b-activate-redesign .bar-step:hover{ transform:translateY(-8px); box-shadow:var(--bar-glow); border-color:rgba(124,92,255,.45); }
body.b-activate-redesign .bar-step:hover::before{ opacity:1; }
body.b-activate-redesign .bar-step-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#111827; }
body.b-activate-redesign .bar-step-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--bar-ease); }
body.b-activate-redesign .bar-step:hover .bar-step-media img{ transform:scale(1.05); }
body.b-activate-redesign .bar-step-num{
  position:absolute; top:14px; left:14px; z-index:2; width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center; font-family:inherit; font-weight:700; font-size:1.15rem; color:#fff;
  background:var(--bar-grad); box-shadow:0 12px 26px -8px rgba(99,102,241,.7);
}
body.b-activate-redesign .bar-step-body{ padding:1.4rem 1.5rem 1.6rem; }
body.b-activate-redesign .bar-step-body h3{ font-size:1.22rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
body.b-activate-redesign .bar-step-body p{ color:#c3c9d8; margin:0 0 .7rem; font-size:.96rem; }
body.b-activate-redesign .bar-step-details{ list-style:none; padding:0; margin:0; }
body.b-activate-redesign .bar-step-details li{ position:relative; padding-left:1.5rem; margin-bottom:.45rem; color:var(--bar-muted); font-size:.9rem; line-height:1.5; }
body.b-activate-redesign .bar-step-details li::before{ content:""; position:absolute; left:0; top:.35em; width:.7rem; height:.7rem; border-radius:50%; background:var(--bar-grad); box-shadow:0 0 0 3px rgba(124,92,255,.15); }

/* ---------- DEMO VIDEO ---------- */
body.b-activate-redesign .bar-video{ position:relative; max-width:940px; margin:0 auto; border-radius:var(--bar-radius-lg); overflow:hidden; box-shadow:var(--bar-glow); border:1px solid var(--bar-line); }
body.b-activate-redesign .bar-video-inner{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#1e293b,#0f172a); display:grid; place-items:center; }
body.b-activate-redesign .bar-video-inner::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, rgba(124,92,255,.25), transparent 70%); }
body.b-activate-redesign .bar-play{ position:relative; z-index:3; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:var(--bar-grad); box-shadow:0 20px 50px -14px rgba(99,102,241,.8); transition:transform .3s var(--bar-ease); animation:bar-pulse 2.6s ease-out infinite; }
body.b-activate-redesign .bar-play:hover{ transform:scale(1.08); }
@keyframes bar-pulse{ 0%{ box-shadow:0 20px 50px -14px rgba(99,102,241,.8), 0 0 0 0 rgba(124,92,255,.5); } 70%{ box-shadow:0 20px 50px -14px rgba(99,102,241,.8), 0 0 0 26px rgba(124,92,255,0); } 100%{ box-shadow:0 20px 50px -14px rgba(99,102,241,.8), 0 0 0 0 rgba(124,92,255,0); } }
body.b-activate-redesign .bar-video-duration{ position:absolute; bottom:16px; right:18px; z-index:3; background:rgba(0,0,0,.5); color:#fff; padding:.3rem .7rem; border-radius:999px; font-size:.8rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
body.b-activate-redesign #videoContainer{ position:relative; }
body.b-activate-redesign #videoContainer iframe{ display:block; border:0; }

/* stats */
body.b-activate-redesign .bar-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:760px; margin:2.4rem auto 0; }
body.b-activate-redesign .bar-stat{ text-align:center; background:var(--bar-card); border:1px solid var(--bar-line); border-radius:var(--bar-radius); padding:1.5rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .3s var(--bar-ease); }
body.b-activate-redesign .bar-stat:hover{ transform:translateY(-4px); }
body.b-activate-redesign .bar-stat b{ display:block; font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:700; background:var(--bar-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.b-activate-redesign .bar-stat span{ color:var(--bar-muted); font-size:.9rem; }

/* ---------- CTA ---------- */
body.b-activate-redesign .bar-cta{ position:relative; overflow:hidden; border-radius:var(--bar-radius-lg);
  background:linear-gradient(120deg,#6366f1 0%,#a855f7 52%,#e647c9 100%); box-shadow:0 34px 90px -34px rgba(124,92,255,.7);
  display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:clamp(1.5rem,3vw,3rem); padding:clamp(2.2rem,4vw,3.4rem); }
body.b-activate-redesign .bar-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.2), transparent 55%); }
body.b-activate-redesign .bar-cta > *{ position:relative; z-index:1; }
body.b-activate-redesign .bar-cta-copy{ text-align:left; }
body.b-activate-redesign .bar-cta h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:700; line-height:1.12; margin:1rem 0; }
body.b-activate-redesign .bar-cta p{ color:rgba(255,255,255,.92); max-width:46ch; margin:0 0 1.6rem; font-size:1.06rem; }
body.b-activate-redesign .bar-cta .btn-cta{ display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:#5b21b6; font-weight:700; border-radius:.7rem; padding:.9rem 1.8rem; text-decoration:none; box-shadow:0 14px 34px -12px rgba(0,0,0,.5); transition:transform .25s var(--bar-ease); }
body.b-activate-redesign .bar-cta .btn-cta:hover{ transform:translateY(-3px); }
body.b-activate-redesign .bar-cta-visual{ position:relative; }
body.b-activate-redesign .bar-cta-glow{ position:absolute; inset:-12%; background:rgba(255,255,255,.28); filter:blur(55px); border-radius:50%; }
body.b-activate-redesign .bar-cta-visual img{ position:relative; z-index:1; width:100%; height:auto; border-radius:16px; filter:drop-shadow(0 34px 54px rgba(0,0,0,.55)); animation:bar-float 6s ease-in-out infinite; }
@media (max-width:768px){
  body.b-activate-redesign .bar-cta{ grid-template-columns:1fr; text-align:center; }
  body.b-activate-redesign .bar-cta-copy{ text-align:center; }
  body.b-activate-redesign .bar-cta p{ margin-left:auto; margin-right:auto; }
  body.b-activate-redesign .bar-cta-visual{ order:-1; max-width:320px; margin:0 auto; }
}
body.b-activate-redesign .bar-trust{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:1.4rem; margin-top:1.8rem; }
@media (max-width:768px){ body.b-activate-redesign .bar-trust{ justify-content:center; } }
body.b-activate-redesign .bar-trust-item{ display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.92); font-size:.9rem; font-weight:500; }
body.b-activate-redesign .bar-trust-item .dot{ width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25); animation:bar-pulsedot 2s infinite; }
@keyframes bar-pulsedot{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }

/* ---------- QR modals restyle ---------- */
body.b-activate-redesign #iosQrModal .modal-content, body.b-activate-redesign #androidQrModal .modal-content{ background:#131a2c; border:1px solid var(--bar-line); border-radius:var(--bar-radius-lg); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:991.98px){
  body.b-activate-redesign .bar-hero-grid{ grid-template-columns:1fr; }
  body.b-activate-redesign .bar-app-grid{ grid-template-columns:1fr; }
  body.b-activate-redesign .bar-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  body.b-activate-redesign .bar-steps{ grid-template-columns:1fr; }
  /* (1) hero stats — 3 cards in one line */
  body.b-activate-redesign .bar-hero-stats{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:.55rem; flex-wrap:nowrap; }
  body.b-activate-redesign .bar-hero-stats > div{ min-width:0; }
  body.b-activate-redesign .bar-hero-stats b{ font-size:1.15rem; }
  body.b-activate-redesign .bar-hero-stats span{ font-size:.64rem; line-height:1.2; }
  /* (2) App Store / Google Play — one line */
  body.b-activate-redesign .bar-store-row{ flex-wrap:nowrap; gap:.5rem; }
  body.b-activate-redesign .bar-store-btn{ flex:1 1 0; min-width:0; padding:.55rem .5rem; gap:.5rem; }
  body.b-activate-redesign .bar-store-btn .bar-store-ico{ width:34px; height:34px; font-size:1rem; flex:none; }
  body.b-activate-redesign .bar-store-btn b{ font-size:.88rem; }
  body.b-activate-redesign .bar-store-btn small{ font-size:.6rem; }
  /* (3) "See the Magic" stats — 3 in one line */
  body.b-activate-redesign .bar-stats{ grid-template-columns:repeat(3,1fr); gap:.55rem; }
  body.b-activate-redesign .bar-stat{ padding:.9rem .4rem; }
  body.b-activate-redesign .bar-stat b{ font-size:1.25rem; }
  body.b-activate-redesign .bar-stat span{ font-size:.64rem; line-height:1.25; }
  body.b-activate-redesign .bar-hero-cta .btn{ width:100%; justify-content:center; }
}

/* ============================ MOTION / A11Y ============================ */
@media (prefers-reduced-motion: reduce){
  body.b-activate-redesign *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  body.b-activate-redesign .reveal{ opacity:1 !important; transform:none !important; }
  body.b-activate-redesign .bar-hero-visual img, body.b-activate-redesign .bar-play{ animation:none; }
}
body.b-activate-redesign :focus-visible{ outline:3px solid rgba(124,92,255,.6); outline-offset:2px; border-radius:6px; }

/* ============================================================================
   NAV re-theme — keep the Home Page nav ITEMS, restyle to the dbc palette.
   High z-index so the mega-dropdowns sit above the content (was hidden before).
   ============================================================================ */
body.b-activate-redesign .navbar{
  background:rgba(11,10,26,.72) !important; -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--bar-line); position:relative; z-index:1000;
}
body.b-activate-redesign .nav-link{ color:#e7e6f3 !important; font-weight:500; }
body.b-activate-redesign .nav-item.dropdown-mega:hover > .nav-link,
body.b-activate-redesign .nav-link:hover{ color:#fff !important; }
body.b-activate-redesign .nav-link i, body.b-activate-redesign .mega-dropdown-link i{ color:#a855f7 !important; }
body.b-activate-redesign .mega-dropdown{ background:linear-gradient(180deg,#14122b,#0b0a1a) !important; border-top:1px solid var(--bar-line) !important; box-shadow:0 24px 60px -18px rgba(0,0,0,.7) !important; z-index:1001 !important; }
body.b-activate-redesign .mega-dropdown-title{ color:#fff !important; border-bottom-color:rgba(255,255,255,.1) !important; }
body.b-activate-redesign .mega-dropdown-link{ color:#a7a3c4 !important; }
body.b-activate-redesign .mega-dropdown-link:hover{ color:#fff !important; }
/* buttons -> dbc gradient / outline */
body.b-activate-redesign .btn-primary-custom{ background:var(--bar-grad) !important; border:0 !important; color:#fff !important; }
body.b-activate-redesign .btn-primary-custom:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(124,92,255,.7) !important; filter:saturate(1.06); }
body.b-activate-redesign .btn-signin{ border:1px solid rgba(255,255,255,.24) !important; color:#fff !important; background:transparent !important; }
body.b-activate-redesign .btn-signin:hover{ background:var(--bar-grad) !important; border-color:transparent !important; color:#fff !important; }
body.b-activate-redesign .navbar-toggler, body.b-activate-redesign .navbar-toggler.bg-gradient-primary{ background:var(--bar-grad) !important; border:0; }
/* footer accents on dbc */
body.b-activate-redesign .footer .social-icon{ background:rgba(124,92,255,.2) !important; }
body.b-activate-redesign .footer .btn-primary-custom{ background:var(--bar-grad) !important; }

/* ---------- Space Grotesk display headings (dbc typography) ---------- */
body.b-activate-redesign h1, body.b-activate-redesign h2, body.b-activate-redesign h3,
body.b-activate-redesign .bar-hero h1, body.b-activate-redesign .bar-head h2, body.b-activate-redesign .bar-app h2,
body.b-activate-redesign .bar-step-body h3, body.b-activate-redesign .bar-cta h2,
body.b-activate-redesign .bar-hero-stats b, body.b-activate-redesign .bar-stat b, body.b-activate-redesign .bar-step-num{
  font-family:"Space Grotesk","Inter",sans-serif !important; letter-spacing:-.02em;
}
/* eyebrow + CTA to dbc hues */
body.b-activate-redesign .bar-eyebrow{ color:#c8b8ff; background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.32); }
body.b-activate-redesign .bar-cta{ background:var(--bar-grad) !important; }

/* ============================================================================
   ACTIVATION STEPS — modern timeline (gradient spine + glowing nodes)
   ============================================================================ */
body.b-activate-redesign .bar-timeline{ position:relative; max-width:1160px; margin:0 auto; padding:.5rem 0; }
body.b-activate-redesign .bar-timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background:linear-gradient(180deg, transparent, #6366f1 8%, #a855f7 50%, #e647c9 92%, transparent); border-radius:3px; box-shadow:0 0 24px rgba(124,92,255,.5); }
body.b-activate-redesign .bar-tl-item{ position:relative; display:grid; grid-template-columns:1fr 72px 1fr; align-items:center; margin-bottom:1.6rem; }
body.b-activate-redesign .bar-tl-node{ grid-column:2; justify-self:center; z-index:2; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:1.25rem; color:#fff; background:var(--bar-grad); box-shadow:0 0 0 6px rgba(11,10,26,.92), 0 0 30px rgba(124,92,255,.6); animation:bar-node 3.2s ease-in-out infinite; }
@keyframes bar-node{ 0%,100%{ box-shadow:0 0 0 6px rgba(11,10,26,.92), 0 0 26px rgba(124,92,255,.55); } 50%{ box-shadow:0 0 0 6px rgba(11,10,26,.92), 0 0 46px rgba(230,71,201,.7); } }
body.b-activate-redesign .bar-tl-card{ grid-column:1; background:var(--bar-card); border:1px solid var(--bar-line); border-radius:var(--bar-radius-lg); overflow:hidden; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--bar-shadow); display:flex; transition:transform .4s var(--bar-ease), box-shadow .4s, border-color .4s; }
body.b-activate-redesign .bar-tl-item:nth-child(even) .bar-tl-card{ grid-column:3; }
body.b-activate-redesign .bar-tl-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--bar-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; pointer-events:none; }
body.b-activate-redesign .bar-tl-card{ position:relative; }
body.b-activate-redesign .bar-tl-card:hover{ transform:translateY(-6px); box-shadow:var(--bar-glow); }
body.b-activate-redesign .bar-tl-card:hover::before{ opacity:1; }
body.b-activate-redesign .bar-tl-media{ flex:0 0 50%; overflow:hidden; background:linear-gradient(160deg,#1b1940,#0e0d20); display:flex; align-items:center; justify-content:center; padding:12px; }
body.b-activate-redesign .bar-tl-media img{ max-width:100%; max-height:330px; width:auto; height:auto; object-fit:contain; display:block; border-radius:14px; box-shadow:0 16px 34px -14px rgba(0,0,0,.6); transition:transform .55s var(--bar-ease); }
body.b-activate-redesign .bar-tl-card:hover .bar-tl-media img{ transform:scale(1.07); }
body.b-activate-redesign .bar-tl-body{ padding:1.2rem 1.35rem; flex:1; }
body.b-activate-redesign .bar-tl-tag{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#c8b8ff; }
body.b-activate-redesign .bar-tl-body h3{ font-size:1.18rem; color:#fff; margin:.3rem 0 .5rem; }
body.b-activate-redesign .bar-tl-body p{ color:#c3c9d8; font-size:.92rem; margin:0 0 .5rem; }
body.b-activate-redesign .bar-tl-final .bar-tl-node{ background:linear-gradient(135deg,#10b981,#22d3ee); box-shadow:0 0 0 6px rgba(11,10,26,.92), 0 0 34px rgba(16,185,129,.65); }
@media (max-width:820px){
  body.b-activate-redesign .bar-timeline::before{ left:26px; }
  body.b-activate-redesign .bar-tl-item{ grid-template-columns:52px 1fr; margin-bottom:1.3rem; }
  body.b-activate-redesign .bar-tl-node{ grid-column:1; width:48px; height:48px; font-size:1.05rem; }
  body.b-activate-redesign .bar-tl-card,
  body.b-activate-redesign .bar-tl-item:nth-child(even) .bar-tl-card{ grid-column:2; }
}
@media (max-width:520px){ body.b-activate-redesign .bar-tl-card{ flex-direction:column; } body.b-activate-redesign .bar-tl-media{ flex:none; aspect-ratio:16/9; } }

/* ============================================================================
   NEWSLETTER — premium gradient card with animated shine
   ============================================================================ */
body.b-activate-redesign .bar-eyebrow-light{ color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); }
body.b-activate-redesign .bar-news{ position:relative; overflow:hidden; text-align:center; border-radius:var(--bar-radius-lg); padding:clamp(2.8rem,5vw,4rem) 1.5rem;
  background:linear-gradient(180deg, rgba(20,22,45,.94), rgba(11,11,24,.96)); border:1px solid rgba(34,211,238,.3);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.75), inset 0 0 70px rgba(34,211,238,.06); }
body.b-activate-redesign .bar-news-glow{ position:absolute; top:-45%; left:50%; transform:translateX(-50%); width:75%; height:130%; z-index:0;
  background:radial-gradient(closest-side, rgba(34,211,238,.24), transparent 70%); filter:blur(24px); }
body.b-activate-redesign .bar-news > *{ position:relative; z-index:1; }
body.b-activate-redesign .bar-news-icon{ width:72px; height:72px; margin:0 auto 1rem; border-radius:20px; display:grid; place-items:center; font-size:1.9rem; color:#04121a;
  background:linear-gradient(135deg,#22d3ee,#38bdf8); box-shadow:0 18px 40px -12px rgba(34,211,238,.65); }
body.b-activate-redesign .bar-eyebrow-cyan{ color:#7ee7f5; background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.34); }
body.b-activate-redesign .bar-news h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.7rem); margin:.9rem 0 .6rem; }
body.b-activate-redesign .bar-news-accent{ background:linear-gradient(120deg,#22d3ee,#818cf8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.b-activate-redesign .bar-news p{ color:var(--bar-muted); max-width:52ch; margin:0 auto 1.6rem; }
body.b-activate-redesign .bar-news-form{ display:flex; gap:.4rem; max-width:520px; margin:0 auto; background:rgba(255,255,255,.05); border:1px solid rgba(34,211,238,.32); border-radius:999px; padding:6px; }
body.b-activate-redesign .bar-news-form input{ flex:1; border:0; background:transparent; color:#fff; padding:.78rem 1.15rem; outline:none; font-size:1rem; min-width:0; }
body.b-activate-redesign .bar-news-form input::placeholder{ color:#8b93a7; }
body.b-activate-redesign .bar-news-form button{ display:inline-flex; align-items:center; gap:.5rem; border:0; background:linear-gradient(135deg,#22d3ee,#3b82f6); color:#04121a; font-weight:700; border-radius:999px; padding:.78rem 1.6rem; cursor:pointer; transition:transform .2s var(--bar-ease), box-shadow .2s; white-space:nowrap; }
body.b-activate-redesign .bar-news-form button:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(34,211,238,.6); }
body.b-activate-redesign .bar-news-trust{ color:var(--bar-muted); font-size:.82rem; margin-top:1.1rem; }
@media (max-width:520px){ body.b-activate-redesign .bar-news-form{ flex-direction:column; border-radius:16px; } body.b-activate-redesign .bar-news-form button{ justify-content:center; } }

/* ============================================================================
   PAGE-WIDE MOTION polish — buttons shimmer, hero glow drift, store hover
   ============================================================================ */
body.b-activate-redesign .btn-primary-custom, body.b-activate-redesign .bar-cta .btn-cta{ position:relative; overflow:hidden; }
body.b-activate-redesign .btn-primary-custom::after, body.b-activate-redesign .bar-cta .btn-cta::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); transition:left .6s var(--bar-ease); }
body.b-activate-redesign .btn-primary-custom:hover::after, body.b-activate-redesign .bar-cta .btn-cta:hover::after{ left:130%; }
body.b-activate-redesign .bar-hero-visual .bar-glow{ animation:bar-glowdrift 8s ease-in-out infinite; }
@keyframes bar-glowdrift{ 0%,100%{ opacity:.28; transform:translateY(0); } 50%{ opacity:.42; transform:translateY(-10px); } }
body.b-activate-redesign .bar-app-card{ transition:transform .4s var(--bar-ease), box-shadow .4s; }
body.b-activate-redesign .bar-app-card:hover{ transform:translateY(-6px); box-shadow:var(--bar-glow); }
/* ============================================================================
   SCROLL REVEAL — replaces AOS. Elements are hidden ONLY while <html> has the
   `js-reveal` class (added by JS, auto-removed after 3.5s as a safety net) so the
   page is never permanently blank. The observer adds `.rd-in` to fade each in.
   ============================================================================ */
html.js-reveal body.b-activate-redesign [data-aos]{
  opacity:0; transform:translateY(30px); will-change:opacity, transform;
  transition:opacity .7s var(--bar-ease), transform .7s var(--bar-ease);
}
html.js-reveal body.b-activate-redesign [data-aos="fade-left"]{ transform:translateX(48px); }
html.js-reveal body.b-activate-redesign [data-aos="fade-right"]{ transform:translateX(-48px); }
html.js-reveal body.b-activate-redesign [data-aos="zoom-in"]{ transform:scale(.92); }
html.js-reveal body.b-activate-redesign [data-aos].rd-in{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  html.js-reveal body.b-activate-redesign [data-aos]{ opacity:1 !important; transform:none !important; transition:none !important; }
}