/* ===========================
   SuvidhaApp (by Saving Mantra)
   Modern White UI - Pure CSS
   =========================== */

:root{
  --bg: #ffffff;
  --soft: #f6f8fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #5b667a;
  --border: rgba(15, 23, 42, 0.12);
  --shadow: 0 10px 30px rgba(2, 8, 23, 0.08);
  --shadow2: 0 6px 16px rgba(2, 8, 23, 0.08);
  --radius: 16px;
  --radius2: 22px;

  /* Accent (change to your brand tone if needed) */
  --accent: #0E5E83;
  --accent2:#0b4a66;

  --container: 1140px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{
  width:min(var(--container), calc(100% - 2rem));
  margin:0 auto;
}

.muted{color:var(--muted)}
.small{font-size:0.9rem}
.m0{margin:0}
.pad{padding:1.2rem}
.link{color:var(--accent); font-weight:600; margin-left:.5rem}
.link:hover{text-decoration:underline}

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.brand-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--border);
}
.brand-title{font-size:1.05rem; font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:.85rem; color:var(--muted); margin-top:2px}

.nav{display:flex; gap:.9rem; align-items:center}
.nav-link{
  font-weight:650;
  color: rgba(15,23,42,0.80);
  padding:.45rem .6rem;
  border-radius:12px;
}
.nav-link:hover{background: var(--soft)}
.nav-link.active{color: var(--accent); background: rgba(14,94,131,0.10)}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  background: var(--text);
  border-radius:8px;
}

/* Mobile nav */
@media (max-width: 900px){
  .nav{display:none}
  .nav-toggle{display:block}
  body.nav-open .nav{
    display:flex;
    position:absolute;
    right:1rem;
    top:72px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow: var(--shadow);
    padding:.7rem;
    flex-direction:column;
    width:220px;
  }
}

/* Hero */
.hero{
  padding: 2.2rem 0 1.2rem;
  background:
    radial-gradient(900px 380px at 10% 10%, rgba(14,94,131,0.12), transparent 60%),
    radial-gradient(900px 380px at 90% 20%, rgba(14,94,131,0.10), transparent 55%),
    #fff;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:1.2rem;
  align-items:stretch;
}
.hero-copy h1{
  margin: .8rem 0 .6rem;
  font-size: clamp(1.8rem, 2.6vw, 3.1rem);
  line-height:1.05;
  letter-spacing:-0.4px;
}
.accent{color: var(--accent)}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(14,94,131,0.25);
  background: rgba(14,94,131,0.08);
  font-weight:700;
  color: var(--accent2);
  font-size:.88rem;
}

.hero-stats{
  margin-top: 1.1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.75rem;
}
.stat{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:.9rem;
  box-shadow: var(--shadow2);
}
.stat-num{font-weight:900; font-size:1.25rem}
.stat-label{color:var(--muted); font-size:.92rem; margin-top:.15rem}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
}
.hero-card{padding:1.1rem}
.card-title{margin:.15rem 0 .2rem; font-size:1.15rem; font-weight:850}
.card-sub{margin:0 0 .9rem; color:var(--muted)}

.form{display:flex; flex-direction:column; gap:.8rem}
.field{display:flex; flex-direction:column; gap:.35rem; font-weight:700}
.field span{font-size:.92rem; color:rgba(15,23,42,0.82)}
input, select, textarea{
  padding:.85rem .9rem;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  font-size: 1rem;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(14,94,131,0.55);
  box-shadow: 0 0 0 4px rgba(14,94,131,0.12);
}
textarea{resize:vertical}

.hint{
  margin-top:.2rem;
  color: var(--muted);
  font-size:.92rem;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1rem;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{box-shadow: var(--shadow2); background: var(--soft)}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: var(--accent);
  border-color: rgba(14,94,131,0.35);
  color:#fff;
}
.btn-primary:hover{background: var(--accent2)}

