.tiers-grid-wrapper{
  position:relative;
}
.tiers-grid--blur{
  position:relative;
  filter:blur(4px);
  opacity:.3;
  pointer-events:none;
}
.tiers-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  z-index:3;
}
.tiers-overlay__title{
  font-size:clamp(28px,5vw,48px);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  text-shadow:0 6px 30px rgba(0,0,0,.45);
  margin:0 0 12px 0;
}
.tiers-overlay__subtitle{
  max-width:460px;
  color:rgba(255,255,255,.65);
  font-size:16px;
  line-height:1.5;
}
:root{
  --sticky-cta-height:64px;
}

body.has-sticky-cta{
  padding-top:var(--sticky-cta-height);
}

.has-preloader{
  overflow:hidden;
  padding-top:0 !important;
}
.has-preloader .sticky-cta{
  opacity:0;
  pointer-events:none;
}

.preloader-hidden{
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}

#page-preloader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:rgba(5,7,15,.82);
  z-index:20000;
  transition:opacity .4s ease;
  backdrop-filter:blur(22px);
}
.preloader-ring{
  width:78px;
  height:78px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.12);
  border-top-color:#837CFF;
  animation:preloaderSpin 1.1s linear infinite;
}
.preloader-text{
  font-family:"Manrope",system-ui;
  font-size:16px;
  color:#fff;
  line-height:1.5;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:18px 0 12px;
  text-align:center;
  padding:0 24px;
}
.preloader-eta{
  font-family:"Manrope",system-ui;
  font-size:14px;
  color:rgba(255,255,255,.75);
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-bottom:18px;
  text-align:center;
  padding:0 24px;
}
.preloader-bar-outer{
  position:relative;
  width:220px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.preloader-bar{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
}
.preloader-bar__fill{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#FF3B3B,#FF6565,#FF3B3B);
  transform-origin:left center;
  transform:scaleX(.05);
  transition:transform .45s ease;
}
@keyframes preloaderSpin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
.preloader-hidden .preloader-bar__fill{
  transform:scaleX(1);
}

.sticky-cta{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:13000;
  background:rgba(7,9,18,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(108,99,255,.25);
}
.sticky-cta__wrap{
  max-width:1120px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.sticky-cta__label{
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-align:center;
}
.sticky-cta__label strong{
  margin-left:6px;
  font-size:13px;
  color:#ff4444;
  text-shadow:0 0 8px rgba(255,68,68,.8),0 0 16px rgba(255,68,68,.6),0 0 24px rgba(255,68,68,.4);
  animation:countdownPulse 2s ease-in-out infinite;
}
.sticky-cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:6px 16px;
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(255,255,255,.16) 60%),
    linear-gradient(90deg,#FF3B3B,#FF6565,#FF3B3B);
  background-size:200% 100%,100% 100%;
  box-shadow:0 10px 20px rgba(255,59,59,.35);
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.sticky-cta__button:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}
.sticky-cta__button:focus-visible{
  outline:3px solid rgba(255,255,255,.8);
  outline-offset:4px;
}

@media (max-width:720px){
  :root{--sticky-cta-height:84px;}
  .sticky-cta__wrap{
    flex-direction:column;
    align-items:center;
    padding:14px 16px;
    gap:10px;
  }
  .sticky-cta__label{
    font-size:12px;
    line-height:1.4;
  }
  .sticky-cta__button{
    width:auto;
    min-width:140px;
    justify-content:center;
  }
}

:root{
  --bg:#05060d; --card:#F7F3ED; --accent:#6C63FF; --white:#FFF;
  --muted:rgba(247,243,237,.72); --line:rgba(247,243,237,.18);
  --s-2:12px; --s-3:16px; --s-4:20px; --s-5:14px; --s-6:32px; --s-8:56px; --s-9:72px;
  --radius:20px; --radius-lg:28px; --shadow:0 10px 30px rgba(0,0,0,.32);
  --maxw:1120px; --gold:#FFC857; --goldDark:#C9A53A;
  --ctaW:260px; --ctaGap:12px;
}

/* Base */
*{box-sizing:border-box}
body {
  margin: 0;
  font-family: "Manrope","Manrope Placeholder",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--card);
  line-height: 1.6;
}
/* === REUSABLE PURPLE GLOW LINE (VISIBLE ABOVE BACKGROUNDS) === */
.purple-line {
  position: relative;
  display: block;
  height: 1px;
  margin: 0px auto;
  border-radius: 2px;
  width: 280px; /* default medium */
  background: linear-gradient(
    90deg,
    rgba(108,99,255,0)   0%,
    rgba(138,123,255,1)  18%,
    #6C63FF              50%,
    rgba(138,123,255,1)  82%,
    rgba(108,99,255,0)   100%
  );
  box-shadow:
    0 0 10px rgba(138,123,255,.6),
    0 0 22px rgba(108,99,255,.4);
  opacity: 0.95;
  pointer-events: none;
  z-index: 9999; /* 🔹 ensures visibility above any background layers */
}

/* --- Size variants --- */
.purple-line.small {
  width: 10%;
  margin: 0px auto;
}

.purple-line.medium {
  width: 40%;
  margin: 0px auto;
}

.purple-line.large {
  width: 60%;
  margin: 0px auto;
}
/* === GOLD / YELLOW GLOW LINE === */
.gold-line {
  position: relative;
  display: block;
  height: 1px;
  margin: 0 auto;
  border-radius: 2px;
  width: 40%; /* default medium */
  background: linear-gradient(
    90deg,
    rgba(255,215,99,0)   0%,
    rgba(255,215,99,1)  18%,
    #FFD86B             50%,
    rgba(255,215,99,1)  82%,
    rgba(255,215,99,0)   100%
  );
  box-shadow:
    0 0 10px rgba(255,216,107,.6),
    0 0 22px rgba(255,215,99,.4);
  opacity: 0.95;
  pointer-events: none;
  z-index: 9999; /* visible above all backgrounds */
}

/* --- Size variants --- */
.gold-line.small {
  width: 10%;
  margin: 0 auto;
}

.gold-line.medium {
  width: 40%;
  margin: 0 auto;
}

.gold-line.large {
  width: 60%;
  margin: 0 auto;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s-6)}
.muted{color:var(--muted)}
h1,h2,h3{margin:0 0 var(--s-4);text-align:center;position:relative}
h1{font-size:clamp(23px,3.4vw,40px);font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(32px,4.5vw,48px);font-weight:700;letter-spacing:-.01em}
h3{font-size:clamp(20px,3vw,26px);font-weight:600}
.section{padding:var(--s-9) 0;border-top:1px;}
.section:first-of-type{border-top:none}

