/* ================================================
   IPTV FRANCE — Pure Black + Electric Orange
   Max-conversion palette (e-commerce tested)
   Fonts: Sora (headings) + Inter (body)
   ================================================ */

:root {
  /* Backgrounds — true black, warm raises */
  --bg-0:  #0f0f0f;
  --bg-1:  #161616;
  --bg-2:  #1c1c1c;
  --bg-card: rgba(255,255,255,0.04);
  --bg-ch:   rgba(255,255,255,0.075);

  /* Primary — Electric Orange (action, impulse) */
  --o:       #ff6b00;
  --od:      #e05500;
  --om:      #ff8c33;
  --og:      rgba(255,107,0,0.28);
  --ob:      rgba(255,107,0,0.4);

  /* Status */
  --green:  #22c55e;
  --gold:   #fbbf24;
  --blue:   #60a5fa;

  /* Text — pure white scale */
  --w100: #ffffff;
  --w80:  rgba(255,255,255,0.82);
  --w50:  rgba(255,255,255,0.50);
  --w28:  rgba(255,255,255,0.28);

  /* Borders */
  --b1: rgba(255,255,255,0.07);
  --b2: rgba(255,255,255,0.14);

  /* Fonts */
  --fh: 'Sora',  -apple-system, sans-serif;
  --fb: 'Inter', -apple-system, sans-serif;

  /* Radii */
  --r1:6px; --r2:10px; --r3:16px; --r4:24px; --rf:9999px;

  /* Shadows */
  --s-o:    0 0 48px rgba(255,107,0,0.24);
  --s-card: 0 16px 56px rgba(0,0,0,0.65);
  --s-btn:  0 4px 22px rgba(255,107,0,0.45);

  /* Motion */
  --t:  0.22s cubic-bezier(.4,0,.2,1);
  --ts: 0.44s cubic-bezier(.4,0,.2,1);

  --py: 108px;
  --cw: 1260px;
}

/* ─── Reset ──────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--fb);background:var(--bg-0);color:var(--w80);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--t)}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}

/* ─── Type ───────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--fh);font-weight:800;
  line-height:1.1;letter-spacing:-.03em;color:var(--w100)
}
h1{font-size:clamp(2.8rem,5.8vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
h4{font-size:1.05rem}
p{color:var(--w80);font-size:1rem;line-height:1.74}

/* ─── Layout ─────────────────────────────────────── */
.container{max-width:var(--cw);margin:0 auto;padding:0 24px}
.section{padding:var(--py) 0;position:relative}
.section-alt{background:var(--bg-1)}
.section-header{text-align:center;max-width:680px;margin:0 auto 60px}
.section-header h2{margin-bottom:14px}
.section-header p{font-size:1.05rem;color:var(--w80)}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;padding:6px 16px;
  background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.3);
  border-radius:var(--rf);color:var(--om);
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:18px;font-family:var(--fb)
}

/* ─── Site Header ────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(15,15,15,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--b1);
  transition:transform .35s ease, box-shadow var(--t)
}
.site-header.header-hidden{
  transform:translateY(-100%)
}
.site-header.scrolled{
  box-shadow:0 2px 12px rgba(0,0,0,.6)
}

/* ─── Announcement Bar ───────────────────────────── */
.announcement-bar{
  background:linear-gradient(90deg,#1c0d00,#261000,#1c0d00);
  border-bottom:1px solid rgba(255,107,0,.2);
  padding:9px 0
}
.ann-show-sm-only{display:none}
.announcement-content{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:.83rem;color:var(--w80);font-family:var(--fb)
}
.announcement-content .icon-pulse{color:var(--o);animation:pulse-icon 2s infinite}
.announcement-content strong{color:var(--w100)}
.ann-old-price{font-size:.78rem;color:var(--w40);text-decoration:line-through;margin-left:2px}
.ann-pct{
  background:#16a34a;color:#fff;font-size:.68rem;font-weight:800;
  padding:1px 6px;border-radius:3px;margin-left:2px
}
.countdown-wrap{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,107,0,.14);border:1px solid rgba(255,107,0,.28);
  border-radius:var(--r1);padding:2px 10px;
  font-size:.76rem;font-weight:700;color:var(--om);font-variant-numeric:tabular-nums
}
.announcement-cta{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--o);color:var(--w100)!important;
  padding:4px 14px;border-radius:var(--rf);
  font-weight:700;font-size:.76rem;transition:var(--t)
}
.announcement-cta:hover{background:var(--od);transform:translateY(-1px)}

/* ─── Navbar ─────────────────────────────────────── */
.navbar{padding:15px 0;transition:padding var(--t)}
.site-header.scrolled .navbar{padding:12px 0}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.navbar-brand img{height:44px;width:auto}
.navbar-nav{display:flex;align-items:center;gap:2px}
.navbar-nav a{
  padding:8px 15px;font-size:.875rem;font-weight:600;
  border-radius:var(--r2);color:var(--w80);transition:var(--t);font-family:var(--fb)
}
.navbar-nav a:hover,.navbar-nav a.active{color:var(--w100);background:rgba(255,255,255,.07)}
.navbar-cta{display:flex;align-items:center;gap:12px}
.navbar-toggle{display:none;flex-direction:column;gap:5px;padding:7px}
.navbar-toggle span{display:block;width:24px;height:2px;background:var(--w100);border-radius:2px;transition:var(--t)}

