:root{
  --primary:#003169;
  --accent:#FDBB00;
  --ink:#0b1020;
  --muted:#5b6b84;
  --surface:#ffffff;
  --card:#f7f8fc;
  --border:#e6e8f0;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Layout */
*{box-sizing:border-box}
.index-wrap{ max-width:1000px; width:92%; margin:16px auto 84px; }

/* HERO: gradient albastru pal → alb (light) */
.hero{
  background:
    radial-gradient(1100px 520px at 20% -10%, rgba(0,49,105,.14), transparent 60%),
    linear-gradient(135deg, #EEF4FF 0%, #FFFFFF 100%),
    #ffffff;
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
}
.hero-inner{ padding:28px 20px 22px; text-align:center; }
.hero-title{
  margin:0 0 8px;
  font-size: clamp(1.2rem, 1.05rem + 1vw, 1.85rem);
  line-height:1.15; color:var(--ink);
}
.hero-sub{
  margin:0 auto 18px; max-width:700px; color:var(--muted);
  font-size:.92rem; line-height:1.5;
}

/* CTA buttons */
.hero-ctas{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; text-decoration:none;
  font-weight:600; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn i{ font-size:1rem; }
.btn-primary{
  background:#003169; color:#fff; border-color:#003169;
  box-shadow:0 6px 16px rgba(0,49,105,.25);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,49,105,.28); }
.btn-ghost{
  background:#fff; color:var(--primary); border:1px solid var(--primary);
}
.btn-ghost:hover{ transform:translateY(-1px); }

/* STATS: wrapper ALB + carduri ALBE (mai mici ca să nu rupă pe rânduri) */
.stats{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  padding:10px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  margin-top:8px;
}
.stat{
  background:#fff;
  border:1px solid var(--border);
  color: var(--ink);
  border-radius:12px;
  padding:8px 10px; min-width:120px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  text-align:center;
}
.stat-num{
  display:block; font-weight:800; font-size:.96rem; color:#003169; letter-spacing:.2px;
  white-space:nowrap;
}
.stat-label{
  display:block; font-size:.74rem; color:#5b6b84;
  white-space:nowrap;
}

/* chiar mai compacte pe ecrane înguste */
@media (max-width:420px){
  .stat{ min-width:108px; padding:7px 8px; }
  .stat-num{ font-size:.9rem; }
  .stat-label{ font-size:.7rem; }
}

/* Feature cards */
.feature-cards{
  display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 8px;
}
.feature-card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 14px;
  text-decoration:none; color:inherit; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.feature-card i{ font-size:1.5rem; color:var(--primary); margin-bottom:6px; display:block; }
.feature-card h3{ margin:4px 0 4px; font-size:1rem; color:var(--ink); }
.feature-card p{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.45; }

/* Top-Up ca opțiune primară */
.feature-card.is-primary{
  border-color: rgba(0,49,105,.35);
  box-shadow: 0 0 0 2px rgba(0,49,105,.18), 0 8px 20px rgba(0,0,0,.07);
}
.feature-card.is-primary i,
.feature-card.is-primary h3{ color:var(--primary); }
@media (min-width:640px){ .feature-cards{ grid-template-columns:1fr 1fr; } }

/* How it works */
.howitworks{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 14px; margin:12px 0 8px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.section-title{ margin:0 0 12px; font-weight:800; color:var(--ink); font-size:1.08rem; letter-spacing:.2px; }
.how-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.how-item{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px; text-align:center;
}
.how-item i{ font-size:1.25rem; color:var(--primary); margin-bottom:6px; display:block; }
.how-item h4{ margin:4px 0; font-size:.96rem; }
.how-item p{ margin:0; color:var(--muted); font-size:.84rem; }
@media (min-width:640px){ .how-grid{ grid-template-columns:repeat(3,1fr); } }

/* === Brands (slider fără săgeți/dots, centrat) === */
.brands{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 12px; margin:12px 0 8px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.text-center{ text-align:center; }

.brands .slider{ position:relative; overflow:hidden; border-radius:var(--radius); }
.brands .slides{ display:flex; width:100%; transition:transform .45s ease; }
.brands .slide{
  flex:0 0 100%;
  display:flex; justify-content:center; align-items:center;
  gap:18px; padding:10px 6px;
}
.brand-logo{
  height:48px; width:auto; display:block;
  border:none; box-shadow:none; background:transparent; filter:none;
}
@media (max-width:420px){ .brand-logo{ height:42px; } }

/* Marketplace */
.mp-section{ margin-top:10px; }
.mp-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:10px;
}
.mp-app{
  flex:0 1 45%; text-align:center; text-decoration:none; color:inherit; max-width:180px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:12px 10px; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.mp-app:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.mp-app img{ width:88px; height:88px; border-radius:18px; display:block; margin:0 auto 8px; }
.mp-app h3{ font-size:.94rem; margin:0; font-weight:700; color:var(--ink); }
.mp-app p{ font-size:.78rem; color:var(--muted); margin:6px auto 0; max-width:150px; line-height:1.35; }

/* Dark mode */
[data-theme="dark"] .hero{
  background:
    radial-gradient(1100px 520px at 20% -10%, rgba(21,80,160,.45), transparent 60%),
    linear-gradient(135deg, #0f2d5a 0%, #0b1220 85%),
    #0b1220;
  border-color:#1f2937;
}
[data-theme="dark"] .hero-title{ color:#e5e7eb; }
[data-theme="dark"] .hero-sub{ color:#cbd5e1; }

[data-theme="dark"] .btn-primary{ background:#003169; box-shadow:0 6px 18px rgba(0,0,0,.35); }
[data-theme="dark"] .btn-ghost{ background:transparent; color:#8ab4f8; border-color:#243047; }

[data-theme="dark"] .stats{ background:#0b1220; border-color:#1f2937; }
[data-theme="dark"] .stat{
  background:#0b1220; border:1px solid #243047; color:#e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
[data-theme="dark"] .stat-num{ color:#8ab4f8; }
[data-theme="dark"] .stat-label{ color:#9fb0c9; }

[data-theme="dark"] .feature-card{ background:#0b1220; border-color:#243047; }
[data-theme="dark"] .feature-card h3{ color:#e5e7eb; }
[data-theme="dark"] .feature-card p{ color:#cbd5e1; }
[data-theme="dark"] .feature-card.is-primary{
  border-color:#243047;
  box-shadow: 0 0 0 2px rgba(138,180,248,.18), 0 8px 20px rgba(0,0,0,.25);
}

[data-theme="dark"] .howitworks{ background:#0b1220; border-color:#243047; }
[data-theme="dark"] .how-item{ background:#0f172a; border-color:#243047; }
[data-theme="dark"] .section-title{ color:#e5e7eb; }
[data-theme="dark"] .how-item p{ color:#cbd5e1; }

[data-theme="dark"] .brand-logo{ filter: brightness(.96) saturate(.98); }
/* ===== Dark mode – override central de variabile ===== */
[data-theme="dark"]{
  --surface:#0b1220;
  --card:#0f172a;
  --border:#243047;
  --ink:#e5e7eb;
  --muted:#cbd5e1;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ===== Brands (container + logos) în dark ===== */
[data-theme="dark"] .brands{
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .brand-logo{
  filter: brightness(.96) saturate(.98);
  background: transparent;
  box-shadow: none;
}

/* ===== Marketplace cards în dark ===== */
[data-theme="dark"] .mp-app{
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
[data-theme="dark"] .mp-app h3{ color:var(--ink); }
[data-theme="dark"] .mp-app p{ color:var(--muted); }
[data-theme="dark"] .mp-app img{
  filter: brightness(.96) saturate(.98);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}