/* Headline underline/spacing */
.h1-deco{display:flex;flex-direction:column;align-items:center;max-width:80%;margin:0 auto}
.h1-deco .hl{position:relative;display:inline-block;padding:0 var(--s-3);line-height:1.05}
.h2-deco .hl2{position:relative;display:inline-block;padding:0 var(--s-3)}
.hero-sub-text{font-size:clamp(15px,2.2vw,23px);color:var(--accent);font-weight:600;margin-top:clamp(12px,2vw,20px);line-height:1.2;text-align:center}
.hero-sub-sub-text{font-size:clamp(12px,1.7vw,17px);color:#fff;font-weight:400;margin-top:clamp(8px,1.5vw,16px);margin-bottom:clamp(12px,2vw,24px);line-height:1.2;opacity:.9;text-align:center}

/* Emphasis variants */
.em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--card);-webkit-text-stroke:.6px var(--card)}
.em-purple{font-weight:700;color:var(--accent)}
.em-serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:700;color:#fff}
.white-strong{font-weight:700;color:#fff}
.highlight{font-weight:700;color:var(--accent)}
.golden-word{font-family:"Instrument Serif",serif;font-style:italic;font-weight:700;color:var(--gold);text-shadow:0 0 6px rgba(255,200,87,.8),0 0 14px rgba(255,200,87,.6);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#discountCountdown{color:#FF3B3B;text-shadow:0 0 6px rgba(255,59,59,.9),0 0 14px rgba(255,59,59,.7),0 0 22px rgba(255,59,59,.6);font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* HERO */
.hero{position:relative;overflow:hidden;text-align:center;padding:var(--s-8) 0 var(--s-6);margin-top:-30px}
.hero::before{content:"";position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(600px 200px at 50% -20%,rgba(108,99,255,.18),transparent 70%);filter:blur(8px);animation:heroGlow 8s ease-in-out infinite alternate}
@keyframes heroGlow{from{transform:translateY(0);opacity:.6}to{transform:translateY(12px);opacity:.85}}
.video-shell{position:relative;max-width:880px;margin:0 auto var(--s-5);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.hero video{width:100%;height:auto;display:block;background:#000}

/* Aurora behind video (use svg.video-aurora element) */
.video-aurora{position:absolute;inset:-14% -8%;pointer-events:none;z-index:0;mix-blend-mode:screen}
@media (max-width:720px){.video-aurora{inset:-12% -6%;opacity:.9}}
.video-shell video{position:relative;z-index:1;border-radius:inherit}
@keyframes unmutePop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes unmuteRedPulse{0%,100%{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);box-shadow:0 24px 48px rgba(5,6,13,.46),0 0 0 1px rgba(255,255,255,.2) inset}50%{border-color:#FF3B3B;background:rgba(255,59,59,.25);box-shadow:0 24px 48px rgba(255,59,59,.4),0 0 0 1px rgba(255,59,59,.3) inset,0 0 20px rgba(255,59,59,.6)}}
@keyframes unmuteRedPulseMobile{0%,100%{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);box-shadow:0 16px 32px rgba(5,6,13,.46),0 0 0 1px rgba(255,255,255,.2) inset}50%{border-color:#FF3B3B;background:rgba(255,59,59,.25);box-shadow:0 16px 32px rgba(255,59,59,.4),0 0 0 1px rgba(255,59,59,.3) inset,0 0 16px rgba(255,59,59,.6)}}
@keyframes unmuteIconRedPulse{0%,100%{stroke:#fff;filter:drop-shadow(0 0 0 rgba(255,59,59,0))}50%{stroke:#FF3B3B;filter:drop-shadow(0 0 8px rgba(255,59,59,.8))}}
@keyframes unmuteIconRedPulseMobile{0%,100%{stroke:#fff;filter:drop-shadow(0 0 0 rgba(255,59,59,0))}50%{stroke:#FF3B3B;filter:drop-shadow(0 0 6px rgba(255,59,59,.8))}}
.video-unmute{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,6vw,32px);background:rgba(5,6,13,.3);color:#fff;font-weight:700;font-size:clamp(18px,5vw,34px);text-transform:uppercase;letter-spacing:.06em;text-align:center;border:none;cursor:pointer;z-index:2;transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(2px);padding:clamp(12px,4vw,28px)}
.video-unmute:hover{transform:scale(1.02)}
.video-unmute:focus-visible{outline:3px solid rgba(108,99,255,.85);outline-offset:6px}
.video-unmute-icon{display:flex;align-items:center;justify-content:center;width:clamp(120px,28vw,216px);height:clamp(120px,28vw,216px);border-radius:50%;border:3px solid rgba(255,255,255,.75);background:rgba(255,255,255,.12);box-shadow:0 24px 48px rgba(5,6,13,.46),0 0 0 1px rgba(255,255,255,.2) inset;animation:unmutePop 1.2s ease-in-out infinite,unmuteRedPulse 2s ease-in-out infinite}
.video-unmute-icon svg{width:clamp(52px,13vw,96px);height:clamp(52px,13vw,96px);stroke:#fff;stroke-width:2.5;animation:unmuteIconRedPulse 2s ease-in-out infinite}
.video-unmute-text{font-size:clamp(20px,5.2vw,40px);line-height:1.3;text-transform:none;letter-spacing:.01em;max-width:min(90%,520px);text-shadow:0 6px 18px rgba(5,6,13,.6)}
.video-unmute.is-hidden{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .video-unmute-icon,.video-unmute-icon svg{animation:none}
}
@media (max-width:640px){
  .video-unmute{gap:10px;font-size:14px;padding:clamp(10px,5vw,16px)}
  .video-unmute-icon{width:clamp(60px,18vw,95px);height:clamp(60px,18vw,95px);border-width:2px;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);box-shadow:0 16px 32px rgba(5,6,13,.46),0 0 0 1px rgba(255,255,255,.2) inset;animation:unmutePop 1.2s ease-in-out infinite,unmuteRedPulseMobile 2s ease-in-out infinite}
  .video-unmute-icon svg{width:clamp(28px,8vw,40px);height:clamp(28px,8vw,40px);stroke:#fff;animation:unmuteIconRedPulseMobile 2s ease-in-out infinite}
}
@media (max-width:400px){
  .video-unmute{gap:8px;padding:clamp(8px,6vw,12px)}
  .video-unmute-icon{width:clamp(52px,24vw,80px);height:clamp(52px,24vw,80px);border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);animation:unmutePop 1.2s ease-in-out infinite,unmuteRedPulseMobile 2s ease-in-out infinite}
  .video-unmute-icon svg{animation:unmuteIconRedPulseMobile 2s ease-in-out infinite}
}

.benefits-cta{display:flex;justify-content:center;margin:28px auto 0}
.btn-benefits-video{min-width:220px;padding:0 32px}
.btn-benefits-video{display:inline-flex;align-items:center;justify-content:center;padding:0 32px;min-width:240px;text-align:center}

.video-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,6,13,.82);backdrop-filter:blur(6px);z-index:12000;transition:opacity .2s ease}
.video-modal.is-open{display:flex;animation:videoModalFade .25s ease}
.video-modal-body{position:relative;max-width:min(90vw,960px);width:100%;padding:16px;z-index:0}
.video-modal-body::before{content:"";position:absolute;inset:-10%;border-radius:40px;background:radial-gradient(circle at 50% 50%,rgba(255,214,122,.26) 0%,rgba(255,200,87,.16) 38%,rgba(255,200,87,.08) 64%,rgba(255,200,87,.02) 84%,rgba(255,200,87,0) 100%);filter:blur(42px);z-index:-1;pointer-events:none}
.video-modal-player{position:relative;z-index:1;width:100%;height:auto;border-radius:18px;border:1px solid rgba(255,210,120,.2);box-shadow:0 24px 48px rgba(0,0,0,.45),0 0 70px rgba(255,200,87,.21),0 0 160px rgba(255,200,87,.11)}
.video-modal-backdrop{position:absolute;inset:0}
@keyframes videoModalFade{from{opacity:0}to{opacity:1}}
@media (max-width:600px){
  .video-modal-body{padding:12px}
  .video-modal-body::before{inset:-12%;border-radius:26px;filter:blur(32px)}
  .video-modal-player{border-radius:12px}
}

/* Hero Chips + CTAs */
.hero-bar{display:grid;gap:var(--s-3);justify-items:center;margin:var(--s-4) 0}
.hero-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;font-weight:600;font-size:14px;color:#fff;background:rgba(108,99,255,.14);border:1px solid rgba(108,99,255,.35)}
.hero-chip.ghost{background:transparent;color:var(--card);border-color:var(--line)}
.hero-chip.danger{background:rgba(108,99,255,.20);box-shadow:inset 0 6px 18px rgba(108,99,255,.25)}
.hero-ctas{display:flex;gap:0;flex-wrap:wrap;justify-content:center;margin-top:6px;flex-direction:column;align-items:center}
.hero-ctas .hero-super{margin:0}
.hero-ctas .hero-super:first-child{margin-top:12px}
.hero-ctas .hero-super:not(:last-child){margin-bottom:8px}
.btn-hero{display:flex;align-items:center;justify-content:center;height:52px;min-width:var(--ctaW);flex:0 0 var(--ctaW);padding:0 22px;border-radius:999px;font-weight:700;color:#fff;text-decoration:none;background:
linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(255,255,255,.18) 60%),
linear-gradient(90deg,#6C63FF,#7d75ff,#6C63FF);background-size:200% 100%,100% 100%;box-shadow:0 10px 22px rgba(108,99,255,.35);transition:transform .15s ease,filter .15s ease}
.btn-hero:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-hero.gold{color:#05060d;background:
linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,0) 40%,rgba(255,255,255,.26) 60%),
linear-gradient(90deg,#FFC857,#FFE08A,#FFC857);box-shadow:0 12px 26px rgba(255,200,87,.32),0 0 0 1px rgba(255,255,255,.10) inset}
.glow{animation:heroShine 3.2s linear infinite,heroBreathe 2.8s ease-in-out infinite}
@keyframes heroShine{0%{background-position:200% 0,0 0}100%{background-position:-200% 0,0 0}}
@keyframes heroBreathe{0%,100%{box-shadow:0 10px 22px rgba(108,99,255,.35)}50%{box-shadow:0 14px 28px rgba(108,99,255,.48)}}
.hero-reason{text-align:center;max-width:760px;margin:12px auto 0;font-size:15px;line-height:1.6;color:var(--muted)}
.hero-reason .highlight{font-weight:700;color:var(--accent)}

/* Super tracker */
.hero-super{display:flex;justify-content:center;margin:20px}
.super-chip{display:inline-flex;align-items:center;justify-content:center;gap:18px;width:calc(var(--ctaW)*2 + var(--ctaGap));min-height:56px;padding:10px 18px;border-radius:999px;background:rgba(247,243,237,.04);border:1px solid var(--line);box-shadow:inset 0 6px 16px rgba(0,0,0,.28);color:var(--card);text-decoration:none}
.super-item{text-transform:uppercase;font-weight:800;letter-spacing:.6px;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.super-item strong{font-weight:800;color:#fff}
.super-divider{width:1px;height:22px;background:var(--line);border-radius:2px}
.super-chip:hover{box-shadow:inset 0 8px 18px rgba(0,0,0,.32);filter:brightness(1.04)}
@media (max-width:560px){.super-chip{width:100%;flex-wrap:wrap;row-gap:8px}.super-divider{display:none}}

/* Ticker */
.ticker{overflow:hidden;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s-4);background:rgba(247,243,237,.04);display:flex;align-items:center}
.ticker-track{display:inline-flex;align-items:center;gap:24px;padding:10px 0;white-space:nowrap;animation:tickerMove 22s linear infinite}
@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.tick{display:inline-flex;align-items:center;color:var(--muted);font-weight:600;letter-spacing:.3px}
.tick-sep{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px}
.tick-sep svg{width:16px;height:16px;stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 2px rgba(108,99,255,.35))}
@media (max-width:540px){
  .ticker-track{
    gap:18px;
    animation-duration:45s;
  }
}

/* ABOUT – distorted purple glow */
.section.about{position:relative}
.section.about .wrap{position:relative;z-index:1}
.about-glow{position:absolute;left:50%;transform:translateX(-50%);width:min(1200px,95%);height:300px;top:0;opacity:.95;pointer-events:none;z-index:0}
@media (max-width:600px){.about-glow{width:96%;height:190px;top:6px}}
/* UPDATE CSS: center badge at the very top, outside the card box */
.card{ position: relative; }

.card-flag{
  position: absolute;
  left: 50%;
  top: -16px;                 /* sits outside the card */
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;       /* badge doesn't block clicks on card */
}

/* reuse your existing .card-badge + variant styles */
.card-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:9999px; font-weight:800; letter-spacing:.6px;
  font-size:12px; line-height:1; text-transform:uppercase; width:max-content;
}

/* examples (keep your previous colors) */
.badge-popular{ background: linear-gradient(90deg, var(--gold), #FDE9A6); color:#05060d; border:1px solid rgba(255,200,87,.45); }
.badge-lifetime{ background: rgba(154,108,255,.18); color:#fff; border:1px solid rgba(154,108,255,.45); }
.badge-inperson{ background: rgba(108,99,255,.22); color:#fff; border:1px solid rgba(108,99,255,.45); }

@media (max-width:560px){
  .card-flag{ top:-14px; }
  .card-badge{ font-size:11px; padding:5px 10px; }
}

/* SERVICES */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-5)}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);background:rgba(247,243,237,.06);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
/* UPDATE: Service image — ~10% blur, height halved again (4:1), make noise clearly visible */
.service-img{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;

  /* height = 25% of width (previous was 2:1 → now 4:1) */
  aspect-ratio: 4 / 1;

  background: none;
}

.service-img img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  /* very subtle blur ≈ "10%" of previous look */
  filter: blur(1px);
  transform: scale(1.02); /* tiny scale to hide edge bleed after blur */
  z-index: 0;
}

/* Visible noise overlay */
.service-img::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  /* make noise clearly visible across browsers */
  mix-blend-mode: soft-light;
  opacity: .22;
  background-repeat: repeat;
  background-size: 120px 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/></filter><rect width='64' height='64' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* keep title above noise + image */
.service-title{
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92%;
}


.service-title{color:#fff;font-size:1.2rem;font-weight:700;text-align:center;margin:0;padding:0 8px}
.card-headline{display:grid;gap:10px;margin-top:var(--s-4)}
.price-big{display:grid;place-items:center}
.price-big .old{color:var(--muted);text-decoration:line-through;font-weight:500;margin-bottom:2px}
.price-big .new{font-weight:800;font-size:clamp(58px,5vw,36px);line-height:1;color:var(--card);text-shadow:0 0 4px rgba(255,255,255,.6),0 0 10px rgba(255,255,255,.4);animation:priceGlow 6s ease-in-out infinite}
@keyframes priceGlow{0%,100%{text-shadow:0 0 4px rgba(255,255,255,.6),0 0 10px rgba(255,255,255,.4);transform:scale(1)}50%{text-shadow:0 0 6px rgba(255,255,255,.7),0 0 14px rgba(255,255,255,.5);transform:scale(1.02)}}
/* UPDATE: Full features styling — pill boxes with purple sparkle and smooth hover pop */
.features{
  margin: var(--s-4) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px; /* space between items */
}

.features li{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;                 /* tight padding */   /* match site border color */
border-radius: 15px;         /* full roundness (pill) */
  background: rgba(247,243,237,.04); /* subtle fill */
  color: var(--card);
  line-height: 1.4;
  

  /* smooth pop on hover */
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

/* Sparkle icon (no line) before each feature */
.features li::before{
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  background-color: var(--accent); /* site purple */

  /* single-line SVG mask: rounded 8-point sparkle */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M12 2.2c.5 0 .9.4 1 1l.9 5.1 5.1.9c.6.1 1 .5 1 1s-.4.9-1 1l-5.1.9-.9 5.1c-.1.6-.5 1-1 1s-.9-.4-1-1l-.9-5.1-5.1-.9c-.6-.1-1-.5-1-1s.4-.9 1-1l5.1-.9.9-5.1c.1-.6.5-1 1-1Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M12 2.2c.5 0 .9.4 1 1l.9 5.1 5.1.9c.6.1 1 .5 1 1s-.4.9-1 1l-5.1.9-.9 5.1c-.1.6-.5 1-1 1s-.9-.4-1-1l-.9-5.1-5.1-.9c-.6-.1-1-.5-1-1s.4-.9 1-1l5.1-.9.9-5.1c.1-.6.5-1 1-1Z'/></svg>");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;

  transform: translateY(0.5px) scale(1);
  transition: transform .18s ease;
}

/* Hover/active interactions */
.features li:hover{
  cursor: pointer; /* hand cursor on hover */
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.04) inset;
  background-color: rgba(247,243,237,.06);
  border-color: rgba(247,243,237,.26);
}
.features li:hover::before{
  transform: translateY(0.5px) scale(1.18) rotate(10deg);
}
.features li:active{
  transform: translateY(0) scale(0.995);
}

/* Keyboard focus (accessibility) */
.features li:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(108,99,255,.45);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .features li,
  .features li::before{
    transition: none !important;
  }
  .features li:hover{
    transform: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
  }
}

/* Safety: ensure no default list markers show */
.features li::marker{ content: none; }
/* UPDATE: Centered badge wrapper with bottom margin */
.badge-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: var(--s-4); /* add space below the badge */
}

/* (keep) Badge pill styles */
.card-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: .6px;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  width: max-content;
}

/* (keep) Variants */
.badge-popular{
  background: linear-gradient(90deg, var(--gold), #FDE9A6);
  color: #05060d;
  box-shadow: 0 6px 16px rgba(255,200,87,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
  border: 1px solid rgba(255,200,87,.45);
}
.badge-lifetime{
  background: rgba(154,108,255,.18);
  color: #fff;
  border: 1px solid rgba(154,108,255,.45);
  box-shadow: 0 6px 16px rgba(154,108,255,.18) inset;
}
.badge-inperson{
  background: rgba(108,99,255,.22);
  color: #fff;
  border: 1px solid rgba(108,99,255,.45);
  box-shadow: 0 6px 16px rgba(108,99,255,.18) inset;
}

.btn-wide{width:100%;border:0;cursor:pointer;padding:14px 18px;border-radius:999px;font-weight:700;font-size:1.1em;color:#fff;background:
linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(255,255,255,.18) 60%),
linear-gradient(90deg,#6C63FF,#7d75ff,#6C63FF);background-size:200% 100%,100% 100%;box-shadow:0 10px 22px rgba(108,99,255,.35),0 0 0 1px rgba(255,255,255,.06) inset;transition:transform .15s ease,filter .15s ease}
.btn-wide:hover{transform:translateY(-1px);filter:brightness(1.04)}
.glow{position:relative;animation:shine 3.2s linear infinite,breathe 2.8s ease-in-out infinite}
@keyframes shine{0%{background-position:200% 0,0 0}100%{background-position:-200% 0,0 0}}
@keyframes breathe{0%,100%{box-shadow:0 10px 22px rgba(108,99,255,.35),0 0 0 1px rgba(255,255,255,.06) inset}50%{box-shadow:0 14px 28px rgba(108,99,255,.48),0 0 0 1px rgba(255,255,255,.08) inset}}

/* Section glows */
.glow-bg{position:relative;background:#05060d;overflow:hidden}
.glow-bg::before{content:"";position:absolute;top:20%;left:50%;transform:translateX(-50%);width:80%;height:60%;background:radial-gradient(circle at center,rgba(108,99,255,.35) 0%,rgba(108,99,255,.15) 40%,rgba(11,15,25,1) 85%);filter:blur(60px);z-index:0}
.glow-bg .wrap{position:relative;z-index:1}
#visa.glow-bg::before{background:radial-gradient(circle at center,rgba(255,200,87,.35) 0%,rgba(255,200,87,.15) 40%,rgba(11,15,25,1) 85%)}

/* Golden Visa Roadmap & Benefits */
.roadmap{margin-top:-80px;}
.roadmap-svg{width:100%;display:block}

/* Mobile roadmap - hide desktop, show mobile */
@media (max-width: 720px) {
  .desktop-roadmap {
    display: none !important; /* hide desktop roadmap */
  }
  
  .mobile-roadmap {
    display: block !important; /* show mobile roadmap */
  }
}

@media (min-width: 721px) {
  .mobile-roadmap {
    display: none !important; /* hide mobile roadmap on desktop */
  }
}

/* Mobile roadmap styles */
.mobile-roadmap {
  display: none;
  margin-top: 20px;
  padding: 20px 0 0 0;
}

.mobile-roadmap-container {
  max-width: 280px;
  margin: 0 auto;
  position: relative;
}

.mobile-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}

.mobile-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 24px;
  top: 48px;
  bottom: -20px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold) 0%, var(--gold) 50%, transparent 50%, transparent 100%);
  background-size: 2px 12px;
  animation: mobileDots 2s linear infinite;
}

@keyframes mobileDots {
  0% { background-position: 0 0; }
  100% { background-position: 0 20px; }
}

.mobile-step-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--goldDark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(255, 200, 87, 0.3);
}

.mobile-step-number {
  color: #05060d;
  font-size: 18px;
  font-weight: 900;
  font-family: 'Poppins', system-ui, sans-serif;
}

.mobile-step-content {
  flex: 1;
  padding-top: 4px;
  text-align: left; /* left align text */
}

.mobile-step-text-container {
  background: rgba(247, 243, 237, 0.04);
  border: 1px solid rgba(247, 243, 237, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  margin-left: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-step-title {
  font-size: 20px;
  font-weight: 800;
  color: #F7F3ED;
  margin: 0 0 4px 0; /* reduced gap from 8px to 4px */
  font-family: 'Poppins', system-ui, sans-serif;
  text-align: left; /* ensure left alignment */
}

.mobile-step-description {
  font-size: 14px;
  color: rgba(247, 243, 237, 0.8);
  margin: 0;
  line-height: 1.4;
  font-family: 'Poppins', system-ui, sans-serif;
  text-align: left; /* ensure left alignment */
}

/* Mobile roadmap animations */
.mobile-step {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease-out;
}

.mobile-step.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.mobile-step-dot {
  transition: all 0.4s ease-out;
}

.mobile-step.animate-in .mobile-step-dot {
  animation: mobileDotPulse 0.6s ease-out;
}

@keyframes mobileDotPulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 4px 12px rgba(255, 200, 87, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 200, 87, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 200, 87, 0.3);
  }
}
.road-path{stroke-dasharray:6 10;animation:dash 8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-160}}
.dot-gold{fill:var(--gold);stroke:var(--goldDark);stroke-width:1}
.dot-num{fill:#05060d;font:700 12px/1 Poppins,system-ui,sans-serif;text-anchor:middle}
.svg-title{fill:#F7F3ED;font:700 16px/1 Poppins,system-ui,sans-serif;text-anchor:middle}
.fo{color:rgba(247,243,237,.92);font:13px/1.5 Poppins,system-ui,sans-serif;padding:12px 16px;background:rgba(247,243,237,.06);border:1px solid var(--line);border-radius:64px;text-align:center;display:flex;align-items:center;justify-content:center}
.float-callout{animation:floatY 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.h2-deco.golden-head .hl2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-12px;width:360px;height:22px;opacity:.95;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='22' viewBox='0 0 360 22'%3E%3Cpath d='M6 14 C 60 4, 140 20, 220 8 S 320 18, 354 10' stroke='%23FFC857' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 18 C 120 6, 260 22, 340 14' stroke='%23FDE9A6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-dasharray='7 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:contain}
.benefits-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-6);margin-top:var(--s-6)}
.benefits-row li{list-style:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3);font-weight:600;color:var(--card);min-width:140px}

/* Mobile benefits - vertical layout with icons on left, text on right */
@media (max-width: 720px) {
  .benefits-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    max-width: 280px;
    margin-left: 0;
    margin-right: auto;
  }
  
  .benefits-row li {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    min-width: auto;
    width: 100%;
    padding: 8px 0;
    position: relative;
    z-index: 1;
  }
  
  .benefits-row li:nth-child(2),
  .benefits-row li:nth-child(3) {
    z-index: 10;
  }
  
  .benefit-icon {
    flex-shrink: 0 !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    background: radial-gradient(120% 90% at 50% 10%, rgba(255, 216, 107, .35), rgba(20, 18, 32, .92) 65%), var(--bg) !important;
    border: 1px solid rgba(255, 216, 107, .45) !important;
    box-shadow: inset 0 10px 22px rgba(255, 216, 107, .25), 0 6px 16px rgba(0, 0, 0, .26) !important;
  }
  
  .benefits-row li span {
    flex: 1;
    font-size: 24px;
    font-weight: 600;
    color: var(--card);
    white-space: nowrap;
  }
  
  .benefit-icon svg {
    width: 32px !important;
    height: 32px !important;
    stroke-width: 2.2 !important;
  }
}

/* Responsive helpers */
@media (max-width:960px){
  .wrap{padding:var(--s-5)}
  .cards{grid-template-columns:1fr}
}
/* UPDATE: Hero bg image cuts EXACTLY above the ticker */
.hero{ position: relative; }
.hero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  /* stop exactly at the top of the ticker (value set by JS below) */
  bottom: var(--tickerH, 0px);
  background: url("header.png") center / cover no-repeat;
  pointer-events:none;
  z-index:0;
}
/* keep content above the bg; ticker sits on top */
.hero > *{ position: relative; z-index:1; }
.hero .ticker{ position: relative; z-index:2; }

/* Ensure the ticker sits on top and is not covered by the bg image */
.ticker{ position: relative; z-index: 2; }

/* UPDATE: Make the "See Golden Visa" button glow GOLD (not purple) */
.btn-hero.gold.glow{
  /* keep the moving shine; swap the breathe glow to gold */
  animation: heroShine 3.2s linear infinite, heroBreatheGold 2.8s ease-in-out infinite;
  box-shadow: 0 12px 26px rgba(255,200,87,.32), 0 0 0 1px rgba(255,255,255,.10) inset;
}

@keyframes heroBreatheGold{
  0%,100%{
    box-shadow: 0 12px 26px rgba(255,200,87,.32), 0 0 0 1px rgba(255,255,255,.10) inset;
  }
  50%{
    box-shadow: 0 16px 32px rgba(255,200,87,.48), 0 0 0 1px rgba(255,255,255,.12) inset;
  }
}

/* TESTIMONIALS */
#testimonials .carousel{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin-top: var(--s-6);
}

/* soft gradient fades on both edges */
#testimonials .carousel::before,
#testimonials .carousel::after{
  content:"";
  position:absolute; top:0; bottom:0; width:80px; pointer-events:none; z-index:2;
}
#testimonials .carousel::before{ left:0;  background:linear-gradient(to right, var(--bg), rgba(11,15,25,0)); }
#testimonials .carousel::after { right:0; background:linear-gradient(to left,  var(--bg), rgba(11,15,25,0)); }

