/* =========================================================
style4.css v11.6 — sistem fonts, anti-CLS/LCP
— față de v11.5:
  • FIX decisiv: Step 1 centrat pe mobil (fără left/transform)
  • Normalizez .container/.row în contextul Step 1 la <=768px
  • Păstrez cardurile premium Step 2 + restul stilurilor
========================================================= */

/* ==============================
Root, fonts, colors
============================== */
:root{
  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --clr-red:#e30002;
  --clr-white:#fff;
  --clr-black:#000;

  --clr-panel: rgba(0,0,0,.86);
  --clr-muted-1:#cdd5df;

  --ok:#10b981;
  --error:#e74c3c;

  --header-h:64px;

  /* Accente card step 2 */
  --ribbon-popular: linear-gradient(135deg,#ef4444,#dc2626);
  --ribbon-reco:    linear-gradient(135deg,#6366f1,#4f46e5);
  --ribbon-starter: linear-gradient(135deg,#2563eb,#1d4ed8);
  --ribbon-value:   linear-gradient(135deg,#16a34a,#15803d);
  --ring-focus:     0 0 0 3px rgba(99,102,241,.45);
}
@media (max-width:768px){ :root{ --header-h:56px } }

/* ==============================
Base
============================== */
html,body,button,input,select,textarea{ font-family:var(--font-base) }
html, body{ background:#000; color:#fff; font-size:14px; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }
img[width][height]{ height:auto } /* rezervă spațiu corect → anti-CLS */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ==============================
Header
============================== */
header.header-nav{
  padding:10px 0;
  position:absolute;
  top:0; left:0; right:0;
  width:100%;
  z-index:1000;
  background:#000; /* fără transition pe dimensiuni → anti-CLS */
}
header.header-nav.fixed{
  position:fixed;
  background:rgba(0,0,0,.8);
}
header .logo{ display:block; max-height:45px; width:auto; height:auto }

/* ==============================
Headings
============================== */
.treatment-marquee{
  font-family:var(--font-head);
  font-weight:800;
  text-transform:uppercase;
  line-height:1.12;
  letter-spacing:.1px;
  font-size:34px;
}
small.text-uppercase{ letter-spacing:.08em; color:#cbd5e1; opacity:.95 }

/* ==============================
HERO (carousel + generator)
============================== */
.h-100vh{ min-height:100vh; height:auto }

#homepage #carouselExampleFade,
#homepage #carouselExampleFade .carousel-inner,
#homepage #carouselExampleFade .carousel-item.h-100vh{
  height:auto;
  min-height: calc(100vh - var(--header-h));
}
@supports (height:100svh){
  #homepage #carouselExampleFade,
  #homepage #carouselExampleFade .carousel-inner,
  #homepage #carouselExampleFade .carousel-item.h-100vh{
    min-height: calc(100svh - var(--header-h));
  }
}
@supports (height:100dvh){
  #homepage #carouselExampleFade,
  #homepage #carouselExampleFade .carousel-inner,
  #homepage #carouselExampleFade .carousel-item.h-100vh{
    min-height: calc(100dvh - var(--header-h));
  }
}

#homepage .carousel-item.h-100vh{
  display:grid !important;
  place-items:center !important;
  position:relative;
  padding-top: calc(var(--header-h) + 8px);
  padding-bottom:32px;
  padding-inline:16px;
  box-sizing:border-box;
}

/* caption centrat + anti-CLS */
#homepage .caption{
  width:100%;
  max-width:880px;
  margin-inline:auto;
  position:relative;
  z-index:2;
  min-height: clamp(360px, 46vh, 480px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* animație neutră (fără mișcare de layout) */
.animate__bounceIn{ animation: fadeIn .6s ease forwards }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* LCP background image */
#homepage .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:1;
  pointer-events:none;
  aspect-ratio: 16 / 10; /* anti-CLS: 1440x900 ≈ 16:10 */
}
#homepage .carousel-item.h-100vh::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30));
}

/* ==============================
Generator panels & badges
============================== */
.step .step-panel{
  width:min(880px, calc(100vw - 24px));
  margin-inline:auto;
  background:linear-gradient(180deg, rgba(17,24,39,.82), rgba(17,24,39,.76));
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:22px 22px 18px;
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  position:relative;
  backdrop-filter:blur(6px);
  box-sizing:border-box;
}
.step .step-panel::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.step .step-panel > small[aria-current="step"]{ display:none !important }
.step .step-head, .step .step-header{
  display:flex; justify-content:flex-start; align-items:center; margin-bottom:6px;
}
.step .step-head .step-badge,
.step .step-header .step-badge,
.step .step-header small{ letter-spacing:.08em; color:#cbd5e1; opacity:.95 }

/* Step 1 title + subtitle */
.step.step-1 .treatment-marquee{
  font-size:clamp(24px, 2.2vw + 18px, 32px);
  line-height:1.18;
  letter-spacing:.15px;
  font-weight:800;
}
.step.step-1 .hero-sub{
  font-family:var(--font-base);
  font-size:clamp(13px, .6vw + 12px, 16px);
  font-weight:500;
  color:#c8d2e0;
  line-height:1.6;
  margin-top:6px;
  text-align:center;
}

/* ==============================
Form controls & buttons
============================== */
.form-control{
  height:auto; padding:14px; border-radius:6px;
  background:rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; font-weight:700;
}
.form-control::placeholder{ color:#98a2b3 }

.btn{ font-family:var(--font-head); font-weight:800; letter-spacing:.2px }
.btn-red{
  background:var(--clr-red); color:#fff; border:0; border-radius:6px;
  padding:14px 18px; min-width:200px;
}
.btn-red:hover{ filter:brightness(1.06) }
.btn-red:focus{ outline:2px solid rgba(255,255,255,.5); outline-offset:2px }
.btn-black{
  background:#0b0f17; color:#fff; border:1px solid rgba(255,255,255,.14);
  border-radius:8px; padding:12px 16px;
}
.btn-black:hover{ filter:brightness(1.06) }
.btn-small{ padding:9px 12px; font-size:13px; border-radius:8px }
.btn.is-disabled,.btn[disabled],button[disabled]{ opacity:.5; pointer-events:none }
.step.step-1 .btn-red{ min-width:220px; border-radius:10px; box-shadow:0 8px 24px rgba(227,0,2,.35) }

/* Trust badges */
.trust-badges{ opacity:.9 }
.trust-badges li{ color:#cbd5e1 }

/* ==============================
Platform buttons
============================== */
.platform-buttons{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin-top:12px; flex-wrap:wrap;
}
.platform-buttons .btn.pf{
  display:flex; align-items:center; justify-content:center;
  height:54px; min-width:60px; border-radius:8px;
  border:1px solid rgba(141,180,255,.32);
  background:
    linear-gradient(180deg, rgba(32,56,102,.22), rgba(32,56,102,.14)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.platform-buttons .btn.pf:hover{
  transform:translateY(-1px);
  border-color:rgba(176,200,255,.55);
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.platform-buttons .btn.pf.active{ box-shadow:0 0 0 2px rgba(255,255,255,.28) inset, 0 6px 16px rgba(0,0,0,.35) }
.platform-buttons .btn.phone.active{ background:#e6bc00 }
.platform-buttons .btn.switch.active{ background:#e60012 }
.platform-buttons .btn.ps4.active,
.platform-buttons .btn.ps5.active{ background:#0049a0 }
.platform-buttons .btn.steam.active{ background:#000 }
.platform-buttons .btn.xboxone.active,
.platform-buttons .btn.xboxx.active{ background:#107C10 }

/* Errors */
.error-text{ margin-top:6px; font-size:12px; line-height:1.3; font-weight:700; color:var(--error); text-align:left }
.text-center .error-text{ text-align:center }

/* ==============================
Step 2 — VC cards (polish v11.6)
============================== */
.vc-grid{ row-gap:22px }
.btn-coin{ display:block; width:100%; background:transparent; border:0; padding:0; text-align:inherit; cursor:pointer }

.vc-card{
  position:relative; height:100%;
  padding:22px 22px 18px;
  border-radius:20px; text-align:center; color:#e9eef8;
  background:
    radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg,#0f1422 0%, #0b0f19 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, filter .18s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden; isolation:isolate;
  outline:none;
}
.vc-card:hover{ transform:translateY(-2px); box-shadow:0 34px 90px rgba(0,0,0,.62) }
.vc-card:focus-visible{ box-shadow:0 36px 100px rgba(0,0,0,.70), var(--ring-focus) }
.vc-card.is-selected{
  box-shadow:0 36px 100px rgba(0,0,0,.70), 0 0 0 1.5px rgba(253,224,71,.55) inset;
  border-color:rgba(253,224,71,.45);
}

/* Ribbon pe colț din data-badge (fără HTML suplimentar) */
.vc-card::before{
  content: attr(data-badge);
  position:absolute; top:14px; right:-40px; z-index:4;
  transform: rotate(45deg);
  padding:6px 56px;
  font: 900 11px/1 var(--font-head);
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.vc-card[data-badge="popular"]::before{ background:var(--ribbon-popular); content:"MOST POPULAR" }
.vc-card[data-badge="recommended"]::before{ background:var(--ribbon-reco); content:"RECOMMENDED" }
.vc-card[data-badge="starter"]::before{ background:var(--ribbon-starter); content:"STARTER" }
.vc-card[data-badge="value"]::before{ background:var(--ribbon-value); content:"BEST VALUE" }

.vc-card .vc-card-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px; font-size:12px; letter-spacing:.2px; color:#cfd6e3; opacity:.95;
}
.vc-card .js-card-availability{
  font-weight:800; color:#f5c84b; text-transform:uppercase;
  letter-spacing:.18em; font-size:11px;
}
.vc-card .vc-secure{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:#bde8c9; font-weight:700 }
.vc-card .vc-secure .i-shield{ width:12px; height:12px; border-radius:50%; background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.25) }

.vc-coin{ width:140px; height:140px; margin:6px auto 10px; aspect-ratio:1/1; display:block; will-change:transform }
.vc-coin img{ width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 10px 20px rgba(0,0,0,.45)); image-rendering:-webkit-optimize-contrast; aspect-ratio:1/1 }

/* Parallax fin la hover (respectă prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .vc-card:hover .vc-coin{ transform: translateY(-2px) }
}

.vc-amount{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(26px, 2.2vw + 16px, 34px);
  letter-spacing:.3px; color:#fff; margin-top:6px;
}
.vc-meta{
  margin-top:10px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; color:#d5dbea;
  display:inline-flex; align-items:center; gap:6px; opacity:.95;
}
.vc-meta::before{
  content:""; width:14px; height:14px; display:inline-block;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbe7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
}

.vc-badge-row{ position:relative; width:100%; display:flex; justify-content:center; margin-top:0; z-index:3 }
.vc-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  font-weight:900; font-size:12px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(30,41,82,.85), rgba(30,41,82,.65));
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(14px);
}
.vc-badge .i-check{ width:12px; height:12px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.25) }
.vc-badge--starter{ background:linear-gradient(180deg,#2563eb,#1d4ed8); color:#fff }
.vc-badge--popular{ background:linear-gradient(180deg,#ef4444,#dc2626); color:#fff }
.vc-badge--recommended{ background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff }
.vc-badge--value{ background:linear-gradient(180deg,#16a34a,#15803d); color:#eafff0 }

.vc-card .vc-accent{
  position:absolute; left:18px; right:18px; bottom:12px;
  height:6px; border-radius:999px; z-index:1;
  background:linear-gradient(90deg,#f59e0b 0%, #fde047 100%);
  box-shadow:0 8px 16px rgba(245,158,11,.35), 0 0 18px rgba(253,224,71,.25) inset;
}

@media (max-width:640px){
  .vc-card{ border-radius:18px; padding:18px 16px 14px }
  .vc-card .vc-card-header{ font-size:12px }
  .vc-coin{ width:118px; height:118px }
  .vc-amount{ font-size:clamp(22px, 4.2vw, 28px) }
  .vc-badge{ padding:6px 10px; font-size:11px }
}

/* Desktop layout fix Step 2 — două carduri pe rând */
@media (min-width:992px){
  .step.step-2 .container > .vc-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows:1fr !important;
    gap:24px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .step.step-2 .vc-grid > [class^="col"],
  .step.step-2 .vc-grid > [class*=" col"]{
    flex:none !important;
    max-width:100% !important;
    width:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .step.step-2 .vc-grid > [class^="col"] .btn-coin,
  .step.step-2 .vc-grid > [class*=" col"] .btn-coin{ display:flex !important; width:100% }
  .step.step-2 .vc-grid > [class^="col"] .vc-card,
  .step.step-2 .vc-grid > [class*=" col"] .vc-card{ width:100% !important; height:100% !important }

  .step.step-2 .vc-card .vc-card-header{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    gap:4px !important; text-align:center !important; margin-bottom:12px !important;
  }
  .step.step-2 .vc-card .vc-secure{ margin-left:0 !important; font-size:12px !important }
}

/* ==============================
STEP 3 — Review
============================== */
.r-shell{ display:flex; justify-content:center }
#review-card.r-card{
  --glass1: rgba(17,24,39,.82);
  --glass2: rgba(17,24,39,.66);
  --bdr: rgba(255,255,255,.10);

  width:100%; max-width:720px; margin:0 auto;
  padding:22px 22px 18px; border-radius:18px;
  background:
    radial-gradient(110% 80% at 10% -10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--glass1), var(--glass2));
  border:1px solid var(--bdr);
  box-shadow:0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  color:#e9eef8;
}
.r-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
.r-title{ font-family:var(--font-head); font-weight:900; letter-spacing:.2px; font-size:18px; color:#f3f4f6 }
.r-secure{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#bde8c9; white-space:nowrap }
.r-secure .r-dot{ width:10px; height:10px; border-radius:50%; background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.28) }

.r-rows{ display:grid; grid-auto-rows:minmax(40px,auto); gap:12px; margin:6px 0 14px }
.r-row{
  display:grid; grid-template-columns: 180px 1fr; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06);
}
.r-label{ color:#cfd6e3; font-family:var(--font-head); font-weight:800; letter-spacing:.2px }
.r-value{ color:#fff; display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; min-height:24px }
.r-value .r-flag{ width:24px; height:16px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.18) }
.r-value .r-ico{ width:24px; height:24px; opacity:.96 }
.r-vc .r-coin{ width:22px; height:22px; border-radius:50%; object-fit:contain }

.btn-generate{
  width:100%; min-height:48px; margin-top:8px;
  border-radius:12px !important; font-weight:900 !important; letter-spacing:.3px;
  box-shadow:0 14px 38px rgba(227,0,2,.35); position:relative;
}
.btn-generate .i-spark{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle,#fff 0 35%, rgba(255,255,255,.0) 60%);
  opacity:.55; filter:blur(.4px); pointer-events:none;
}

.r-meta{
  margin-top:10px; text-align:center; font-size:12px; color:#9aa4b2;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.r-meta .r-dot.live{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.22) }
.r-divider{ opacity:.55 }

.info-box.summary-card{ background:transparent; border:0; box-shadow:none; padding:0 }
.summary-rows,.summary-row,.summary-row .label,.summary-row .value{ all:unset }

@media (max-width: 640px){
  .r-row{ grid-template-columns:130px 1fr; padding:8px 10px }
  .r-title{ font-size:16px }
  #review-card.r-card{ padding:18px 16px 14px; border-radius:16px; max-width:94vw }
}

/* ==============================
SUCCESS code grid
============================== */
.step-success .summary-card{ max-width:900px; margin:0 auto; position:relative; z-index:5 }
.step-success #code-grid{ display:flex; flex-wrap:nowrap; gap:16px; width:100%; max-width:900px; margin:0 auto 14px }
#code-grid .code-box{
  flex:1 1 0%; min-width:0; height:72px; padding:16px 18px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:900; text-transform:uppercase; letter-spacing:.4px; line-height:1;
  font-size:clamp(20px, 2.6vw, 32px); white-space:nowrap; overflow:hidden;
  background:linear-gradient(180deg,#151a28 0%, #0e1422 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 42px rgba(0,0,0,.5);
  color:#f5f7fb;
}
#code-grid .code-box.masked{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, rgba(255,255,255,.02) 6px 12px),
    linear-gradient(180deg,#0f1320 0%, #0b0e17 100%);
  border:2px dashed rgba(255,255,255,.35);
  color:#cdd5df;
}
#unlock-note{ font-size:13px; color:var(--clr-muted-1); opacity:.95 }

@media (min-width:992px){
  .step-success .offset-lg-3{ margin-left:0 !important }
  .step-success .col-lg-6{ flex:0 0 100% !important; max-width:100% !important }
  .step-success .summary-card{ max-width:920px !important; margin:0 auto !important }
}

/* ==============================
HOW IT WORKS
============================== */
#how-it-works{
  position:relative; padding:64px 0; color:#e5e7eb;
  background:
    radial-gradient(900px 400px at 10% -20%, rgba(239,68,68,.14), transparent 70%),
    radial-gradient(800px 380px at 120% 0, rgba(147,197,253,.12), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#111827 100%);
  z-index:2;
}
#how-it-works .how-wrap{ max-width:1200px; margin:0 auto }
#how-it-works .how-title{ font-size:40px; margin-bottom:10px; color:#F3F4F6; letter-spacing:.3px; font-family:var(--font-head) }
#how-it-works .how-intro{ margin-bottom:18px; color:#b9c2d0; font-size:18px; line-height:1.6 }
#how-it-works .how-steps{ list-style:none; padding:0; margin:0 }
#how-it-works .how-steps li{ display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.06) }
#how-it-works .badge-step{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:900; font-size:16px; color:#fff; background:linear-gradient(135deg,#ef4444 0%,#f59e0b 100%) }
#how-it-works .step-content h3{ margin:0 0 4px; font-size:20px; color:#f3f4f6; font-weight:800; font-family:var(--font-head) }
#how-it-works .step-content p{ margin:0; color:#93a3b5; font-size:15px }
#how-it-works .accent{ color:#fff }
#how-it-works .how-hero{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.45); background:none !important }
#how-it-works .how-hero img{ display:block; width:100%; height:auto; aspect-ratio: 20 / 12 } /* ~1200x720 */
#how-it-works .glass-card{ position:absolute; left:16px; bottom:16px; right:16px; padding:14px 16px; border-radius:12px; backdrop-filter:blur(8px); background:linear-gradient(180deg, rgba(17,24,39,.75), rgba(17,24,39,.55)); border:1px solid rgba(255,255,255,.08); color:#e5e7eb }
#how-it-works .glass-card .gc-row{ display:flex; align-items:center; gap:12px }
#how-it-works .glass-card .coin{ width:28px; height:28px }
#how-it-works .glass-card .gc-title{ font-weight:900; letter-spacing:.2px; font-family:var(--font-head) }
#how-it-works .glass-card .gc-sub{ font-size:12px; color:#9fb1c6 }

/* ==============================
NEWS & GUIDES
============================== */
#latest-news{
  position:relative; margin:0; color:#e5e7eb;
  background:
    radial-gradient(900px 400px at 10% -20%, rgba(239,68,68,.14), transparent 70%),
    radial-gradient(800px 380px at 120% 0, rgba(147,197,253,.12), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#111827 100%);
  z-index:2;
}
#latest-news .wrap{ max-width:1200px; margin:0 auto; padding:56px 16px }
#latest-news h2{ margin:0 0 6px; font-size:40px; line-height:1.1; letter-spacing:.3px; text-align:center; color:#f3f4f6; font-family:var(--font-head); font-weight:900 }
#latest-news p.lead{ margin:0 0 22px; color:#9ca3af; text-align:center }
#latest-news .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
#latest-news .card{
  grid-column:span 6; background:linear-gradient(180deg, rgba(17,24,39,.86), rgba(17,24,39,.72));
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.45); transition:transform .15s,box-shadow .2s,border-color .2s;
}
#latest-news .card:hover{ transform:translateY(-3px); box-shadow:0 28px 60px rgba(0,0,0,.55); border-color:rgba(255,255,255,.16) }
#latest-news .card a{ display:block; color:#cfe1ff; text-decoration:none }
#latest-news .k{ display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid #243142; background:#101826; color:#9ca3af; margin-right:8px }
#latest-news .title{ margin:8px 0 4px; font-size:18px; line-height:1.35; color:#f3f4f6; font-weight:700 }
#latest-news .meta{ color:#93a3b5; font-size:13px; margin-bottom:2px }
#latest-news .btn{ display:inline-block; margin:24px auto 0; padding:10px 18px; border-radius:10px; background:var(--clr-red); color:#fff; text-decoration:none; font-weight:800 }
#latest-news .btn:hover{ filter:brightness(1.08) }
@media (max-width:991.98px){
  #latest-news .grid{ grid-template-columns:repeat(6,1fr) }
  #latest-news .card{ grid-column:span 6 }
}
@media (max-width:576px){
  #latest-news h2{ font-size:32px }
  #latest-news .grid{ grid-template-columns:1fr }
  #latest-news .card{ grid-column:span 1 }
}

/* ==============================
Recent Activity
============================== */
#recent-activity{ background:#000 }
#recent-activity .activities-wrapp .col-12{ padding-left:8px; padding-right:8px }
.ra-card{
  background: linear-gradient(135deg,#5b21b6 0%,#9333ea 35%, #ef4444 100%);
  border-radius:12px; padding:14px 16px; color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.ra-top,.ra-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.ra-pack{ display:flex; align-items:center; gap:8px; font-weight:900; font-family:var(--font-head); letter-spacing:.2px }
.ra-pack .coin{ width:18px; height:18px }
.ra-platform img{ height:16px; opacity:.95 }
.ra-bottom{ font-size:13px; opacity:.95 }
.ra-country{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60% }
.ra-status{ display:flex; align-items:center; gap:6px }
.ra-dot{ width:8px; height:8px; border-radius:50% }
.ra-dot.ok{ background:#10b981 }
.ra-dot.res{ background:#f59e0b }
#ra-list .col-md-4{ margin-bottom:18px }

/* ==============================
Footer (anti-CLS pentru logo-uri)
============================== */
footer{ background:#000; color:#fff; font-size:16px; padding:28px 0; line-height:1.5 }
.size-rating-esrb{
  display:block;
  height:auto;
  max-width:100%;
  aspect-ratio: 33 / 26; /* anti-CLS: 132x104 raport */
}
.copyright-large{ color:#fff; font-size:14px }

/* ==============================
Responsive helpers
============================== */
@media (max-width:991.98px){
  .treatment-marquee{ font-size:32px }
  .step-title{ font-size:20px }
  .step-panel{ max-width:92vw; padding:18px }

  .step-success .summary-card{ max-width:100% }
  .step-success #code-grid{ gap:12px; max-width:100% }
  #code-grid .code-box{ height:60px; padding:12px 14px; border-radius:14px; font-size:clamp(16px,4vw,24px) }
}
@media (max-width:576px){
  .platform-buttons .btn.pf{ height:48px; min-width:54px }
  .summary-row{ grid-template-columns:130px 1fr }
  #review-card{ max-width:100%; padding:22px 18px }

  .step-success .step-panel{ width:min(94vw,560px); margin:0 auto; padding:18px 14px }
  .step-success .summary-card{ padding:22px 18px; border-radius:12px }
  .step-success #code-grid{ gap:10px }
  #code-grid .code-box{ height:54px; padding:12px 12px; border-radius:12px; font-size:clamp(15px,4.6vw,20px) }
}

/* Anchor offset pentru header fix */
html{ scroll-padding-top: calc(var(--header-h) + 12px) }
#get-vc, .step .step-panel{ scroll-margin-top: calc(var(--header-h) + 12px) }

/* ==============================
Email capture (Step 4)
============================== */
.email-card{
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17,24,39,.82), rgba(17,24,39,.68));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: visible;
}
.email-input-wrap{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:14px;
  background: rgba(0,0,0,.35);
  border: 1px dashed rgba(255,255,255,.25);
  overflow: visible;
}
.email-input{
  appearance:none; flex:1 1 auto; min-width:0;
  height:52px; padding:10px 12px; border:0; outline:none;
  background:transparent; color:#fff; font-weight:800; letter-spacing:.3px;
  font-size:clamp(18px, 2.4vw, 28px); border-radius:10px;
}
.email-input::placeholder{ color:#cfd6e3; opacity:.9 }
.email-input:focus{ box-shadow: 0 0 0 3px rgba(99,102,241,.35) }
.btn-submit{
  position:static !important; flex:0 0 auto; height:52px; min-width:168px;
  padding:0 20px; border-radius:10px !important; font-weight:900 !important; letter-spacing:.3px;
  box-shadow:0 14px 38px rgba(227,0,2,.35); white-space:nowrap;
}
.email-error{ margin:10px 6px 0; color:#ff6b6b; font-weight:800 }
.email-note{ margin:8px 6px 0; color:#9aa4b2; text-align:center }
.email-card .traffic-wrap{ margin-top:12px }

@media (max-width: 480px){
  .email-card{ padding: 18px 16px 14px; border-radius: 14px }
  .email-input-wrap{ flex-direction: column; align-items: stretch; gap: 8px; padding: 8px }
  .email-input{ height: 50px; font-size: 18px }
  .btn-submit{ width:100%; height:50px; min-width:0 }
}

/* ==============================
Send modal (mini-generator)
============================== */
.send-modal{ position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.86); backdrop-filter: blur(6px); z-index: 10000 }
.send-modal.d-none{ display:none !important }
.send-box{ width: min(520px, 92vw); color:#fff; background:#0b0f17; border-radius:14px; border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden }
.send-header{ padding:10px 14px; font-weight:900; letter-spacing:.2px; background:linear-gradient(90deg,#7c3aed 0%, #ec4899 60%, #f59e0b 100%) }
.send-body{ padding:18px; display:flex; align-items:center; gap:14px }
.send-spinner{ width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation: spin .7s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }
.send-text{ font-weight:800; color:#e5e7eb }
.send-steps{ margin:10px 0 0; padding-left:0; list-style:none; display:grid; gap:6px; font-weight:700; color:#d6d9e3 }
.send-steps li{ display:flex; align-items:center; gap:8px }
.send-steps .dot{ width:8px; height:8px; border-radius:50%; background:#9aa4b2 }
.send-steps li.active .dot{ background:#22c55e }
.send-steps li.error  .dot{ background:#ef4444 }
.send-footer{ padding:12px 18px 18px; display:flex; justify-content:flex-end; gap:10px }

/* ==============================
Toast
============================== */
.toast-red{
  position: fixed; left:50%; top:24px; transform: translateX(-50%) translateY(-12px);
  background: linear-gradient(180deg,#ef4444,#dc2626);
  color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.35); font-weight:900; letter-spacing:.2px; z-index:11000;
  opacity:0; transition: opacity .18s ease, transform .18s ease;
}
.toast-red.show{ opacity:1; transform: translateX(-50%) translateY(0) }

/* ==============================
Country UI (glass)
============================== */
.country-ui{ max-width: 640px; width:100%; margin:0 auto 16px; position:relative }
.btn-country{
  --txt:#eaf0ff; --txt-dim:#b8c2d9;
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.1rem; border-radius:14px; color:var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  transition:.2s ease; width:100%;
}
.btn-country:hover{ border-color:rgba(255,255,255,.28); transform:translateY(-1px) }
.btn-country:active{ transform:none }
.btn-country:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.45) }
.btn-country .btn-ico{ display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background: radial-gradient(120% 120% at 30% 20%, rgba(99,102,241,.35) 0%, rgba(99,102,241,.1) 45%, transparent 65%); border:1px solid rgba(255,255,255,.12) }
.btn-country .btn-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; animation:cspin .7s linear infinite; display:none }
.country-ui.is-searching .btn-country .btn-spinner{ display:inline-block }
.country-ui.is-searching .btn-country .btn-label{ color:var(--txt-dim) }
@keyframes cspin{ to{ transform:rotate(360deg) } }

.country-chip{
  display:none; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px; padding:.85rem 1rem; width:100%;
  border-radius:16px; color:#f5f7ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) padding-box,
    radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,.45), transparent 60%) border-box;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  animation: chipIn .28s cubic-bezier(.2,.9,.2,1) both;
}
.country-ui.is-detected .country-chip{ display:flex }
@keyframes chipIn{ from{ opacity:0; transform:translateY(8px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }
.country-chip .chip-left{ display:flex; align-items:center; gap:.75rem; min-width:0 }
.chip-flag{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:18px; line-height:1; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08) }
.chip-name{ font-weight:800; letter-spacing:.2px; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chip-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .6rem; border-radius:999px; font-size:.8rem; font-weight:700; color:#dfe7ff; background: rgba(99,102,241,.18); border:1px solid rgba(99,102,241,.35) }

@media (max-width:480px){ .country-ui{ max-width:360px } .chip-name{ font-size:1rem } }
@media (min-width:1024px){
  .country-ui{ max-width:560px; width:100%; margin-left:auto; margin-right:auto }
  .country-ui .country-chip, .country-ui .btn-country{ margin-bottom:8px }
}
@media (min-width:1440px){ .country-ui{ max-width:600px } }
.country-ui.is-detected .btn-country{ display:none }

/* ==============================
Server buttons (Step 1)
============================== */
.server-buttons{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:10px; margin:12px 0 6px;
}
.server-buttons .btn.srv{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:54px; min-width:96px; padding:0 14px; border-radius:8px;
  border:1px solid rgba(141,180,255,.32);
  background:
    linear-gradient(180deg, rgba(32,56,102,.22), rgba(32,56,102,.14)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  color:#eaf0ff; font-weight:800; letter-spacing:.2px;
}
.server-buttons .btn.srv:hover{
  transform:translateY(-1px);
  border-color:rgba(176,200,255,.55);
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.server-buttons .btn.srv.active,
.server-buttons .btn.srv[aria-pressed="true"]{
  border-color:#f5c542;
  box-shadow:0 0 0 2px rgba(245,197,66,.85), 0 6px 16px rgba(0,0,0,.45);
  background:
    linear-gradient(180deg, rgba(255,215,100,.22), rgba(32,56,102,.14)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.server-buttons .btn.srv:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.45), 0 2px 10px rgba(0,0,0,.25) inset;
}
.server-buttons .srv-flag{ width:22px; height:16px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.20) }
.server-buttons .srv-code{ font-size:14px; line-height:1 }
.server-buttons .btn.srv[disabled]{ opacity:.55; pointer-events:none }
@media (max-width:576px){
  .server-buttons .btn.srv{ min-width:82px; height:50px; padding:0 12px }
  .server-buttons .srv-code{ font-size:13px }
}
.error-text.error-server{ margin-top:6px; text-align:center }

/* ==============================
Generator overlay (gen-modal)
============================== */
.gen-modal{position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:center;justify-content:center}
.gen-modal.d-none{display:none!important}
.gen-box{width:min(820px,96vw);background:#000;color:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.10);overflow:hidden}
.gen-header{padding:12px 18px;font-weight:900;letter-spacing:.2px;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#7c3aed 0%,#ec4899 60%,#f59e0b 100%)}
.gen-content{padding:16px;background:radial-gradient(800px 360px at 50% -40%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,#0f1320 0%,#0b0e17 100%);border-top:1px solid rgba(255,255,255,.06);max-height:calc(100vh - 160px);overflow:auto}
.gen-title{margin:2px 0 12px;font-family:var(--font-head);font-weight:900;color:#f3f4f6}
.gen-progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 0 14px}
.gen-progress-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#86efac);border-radius:999px;transition:width .35s ease}
.gen-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.gen-steps{grid-template-columns:1fr}}
.gen-steps li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,#0f1320 0%,#0b0e17 100%);border:1px solid rgba(255,255,255,.08);color:#e5e7eb;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.gen-steps .dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 2px rgba(0,0,0,.35) inset;position:relative}
.gen-steps li.active{border-color:rgba(255,255,255,.18)}
.gen-steps li.active .dot{background:#22c55e;animation:pulseDot 1.4s ease-in-out infinite}
.gen-steps li.done .dot{background:#10b981}
.gen-steps li.done .dot::after{content:"";position:absolute;inset:4px 3px 3px 6px;border-right:3px solid #0b0e17;border-bottom:3px solid #0b0e17;transform:rotate(40deg)}
.gen-steps .label{font-weight:800;letter-spacing:.2px;color:#e5e7eb}
.gen-steps li.done .label{color:#cfd6e3}
@keyframes pulseDot{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,.45)} 70%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(34,197,94,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0)} }

/* ==============================
Mail overlay (delivery)
============================== */
.mail-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.86); backdrop-filter:blur(6px); z-index:11000 }
.mail-overlay.d-none{ display:none !important }
.mail-box{ width:min(820px,96vw); color:#fff; background:#0b0f17; border-radius:14px; border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden }
.mail-head{ padding:12px 18px; background: linear-gradient(90deg,#7c3aed 0%,#ec4899 60%,#f59e0b 100%); font-weight:900; letter-spacing:.2px; display:flex; align-items:center; justify-content:space-between }
.mail-head #mail-title{ font-size:16px }
.mail-head #mail-sub{ font-size:12px; opacity:.95 }
.mail-body{ padding:16px; background: radial-gradient(800px 360px at 50% -40%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, #0f1320 0%, #0b0e17 100%); border-top:1px solid rgba(255,255,255,.06); max-height: calc(100vh - 160px); overflow: auto }
.mail-progress{ height:6px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin-bottom:12px }
.mail-progress #mail-bar{ display:block; height:100%; width:0; background: linear-gradient(90deg,#22c55e,#86efac); border-radius:999px; transition: width .30s ease }
.mail-steps{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.mail-steps li{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background: linear-gradient(180deg,#0f1320 0%,#0b0e17 100%); border:1px solid rgba(255,255,255,.08); color:#e5e7eb }
.mail-steps .dot{ width:10px; height:10px; border-radius:50%; background:#6b7280 }
.mail-steps li.active .dot{ background:#22c55e }
.mail-steps li.done   .dot{ background:#10b981 }
.mail-steps .lbl{ font-weight:800; letter-spacing:.2px }
.mail-warning{ text-align:center }
.mail-warn-title{ margin:4px 0 12px; font-size:20px; font-weight:900; color:#f3f4f6 }
.mail-actions{ margin:8px 0 6px; display:flex; justify-content:center }
.mail-actions .btn-unlock{ min-width:220px; height:48px; border-radius:12px; font-weight:900; letter-spacing:.3px; box-shadow:0 14px 38px rgba(227,0,2,.35) }
.mail-extra{ margin-top:10px; color:#cfd6e3 }
.mail-note{ margin:0 0 6px; font-weight:700 }
.mail-email-line{ margin:0; font-weight:800 }
.mail-email-line .accent{ color:#fff }
@media (max-width: 480px){
  .mail-box{ width:94vw }
  .mail-actions .btn-unlock{ min-width:180px; height:46px }
  .mail-warn-title{ font-size:18px }
}

/* ==============================
Traffic pill (folosit de traffic.js)
============================== */
.traffic-wrap{width:100%;display:flex;justify-content:center;margin:10px 0 6px;box-sizing:border-box}
.traffic-wrap.bottom{margin-top:auto;padding-top:10px}
.traffic-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;background:rgba(17,24,39,.75);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.9rem;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.tp-icon{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);color:#27d17f}
.tp-value{font-weight:700;font-variant-numeric:tabular-nums;color:#27d17f;text-shadow:0 0 6px rgba(39,209,127,.5);transition:transform .18s ease}
.tp-value.tick{transform:scale(1.12)}
.tp-suffix{font-size:.85rem;opacity:.85;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}

/* ==============================
Misc
============================== */
#gen-steps{ list-style:none; margin:0; padding:0 }
#gen-steps .step-item{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px }
#gen-steps .step-item .dot{ width:10px; height:10px; border-radius:50%; background:#c9d2cf; flex:0 0 10px }
#gen-steps .step-item.active .dot{ background:#28a745 }
#gen-steps .step-item.done .dot{ background:#28a745 }
#gen-steps .step-item .label{ line-height:1.2; font-weight:600 }

/* Ascunde butoanele de jos din succes (intenționat) */
#post-unlock-actions, #copy-code, #redeem-link, #new-request{ display:none !important }

/* Platform buttons — mobile safe */
@media (max-width: 768px){
  .platform-buttons{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center; gap:12px 12px }
  .platform-buttons .btn.pf{ flex:0 0 72px; height:52px; padding:8px 10px }
  .platform-buttons .btn.pf img, .platform-buttons .btn.pf svg{ width:22px; height:22px }
}
@media (max-width: 400px){
  .platform-buttons{ gap:10px 10px }
  .platform-buttons .btn.pf{ flex:0 0 64px; height:50px }
}

/* Share Gate X — premium look */
.sgx{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.sgx.is-hidden{display:none}
.sgx__backdrop{position:absolute;inset:0;background:rgba(2,8,23,.72);backdrop-filter:blur(6px)}
.sgx__card{
  position:relative;z-index:1;max-width:680px;width:min(94%,680px);
  border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.88));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 40px 100px rgba(2,8,23,.35), 0 0 0 1px rgba(14,165,233,.08) inset;
  animation:sgxIn .22s ease;
}
@keyframes sgxIn{from{transform:translateY(8px);opacity:.8}to{transform:none;opacity:1}}
.sgx__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(90deg,#e0f2fe,#f8fafc)}
.sgx__eyebrow{font:800 11px/1.1 ui-sans-serif,system-ui;letter-spacing:.06em;text-transform:uppercase;color:#0369a1}
.sgx__close{border:0;background:#eef2f7;color:#64748b;border-radius:12px;padding:6px 10px;cursor:pointer}
.sgx__close:hover{background:#e2e8f0}
.sgx__body{padding:18px 18px 8px}
.sgx__title{margin:0;font:800 20px/1.25 ui-sans-serif,system-ui;color:#0f172a}
.sgx__subtitle{margin:6px 0 0;color:#334155;font:500 14px/1.5 ui-sans-serif,system-ui}
.sgx__bullets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 12px;padding:0;list-style:none}
.sgx__bullets li{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font:600 12px/1.35 ui-sans-serif;color:#0f172a}
.sgx__preview{display:flex;gap:12px;align-items:center;border:1px solid #e2e8f0;background:#fff;border-radius:14px;padding:10px 12px}
.sgx__preview img{border-radius:10px;box-shadow:0 6px 14px rgba(2,8,23,.12)}
.sgx__preview-title{font:700 13px/1.25 ui-sans-serif;color:#0f172a}
.sgx__preview-url{font:600 12px/1.2 ui-sans-serif;color:#64748b}
.sgx__actions{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:14px 0 4px}
.sgx__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 16px;border-radius:14px;border:0;cursor:pointer;
  color:#fff;font:800 14px/1 ui-sans-serif;box-shadow:0 12px 28px rgba(2,8,23,.15);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.sgx__btn:active{transform:scale(.985)}
.sgx__btn--fb{background:#1877F2}
.sgx__btn--fb:hover{box-shadow:0 14px 30px rgba(24,119,242,.35)}
.sgx__btn--x{background:#111}
.sgx__btn--x:hover{box-shadow:0 14px 30px rgba(0,0,0,.35)}
.sgx__btn--ghost{background:#0ea5e9;color:#fff;opacity:.9}
.sgx__btn--ghost:hover{opacity:1}
.sgx__hint{margin-top:2px;font:600 12px/1.4 ui-sans-serif;color:#64748b}
.sgx__status{margin:12px 0 0;color:#0f172a;font:700 13px/1.35 ui-sans-serif}
.sgx__foot{display:flex;align-items:center;gap:8px;margin:14px 16px 16px;padding:12px;border-radius:12px;background:#0b1220;color:#cbd5e1;font:600 11px/1.3 ui-sans-serif}

/* ==============================
STEP 1 – centrare + spacing + CTA mărit
============================== */
.step.step-1 .hero-form{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.step.step-1 .btn.proceed,
.step.step-1 .traffic-wrap,
.step.step-1 .trust-badges{
  margin-left:auto; margin-right:auto;
}
.step.step-1 .server-ui,
.step.step-1 .platform-buttons{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
}
.step.step-1 .text-center.mt-2 { margin-top:20px !important; }
@media (min-width:768px){ .step.step-1 .text-center.mt-2 { margin-top:24px !important } }
@media (min-width:1200px){ .step.step-1 .text-center.mt-2 { margin-top:26px !important } }
.step.step-1 .platform-wrapp { margin-bottom:8px !important }
.step.step-1 #step1-proceed,
.step.step-1 .proceed{
  padding:16px 40px !important; font-size:1.12rem !important; min-width:260px !important; border-radius:12px;
}
@media (min-width:768px){
  .step.step-1 #step1-proceed,
  .step.step-1 .proceed{
    padding:18px 48px !important; font-size:1.16rem !important; min-width:300px !important;
  }
}
.step.step-1 .traffic-wrap{ margin-top:10px !important }

/* ===== FIX DECISIV: centrare Step 1 pe mobil (<=768px) ===== */
@media (max-width:768px){
  /* Caption întins și centrat */
  #homepage .step.step-1 .caption{
    width:100% !important; max-width:none !important; margin:0 auto !important;
    padding-left:12px; padding-right:12px;
  }
  /* Cardul generator — centrat fără left/transform */
  #homepage .step.step-1 .step-panel.hero-form{
    width:min(96vw,560px) !important;
    margin:0 auto !important;
    left:auto !important; right:auto !important; transform:none !important; position:relative !important;
    box-sizing:border-box;
  }
  /* Reset bootstrap offset în contextul Step 1 */
  #homepage .step.step-1 .step-panel.hero-form .container{
    width:100% !important; padding-left:0 !important; padding-right:0 !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  #homepage .step.step-1 .step-panel.hero-form .row{
    --bs-gutter-x:12px; margin-left:0 !important; margin-right:0 !important;
  }
  /* Elemente late din card — centrate */
  #homepage .step.step-1 .step-panel.hero-form .btn,
  #homepage .step.step-1 .step-panel.hero-form .btn-coin{
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* ===== Revenire desktop pentru Step 1 ===== */
@media (min-width:769px){
  #homepage .step.step-1 .step-panel.hero-form{
    width:min(880px, calc(100vw - 24px)) !important;
    margin:0 auto !important; left:auto !important; right:auto !important; transform:none !important;
  }
}
/* ==============================
STEP 2 – Cards premium (scoped pe #homepage .step-2 .vc-card.v2)
============================== */
#homepage .step-2 .vc-card.v2{
  --bd: rgba(255,255,255,.10);
  --bd-strong: rgba(255,255,255,.16);
  --txt: #e8eef8;
  --txt-dim: #aab6c9;

  position: relative;
  border-radius: 22px;
  padding: 26px 26px 28px;         /* spațiu „în cadru” */
  color: var(--txt);
  border: 1px solid var(--bd);
  background:
    radial-gradient(160% 120% at 10% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#0e1624 0%, #0b1220 100%);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: visible;                /* panglica nu mai e tăiată */
  box-sizing: border-box;
}
#homepage .step-2 .vc-card.v2::after{
  content:"";
  position:absolute; inset:12px;    /* contur interior un pic mai larg */
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
#homepage .step-2 .vc-card.v2:hover{
  transform: translateY(-4px);
  box-shadow: 0 36px 110px rgba(0,0,0,.65);
}

/* Ribbon diagonal (vizibil complet și cu text încadrat) */
#homepage .step-2 .vc-card.v2::before{
  content: attr(data-badge);
  position: absolute; top: 16px; right: -26px; z-index: 5;
  transform: rotate(45deg);
  padding: 8px 64px;
  font: 900 12px/1 ui-sans-serif,system-ui;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
#homepage .step-2 .vc-card.v2[data-badge*="POPULAR"]::before{ background: linear-gradient(135deg,#ef4444,#b91c1c) }
#homepage .step-2 .vc-card.v2[data-badge*="RECOMMENDED"]::before{ background: linear-gradient(135deg,#22c55e,#15803d) }
#homepage .step-2 .vc-card.v2[data-badge*="STARTER"]::before{ background: linear-gradient(135deg,#2563eb,#1d4ed8) }

/* Header */
#homepage .step-2 .vc-card.v2 .vc-card-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:100%; margin-bottom:10px; color:var(--txt);
  font-size:16px; font-weight:800;
}
#homepage .step-2 .vc-card.v2 .vc-secure{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
#homepage .step-2 .vc-card.v2 .vc-secure .i-shield{
  width:18px; height:18px; border-radius:4px;
  background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.22);
}
#homepage .step-2 .vc-card.v2 .js-card-availability{
  font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:999px;
  color:#a8ffcf; background:rgba(16,185,129,.18); border:1px solid rgba(16,185,129,.38);
}

/* Coin + amount */
#homepage .step-2 .vc-card.v2 .vc-coin{ margin:8px 0 10px; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)) }
#homepage .step-2 .vc-card.v2 .vc-coin img{ width:164px; max-width:36vw; height:auto }
#homepage .step-2 .vc-card.v2 .vc-amount{
  margin-top:10px;                           /* puțin mai jos față de monedă */
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(28px, 3.2vw + 12px, 40px); letter-spacing:.3px; color:#fff;
}

/* Subtitlu (email) – aliniere icon perfectă */
#homepage .step-2 .vc-card.v2 .vc-sub{
  display:inline-flex; align-items:center; gap:8px;
  margin:8px 0 10px; font-size:18px; line-height:1.45; color:#c7d1e1; font-weight:600;
}
#homepage .step-2 .vc-card.v2 .vc-sub .i-mail{
  display:inline-grid; place-items:center;
  width:20px; height:20px; transform:translateY(-.5px);
}
#homepage .step-2 .vc-card.v2 .vc-sub svg{ width:18px; height:18px }

/* Bullets — păstrăm doar „Livrare pe email” ca chip cu emoji */
#homepage .step-2 .vc-card.v2 .vc-bullets{ width:100%; margin:6px 0 12px; padding:0; list-style:none }
#homepage .step-2 .vc-card.v2 .vc-bullets li{
  display:flex; align-items:center; gap:10px; padding:6px 0; color:#e7edf7; font-size:16px; font-weight:700;
}
#homepage .step-2 .vc-card.v2 .vc-bullets li:nth-child(1),
#homepage .step-2 .vc-card.v2 .vc-bullets li:nth-child(3){ display:none !important }
#homepage .step-2 .vc-card.v2 .vc-bullets li:nth-child(2){
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px;
  border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  line-height:1.2; font-weight:800; color:#e7edf7; font-size:0;
}
#homepage .step-2 .vc-card.v2 .vc-bullets li:nth-child(2)::before{
  content:"📧"; font-size:18px; line-height:1;
}
#homepage .step-2 .vc-card.v2 .vc-bullets li:nth-child(2)::after{
  content:"Livrare pe email"; font-size:15px; letter-spacing:.2px; color:#eaf2ff;
}

/* CTA roșu */
#homepage .step-2 .vc-card.v2 .vc-cta{
  margin-top:10px; margin-bottom:12px;     /* spațiu față de chips */
  width:100%;
  background:linear-gradient(180deg,#ef4444,#dc2626);
  color:#fff; border:0; border-radius:16px;
  padding:16px 18px; font-family:var(--font-head); font-weight:900;
  letter-spacing:.2px; font-size:20px; box-shadow:0 18px 46px rgba(239,68,68,.35);
}
#homepage .step-2 .vc-card.v2:hover .vc-cta{ filter:brightness(1.06) }
#homepage .step-2 .vc-card.v2[aria-selected="true"] .vc-cta{ box-shadow:0 22px 56px rgba(239,68,68,.42) }

/* Foot chips – rămân în interiorul conturului */
#homepage .step-2 .vc-card.v2 .vc-foot{
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%; margin-top:10px;   /* coborâte dar în cadru */
  font-size:13px; color:#c1ccdd; font-weight:700;
}
#homepage .step-2 .vc-card.v2 .vc-foot .meta{
  display:inline-flex; align-items:center; gap:6px;
  padding:.32rem .55rem; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--bd-strong); box-shadow:none; white-space:nowrap; line-height:1.1;
}
#homepage .step-2 .vc-card.v2 .vc-foot .meta img,
#homepage .step-2 .vc-card.v2 .vc-foot .meta svg,
#homepage .step-2 .vc-card.v2 .vc-foot .meta i,
#homepage .step-2 .vc-card.v2 .vc-foot .meta [class*="icon"],
#homepage .step-2 .vc-card.v2 .vc-foot .meta [class*="i-"]{
  width:16px; height:16px; display:inline-block; vertical-align:-2px;
  background:none !important; border:0 !important; box-shadow:none !important; opacity:.95;
}

/* Layout desktop: 2 pe rând */
@media (min-width:992px){
  #homepage .step-2 .vc-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:24px !important;
  }
  #homepage .step-2 .vc-grid > [class^="col"],
  #homepage .step-2 .vc-grid > [class*=" col"]{
    padding:0 !important; margin:0 !important; flex:none !important; width:auto !important;
  }
  #homepage .step-2 .vc-grid .btn-coin{ display:flex !important; width:100% }
  #homepage .step-2 .vc-grid .vc-card.v2{ height:100% }
}

/* Mobile refinements Step 2 */
@media (max-width:640px){
  #homepage .step-2 .vc-card.v2{ padding:24px 16px 22px; border-radius:18px }
  #homepage .step-2 .vc-card.v2::before{
    top:8px; right:-20px; padding:6px 48px; font-size:10px; letter-spacing:.1em;
  }
  #homepage .step-2 .vc-card.v2 .vc-card-header{
    flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:6px; margin-bottom:8px;
  }
  #homepage .step-2 .vc-card.v2 .vc-secure{ font-size:15px }
  #homepage .step-2 .vc-card.v2 .vc-secure .i-shield{ width:16px; height:16px; box-shadow:0 0 0 2px rgba(16,185,129,.22) }
  #homepage .step-2 .vc-card.v2 .js-card-availability{ font-size:11px; padding:.25rem .5rem }
  #homepage .step-2 .vc-card.v2 .vc-amount{ font-size:clamp(22px, 6.5vw, 28px) }
  #homepage .step-2 .vc-card.v2 .vc-sub{ font-size:14px; line-height:1.3; margin:4px 0 8px }
  #homepage .step-2 .vc-card.v2 .vc-bullets li{ font-size:14px; padding:3px 0 }
  #homepage .step-2 .vc-card.v2 .vc-cta{ padding:12px 14px; font-size:16px; border-radius:12px; margin-bottom:10px }
  #homepage .step-2 .vc-card.v2 .vc-foot{ gap:8px; font-size:12px; margin-top:8px }
  #homepage .step-2 .vc-card.v2 .vc-foot .meta{ padding:.28rem .5rem; border-radius:10px }
}

/* ==============================
STEP 1 — mobile center helpers (DOAR mobile)
============================== */
@media (max-width:640px){
  #homepage .step-panel.hero-form{
    margin:0 auto !important;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    max-width:94%;
  }
  #homepage .step-panel.hero-form .vc-grid,
  #homepage .step-panel.hero-form > div{
    width:100% !important; justify-content:center !important; text-align:center !important;
  }
  #homepage .step-panel.hero-form button,
  #homepage .step-panel.hero-form .btn-coin{
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* === HARD CENTER pentru panouri (Step 1/2/3) — mobile only === */
@media (max-width:768px){
  /* neutralizează offset/padding de coloană */
  #homepage .step .caption > .container,
  #homepage .step .caption > .container > .row{
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important; width:100% !important;
  }
  #homepage .step .caption > .container > .row > [class*="col-"]{
    flex:0 0 100% !important; max-width:100% !important;
    margin-left:0 !important; padding-left:0 !important; padding-right:0 !important;
  }
  /* caption devine grid → centrare absolută */
  #homepage .step .caption{ display:grid !important; place-items:center !important; width:100% !important }
  /* panoul centrat, fără left/right/transform */
  #homepage .step .step-panel{
    position:static !important; left:auto !important; right:auto !important;
    transform:none !important; float:none !important; clear:both !important;
    display:block !important; width:100% !important; max-width:560px !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  /* orice wrapper direct peste panou */
  #homepage .step .caption > *{ justify-self:center !important; width:100% !important }
}

/* ===== MOBILE: separă clar „Server” / „Platform” ===== */
@media (max-width:540px){
  #homepage .step.step-1 .server-ui,
  #homepage .step.step-1 .platform-wrapp{
    position:relative !important;
    margin:10px 0 14px !important;
    padding:24px 12px 12px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, rgba(15,20,32,.65), rgba(11,15,25,.55)) !important;
    box-shadow:0 14px 36px rgba(0,0,0,.45) !important;
  }
  #homepage .step.step-1 .server-ui::before,
  #homepage .step.step-1 .platform-wrapp::before{
    content: attr(data-label);
    position:absolute; left:12px; top:-12px;
    padding:6px 12px; border-radius:999px;
    font:800 12px/1 ui-sans-serif,system-ui; letter-spacing:.06em; text-transform:uppercase;
    color:#cfe1ff; background:#1e293b; border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 18px rgba(0,0,0,.35);
  }
  /* spațiu între titlu și iconuri */
  #homepage .step.step-1 .server-ui .server-buttons,
  #homepage .step.step-1 .platform-wrapp .d-flex{ margin-top:8px !important }
  /* platform icons – spațiere pe rânduri/coloane */
  #homepage .step.step-1 .platform-wrapp .d-flex{
    display:flex; flex-wrap:wrap; justify-content:center; gap:18px 12px !important;
  }
}

/* 541–768 px: aceleași idei, un pic mai aerisit */
@media (min-width:541px) and (max-width:768px){
  #homepage .step.step-1 .server-ui,
  #homepage .step.step-1 .platform-wrapp{
    position:relative !important;
    margin:12px 0 16px !important;
    padding:26px 14px 14px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, rgba(15,20,32,.65), rgba(11,15,25,.55)) !important;
  }
  #homepage .step.step-1 .server-ui .server-buttons,
  #homepage .step.step-1 .platform-wrapp .d-flex{ margin-top:10px !important }
  #homepage .step.step-1 .platform-wrapp .d-flex{
    display:flex; flex-wrap:wrap; justify-content:center; gap:18px 12px !important;
  }
}

/* Extra mic: rânduri mai aerisite la platforme */
@media (max-width:420px){
  #homepage .step.step-1 .platform-wrapp .d-flex{ gap:20px 12px !important }
}

/* Fallback de bază (dacă JS e blocat) */
#homepage .step.step-1 .platform-wrapp .d-flex{ gap:10px 10px }
#homepage .step.step-1 .sel-group .error-text{
  margin:10px auto 0 !important; text-align:center !important;
  font-weight:800 !important; color:var(--error, #e74c3c) !important;
}
#homepage .step.step-1 .sel-group{ padding-bottom:14px !important }

/* ===== HOTFIX STEP 2 (rapid & sigur) ===== */
#homepage .step-2 .vc-card.v2{
  overflow:hidden;               /* ține totul în card */
  padding-bottom:34px;           /* spațiu suficient pentru chips */
  box-sizing:border-box;
}
#homepage .step-2 .vc-card.v2::after{
  inset:10px;                    /* contur interior corect */
}

/* Ribbon – adus în colțul cardului și încape textul */
#homepage .step-2 .vc-card.v2::before{
  top:14px;
  right:-20px;                   /* mai aproape de colț, dar vizibil */
  transform:rotate(45deg);
  padding:7px 58px;
  font-size:11px;
  pointer-events:none;
}

/* Cantitatea coborâtă un pic față de monedă */
#homepage .step-2 .vc-card.v2 .vc-amount{
  margin-top:12px;
}

/* Subtitlul cu email – icon perfect aliniat pe mijloc */
#homepage .step-2 .vc-card.v2 .vc-sub{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#homepage .step-2 .vc-card.v2 .vc-sub .i-mail,
#homepage .step-2 .vc-card.v2 .vc-sub svg{
  width:18px; height:18px; display:inline-block;
}

/* Spațiu între CTA și chips, iar chips rămân în interior */
#homepage .step-2 .vc-card.v2 .vc-cta{
  margin-bottom:10px;
}
#homepage .step-2 .vc-card.v2 .vc-foot{
  margin-top:10px;
}
#homepage .step-2 .vc-card.v2 .vc-foot,
#homepage .step-2 .vc-card.v2 .vc-bullets{
  position:relative; z-index:2;  /* peste contur, dar în card */
}

/* Mobile – ribbon mai scurt să nu taie marginile */
@media (max-width:640px){
  #homepage .step-2 .vc-card.v2::before{
    right:-26px;
    padding:6px 44px;
    font-size:10px;
  }
}