/* =========================================================
   xServere.NET – PRICING CARDS + FEATURE BOXES (BRAND)
   ========================================================= */

/* ---------- ROOT PALETTE (o singură dată) ---------- */
:root{
  --deal-surface:#0c121e;
  --deal-line:rgba(255,255,255,.08);
  --deal-text:#e6edf3;
  --deal-muted:#9fb0c6;

  /* accente secundare */
  --pink1:#ff7a50; --pink2:#f953c6;
  --green1:#22c55e; --green2:#2bb673;

  /* brand (cyan → blue) */
  --logo1:#00c4ff;  /* cyan */
  --logo2:#2aa7ff;  /* sky */
  --logo3:#1e6bff;  /* royal */
  --logo4:#7fb4ff;  /* ice */
}

/* ---------- GRID SPACING ---------- */
.pricing-wrap{ margin-top:28px }
.pricing-wrap .row{ row-gap:30px }

/* =========================================================
   PRICING CARDS
   ========================================================= */
.card.pricing-card{
  position:relative;
  overflow:visible !important;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),#0c121e !important;
  color:var(--deal-text);
  border:2.5px solid transparent !important;
  border-radius:26px !important;
  padding:36px 28px 30px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.36) !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card.pricing-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 32px 88px rgba(0,0,0,.46) !important }

/* rama gradient – default (pink) */
.card.pricing-card::before{
  content:""; position:absolute; inset:0; padding:3px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background:linear-gradient(135deg,var(--pink1),var(--pink2));
  filter:drop-shadow(0 0 22px rgba(249,83,198,.38));
}
/* rama verde pentru .best */
.card.pricing-card.best::before{
  background:linear-gradient(135deg,var(--green1),var(--green2));
  filter:drop-shadow(0 0 22px rgba(34,197,94,.38));
}
/* rama brand (cyan→blue) */
.pricing-card[data-accent="logo"]::before{
  background:linear-gradient(135deg,var(--logo1) 0%,var(--logo2) 40%,var(--logo3) 75%,var(--logo4) 100%);
  filter:drop-shadow(0 0 22px rgba(42,167,255,.35));
}
/* textură discretă pe card (opțional) */
.pricing-card[data-accent="logo"]{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    repeating-linear-gradient(125deg, rgba(255,255,255,.035) 0 6px, rgba(255,255,255,0) 6px 16px);
  background-blend-mode: screen;
}

/* ribbon */
.card.pricing-card .ribbon{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  padding:8px 14px; border-radius:999px; z-index:5;
  font:900 .8rem/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:#fff; letter-spacing:.02em;
  background:linear-gradient(90deg,var(--pink1),var(--pink2));
  box-shadow:0 12px 28px rgba(249,83,198,.45);
}
.card.pricing-card.best .ribbon{
  background:linear-gradient(90deg,var(--green1),var(--green2));
  box-shadow:0 12px 28px rgba(34,197,94,.45);
}
.pricing-card[data-accent="logo"] .ribbon{
  background:linear-gradient(90deg,var(--logo1),var(--logo3));
  box-shadow:0 12px 28px rgba(42,167,255,.45);
}