/* ─── Mobile Menu ────────────────────────────────── */
.mobile-menu{
  position:fixed;inset:0;background:var(--bg-0);z-index:999;
  display:flex;flex-direction:column;padding:100px 28px 40px;
  transform:translateX(100%);transition:transform var(--ts);
  border-left:1px solid var(--b1)
}
.mobile-menu.active{transform:translateX(0)}
.mobile-menu a{
  padding:17px 0;font-size:1.15rem;font-weight:700;
  color:var(--w100);border-bottom:1px solid var(--b1);font-family:var(--fh)
}
.mobile-menu .btn{margin-top:26px}
.mobile-menu a.btn{color:var(--w100);border-bottom:none}

/* ─── Buttons ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-size:.9rem;font-weight:700;
  border-radius:var(--r2);transition:var(--t);white-space:nowrap;
  letter-spacing:.01em;font-family:var(--fb)
}
/* — Primary: orange — */
.btn-primary{
  background:linear-gradient(135deg,var(--o),var(--od));
  color:var(--w100);box-shadow:var(--s-btn)
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(255,107,0,.65)}
.btn-primary:active{transform:translateY(0)}
/* — Ghost white — */
.btn-secondary{
  background:rgba(255,255,255,.07);color:var(--w100);
  border:1px solid var(--b2);backdrop-filter:blur(10px)
}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
/* — Outline — */
.btn-outline{background:transparent;color:var(--w80);border:1.5px solid var(--b2)}
.btn-outline:hover{border-color:var(--o);color:var(--w100);background:rgba(255,107,0,.07)}
/* — Sizes — */
.btn-sm{padding:9px 18px;font-size:.82rem}
.btn-lg{padding:17px 38px;font-size:1rem}
.btn-xl{padding:20px 46px;font-size:1.1rem}

/* ─── Hero ───────────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  background:#0a0500
}
.hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.38}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(10,5,0,.55) 0%, transparent 40%, rgba(10,5,0,.7) 100%),
    linear-gradient(to right, rgba(10,5,0,.85) 0%, rgba(10,5,0,.3) 50%, rgba(10,5,0,.6) 100%)
}
/* orange accent glow */
.hero::before{
  content:'';position:absolute;top:10%;left:5%;
  width:500px;height:500px;z-index:1;
  background:radial-gradient(ellipse at center,rgba(255,107,0,.22) 0%,transparent 65%);
  pointer-events:none
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:220px;z-index:1;
  background:linear-gradient(to top,rgba(10,5,0,1) 0%,transparent 100%);
  pointer-events:none
}
.hero .container{position:relative;z-index:3}
.hero-content{max-width:760px;margin:0 auto;text-align:center}

.hero-live{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18);
  border-radius:var(--rf);font-size:.7rem;font-weight:500;
  color:rgba(34,197,94,.80);margin:0 auto 12px;font-family:var(--fb);letter-spacing:.01em
}
.live-dot{
  width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0;
  animation:live-pulse 2s infinite
}

.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.20);
  border-radius:var(--rf);color:rgba(255,140,51,.85);
  font-size:.7rem;font-weight:600;margin:0 auto 20px;font-family:var(--fb);letter-spacing:.01em
}
.hero-badge i{font-size:.65rem;animation:pulse-icon 2.5s infinite}

.hero h1{
  font-size:clamp(2.3rem,4.6vw,4rem);margin-bottom:20px;
  color:var(--w100);line-height:1.15;
  animation:fadeUp .7s ease .1s both
}
/* gradient text on key word */
.hero h1 span{
  background:linear-gradient(130deg,#ff6b00 0%,#ffb347 45%,#ff6b00 100%);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 4s linear infinite
}
.hero-text{
  font-size:1.05rem;color:var(--w80);margin-bottom:32px;
  line-height:1.76;max-width:520px;margin-left:auto;margin-right:auto;
  animation:fadeUp .7s ease .2s both
}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;justify-content:center;animation:fadeUp .7s ease .3s both}
.hero-trust{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:44px;justify-content:center;animation:fadeUp .7s ease .4s both}
.hero-trust span{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--w80);font-weight:500;font-family:var(--fb)}
.hero-trust span i{color:var(--green);font-size:.82rem}
.hero-channels{display:flex;flex-direction:column;gap:10px;animation:fadeUp .7s ease .5s both}
.hero-channels-label{font-size:.71rem;color:var(--w50);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-family:var(--fb)}
.hero-channels-logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.channel-logo{height:26px;width:auto;opacity:.45;filter:brightness(0)invert(1);transition:var(--t)}
.channel-logo:hover{opacity:.85;transform:scale(1.06)}

