/* =====================================================================
   Smarters Pro IPTV — smartersproiptv.online
   Master stylesheet — LIGHT theme (white bg, violet/blue accents)
   Palette: violet #7c3aed → blue #2563eb on white · WhatsApp green #25d366
   Font: Poppins
   ===================================================================== */

/* ----------  Design tokens  ---------- */
:root{
  --bg:#ffffff;
  --bg-2:#f4f7fe;
  --bg-3:#eaf1fb;
  --surface:#ffffff;
  --surface-2:#f7f9fd;
  --line:rgba(15,30,61,.10);
  --line-2:rgba(15,30,61,.15);

  --violet:#7c3aed;
  --violet-2:#6d28d9;
  --violet-3:#9333ea;
  --blue:#3b5bff;
  --blue-2:#2563eb;
  --indigo:#1a237e;
  --wa:#25d366;
  --wa-d:#1ebe5a;

  --txt:#0f1e3d;
  --txt-soft:#33425f;
  --txt-mut:#5d6b86;
  --txt-dim:#93a0b6;

  --grad:linear-gradient(135deg,#7c3aed 0%,#6d28d9 38%,#3b5bff 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.10),rgba(59,91,255,.10));
  --grad-text:linear-gradient(100deg,#7c3aed 0%,#6d28d9 40%,#2563eb 100%);

  --card:#ffffff;
  --card-grad:linear-gradient(165deg,#ffffff,#f6f8fd);
  --tint:rgba(124,58,237,.06);
  --ic-bg:rgba(124,58,237,.10);
  --ic-color:#6d28d9;
  --glass:rgba(255,255,255,.88);
  --header-glass:rgba(255,255,255,.74);
  --hover:rgba(15,30,61,.05);
  --nav-mobile:rgba(255,255,255,.98);

  --radius:18px;
  --radius-lg:26px;
  --radius-sm:12px;
  --shadow:0 16px 40px -18px rgba(37,55,110,.35);
  --shadow-card:0 22px 55px -30px rgba(30,45,90,.28);
  --glow:0 0 0 1px rgba(124,58,237,.35),0 20px 50px -18px rgba(124,58,237,.30);

  --container:1180px;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ----------  Reset  ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
:focus-visible{outline:2px solid var(--violet-3);outline-offset:3px}
::selection{background:var(--violet);color:#fff}

/* ----------  Layout helpers  ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}
.section{position:relative;padding:96px 0}
.section--tight{padding:64px 0}
.center{text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ic-color);padding:7px 16px;border-radius:999px;
  background:var(--grad-soft);border:1px solid rgba(124,58,237,.18);margin-bottom:18px;
}
.h-title{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;line-height:1.2;letter-spacing:-.02em}
.h-title .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:var(--txt-mut);font-size:1.05rem;max-width:680px}
.center .lead{margin-inline:auto}
.section-head{margin-bottom:54px}

/* ----------  Background mesh (soft, light)  ---------- */
.bg-mesh{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden}
.bg-mesh::before,.bg-mesh::after{
  content:"";position:absolute;border-radius:50%;filter:blur(130px);opacity:.16;
}
.bg-mesh::before{width:620px;height:620px;background:radial-gradient(circle,#7c3aed,transparent 70%);top:-200px;left:-140px}
.bg-mesh::after{width:560px;height:560px;background:radial-gradient(circle,#3b5bff,transparent 70%);top:420px;right:-160px}
.bg-grid{position:fixed;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(15,30,61,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,30,61,.035) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 25%,transparent 72%)}

/* ----------  Buttons  ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:.97rem;padding:14px 26px;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  white-space:nowrap;will-change:transform}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 22px 50px -16px rgba(124,58,237,.55)}
.btn--wa{background:var(--wa);color:#062d16;font-weight:700}
.btn--wa:hover{background:var(--wa-d);transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(37,211,102,.5)}
.btn--ghost{background:var(--card);color:var(--txt);border:1px solid var(--line-2);box-shadow:0 6px 18px -12px rgba(30,45,90,.35)}
.btn--ghost:hover{background:var(--surface-2);transform:translateY(-2px);border-color:rgba(124,58,237,.3)}
.btn--lg{padding:17px 34px;font-size:1.05rem}
.btn--block{width:100%}

/* ----------  Header  ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--header-h);
  display:flex;align-items:center;transition:height .3s var(--ease),background .3s,box-shadow .3s}
.site-header::before{content:"";position:absolute;inset:0;background:var(--header-glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s;opacity:0}
.site-header.scrolled{height:64px}
.site-header.scrolled::before{opacity:1;border-bottom-color:var(--line);box-shadow:0 6px 24px -16px rgba(30,45,90,.4)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}

.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.18rem;letter-spacing:-.01em}
.brand__mark{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(124,58,237,.6);flex:none}
.brand__mark svg{width:20px;height:20px}
.brand b{color:var(--txt)}.brand span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:9px 14px;border-radius:10px;font-size:.94rem;font-weight:500;color:var(--txt-soft);transition:.2s}
.nav a:hover{color:var(--txt);background:var(--hover)}
.nav a.active{color:var(--violet-2)}
.header-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--card);place-items:center}
.nav-toggle span{position:relative;width:20px;height:2px;background:var(--txt);border-radius:2px;transition:.3s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--txt);border-radius:2px;transition:.3s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.menu-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

/* announcement bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:95;background:var(--grad);color:#fff;
  font-size:.83rem;font-weight:500;text-align:center;padding:8px 16px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.topbar a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
body.has-topbar .site-header{top:var(--topbar-h,38px)}
:root{--topbar-h:38px}

/* ----------  Hero  ---------- */
.hero{padding-top:calc(var(--header-h) + var(--topbar-h) + 56px);padding-bottom:80px;position:relative}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08;font-weight:800;letter-spacing:-.025em;margin-bottom:20px}
.hero h1 .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__sub{color:var(--txt-soft);font-size:1.1rem;max-width:560px;margin-bottom:28px}
.hero__points{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.hero__points li{display:flex;align-items:center;gap:12px;color:var(--txt-soft);font-size:.98rem;font-weight:500}
.hero__points .ic{width:26px;height:26px;border-radius:8px;background:var(--ic-bg);border:1px solid rgba(124,58,237,.18);
  display:grid;place-items:center;color:var(--ic-color);flex:none}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__note{font-size:.85rem;color:var(--txt-dim);margin-top:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.hero__media{position:relative}
.hero__media img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.hero__media::after{content:"";position:absolute;inset:-30px;z-index:-1;background:radial-gradient(circle at 60% 40%,rgba(124,58,237,.18),transparent 65%);filter:blur(40px)}
.hero__float{position:absolute;background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-card);
  display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:var(--txt)}
.hero__float .dot{width:9px;height:9px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(37,211,102,.2)}
.hero__float--tl{top:18px;left:-22px}
.hero__float--br{bottom:24px;right:-18px}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.stat{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;box-shadow:0 12px 30px -22px rgba(30,45,90,.4)}
.stat b{display:block;font-size:1.9rem;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:var(--txt-mut);font-size:.85rem}

/* logos / devices */
.devices{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;background:var(--bg-2)}
.devices__label{text-align:center;color:var(--txt-dim);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.devices__row{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap}
.devices__row img{height:30px;width:auto;opacity:.5;filter:brightness(0) saturate(100%);transition:.3s}
.devices__row img:hover{opacity:.9;transform:translateY(-3px)}

/* ----------  Cards / generic  ---------- */
.card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.3s var(--ease);box-shadow:0 14px 36px -28px rgba(30,45,90,.5)}
.card:hover{border-color:rgba(124,58,237,.25);transform:translateY(-5px);box-shadow:var(--shadow-card)}
.card__ic{width:52px;height:52px;border-radius:14px;background:var(--ic-bg);border:1px solid rgba(124,58,237,.16);
  display:grid;place-items:center;color:var(--ic-color);margin-bottom:18px}
.card__ic svg{width:24px;height:24px}
.card h3{font-size:1.12rem;font-weight:700;margin-bottom:8px}
.card p{color:var(--txt-mut);font-size:.94rem}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* ----------  Pricing  ---------- */
.pricing__toggle{display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line);margin:0 auto 44px;position:relative}
.pricing__toggle button{padding:10px 24px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--txt-mut);transition:.3s;position:relative;z-index:1}
.pricing__toggle button.active{color:#fff}
.pricing__toggle .pill{position:absolute;top:6px;bottom:6px;border-radius:999px;background:var(--grad);transition:.35s var(--ease);z-index:0;box-shadow:0 6px 16px -6px rgba(124,58,237,.5)}
.toggle-save{font-size:.7rem;font-weight:700;color:var(--wa-d);margin-left:4px}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;transition:.35s var(--ease);box-shadow:0 18px 44px -30px rgba(30,45,90,.45)}
.plan:hover{transform:translateY(-7px);border-color:rgba(124,58,237,.25);box-shadow:var(--shadow-card)}
.plan--featured{border-color:rgba(124,58,237,.45);box-shadow:var(--glow);background:linear-gradient(170deg,#ffffff,#f3f0ff)}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);
  color:#fff;font-size:.72rem;font-weight:700;padding:6px 16px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow)}
.plan__name{font-size:1.2rem;font-weight:700}
.plan__dur{color:var(--txt-mut);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.plan__price{display:flex;align-items:baseline;gap:9px;margin:18px 0 4px}
.plan__price .now{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;color:var(--txt)}
.plan__price .was{color:var(--txt-dim);text-decoration:line-through;font-size:1.05rem;font-weight:500}
.plan__off{display:inline-block;font-size:.72rem;font-weight:700;color:var(--wa-d);background:rgba(37,211,102,.1);
  border:1px solid rgba(37,211,102,.28);padding:3px 10px;border-radius:999px;margin-bottom:18px}
.plan__feats{display:flex;flex-direction:column;gap:11px;margin:6px 0 24px;flex:1}
.plan__feats li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--txt-soft)}
.plan__feats .ck{width:19px;height:19px;flex:none;border-radius:50%;background:var(--ic-bg);
  border:1px solid rgba(124,58,237,.16);display:grid;place-items:center;margin-top:2px}
.plan__feats .ck svg{width:11px;height:11px;color:var(--ic-color)}
.plan__activate{text-align:center;font-size:.8rem;color:var(--wa-d);margin-top:12px;font-weight:600}
.price-screens[hidden]{display:none}

/* ----------  Why / split sections  ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--rev .split__media{order:-1}
.split__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.feature-list{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.feature-list li{display:flex;gap:16px}
.feature-list .ic{width:46px;height:46px;flex:none;border-radius:13px;background:var(--ic-bg);
  border:1px solid rgba(124,58,237,.16);display:grid;place-items:center;color:var(--ic-color)}
.feature-list h4{font-size:1.02rem;font-weight:650;margin-bottom:3px}
.feature-list p{color:var(--txt-mut);font-size:.9rem}

/* ----------  Steps  ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{position:relative;background:var(--card-grad);
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 26px 28px;box-shadow:0 14px 36px -28px rgba(30,45,90,.5)}
.step__num{counter-increment:step;width:50px;height:50px;border-radius:14px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.3rem;margin-bottom:18px;box-shadow:var(--shadow)}
.step__num::after{content:counter(step,decimal-leading-zero)}
.step h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.step p{color:var(--txt-mut);font-size:.92rem}
.step:not(:last-child)::before{content:"";position:absolute;top:58px;right:-24px;width:24px;height:2px;
  background:linear-gradient(90deg,var(--violet),transparent);z-index:1}

/* ----------  Testimonials  ---------- */
.rating-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:40px}
.stars{color:#f5a623;font-size:1.2rem;letter-spacing:2px}
.rating-head b{font-size:1.05rem}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{background:var(--card-grad);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 14px 36px -28px rgba(30,45,90,.5)}
.review .stars{font-size:1rem;margin-bottom:14px}
.review p{color:var(--txt-soft);font-size:.95rem;margin-bottom:18px}
.review__by{display:flex;align-items:center;gap:12px}
.review__av{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.review__by b{font-size:.92rem;display:block}
.review__by span{color:var(--txt-dim);font-size:.8rem}

/* ----------  FAQ  ---------- */
.faq{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.faq__item{background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:.3s;box-shadow:0 10px 30px -26px rgba(30,45,90,.5)}
.faq__item.open{border-color:rgba(124,58,237,.3);background:var(--tint)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  text-align:left;padding:20px 24px;font-weight:600;font-size:1rem;color:var(--txt)}
.faq__q .pm{width:26px;height:26px;flex:none;border-radius:8px;background:var(--ic-bg);
  border:1px solid rgba(124,58,237,.16);display:grid;place-items:center;transition:.3s;color:var(--ic-color)}
.faq__item.open .pm{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{padding:0 24px 22px;color:var(--txt-mut);font-size:.94rem}

/* ----------  CTA band  ---------- */
.cta-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--grad);padding:60px 48px;text-align:center;color:#fff;box-shadow:0 30px 60px -28px rgba(124,58,237,.5)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 55%)}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;margin-bottom:14px;letter-spacing:-.02em;color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:620px;margin:0 auto 28px}
.cta-band .btn--ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff;box-shadow:none}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.26)}
.cta-feats{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta-feats div{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500}

/* ----------  Footer  ---------- */
.site-footer{border-top:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f3f6fd);padding:66px 0 30px;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:46px}
.footer__about p{color:var(--txt-mut);font-size:.9rem;margin:16px 0 20px;max-width:330px}
.footer h5{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:18px}
.footer__links{display:flex;flex-direction:column;gap:11px}
.footer__links a{color:var(--txt-soft);font-size:.92rem;transition:.2s}
.footer__links a:hover{color:var(--violet-2);padding-left:4px}
.footer__contact a{display:flex;align-items:center;gap:10px;color:var(--txt-soft);font-size:.92rem;margin-bottom:12px}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line);color:var(--txt-dim);font-size:.84rem}
.footer__bottom .pills{display:flex;gap:18px;flex-wrap:wrap}
.footer__bottom .pills span{display:flex;align-items:center;gap:7px}

/* ----------  Floating WhatsApp  ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.55);
  transition:.3s;animation:wa-pulse 2.4s infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;color:#fff}
@keyframes wa-pulse{0%{box-shadow:0 12px 30px -6px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 12px 30px -6px rgba(37,211,102,.55),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 12px 30px -6px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,0)}}

/* ----------  Scroll reveal  ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.wa-float{animation:none}}

/* ----------  Page hero (inner pages)  ---------- */
.page-hero{padding-top:calc(var(--header-h) + var(--topbar-h) + 60px);padding-bottom:50px;text-align:center}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.breadcrumb{color:var(--txt-dim);font-size:.86rem;margin-bottom:18px}
.breadcrumb a:hover{color:var(--violet-2)}
.prose{max-width:760px;margin-inline:auto;color:var(--txt-soft)}
.prose h2{font-size:1.5rem;margin:34px 0 12px;color:var(--txt)}
.prose h3{font-size:1.18rem;margin:26px 0 10px;color:var(--txt)}
.prose p{margin-bottom:14px;color:var(--txt-mut)}
.prose ul{margin:0 0 16px 4px;display:flex;flex-direction:column;gap:9px}
.prose ul li{display:flex;gap:10px;color:var(--txt-mut)}
.prose ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet-3);margin-top:9px;flex:none}

/* ----------  Device install accordion  ---------- */
.dev-acc{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.dev-acc details{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 10px 30px -26px rgba(30,45,90,.5);transition:.3s}
.dev-acc details[open]{border-color:rgba(124,58,237,.3)}
.dev-acc summary{display:flex;align-items:center;gap:14px;padding:18px 22px;font-weight:650;cursor:pointer;list-style:none}
.dev-acc summary::-webkit-details-marker{display:none}
.dev-acc summary .ic{width:42px;height:42px;border-radius:11px;background:var(--ic-bg);border:1px solid rgba(124,58,237,.16);display:grid;place-items:center;flex:none}
.dev-acc summary .ic img{width:22px;height:22px;object-fit:contain}
.dev-acc summary .chev{margin-left:auto;color:var(--ic-color);transition:.3s}
.dev-acc details[open] summary .chev{transform:rotate(180deg)}
.dev-acc ol{padding:2px 22px 22px;counter-reset:s;display:flex;flex-direction:column;gap:13px;list-style:none}
.dev-acc ol li{display:flex;gap:14px;color:var(--txt-mut);font-size:.94rem;align-items:flex-start}
.dev-acc ol li::before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:.8rem;display:grid;place-items:center;flex:none;margin-top:1px}

/* ----------  Checkout / order page  ---------- */
.co-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:30px;align-items:start;max-width:1040px;margin-inline:auto}
.co-card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 14px 36px -28px rgba(30,45,90,.5);margin-bottom:20px}
.co-card h3{font-size:1.05rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.co-card h3 .n{width:26px;height:26px;border-radius:8px;background:var(--grad);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}
.co-offers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.co-offer{position:relative;border:1.5px solid var(--line-2);border-radius:14px;padding:16px;cursor:pointer;transition:.2s;background:var(--card)}
.co-offer:hover{border-color:rgba(124,58,237,.4)}
.co-offer input{position:absolute;opacity:0}
.co-offer.sel{border-color:var(--violet);background:var(--tint);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.co-offer .dur{font-weight:700;font-size:.95rem}
.co-offer .pr{display:flex;align-items:baseline;gap:7px;margin-top:6px}
.co-offer .pr b{font-size:1.35rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.co-offer .pr s{color:var(--txt-dim);font-size:.85rem}
.co-offer .tag{position:absolute;top:-9px;right:12px;background:var(--grad);color:#fff;font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:999px}
.co-seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);margin-bottom:16px}
.co-seg button{padding:8px 18px;border-radius:999px;font-weight:600;font-size:.85rem;color:var(--txt-mut);transition:.25s}
.co-seg button.on{background:var(--grad);color:#fff}
.co-field{margin-bottom:14px}
.co-field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--txt-soft)}
.co-field input,.co-field select{width:100%;padding:13px 15px;border-radius:11px;border:1.5px solid var(--line-2);background:var(--card);color:var(--txt);font-size:.95rem;transition:.2s}
.co-field input:focus,.co-field select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.co-pay{display:flex;flex-direction:column;gap:10px}
.co-pay label{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:12px;cursor:pointer;font-weight:600;font-size:.92rem;transition:.2s}
.co-pay label.sel{border-color:var(--violet);background:var(--tint)}
.co-pay input{accent-color:var(--violet)}
.co-sum{position:sticky;top:90px}
.co-sum .row{display:flex;justify-content:space-between;padding:10px 0;color:var(--txt-mut);font-size:.92rem;border-bottom:1px solid var(--line)}
.co-sum .row.tot{border:none;padding-top:16px;margin-top:6px;color:var(--txt);font-weight:800;font-size:1.15rem}
.co-sum .row.tot b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.5rem}
.co-trust{display:flex;flex-direction:column;gap:9px;margin-top:18px;font-size:.83rem;color:var(--txt-mut)}
.co-trust div{display:flex;align-items:center;gap:9px}
@media (max-width:820px){.co-grid{grid-template-columns:1fr}.co-sum{position:static}.co-offers{grid-template-columns:1fr}}