#testimonials .track{
  display:flex; gap: var(--s-4);
  padding: var(--s-4) 0;
  animation: slideX 24s linear infinite;
}

/* pause on hover (desktop) */
#testimonials .carousel:hover .track{ animation-play-state: paused; }

@keyframes slideX{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }  /* ensure you duplicate slides once in HTML/JS */
}

#testimonials .slide{
  min-width: 320px;
  max-width: 360px;
  background: rgba(247,243,237,.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  flex-shrink: 0;
}

#testimonials .slide-head{
  display:flex; align-items:center; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
#testimonials .avatar{
  width:48px; height:48px; border-radius:50%;
  overflow:hidden; border:1px solid var(--line); flex:0 0 48px;
}
#testimonials .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 960px){
  #testimonials .slide{ min-width: 85%; }
}

/* H1 emphasized word glows */
.h1-deco .em{
  color:#fff;
  font-family:"Instrument Serif", serif;
  font-style: italic;
  font-weight: 600;
  text-shadow:
    0 0 6px rgba(255,255,255,.75),
    0 0 16px rgba(255,255,255,.55),
    0 0 28px rgba(255,255,255,.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h1-deco .em-purple{
  color: var(--accent);
  font-weight: 700;
  text-shadow:
    0 0 6px rgba(108,99,255,.7),
    0 0 16px rgba(108,99,255,.5),
    0 0 28px rgba(108,99,255,.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h1-deco .em-serif{
  color:#fff;
  font-family:"Instrument Serif", serif;
  font-style: italic;
  font-weight: 700;
  text-shadow:
    0 0 6px rgba(255,255,255,.8),
    0 0 18px rgba(255,255,255,.55),
    0 0 30px rgba(255,255,255,.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* iOS Safari optimized - no filter on text to prevent rasterization */
@keyframes h1Pulse{
  0%,100%{ 
    text-shadow:
      0 0 6px rgba(255,255,255,.75),
      0 0 16px rgba(255,255,255,.55),
      0 0 28px rgba(255,255,255,.35);
  }
  50%{ 
    text-shadow:
      0 0 8px rgba(255,255,255,.85),
      0 0 20px rgba(255,255,255,.65),
      0 0 32px rgba(255,255,255,.45);
  }
}

@keyframes h1PulsePurple{
  0%,100%{ 
    text-shadow:
      0 0 6px rgba(108,99,255,.7),
      0 0 16px rgba(108,99,255,.5),
      0 0 28px rgba(108,99,255,.35);
  }
  50%{ 
    text-shadow:
      0 0 8px rgba(108,99,255,.8),
      0 0 20px rgba(108,99,255,.6),
      0 0 32px rgba(108,99,255,.45);
  }
}

@keyframes h1PulseSerif{
  0%,100%{ 
    text-shadow:
      0 0 6px rgba(255,255,255,.8),
      0 0 18px rgba(255,255,255,.55),
      0 0 30px rgba(255,255,255,.35);
  }
  50%{ 
    text-shadow:
      0 0 8px rgba(255,255,255,.9),
      0 0 22px rgba(255,255,255,.65),
      0 0 34px rgba(255,255,255,.45);
  }
}

.h1-deco .em{ animation: h1Pulse 8s ease-in-out infinite; }
.h1-deco .em-purple{ animation: h1PulsePurple 8s ease-in-out infinite; }
.h1-deco .em-serif{ animation: h1PulseSerif 8s ease-in-out infinite; }

/* iOS Safari specific optimizations */
@supports (-webkit-touch-callout: none) {
  /* Disable hardware acceleration for text elements to prevent rasterization */
  .h1-deco .em,
  .h1-deco .em-purple,
  .h1-deco .em-serif,
  .h2-deco .hl2,
  .golden-word,
  #discountCountdown,
  #discountCountdownMobile {
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Ensure text remains vector on iOS */
  .h1-deco .em,
  .h1-deco .em-purple,
  .h1-deco .em-serif {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* Optimize text-shadow rendering on iOS */
  .h1-deco .em {
    text-shadow:
      0 0 6px rgba(255,255,255,.75),
      0 0 16px rgba(255,255,255,.55),
      0 0 28px rgba(255,255,255,.35);
  }
  
  .h1-deco .em-purple {
    text-shadow:
      0 0 6px rgba(108,99,255,.7),
      0 0 16px rgba(108,99,255,.5),
      0 0 28px rgba(108,99,255,.35);
  }
  
  .h1-deco .em-serif {
    text-shadow:
      0 0 6px rgba(255,255,255,.8),
      0 0 18px rgba(255,255,255,.55),
      0 0 30px rgba(255,255,255,.35);
  }
}


/* SECTION TITLES — hand-drawn underline (PURPLE) */
.h2-deco .hl2{
  position: relative;
  display: inline-block;
  padding: 0 16px;
}

.h2-deco .hl2::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 360px;
  height: 22px;
  opacity: .95;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='22' viewBox='0 0 360 22'%3E%3Cpath d='M6 14 C 60 4, 140 20, 220 8 S 320 18, 354 10' stroke='%236C63FF' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 18 C 120 6, 260 22, 340 14' stroke='%23B8B3FF' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-dasharray='7 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Don't draw an underline inside the HERO if a .hl2 appears there */
.hero .hl2::after { display: none !important; }

/* Smaller underline on mobile */
@media (max-width: 540px){
  .h2-deco .hl2::after{
    width: 260px;
    height: 18px;
    bottom: -10px;
  }
}


/* ===========================
   TIERS — FULL SECTION STYLES
   (layout, gradients, logo image, perks, responsive)
   =========================== */

/* Layout */
.tiers { position: relative; }
.tiers .tiers-grid{
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(3, 1fr); /* 3 across on desktop */
  align-items: stretch;
  overflow: visible; /* allow tier logos to protrude */
}

/* Base card */
.tier-card{
  position: relative;
  overflow: visible; /* let the top logo sit outside */
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: var(--s-5);
  background: rgba(247,243,237,.05); /* fallback behind gradients */
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tier-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.30);
  border-color: rgba(247,243,237,.26);
}

/* Full-width Diamond spans below the first row of 3 */
.tier-card.diamond{ grid-column: 1 / -1; }

/* Plain tier logo image (NO styled box), centered on top edge and in front */
.tier-logo{
  position: absolute;
  left: 50%;
  top: -28px;                 /* outside the card edge */
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  z-index: 10;                /* in front of the card */
  pointer-events: none;

  /* remove any previous box styling */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
.tier-logo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* preserve icon shape */
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Header */
.tier-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: var(--s-4);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.tier-id{ display:flex; align-items:center; gap:10px; }
.tier-head i{ width:22px; height:22px; stroke-width:2; }
.tier-name{ font-weight:900; letter-spacing:.3px; font-size:18px; }
.tier-cap{ font-weight:800; font-size:12px; letter-spacing:.6px; color:var(--muted); }

/* Perks list */
.tier-perks{
  list-style:none; margin:0 0 var(--s-4) 0; padding:0;
  display:grid; gap:10px;
}
/* UPDATE: Perk icons bigger, true outside, uniform spacing for 1–2 line items,
   more left padding for text, and a subtle hover polish */

/* knobs */
:root{
  --perk-icon-size: 20px;    /* icon size (was ~16–18) */
  --perk-icon-offset: 28px;  /* how far the icon sits OUTSIDE the pill to the left */
  --perk-min-h: 44px;        /* minimum pill height so 1-line items match nicely */
  --perk-pad-x: 16px;        /* inner left/right padding for text inside pill */
  --perk-pad-y: 10px;        /* inner top/bottom padding */
}

/* give runway on the left so outside icons never collide with the card edge */
.tier-perks{
  position: relative;
  padding-left: var(--perk-icon-offset);
  display: grid;
  gap: 12px; /* a touch more breathing room between pills */
}

/* each pill anchors its icon; add more text padding and a min height */
.tier-perks .perk{
  position: relative;
  display: flex;
  align-items: center;                 /* keeps 1-line centered; 2-line still pleasant */
  gap: 8px;
  padding: var(--perk-pad-y) var(--perk-pad-x);
  padding-left: calc(var(--perk-pad-x) + 6px);  /* extra room after the notch */
  min-height: var(--perk-min-h);
  line-height: 1.45;                   /* pleasant leading for wraps */
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(11,15,25,.35);
  font-weight: 600;
}

/* move the Lucide SVG fully OUTSIDE the pill and make it larger */
.tier-perks .perk svg{
  position: absolute;
  left: calc(-1 * var(--perk-icon-offset));
  top: 50%;
  transform: translateY(-50%);
  width: var(--perk-icon-size);
  height: var(--perk-icon-size);
  stroke: var(--tier-color, var(--accent));
  stroke-width: 2.2;
  fill: none;
}

/* on/off state tinting */
.tier-perks .perk.on  svg{ opacity: 1; }
.tier-perks .perk.off svg{ opacity: .45; }

/* subtle hover polish (my improvement): softer glass + tiny icon nudge */
.tier-perks .perk:hover{
  background: rgba(247,243,237,.06);
  border-color: rgba(247,243,237,.26);
  box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.tier-perks .perk:hover svg{
  transform: translateY(-50%) translateX(-1px);
}

/* mobile tweaks: tuck icons closer and slightly reduce size */
@media (max-width: 540px){
  :root{
    --perk-icon-size: 18px;
    --perk-icon-offset: 22px;
    --perk-min-h: 42px;
    --perk-pad-x: 14px;
    --perk-pad-y: 8px;
  }
  .tier-perks{ gap: 10px; }
}
/* UPDATE: Eligible perks — keep the border THIN (1px) but use the tier color.
   (Overrides the previous 2px outline ring.) */

/* Thin, tier-colored border */
.tier-perks .perk.on{
  border-color: var(--tier-color, var(--accent));
  box-shadow: none; /* remove the thick outline ring */
}

/* Keep hover polish, but still thin border */
.tier-perks .perk.on:hover{
  border-color: var(--tier-color, var(--accent));
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.04) inset; /* subtle glass, no extra outline */
}

/* Accessible focus without adding thickness */
.tier-perks .perk.on:focus-visible{
  outline: 1px solid var(--tier-color, var(--accent));
  outline-offset: 2px; /* separates outline from the thin border */
  box-shadow: none;
}
/* UPDATE: Tier headers — make tier names bigger and remove the icons (Bronze/Silver/Gold/Diamond) */

/* Hide any header icons (works before & after Lucide swaps <i> → <svg>) */
.tier-head .tier-id i,
.tier-head .tier-id svg{
  display: none !important;
}

/* Close the gap that existed for the icon */
.tier-head .tier-id{ gap: 0; }

/* UPDATE: Tier names — Instrument Serif, italic, with tier-colored glow */

/* Base style */
.tier-name{
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--tier-color, var(--card));
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: .2px;
  text-shadow: none; /* set per tier below */
}

/* Bronze glow */
.tier-card.bronze .tier-name{
  text-shadow:
    0 0 6px  rgba(205,127,50,.65),
    0 0 16px rgba(205,127,50,.42),
    0 0 28px rgba(205,127,50,.24);
}

/* Silver glow */
.tier-card.silver .tier-name{
  text-shadow:
    0 0 6px  rgba(230,236,241,.65),
    0 0 16px rgba(230,236,241,.40),
    0 0 28px rgba(230,236,241,.22);
}

/* Gold glow */
.tier-card.gold .tier-name{
  text-shadow:
    0 0 6px  rgba(255,200,87,.65),
    0 0 16px rgba(255,200,87,.45),
    0 0 28px rgba(255,200,87,.28);
}

/* Diamond (cyan) glow */
.tier-card.diamond .tier-name{
  text-shadow:
    0 0 6px  rgba(143,230,255,.60), /* #8FE6FF */
    0 0 16px rgba(143,230,255,.40),
    0 0 28px rgba(143,230,255,.25);
}
/* UPDATE: Make tier names visibly brighter (broad-browser safe, no color-mix) */

/* 1) Define slightly lighter text colors per tier */
.tier-card.bronze  { --tier-text: #E3A25C; }  /* brighter than #CD7F32 */
.tier-card.silver  { --tier-text: #D8DEE4; }  /* brighter neutral than #C0C0C0 */
.tier-card.gold    { --tier-text: #FFE08A; }  /* brighter than var(--gold) #FFC857 */
.tier-card.diamond { --tier-text: #A8EBFF; }  /* brighter than #8FE6FF */

/* 2) Apply brighter color to the tier name (keeps your italic + glow rules) */
.tier-name{
  color: var(--tier-text, var(--tier-color, var(--card))) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* 3) Tiny white micro-glow to boost perceived brightness on dark BGs */
.tier-card .tier-name{
  text-shadow:
    0 0 2px rgba(255,255,255,.08),
    0 0 1px rgba(255,255,255,.06);
}


/* (Optional) ensure the caption on the right doesn't overpower the tier name */
.tier-cap{
  color: var(--muted);
  font-weight: 800;
}


.tier-perks .perk{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius: 15px;           /* pill */
  background: rgba(11,15,25,.35);  /* good contrast over gradients */
  font-weight:600;
}
.tier-perks .perk i{ width:16px; height:16px; }

/* Included vs not included */
.tier-perks .perk.on  i{ color: var(--accent); }
.tier-perks .perk.off { opacity:.65; }
.tier-perks .perk.off i{ color: rgba(247,243,237,.35); }

/* Footer note sticks to bottom */
.tier-note{ font-size:12px; opacity:.9; margin-top:auto; }

/* ===== Tier gradient skins ===== */
/* BRONZE gradient */
.tier-card.bronze{
  --tier-color: #cd7f32;
  border-color: rgba(205,127,50,.45);
  background:
    /* angled tint */
    linear-gradient(135deg, rgba(205,127,50,.20) 0%, rgba(139,89,45,.12) 45%, rgba(11,15,25,0) 100%),
    /* corner glow */
    radial-gradient(120% 120% at 0% 0%, rgba(205,127,50,.14), transparent 60%),
    rgba(247,243,237,.04);
}
.tier-card.bronze:hover{ box-shadow: 0 18px 42px rgba(205,127,50,.22); }

/* SILVER gradient */
.tier-card.silver{
  --tier-color: #c0c0c0;
  border-color: rgba(192,192,192,.45);
  background:
    linear-gradient(135deg, rgba(192,192,192,.22) 0%, rgba(158,167,174,.12) 50%, rgba(11,15,25,0) 100%),
    radial-gradient(120% 120% at 0% 0%, rgba(192,192,192,.16), transparent 60%),
    rgba(247,243,237,.04);
}
.tier-card.silver:hover{ box-shadow: 0 18px 42px rgba(192,192,192,.20); }

/* GOLD gradient */
.tier-card.gold{
  --tier-color: var(--gold);
  border-color: rgba(255,200,87,.45);
  background:
    linear-gradient(135deg, rgba(255,200,87,.24) 0%, rgba(201,165,58,.12) 50%, rgba(11,15,25,0) 100%),
    radial-gradient(120% 120% at 0% 0%, rgba(255,200,87,.18), transparent 60%),
    rgba(247,243,237,.04);
}
.tier-card.gold:hover{ box-shadow: 0 18px 42px rgba(255,200,87,.26); }

/* DIAMOND (cyan) gradient */
.tier-card.diamond{
  --tier-color: #8FE6FF;
  border-color: rgba(143,230,255,.45);
  background:
    linear-gradient(135deg, rgba(143,230,255,.24) 0%, rgba(95,208,245,.12) 50%, rgba(11,15,25,0) 100%),
    radial-gradient(120% 120% at 0% 0%, rgba(143,230,255,.18), transparent 60%),
    rgba(247,243,237,.04);
}
.tier-card.diamond:hover{ box-shadow: 0 18px 42px rgba(143,230,255,.24); }

/* Optional: tint header icon by tier (subtle) */
.tier-card .tier-head i{ color: var(--tier-color, #fff); }

/* Responsive */
@media (max-width: 1024px){
  .tiers .tiers-grid{ grid-template-columns: 1fr; }
  .tier-card.diamond{ grid-column: auto; }
  .tier-logo{ top: -22px; width: 44px; height: 44px; }
}

/* Mobile diamond card - show/hide based on screen size */
@media (max-width: 720px) {
  .desktop-diamond {
    display: none !important;
  }
  
  .mobile-diamond-card {
    display: block !important;
  }
}

@media (min-width: 721px) {
  .mobile-diamond-card {
    display: none !important;
  }
}

/* Mobile diamond card styles */
.mobile-diamond-card {
  display: none;
  position: relative;
  background: 
    linear-gradient(135deg, rgba(143,230,255,.24) 0%, rgba(95,208,245,.12) 50%, rgba(11,15,25,0) 100%),
    radial-gradient(120% 120% at 0% 0%, rgba(143,230,255,.18), transparent 60%),
    rgba(247,243,237,.04);
  border: 1px solid rgba(143,230,255,.45);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0 5px 0;
  box-shadow: 0 8px 24px rgba(143,230,255,.15);
  overflow: visible;
  min-height: 120px;
}

/* Mobile diamond background and sparkles */
.mobile-diamond-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("/bg.png") center / cover no-repeat;
  opacity: 0.3;
  z-index: 0;
  border-radius: 16px;
  pointer-events: none;
}

.mobile-diamond-card::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 30px;
  width: 2px;
  height: 2px;
  background: #8FE6FF;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(143,230,255,.9);
  animation: mobileSparkle1 3s ease-in-out infinite;
  z-index: 2;
}

/* Additional sparkle using a child element */
.mobile-diamond-card .mobile-diamond-sparkle {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 1.5px;
  height: 1.5px;
  background: #5FD0F5;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(95,208,245,.7);
  animation: mobileSparkle2 2.8s ease-in-out infinite;
  z-index: 2;
}

@keyframes mobileSparkle1 {
  0%, 100% { opacity: 0.2; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes mobileSparkle2 {
  0%, 100% { opacity: 0.3; transform: scale(0.6); }
  50% { opacity: 0.9; transform: scale(1.3); }
}

.mobile-diamond-icon {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(143,230,255,.6));
  transition: all 0.3s ease;
}

.mobile-diamond-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(143,230,255,.4));
}

.mobile-diamond-card:hover .mobile-diamond-icon {
  filter: drop-shadow(0 0 12px rgba(143,230,255,.8));
  transform: translateX(-50%) scale(1.05);
}

.mobile-diamond-card:hover {
  box-shadow: 0 12px 32px rgba(143,230,255,.25);
  transform: translateY(-2px);
}

.mobile-diamond-content {
  text-align: center;
  padding-top: 10px;
}

/* Mobile tier name font size increase for Bronze, Gold, Silver */
@media (max-width: 720px) {
  .tier-card.bronze .tier-name,
  .tier-card.gold .tier-name,
  .tier-card.silver .tier-name {
    font-size: 34px;
  }
  
  /* Mobile perk styling - reduce font by 30% and increase icon size */
  .tier-perks .perk {
    font-size: 0.8rem; /* slightly larger font */
    max-width: 100%; /* allow container to stretch full width */
    margin-left: 20px; /* increase gap between icon and text container */
    padding-left: 20px; /* add internal padding to create space from icon */
  }
  
  .tier-perks .perk svg {
    width: 28px; /* increased from 20px */
    height: 28px; /* increased from 20px */
    left: -40px; /* move icon further left to create gap */
  }
  
  /* Mobile glist-pro - reduce all fonts except prices */
  .glist-pro {
    max-width: 100%; /* increase width to full container */
    padding: 0px 0px 0; /* remove all padding */
  }
  
  .glist-pro .gleft {
    font-size: 0.7rem; /* further reduce text font size */
  }
  
  .glist-pro .gcheck {
    width: 14px; /* further reduce check icon size */
    height: 14px; /* further reduce check icon size */
  }
  
  .glist-pro .gleader {
    display: none; /* hide dotted line */
  }
  
  .glist-pro .gright {
    display: flex;
    justify-content: flex-end; /* keep prices aligned to the right */
    align-items: center; /* center vertically */
    flex-shrink: 0; /* prevent shrinking */
    min-width: fit-content; /* ensure full price visibility */
    margin-left: auto; /* push to the far right */
    text-align: right; /* right-align the text content */
    /* No font-size override - prices keep original size */
  }
  
  .glist-pro .gright .old {
    text-align: right; /* keep strikethrough prices aligned to the right */
  }
  
  /* Keep prices unchanged - no font-size override for .gright */
  
  /* Mobile section gap consistency */
  .section {
    padding: 40px 0; /* consistent mobile section padding */
  }
  
  .purple-line {
    margin: 20px auto; /* consistent purple line margins */
  }
  
  .purple-line.small {
    margin: 20px auto; /* consistent small purple line margins */
  }
  
  .purple-line.medium {
    margin: 20px auto; /* consistent medium purple line margins */
  }
  
  .purple-line.large {
    margin: 20px auto; /* consistent large purple line margins */
  }
  
  /* Mobile hero-super - show mobile versions, hide desktop */
  .desktop-hero-super {
    display: none; /* hide desktop version on mobile */
  }
  
  .mobile-hero-super {
    display: flex; /* show mobile versions */
    justify-content: center;
  }
  
  
  .mobile-hero-super .super-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: calc(var(--ctaW) * 2 + var(--ctaGap));
    min-height: 56px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(247,243,237,.04);
    border: 1px solid var(--line);
    box-shadow: inset 0 6px 16px rgba(0,0,0,.28);
    color: var(--card);
    text-decoration: none;
  }
  
  .mobile-hero-super .super-chip:hover {
    box-shadow: inset 0 8px 18px rgba(0,0,0,.32);
    filter: brightness(1.04);
  }
  
  /* Make hero text full width on mobile */
  .h1-deco {
    max-width: 100% !important;
  }
  
  /* Make hero-sub-text slightly smaller on mobile */
  .hero-sub-text {
    font-size: clamp(12px, 2.2vw, 22px);
  }
  
  /* Reduce hero-sub-sub-text by 1px on mobile */
  .hero-sub-sub-text {
    font-size: clamp(11px, 1.7vw, 16px);
  }
  
  /* Fixed width wrapper for mobile hero elements - only on mobile */
  .hero-mobile-wrapper {
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
  }
  
  /* Remove left/right margins from hero-super to prevent width reduction */
  .hero-mobile-wrapper .hero-super {
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Add gap between hero-super elements (Offer and Guide) */
  .hero-mobile-wrapper .hero-super:not(:last-child) {
    margin-bottom: 8px;
  }
  
  /* Add gap above first button (Download Guide) */
  .hero-mobile-wrapper .hero-ctas .hero-super:first-child {
    margin-top: 12px;
  }
  
  /* Add gap between buttons */
  .hero-mobile-wrapper .hero-ctas .hero-super:not(:last-child) {
    margin-bottom: 8px;
  }
  
  /* Make hero-super chips and buttons full width within wrapper */
  .hero-mobile-wrapper .mobile-hero-super .super-chip {
    width: 100%;
  }
  
  /* Add negative margin to offer chip on mobile */
  .hero-mobile-wrapper .mobile-hero-offer .super-chip {
    margin-bottom: -10px;
  }
  
  .hero-mobile-wrapper .mobile-hero-button {
    width: 100%;
  }
  
  .hero-mobile-wrapper .mobile-hero-button .btn-hero {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  
  
  /* Red glowing countdown for mobile */
  #discountCountdownMobile {
    color: #ff4444 !important;
    text-shadow: 
      0 0 8px rgba(255, 68, 68, 0.8),
      0 0 16px rgba(255, 68, 68, 0.6),
      0 0 24px rgba(255, 68, 68, 0.4);
    animation: countdownPulse 2s ease-in-out infinite;
  }
  
  @keyframes countdownPulse {
    0%, 100% { 
      text-shadow: 
        0 0 8px rgba(255, 68, 68, 0.8),
        0 0 16px rgba(255, 68, 68, 0.6),
        0 0 24px rgba(255, 68, 68, 0.4);
    }
    50% { 
      text-shadow: 
        0 0 12px rgba(255, 68, 68, 1),
        0 0 20px rgba(255, 68, 68, 0.8),
        0 0 32px rgba(255, 68, 68, 0.6);
    }
  }
  
  /* Mobile webinar custom layout */
  .desktop-webinar {
    display: block; /* show on desktop */
  }
  
  .mobile-webinar {
    display: none; /* hide on desktop */
  }
  
  .mobile-webinar-title {
    font-size: 0.7rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
  }
  
  .mobile-webinar-subtitle {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1px;
  }
  
  .mobile-webinar-access {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.8);
    font-style: italic;
  }
  
  /* Mobile basics custom layout */
  .desktop-basics {
    display: block; /* show on desktop */
  }
  
  .mobile-basics {
    display: block; /* show on mobile */
  }
  
  .desktop-basics {
    display: none; /* hide on mobile */
  }
  
  .mobile-basics-title {
    font-size: 0.7rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
    line-height: 1.2;
  }
  
  .mobile-basics-subtitle {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    font-weight: 500;
    display: block;
    line-height: 1.2;
  }
}

/* Guide Form Modal Styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal-container{background:
  linear-gradient(135deg,rgba(108,99,255,.24) 0%,rgba(95,208,245,.12) 50%,rgba(11,15,25,0) 100%),
  radial-gradient(120% 120% at 0% 0%,rgba(108,99,255,.18),transparent 60%),
  rgba(247,243,237,.04);border:1px solid rgba(108,99,255,.45);border-radius:16px;padding:22px;max-width:340px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.3);position:relative}

.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

.modal-title{color:#fff;font-size:12px;font-weight:600;margin:0 0 0 5px;font-family:'Poppins',system-ui,sans-serif;text-align:left}

.modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255,255,255,.1);
}

.modal-form{display:flex;flex-direction:column;gap:12px}

.form-group{display:flex;flex-direction:column;gap:4px}

.form-group input{
  padding:12px 16px;
  border:1px solid rgba(108,99,255,.3);
  border-radius:8px;
  background:rgba(11,15,25,.6);
  color:#fff;
  font-size:16px;
  font-family:'Poppins',system-ui,sans-serif;
  transition:all 0.3s ease;
  text-align:left;
}

.form-group input:focus{
  outline: none;
  border-color: rgba(108,99,255,.6);
  box-shadow: 0 0 0 3px rgba(108,99,255,.1);
}

.form-group input::placeholder{color:rgba(255,255,255,.6)}

.modal-form .iti{width:100%}
.modal-form .iti__flag-container{background:rgba(11,15,25,.6);border:1px solid rgba(108,99,255,.3);border-radius:8px 0 0 8px;cursor:pointer}
.modal-form .iti__selected-country{padding:0 8px;height:100%}
.modal-form .iti__selected-dial-code{display:none}
.modal-form .iti input{width:100%;padding-left:52px;background:rgba(11,15,25,.6);border:1px solid rgba(108,99,255,.3);border-radius:8px;color:#fff}
.modal-form .iti input:focus{border-color:rgba(108,99,255,.6);box-shadow:0 0 0 3px rgba(108,99,255,.1)}
.modal-form .iti__country-list{max-height:260px}
.modal-form .iti__country-name{display:none}
.modal-form .iti__dial-code{display:none}
.modal-form .iti__country{padding:8px 12px}
.modal-form .iti__divider{display:none}
.iti--container{z-index:12050}

.modal-cta{background:
  linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%,rgba(255,255,255,.12) 60%),
  linear-gradient(90deg,#6C63FF,#7d75ff,#6C63FF);background-size:200% 100%,100% 100%;border:none;border-radius:12px;padding:14px 24px;color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:all .3s ease;margin-top:4px;box-shadow:0 10px 22px rgba(108,99,255,.35),0 0 0 1px rgba(255,255,255,.06) inset;animation:shine 3.2s linear infinite,breathe 2.8s ease-in-out infinite}

.modal-cta:hover{transform:translateY(-1px);filter:brightness(1.04)}
.form-status{
  display:none;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  line-height:1.45;
  text-align:center;
}
.form-status.is-visible{display:block;}
.form-status.is-success{
  background:rgba(0,180,126,.12);
  color:#63ffcb;
  border:1px solid rgba(99,255,203,.35);
}
.form-status.is-error{
  background:rgba(255,73,73,.12);
  color:#ff9b9b;
  border:1px solid rgba(255,112,112,.35);
}
.form-status-subtext{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.75);
}

/* Mobile modal adjustments */
@media (max-width: 720px) {
  .modal-container {
    padding: 24px;
    margin: 10px;
  }
  
  .modal-title {
    font-size: 12px;
  }
  
  .phone-input-group {
    flex-direction: column;
    gap: 12px;
  }
  
  .country-code-select {
    flex: none;
    width: 100%;
  }
}

/* Desktop webinar and basics - hide mobile versions */
@media (min-width: 721px) {
  .desktop-webinar {
    display: block; /* show on desktop */
  }
  
  .mobile-webinar {
    display: none; /* hide on desktop */
  }
  
  /* Desktop titles for agents section */
  .h2-deco .desktop-title {
    display: inline; /* show desktop title */
  }
  .h2-deco .mobile-title {
    display: none; /* hide mobile title */
  }
  
  
  .desktop-basics {
    display: block; /* show on desktop */
  }
  
  .mobile-basics {
    display: none; /* hide on desktop */
  }
  
  /* Desktop section gap consistency */
  .section {
    padding: 60px 0; /* consistent desktop section padding */
  }
  
  .purple-line {
    margin: 30px auto; /* consistent desktop purple line margins */
  }
  
  .purple-line.small {
    margin: 30px auto; /* consistent small purple line margins */
  }
  
  .purple-line.medium {
    margin: 30px auto; /* consistent medium purple line margins */
  }
  
  .purple-line.large {
    margin: 30px auto; /* consistent large purple line margins */
  }
  
  /* Desktop hero-super - show desktop version, hide mobile */
  .desktop-hero-super {
    display: block; /* show desktop version */
  }
  
  .mobile-hero-super {
    display: none; /* hide mobile versions on desktop */
  }
  
  /* On desktop, show button containers even though they're in mobile-hero-super */
  .mobile-hero-super.mobile-hero-button {
    display: flex !important;
    justify-content: center;
  }
  
  /* On desktop, wrapper doesn't constrain width */
  .hero-mobile-wrapper {
    width: auto;
    max-width: none;
  }
  
  /* On desktop, show buttons normally without wrapper constraints */
  .hero-mobile-wrapper .mobile-hero-button {
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    vertical-align: middle;
  }
  
  .hero-mobile-wrapper .mobile-hero-button .btn-hero {
    width: auto;
    min-width: var(--ctaW);
    flex: 0 0 var(--ctaW);
    height: 52px;
    line-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    padding: 0 22px;
  }
  
  .hero-mobile-wrapper .hero-ctas {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  
  /* Override base hero-ctas margins on desktop */
  .hero-mobile-wrapper .hero-ctas .hero-super:not(:last-child) {
    margin-bottom: 0;
    margin-right: 0;
  }
  
  .hero-mobile-wrapper .hero-ctas .hero-super:first-child {
    margin-top: 0;
  }
  
  /* Ensure buttons are vertically aligned */
  .hero-mobile-wrapper .hero-ctas .hero-super {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    vertical-align: middle;
    margin: 0;
  }
}


.mobile-diamond-name {
  font-size: 46px;
  font-weight: 900;
  font-style: italic;
  font-family: "Instrument Serif", serif;
  color: #A8EBFF;
  margin: 0 0 2px 0;
  letter-spacing: 0.3px;
  text-shadow: 
    0 0 6px rgba(143,230,255,.60),
    0 0 16px rgba(143,230,255,.40),
    0 0 28px rgba(143,230,255,.25);
  position: relative;
  z-index: 3;
}

.mobile-diamond-cap {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0.6px;
  position: relative;
  z-index: 3;
}

/* UPDATE: Fix Diamond card height; BG image follows box (never changes it) */

/* easy knobs */
:root{
  --tier-card-h: 420px;          /* desktop height for Bronze/Silver/Gold (optional) */
  --tier-card-h-diamond: 420px;  /* desktop height for Diamond */
}

/* (optional) fix heights for all tier cards */
.tier-card{
  position: relative;
  height: var(--tier-card-h);
}

/* fix height for the Diamond card */
.tier-card.diamond{
  position: relative;
  height: var(--tier-card-h-diamond);
  background: none !important;   /* layout driven by the box, not an image */
  overflow: hidden;              /* clip BG to rounded corners */
  height: 100%;
}

/* BG image layer (fills the fixed box; never affects layout) */
.tier-card.diamond::before{
  content: "";
  position: absolute;
  inset: 0;                                   /* fill the card box */
  background: url("/bg.png") center / cover no-repeat;
  opacity: .30;                               /* 30% opacity */
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* Gradient layer above image (keeps your Diamond look) */
.tier-card.diamond::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(143,230,255,.24) 0%, rgba(95,208,245,.12) 50%, rgba(11,15,25,0) 100%),
    radial-gradient(120% 120% at 0% 0%, rgba(143,230,255,.18), transparent 60%),
    rgba(247,243,237,.04);
}

/* content always above BG + gradient */
.tier-card.diamond > *{
  position: relative;
  z-index: 2;
}

/* SAFEGUARD: if an inline <img> slipped inside, force it out of flow so it can't change height */
.tier-card.diamond > img,
.tier-card.diamond img.bg,
.tier-card.diamond > img[src$="bg.png"],
.tier-card.diamond > img[src*="bg.png"]{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .30 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Mobile: let height auto to avoid clipping on small screens */
@media (max-width: 1024px){
  .tier-card,
  .tier-card.diamond{
    height: auto;
  }
}

/* === FIX: show /diamond.png "in front" (not clipped), keep same centered position === */
/* 1) Stop ancestor clipping for this section */
section.tiers.glow-bg,
#tiers.glow-bg,
#tiers .wrap{
  overflow: visible !important;
}

/* 2) Diamond card must not clip its front emblem */
.tier-card.diamond{
  position: relative;
  overflow: visible !important;
}

/* 3) Make sure DIAMOND bg/gradient stay behind */
.tier-card.diamond::before,
.tier-card.diamond::after{
  z-index: 0 !important;
}

/* 4) FRONT overlay (keeps your same centering, but truly on top) */
:root{
  --diamond-front-size: 220px; /* adjust size here */
}
.tier-card.diamond .tier-front{
  position: absolute;
  inset: 0;                         /* keep same centered position */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;                    /* put in front of everything */
}

/* 5) The image itself */
.tier-card.diamond .tier-front::before{
  content: "";
  width: var(--diamond-front-size);
  height: var(--diamond-front-size);
  background: url("/diamond.png") center / contain no-repeat;
}

/* 6) Responsive size (optional) */
@media (max-width: 1024px){
  :root{ --diamond-front-size: 180px; }
}
@media (max-width: 560px){
  :root{ --diamond-front-size: 140px; }
}
/* UPDATE: Diamond emblem glow — add a smooth "breathing" animation (cyan theme) */

/* knobs */
:root{
  --diamond-breathe-dur: 3.2s;
  --diamond-breathe-scale-min: 0.96;
  --diamond-breathe-scale-max: 1.08;
  --diamond-breathe-opacity-min: 0.45;
  --diamond-breathe-opacity-max: 0.85;
}

/* keep your existing front layer rules; add animation to the halo */
.tier-card.diamond .tier-front{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}

/* image + static cyan drop-shadow (unchanged) */
.tier-card.diamond .tier-front::before{
  content: "";
  width: var(--diamond-front-size);
  height: var(--diamond-front-size);
  background: url("/diamond.png") center / contain no-repeat;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 10px rgba(143,230,255,.55))
    drop-shadow(0 0 24px rgba(143,230,255,.35))
    drop-shadow(0 0 48px rgba(143,230,255,.22));
}

/* animated halo behind the emblem */
.tier-card.diamond .tier-front::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--diamond-breathe-scale-min));
  width: calc(var(--diamond-front-size) * 1.6);
  height: calc(var(--diamond-front-size) * 1.6);
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(
    circle,
    rgba(143,230,255,.22) 0%,
    rgba(143,230,255,.10) 38%,
    rgba(143,230,255,0) 70%
  );
  opacity: var(--diamond-breathe-opacity-min);
  filter: blur(14px);
  animation: diamondBreath var(--diamond-breathe-dur) ease-in-out infinite;
}

@keyframes diamondBreath{
  0%, 100%{
    transform: translate(-50%, -50%) scale(var(--diamond-breathe-scale-min));
    opacity: var(--diamond-breathe-opacity-min);
    filter: blur(14px);
  }
  50%{
    transform: translate(-50%, -50%) scale(var(--diamond-breathe-scale-max));
    opacity: var(--diamond-breathe-opacity-max);
    filter: blur(20px);
  }
}

/* accessibility: disable motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .tier-card.diamond .tier-front::after{
    animation: none;
    opacity: .6;
    filter: blur(16px);
  }
}
/* NEW: plain white bold text next to the Diamond title */
.tier-card.diamond .tier-extra{
  color: #fff;
  font-weight: 900;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.1;
  letter-spacing: .2px;
  margin-left: 10px;         /* space after "Diamond" */
  white-space: nowrap;       /* keep it on one line if there's room */
}

/* If it gets tight, allow wrapping under the title gracefully */
@media (max-width: 760px){
  .tier-card.diamond .tier-id{
    flex-wrap: wrap;
    gap: 6px;
  }
  .tier-card.diamond .tier-extra{
    white-space: normal;
    margin-left: 0;
  }
}
/* DIAMOND header layout: 3 columns with the middle the same width as the emblem */
:root{
  /* already defined earlier: --diamond-front-size */
  /* tweak padding if you want the row a bit taller */
  --diamond-row-pad: clamp(8px, 1.6vw, 18px);
}

/* remove the horizontal line for Diamond, switch to a 3-col grid */
.tier-card.diamond .tier-head{
  border-bottom: none !important;
  display: grid;
  grid-template-columns: 1fr var(--diamond-front-size) 1fr;
  align-items: center;
  column-gap: clamp(8px, 1.2vw, 18px);
  padding: var(--diamond-row-pad) 0;
  position: relative;
}

/* DIAMOND on the LEFT of the emblem, close to center */
.tier-card.diamond .tier-left{
  grid-column: 1;
  justify-self: end;
  text-align: right;
  margin-right: clamp(6px, 1vw, 14px);
}

/* Exclusive text on the RIGHT of the emblem */
.tier-card.diamond .tier-extra{
  grid-column: 3;
  justify-self: start;
  color: #fff;
  font-weight: 900;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.15;
  letter-spacing: .2px;
  margin-left: clamp(6px, 1vw, 14px);
  white-space: nowrap;
}

/* keep the cap in the top-right corner */
.tier-card.diamond .tier-cap{
  position: absolute;
  top: 6px;
  right: 12px;
  font-weight: 800;
}

/* responsiveness: allow the VIP line to wrap under the icon on small screens */
@media (max-width: 820px){
  .tier-card.diamond .tier-extra{
    white-space: normal;
  }
}
/* === DIAMOND HEADER FIX — center text vertically + symmetric gaps around emblem,
   bigger "Diamond", and cancel any old absolute positioning on the cap.
   Place this AFTER any previous tier-head/tier-cap rules. === */

/* knobs */
:root{
  --diamond-gap: clamp(10px, 1.2vw, 18px);   /* equal gap on both sides of emblem */
}

/* header row sits between top & footer without changing card size */
.tier-card.diamond .tier-head{
  position: relative;
  margin-block: auto;                        /* vertical centering within the card */
  border-bottom: none;
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--diamond-front-size) minmax(0,1fr);
  align-items: center;                       /* vertical centering inside the row */
  column-gap: 4%;                             /* we use equal margins for symmetry */
  padding: 0;
  z-index: 2;                                /* under the emblem overlay */
}

/* left of emblem — DIAMOND title */
.tier-card.diamond .tier-left{
  grid-column: 1;
  justify-self: end;
  text-align: right;
  display: flex;
  align-items: center;                       /* vertical centering */
  margin-right: var(--diamond-gap);          /* == right-side margin for symmetry */
}

/* bigger title (keeps your Instrument Serif / italic / glow) */
.tier-card.diamond .tier-name{
  font-size: clamp(40px, 4.6vw, 54px);
  line-height: 1.05;
}

/* right of emblem — "Exceeding … Exclusive VIP Services"
   (reset any old absolute rules and center it vertically) */
.tier-card.diamond .tier-cap{
  position: static !important;               /* cancel old absolute top/right */
  top: auto !important;
  right: auto !important;

  grid-column: 3;
  justify-self: start;
  display: flex;
  align-items: center;                       /* vertical centering */
  line-height: 1.15;
  margin-left: var(--diamond-gap);           /* same gap as left side */
  white-space: nowrap;                       /* keep on one line if room */
}

/* allow the cap text to wrap on small screens but keep centering */
@media (max-width: 900px){
  .tier-card.diamond .tier-cap{ white-space: normal; }
}
/* === DIAMOND BACKGROUND SPARKLES (exclusive cyan theme) ===================== */
/* knobs */
:root{
  --diamond-cyan: #8FE6FF;
  --diamond-cyan-deep: #5FD0F5;
  --sparkle-size: 160px;           /* pattern tile size for dots */
  --sparkle-intensity: .25;        /* overall twinkle strength */
  --sparkle-drift: 12s;            /* slow drift */
  --sparkle-sweep: 6.5s;           /* angled light sweep */
}

/* layering: image (::before) < gradient (::after) < sparkles < content < emblem */
.tier-card.diamond{ position: relative; overflow: visible; }
.tier-card.diamond::before{ z-index: 0; }  /* your /bg.png */
.tier-card.diamond::after { z-index: 1; }  /* your gradient */

/* content above sparkles */
.tier-card.diamond > *{ position: relative; z-index: 3; }

/* center emblem stays at very top (you already have z-index: 9999) */

/* sparkle layer (OVER gradient, UNDER content) */
.tier-card.diamond .tier-sparkles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;                 /* clip sparkles to the card */
  /* base subtle glow so it feels "alive" even between twinkles */
  background: radial-gradient(60% 60% at 50% 50%, rgba(143,230,255,.06), rgba(143,230,255,0) 70%);
}

/* dot twinkles (pseudo 1) + light sweep (pseudo 2) */
.tier-card.diamond .tier-sparkles::before,
.tier-card.diamond .tier-sparkles::after{
  content: "";
  position: absolute;
  inset: -8%;                       /* extend a bit past edges for smooth drift */
  pointer-events: none;
}

/* 1) twinkle dots: two cyan tones arranged in a soft grid, drifting + flickering */
.tier-card.diamond .tier-sparkles::before{
  /* two tiled dotted layers for parallax */
  background:
    radial-gradient(circle at 30% 40%, rgba(143,230,255,var(--sparkle-intensity)) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 65%, rgba(95,208,245,var(--sparkle-intensity)) 0 2px, transparent 3px);
  background-size: var(--sparkle-size) var(--sparkle-size), calc(var(--sparkle-size) * 1.2) calc(var(--sparkle-size) * 1.2);
  background-repeat: repeat;
  filter: drop-shadow(0 0 10px rgba(143,230,255,.25));
  animation:
    diamondSparkleDrift var(--sparkle-drift) linear infinite,
    diamondSparkleFlicker 2.8s ease-in-out infinite;
  opacity: .9;
}

/* 2) angled cyan sweep that passes over the card */
.tier-card.diamond .tier-sparkles::after{
  background: linear-gradient(
    115deg,
    rgba(143,230,255,0) 42%,
    rgba(143,230,255,.22) 50%,
    rgba(143,230,255,0) 58%
  );
  background-size: 220% 100%;
  animation: diamondSparkleSweep var(--sparkle-sweep) linear infinite;
  mix-blend-mode: screen; /* lift highlights without washing out */
  opacity: .6;
}

/* animations */
@keyframes diamondSparkleDrift{
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-60px, -30px); }
}
@keyframes diamondSparkleFlicker{
  0%,100%{ opacity: .6; filter: drop-shadow(0 0 8px rgba(143,230,255,.20)); }
  50%    { opacity: 1;  filter: drop-shadow(0 0 14px rgba(143,230,255,.35)); }
}
@keyframes diamondSparkleSweep{
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .tier-card.diamond .tier-sparkles::before,
  .tier-card.diamond .tier-sparkles::after{
    animation: none;
    opacity: .35;
  }
}
/* UPDATE: Tiers title underline — gradient from Bronze → Silver → Gold → Diamond */
#tiers .h2-deco .hl2::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 360px;
  height: 22px;
  opacity: .95;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='22' viewBox='0 0 360 22'%3E%3Cdefs%3E%3ClinearGradient id='tierG' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23CD7F32'/%3E%3Cstop offset='33%25' stop-color='%23C0C0C0'/%3E%3Cstop offset='66%25' stop-color='%23FFC857'/%3E%3Cstop offset='100%25' stop-color='%238FE6FF'/%3E%3C/linearGradient%3E%3ClinearGradient id='tierGLight' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23E3A25C'/%3E%3Cstop offset='33%25' stop-color='%23D8DEE4'/%3E%3Cstop offset='66%25' stop-color='%23FDE9A6'/%3E%3Cstop offset='100%25' stop-color='%23A8EBFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 14 C 60 4, 140 20, 220 8 S 320 18, 354 10' stroke='url(%23tierG)' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 18 C 120 6, 260 22, 340 14' stroke='url(%23tierGLight)' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-dasharray='7 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* UPDATE: Make "completed purchase" gold (reusable utility) */