/* ─── Stats ──────────────────────────────────────── */
.stats{
  background:var(--bg-1);padding:48px 0;
  border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{text-align:center;padding:16px 20px;position:relative}
.stat-item+.stat-item::before{content:'';position:absolute;left:0;top:15%;height:70%;width:1px;background:var(--b1)}
.stat-value{
  font-family:var(--fh);font-size:2.8rem;font-weight:800;
  color:var(--w100);line-height:1;margin-bottom:7px
}
.stat-value span{color:var(--o)}
.stat-label{color:var(--w50);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-family:var(--fb)}

/* ─── Features ───────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{
  background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r3);
  padding:32px 26px;transition:var(--t);position:relative;overflow:hidden
}
.feature-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--o),transparent);
  transform:scaleX(0);transition:var(--t)
}
.feature-card:hover{background:var(--bg-ch);border-color:rgba(255,107,0,.22);transform:translateY(-3px)}
.feature-card:hover::after{transform:scaleX(1)}
.feature-icon{
  width:50px;height:50px;background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.2);
  border-radius:var(--r2);display:flex;align-items:center;justify-content:center;margin-bottom:18px
}
.feature-icon i{font-size:1.3rem;color:var(--o)}
.feature-card h3{font-size:1.02rem;margin-bottom:8px;color:var(--w100);font-weight:700}
.feature-card p{font-size:.875rem;color:var(--w80);line-height:1.72}

/* ─── Promo Flash Banner ─────────────────────────── */
.promo-flash{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  background:linear-gradient(135deg,rgba(255,107,0,.12) 0%,rgba(255,107,0,.05) 100%);
  border:1px solid rgba(255,107,0,.45);border-radius:var(--r3);
  padding:28px 36px;margin-bottom:32px;position:relative;overflow:hidden
}
.promo-flash::before{
  content:'';position:absolute;top:-60%;right:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,107,0,.15) 0%,transparent 65%);
  pointer-events:none
}
.promo-flash-left{display:flex;flex-direction:column;gap:8px}
.promo-flash-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--o);color:var(--w100);
  padding:4px 12px;border-radius:var(--rf);
  font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;font-family:var(--fb);width:fit-content;
  animation:pulse-icon 2s infinite
}
.promo-flash-title{
  font-family:var(--fh);font-size:1.25rem;font-weight:800;
  color:var(--w100);line-height:1.2
}
.promo-flash-sub{font-size:.85rem;color:var(--w80);font-family:var(--fb)}
.promo-flash-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0
}
.promo-flash-price{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.promo-old{font-size:.9rem;color:var(--w50);text-decoration:line-through;font-family:var(--fb)}
.promo-new{
  font-family:var(--fh);font-size:3rem;font-weight:800;
  color:var(--o);line-height:1
}
.promo-new sup{font-size:1.2rem;vertical-align:super}
.promo-month{font-size:.78rem;color:var(--w50);font-family:var(--fb)}
.promo-flash-timer{
  font-size:.8rem;color:var(--w80);font-family:var(--fb);
  display:flex;align-items:center;gap:5px
}
.promo-flash-timer i{color:var(--o)}
.promo-flash-timer strong{color:var(--o);font-variant-numeric:tabular-nums;font-size:.88rem}
@media(max-width:768px){
  .promo-flash{flex-direction:column;padding:22px 20px;text-align:center}
  .promo-flash-right{align-items:center;width:100%}
  .promo-flash-right .btn{width:100%;justify-content:center}
  .promo-old{font-size:.82rem}
  .promo-new{font-size:2.4rem}
}

/* ─── Pricing ────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.pricing-grid--3{grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto;gap:28px;align-items:center}

/* Plan title (screen count) */
.pricing-screens{
  font-size:1.05rem;font-weight:700;font-family:var(--fh);
  color:var(--w100);margin-bottom:4px;letter-spacing:0;text-transform:none
}
.pricing-screens i{font-size:.9rem;color:var(--o);margin-right:3px}

/* Base card */
.pricing-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:40px 32px 32px;
  text-align:center;transition:var(--t);position:relative;
  box-shadow:0 4px 24px rgba(0,0,0,0.3)
}
.pricing-card:not(.featured):hover{
  border-color:rgba(255,107,0,.25);
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,0.4)
}

/* Featured card */
.pricing-card.featured{
  background:linear-gradient(160deg,rgba(255,107,0,.12) 0%,rgba(255,107,0,.04) 100%);
  border-color:rgba(255,107,0,.55);
  box-shadow:0 0 0 1px rgba(255,107,0,.2), 0 24px 64px rgba(255,107,0,.18);
  transform:translateY(-10px) scale(1.03);
  padding:48px 36px 36px
}
.pricing-card.featured:hover{
  transform:translateY(-16px) scale(1.03);
  box-shadow:0 0 0 1px rgba(255,107,0,.3), 0 32px 80px rgba(255,107,0,.26)
}
.pricing-card.featured::before{
  content:'⭐ MEILLEURE OFFRE';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--o),var(--od));color:#fff;
  padding:5px 18px;border-radius:var(--rf);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;white-space:nowrap;font-family:var(--fb)
}

