*{margin:0;padding:0;box-sizing:border-box;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
:root{
  --primary:#0f172a;--muted:#64748b;--line:#e5e7eb;--bg:#ffffff;--soft:#f8fafc;--dark:#0b1220;
  --neonA:#22c55e;--neonB:#60a5fa;--neonC:#a78bfa;--neonD:#f59e0b;--neonE:#fb7185;

  --cEU:#22c55e; --cNA:#60a5fa; --cSA:#a78bfa; --cAS:#f59e0b; --cOC:#fb7185; --cAF:#fbbf24; --cME:#38bdf8;
}
body{background:var(--bg);color:var(--primary);line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto}
.container{max-width:1320px;margin:0 auto;padding:0 1.1rem}
main{display:block}

/* UI */
.card{background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px rgba(15,23,42,.06);border-radius:18px;padding:2.15rem;position:relative}
.card.compact{padding:1.25rem}
.card-hover{transition:.25s}
.card-hover:hover{box-shadow:0 18px 55px rgba(15,23,42,.10);transform:translateY(-4px)}
.badge{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.05rem;border-radius:999px;font-size:.86rem;font-weight:900;background:var(--soft);color:#111827;border:1px solid #e2e8f0}
.btn{display:inline-flex;align-items:center;gap:.65rem;padding:1rem 1.35rem;font-weight:900;border-radius:14px;text-decoration:none;transition:.2s;border:1px solid transparent;cursor:pointer;font-size:1rem;white-space:nowrap;justify-content:center}
.btn-primary{background:#111827;color:#fff;border-color:#111827}
.btn-primary:hover{opacity:.92}
.btn-secondary{background:#fff;color:var(--primary);border-color:#cbd5e1}
.btn-secondary:hover{background:var(--soft)}
.btn-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;border:none}
.btn-whatsapp:hover{opacity:.95}
.btn-sm{padding:.85rem 1rem;font-size:.95rem}

.tip{position:relative;z-index:1}
.tip:hover{z-index:9999}
.tip[data-tip]:hover:after{
  content:attr(data-tip);position:absolute;left:0;top:calc(100% + 10px);min-width:220px;max-width:360px;
  background:#0b1220;color:#e5e7eb;padding:.75rem .85rem;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.35);font-size:.9rem;font-weight:700;line-height:1.45;z-index:99999
}
.tip[data-tip]:hover:before{
  content:"";position:absolute;left:22px;top:100%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:10px solid #0b1220;z-index:99999
}
.card,.logoGrid,.logoCard{overflow:visible}

/* Header */
header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,.9)}
header .container{display:flex;align-items:center;justify-content:space-between;height:82px;gap:1rem}
.headerLeft{display:flex;align-items:center;gap:.75rem}
.logo{text-decoration:none;display:flex;align-items:center}
.logo img{height:48px;width:auto;max-width:240px;object-fit:contain;display:block}
nav{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:.55rem;transition:.2s}
nav a:hover,nav a.active{color:#111827}

/* Mobile menu */
.hamburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer}
.hamburger svg{width:22px;height:22px;stroke:#111827;stroke-width:2.5;fill:none}
.drawerOverlay{position:fixed;inset:0;background:rgba(2,6,23,.55);opacity:0;pointer-events:none;transition:.2s;z-index:2000}
.drawer{position:fixed;top:0;left:0;height:100%;width:min(360px,88vw);background:#fff;transform:translateX(-110%);transition:.25s;z-index:2001;border-right:1px solid var(--line);box-shadow:20px 0 60px rgba(15,23,42,.22)}
.drawerHeader{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--line)}
.drawerTitle{font-weight:950}
.drawerNav{padding:1rem}
.drawerNav a{display:flex;align-items:center;gap:.7rem;padding:.9rem;border-radius:14px;text-decoration:none;color:#111827;font-weight:900}
.drawerNav a:hover{background:var(--soft)}
.drawerCta{margin-top:1rem}
.drawerCta .btn{width:100%}
.drawerOpen .drawerOverlay{opacity:1;pointer-events:auto}
.drawerOpen .drawer{transform:translateX(0)}

/* Layout */
.section{padding:4.6rem 0}
.section-title{font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:950;margin-bottom:.9rem;letter-spacing:-.03em}
.section-subtitle{font-size:clamp(1rem,1.55vw,1.15rem);color:var(--muted);margin-bottom:2.6rem;font-weight:650;line-height:1.7}
.centerIntro{text-align:center;max-width:980px;margin:0 auto 2.4rem}
.grid{display:grid;gap:1.45rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Hero */
.hero{padding:3.8rem 0 2.8rem;background:linear-gradient(180deg,var(--soft) 0%, #fff 55%);overflow-x:clip}
.heroGrid{gap:2rem;align-items:center}
.hero h1{font-size:clamp(2.15rem,4vw,3.45rem);font-weight:950;line-height:1.05;margin:1rem 0 1.2rem;letter-spacing:-.04em}
.hero p{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--muted);max-width:760px;margin-bottom:2.0rem;font-weight:650}
.ctaRow{display:flex;gap:1rem;flex-wrap:wrap}
.ctaRow.center{justify-content:center}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2.35rem 0 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.25rem;box-shadow:0 10px 35px rgba(15,23,42,.05);min-width:0}
.stat-value{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:950;color:#111827;margin-bottom:.1rem;letter-spacing:-.02em}
.stat-label{color:var(--muted);font-weight:800;font-size:.95rem;line-height:1.35}

/* Icon box */
.icon-box{width:58px;height:58px;border-radius:16px;background:#0b1220;display:flex;align-items:center;justify-content:center;margin-bottom:1.05rem}
.icon-box svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Neon borders */
.neon{border:1px solid var(--line);position:relative}
.neon:before{content:"";position:absolute;inset:-1px;border-radius:18px;pointer-events:none;border:2px solid transparent}
.neonA:before{border-color:rgba(34,197,94,.85);filter:drop-shadow(0 0 10px rgba(34,197,94,.45))}
.neonB:before{border-color:rgba(96,165,250,.9);filter:drop-shadow(0 0 10px rgba(96,165,250,.45))}
.neonC:before{border-color:rgba(167,139,250,.9);filter:drop-shadow(0 0 10px rgba(167,139,250,.45))}
.neonD:before{border-color:rgba(245,158,11,.9);filter:drop-shadow(0 0 10px rgba(245,158,11,.45))}
.neonE:before{border-color:rgba(251,113,133,.9);filter:drop-shadow(0 0 10px rgba(251,113,133,.45))}
.neonIcon{width:54px;height:54px;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:1.0rem}
.neonIcon svg{width:28px;height:28px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.neonIconA svg{stroke:var(--neonA)}
.neonIconB svg{stroke:var(--neonB)}
.neonIconC svg{stroke:var(--neonC)}
.neonIconD svg{stroke:var(--neonD)}
.neonIconE svg{stroke:var(--neonE)}
.cardTitle{font-weight:950;margin-bottom:.45rem}
.cardText{color:var(--muted);font-weight:650;line-height:1.8}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:.65rem}
.tag{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#111827;text-decoration:none;font-weight:900;font-size:.88rem;transition:.2s}
.tag:hover{background:var(--soft);transform:translateY(-1px)}
.tag svg{width:16px;height:16px;stroke:#111827;fill:none;stroke-width:2}

/* Workflow PRO */
.flowPro{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.flowPro:before{
  content:"";position:absolute;left:18px;right:18px;top:40px;height:2px;
  background:linear-gradient(90deg, rgba(96,165,250,.7), rgba(167,139,250,.7), rgba(34,197,94,.7));
  opacity:.9
}
.flowStep{position:relative;padding:1.25rem;border-radius:16px;border:1px solid var(--line);background:#fff;min-width:0}
.flowTop{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.flowDot{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;z-index:2}
.flowDot svg{width:22px;height:22px;fill:none;stroke:#111827;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.flowMeta{min-width:0}
.flowMeta b{display:block;font-weight:950}
.flowMeta span{display:block;color:var(--muted);font-weight:800;font-size:.85rem}
.flowList{margin-top:.5rem;color:var(--muted);font-weight:650;line-height:1.7;font-size:.92rem}
.flowList li{margin-left:1.05rem}

/* Social push workflow */
.pushFlow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pushStep{border:1px solid var(--line);border-radius:16px;background:#fff;padding:1.25rem;position:relative;min-width:0}
.pushHead{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.pushIcon{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;background:#fff}
.pushIcon svg{width:22px;height:22px;fill:none;stroke:#111827;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pushStep b{font-weight:950}
.pushStep p{color:var(--muted);font-weight:650;line-height:1.75;font-size:.95rem}
.mutedMini{color:var(--muted);font-weight:800;font-size:.86rem}

/* Logo grids */
.logoGrid{display:grid;gap:.95rem}
.logoGrid.socials{grid-template-columns:repeat(3,minmax(0,1fr))}
.logoGrid.encoders{grid-template-columns:repeat(4,minmax(0,1fr))}
.logoCard{display:flex;align-items:center;gap:.9rem;padding:1rem 1.05rem;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;transition:.2s;min-width:0;position:relative}
.logoCard:hover{box-shadow:0 14px 40px rgba(15,23,42,.10);transform:translateY(-2px);z-index:9999}
.logoMark{
  width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;overflow:hidden;flex-shrink:0
}
.logoMark img{width:28px;height:28px;display:block;object-fit:contain;margin:0 auto}
.logoTxt{min-width:0}
.logoTxt b{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logoTxt span{display:block;font-size:.85rem;color:var(--muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logoCard.cdnCard{cursor:default;grid-column:1 / -1}
.logoMarkDark{background:#0b1220;border-color:rgba(255,255,255,.15)}
.logoMarkDark span{color:#fff;font-weight:950}

/* MAP */
.mapWrap{
  position:relative;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(96,165,250,.14), rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 78% 28%, rgba(34,197,94,.12), rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 50% 80%, rgba(167,139,250,.10), rgba(0,0,0,0) 58%),
    linear-gradient(135deg,#02040a,#060a14 52%, #02040a);
  border:1px solid rgba(255,255,255,.10);
}
.mapNoise{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 35%),
  radial-gradient(circle at 80% 35%, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 38%),
  radial-gradient(circle at 50% 75%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 42%);
  mix-blend-mode:overlay}
.mapGrid{position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:
  linear-gradient(to right, rgba(255,255,255,.06) 1px, rgba(0,0,0,0) 1px),
  linear-gradient(to bottom, rgba(255,255,255,.06) 1px, rgba(0,0,0,0) 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 80%)}
.mapTop{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;padding:1.35rem 1.35rem 0;position:relative;z-index:2}
.mapTitle{color:#fff;font-weight:950;font-size:1.25rem}
.mapSub{color:#cbd5e1;font-weight:650;font-size:.95rem}
.mapLegend{display:flex;gap:.55rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e2e8f0;font-weight:900;font-size:.78rem}
.pillDot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 10px rgba(255,255,255,.15)}
.worldSvg{width:100%;height:auto;display:block;position:relative;z-index:1}
.popDot{cursor:pointer}
.popDot:hover{filter:drop-shadow(0 0 12px rgba(255,255,255,.28))}
.mapTooltip{position:absolute;pointer-events:none;opacity:0;transform:translateY(6px);background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.9);box-shadow:0 18px 55px rgba(15,23,42,.22);border-radius:12px;padding:.75rem .85rem;min-width:180px;max-width:240px;transition:.12s;z-index:99999}
.mapTooltip b{display:block;font-weight:950;margin-bottom:.1rem}
.mapTooltip span{color:var(--muted);font-weight:800;font-size:.86rem}

/* WhatsApp */
a.whatsapp-float{position:fixed;bottom:20px;right:18px;z-index:999}

/* Footer */
footer{background:#070b16;color:#94a3b8;padding:4.2rem 0 2.2rem;margin-top:5.2rem;border-top:1px solid rgba(255,255,255,.08)}
footer a{color:#cbd5e1;text-decoration:none;font-weight:800}
footer a:hover{color:#fff;text-decoration:underline}
.footerGrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.6rem}
.footerTitle{color:#fff;font-weight:950;margin-bottom:.85rem;font-size:1.05rem}
.footerP{color:#94a3b8;font-weight:650;line-height:1.75}
.footerList{list-style:none;display:grid;gap:.6rem;padding:0;margin:0}
.footerBadgeRow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.kBadge{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#e2e8f0;font-weight:900;font-size:.78rem}
.footBottom{margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.smallMuted{color:#94a3b8;font-weight:700;font-size:.9rem}
.footerLogoRow{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.footerLogo{height:42px;width:auto;object-fit:contain;filter:brightness(1.05)}

/* Home slider */
.hero .grid-2 > *{min-width:0}
.glossy{overflow:hidden;border-radius:18px;padding:1.25rem;max-width:100%;border:1px solid var(--line);box-shadow:0 10px 35px rgba(15,23,42,.06)}
.swiper.slides-main{overflow:hidden;width:100%;background:#f1f5f9;border-radius:16px;box-shadow:0 18px 55px rgba(15,23,42,.10)}
.slideFrame{width:100%;aspect-ratio:16/9;background:#e2e8f0;overflow:hidden}
.slideFrame img{width:100%;height:100%;object-fit:cover;display:block}
.glossyMeta{margin-top:1rem;border-radius:14px;padding:1rem;max-width:100%;border:1px solid var(--line);box-shadow:0 10px 35px rgba(15,23,42,.06);background:#fff}
.glossyMetaKicker{font-size:.78rem;font-weight:950;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.45rem}
.glossyMetaTitle{font-size:1.22rem;font-weight:950;margin-bottom:.25rem;color:var(--primary)}
.glossyMetaDesc{color:var(--muted);font-weight:750;font-size:.95rem}
.swiper.thumbs{margin-top:1rem}
.swiper.thumbs .swiper-slide{opacity:.55;cursor:pointer;transition:.2s;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#f1f5f9}
.swiper.thumbs .swiper-slide-thumb-active{opacity:1;border-color:#111827}
.swiper.thumbs img{height:62px;width:100%;object-fit:cover;display:block}
.swiper{touch-action:pan-y}

/* Typography helpers */
.h2{font-size:1.9rem;font-weight:950;margin:1rem 0 .8rem}
.h3{font-weight:950;font-size:1.45rem;margin-bottom:.8rem}
.h3Big{font-size:1.65rem;font-weight:950;margin-bottom:.6rem}
.h4{font-weight:950;margin-bottom:.8rem}
.center{text-align:center}
.left{text-align:left}
.mutedP{color:var(--muted);font-weight:650;line-height:1.8;margin-bottom:1rem}
.plainList{list-style:none;padding:0;color:var(--muted);font-weight:650;line-height:2}
.badgeRow{display:flex;gap:.6rem;flex-wrap:wrap}

/* Lists */
.resultList{list-style:none;padding:0;display:grid;gap:.65rem}
.resultList li{display:flex;gap:.7rem;align-items:flex-start}
.resultList li span{font-weight:850}
.mutedList span{font-weight:650;color:var(--muted)}

/* SLA */
.centerBox{text-align:center}
.kicker{font-weight:950;color:var(--muted);letter-spacing:.08em}
.kicker.dark{color:#111827}
.bigPct{font-size:2.6rem;font-weight:950;margin:.3rem 0 1rem}

/* 404 */
.center404{text-align:center;padding:6rem 0}
.big404{font-size:4rem;font-weight:950;color:#111827;margin-bottom:1rem}

/* Responsive */
@media(max-width:1024px){
  nav{display:none}
  .hamburger{display:inline-flex}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .flowPro{grid-template-columns:1fr;gap:1rem}
  .flowPro:before{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg, rgba(96,165,250,.7), rgba(167,139,250,.7), rgba(34,197,94,.7))}
  header .container{height:78px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pushFlow{grid-template-columns:1fr}
  .logoGrid.socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logoGrid.encoders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footerGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .swiper.thumbs{display:none !important}
  .slideFrame{aspect-ratio:4/3;max-height:360px}
  .card{padding:1.35rem}
  .stats{grid-template-columns:1fr}
}
@media(max-width:520px){
  .btn{width:100%}
  .container{padding:0 .95rem}
  .logoGrid.socials{grid-template-columns:1fr}
  .logoGrid.encoders{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  a.whatsapp-float{left:14px;right:14px;bottom:14px;width:calc(100% - 28px);max-width:560px;margin:0 auto}
}

/* ============================
   HOME - CINEMATIC + RESPONSIVE PATCH
   ============================ */

/* Slider: fix mobile white blocks + cinematic sheen */
.azSlider { position: relative; }
.azSlideImg { transition: opacity .22s ease; }
.azSlideImg.isFading { opacity: .35; }

.azSlideBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,23,42,.58);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}
.azSlideBtn:hover{ background:rgba(15,23,42,.72); }
.azPrev{ left:12px; }
.azNext{ right:12px; }

/* sheen over the image (subtle) */
.azSliderSheen{
  position:absolute;
  inset:-30%;
  background: radial-gradient(closest-side, rgba(255,255,255,.11), rgba(255,255,255,0) 60%);
  transform: translateX(-35%);
  opacity:.35;
  pointer-events:none;
  animation: azSheen 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes azSheen{
  0%{ transform:translateX(-38%) rotate(-8deg); opacity:.24; }
  50%{ transform:translateX(8%) rotate(6deg); opacity:.36; }
  100%{ transform:translateX(-38%) rotate(-8deg); opacity:.24; }
}

/* thumbs: nicer scroll */
.azThumbs { scrollbar-width: thin; }
.azThumbs::-webkit-scrollbar { height: 8px; }
.azThumbs::-webkit-scrollbar-thumb { background: rgba(15,23,42,.16); border-radius: 999px; }

/* FLOW: mobile vertical */
@media (max-width: 860px){
  .azFlowDesktop{ display:none !important; }
  .azFlowMobile{ display:block !important; }
}

/* Pricing responsiveness */
@media (max-width: 980px){
  .grid.grid-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .grid.grid-2{ grid-template-columns: 1fr; }
  .grid.grid-3{ grid-template-columns: 1fr; }
  .heroGrid{ gap: 1.25rem !important; }
  .stats{ grid-template-columns: 1fr 1fr; gap: .75rem; }
  .azSlideBtn{ width:38px; height:38px; border-radius:12px; }
  .azThumb{ width:92px !important; }
  .azPricingCard{ padding: 1.4rem !important; }
  .azPricingPriceBox{ text-align:left !important; width:100%; }
  .azPricingHead{ gap:.65rem !important; }
  .azBillToggle button{ width: 100%; justify-content:center; }
}

/* MAP cinematic */
.azOceanSheen{
  transform-origin: 600px 270px;
  animation: azOcean 10s ease-in-out infinite;
}
@keyframes azOcean{
  0%{ opacity:.42; transform: translateX(-6px); }
  50%{ opacity:.60; transform: translateX(10px); }
  100%{ opacity:.42; transform: translateX(-6px); }
}

/* arc motion (dash) */
#arcLayer .azArc{
  stroke-dasharray: 10 10;
  animation: azDash 6.8s linear infinite;
}
#arcLayer .azArcSheen{
  stroke-dasharray: 16 16;
  animation: azDash2 8.6s linear infinite;
}
@keyframes azDash{
  to { stroke-dashoffset: -220; }
}
@keyframes azDash2{
  to { stroke-dashoffset: -320; }
}

/* PoP pulse */
.azPopDot{
  transform-origin: center;
  animation: azPopPulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
}
.azPopRing{
  transform-origin: center;
  animation: azRingPulse 2.6s ease-in-out infinite;
}
@keyframes azPopPulse{
  0%,100%{ transform: scale(1); opacity: .98; }
  50%{ transform: scale(1.16); opacity: .90; }
}
@keyframes azRingPulse{
  0%,100%{ opacity: .14; }
  50%{ opacity: .22; }
}

/* Flow card cinematic line motion */
.azFlowLines path, .azFlowLines2 path{
  stroke-dasharray: 14 14;
  animation: azFlowDash 7.2s linear infinite;
}
@keyframes azFlowDash{
  to { stroke-dashoffset: -260; }
}

/* =========================
   HOME – enterprise polish
   ========================= */

/* Slider: evita artefatti bianchi/overlay brutti */
.slideFrame{
  width:100%;
  aspect-ratio:16/9;
  background:#0b1220;
  border-radius:14px;
  overflow:hidden;
}
.slideFrame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Meta box sotto slider più “pulito” */
.azSlideMeta{
  margin-top:1rem;
  border-radius:14px;
  padding:1rem;
  max-width:100%;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
}

/* Swiper nav: niente “blocchi” invasivi su mobile */
.slides-main .swiper-button-next,
.slides-main .swiper-button-prev{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.slides-main .swiper-button-next::after,
.slides-main .swiper-button-prev::after{
  font-size:14px;
  font-weight:900;
  color:#111827;
}
@media(max-width:768px){
  .slides-main .swiper-button-next,
  .slides-main .swiper-button-prev{
    width:38px;height:38px;border-radius:12px;
  }
}

/* Servizi cards leggibili */
.azServiceGrid .azServiceCard .azH{
  font-weight:950;
  margin-bottom:.45rem;
}
.azServiceGrid .azServiceCard .azP{
  color:var(--muted);
  font-weight:650;
  line-height:1.8;
}
.azSocialBadges{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:.85rem;
}
.azMiniBadge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-weight:900;
  font-size:.85rem;
}
.azMiniBadge img{display:block}

/* Pricing */
.azPriceCard{padding:2.1rem;position:relative;overflow:visible}
.azPopularPill{position:absolute;top:-12px;left:18px;z-index:3}
.azPriceHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.azBadges{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.azTierBadge{background:#fff;border-color:#e2e8f0;font-weight:950}
.azPriceLine{margin-top:.2rem}
.azPrice{
  font-size:2.2rem;
  font-weight:950;
  letter-spacing:-.03em;
  line-height:1.05;
}
.azPeriod{font-size:1rem;font-weight:850;color:var(--muted);margin-left:.25rem}

/* Riga alternata “enterprise” */
.azPriceList{margin-top:1.2rem;display:grid;gap:.55rem}
.azPriceRow{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  padding:.75rem .8rem;
  border-radius:14px;
  border:1px solid #e2e8f0;
}
.azRowA{background:#fff}
.azRowB{background:var(--soft)}
.azRowIcon{
  width:28px;height:28px;border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-top:2px;
}
.azRowTxt{line-height:1.35}
.azRowTxt b{display:block;font-weight:950;color:#0f172a}
.azRowTxt span{display:block;color:var(--muted);font-weight:800;font-size:.92rem;margin-top:.15rem}

/* Add-on list: (HOME) */
.azAddonList{margin-top:1.25rem;display:grid;gap:.85rem}

/* =========================================================
   ADD-ON (PLUGIN) – ALLINEAMENTO DESTRA + WIDTH COME PRICING
   (mettere in FONDO al file per sovrascrivere tutto)
   ========================================================= */

/* 1) Righe plugin: layout a 2 colonne (sx contenuti, dx prezzo+cta) */
.azAddonRowInner{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) 260px; /* colonna destra fissa */
  align-items:start !important;
  gap: 1rem !important;
}

/* Colonna destra: TUTTO allineato a destra (badge, prezzo, bottone) */
.azAddonPrice{
  width: 260px !important;
  min-width: 260px !important;   /* override min-width inline */
  text-align: right !important;
  justify-self: end !important;

  display:flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* <- fondamentale: tutto a destra */
}

/* bottone a destra coerente */
.azAddonPrice .btn{
  align-self: flex-end !important;
  justify-content: center;
}

/* Evita che la colonna sinistra “spinga” la destra */
.azAddonRowInner > div:first-child{
  min-width: 0 !important;
}

/* 2) Larghezza plugin uguale ai pricing:
   gli add-on sono dentro una card wrapper con padding 2.1rem (inline).
   Estendiamo la lista fino ai bordi della wrapper (come i pricing). */
.azAddonList{
  margin-left: -2.1rem !important;
  margin-right: -2.1rem !important;
}

/* le righe devono occupare tutta la larghezza disponibile */
.azAddonRow{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 16px;
}

/* 3) Mobile: stessa “larghezza visiva” dei pricing e stack pulito */
@media (max-width: 820px){
  .azAddonRowInner{
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
  }

  .azAddonPrice{
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    justify-self: start !important;

    align-items: flex-start !important; /* su mobile più leggibile */
    border-top: 1px solid var(--line);
    padding-top: .85rem;
    margin-top: .1rem;
  }

  .azAddonPrice .btn{
    width: 100% !important;
    align-self: stretch !important;
  }

  /* Mantieni la lista “full width” dentro la wrapper */
  .azAddonList{
    margin-left: -2.1rem !important;
    margin-right: -2.1rem !important;
  }
}

/* Extra: su schermi molto stretti riduci l’effetto “edge” se vuoi più respiro */
@media (max-width: 520px){
  .azAddonList{
    margin-left: -1.35rem !important;
    margin-right: -1.35rem !important;
  }
}
/* =========================================================
   HEADER PATCH: lang toggle + bandiere piccole + headerRight
   (non altera gap del tuo nav, non altera layout esistente)
   ========================================================= */

/* =========================
   HEADER FIX (mobile only CTA)
   ========================= */

/* =========================
   HEADER FIX (mobile only CTA)
   ========================= */

.headerRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
  flex:0 0 auto;
  white-space:nowrap;
}

/* evita sforamenti in generale */
header .container{
  min-width:0;
}

/* Lang toggle piccolo e stabile */
.langSwitch{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
}
.langBtn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .65rem;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font-weight:950;
  color:#0f172a;
  transition:.18s;
}
.langBtn:hover{ background:var(--soft); }
.langBtn.isActive{
  background:#0b1220;
  color:#fff;
  border-color:rgba(255,255,255,.12);
}
.langBtn .flag{
  width:16px;
  height:16px;
  border-radius:999px;
  object-fit:cover;
  display:block;
}

/* Drawer: sezione lingua */
.drawerLang{
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.drawerLangTitle{
  font-weight:950;
  margin-bottom:.65rem;
}

/* Mobile: in header in alto SOLO contattaci */
@media (max-width:1024px){
  header .container{
    gap:.75rem;
  }

  /* nascondo lingua e login nella barra top */
  header .headerRight .langSwitch{ display:none !important; }
  header .headerRight .loginBtn{ display:none !important; }

  /* contattaci non deve uscire */
  header .headerRight{
    min-width:0;
  }
  header .headerRight .btn{
    padding:.85rem 1rem;
    max-width:100%;
  }
}

/* Piccoli schermi: contattaci più compatto */
@media (max-width:520px){
  header .headerRight .btn{
    padding:.8rem .95rem;
    font-size:.95rem;
  }
}

/* ===== FIX: CTA "Contattaci" nel drawer (mobile menu) ===== */
.drawerCta .btn.btn-primary{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

.drawerCta .btn.btn-primary:hover{
  opacity:.92;
}

/* Se per qualche motivo "Contattaci" finisce come secondary dentro al drawer */
.drawerCta .btn.btn-secondary{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

/* Evita che eventuali regole su link del drawer rendano il testo scuro */
.drawerCta .btn *{
  color:inherit !important;
}