:root{
  --bg:#f1f5f9;          /* fundal general deschis */
  --card:#ffffff;
  --primary:#2563eb;     /* albastru tech clasic */
  --primary-dark:#1e40af;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --badge:#22c55e;

  --section:#f8fafc;
  --accent:#eef2ff;      /* albastru foarte soft */
  --radius:18px;
  --shadow:0 12px 30px rgba(15,23,42,.08);
}




*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Inter',system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

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

section.container{
  background: var(--section);
  border-radius:32px;
}

header{
  background:#c9dcf2;
  border-bottom:1px solid var(--border);
}

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-weight:800;
  font-size:20px;
}

nav a{
  margin-left:20px;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
}

.hero{
  background:
    linear-gradient(
      rgba(241,245,249,.55),
      rgba(241,245,249,.75)
    ),
    url("../images/hero.jpg") center/cover no-repeat;

  text-align:center;
  padding:120px 20px;
}




.hero h1{
  font-size:42px;
  margin-bottom:15px;
}

.hero p{
  font-size:18px;
  color:var(--muted);
}

.btn{
  display:inline-block;
  margin-top:30px;
  padding:14px 34px;
  background:linear-gradient(90deg,#38bdf8,#0ea5e9);
  color:#020617;
  text-decoration:none;
  border-radius:12px;
  font-weight:800;
}

.btn:hover{
  filter:brightness(1.1);
}


.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;

  width:100%;
  max-width:1000px;
  margin:0 auto;
}


.card{
  background:linear-gradient(180deg,#6dcae9 0%, var(--accent) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}


.card h3{margin-top:10px}

.card p{
  color:var(--muted);
  font-size:15px;
}

ul{
  padding-left:18px;
  color:var(--muted);
  font-size:14px;
}

.badge{
  display:inline-block;
  background:var(--badge);
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

footer{
  text-align:center;
  padding:40px;
  font-size:14px;
  color:var(--muted);
}

h1{
  color:#0f172a;
}

h3{
  color:#1d4ed8;
}


.card:hover{
  transform:translateY(-4px);
  transition:all .25s ease;
  box-shadow:0 20px 40px rgba(37,99,235,.15);
}


.card img{
  width:100%;
  height:180px;          /* CONTROLUL CHEIE */
  object-fit:cover;      /* taie elegant, nu deformează */
  border-radius:14px;
  margin-bottom:16px;
  filter:contrast(1.05) saturate(1.05);
}