/* Base styles */
:root{
  --bg-white:#ffffff;
  --bg-light:#eaf7ef; /* light green band */
  --saffron:#ff9933; /* Indian saffron */
  --text:#212529;
  --muted:#5f6b75;
  --accent:#2e7d32; /* deep green */
  --link:#0b6efd;
  --maxw:1200px;
  --radius:12px;
  --shadow:0 8px 24px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    linear-gradient(180deg, var(--bg-white) 0 200px, var(--bg-light) 200px 1000px, var(--bg-white) 1000px 100%);
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.hidden{display:none}

/* Header */
.topbar{background:var(--saffron); color:#111;}
.topbar .container{display:flex; align-items:center; justify-content:space-between; padding:10px 20px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand .logo{width:40px; height:40px; border-radius:8px; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow)}
.brand a{color:#111; text-decoration:none}

nav.primary{background:rgba(255,255,255,0.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eceff1}
nav.primary .container{display:flex; align-items:center; gap:16px; padding:10px 20px}
nav.primary ul{list-style:none; display:flex; gap:8px; padding:0; margin:0}
nav.primary a{display:block; padding:10px 14px; border-radius:8px; text-decoration:none; color:var(--text); font-weight:500}
nav.primary a:hover, nav.primary a.active{background:var(--bg-light); color:var(--accent)}
.menu-toggle{display:none}

/* Hero */
.hero{padding:48px 0}
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.hero h1{font-size:2.25rem; line-height:1.2; margin:0 0 12px}
.hero p.lead{font-size:1.125rem; color:var(--muted)}
.hero .panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.badge{display:inline-block; background:linear-gradient(90deg,var(--saffron),#ffd7b0); color:#111; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.85rem}

/* Content */
main{padding:24px 0 60px}
.section{margin:28px 0}
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.grid{display:grid; gap:20px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}

blockquote{margin:0; padding:16px 20px; background:var(--bg-light); border-left:4px solid var(--accent); border-radius:8px}
hr{border:none; border-top:1px solid #e5e8eb; margin:28px 0}

/* Forms */
form{display:grid; gap:14px}
.input{
  display:grid; gap:6px
}
.input label{font-weight:600}
.input input, .input textarea, .input select{
  padding:12px 14px; border:1px solid #dfe5ea; border-radius:10px; font:inherit; outline:none; background:#fff
}
.input input:focus, .input textarea:focus, .input select:focus{border-color:#b6d7bf; box-shadow:0 0 0 3px #e0f2e9}
button.btn{background:var(--accent); color:#fff; padding:12px 18px; border:none; border-radius:10px; font-weight:700; cursor:pointer}
button.btn:hover{opacity:.92}
button.btn.secondary{background:#0b6efd}

.notice{padding:12px 14px; border-radius:10px; background:#fffbe6; border:1px solid #ffecb5}
.success{padding:12px 14px; border-radius:10px; background:#e7f8ec; border:1px solid #b7e4c7}
.error{padding:12px 14px; border-radius:10px; background:#fdecea; border:1px solid #f5c2c7}

/* Footer injected */
#app-footer{margin-top:40px}
.footer{background:#111; color:#ddd}
.footer a{color:#ffd7b0}
.footer .container{padding:28px 20px}
.footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.footer small{color:#aaa}

/* Responsive */
@media (max-width: 980px){
  .hero .wrap{grid-template-columns:1fr}
  .grid.two, .grid.three{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex; margin-left:auto}
  nav.primary ul{display:none}
  nav.primary.open ul{display:flex; flex-direction:column; width:100%}
  nav.primary .container{flex-wrap:wrap}
}