/* headings */
.pc-title{ font-weight:1000 !important; font-size:1.55rem !important; letter-spacing:.06em; color:#fff; text-transform:uppercase; margin:0 0 .4rem }
.pc-sub{ color:var(--deal-muted) !important; font-size:1rem !important; margin:0 0 12px !important }

/* prices */
.pc-was{ color:#7e8aa1 !important; text-decoration:line-through; font-size:1rem !important; margin:6px 0 2px !important }
.pc-now{ display:flex; align-items:baseline; gap:8px; margin:0 0 10px !important }
.pc-now .value{ font-weight:1000 !important; font-size:2.7rem !important; color:#fff }
.pc-now .per{ font-size:.98rem !important; color:#a7b5c9 }

/* SAVE pill */
.pc-save{
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
  width:100%; height:36px; border-radius:999px; padding:0 16px;
  font:900 .92rem/36px system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  text-transform:uppercase; color:#fff; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(40% 100% at 20% 0%, rgba(249,83,198,.22), rgba(249,83,198,.12)),
             linear-gradient(180deg, rgba(249,83,198,.18), rgba(249,83,198,.10));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35), 0 12px 26px rgba(249,83,198,.28);
  margin:6px 0 16px;
}
.card.pricing-card.best .pc-save{
  background:radial-gradient(40% 100% at 20% 0%, rgba(34,197,94,.26), rgba(34,197,94,.14)),
             linear-gradient(180deg, rgba(34,197,94,.22), rgba(34,197,94,.12));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35), 0 12px 26px rgba(34,197,94,.28);
}
.pricing-card[data-accent="logo"] .pc-save{
  background:radial-gradient(40% 100% at 20% 0%, rgba(42,167,255,.28), rgba(42,167,255,.14)),
             linear-gradient(180deg, rgba(42,167,255,.22), rgba(42,167,255,.12));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35), 0 12px 26px rgba(42,167,255,.28);
}

/* features list */
ul.pc-features{ list-style:none !important; margin:8px 0 18px !important; padding:0 !important }
.pc-features li{ display:flex; align-items:center; gap:12px; padding:15px 0; color:#d7dfeb !important; border-top:1px solid var(--deal-line) !important }
.pc-features li:first-child{ border-top:0 !important }

/* icon colors by accent */
.pricing-card .pc-features li > i{
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease, opacity .2s ease;
  opacity:.95;
}
.pricing-card .pc-features li:hover > i{ transform:translateX(2px); opacity:1 }

.pricing-card:not(.best):not([data-accent="logo"]) .pc-features li > i{
  color:#ff8bd1 !important; text-shadow:0 0 10px rgba(249,83,198,.35) !important;
}
.pricing-card.best .pc-features li > i{
  color:#4ade80 !important; text-shadow:0 0 10px rgba(34,197,94,.35) !important;
}
.pricing-card[data-accent="logo"] .pc-features li > i{
  color:var(--logo2) !important; text-shadow:0 0 12px rgba(42,167,255,.35) !important;
}

/* SAVE pill small icon tint */
.pricing-card[data-accent="logo"] .pc-save i{ color:#cfe9ff !important }
.pricing-card.best .pc-save i{ color:#d9ffe9 !important }
.pricing-card:not(.best):not([data-accent="logo"]) .pc-save i{ color:#ffe3f4 !important }

/* CTA (premium) + sheen */
.pc-cta{
  display:flex !important; justify-content:center; align-items:center; gap:10px;
  width:100%; border:0 !important; border-radius:14px !important;
  padding:16px 18px !important; text-transform:uppercase !important;
  color:#fff !important; font-weight:1000 !important; letter-spacing:.02em;
  background:linear-gradient(90deg,#3b82f6,#2563eb) !important;
  box-shadow:0 18px 38px rgba(59,130,246,.34) !important;
  position:relative; overflow:hidden;
}
.card.pricing-card.best .pc-cta{
  background:linear-gradient(90deg,var(--green1),var(--green2)) !important;
  box-shadow:0 18px 38px rgba(34,197,94,.34) !important;
}
.pricing-card[data-accent="logo"] .pc-cta{
  background-image:linear-gradient(90deg,var(--logo2),var(--logo3)) !important;
  box-shadow:0 18px 38px rgba(42,167,255,.34) !important;
}
.pc-cta::after{
  content:""; position:absolute; top:-150%; left:-30%;
  width:40%; height:400%; transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,.0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.0) 100%);
  transition:transform .5s ease, opacity .5s ease; opacity:.0;
}
.pc-cta:hover{ filter:brightness(1.07); transform:translateY(-2px) }
.pc-cta:hover::after{ transform:translateX(260%) rotate(20deg); opacity:.9 }

/* ---------- TITLE + SUBTITLE (brand gradient) ---------- */
.section-title-gradient{
  font-weight:1000; text-transform:uppercase; letter-spacing:.05em;
  text-align:center; margin-bottom:1.2rem;
  background:linear-gradient(90deg,var(--logo1) 0%,var(--logo2) 35%,var(--logo3) 70%,var(--logo4) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  font-size:clamp(20px,3.2vw,34px); line-height:1.25;
}
.section-subtitle-gradient{
  text-align:center; font-size:clamp(14px,2vw,18px); margin-top:-6px; margin-bottom:26px; line-height:1.5; font-weight:500;
  background:linear-gradient(90deg,var(--logo1) 0%,var(--logo2) 35%,var(--logo3) 70%,var(--logo4) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
@media (max-width:576px){
  .section-subtitle-gradient{ background:none; -webkit-text-fill-color:initial; color:rgba(255,255,255,.75) }
}

/* =========================================================
   FEATURE BOXES – „De ce să alegi xServere.NET?”
   ========================================================= */
.modern-features .feature-box{
  position:relative; overflow:visible;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)), #0e1522;
  border:2px solid transparent; border-radius:18px;
  padding:22px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;

  /* egalizare pe desktop */
  display:flex; flex-direction:column; justify-content:flex-start; text-align:center;
  min-height:220px;
}
.modern-features .feature-box::before{
  content:""; position:absolute; inset:0; padding:2px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background:linear-gradient(135deg,var(--logo1) 0%,var(--logo2) 40%,var(--logo3) 75%,var(--logo4) 100%);
  filter:drop-shadow(0 0 18px rgba(42,167,255,.35));
}
.modern-features .feature-box:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  filter:brightness(1.02);
}

.modern-features .feature-box i{
  font-size:2.3rem; margin-bottom:14px;
  color:var(--logo2);
  text-shadow:0 0 14px rgba(42,167,255,.35);
  transition:transform .2s ease, color .2s ease, text-shadow .2s ease;
}
.modern-features .feature-box:hover i{
  color:var(--logo3);
  text-shadow:0 0 18px rgba(42,167,255,.45);
  transform:translateY(-1px);
}
.modern-features .feature-box h4{
  color:#e8f1ff; font-weight:800; letter-spacing:.02em; margin-bottom:8px; font-size:1.2rem;
}
.modern-features .feature-box p{
  color:rgba(231,239,255,.86); margin-bottom:0; font-size:.95rem; line-height:1.45; flex-grow:1;
}

/* înălțime auto pe mobil */
@media (max-width:768px){
  .modern-features .feature-box{ min-height:auto }
}

/* accente alternative (dacă dorești manual pe box) */
.modern-features .feature-box[data-accent="green"]::before{
  background:linear-gradient(135deg,#22c55e 0%,#2bb673 100%);
  filter:drop-shadow(0 0 18px rgba(34,197,94,.35));
}
.modern-features .feature-box[data-accent="pink"]::before{
  background:linear-gradient(135deg,#ff7a50 0%,#f953c6 100%);
  filter:drop-shadow(0 0 18px rgba(249,83,198,.35));
}

/* ---------- ICON COLOR VARIATIONS (automat pe poziții) ---------- */
/* prima linie: 1→logo1, 2→logo2, 3→logo3 ; a doua linie reia secvența */
.modern-features .row .col-md-4:nth-child(3n+1) .feature-box i{ color:var(--logo1) }
.modern-features .row .col-md-4:nth-child(3n+2) .feature-box i{ color:var(--logo2) }
.modern-features .row .col-md-4:nth-child(3n+3) .feature-box i{ color:var(--logo3) }
/* efect sheen ca la butonul CTA */
.modern-features .feature-box {
  position: relative;
  overflow: hidden; /* important pt sheen */
}

.modern-features .feature-box::after {
  content: "";
  position: absolute;
  top: -150%; left: -30%;
  width: 40%; height: 400%;
  transform: rotate(20deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transition: transform .6s ease, opacity .6s ease;
  opacity: 0;
}

.modern-features .feature-box:hover::after {
  transform: translateX(260%) rotate(20deg);
  opacity: 1;
}/* =========================================================
   DDoS HERO – glass panel + gradient border (brand)
   ========================================================= */

:root{
  /* folosite deja de pachete – le reutilizăm */
  --logo1:#00c4ff; /* cyan */
  --logo2:#2aa7ff; /* sky */
  --logo3:#1e6bff; /* royal */
  --logo4:#7fb4ff; /* ice */
}

/* Secțiune cu fundal întunecat, grid subtil */
.ddos-hero{
  position: relative;
  padding: 64px 0;
  overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* overlay discret */
.ddos-hero__bg{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  pointer-events:none;
}

/* ilustrația */
.ddos-ill{ filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }

/* Card cu ramă gradient – aceeași tehnică ca la pachete */
.ddos-card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #0c121e;
  border:2.5px solid transparent;
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.36);
  overflow:visible;
}
.ddos-card::before{
  content:"";
  position:absolute; inset:0; padding:3px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background: linear-gradient(135deg, var(--logo1) 0%, var(--logo2) 40%, var(--logo3) 75%, var(--logo4) 100%);
  filter: drop-shadow(0 0 22px rgba(42,167,255,.38));
}
.ddos-card__inner{
  padding:28px 26px;
}

/* Titlu & subtitlu pe brand */
.ddos-title{
  margin:0 0 .5rem;
  font: 900 1.85rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.02em;
  background: linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.ddos-lead{
  color:#e6edf3;
  opacity:.9;
  margin-bottom:12px;
}

/* Listă cu bife luminoase */
.ddos-list{ list-style:none; padding:0; margin:0 0 16px; }
.ddos-list li{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; color:#d7dfeb; border-top:1px solid rgba(255,255,255,.08);
}
.ddos-list li:first-child{ border-top:0; }
.ddos-list i{
  color:var(--logo2);
  text-shadow:0 0 12px rgba(42,167,255,.35);
}

/* Buton CTA – premium + efect sheen ca la .pc-cta */
.ddos-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 18px; border:0; border-radius:14px; text-decoration:none;
  font-weight:1000; text-transform:uppercase; letter-spacing:.02em;
  color:#fff !important;
  background-image: linear-gradient(90deg, var(--logo2), var(--logo3));
  box-shadow:0 18px 38px rgba(42,167,255,.34);
  position:relative; overflow:hidden;
  transition: filter .2s ease, transform .2s ease;
}
.ddos-cta::after{
  content:""; position:absolute; top:-150%; left:-30%;
  width:40%; height:400%; transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
  transition:transform .5s ease, opacity .5s ease; opacity:0;
}
.ddos-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.ddos-cta:hover::after{ transform:translateX(260%) rotate(20deg); opacity:.9; }

/* Responsive */
@media (max-width: 991.98px){
  .ddos-card__inner{ padding:22px 20px; }
  .ddos-title{ font-size:1.6rem; }
}
@media (max-width: 575.98px){
  .ddos-hero{ padding:48px 0; }
  .ddos-title{ font-size:1.4rem; }
}
/* === DDoS HERO – fine-tuning spacing/legibility === */
.ddos-card__inner{
  max-width: 720px;             /* colonne mai înguste = mai aerisit */
  margin: 0 auto;
  padding: 30px 28px;           /* un pic mai mulți "pași" în card */
}

.ddos-lead{
  line-height: 1.55;
  margin-bottom: 14px;
}

.ddos-list li{
  line-height: 1.55;
  padding: 10px 0;              /* separator + aer între puncte */
}

@media (max-width: 991.98px){
  .ddos-card__inner{ padding: 24px 22px; }
}

@media (max-width: 575.98px){
  .ddos-card__inner{ padding: 20px 18px; }
}
/* === DDoS illustration sizing & centering === */
.ddos-ill,
.ddos-ill img{
  display:block;
  margin:0 auto;          /* centrează în coloană */
  width:100%;
  max-width:440px;        /* mărimea dorită (poți ajusta: 420–480px) */
}

/* puțin mai mare pe desktop lat */
@media (min-width:1200px){
  .ddos-ill,
  .ddos-ill img{ max-width:480px; }
}
/* ====================== VPS / COLOCATION – brand glass ====================== */
:root{
  /* folosim deja paleta brand din fișierul tău */
  --logo1:#00c4ff; --logo2:#2aa7ff; --logo3:#1e6bff; --logo4:#7fb4ff;
}

/* fundal discret cu grid + subtil highlight */
.vpsco-hero{
  position:relative;
  padding:64px 0;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* card-ul de conținut (aceeași tehnică de border ca la pachete) */
.vpsco-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #0c121e;
  border:2.5px solid transparent;
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.36);
  overflow:visible;
}
.vpsco-card::before{
  content:"";
  position:absolute; inset:0; padding:3px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background:linear-gradient(135deg, var(--logo1) 0%, var(--logo2) 40%, var(--logo3) 75%, var(--logo4) 100%);
  filter:drop-shadow(0 0 22px rgba(42,167,255,.35));
}
.vpsco-card__inner{ padding:28px 26px; }

/* titluri & text */
.vpsco-title{
  margin:0 0 .5rem;
  font:900 1.8rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.02em;
  background:linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.vpsco-lead{ color:#e6edf3; opacity:.9; margin-bottom:12px; line-height:1.55; }

/* listă */
.vpsco-list{ list-style:none; margin:0 0 18px; padding:0; }
.vpsco-list li{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; color:#d7dfeb;
  border-top:1px solid rgba(255,255,255,.08);
}
.vpsco-list li:first-child{ border-top:0; }
.vpsco-list i{
  color:var(--logo2);
  text-shadow:0 0 12px rgba(42,167,255,.35);
}

/* CTA-uri (primar + alternativ) */
.vpsco-cta-wrap{ display:flex; gap:12px; flex-wrap:wrap; }
.vpsco-cta{
  display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px;
  border:0; border-radius:14px; text-decoration:none;
  font-weight:1000; text-transform:uppercase; letter-spacing:.02em; color:#fff !important;
  background-image:linear-gradient(90deg, var(--logo2), var(--logo3));
  box-shadow:0 18px 38px rgba(42,167,255,.34);
  position:relative; overflow:hidden; transition:filter .2s ease, transform .2s ease;
}
.vpsco-cta::after{
  content:""; position:absolute; top:-150%; left:-30%; width:40%; height:400%; transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
  transition:transform .5s ease, opacity .5s ease; opacity:0;
}
.vpsco-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.vpsco-cta:hover::after{ transform:translateX(260%) rotate(20deg); opacity:.9; }

/* variantă alternativă (contur) */
.vpsco-cta.alt{
  background:transparent;
  border:2px solid transparent;
  color:#dbeafe !important;
}
.vpsco-cta.alt{
  background-image:
    linear-gradient(#0c121e, #0c121e),             /* fill */
    linear-gradient(90deg,var(--logo2),var(--logo3));  /* border */
  background-origin:border-box;
  background-clip:padding-box, border-box;
  box-shadow:none;
}

/* imaginea din dreapta */
.vpsco-ill{ display:block; margin:0 auto; filter:drop-shadow(0 12px 28px rgba(0,0,0,.45)); width:100%; max-width:520px; }
@media (min-width:1200px){ .vpsco-ill{ max-width:560px; } }

/* responsive */
@media (max-width: 991.98px){
  .vpsco-card__inner{ padding:24px 22px; }
  .vpsco-title{ font-size:1.6rem; }
}
@media (max-width: 575.98px){
  .vpsco-hero{ padding:48px 0; }
  .vpsco-title{ font-size:1.45rem; }
  .vpsco-cta{ height:44px; }
}
/* ============================
   VPS / COLOCATION - HERO BACKGROUND + CARD
   ============================ */

/* Background similar DDoS: textură punctată + degrade subtil */
.vpsco-hero{
  position: relative;
  padding: 64px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}

/* optional: folosește o imagine de fundal (webp/svg) — schimbă calea după cum e necesar */
.vpsco-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url('{$WEB_ROOT}/templates/{$template}/img/ruzenko/backgrounds/vps-hero-bg.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:0.22;            /* mic overlay pentru contrast */
  pointer-events:none;
  z-index:0;
  mix-blend-mode:overlay;
}

/* overlay întunecat pentru lizibilitate */
.vpsco-hero .vpsco-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.62)); z-index:1; pointer-events:none;
}

/* card glass (conține text + butoane) */
.vpsco-card{
  position:relative;
  z-index:2; /* deasupra overlay-ului */
  margin-top:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), #0c121e;
  border-radius:18px;
  padding:28px;
  border:2px solid transparent;
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
  overflow:visible;
}

/* border gradient identic cu pachete (brand) */
.vpsco-card::before{
  content:"";
  position:absolute; inset:0; padding:3px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background: linear-gradient(135deg, var(--logo1) 0%, var(--logo2) 40%, var(--logo3) 75%, var(--logo4) 100%);
  filter: drop-shadow(0 0 22px rgba(42,167,255,.30));
  z-index:-1;
}

/* titlu + lead */
.vpsco-title{
  font-weight:800;
  color:var(--logo3);
  font-size:1.6rem;
  margin-bottom:.4rem;
  background: linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.vpsco-lead{ color: rgba(230,237,243,.92); margin-bottom:12px; line-height:1.5; }

/* lista puncte */
.vpsco-list{ list-style:none; padding:0; margin:12px 0 18px; color:#d7dfeb; }
.vpsco-list li{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid rgba(255,255,255,.04) }
.vpsco-list li:first-child{ border-top:0; }
.vpsco-list i{ color:var(--logo2); text-shadow:0 0 10px rgba(42,167,255,.28); margin-top:3px; }

/* CTA buttons (brand) */
.vpsco-cta-wrap{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.vpsco-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; height:44px; border-radius:12px; text-decoration:none;
  font-weight:800; text-transform:uppercase; color:#fff;
  background-image: linear-gradient(90deg, var(--logo2), var(--logo3));
  box-shadow: 0 14px 34px rgba(42,167,255,.2);
  transition: transform .2s ease, filter .12s ease;
}
.vpsco-cta.alt{
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  color: #cfe9ff;
  box-shadow: none;
}
.vpsco-cta:hover{ transform: translateY(-3px); filter:brightness(1.06); }

/* ilustrație (stânga/dreapta) */
.vpsco-ill{ max-width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); transform: translateY(0); }

/* responsive: scădem padding și fonturi */
@media (max-width: 991.98px){
  .vpsco-hero{ padding:48px 0; }
  .vpsco-card{ padding:20px; }
  .vpsco-title{ font-size:1.4rem; }
}
@media (max-width:575.98px){
  .vpsco-hero{ padding:36px 0; }
  .vpsco-card{ padding:16px; border-radius:14px; }
  .vpsco-cta-wrap{ justify-content:center; }
}
/* =========================================================
   VPS & COLOCATION – hero brand (same style as DDoS HERO)
   ========================================================= */

.vpsco-hero{
  position: relative;
  padding: 64px 0;
  overflow: hidden;

  /* fundal întunecat + grid subtil ca la ddos-hero */
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.vpsco-hero__bg{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  pointer-events:none;
}

/* ilustrații decorative (păstrăm imaginile tale) */
.vpsco-art-left{
  position:relative;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
  max-width: 420px;
  margin-inline: auto;
}
.vpsco-art-right{
  position:absolute; right:-10%; bottom:-22px; z-index:0;
  width:min(52vw, 760px);
  opacity:.38;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
  pointer-events:none;
}

/* Card – ramă gradient brand (cyan → blue), ca la pachete/ddos */
.vpsco-card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #0c121e;
  border:2.5px solid transparent;
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.36);
  overflow:visible;
  z-index:1;
}
.vpsco-card::before{
  content:"";
  position:absolute; inset:0; padding:3px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background: linear-gradient(135deg, var(--logo1) 0%, var(--logo2) 40%, var(--logo3) 75%, var(--logo4) 100%);
  filter: drop-shadow(0 0 22px rgba(42,167,255,.38));
}
.vpsco-card__inner{
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 28px;
}

/* titlu + lead identic cu ddos */
.vpsco-title{
  margin:0 0 .5rem;
  font: 900 1.85rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.02em;
  background: linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.vpsco-lead{
  color:#e6edf3; opacity:.9; margin-bottom:14px;
}

/* listă cu bife */
.vpsco-list{ list-style:none; padding:0; margin:0 0 16px; }
.vpsco-list li{
  display:flex; align-items:center; gap:10px;
  line-height:1.55; padding:10px 0;
  color:#d7dfeb;
  border-top:1px solid rgba(255,255,255,.08);
}
.vpsco-list li:first-child{ border-top:0; }
.vpsco-list i{
  color:var(--logo2);
  text-shadow:0 0 12px rgba(42,167,255,.35);
}

/* CTA – același stil premium ca .pc-cta/.ddos-cta */
.vpsco-actions{ display:flex; gap:10px; flex-wrap:wrap }
.vpsco-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 18px; border:0; border-radius:14px; text-decoration:none;
  font-weight:1000; text-transform:uppercase; letter-spacing:.02em;
  color:#fff !important;
  background-image: linear-gradient(90deg, var(--logo2), var(--logo3));
  box-shadow:0 18px 38px rgba(42,167,255,.34);
  position:relative; overflow:hidden;
  transition: filter .2s ease, transform .2s ease;
}
.vpsco-cta::after{
  content:""; position:absolute; top:-150%; left:-30%;
  width:40%; height:400%; transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
  transition:transform .5s ease, opacity .5s ease; opacity:0;
}
.vpsco-cta:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.vpsco-cta:hover::after{ transform:translateX(260%) rotate(20deg); opacity:.9 }

/* responsive */
@media (max-width: 991.98px){
  .vpsco-card__inner{ padding: 24px 22px; }
  .vpsco-title{ font-size:1.6rem; }
  .vpsco-art-right{ right:-28%; width:min(72vw, 720px); opacity:.3 }
}
@media (max-width: 575.98px){
  .vpsco-hero{ padding:48px 0; }
  .vpsco-title{ font-size:1.4rem; }
  .vpsco-card__inner{ padding: 20px 18px; }
}
/* ===== VPS & Colocation – imaginea stângă ===== */
.vpsco-hero .vpsco-ill {
  max-width: 120%;           /* mărit cu 20% */
  margin-left: -10%;         /* compensăm să nu iasă prea mult în afară */
  display: block;
}

@media (max-width: 991.98px){
  .vpsco-hero .vpsco-ill {
    max-width: 100%;         /* pe mobil revine normal */
    margin-left: 0;
    margin-bottom: 20px;     /* un pic de spațiu sub imagine */
  }
}
/* =========================================================
   VPS & COLOCATION HERO – brand look (ca DDoS HERO)
   ========================================================= */
.vpsco-hero{
  position: relative;
  padding: 64px 0;
  overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* overlay discret peste fundal */
.vpsco-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  pointer-events:none;
}

/* imagine de decor pe partea dreaptă (rack-urile albastre) */
.vpsco-hero__bgimg{
  position:absolute;
  right:-8%;
  bottom:-6%;
  width: 60vw;
  max-width: 900px;
  height: 65%;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  opacity:.35;
  pointer-events:none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* card-ul din dreapta: folosim același stil ca ddos-card */
.vpsco-card{ position:relative; }
.vpsco-card.ddos-card{ /* doar alias vizual */ }

/* interior mai aerisit */
.vpsco-card .ddos-card__inner{
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 28px;
}

/* titlu & paragraf */
.vpsco-title{
  margin:0 0 .5rem;
  font: 900 1.85rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.02em;
  background: linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.vpsco-lead{ color:#e6edf3; opacity:.9; line-height:1.55; margin-bottom:12px; }

/* listă bife */
.vpsco-list{ list-style:none; margin:0 0 16px; padding:0; }
.vpsco-list li{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; color:#d7dfeb;
  border-top:1px solid rgba(255,255,255,.08);
}
.vpsco-list li:first-child{ border-top:0; }
.vpsco-list i{ color:var(--logo2); text-shadow:0 0 12px rgba(42,167,255,.35); }

/* butoane (reuse din ddos) */
.vpsco-cta{ composes: ddos-cta; } /* (dacă folosești PostCSS/composes) */
.vpsco-cta{ /* fallback – copiem stilul butonului premium */
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 18px; border:0; border-radius:14px; text-decoration:none;
  font-weight:1000; text-transform:uppercase; letter-spacing:.02em;
  color:#fff !important;
  background-image: linear-gradient(90deg, var(--logo2), var(--logo3));
  box-shadow:0 18px 38px rgba(42,167,255,.34);
  position:relative; overflow:hidden;
  transition: filter .2s ease, transform .2s ease;
}
.vpsco-cta::after{
  content:""; position:absolute; top:-150%; left:-30%;
  width:40%; height:400%; transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
  transition:transform .5s ease, opacity .5s ease; opacity:0;
}
.vpsco-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.vpsco-cta:hover::after{ transform:translateX(260%) rotate(20deg); opacity:.9; }

/* imaginea stângă – MĂRITĂ cu ~20% și împinsă ușor spre interior */
.vpsco-ill{
  max-width: 120%;
  margin-left: -10%;
  display:block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
}

@media (max-width: 1199.98px){
  .vpsco-hero__bgimg{ width: 68vw; height: 58%; opacity:.30; }
}
@media (max-width: 991.98px){
  .vpsco-ill{
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .vpsco-hero__bgimg{ display:none; } /* ascundem decorul pe ecrane înguste */
  .vpsco-card .ddos-card__inner{ padding: 24px 22px; }
  .vpsco-title{ font-size:1.6rem; }
}
@media (max-width: 575.98px){
  .vpsco-hero{ padding:48px 0; }
  .vpsco-card .ddos-card__inner{ padding: 20px 18px; }
  .vpsco-title{ font-size:1.4rem; }
}/* ===== HERO – single background ===== */
#heroCarousel{
  position: relative;
  overflow: hidden;
  min-height: 520px;             /* ajustează după preferințe */
  display: flex;
  align-items: center;
}

.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 100% at 80% 20%, rgba(0,196,255,.08), transparent 60%),
    radial-gradient(60% 100% at 20% 80%, rgba(30,107,255,.08), transparent 60%),
    url("{$WEB_ROOT}/templates/{$template}/img/ruzenko/carousel/banners/cloud-dedicate.png") center/cover no-repeat;
  filter:saturate(1.05);
  z-index:0;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,18,.65), rgba(6,10,18,.65));
  z-index:1;
}

/* conținut */
.hero-slide{ position:relative; z-index:2; color:#eaf3ff; padding:56px 0; }
.hero-title{
  font:900 clamp(26px,4vw,40px)/1.15 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.02em; margin:0 0 10px;
  background:linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.hero-text{ max-width:720px; font-size:clamp(14px,1.6vw,18px); line-height:1.55; color:rgba(231,239,255,.92) }
.hero-cta{ display:inline-flex; gap:10px; margin-top:18px; flex-wrap:wrap }
.hero-cta .btn-brand{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; border:0;
  color:#fff!important; text-transform:uppercase; font-weight:900; letter-spacing:.02em;
  background-image:linear-gradient(90deg,var(--logo2),var(--logo3));
  box-shadow:0 14px 32px rgba(42,167,255,.35); position:relative; overflow:hidden;
}
.hero-cta .btn-brand::after{
  content:""; position:absolute; top:-150%; left:-30%;
  width:40%; height:400%; transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
  transition:transform .5s ease, opacity .5s ease; opacity:0;
}
.hero-cta .btn-brand:hover::after{ transform:translateX(260%) rotate(20deg); opacity:.9; }
.hero-cta .btn-ghost{
  padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  color:#eaf3ff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
}

/* ===== TAB-URI / INDICATORI – centrate jos ===== */
.hero-tabs{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; gap:12px; z-index:3;  /* peste overlay & content */
}
.hero-tab{
  pointer-events:auto;
  padding:10px 18px; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#cfe3ff; backdrop-filter:blur(6px);
  font-weight:700;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.hero-tab:hover{ transform:translateY(-2px) }
.hero-tab.active,
.hero-tab:focus{
  background:rgba(0,196,255,.12);
  border-color:rgba(42,167,255,.45);
  color:#fff;
}

/* responsive */
@media (max-width:991.98px){
  #heroCarousel{ min-height:440px }
  .hero-slide{ padding:40px 0 }
}
@media (max-width:575.98px){
  #heroCarousel{ min-height:380px }
}/* ============ MAP SECTION – brand look (no change to #mapsvg) ============ */

.map-section{
  position: relative;
  padding: 56px 0 64px;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* titlu + subtitlu pe gradientul logo */
.map-section .section-title{
  margin-bottom: 18px;
}
.map-section .section-title h2{
  margin: 0 0 6px;
  font: 1000 clamp(22px,3.2vw,34px)/1.25 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: linear-gradient(90deg,var(--logo1) 0%,var(--logo2) 35%,var(--logo3) 70%,var(--logo4) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.map-section .section-title p{
  margin: 0;
  font-weight: 500;
  font-size: clamp(14px,2vw,18px);
  background: linear-gradient(90deg,var(--logo1) 0%,var(--logo2) 35%,var(--logo3) 70%,var(--logo4) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width:576px){
  .map-section .section-title p{
    background: none; -webkit-text-fill-color: initial; color: rgba(255,255,255,.75);
  }
}

/* cadrul „glass” cu ramă gradient pentru hartă (nu atinge #mapsvg) */
.map-frame{
  position: relative;
  border-radius: 20px;
  padding: 12px;                            /* spațiu pentru rama gradient */
  isolation: isolate;
}
.map-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,var(--logo1) 0%,var(--logo2) 40%,var(--logo3) 75%,var(--logo4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 18px rgba(42,167,255,.35));
  pointer-events: none;
}
.map-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: calc(20px - 10px);
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
  overflow: hidden;
  /* asigură înălțime când harta nu a încărcat încă */
  min-height: 420px;
}

/* #mapsvg rămâne liber, dar îi asigurăm întinderea completă */
#mapsvg{
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;          /* aceeași înălțime ca „scheletul” */
  display: block;
}

@media (max-width: 991.98px){
  .map-glass, #mapsvg{ min-height: 360px; }
}
@media (max-width: 575.98px){
  .map-section{ padding: 44px 0 52px; }
  .map-glass, #mapsvg{ min-height: 300px; }
}
/* Pattern + glow pe secțiune */
#Map{
  position:relative;
  padding:64px 0 72px;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
#Map::after{
  content:"";
  position:absolute; inset:-8% 0 -6%;
  background:radial-gradient(55% 55% at 50% 40%, rgba(42,167,255,.11), rgba(42,167,255,0) 60%);
  z-index:0; pointer-events:none; filter:blur(6px);
}
#Map .section-title h2{
  margin:0 0 .35rem;
  font-weight:1000; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(90deg,var(--logo1) 0%,var(--logo2) 35%,var(--logo3) 70%,var(--logo4) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
#Map .section-title p{ color:rgba(231,239,255,.85) }

/* Stil minim pentru #mapsvg când nu avem container părinte dedicat */
#Map #mapsvg{
  position:relative; z-index:1;
  background:#121a28;
  border-radius:14px;
  min-height:420px;
  box-shadow:
    0 0 0 2px rgba(42,167,255,.18),        /* „cadru” discret cyan */
    inset 0 0 0 1px rgba(255,255,255,.06); /* contur interior fin */
}
@media (max-width: 991.98px){ #Map #mapsvg{ min-height:360px } }
@media (max-width: 575.98px){ #Map #mapsvg{ min-height:300px } }
/* ========== MAP SECTION – brand look, clean & pro ========== */
:root{
  /* paleta brand (există deja în fișier – lăsat aici pentru siguranță) */
  --logo1:#00c4ff;  /* cyan */
  --logo2:#2aa7ff;  /* sky */
  --logo3:#1e6bff;  /* royal */
  --logo4:#7fb4ff;  /* ice */

  --map-bg:#0c121a;          /* suprafață întunecată pentru card */
  --map-dot:rgba(255,255,255,.06); /* puncte pattern fundal secțiune */
}

/* Secțiunea întreagă – pattern discret de puncte + ușor fade spre centru */
#Map{
  position:relative;
  padding: 48px 0 64px;
  background:
    radial-gradient(700px 320px at 70% 40%, rgba(42,167,255,.06), rgba(0,0,0,0) 60%),
    radial-gradient(580px 260px at 30% 60%, rgba(30,107,255,.05), rgba(0,0,0,0) 62%),
    radial-gradient(var(--map-dot) 1px, rgba(0,0,0,0) 1px);
  background-size: auto, auto, 22px 22px;
  background-position: center;
}

/* Titlu + subtitlu pe paleta brand */
#Map .section-title h2{
  margin:0 0 6px;
  font: 1000 clamp(22px,3.4vw,28px)/1.25 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(90deg,var(--logo1),var(--logo3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
#Map .section-title p{
  margin:0 0 18px; font-weight:600;
  color:#b9d6ff; opacity:.9;
}

/* Card container pentru hartă */
.map-card{
  position:relative;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)), var(--map-bg);
  box-shadow:0 18px 48px rgba(0,0,0,.36);
  overflow:hidden;
}

/* Contur gradient “subțire” ca la cardurile de preț – mask trick */
.map-card::before{
  content:""; position:absolute; inset:0; padding:1.5px; border-radius:inherit; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background:linear-gradient(135deg,var(--logo1) 0%,var(--logo2) 40%,var(--logo3) 75%,var(--logo4) 100%);
  filter:drop-shadow(0 0 18px rgba(42,167,255,.28));
}

/* Vignetă foarte fină în colțuri, pentru profunzime */
.map-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.18) 100%);
  mix-blend-mode: normal;
}

/* Harta propriu-zisă (nu schimbăm markup) */
#mapsvg{
  width:100%;
  height: var(--map-h, 460px);   /* ajustezi rapid înălțimea */
}

/* Layout responsiv */
@media (max-width: 1200px){
  #mapsvg{ height: 420px; }
}
@media (max-width: 768px){
  #Map{ padding: 36px 0 48px; }
  #mapsvg{ height: 360px; }
}
@media (max-width: 480px){
  #mapsvg{ height: 320px; }
}
/* ====================== MAP HERO (brand) ====================== */
:root{
  /* deja definești asta mai sus; e aici în caz că această secțiune trăiește separat */
  --logo1:#00c4ff; --logo2:#2aa7ff; --logo3:#1e6bff; --logo4:#7fb4ff;
}

.map-hero{
  position: relative; padding: 54px 0 64px;
  background:
    radial-gradient(1100px 600px at 75% 30%, rgba(42,167,255,.08), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 30% 70%, rgba(30,107,255,.06), rgba(0,0,0,0));
}

/* panoul “glass” cu ramă gradient ca la carduri */
.map-panel{
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #0c121e;
  border: 2.5px solid transparent;
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
  overflow: visible;
}

.map-panel.brand-border::before{
  content:""; position:absolute; inset:0; padding:3px; border-radius:inherit; pointer-events:none; opacity:.98;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background: linear-gradient(135deg, var(--logo1) 0%, var(--logo2) 40%, var(--logo3) 75%, var(--logo4) 100%);
  filter: drop-shadow(0 0 22px rgba(42,167,255,.35));
}

.map-panel__inner{
  position: relative;
  padding: 18px;               /* spațiu între hartă și ramă */
  border-radius: calc(22px - 3px);
}

/* harta – lasă framework-ul să deseneze înăuntru */
#mapsvg{
  width: 100%;
  min-height: clamp(360px, 48vw, 620px);
  border-radius: 18px;
  background:
    radial-gradient(600px 420px at 40% 45%, rgba(0,196,255,.10), rgba(0,0,0,0)),
    radial-gradient(700px 500px at 70% 60%, rgba(30,107,255,.10), rgba(0,0,0,0));
}

/* ========== Pulse markers (opțional) ========== */
.map-panel__inner { position: relative; }

.map-pulse{
  --size: 9px;
  position:absolute; z-index:2;
  left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--logo2);
  box-shadow: 0 0 0 2px rgba(42,167,255,.35), 0 0 14px rgba(42,167,255,.55);
}
.map-pulse::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background: radial-gradient(circle, rgba(42,167,255,.35) 0%, rgba(42,167,255,0) 60%);
  animation: pulse-ring 2.2s ease-out infinite;
}
.map-pulse::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  animation: pulse-core 1.9s ease-in-out infinite;
  pointer-events:none;
}