/* Badges */
.pricing-save-badge{
  display:inline-block;background:rgba(255,107,0,.1);color:var(--om);
  border:1px solid rgba(255,107,0,.22);border-radius:var(--rf);
  padding:3px 12px;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:14px;font-family:var(--fb)
}
.pricing-save-badge--featured{background:rgba(255,107,0,.22);color:#ffb366;border-color:rgba(255,107,0,.4)}

/* Duration label */
.pricing-duration{
  font-size:.7rem;color:var(--w28);text-transform:uppercase;
  letter-spacing:.16em;font-weight:700;margin-bottom:20px;font-family:var(--fb)
}

/* Price display */
.pricing-original{font-size:.82rem;color:var(--w28);text-decoration:line-through;margin-bottom:2px}
.pricing-price{margin-bottom:4px;line-height:1}
.pricing-price .currency{
  font-size:1.2rem;color:var(--w80);vertical-align:top;
  margin-top:10px;display:inline-block;font-family:var(--fb);font-weight:600
}
.pricing-price .amount{
  font-family:var(--fh);font-size:2.9rem;font-weight:800;
  color:var(--w100);line-height:1
}
.pricing-card.featured .pricing-price .amount{
  font-size:3.3rem;
  background:linear-gradient(130deg,#ff8c33,#ff6b00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.pricing-price .period{font-size:.82rem;color:var(--w50);font-family:var(--fb)}
.pricing-per-month{
  font-size:.78rem;color:var(--w50);margin-bottom:28px;
  font-family:var(--fb);letter-spacing:.01em
}
.pricing-card.featured .pricing-per-month{color:var(--om);font-weight:600}

/* Feature list */
.pricing-features{margin-bottom:28px;text-align:left}
.pricing-features li{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  font-size:.88rem;color:var(--w80);
  border-bottom:1px solid rgba(255,255,255,.05);font-family:var(--fb)
}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li i{color:var(--green);font-size:.82rem;flex-shrink:0}

/* CTA button */
.pricing-card .btn{width:100%;padding:14px 20px;font-size:.92rem}
.pricing-card.featured .btn{
  background:linear-gradient(135deg,var(--o),var(--od));
  box-shadow:0 6px 24px rgba(255,107,0,.35);
  font-size:.95rem;font-weight:700
}

/* Instant activation */
.pricing-instant{
  margin-top:12px;font-size:.72rem;color:var(--w50);
  display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--fb)
}
.pricing-instant i{color:var(--green)}

/* ─── Steps ──────────────────────────────────────── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;position:relative}
.steps-grid::before{
  content:'';position:absolute;top:52px;
  left:calc(16.66% + 32px);right:calc(16.66% + 32px);
  height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,0,.4),rgba(255,107,0,.4),transparent)
}
.step-card{text-align:center}
.step-number{
  width:66px;height:66px;
  background:linear-gradient(135deg,var(--o),var(--od));
  border-radius:var(--rf);display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:1.6rem;font-weight:800;color:var(--w100);
  margin:0 auto 20px;box-shadow:0 0 28px rgba(255,107,0,.38)
}
.step-card h3{font-size:1.02rem;margin-bottom:8px;color:var(--w100)}
.step-card p{font-size:.875rem;color:var(--w80)}

/* ─── Testimonials ───────────────────────────────── */
.testimonials-aggregate{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:44px;flex-wrap:wrap
}
.agg-score{
  font-family:var(--fh);font-size:5rem;font-weight:800;
  color:var(--w100);line-height:1
}
.agg-details{display:flex;flex-direction:column;gap:6px}
.agg-stars{display:flex;gap:3px}
.agg-stars i{color:var(--gold);font-size:1.1rem}
.agg-count{font-size:.82rem;color:var(--w80);font-family:var(--fb)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testimonial-card{
  background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r3);
  padding:24px;transition:var(--t)
}
.testimonial-card:hover{border-color:var(--b2);background:var(--bg-ch)}
.testimonial-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.testimonial-stars{display:flex;gap:3px}
.testimonial-stars i{color:var(--gold);font-size:.9rem}
.testimonial-verified{
  display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;
  color:var(--green);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);
  padding:2px 8px;border-radius:var(--rf);font-family:var(--fb)
}
.testimonial-text{font-size:.875rem;color:var(--w80);line-height:1.75;margin-bottom:18px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{
  width:40px;height:40px;border-radius:var(--rf);
  background:linear-gradient(135deg,var(--o),var(--od));
  color:var(--w100);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.88rem;flex-shrink:0;font-family:var(--fh)
}
.testimonial-info h4{font-family:var(--fb);font-size:.85rem;font-weight:700;color:var(--w100);margin-bottom:2px}
.testimonial-info span{font-size:.74rem;color:var(--w50);font-family:var(--fb)}

/* ─── FAQ ────────────────────────────────────────── */
.faq-list{max-width:740px;margin:0 auto}
.faq-item{
  background:var(--bg-card);border:1px solid var(--b1);
  border-radius:var(--r2);margin-bottom:9px;overflow:hidden;transition:var(--t)
}
.faq-item:hover{border-color:var(--b2)}
.faq-item.active{border-color:rgba(255,107,0,.35)}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:19px 22px;background:transparent;color:var(--w100);
  font-size:.94rem;font-weight:600;text-align:left;font-family:var(--fb)
}
.faq-question i{font-size:.9rem;transition:var(--t);color:var(--w50);flex-shrink:0}
.faq-item.active .faq-question i{transform:rotate(180deg);color:var(--o)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.active .faq-answer{max-height:500px}
.faq-answer-content{padding:0 22px 19px;color:var(--w80);font-size:.9rem;line-height:1.8;font-family:var(--fb)}

/* ─── Guarantee Strip ────────────────────────────── */
.guarantee-strip{
  background:var(--bg-1);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);padding:40px 0
}
.guarantee-grid{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.guarantee-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.guarantee-item>i{font-size:1.75rem;color:var(--o)}
.guarantee-item div{display:flex;flex-direction:column;gap:3px;align-items:center}
.guarantee-item strong{font-size:.85rem;font-weight:700;color:var(--w100);font-family:var(--fb)}
.guarantee-item span{font-size:.76rem;color:var(--w50);font-family:var(--fb)}

/* ─── CTA ────────────────────────────────────────── */
.cta{
  padding:96px 0;text-align:center;position:relative;overflow:hidden;background:var(--bg-0)
}
.cta::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(255,107,0,.1) 0%,transparent 65%);
  pointer-events:none
}
.cta-content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta h2{margin-bottom:14px}
.cta p{font-size:1.05rem;margin-bottom:32px;color:var(--w80)}
.cta-buttons{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}

