:root{
  --bg:#F7F8FA;
  --text:#111827;
  --muted:#6B7280;
  --accent:#1F4BFF;
  --ok:#10B981;
  --plus:#0EA5E9;
  --no:#EF4444;
  --card:#FFFFFF;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 520px at 0% -10%, rgba(31,75,255,.06) 0%, rgba(31,75,255,0) 55%),
    radial-gradient(900px 520px at 100% 110%, rgba(31,75,255,.05) 0%, rgba(31,75,255,0) 60%),
    linear-gradient(180deg,#FAFBFF 0%,#F6F8FD 40%,#F7F8FA 100%);
  color:var(--text);
  line-height:1.6;
}

.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header / Footer simple */
.mini-header,.mini-footer{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:16px 20px;
}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:700}
.brand-box{width:36px;height:36px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.back-link{color:var(--accent);text-decoration:none}
.mini-footer{justify-content:center;color:var(--muted)}

/* Intro */
.compare-intro{padding:24px 0 8px}
.compare-intro h1{font-size:40px;font-weight:800;line-height:1.1;margin-bottom:10px}
.compare-intro p{color:var(--muted)}

/* Legend */
.legend{display:flex;gap:18px;align-items:center;color:var(--muted);font-size:13px;padding:0 22px 12px}
.legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend .ok{background:var(--ok)}
.legend .plus{background:var(--plus)}
.legend .no{background:var(--no)}

/* Table wrapper */
.compare-wrap{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-top:18px}
.compare-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #E5E7EB;background:#F8FAFF}
.badge-rec{background:var(--accent);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;box-shadow:0 6px 16px rgba(31,75,255,.25)}
.table-scroll{overflow:auto}

/* Table */
.table-compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.table-compare thead th{
  position:sticky;top:0;z-index:1;background:#F8FAFF;
  color:var(--text);text-align:left;padding:14px 16px;border-bottom:1px solid #E5E7EB;
}
.table-compare thead th.col-pro{background:linear-gradient(180deg, rgba(31,75,255,.08), #F8FAFF)}
.table-compare .mini-pill{margin-left:6px;font-size:11px;background:#EEF2FF;border:1px solid rgba(31,75,255,.25);border-radius:999px;padding:2px 6px}

/* Stil comun pentru toate titlurile din antetul tabelului */
.table-compare thead th {
  font-weight:900;     /* text îngroșat */
  font-size:1rem;   /* text mai mare */
  color:#0F172A;       /* un negru elegant */
  letter-spacing:0.3px;/* spațiere subtilă */
  text-transform:uppercase; /* opțional – face toate majuscule */
}

.table-compare tbody th,
.table-compare tbody td{
  padding:12px 16px;border-bottom:1px solid #F0F2F5;vertical-align:middle
}
.table-compare tbody tr:nth-child(odd){background:#FBFCFE}
.table-compare .feature{width:36%;font-weight:600}

/* Tokens vizuale */
.ok{color:var(--ok);font-weight:700}
.plus{color:var(--ok);font-weight:700}
.no{color:var(--no)}
.emph{font-weight:800}

/* Cards sumar */
.what-you-get{padding:28px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:20px}
.card h3{font-size:18px;margin-bottom:8px}
.card ul{padding-left:18px;color:var(--muted)}
.card.pro{outline:2px solid rgba(31,75,255,.25)}
.note{margin-top:12px;color:var(--muted);text-align:center}

/* ===== Mobile-friendly card view (sub 760px) ===== */
@media (max-width: 760px){
  .compare-intro h1{font-size:28px}
  /* ascundem header-ul de tabel și redevenim carduri pe rând */
  .table-compare thead{display:none}
  .table-compare,
  .table-compare tbody,
  .table-compare tr,
  .table-compare th,
  .table-compare td{display:block;width:100%}

  .table-compare tr{
    background:#fff;margin:12px 12px;border-radius:12px;box-shadow:var(--shadow);
    border:1px solid #EEF2FF;overflow:hidden
  }

  .table-compare tr .feature{
    background:#F8FAFF;padding:14px 16px;border-bottom:1px solid #E5E7EB;width:100%;
    position:sticky;top:0;z-index:1
  }

  .table-compare td{
    padding:12px 16px;display:flex;justify-content:space-between;gap:12px
  }
  .table-compare td::before{
    content: attr(data-label);
    font-weight:700;color:#374151
  }
}

/* Accessibility focus */
a:focus-visible, .table-scroll:focus-visible{
  outline:3px solid rgba(31,75,255,.45);outline-offset:2px
}