@keyframes pulse-ring{
  0%   { transform: scale(.6); opacity:.75; }
  70%  { transform: scale(1.25); opacity:.10; }
  100% { transform: scale(1.35); opacity:0; }
}
@keyframes pulse-core{
  0%,100% { transform: scale(1);   opacity:.55; }
  50%     { transform: scale(1.12); opacity:.95; }
}

/* titlu/subtitlu le ai deja – dar dacă secțiunea trăiește separat, păstrăm baseline-ul */
.map-hero .section-title-gradient{ margin-bottom: .6rem; }
.map-hero .section-subtitle-gradient{ margin-bottom: 16px; }

/* Responsive fine-tuning */
@media (max-width: 575.98px){
  .map-panel__inner{ padding: 12px; }
  #mapsvg{ min-height: 320px; }
}
/* =================== MAP FRAME + TOOLTIP LAYER =================== */
.section-title--map { margin-bottom: 14px; }

.map-frame{
  position: relative;
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow: hidden; /* ascunde glow-ul în margini */
}

/* “ramă” gradient la fel ca la carduri */
.map-frame::before{
  content:"";
  position:absolute; inset:0; padding:2px; border-radius: inherit; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background: linear-gradient(135deg, var(--logo1) 0%, var(--logo2) 40%, var(--logo3) 75%, var(--logo4) 100%);
  filter: drop-shadow(0 0 18px rgba(42,167,255,.28));
}