.gold-key{
  color: var(--gold);            /* #FFC857 from your theme */
  font-weight: 800;
  text-shadow: 0 0 6px rgba(255,200,87,.35);
}
/* UPDATE: Referral roadmap — equal step heights + single-line titles */

/* =========================
   REFERRAL — FULL CSS (no connector line, no borders on CTA + Submit)
   ========================= */

/* =========================
   REFERRAL — FULL CSS (A→Z)
   Roadmap + CTA + Overlay (simple 3-input form)
   ========================= */

/* knobs */
:root{
  --r-icon: 64px;   /* icon diameter */
  --r-padY: 8px;    /* vertical padding inside each step */
  --ref-btn-size: 16px; /* match your other .btn-hero sizing (e.g., See Golden Visa) */
}

/* ===== Roadmap row ===== */
.referral .ref-steps{
  position: relative;
  display: flex;
  justify-content: center;   /* center row on desktop */
  align-items: stretch;       /* equalize step heights */
  gap: var(--s-5);
  z-index: 0;
}

/* hide any old connector element if present */
.referral .ref-connector{ display: none !important; }

/* step wrapper */
.r-step{
  display: grid;
  grid-template-rows: var(--r-icon) auto auto; /* icon + title + sub */
  align-content: start;
  justify-items: center;
  text-align: center;
  padding-block: var(--r-padY);
  height: 100%;
  min-width: 160px;
  gap: 8px;
  position: relative;
  z-index: 1;
}