/* ─── Footer ─────────────────────────────────────── */
.footer{background:var(--bg-1);border-top:1px solid var(--b1);padding-top:72px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.footer-brand p{margin-top:14px;font-size:.85rem;color:var(--w50);max-width:260px;line-height:1.7;font-family:var(--fb)}
.footer-brand img{height:46px;width:auto}
.footer-social{display:flex;gap:8px;margin-top:18px}
.footer-social a{
  width:36px;height:36px;background:var(--bg-card);border:1px solid var(--b1);
  border-radius:var(--rf);display:flex;align-items:center;justify-content:center;
  color:var(--w50);font-size:.85rem;transition:var(--t)
}
.footer-social a:hover{background:var(--o);border-color:var(--o);color:var(--w100)}
.footer-column h4{font-family:var(--fb);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--w100);margin-bottom:18px}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:.85rem;color:var(--w50);transition:var(--t);font-family:var(--fb)}
.footer-links a:hover{color:var(--w100)}
.footer-contact li{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--w50);font-size:.85rem;font-family:var(--fb)}
.footer-contact li i{color:var(--o);font-size:.9rem;width:16px}
.footer-bottom{border-top:1px solid var(--b1);padding:18px 0;display:flex;flex-direction:column;gap:13px;align-items:center}
.footer-bottom p{font-size:.78rem;color:var(--w50);font-family:var(--fb)}
.footer-payment{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.footer-payment span{font-size:.76rem;color:var(--w50);font-family:var(--fb)}
.footer-payment-icons{display:flex;align-items:center;gap:10px}
.footer-payment-icons img{height:22px;width:auto;opacity:.75;border-radius:4px;transition:var(--t)}
.footer-payment-icons img:hover{opacity:1;transform:translateY(-2px)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-size:.76rem;color:var(--w50);transition:var(--t);font-family:var(--fb)}
.footer-legal a:hover{color:var(--w80)}

/* ─── Page Header ────────────────────────────────── */
.page-header{
  padding:150px 0 72px;
  background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(255,107,0,.1) 0%,transparent 65%),var(--bg-1);
  text-align:center;position:relative;border-bottom:1px solid var(--b1)
}
.page-header h1{margin-bottom:12px}
.page-header p{font-size:1.05rem;max-width:520px;margin:0 auto;color:var(--w80)}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;font-size:.82rem;color:var(--w50);font-family:var(--fb)}
.breadcrumb a{color:var(--w80)}
.breadcrumb a:hover{color:var(--w100)}
.breadcrumb span{color:var(--w28)}

/* ─── WhatsApp Float ─────────────────────────────── */
.whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:998}
@media(max-width:768px){.whatsapp-float{bottom:20px;right:10px}}
.whatsapp-float a{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;background:#25d366;border-radius:var(--rf);
  box-shadow:0 8px 28px rgba(37,211,102,.35);transition:var(--t)
}
.whatsapp-float a:hover{transform:scale(1.08);box-shadow:0 12px 36px rgba(37,211,102,.5)}
.whatsapp-float i{font-size:1.8rem;color:var(--w100)}


/* ─── Social Toast ───────────────────────────────── */
.social-toast{
  position:fixed;bottom:24px;left:24px;z-index:996;
  background:rgba(22,22,22,.97);border:1px solid var(--b1);border-radius:var(--r3);
  padding:12px 15px;display:flex;align-items:center;gap:12px;max-width:290px;
  box-shadow:var(--s-card);
  transform:translateX(-130%);transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(16px)
}
.social-toast.show{transform:translateX(0)}
.toast-avatar{
  width:36px;height:36px;background:linear-gradient(135deg,var(--o),var(--od));
  border-radius:var(--rf);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.8rem;color:var(--w100);flex-shrink:0;font-family:var(--fh)
}
.toast-content strong{display:block;font-size:.8rem;color:var(--w100);margin-bottom:2px;font-family:var(--fh)}
.toast-content span{font-size:.74rem;color:var(--w80);font-family:var(--fb)}
.toast-time{font-size:.68rem;color:var(--w50);white-space:nowrap;font-family:var(--fb)}