/* harta existentă – o facem responsive dacă pluginul permite */
#mapsvg{ width:100%; height:auto; min-height: 420px; }

/* PIN + TOOLTIP (CSS only) */
.map-pin{
  position:absolute; transform: translate(-50%, -50%);
  display:inline-flex; align-items:center; justify-content:center;
  background: none; border:0; padding:0; cursor:pointer;
  isolation: isolate;  /* ca să ținem efectul deasupra hărții */
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* punctul luminos */
.map-pin .pin-dot{
  width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--logo2) 45%, var(--logo3) 100%);
  box-shadow: 0 0 0 6px rgba(42,167,255,.20), 0 0 16px rgba(42,167,255,.55);
  position: relative;
}
.map-pin .pin-dot::after{
  content:""; position:absolute; inset:-10px; border-radius:999px;
  border:2px solid rgba(42,167,255,.35);
  animation: pin-pulse 2.4s ease-out infinite;
}

/* eticheta */
.map-pin .pin-label{
  position:absolute; left:14px; top:-8px;
  transform: translateY(-100%);
  white-space: nowrap;
  background: rgba(0, 10, 25, .88);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding:10px 12px;
  font-size: .92rem; color:#e7f1ff;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
  pointer-events: none; opacity:0; translate:0 6px;
  transition: opacity .18s ease, translate .18s ease;
}
.map-pin .pin-label b{ font-weight:800; letter-spacing:.01em; display:block; }
.map-pin .pin-label small{ opacity:.8; font-size:.82rem; }