/* icon disk */
.r-icon{
  width: var(--r-icon);
  height: var(--r-icon);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(247,243,237,.06);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.22) inset;
  position: relative; z-index: 2;
}
.r-icon svg{ width: 28px; height: 28px; stroke: var(--accent); stroke-width: 2; }
.r-icon.gold svg{ stroke: var(--gold); }

/* titles stay single-line */
.r-label{
  font-weight: 800; color: var(--card);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-sub{ font-size: 12px; line-height: 1.35; }

/* ===== CTA row ===== */
.ref-cta{ display:flex; justify-content:center; margin-top: var(--s-6); }
.ref-cta .btn-hero{
  font-size: var(--ref-btn-size) !important;
  cursor: pointer !important;
  border: 0 !important;
  outline: none;
}

/* ===== Overlay (Modal) ===== */
.ref-modal{
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  visibility: hidden; opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}
.ref-modal.open{ visibility: visible; opacity: 1; }

.ref-backdrop{
  position: absolute; inset: 0;
  background: rgba(5,6,13,.62);
  backdrop-filter: blur(6px);
}

/* dialog card */
.ref-dialog{
  position: relative;
  width: min(520px, 92vw);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(247,243,237,.06), rgba(247,243,237,.02));
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  padding: var(--s-6);
  z-index: 1;
}