/* ─── Blog ───────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r3);overflow:hidden;transition:var(--t)}
.blog-card:hover{transform:translateY(-4px);border-color:var(--b2);box-shadow:var(--s-card)}
.blog-card-image{aspect-ratio:16/10;overflow:hidden}
.blog-card-image img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform var(--ts)}
.blog-card:hover .blog-card-image img{transform:scale(1.05);opacity:1}
.blog-card-content{padding:18px}
.blog-card-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:.74rem;color:var(--w50);font-family:var(--fb)}
.blog-card-meta span{display:flex;align-items:center;gap:4px}
.blog-card h3{font-size:.97rem;margin-bottom:8px;line-height:1.4;font-weight:700}
.blog-card h3 a{color:var(--w100);transition:var(--t)}
.blog-card h3 a:hover{color:var(--o)}
.blog-card p{font-size:.84rem;color:var(--w80);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--fb)}
.blog-card .read-more{color:var(--o);font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:6px;transition:var(--t);font-family:var(--fb)}
.blog-card .read-more:hover{gap:11px}

/* ─── Blog Detail ────────────────────────────────── */
.blog-detail{padding:72px 0}
.blog-detail-container{max-width:820px;margin:0 auto}
.blog-detail-header{text-align:center;margin-bottom:32px}
.blog-detail-header h1{font-size:2.3rem;margin-bottom:14px}
.blog-detail-meta{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--w50);font-size:.88rem;font-family:var(--fb)}
.blog-detail-image{border-radius:var(--r3);overflow:hidden;margin-bottom:32px;border:1px solid var(--b1)}
.blog-detail-image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-detail-content{color:var(--w80);font-size:1.02rem;line-height:1.88;font-family:var(--fb)}
.blog-detail-content h2{font-size:1.55rem;margin:32px 0 14px;color:var(--w100)}
.blog-detail-content h3{font-size:1.2rem;margin:24px 0 12px;color:var(--w100)}
.blog-detail-content p{color:var(--w80);margin-bottom:17px}
.blog-detail-content ul,.blog-detail-content ol{margin:15px 0;padding-left:20px}
.blog-detail-content li{margin-bottom:9px;list-style:disc;color:var(--w80)}
.blog-detail-content ol li{list-style:decimal}

/* ─── Tutorials ──────────────────────────────────── */
.tutorials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tutorial-card{background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r3);padding:24px 18px;text-align:center;transition:var(--t)}
.tutorial-card:hover{transform:translateY(-4px);border-color:rgba(255,107,0,.22)}
.tutorial-icon{width:64px;height:64px;background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.2);border-radius:var(--r3);display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.tutorial-icon i{font-size:2rem;color:var(--o)}
.tutorial-card h3{font-size:.95rem;margin-bottom:8px;color:var(--w100);font-weight:700}
.tutorial-card p{font-size:.83rem;color:var(--w80);margin-bottom:14px;font-family:var(--fb)}

/* ─── Contact ────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-info,.contact-form-wrapper{background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r4);padding:38px}
.contact-info h3,.contact-form-wrapper h3{font-size:1.3rem;margin-bottom:11px;color:var(--w100)}
.contact-info>p{margin-bottom:24px;color:var(--w80)}
.contact-form-wrapper h3{margin-bottom:24px}
.contact-methods{display:flex;flex-direction:column;gap:18px}
.contact-method{display:flex;align-items:center;gap:14px}
.contact-method-icon{width:46px;height:46px;background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.2);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-method-icon i{font-size:1.25rem;color:var(--o)}
.contact-method-text h4{font-family:var(--fb);font-size:.9rem;font-weight:700;margin-bottom:2px;color:var(--w100)}
.contact-method-text p,.contact-method-text a{color:var(--w80);font-size:.85rem;font-family:var(--fb)}
.contact-method-text a:hover{color:var(--o)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--w80);margin-bottom:6px;font-family:var(--fb)}
.form-control{width:100%;padding:12px 15px;background:rgba(255,255,255,.04);border:1px solid var(--b1);border-radius:var(--r2);color:var(--w100);font-size:.9rem;transition:var(--t);font-family:var(--fb)}
.form-control::placeholder{color:var(--w28)}
.form-control:focus{outline:none;border-color:rgba(255,107,0,.4);background:rgba(255,107,0,.04);box-shadow:0 0 0 3px rgba(255,107,0,.1)}
textarea.form-control{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ─── Reseller ───────────────────────────────────── */
.reseller-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:52px}
.reseller-benefit{background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r3);padding:26px;text-align:center;transition:var(--t)}
.reseller-benefit:hover{border-color:rgba(255,107,0,.22);transform:translateY(-3px)}
.reseller-benefit-icon{width:60px;height:60px;background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.2);border-radius:var(--rf);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.reseller-benefit-icon i{font-size:1.7rem;color:var(--o)}
.reseller-benefit h3{font-size:1rem;margin-bottom:8px;color:var(--w100)}
.reseller-benefit p{font-size:.84rem;color:var(--w80);font-family:var(--fb)}
.reseller-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.reseller-plan{background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r4);padding:32px 24px;text-align:center;transition:var(--t)}
.reseller-plan.featured{border-color:rgba(255,107,0,.4);box-shadow:0 0 40px rgba(255,107,0,.14)}
.reseller-plan:hover{transform:translateY(-4px);box-shadow:var(--s-card)}
.reseller-plan h3{font-size:1.15rem;margin-bottom:5px;color:var(--w100)}
.reseller-plan .credits{color:var(--o);font-size:.84rem;font-weight:700;margin-bottom:18px;font-family:var(--fb)}
.reseller-plan .price{font-family:var(--fh);font-size:2.8rem;font-weight:800;margin-bottom:18px;color:var(--w100)}
.reseller-plan .price span{font-size:.95rem;color:var(--w50);font-family:var(--fb)}
.reseller-plan ul{text-align:left;margin-bottom:24px}
.reseller-plan ul li{display:flex;align-items:center;gap:9px;padding:7px 0;color:var(--w80);font-size:.86rem;border-bottom:1px solid var(--b1);font-family:var(--fb)}
.reseller-plan ul li:last-child{border-bottom:none}
.reseller-plan ul li i{color:var(--green)}