/* show on hover/focus */
.map-pin:hover .pin-label,
.map-pin:focus-visible .pin-label{ opacity:1; translate:0 0; }

/* touch: ține apăsat ușor */
.map-pin:active .pin-label{ opacity:1; }

/* accesibilitate: taste */
.map-pin:focus-visible{ outline: 2px solid var(--logo2); outline-offset: 2px; border-radius: 6px; }

/* micro-anim */
@keyframes pin-pulse{
  0%   { transform: scale(.6); opacity:.9; }
  70%  { transform: scale(1.1); opacity:0; }
  100% { transform: scale(1.1); opacity:0; }
}

/* preferința utilizatorului: reduce motion */
@media (prefers-reduced-motion: reduce){
  .map-pin .pin-dot::after{ animation: none; }
  .map-pin .pin-label{ transition: none; }
}

/* responsive: pe ecrane mici arată sub punct, centrat */
@media (max-width: 576px){
  .map-pin .pin-label{
    left:50%; top:12px; transform: translate(-50%, 0);
  }
}
/* pin tooltip */
.map-pin .pin-label{
  position:absolute; left:14px; top:-8px;
  transform: translateY(-100%);
  white-space: nowrap;
  background: rgba(10, 20, 35, 0.92); /* fundal întunecat semi-transparent */
  border:1px solid rgba(42,167,255,.45); /* cyan subtil */
  border-radius: 10px;
  padding:10px 12px;
  font-size: .9rem;
  color:#eaf6ff;
  box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 12px rgba(42,167,255,.25);
  pointer-events: none;
  opacity:0; translate:0 6px;
  transition: opacity .18s ease, translate .18s ease;
  backdrop-filter: blur(6px);
}