/* Sections */
.section{padding: 2.1rem 0}
.section.soft{background: var(--soft)}
.section-head{margin-bottom: 1rem}
.section-head h2{
  margin:0 0 .35rem;
  font-size: 1.55rem;
  letter-spacing:-0.2px;
}
.section-head p{margin:0}

/* Grids */
.grid{display:grid; gap:1rem}
.grid.cards{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cat-grid{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid.steps{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid.benefits{grid-template-columns: repeat(4, minmax(0,1fr))}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; }
  .grid.cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.cat-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.steps{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.benefits{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .hero-stats{grid-template-columns: 1fr}
  .grid.cards{grid-template-columns: 1fr}
  .grid.cat-grid{grid-template-columns: 1fr}
  .grid.steps{grid-template-columns: 1fr}
  .grid.benefits{grid-template-columns: 1fr}
}

/* Item cards */
.item-card{padding:1.05rem}
.item-top{display:flex; flex-direction:column; gap:.45rem}
.item-title{font-weight:900; font-size:1.05rem; letter-spacing:-0.15px}
.item-meta{display:flex; flex-wrap:wrap; gap:.45rem}
.badge{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: #fff;
  font-size:.86rem;
  color: rgba(15,23,42,0.78);
  font-weight:750;
}
.item-bottom{
  margin-top: .8rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.price{font-weight:950; font-size:1.15rem}
.price span{font-size:.9rem; font-weight:750; color:var(--muted); margin-left:.25rem}

/* Category tiles */
.cat{
  padding:1.05rem;
  border-radius: var(--radius2);
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  transition: transform .08s ease, box-shadow .2s ease;
}
.cat:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.cat-name{font-weight:900; letter-spacing:-0.1px}
.cat-cta{color: var(--accent); font-weight:900}

/* Steps */
.step{padding:1.1rem}
.step-num{
  width:40px; height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  background: rgba(14,94,131,0.12);
  color: var(--accent2);
  border:1px solid rgba(14,94,131,0.25);
  margin-bottom:.7rem;
}

/* Benefits */
.benefit{padding:1.1rem}

/* Video */
.video{
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background:#000;
}
.video iframe{
  width:100%;
  aspect-ratio: 16/9;
  display:block;
}

/* Alerts */
.alert{
  padding: .85rem 1rem;
  border-radius: 16px;
  border:1px solid var(--border);
  margin: .8rem 0;
  font-weight:750;
}
.alert.success{
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.22);
}
.alert.error{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.20);
}

/* Empty state */
.empty{
  border:1px dashed rgba(15,23,42,0.25);
  border-radius: var(--radius2);
  padding: 1.3rem;
  background:#fff;
}

/* Form grid */
.form-card{padding:1.1rem}
.form-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 680px){ .form-grid{grid-template-columns:1fr} }

/* About page hero */
.page-hero{
  padding: 2.2rem 0 1.2rem;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(14,94,131,0.12), transparent 55%),
    #fff;
}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1rem}

/* Two col */
.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} }

/* Lists */
.list{margin:.7rem 0 0; padding-left:1.1rem; color:var(--muted)}
.list li{margin:.35rem 0}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem}
.chip{
  display:inline-flex;
  align-items:center;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  color: rgba(15,23,42,0.80);
}
.chip:hover{background: var(--soft)}

/* Callout */
.callout{
  margin-top: 1.2rem;
  padding: 1.1rem;
  border-radius: var(--radius2);
  border:1px solid rgba(14,94,131,0.20);
  background: rgba(14,94,131,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background:#fff;
  padding: 1.2rem 0 .9rem;
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-title{font-weight:950}
.footer-links{display:flex; gap:.85rem; flex-wrap:wrap}
.footer-links a{color: rgba(15,23,42,0.72); font-weight:800}
.footer-links a:hover{color: var(--accent)}
.footer-bottom{padding-top:.8rem; border-top:1px solid rgba(15,23,42,0.08); margin-top:.9rem}