/* ─── Pagination ─────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:48px}
.pagination a,.pagination span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--b1);border-radius:var(--r1);color:var(--w80);font-size:.87rem;font-weight:600;transition:var(--t);font-family:var(--fb)}
.pagination a:hover,.pagination span.active{background:var(--o);border-color:var(--o);color:var(--w100)}

/* ─── Scroll Reveal ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── Animations ─────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes pulse-icon{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.9)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ─── Responsive ─────────────────────────────────── */
/* ── 1200px ── */
@media(max-width:1200px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid--3{grid-template-columns:repeat(3,1fr);gap:16px}
  .pricing-price .amount{font-size:2.7rem}
  .pricing-card.featured .pricing-price .amount{font-size:3rem}
  .tutorials-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── 1024px ── */
@media(max-width:1024px){
  :root{--py:74px}
  .navbar-nav{display:none}
  .navbar-toggle{display:flex}
  .navbar-brand img{height:38px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .reseller-benefits,.reseller-pricing{grid-template-columns:repeat(2,1fr)}
  .guarantee-grid{gap:28px}
  .pricing-grid--3{grid-template-columns:repeat(3,1fr);gap:14px}
  .pricing-card{padding:28px 18px 24px}
  .pricing-card.featured{transform:translateY(-6px) scale(1.01);padding:36px 22px 28px}
  .pricing-card.featured:hover{transform:translateY(-10px) scale(1.01)}
}

/* ── 768px ── */
@media(max-width:768px){
  :root{--py:56px}

  /* Header */
  .announcement-bar{padding:8px 0}
  .announcement-content{font-size:.74rem;gap:7px;flex-wrap:wrap;justify-content:center;padding:0 8px}
  .ann-hide-sm{display:inline!important}
  .ann-show-sm-only{display:none!important}
  .ann-old-price,.ann-pct{display:none}
  .countdown-wrap{font-size:.72rem;padding:2px 8px}
  .announcement-cta{padding:4px 10px;font-size:.72rem}
  .navbar{padding:10px 0}
  .navbar-brand img{height:34px}
  .navbar-cta .btn-primary{font-size:.78rem;padding:8px 14px}
  .mobile-menu{padding-top:130px}

  /* Hero */
  .hero{padding:160px 0 64px!important}
  .hero-buttons{flex-direction:column;align-items:center}
  .hero-buttons .btn{width:100%;max-width:360px;justify-content:center}
  .hero-trust{gap:10px}

  /* Grids */
  .features-grid,.steps-grid,.testimonials-grid,.blog-grid,.tutorials-grid,.reseller-benefits,.reseller-pricing{grid-template-columns:1fr}
  .pricing-grid,.pricing-grid--3{grid-template-columns:1fr;gap:16px;max-width:420px;margin:0 auto}
  .pricing-card.featured{transform:none;padding:36px 24px 28px}
  .pricing-card.featured:hover{transform:translateY(-4px)}
  .pricing-price .amount{font-size:2.8rem}
  .pricing-card.featured .pricing-price .amount{font-size:3.1rem}

  .steps-grid::before{display:none}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:11px;text-align:center}
  .footer-payment,.footer-payment-icons{justify-content:center}
  .footer-payment{flex-direction:column;gap:8px}
  .form-row{grid-template-columns:1fr}
  .cta-buttons{flex-direction:column;align-items:center}
  .stat-value{font-size:2.4rem}
  .social-toast{left:10px;right:auto;max-width:260px;padding:10px 12px;gap:10px}
  .toast-content strong{font-size:.75rem}
  .toast-content span{font-size:.7rem;white-space:normal}
  .toast-time{display:none}
  .agg-score{font-size:3.5rem}
}

/* ── 480px ── */
@media(max-width:480px){
  .container{padding:0 14px}
  .btn{padding:12px 18px;font-size:.86rem}
  .section-header{margin-bottom:32px}
  .feature-card,.contact-info,.contact-form-wrapper{padding:18px 14px}
  .pricing-card{padding:24px 18px 20px}
  .pricing-card.featured{padding:28px 20px 22px}
  .stat-item+.stat-item::before{display:none}
  .announcement-content{gap:6px;font-size:.72rem}
  .announcement-cta{padding:4px 10px;font-size:.7rem}
  .navbar-brand img{height:30px}
  .mobile-menu{padding-top:120px}
  .hero{padding:150px 0 56px!important}
}

/* ─── Scrollbar / Selection ──────────────────────── */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
::selection{background:var(--o);color:var(--w100)}
:focus-visible{outline:2px solid var(--o);outline-offset:2px}
/* ─── SEO Editorial ──────────────────────────────── */
.seo-editorial-inner{max-width:960px;margin:0 auto}
.seo-editorial-inner>h2{
  font-family:var(--fh);font-size:1.6rem;font-weight:800;color:var(--w100);
  text-align:center;margin-bottom:36px;line-height:1.25
}
.seo-editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.seo-col h3{
  font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--o);
  margin:0 0 10px;line-height:1.3
}
.seo-col p{
  font-family:var(--fb);font-size:.9rem;color:var(--w70);line-height:1.75;
  margin:0 0 28px
}
.seo-col p strong{color:var(--w90)}
.seo-col p em{color:var(--w80);font-style:normal}
@media(max-width:768px){
  .seo-editorial-grid{grid-template-columns:1fr}
  .seo-editorial-inner>h2{font-size:1.3rem}
}

@media print{.site-header,.footer,.social-toast{display:none}body{background:white;color:black}}