.map-pin .pin-label b{
  color: var(--logo2); /* cyan al brandului */
  font-weight:700;
  display:block;
  margin-bottom: 2px;
}
.map-pin .pin-label small{
  opacity:.85;
  font-size:.8rem;
  color:#cfd7e6;
}
/* ====================== MAP – brand hero ====================== */
.map-hero{
  position: relative;
  padding: 48px 0 72px;
  /* fundal discret: radial glows + grid punctiform */
  background:
    radial-gradient(1100px 600px at 75% 0%, rgba(30,107,255,.16), rgba(30,107,255,0) 60%),
    radial-gradient(800px 500px at 20% 30%, rgba(42,167,255,.10), rgba(42,167,255,0) 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(0,196,255,.08), rgba(0,196,255,0) 60%),
    radial-gradient(1000px 600px at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 32px);
  backdrop-filter: saturate(105%);
}

/* titlu/subtitlu – ușor mai compacte aici */
.section-title--map .section-title-gradient{
  letter-spacing:.06em;
  margin-bottom:.35rem;
}
.section-title--map .section-subtitle-gradient{
  margin-bottom: 22px;
  opacity:.95;
}

/* rama gradient pe brand, cu tehnica content-box mask */
.map-frame{
  position: relative;
  border-radius: 18px;
  padding: 10px;                     /* „grosimea” ramei */
  background: transparent;
  isolation: isolate;
}
.map-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 2px;                      /* contur subțire */
  pointer-events:none; opacity:.98;

  /* masca pentru „border gradient” */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;

  background: linear-gradient(135deg,var(--logo1) 0%,var(--logo2) 40%,var(--logo3) 75%,var(--logo4) 100%);
  filter: drop-shadow(0 0 22px rgba(42,167,255,.35));
}