/* close button */
.ref-close{
  position:absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--card);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ref-close:hover{ filter: brightness(1.1); }

/* dialog title — only "Lifetime" emphasized */
.ref-title{
  margin: 0 0 var(--s-4) 0;
  text-align: left;
  font-size: clamp(26px, 3.4vw, 34px);
  font-family: inherit; /* keep site body font */
  color: #fff;
}
.ref-title .ref-em{
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(255,200,87,.55),
    0 0 16px rgba(255,200,87,.35);
}

/* ===== Simple 3-input form ===== */
.ref-form--simple{
  display: grid;
  gap: 12px;                 /* reduced gap */
}

.ref-form--simple .ref-input{
  padding: 14px 16px;        /* more padding */
  border-radius: 12px;        /* rounded (not pill) */
  border: 1px solid var(--line);
  background: rgba(247,243,237,.06);
  color: var(--card);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ref-form--simple .ref-input::placeholder{ color: rgba(247,243,237,.55); }
.ref-form--simple .ref-input:focus{
  border-color: rgba(108,99,255,.45);
  box-shadow: 0 0 0 3px rgba(108,99,255,.22);
  background: rgba(247,243,237,.08);
}

/* required-field error */
.ref-form--simple .ref-input.is-error{
  border-color: #FF3B3B !important;
  box-shadow: 0 0 0 3px rgba(255,59,59,.18) !important;
}

/* submit button — same size and pointer as Sign Up, no border */
.ref-submit{
  width: 100%;
  margin-top: 4px;
  font-size: var(--ref-btn-size) !important;
  cursor: pointer !important;
  border: 0 !important;
  outline: none;
}

/* success state (replaces form HTML on success) */
.ref-success{
  text-align: center;
  padding: 22px 10px;
}
.ref-success h3{
  margin: 0 0 8px 0;
  font-size: clamp(22px, 3vw, 28px);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(255,200,87,.55),
    0 0 16px rgba(255,200,87,.35);
}
.ref-success p{ margin: 0; color: var(--card); }

/* ===== Mobile layout (stacked steps) ===== */
@media (max-width: 820px){
  .referral .ref-steps{
    flex-direction: column;
    align-items: stretch;
  }
  .r-step{
    grid-template-columns: var(--r-icon) 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    justify-items: start; text-align: left;
  }
  .r-step .r-icon{ grid-row: 1 / span 2; }
  .r-label{ align-self: end; }
  .r-sub{ align-self: start; }
}

/* ===== Desktop hard-centering guard ===== */
@media (min-width: 1024px){
  .referral .ref-steps{
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto;
  }
  .referral .ref-steps > .r-step{ flex: 0 0 auto; }
}
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.btn-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.social-icon {
  width: 22px;   /* perfect size */
  height: 22px;
  display: block;
}

/* TikTok button */
.btn-social.tiktok {
  background: #000;
  color: #fff;
  border: 2px solid white;
}

/* Instagram button */
.btn-social.instagram {
  background: #fff;
  color: #000;
}

.btn-social:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
/* === Phone field: make the flag/dial code clickable and visible === */
.ref-row--phone { position: relative; }
.ref-row--phone .iti { width: 100% !important; position: relative; }

/* Put the flag/dial container ABOVE the input so it can receive clicks */
.ref-row--phone .iti .iti__flag-container{
  position: absolute !important;
  left: 10px; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,.15);
  background: transparent;
  z-index: 5;            /* <<< critical: without this, no dropdown */
  cursor: pointer;
}

/* Make the selected "chip" readable and clickable */
.ref-row--phone .iti .iti__selected-country{
  height: 100%;
  display: inline-flex; align-items: center;
  color: #F7F3ED; cursor: pointer;
}

/* Show the dial code (e.g., +971) next to the flag, in bright color */
.iti__selected-dial-code{
  display: inline-block !important;
  color: #F7F3ED !important;
  margin-left: 6px; white-space: nowrap; font-weight: 600;
}

/* Make the input truly full width; JS will add left padding dynamically */
.ref-row--phone .iti input.ref-input.ref-phone{
  width: 100% !important;
}

/* Dropdown is appended to <body>; theme it dark and ensure it sits above modal */
.iti--container{ z-index: 99999 !important; }
.iti--container .iti__country-list{
  background: rgba(10,12,20,.98) !important;
  color:#F7F3ED !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  box-shadow:0 10px 40px rgba(0,0,0,.35) !important;
}
.iti--container .iti__search-input{
  background: rgba(22,24,32,.9) !important;   /* fixes white search box */
  color:#F7F3ED !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
}

/* Don't clip the dropdown by the dialog */
.ref-dialog{ overflow: visible; }
/* =========================
   SIDELINES / GUIDE SECTION
   ========================= */
.sidelines {
  font-family: "Manrope","Manrope Placeholder",sans-serif !important;
  position: relative;
  overflow: hidden;
}

/* wrapper */
.sidelines-wrap {
  max-width: 100% !important;
  margin: 0 auto;
}

/* Title + Intro */
.sidelines-title {
  text-align: center !important;
}
.sidelines-intro {
  text-align: center !important;
  margin: 14px auto var(--s-6);
  max-width: 720px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
}
.sidelines-intro strong { color: #fff; }

/* List — only 40% width */
.sidelines-list {
  display: grid;
  gap: 14px;
  margin: 0 auto var(--s-6);
  width: 40%;
}

/* Row */
.sideline {
  display: grid;
  grid-template-columns: 140px 1fr; /* space for big icon */
  align-items: center; /* vertical centering of text with icon */
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: rgba(247,243,237,.04);
  border: 1px solid var(--line);
  box-shadow: inset 0 8px 24px rgba(0,0,0,.18);
  text-align: left;
}

/* Icon wrapper — dark with subtle purple inner light */
.sideline .s-icon {
  width: 120px; height: 120px; border-radius: 28px;
  display: grid; place-items: center;
  background: radial-gradient(circle at top center,
              rgba(166,140,255,0.25) 0%,
              rgba(15,12,32,0.9) 100%);
  border: 1px solid rgba(108,99,255,.35);
  box-shadow: inset 0 8px 20px rgba(108,99,255,.25),
              0 4px 10px rgba(0,0,0,.35);
}
.sideline .s-icon svg {
  width: 48px; height: 48px;
  stroke-width: 2.6;
  stroke: url(#icon-gradient);
  fill: none;
}

/* Text */
.sideline .s-copy h3 {
  margin: 0 0 4px 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  text-align: left;
}
.sideline .s-copy p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

/* Desktop - ensure original styles are preserved */
@media (min-width: 961px) {
  .sideline .s-copy h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    white-space: normal; /* allow wrapping on desktop */
  }
  .sideline .s-copy p {
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: normal; /* normal word breaking on desktop */
  }
}

/* Special hl2 class for "Path to the golden visa" - smaller size */
.h2-deco.golden-head .hl2,
h2.h2-deco.golden-head .hl2,
h2.h2-deco.golden-head span.hl2,
#visa .h2-deco .hl2,
#visa h2 .hl2 {
  font-size: clamp(30px, 4.2vw, 44px) !important; /* larger */
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Special hl12 class for "Different types of agent" - smaller size */
.h2-deco .hl12 {
  font-size: clamp(22px, 3.2vw, 34px) !important; /* smaller size */
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* CTA */
.sidelines-cta {
  margin-top: var(--s-6);
  text-align: center;
}
.sidelines-cta .btn-hero {
  min-width: auto !important;
  width: auto !important;
  display: inline-flex;
  padding: 0 28px;
}

/* Responsive */
@media (max-width: 960px) {
  .sidelines-list { 
    width: 90%; 
    gap: 16px; /* slightly more space between items */
    margin: 0 auto var(--s-6); /* ensure centering */
  }
  .sideline { 
    grid-template-columns: 120px minmax(0, 1fr); /* constrain text column */
    gap: 12px; /* reduced gap */
    padding: 16px 18px; /* equal padding left and right */
    justify-items: center; /* center the icon in its column */
    max-width: 100%; /* prevent overflow */
  }
  .sideline .s-icon { 
    width: 110px; 
    height: 110px; 
    border-radius: 26px; /* proportional to new size */
  }
  .sideline .s-icon svg { 
    width: 48px; 
    height: 48px; 
    stroke-width: 2.4; /* slightly thicker for better visibility */
  }
  
  /* Better text sizing for mobile */
  .sideline .s-copy h3 {
    font-size: 0.8rem; /* smaller heading */
    line-height: 1.4;
    white-space: nowrap; /* force single line */
    overflow: hidden; /* hide overflow */
    text-overflow: ellipsis; /* show ... for long text */
    margin-bottom: 4px; /* add spacing below heading */
  }
  .sideline .s-copy p {
    font-size: 0.65rem; /* smaller description */
    line-height: 1.3;
    padding-right: 8px; /* add right padding */
    word-break: keep-all; /* prevent single words from breaking to next line */
  }
}

/* Extra small mobile adjustments */
@media (max-width: 640px) {
  .sidelines-list { 
    width: 95%; 
    gap: 14px;
    margin: 0 auto var(--s-6); /* ensure centering */
  }
  .sideline { 
    grid-template-columns: 100px minmax(0, 1fr); /* constrain text column */
    gap: 10px; /* reduced gap */
    padding: 14px 16px; /* equal padding left and right */
    justify-items: center; /* center the icon in its column */
    max-width: 100%; /* prevent overflow */
  }
  .sideline .s-icon { 
    width: 95px; 
    height: 95px; 
    border-radius: 24px; /* proportional to new size */
  }
  .sideline .s-icon svg { 
    width: 44px; 
    height: 44px; 
  }
  
  .sideline .s-copy h3 {
    font-size: 0.75rem; /* smaller heading for small mobile */
    line-height: 1.4;
    white-space: nowrap; /* force single line */
    overflow: hidden; /* hide overflow */
    text-overflow: ellipsis; /* show ... for long text */
    margin-bottom: 3px; /* add spacing below heading */
  }
  .sideline .s-copy p {
    font-size: 0.6rem; /* smaller description for small mobile */
    line-height: 1.3;
    padding-right: 6px; /* add right padding */
    word-break: keep-all; /* prevent single words from breaking to next line */
  }
}
/* WHO IS EMILIE ROSE */
.who-er{
  position: relative;
  font-family: "Manrope","Manrope Placeholder",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow: hidden;
}

/* subtle purple wash behind section */
.who-er::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(108,99,255,.12) 0%, rgba(11,15,25,0) 45%, rgba(11,15,25,.10) 100%);
  pointer-events:none;
  z-index:0;
}
.who-er__wrap{ position:relative; z-index:1; }

/* chip header */
.who-er__chip-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:24px;
}
.who-er__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:9999px;
  font-weight:800;
  letter-spacing:.6px;
  font-size:12px;
  text-transform:uppercase;
  color:#CFE0FF;
  background: rgba(108,99,255,.16);
  border:1px solid rgba(108,99,255,.35);
  box-shadow: inset 0 6px 16px rgba(108,99,255,.18);
}

/* grid layout */
.who-er__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px,3vw,40px);
  margin-bottom: var(--s-6);
}
.who-er__col{
  display:grid;
  gap: clamp(22px,2.4vw,34px);
}

/* each row item */
.who-er__item{
  position: relative;
  display:grid;
  grid-template-columns: 68px 1fr;
  gap:16px;
  align-items: center;
  text-align:left !important;
  padding-left:24px; /* space for line */
}
.who-er__item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background: linear-gradient(to bottom, rgba(108,99,255,.65), rgba(108,99,255,0));
  border-radius:2px;
}

/* icon square */
.who-er__icon{
  width:62px; height:62px; border-radius:15px;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(166,140,255,.28), rgba(20,18,32,.92) 65%),
    var(--bg);
  border:1px solid rgba(108,99,255,.35);
  box-shadow: inset 0 10px 22px rgba(108,99,255,.22), 0 6px 16px rgba(0,0,0,.26);
  align-self: flex-start;
}
.who-er__icon svg{
  width:26px; height:26px;
  stroke: url(#icon-gradient);
  stroke-width:2.2; fill:none;
  filter: drop-shadow(0 0 6px rgba(108,99,255,.35));
}

/* text copy */
.who-er__copy h3,
.who-er__copy p{ text-align:left !important; margin:0; }
.who-er__copy h3{
  font-weight:800;
  font-size: clamp(15px,1.8vw,18px);
  color:#fff;
  margin-bottom:6px;
}
.who-er__copy p{
  color: var(--muted);
  font-size:0.8rem;
  line-height:1.6;
}

/* CTA */
.who-er__cta{ text-align:center; }
.who-er__cta-note{ margin-bottom:8px; }
.who-er__cta .btn-hero{
  min-width:auto !important;
  width:auto !important;
  display:inline-flex;
  padding:0 28px;
}

/* responsive */
@media (max-width:1024px){
  .who-er__grid{ grid-template-columns:1fr; }
}
/* =========================
   VERTICAL PROOF WALL (5 columns)
   ========================= */

.wall-wrap {
  position: relative;
}

.wall-intro {
  text-align: center;
  max-width: 980px;
  margin: 0 auto var(--s-6);
}

/* Main wrapper with 5 vertical columns */
.wall {
  --col-h: clamp(420px, 62vh, 720px);   /* column viewport height */
  --gap: 14px;

  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

/* Column viewport — transparent */
.wall-col {
  position: relative;
  height: var(--col-h);
  overflow: hidden;
  border-radius: 0;
  background: transparent;   /* no background */
  box-shadow: none;
  --dur: 26;                 /* base speed (px/s), JS reads this if no data-speed */
}

/* Fade at top and bottom that matches body background */
.wall-col::before,
.wall-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 300px;                   /* adjust as needed */
  pointer-events: none;
  z-index: 3;
}

.wall-col::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(0,0,0,0) 100%
  );
}

.wall-col::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    rgba(0,0,0,0) 100%
  );
}


/* Track moved by JS */
.wall-track {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  z-index: 1;
}