/* ─── Premium Touch ──────────────────────────────── */
:root {
  --gold-light: #f5d47a;
  --gold-mid:   #e4a820;
  --gold-dark:  #b8820e;
  --gold-glow:  rgba(228,168,32,.28);
  --gold-tint:  rgba(228,168,32,.08);
}

/* Premium body texture — ultra-subtle noise grain */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
  opacity:1
}

/* Section header — refined gold-orange accent rule */
.section-header::after{
  content:'';display:block;width:56px;height:3px;margin:18px auto 0;
  background:linear-gradient(90deg,var(--gold-mid),var(--o));border-radius:2px
}

/* Hero title — more refined gradient treatment */
.hero h1 span{
  background:linear-gradient(130deg,#ffd580 0%,#ff8c33 40%,#ff6b00 70%,#e05500 100%);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 5s linear infinite
}

/* Eyebrow — gold-premium variant */
.eyebrow-premium{
  background:linear-gradient(135deg,rgba(228,168,32,.12),rgba(255,107,0,.12));
  border:1px solid rgba(228,168,32,.35);color:var(--gold-light)
}

/* Featured pricing card — premium gold ring + shine */
.pricing-card.featured{
  border-color:rgba(228,168,32,.45);
  box-shadow:0 0 0 1px rgba(228,168,32,.18),0 28px 72px rgba(228,168,32,.12),0 8px 32px rgba(255,107,0,.18);
}
.pricing-card.featured::before{
  background:linear-gradient(135deg,var(--gold-mid),var(--o),var(--gold-dark));
  content:'✦ MEILLEURE OFFRE'
}
/* Gold shimmer sweep on featured card */
.pricing-card.featured::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(245,212,122,.06) 50%,transparent 60%);
  background-size:200% 100%;
  animation:card-shine 4s ease-in-out infinite
}
@keyframes card-shine{
  0%{background-position:200% 0}
  60%,100%{background-position:-200% 0}
}

/* Featured price — gold gradient */
.pricing-card.featured .pricing-price .amount{
  background:linear-gradient(130deg,var(--gold-light) 0%,#ff9940 50%,var(--gold-mid) 100%);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 5s linear infinite
}

/* Primary CTA — gloss overlay */
.btn-primary{
  background:linear-gradient(135deg,#ff8533 0%,var(--o) 50%,var(--od) 100%);
  position:relative;overflow:hidden
}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg);
  animation:btn-gloss 3.5s ease-in-out infinite
}
@keyframes btn-gloss{
  0%,100%{left:-75%}60%{left:130%}
}

/* Feature cards — premium hover glow */
.feature-card:hover{
  box-shadow:0 8px 40px rgba(255,107,0,.12);
  border-color:rgba(228,168,32,.2)
}

/* Feature icon — premium ring */
.feature-icon{
  box-shadow:0 0 0 4px rgba(255,107,0,.06)
}

/* Stats — gold value highlight */
.stat-value{
  background:linear-gradient(135deg,var(--w100) 40%,rgba(245,212,122,.8) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.stat-value span{-webkit-text-fill-color:var(--o)}

/* Guarantee strip — gold icon accent */
.guarantee-item>i{
  background:linear-gradient(135deg,var(--o),var(--gold-mid));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 8px var(--gold-glow))
}

/* Testimonial card — subtle gold star glow */
.testimonial-stars i{
  filter:drop-shadow(0 1px 3px rgba(251,191,36,.4))
}

/* CTA section — premium radial */
.cta::before{
  background:radial-gradient(circle,rgba(228,168,32,.08) 0%,rgba(255,107,0,.08) 40%,transparent 65%)
}

/* Step numbers — gold shimmer */
.step-number{
  background:linear-gradient(135deg,var(--o) 0%,var(--od) 60%,var(--gold-dark) 100%);
  box-shadow:0 0 32px rgba(228,168,32,.22),0 0 16px rgba(255,107,0,.3)
}

/* Section titles — subtle letter-spacing refinement */
h2{letter-spacing:-.035em}

/* Section badge labels — premium pill */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 16px;
  background:linear-gradient(135deg,rgba(228,168,32,.1),rgba(255,107,0,.08));
  border:1px solid rgba(228,168,32,.28);border-radius:var(--rf);
  color:var(--gold-light);font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;font-family:var(--fb);
  margin-bottom:14px
}
.badge i{font-size:.68rem}

/* Hero badge — gold shimmer */
.hero-badge{
  background:linear-gradient(135deg,rgba(228,168,32,.12),rgba(255,107,0,.06));
  border-color:rgba(228,168,32,.3);color:var(--gold-light)
}

/* Premium "exclusivité" micro-label for featured plan */
.pricing-exclusive-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,rgba(228,168,32,.15),rgba(228,168,32,.05));
  border:1px solid rgba(228,168,32,.3);color:var(--gold-light);
  padding:3px 10px;border-radius:var(--rf);
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--fb);margin-bottom:10px
}

/* Announcement bar — premium gold highlight */
.announcement-bar{
  background:linear-gradient(90deg,#110800,#1c1000,#110800);
  border-bottom:1px solid rgba(228,168,32,.15)
}

/* Scrollbar — gold tint */
::-webkit-scrollbar-thumb{background:rgba(228,168,32,.14)}
::-webkit-scrollbar-thumb:hover{background:rgba(228,168,32,.26)}

/* add .hero-grid as a real element */
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 20% 50%,black 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 80% at 20% 50%,black 0%,transparent 70%)}