/* panoul hărții – umbră, rotunjiri, overflow safe */
#Map #mapsvg{
  background: radial-gradient(1200px 700px at 50% 35%, rgba(14,21,34,.85), rgba(11,18,30,.88) 60%),
              #0b1220;
  border-radius: 14px;
  min-height: 420px;
  width: 100%;
  overflow: hidden;                  /* ca să nu iasă elemente din hartă */
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
}

/* responsive tweaks */
@media (max-width: 991.98px){
  .map-hero{ padding: 40px 0 56px; }
  #Map #mapsvg{ min-height: 360px; }
}
@media (max-width: 575.98px){
  .map-hero{ padding: 34px 0 46px; }
  #Map #mapsvg{ min-height: 300px; border-radius: 12px; }
}

.vpsco-cta + .vpsco-cta {
  margin-left: 1px; /* ajustezi după gust: 8px, 10px, 12px etc. */
}




/* === SonicPanel – hero slim (opțional) === */
.hero-slim{padding:28px 0 18px}
.sp-hero{
  position:relative;
  background:
    radial-gradient(60% 100% at 80% 20%, rgba(0,196,255,.08), transparent 60%),
    radial-gradient(60% 100% at 20% 80%, rgba(30,107,255,.08), transparent 60%);
}
.sp-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,18,.55), rgba(6,10,18,.55));
  pointer-events:none;
}
/* === SPACING între secțiuni =============================== */
.pricing-wrap { padding-bottom: 28px; }       /* aer sub pachete */
.section-gap-top { margin-top: 48px; }        /* folosit pe secțiunea de după pachete */
@media (max-width: 991.98px){
  .section-gap-top { margin-top: 32px; }
}