/* Image cards */
.wall-card {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.wall-card img {
  width: 100%;
  height: auto;              /* keep original aspect ratio */
  display: block;
  object-fit: contain;       /* don't crop, preserve proportions */
}

/* Responsive */
@media (max-width: 1200px) {
  .wall { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .wall {
    grid-template-columns: repeat(2, 1fr);
    --col-h: clamp(360px, 58vh, 640px);
  }
}
@media (max-width: 520px) {
  .wall { grid-template-columns: 1fr; }
}
/* =========================
   AGENTS COMPARISON (narrow, compact, border flare)
   ========================= */
.agents-compare { --glass: rgba(247,243,237,.04); }

/* Mobile agents comparison - compact class */
/* Desktop: empty class (no styles) - removed empty ruleset */

/* Mobile: apply compact styles */
@media (max-width: 720px) {
  .agents-compare.mobile-compact .ac-table tbody td {
    font-size: 0.6rem !important; /* even smaller font for td content */
    padding: 2px 1px !important; /* tighter padding */
  }

  .agents-compare.mobile-compact .ac-table tbody td:first-child {
    font-size: 0.75rem !important; /* smaller feature names */
    margin-bottom: 2px !important; /* tighter spacing */
  }
}

.agents-compare .ac-intro{
  text-align:center;
  max-width:600px;
  margin:10px auto var(--s-5);
  font-size:.85rem;
}

/* Narrower wrapper to reduce unused space */
.ac-card{
  position:relative;
  max-width: 860px;         /* narrower box */
  margin: 0 auto;
}

/* Static border (does not move) */
.ac-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 22px;
  border: 1px solid var(--line);
  pointer-events:none;
  z-index: 0;
}

/* Flare: moves around inside the border, border itself stays static */
.ac-flare{
  position:absolute; inset:0;
  border-radius:22px;
  pointer-events:none;
  z-index: 1;

  /* draw the arc flare with a conic gradient */
  background: conic-gradient(
    from 0deg,
    rgba(124,106,255,0) 0deg,
    rgba(124,106,255,.0) 300deg,
    rgba(124,106,255,.35) 320deg,
    rgba(102,190,255,.55) 345deg,
    rgba(124,106,255,.35) 360deg
  );

  /* mask to a thin ring so only the border area shows the flare */
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;               /* ring thickness */
  animation: acFlareSpin 7s linear infinite;
}
@keyframes acFlareSpin{
  to { transform: rotate(360deg); }
}

/* Inner content pane (glassy), compact spacing */
.ac-inner{
  position: relative;
  z-index: 2;
  border-radius: 22px;
  background: var(--glass);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  font-size:.85rem;
}

/* -------- Table -------- */
.ac-table{
  width:100%;
  border-collapse: collapse;
  font-family: "Manrope","Manrope Placeholder",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Tight header; Emilie header purple */
.ac-table thead th{
  text-align:left;
  font-weight:750;
  color:#fff;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  font-size:.86rem;
}
.ac-col-feature{ width:56%; }   /* more room for features text */
.ac-col-typical{ width:22%; }
.ac-col-emilie { width:22%; color: var(--accent); }

/* tighter body cells to reduce right-side space */
.ac-table tbody td{
  padding:8px 10px;
  border-bottom:1px solid rgba(247,243,237,.08);
  vertical-align:middle;
  color:var(--card);
  font-size:.82rem;
}
.ac-table tbody tr:last-child td{ border-bottom:0; }

/* Pills (small) */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; height:26px; padding:0 10px;
  border-radius:9999px; font-weight:750; font-size:11px;
  text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.08);
}
.pill.yes       { background: rgba(108,99,255,.25); border-color: rgba(108,99,255,.45); }
.pill.no        { background: rgba(229,62,62,.25);  border-color: rgba(229,62,62,.45); }
.pill.sometimes { background: rgba(255,176,0,.25);  border-color: rgba(255,176,0,.45); }

/* -------- Mobile layout -------- */
@media (max-width: 720px){
  .ac-inner{ 
    padding: 6px; /* further reduced padding */
    text-align: center; /* center everything */
  }
  .ac-table thead{ display:none; }
  .ac-table, .ac-table tbody, .ac-table tr, .ac-table td{ display:block; width:100%; }
  .ac-table tbody tr{
    border:none; /* remove border */
    border-radius:0; /* remove border radius */
    padding:8px 0; /* vertical padding only */
    margin-bottom:0; /* remove margin */
    background: none; /* remove background */
    text-align: center; /* center content */
    border-bottom: 1px solid var(--line); /* hr line between rows */
  }
  .ac-table tbody tr:last-child{
    border-bottom: none; /* no line after last row */
  }
  .ac-table tbody td{ 
    border:none; 
    padding:6px 4px; /* larger padding for pills */
    font-size:.7rem; /* slightly larger font for pills */
    text-align: center; /* center text */
  }
  
  /* Make pills bigger and add margin-top */
  .ac-table tbody td:nth-child(2),
  .ac-table tbody td:nth-child(3) {
    padding: 12px 10px !important; /* much bigger pills */
    margin-top: 2px !important; /* reduced margin top */
    font-size: 1rem !important; /* much larger pill text */
    min-height: 40px !important; /* ensure minimum height */
  }
  .ac-table tbody td:first-child{
    font-weight:800; 
    color:#fff; 
    margin-bottom:2px; /* further reduced margin */
    font-size:.75rem !important; /* smaller feature name - force override */
    text-align: center; /* center feature name */
  }
  
  /* Make Most Agents and Emilie Rose appear horizontally */
  .ac-table tbody td:nth-child(2),
  .ac-table tbody td:nth-child(3){
    display:inline-block;
    width:48%; /* each takes about half width */
    vertical-align:top;
    text-align: center; /* center content */
  }
  
  .ac-table tbody td:nth-child(2)::before{
    content:"Most Agents"; 
    display:block; 
    font-size:14px; /* larger font */
    color:var(--muted); 
    margin-bottom:1px; /* reduced margin */
    font-weight:600;
    text-align: center; /* center label */
  }
  .ac-table tbody td:nth-child(3)::before{
    content:"Emilie Rose"; 
    display:block; 
    font-size:14px; /* larger font */
    color:var(--accent); 
    margin-bottom:1px; /* reduced margin */
    font-weight:600;
    text-align: center; /* center label */
  }
}
/* =========================
   3-UP SPOTLIGHT REVIEWS
   ========================= */
.spot-reviews .spot-intro{
  text-align:center;
  max-width:760px;
  margin:10px auto var(--s-6,32px);
}

/* Mobile spot-intro centering */
@media (max-width: 720px) {
  .spot-reviews .spot-intro,
  .spot-reviews .muted.spot-intro,
  .muted.spot-intro {
    text-align: center !important;
    margin: 10px auto 24px auto !important;
    max-width: 90% !important;
    display: block !important;
    width: 100% !important;
  }
}

/* Main wrapper with side fades only on the wrapper */
.spot-wrapper {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;

  /* ✅ extra breathing room */
  padding-top: 24px;
  padding-bottom: 24px;
}


/* Left / right dark glows (fade to body bg) */
.spot-wrapper::before,
.spot-wrapper::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width: 12%;
  pointer-events:none;
  z-index: 2;
}
.spot-wrapper::before{
  left:0;
  background: linear-gradient(to right, var(--bg,#05060d) 0%, rgba(5,6,13,0) 100%);
}
.spot-wrapper::after{
  right:0;
  background: linear-gradient(to left, var(--bg,#05060d) 0%, rgba(5,6,13,0) 100%);
}

/* Strip holds exactly 3 cards horizontally */
.spot-strip{
  display: flex;
  align-items: stretch;       /* flexible heights allowed */
  gap: clamp(14px, 2vw, 22px);
  z-index: 1;                 /* under the fades */
}

/* Mobile spot wrapper - show only one image at a time */
@media (max-width: 720px) {
  .spot-wrapper {
    max-width: 100%;
    padding: 16px 0;
  }
  
  .spot-strip {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  
  .spot-card {
    flex: none;
    width: 100%;
    max-width: 300px;
    opacity: 1;
    filter: none;
  }
  
  .spot-card:nth-child(2) {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow: 0 12px 28px rgba(0,0,0,.36);
  }
  
  .spot-wrapper::before,
  .spot-wrapper::after {
    display: none;
  }
}

/* Each card takes 1/3 of width; no fixed aspect ratio */
.spot-card{
  flex: 0 0 calc((100% - 2 * clamp(14px,2vw,22px)) / 3);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* visual styling */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: #0b0f19;           /* safety bg behind transparent PNGs */
  box-shadow: 0 12px 28px rgba(0,0,0,.36);
  overflow: hidden;

  /* default (side) look = slightly faded */
  opacity: .6;
  filter: saturate(.85) brightness(.9);
  transition: opacity .35s ease, filter .35s ease, transform .35s ease, box-shadow .35s ease;
}

/* Images keep their original aspect ratio */
.spot-card img{
  display: block;
  width: 100%;
  height: auto;                /* <-- flexible height */
  object-fit: contain;         /* no cropping */
}

/* Spotlight = the middle card (2nd child) */
.spot-strip .spot-card:nth-child(2){
  opacity: 1;
  filter: none;
  transform: scale(1.03);
  box-shadow:
    0 18px 44px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* Responsive tweaks */
@media (max-width: 720px){
  .spot-card{ border-radius: 14px; }
  .spot-wrapper::before, .spot-wrapper::after{ width: 16%; }
}
/* === Golden Visa benefit icons — solid gold, visible === */
:root{
  --gold-strong: #FFD86B;   /* light gold */
  --gold-deep:   #FFC857;   /* deeper gold */
}

.benefit-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  /* warm gold radial glow behind the icon */
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,216,107,.35), rgba(20,18,32,.92) 65%),
    var(--bg);
  border:1px solid rgba(255,216,107,.45);
  box-shadow:
    inset 0 10px 22px rgba(255,216,107,.25),
    0 6px 16px rgba(0,0,0,.26);
}

/* Force Lucide SVGs to render with visible gold strokes */
.benefit-icon svg{
  width:26px;
  height:26px;
  fill: none !important;
  stroke: var(--gold-strong) !important;    /* solid, visible */
  color: var(--gold-strong) !important;     /* Lucide uses currentColor fallback */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255,216,107,.4));
}

/* Optional: on hover, brighten a touch */
.benefits-row li:hover .benefit-icon svg{
  filter: drop-shadow(0 0 8px rgba(255,216,107,.55));
}
/* =========================
   WhatsApp CTA - purple outline, bg + icon
   ========================= */
.qcta .wrap{ max-width: var(--maxw); }

.qcta-card{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  background: rgba(10,10,15,.85);
  isolation: isolate;
}

/* Animated border */
.qcta-outline{
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: linear-gradient(135deg,
              rgba(108,99,255,.25),
              rgba(102,190,255,.35),
              rgba(108,99,255,.25),
              rgba(102,190,255,.35));
  background-size: 300% 300%;
  animation: qctaOutlineFlow 6s linear infinite;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; z-index:1;
}
@keyframes qctaOutlineFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* background image */
.qcta-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 100% at 50% 110%, rgba(40,60,120,.35), rgba(0,0,0,0) 60%),
    radial-gradient(90% 90% at 80% 30%, rgba(108,99,255,.18), rgba(0,0,0,0) 60%),
    radial-gradient(90% 90% at 20% 40%, rgba(18,140,240,.16), rgba(0,0,0,0) 60%);
  background-image: url("/whatsapp.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  opacity: 0.5;
  filter: brightness(.9) saturate(.9);
}

/* sparkles */
.qcta-particles{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.65;
  background:
    radial-gradient(2px 2px at 18% 30%, rgba(120,110,255,.85), transparent 70%),
    radial-gradient(2px 2px at 78% 65%, rgba(100,190,255,.85), transparent 70%),
    radial-gradient(1.6px 1.6px at 42% 78%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1.4px 1.4px at 66% 22%, rgba(120,110,255,.85), transparent 70%);
  animation: qctaParticles 10s ease-in-out infinite alternate;
}
@keyframes qctaParticles{
  0%  { background-position: 0 0, 15px 20px, -10px 40px, 20px 60px; opacity:.75; }
  50% { background-position: 20px 30px, -10px 35px, 10px 10px, -15px 45px; opacity:1; }
  100%{ background-position: 0 0, 15px 20px, -10px 40px, 20px 60px; opacity:.75; }
}

/* content */
.qcta-body{
  position:relative;
  z-index:3;
  text-align:center;
  padding: clamp(32px, 6vw, 72px);
}
.qcta-title{
  margin:0 0 14px 0;
  font-family:"Manrope","Manrope Placeholder",system-ui;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  font-size: clamp(28px, 5.2vw, 52px);
}
.qcta-sub{
  margin:0 auto 10px;
  max-width:760px;
  color:rgba(255,255,255,.75);
}
.qcta-line{
  margin:0 auto clamp(18px,3vw,28px);
  max-width:820px;
  color:rgba(255,255,255,.65);
}

/* Ensure phone number in questions section is bold white */
.qcta-line .white-strong {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* WhatsApp CTA button — dark green with glowing edges */
.btn-whatsapp-cta.dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #1B8C46 0%, #126B34 50%, #0D5228 100%);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow:
    0 0 12px rgba(37,211,102,.4),
    0 0 22px rgba(37,211,102,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .15s ease, filter .15s ease, box-shadow .25s ease;
  animation: btnGlowPulse 3s ease-in-out infinite;
}

/* soft breathing green glow animation */
@keyframes btnGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(37,211,102,.4),
      0 0 22px rgba(37,211,102,.25),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  50% {
    box-shadow:
      0 0 18px rgba(37,211,102,.6),
      0 0 34px rgba(37,211,102,.4),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
}

.btn-whatsapp-cta.dark:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow:
    0 0 20px rgba(37,211,102,.7),
    0 0 40px rgba(37,211,102,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.btn-whatsapp-cta .wh-icon{
  width:22px;
  height:22px;
  display:block;
}

/* bottom glow */
.qcta-undershadow{
  width:86%;
  height:40px;
  margin:18px auto 0;
  border-radius:9999px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(108,99,255,.35), rgba(0,0,0,0) 70%);
  filter: blur(14px);
}

/* responsive */
@media (max-width: 640px){
  .qcta-body{ padding: clamp(28px, 5vw, 48px); }
  .qcta-title{ font-size: clamp(26px, 6.2vw, 40px); }
  .btn-whatsapp-cta{ height:48px; padding:0 22px; }
}
/* ===== FAQ (Dubai Real Estate, glass rows) ===== */
.faqs .faq-chip {
  display: table;                   /* lets margin auto center it while keeping text-width */
  margin: 0 auto 16px;              /* centers horizontally */
  padding: 8px 14px;
  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: .6px;
  font-size: 12px;
  text-transform: uppercase;
  color: #CFE0FF;
  background: rgba(108,99,255,.16);
  border: 1px solid rgba(108,99,255,.35);
  box-shadow: inset 0 6px 16px rgba(108,99,255,.18);
}




/* Outer panel like the reference */
.faq-panel{
  max-width: 980px;
  margin: clamp(18px,2.2vw,28px) auto 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(247,243,237,.02);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* One row per <details> */
.faq-item{
  border-bottom: 1px solid var(--line);
  background: rgba(5,6,13,.55);
}
.faq-item:last-of-type{ border-bottom: none; }

/* Summary row */
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 20px;
  transition: background .18s ease, filter .18s ease;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:hover{
  background: rgba(247,243,237,.04);
  filter: brightness(1.02);
}

/* Question text */
.faq-item .q{
  color:#fff;
  letter-spacing:.2px;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.4;
  text-align: left;
}

/* Chevron (inline SVG; no masks = cross-browser) */
.faq-item .chev{
  flex: 0 0 18px;
  color: rgba(255,255,255,.85);
  transition: transform .2s ease, color .2s ease;
}
.faq-item[open] .chev{
  transform: rotate(180deg);
  color: var(--accent);
}

/* Answer body */
.faq-item .a{
  padding: 0 20px 18px 20px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  background: rgba(247,243,237,.02);
  border-top: 1px solid rgba(255,255,255,.03);
}

/* Subtle row separator glow like the screenshot */
.faq-item + .faq-item > summary{
  border-top: 1px solid rgba(255,255,255,.02);
}

/* Mobile tweaks */
@media (max-width: 560px){
  .faq-item > summary{ padding: 16px; }
  .faq-item .a{ padding: 0 16px 16px; }
}
/* ===== DUBAI REAL ESTATE GUIDE (glass + purple glow) ===== */
.guide-pro .wrap {
  max-width: var(--maxw);
  text-align: center;
}

.guide-head {
  font-family: "Manrope","Manrope Placeholder",system-ui;
  color: #fff;
  font-size: clamp(26px, 4vw, 40px);
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Glassy card with glow */
.gcard {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  border-radius: 24px;
  background: rgba(15,15,25,0.45);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  padding: clamp(28px,4vw,48px);
}

/* Purple glow background */
.g-glow {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 50% -20%, rgba(120,110,255,.22), transparent 70%),
    radial-gradient(70% 70% at 80% 110%, rgba(102,190,255,.18), transparent 70%);
  z-index: 0;
  filter: blur(40px);
  opacity: 0.8;
}

/* Content above glow */
.gcard > * { position: relative; z-index: 1; }

/* List */
.glist-pro {
  list-style: none;
  margin: 0;
  padding: 8px 22px 0;
}
.grow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.grow:last-child { border-bottom: none; }

/* Left side (check + text) */
.gleft {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  flex: 0 1 auto;
  min-width: 0;
}
.gcheck {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: rgba(247,243,237,.08);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.25);
}

/* dotted line between text & price */
.gleader {
  flex: 1 1 auto;
  height: 0;
  border-bottom: 1px dotted rgba(255,255,255,.25);
  opacity: .9;
}

/* price (scrapped) */
.gright {
  flex: 0 0 auto;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.9);
}
.old {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  color: rgba(255,255,255,.8);
}

