/* ----------  Variables & base reset  ---------- */
:root{
  --primary:#5b6cff;
  --secondary:#ff8f5b;
  --dark:#1b1c31;
  --light:#ffffff;
  --bg:#f5f7ff;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--dark);line-height:1.6;}

/* ----------  Global layout helpers  ---------- */
section{padding:4rem 1rem;max-width:1100px;margin:auto;}
h2{font-size:2rem;margin-bottom:1rem;text-align:center;}
.grid{display:grid;gap:2rem;}
@media(min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}

/* ----------  Navigation  ---------- */
nav{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap;}
nav a{color:var(--light);text-decoration:none;font-weight:500;opacity:0.9;transition:opacity .3s;}
nav a:hover{opacity:1;}

/* logo + language toggle */
.logo{height:36px;width:auto;display:block;}
.logo-link{display:flex;align-items:center;margin-right:1.5rem;}
.lang-switch{margin-left:auto;display:flex;gap:.5rem;font-size:1.25rem;}

/* ----------  Hero / headers  ---------- */
header,
.page-hero,
#site-header{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:var(--light);
  padding:4rem 1rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
#site-header{padding:2rem 1rem;}                /* slightly shorter site-wide header */
header::after,
.page-hero::after,
#site-header::after{
  content:"";
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1605902711622-cfb43c4437dc?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
  opacity:.15;z-index:0;
}
header>*,
.page-hero>*,
#site-header>*{position:relative;z-index:1;}

/* ----------  Buttons  ---------- */
.btn{
  display:inline-block;
  background:var(--light);
  color:var(--primary);
  padding:.75rem 1.5rem;
  border-radius:50px;
  font-weight:600;
  text-decoration:none;
  transition:background .3s;
}
.btn:hover{background:rgba(255,255,255,.85);}

/* ----------  Cards, steps, etc.  ---------- */
.card{
  background:var(--light);
  padding:2rem;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  text-align:center;
}
.card h3{margin-bottom:.5rem;font-size:1.25rem;}
.card p{font-size:.95rem;}

#howitworks .step{display:flex;flex-direction:column;align-items:center;text-align:center;}
#howitworks .step-circle{
  width:60px;height:60px;border-radius:50%;
  background:var(--primary);color:var(--light);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;font-weight:600;margin-bottom:1rem;
}

/* ----------  Footer  ---------- */
footer{
  background:var(--dark);
  color:var(--light);
  text-align:center;
  padding:2rem 1rem;
}
footer a{color:var(--secondary);text-decoration:none;font-weight:500;}