/* === WEB PANEL – fundal + "glass card" ==================== */
.web-panel{
  position: relative;
  padding: 64px 0;
  background:
    radial-gradient(60% 110% at 70% 10%, rgba(0,196,255,.08), rgba(0,114,255,.04) 35%, rgba(0,0,0,0) 60%),
    radial-gradient(70% 120% at 15% 75%, rgba(42,167,255,.10), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* pătratul cu text – „glass” */
.web-panel .info-box{
  background: rgba(12,18,30,.65);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* listă cu bife – spațiere & aliniere */
.web-panel ul { margin: 12px 0 0; padding-left: 0; }
.web-panel li { list-style: none; margin: 8px 0; color: #e6edf3; }
.web-panel li i { width: 20px; margin-right: 6px; color: #2aa7ff; text-shadow: 0 0 10px rgba(42,167,255,.35); }

/* titlu secțiune */
.web-panel h1, .web-panel h2, .web-panel h3 { color:#eaf2ff; margin-bottom: 10px; }
.web-panel p { color: rgba(231,239,255,.9); }
/* ===== DDoS – collapse airy layout ===== */
.ddos-card__inner { line-height: 1.55; }

.ddos-more{
  background: rgba(8, 14, 24, .85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px;
  margin-top: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: #e6edf3;
}

.ddos-more__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
}

.ddos-more__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.ddos-more__list li{
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 0.95rem;
}
.ddos-more__list li:first-child{ border-top: 0; }

/* mic bullet luminos */
.ddos-more__list li::before{
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #2aa7ff;
  box-shadow: 0 0 10px rgba(42,167,255,.6);
}

/* Responsive */
@media (max-width: 991.98px){
  .ddos-more__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .ddos-more__grid{ grid-template-columns: 1fr; }
  .ddos-more{ padding: 14px; }
}
/* ===== CONTROL PANEL (brand look, glass card) ===== */
.control-hero{
  padding: 56px 0 36px;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(0,196,255,.08), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 0% 100%, rgba(30,107,255,.07), rgba(0,0,0,0));
}

.control-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #0c121e;
  border: 2.5px solid transparent;
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
  overflow: visible;
}
.control-card::before{
  content:"";
  position:absolute; inset:0; padding:2.5px; border-radius:inherit; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background: linear-gradient(135deg, var(--logo1,#00c4ff) 0%, var(--logo2,#2aa7ff) 40%, var(--logo3,#1e6bff) 75%, var(--logo4,#7fb4ff) 100%);
  filter: drop-shadow(0 0 20px rgba(42,167,255,.35));
}

.control-title{
  margin: 0 0 .35rem;
  font: 900 1.9rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  letter-spacing:.01em; color:#eaf2ff;
}
.control-lead{
  color:#cfd9ea; margin-bottom:10px; opacity:.95;
}

.control-list ul{
  list-style:none; margin:0 0 4px; padding:0;
}
.control-list li{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-top:1px solid rgba(255,255,255,.08);
  color:#d7dfeb; font-size:.98rem;
}
.control-list li:first-child{ border-top:0; }
.control-list i{
  color:var(--logo2,#2aa7ff); text-shadow:0 0 10px rgba(42,167,255,.35);
}

/* mockup */
.control-mockup{
  position:relative; padding:10px; border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 30px rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.35);
}
.control-mockup img{ display:block; width:100%; height:auto; border-radius:12px; }

/* spacing tidy-up under previous section */
.pricing-wrap{ margin-bottom: 32px; }

/* responsive */
@media (max-width: 991.98px){
  .control-card{ padding: 22px 18px; }
  .control-title{ font-size:1.6rem; }
}
@media (max-width: 575.98px){
  .control-hero{ padding: 42px 0 26px; }
}
/* ====================== CONTROL PANEL HERO ====================== */
.control-panel-hero {
  padding: 60px 0;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.cp-box {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px;
  color: #cbd5e1;
}

.cp-box h2 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}

.cp-box p {
  margin-bottom: 18px;
  font-size: 1rem;
  color: #9ca3af;
}

.cp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
}

.cp-list li {
  font-size: 0.95rem;
  color: #d1d5db;
}

.cp-list i {
  color: #3b82f6;
  margin-right: 8px;
}

.cp-img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(59,130,246,0.4);
  transition: transform .3s ease;
}

.cp-img:hover {
  transform: scale(1.03);
}
.faq-card {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.faq-btn {
  width: 100%;
  text-align: left;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px;
  text-decoration: none;
}

.faq-btn:hover {
  color: #3b82f6;
}

.faq-btn:focus {
  box-shadow: none;
}

.faq-card .card-body {
  background: #191c25;
  color: #cbd5e1;
  padding: 15px 18px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.faq-section {
  background: #191c25;
}

.faq-card {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-card:hover {
  border-color: #3b82f6;
  box-shadow: 0px 4px 12px rgba(59,130,246,0.3);
}

.faq-btn {
  width: 100%;
  text-align: left;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px;
  text-decoration: none;
}

.faq-btn i {
  margin-right: 8px;
  color: #3b82f6;
}

.faq-btn:hover {
  color: #60a5fa;
}

.faq-card .card-body {
  background: #191c25;
  color: #cbd5e1;
  padding: 15px 20px;
  font-size: 0.95rem;
}


/* =========================
   CPANEL PRO – web hosting
   ========================= */
.cpanel-pro {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

/* fundal „brand”: radial glow + pattern subtil */
.cpanel-pro__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 520px at 50% -200px, rgba(0, 140, 255, 0.12), transparent 60%),
    radial-gradient(600px 420px at 10% 100%, rgba(14, 165, 233, .10), transparent 60%),
    radial-gradient(700px 480px at 90% 100%, rgba(99, 102, 241, .12), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, .68) 100%);
  pointer-events: none;
}

/* card „glass” pe conținut */
.cpanel-pro__card {
  position: relative;
  border: 1px solid rgba(148, 163, 184, .16);
  background: linear-gradient(180deg, rgba(17, 24, 39, .55), rgba(17, 24, 39, .42));
  backdrop-filter: blur(4px);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, .35);
}

/* tipografie */
.cpanel-pro__eyebrow {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 999px;
  color: #dbeafe; font-size: .85rem; letter-spacing: .02em;
  margin-bottom: 10px;
  background: rgba(59, 130, 246, .09);
}
.cpanel-pro__title { color: #e6f0ff; margin: 2px 0 8px; }
.cpanel-pro__lead  { color: #cfe4ff; margin-bottom: 14px; }

/* listă features */
.cpanel-pro__item {
  color: #eaf2ff; margin: 6px 0;
  display: flex; align-items: center; gap: .5rem;
}
.cpanel-pro__item i { color: #34d399; }

/* badges tehnice */
.cpanel-pro__badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.cpanel-pro__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #d9ecff; font-size: .85rem; font-weight: 600;
  padding: 6px 10px; border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(30, 41, 59, .45);
}
.cpanel-pro__badge i { color: #60a5fa; }

/* screenshot container */
.cpanel-pro__screen {
  border-radius: 12px;
  background: rgba(2, 6, 23, .35);
  border: 1px solid rgba(148, 163, 184, .14);
  padding: 10px;
}

/* responsive */
@media (max-width: 991.98px) {
  .cpanel-pro__card { padding: 22px 18px; }
  .cpanel-pro { padding: 56px 0; }
}

/* ===== FAQ – brand look / acordeon aerisit ===== */
.faq-section { position: relative; }
.faq-section::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(1000px 520px at 90% 5%, rgba(14,165,233,.12), transparent 65%);
}

.faq-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; margin-bottom:12px;
  box-shadow: 0 12px 32px rgba(2,6,23,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
}
.faq-card .card-header{
  padding:0; background:transparent; border:0;
}
.faq-btn{
  width:100%; text-align:left; padding:14px 16px;
  color:#e8f2ff; font-weight:700; letter-spacing:.2px;
  display:flex; align-items:center; gap:.65rem; text-decoration:none;
}
.faq-btn i{ color:#60a5fa; }
.faq-btn[aria-expanded="true"] i{ color:#93c5fd; }
.faq-card .card-body{
  color:#d9eeff; line-height:1.7; padding:14px 16px 16px;
  border-top:1px solid rgba(255,255,255,.06);
}