/* Modern, minimal styles for the Indian Food homepage */
:root{
  --bg-1: #0f172a;
  --bg-2: #2b2e4a;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.06);
  --accent: #ff7a59;
  --muted: rgba(255,255,255,0.72);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #eef2ff;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(255,122,89,0.08), transparent 10%),
              linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:1080px;
  margin:0 auto;
  padding:2rem;
}

.site-header{
  position:sticky;
  top:0;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family: 'Merriweather', serif;
  margin:0;
  font-weight:700;
  letter-spacing:0.6px;
}
.nav a{
  color:var(--muted);
  margin-left:1.25rem;
  text-decoration:none;
  font-weight:500;
  transition:color .18s ease, transform .18s ease;
}
.nav a:hover{color:var(--accent);transform:translateY(-2px)}

.hero{
  padding:4rem 0 2rem 0;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:2rem;
  align-items:center;
}
.hero-text h2{
  margin:0 0 .5rem 0;
  font-size:2rem;
  font-family: 'Merriweather', serif;
}
.lead{
  color:var(--muted);
  margin-top:0.25rem;
  margin-bottom:1rem;
}
.btn-primary{
  display:inline-block;
  background:linear-gradient(90deg,var(--accent),#ffb86b);
  color:#111;
  padding:.65rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 18px rgba(255,122,89,0.12);
}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  padding:1.25rem;
  border-radius: var(--radius);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}
.hero-card .spice{width:100%;height:180px;border-radius:12px}
.card-caption{margin-top:.75rem;color:var(--muted);font-size:.95rem}

.section{padding:2.5rem 0}
.section h3{margin:0 0 1rem 0;font-family: 'Merriweather', serif}
.section p{color:var(--muted);line-height:1.6}

.grid .cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1rem;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card h4{margin:.2rem 0 .5rem 0}
.card p{margin:0;color:var(--muted)}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}

.recipe ol{color:var(--muted);line-height:1.7}
.note{color:#ffd8c2;margin-top:.5rem}

.site-footer{
  padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,0.02);
  margin-top:3rem;
}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.small{color:var(--muted);font-size:.9rem}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .grid .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .nav{display:none}
  .grid .cards{grid-template-columns:1fr}
  .container{padding:1rem}
  .hero-card .spice{height:140px}
}