/* Totals */
.gtotal {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 18px;
  margin-top: 12px;
  text-align: center;
}
.gtotal-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.gtotal-row .old {
  color: rgba(255,255,255,.8);
}
.gfree {
  position: relative;
  font-size: clamp(42px, 7.5vw, 60px);
  font-weight: 900;
  color: #FFD86B;
  margin-bottom: 10px;
  text-shadow:
    0 0 6px rgba(255,216,107,.35),
    0 0 14px rgba(255,216,107,.25);
  animation: gfreePulse 3s ease-in-out infinite;
  overflow: visible;
}

/* Soft pulse in brightness */
@keyframes gfreePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

.gfree {
  font-size: clamp(42px, 7.5vw, 60px);
  font-weight: 900;
  color: #FFD86B;
  margin-bottom: 10px;
  text-shadow:
    0 0 6px rgba(255,216,107,.45),
    0 0 16px rgba(255,216,107,.35),
    0 0 32px rgba(255,216,107,.25);
  animation: freeGlow 3s ease-in-out infinite;
}

/* soft pulse to make the glow breathe */
@keyframes freeGlow {
  0%, 100% {
    filter: brightness(1);
    text-shadow:
      0 0 6px rgba(255,216,107,.45),
      0 0 16px rgba(255,216,107,.35),
      0 0 32px rgba(255,216,107,.25);
  }
  50% {
    filter: brightness(1.25);
    text-shadow:
      0 0 10px rgba(255,216,107,.6),
      0 0 24px rgba(255,216,107,.5),
      0 0 48px rgba(255,216,107,.35);
  }
}


/* CTA */
.gcta {
  display: inline-flex;
  margin: 6px auto 10px;
  min-width: 260px;
}
.gfoot {
  font-size: 12px;
  margin-top: 6px;
  opacity: .7;
}

/* Responsive */
@media (max-width: 560px) {
  .glist-pro { padding: 0px 0px 0; }
  .gleft { font-size: .95rem; }
  .gright { font-size: .95rem; }
  .gcard { padding: 22px; }
}
.glow2-bg {
  position: relative;
  background: #05060d;
  overflow: hidden;
}

/* grey glow + bg2.png combined inside same layer */
.glow2-bg::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background:
    radial-gradient(
      circle at center,
      rgba(180,180,180,0.35) 0%,    /* bright grey center */
      rgba(140,140,140,0.15) 40%,   /* mid-grey glow */
      rgba(11,15,25,1) 85%          /* dark outer fade */
    ),
    url("/bg2.png") center/cover no-repeat; /* image inside the glow */
  
  filter: blur(0px) grayscale(1) brightness(0.9); /* ✅ no blur, grey tint */
  mask: radial-gradient(50% 50%, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); /* ✅ soft circular fade mask */
  -webkit-mask: radial-gradient(50% 50%, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
  
  opacity: 1; /* ✅ visible and strong */
  z-index: 0;
}

/* content stays above everything */
.glow2-bg .wrap {
  position: relative;
  z-index: 1;
}
.vchip{
  display:table;
  margin:0 auto 16px;
  padding:8px 16px;
  border-radius:9999px;
  font:800 12px/1 "Manrope",system-ui,sans-serif;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#CFE0FF;
  background:rgba(108,99,255,.14);
  border:1px solid rgba(108,99,255,.35);
  box-shadow:inset 0 6px 16px rgba(108,99,255,.18);
}

.vrow.glass{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(18px,3vw,36px);
  padding:clamp(18px,3vw,28px);
  border-radius:20px;
  background:rgba(247,243,237,.04);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}

.vcol{text-align:center;}
.vlabel{
  font:800 13px/1 "Manrope",system-ui,sans-serif;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.vlabel.purple{color:#9b8fff;}

.vnum{
  font:900 clamp(26px,5vw,44px)/1 "Manrope",system-ui,sans-serif;
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.18),0 0 16px rgba(255,255,255,.12);
  margin-bottom:6px;
  white-space:nowrap;
}

.vsub{font-size:12px;opacity:.8;}

.vdivider{
  width:1px;height:64px;
  background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(255,255,255,.06));
  border-radius:2px;
}

.vsource{
  text-align:center;
  margin-top:12px;
  font-size:12px;
  opacity:.75;
}

@media(max-width:640px){
  .vrow.glass{grid-template-columns:1fr;gap:16px;}
  .vdivider{display:none;}
}

/* Increased glow for 2025 SALES VOLUME section */
.vol-2025.glow-bg {
  overflow: hidden; /* Keep overflow hidden to contain glow */
}

.vol-2025.glow-bg::before {
  opacity: 0.65; /* Slightly reduced from 0.75 */
  width: 65%; /* Slightly reduced from 70% */
  height: 55%; /* Slightly reduced from 60% */
  top: 30%; /* Better vertical centering */
  filter: blur(45px); /* Slightly reduced from 50px */
  background: radial-gradient(
    circle at center,
    rgba(108,99,255,.32) 0%, /* Slightly reduced from .40 */
    rgba(108,99,255,.20) 30%, /* Slightly reduced from .25 */
    rgba(108,99,255,.12) 50%, /* Slightly reduced from .15 */
    rgba(108,99,255,.06) 65%, /* Slightly reduced from .08 */
    rgba(11,15,25,1) 78% /* Slightly earlier fade */
  );
}

/* Mobile adjustments for vol-2025 glow */
@media (max-width: 768px) {
  .vol-2025.glow-bg::before {
    width: 70%;
    height: 50%;
    filter: blur(40px);
    opacity: 0.6;
    top: 35%;
  }
}

@media (max-width: 480px) {
  .vol-2025.glow-bg::before {
    width: 75%;
    height: 45%;
    filter: blur(35px);
    opacity: 0.55;
    top: 40%;
  }
}

/* =========================
   TRUSTED DEVELOPERS - HORIZONTAL SCROLL
   ========================= */
/* Reduce section padding for trusted developers */
.dev-scroll-compact {
  padding: var(--s-6) 0 !important; /* Reduced from var(--s-9) which is 72px to var(--s-6) which is 32px */
}

/* Reduce spacing around purple lines near trusted developers section */
section + .purple-line.small,
section + .purple-line.medium {
  margin: 20px auto 20px auto; /* Reduced vertical spacing */
}

/* Further reduce spacing for purple lines around trusted developers */
#trusted-developers + .purple-line.small,
.purple-line.small:has(+ #trusted-developers),
#trusted-developers + .purple-line.medium,
.purple-line.medium:has(+ #trusted-developers) {
  margin: 16px auto; /* Even tighter spacing */
}

.dev-scroll-wrap {
  position: relative;
}

.dev-scroll-container {
  position: relative;
  overflow: hidden;
  margin: 16px 0; /* Reduced from 24px */
  padding: 24px 0; /* Reduced from 32px */
}

/* Scrolling track */
.dev-scroll-track {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  width: fit-content;
  animation: devScroll 80s linear infinite;
  will-change: transform;
}

/* Slow down on hover instead of stopping */
.dev-scroll-container:hover .dev-scroll-track {
  animation-duration: 160s; /* Slower (2x duration = half speed) */
}

/* Developer items - transparent container */
.dev-item {
  flex-shrink: 0;
  width: clamp(140px, 18vw, 200px);
  height: clamp(80px, 12vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.3s ease;
}

.dev-item:hover {
  transform: translateY(-4px);
}

/* Developer logo images */
.dev-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  filter: brightness(0.95) contrast(1.05);
  transition: filter 0.3s ease, transform 0.3s ease;
  opacity: 0.85;
}

.dev-item:hover img {
  filter: brightness(1.1) contrast(1.1);
  transform: scale(1.05);
  opacity: 1;
}

/* Subtext below developer scroll */
.dev-scroll-subtext {
  text-align: center;
  margin-top: 0;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.75;
}

/* Side fade overlays - similar to wall-wrap */
.dev-scroll-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(100px, 15vw, 180px);
  pointer-events: none;
  z-index: 2;
}

.dev-scroll-fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    rgba(5,6,13,0.95) 20%,
    rgba(5,6,13,0.7) 40%,
    rgba(5,6,13,0.3) 60%,
    rgba(5,6,13,0) 100%
  );
}

.dev-scroll-fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg) 0%,
    rgba(5,6,13,0.95) 20%,
    rgba(5,6,13,0.7) 40%,
    rgba(5,6,13,0.3) 60%,
    rgba(5,6,13,0) 100%
  );
}

/* Smooth scrolling animation */
@keyframes devScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Duplicate content for seamless loop */
.dev-scroll-track::after {
  content: '';
  display: none;
}

/* Ensure seamless loop - JavaScript will duplicate items */
.dev-scroll-track.duplicated {
  /* This class is added by JS after duplicating items */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .dev-scroll-container {
    padding: 24px 0;
  }
  
  .dev-scroll-track {
    gap: 20px;
    animation-duration: 60s; /* Slightly faster on mobile but still slow */
  }
  
  .dev-scroll-container:hover .dev-scroll-track {
    animation-duration: 120s; /* Slower on hover for mobile */
  }
  
  .dev-item {
    width: 140px; /* Increased from 120px */
    height: 85px; /* Increased from 70px */
  }
  
  .dev-item img {
    padding: 12px; /* Increased from 10px */
  }
  
  .dev-scroll-fade {
    width: 80px;
  }
}

@media (max-width: 480px) {
  .dev-scroll-container {
    padding: 20px 0;
  }
  
  .dev-scroll-track {
    gap: 16px;
    animation-duration: 50s;
  }
  
  .dev-scroll-container:hover .dev-scroll-track {
    animation-duration: 100s; /* Slower on hover for small mobile */
  }
  
  .dev-item {
    width: 130px; /* Increased from 100px */
    height: 75px; /* Increased from 60px */
  }
  
  .dev-item img {
    padding: 10px; /* Increased from 8px */
  }
  
  .dev-scroll-fade {
    width: 60px;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .dev-scroll-track {
    animation: none;
  }
  
  .dev-item {
    transition: none;
  }
}

/* =========================
   MOBILE TWEAKS
   ========================= */
@media (max-width: 600px){

  /* 1) h1-deco: increased font size */
  h1.h1-deco{
    /* increased from clamp(27px, 3.75vw, 45px) */
    font-size: clamp(22px, 3.2vw, 36px);
  }

  /* 2) h2 (all .h2-deco headings): reduce line gap by ~50% */
  .h2-deco{
    line-height: 1.15; /* tighter than inherited 1.6 */
  }
  
  /* 3) Remove em class text-shadow on mobile */
  .em {
    text-shadow: none !important; /* remove all glow effects from em class */
  }
  
  .h1-deco .em {
    text-shadow: none !important; /* remove all glow effects */
  }
  
  .h1-deco .em-serif {
    text-shadow: none !important; /* remove all glow effects */
  }
  
  .price-big .new {
    text-shadow: 0 0 4px rgba(255,255,255,.12), 0 0 10px rgba(255,255,255,.08); /* reduced from .6/.4 to .12/.08 (80% reduction) */
  }
  
  .tier-card .tier-name {
    text-shadow:
      0 0 2px rgba(255,255,255,.016), /* reduced from .08 to .016 (80% reduction) */
      0 0 1px rgba(255,255,255,.012); /* reduced from .06 to .012 (80% reduction) */
  }
  
  /* 4) Mobile-specific titles for "Different types of agents" */
  .h2-deco .desktop-title {
    display: none; /* hide desktop title on mobile */
  }
  
  .h2-deco .mobile-title {
    display: inline; /* show mobile title */
    font-size: clamp(28px, 5vw, 48px) !important; /* bigger than other h2 headings */
    line-height: 1.2 !important; /* standard line height */
    white-space: nowrap !important; /* prevent wrapping */
  }
  /* ===== MOBILE: Wall becomes 5 horizontal rows stacked vertically ===== */
  /* Grid layout for 5 horizontal rows */
  .wall{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    --row-h: 120px; /* row height */
  }

  .wall-col{
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    height: var(--row-h);
    z-index: 0 !important;
  }

  /* Horizontal scroll track */
  .wall-track{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px;
    animation: wallX 24s linear infinite;
    z-index: 1;
  }

  /* Alternate row directions for variation */
  .wall .wall-col:nth-child(2) .wall-track,
  .wall .wall-col:nth-child(4) .wall-track{
    animation-direction: reverse;
    animation-duration: 26s;
  }

  /* Card styling */
  .wall-card{
    width: 40%;
    min-width: 100px; /* smaller, fits more cards per row */
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    overflow: hidden;
  }

  .wall-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Smooth horizontal scroll loop */
  @keyframes wallX{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ===== LEFT/RIGHT FADES (for proper visual edge glow) ===== */
  /* Override desktop top/bottom fades with left/right fades for mobile */
  .wall .wall-col::before,
  .wall .wall-col::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;                /* fade width */
    z-index: 10;
    pointer-events: none;
    transform: translateZ(0);
    /* Reset desktop styles */
    left: auto;
    right: auto;
    height: auto;
  }

  /* Left fade */
  .wall .wall-col::before{
    left: 0;
    background: linear-gradient(
      to right,
      rgba(5,6,13,1) 0%,
      rgba(5,6,13,0.8) 50%,
      rgba(5,6,13,0) 100%
    );
  }

  /* Right fade */
  .wall .wall-col::after{
    right: 0;
    background: linear-gradient(
      to left,
      rgba(5,6,13,1) 0%,
      rgba(5,6,13,0.8) 50%,
      rgba(5,6,13,0) 100%
    );
  }
}

/* Footer */
.site-footer {
  padding: var(--s-6) 0;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.4);
  transition: opacity 0.2s ease;
  justify-content: center;
}

.footer-brand:hover {
  opacity: 0.7;
}

.footer-brand-img {
  height: 24px;
  width: auto;
  opacity: 0.4;
  filter: brightness(0) invert(1);
}

.footer-brand-text {
  font-family: "Manrope", "Manrope Placeholder", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.4;
  color: rgba(255, 255, 255, 0.4);
}