/* ----------  Contact form  ---------- */
.cform{display:flex;flex-direction:column;gap:14px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--txt-soft)}
.cform input,.cform select,.cform textarea{width:100%;padding:13px 15px;border-radius:11px;border:1.5px solid var(--line-2);background:var(--card);color:var(--txt);font-size:.95rem;font-family:inherit;transition:.2s}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.cform textarea{min-height:130px;resize:vertical}
.cform .note{display:none;padding:13px 16px;border-radius:11px;font-size:.9rem;font-weight:500}
.cform .note.ok{display:block;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3);color:var(--wa-d)}
.cform .note.err{display:block;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);color:#dc2626}
@media (max-width:560px){.cform .row2{grid-template-columns:1fr}}

/* ----------  Section rhythm (alternating background)  ---------- */
.section--alt{background:linear-gradient(180deg,#f6f9ff,#eef3fc);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ----------  Hero trust row  ---------- */
.trust-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.trust-row .stars{color:#f5a623;font-size:1.02rem;letter-spacing:1.5px}
.trust-row .rate b{font-weight:800}
.trust-row .rate span{color:var(--txt-mut);font-size:.85rem}
.trust-row .sep{width:1px;height:22px;background:var(--line-2)}
.trust-row .ti{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--txt-soft);font-weight:600}
.trust-row .ti svg{color:var(--ic-color)}

/* ----------  Guarantees strip  ---------- */
.guarantees{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.guar{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px -24px rgba(30,45,90,.4);transition:.3s var(--ease)}
.guar:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.22);box-shadow:var(--shadow-card)}
.guar .ic{width:46px;height:46px;border-radius:12px;background:var(--ic-bg);border:1px solid rgba(124,58,237,.16);display:grid;place-items:center;color:var(--ic-color);flex:none}
.guar h4{font-size:.96rem;font-weight:700;margin-bottom:1px;letter-spacing:-.01em}
.guar p{font-size:.8rem;color:var(--txt-mut)}

/* ----------  Plan savings line  ---------- */
.plan__save{font-size:.78rem;font-weight:700;color:var(--blue-2);margin:-2px 0 14px}

/* ----------  Trustpilot-style verified reviews  ---------- */
.tp{--tp:#00b67a;--tp-d:#0a8f63}
.tp-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:42px}
.tp-logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
.tp-logo .star{width:30px;height:30px;background:var(--tp);border-radius:7px;display:grid;place-items:center}
.tp-logo .star svg{width:18px;height:18px;fill:#fff}
.tp-rate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.tp-stars{display:inline-flex;gap:4px}
.tp-stars i{width:30px;height:30px;background:var(--tp);display:grid;place-items:center;border-radius:4px}
.tp-stars i svg{width:18px;height:18px;fill:#fff}
.tp-stars i.half{background:linear-gradient(90deg,var(--tp) 56%,#dcdce6 56%)}
.tp-score{font-weight:600;color:var(--txt-soft)}.tp-score b{font-size:1.1rem;color:var(--txt)}
.tp-sub{color:var(--txt-mut);font-size:.9rem}.tp-sub b{color:var(--txt)}
.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 12px 34px -26px rgba(30,45,90,.5);display:flex;flex-direction:column;gap:11px;transition:.3s var(--ease)}
.tp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.tp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tp-card .s{display:inline-flex;gap:3px}
.tp-card .s i{width:22px;height:22px;background:var(--tp);display:grid;place-items:center;border-radius:3px}
.tp-card .s i svg{width:13px;height:13px;fill:#fff}
.tp-vf{font-size:.74rem;color:var(--tp-d);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.tp-card h4{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.tp-card p{color:var(--txt-mut);font-size:.92rem;flex:1}
.tp-by{display:flex;align-items:center;gap:11px;padding-top:13px;border-top:1px solid var(--line)}
.tp-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#00b67a,#0a8f63);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none}
.tp-by b{font-size:.88rem;display:block}
.tp-by span{font-size:.78rem;color:var(--txt-dim)}
@media (max-width:860px){.tp-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ----------  Review screenshots (WhatsApp avis)  ---------- */
.review-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1040px;margin-inline:auto;align-items:start}
.rshot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card);background:#0b0918;transition:.3s var(--ease)}
.rshot:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(30,45,90,.45)}
.rshot img{width:100%;display:block}
.rshot .wa-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(37,211,102,.96);color:#fff;font-size:.72rem;font-weight:700;padding:6px 11px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.rshot .wa-badge svg{width:13px;height:13px}
@media (max-width:860px){.review-shots{grid-template-columns:repeat(2,1fr);max-width:520px}}
@media (max-width:460px){.review-shots{grid-template-columns:1fr;max-width:300px}}

/* ----------  Responsive  ---------- */
@media (max-width:860px){.guarantees{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.guarantees{grid-template-columns:1fr}}
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__media{max-width:520px;margin-inline:auto}
  .plans{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .step:not(:last-child)::before{display:none}
}
@media (max-width:860px){
  .nav,.header-cta .btn--ghost{display:none}
  .nav-toggle{display:grid}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--nav-mobile);backdrop-filter:blur(16px);padding:16px;border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .4s var(--ease);z-index:89;box-shadow:0 20px 40px -24px rgba(30,45,90,.5)}
  body.menu-open .nav{transform:none}
  .nav a{padding:14px 16px;font-size:1rem}
  .split,.split--rev .split__media{grid-template-columns:1fr;order:0}
  .split{gap:34px}
  .steps,.grid-3,.reviews{grid-template-columns:1fr}
  .section{padding:72px 0}
}
@media (max-width:560px){
  .plans,.grid-2,.stats{grid-template-columns:1fr}
  .cta-band{padding:44px 24px}
  .footer__grid{grid-template-columns:1fr}
  .hero__float--tl{left:8px}.hero__float--br{right:8px}
  .topbar{font-size:.76rem}
}