/* ============ Design System ============ */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@400;700&display=swap');

:root{
  /* Colors */
  --brand-gold:#d4af37;         /* primary accent */
  --brand-gold-dk:#b9962e;      /* hover */
  --brand-deep:#1f2937;         /* deep text */
  --ink:#2c2c2c;                /* main text, softer than pure black */
  --muted:#6b7280;              /* secondary text */
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --surface:#ffffff;

  /* Sizing & spacing */
  --radius:16px;
  --shadow:0 8px 24px rgba(13,28,62,.08);
  --shadow-sm:0 2px 8px rgba(13,28,62,.08);
  --container:1100px;

  /* Vertical rhythm */
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;

  /* Type scale (fluid) */
  --fs-body:clamp(16px, 1.4vw, 18px);
  --fs-small:0.9375rem;         /* ~15px */
  --fs-h1:clamp(32px, 4vw, 52px);
  --fs-h2:clamp(24px, 3vw, 36px);
  --fs-h3:clamp(18px, 2.2vw, 22px);
  --lh-tight:1.25;
  --lh-body:1.7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Global links */
a{color:inherit; text-decoration:none}
a:hover{color:var(--brand-gold)}

/* Utility */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--space-4)}
.muted{color:var(--muted); font-family:'Lato', sans-serif}
.section{padding:var(--space-6) 0}
.section-alt{padding:var(--space-6) 0; background:var(--bg-soft)}
.section-title{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  margin:0 0 var(--space-3);
  color:var(--brand-deep);
  letter-spacing:.3px;
  font-family: 'Montserrat', sans-serif;
  font-weight:700;
}
.section-sub{
  color:var(--muted); margin:0 0 var(--space-5);
  font-family:'Lato', sans-serif;
}
.grid{display:grid; gap:var(--space-4)}
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  font-weight:600; text-decoration:none; border:1px solid transparent; transition:all .25s ease;
  letter-spacing:.3px;
  font-family: 'Montserrat', sans-serif;
}
.btn-primary{background:var(--brand-gold); color:#111}
.btn-primary:hover{background:var(--brand-gold-dk); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--brand-deep); border-color:rgba(31,41,55,.25)}
.btn-ghost:hover{background:#fff3d6}
.btn-small{padding:8px 12px; font-size:var(--fs-small)}

/* Placeholders */
.placeholder-xl,.placeholder-lg,.placeholder-md{
  background:linear-gradient(135deg,#fff7d9,#ffffff);
  border:1px dashed rgba(180,150,46,.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-align:center; font-size:var(--fs-small);
  font-family:'Lato', sans-serif;
}
.placeholder-xl{min-height:320px}
.placeholder-lg{min-height:220px}
.placeholder-md{min-height:160px}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:8px; top:8px; width:auto; height:auto; padding:8px 10px; background:#000; color:#fff; z-index:9999;
  font-family:'Lato', sans-serif;
}

/* ==================== Header ==================== */
.site-header{
  position:sticky; top:0; z-index:100; background:#fff; transition:box-shadow .25s, background .3s;
  border-bottom:1px solid #f1f1f1;
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(13,28,62,.06)}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand img{height:38px; width:auto}
.brand-name{
  font-weight:700; letter-spacing:.3px;
  font-size:clamp(18px, 2vw, 20px);
  font-family: 'Montserrat', sans-serif;
}
.brand-name strong{color:var(--brand-gold)}

/* ==================== Nav ==================== */
.nav-toggle{
  display:none; background:transparent; border:1px solid rgba(31,41,55,.25);
  border-radius:8px; padding:6px 10px; font-size:18px; cursor:pointer;
  transition:all .2s ease;
}
.nav-toggle:hover{border-color:var(--brand-gold); color:var(--brand-gold)}

.nav-menu{
  display:flex; gap:28px; list-style:none; padding:0; margin:0; align-items:center;
}
.nav-menu a{
  position:relative;
  text-decoration:none; color:#1f2937; font-weight:600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing:.2px; transition:color .25s ease;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--brand-gold); transition:width .3s ease;
}
.nav-menu a:hover{color:var(--brand-gold)}
.nav-menu a:hover::after{width:100%}

@media (max-width:840px){
  .nav-toggle{display:block}
  .nav-menu{
    display:none; flex-direction:column;
    position:absolute; right:16px; top:64px; background:#fff;
    padding:16px; border-radius:12px; box-shadow:var(--shadow);
    width:240px; animation:slideDown .3s ease forwards;
  }
  .nav-menu.open{display:flex}
}
@keyframes slideDown{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}

/* ==================== Hero ==================== */
.hero{
  background: radial-gradient(1200px 400px at 20% -50%, #fff7d9 0%, transparent 60%) , #fff;
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:var(--space-6);
  padding:var(--space-6) 0;
}
.tagline{
  margin:0 0 8px; color:#8a6d1d; font-weight:600;
  font-family:'Montserrat', sans-serif;
}
.font-dev{font-family:"Noto Sans Devanagari", 'Montserrat', sans-serif}
.hero h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  margin:0 0 var(--space-2);
  letter-spacing:.3px;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
}
.hero .sub{
  color:var(--muted); margin:0 0 var(--space-4);
  font-family:'Lato', sans-serif;
}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.trust-row{display:flex; align-items:center; gap:12px; margin-top:16px; color:var(--muted); font-family:'Lato', sans-serif}
.badge{
  background:#fff3d6; color:#8a6d1d; padding:6px 10px; border-radius:999px;
  font-weight:600; font-size:var(--fs-small); font-family:'Montserrat', sans-serif;
}
.divider{width:1px; height:18px; background:#e5e7eb}
.hero-figure span{opacity:.6}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; text-align:left}
}

/* Products */
.products-grid{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface); border-radius:var(--radius); padding:var(--space-4);
  box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
  border:1px solid #f2efe6;
  font-family:'Lato', sans-serif;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card .thumb{margin-bottom:12px}
.card h3{
  margin:0 0 6px;
  font-size:var(--fs-h3);
  line-height:var(--lh-tight);
  font-family:'Montserrat', sans-serif;
  font-weight:700;
}
@media (max-width:900px){
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .products-grid{grid-template-columns:1fr}
}

/* Features */
.features-grid{grid-template-columns:repeat(4,1fr)}
.feature{
  text-align:left; background:var(--surface); padding:var(--space-4); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); border:1px solid #f2efe6;
  font-family:'Lato', sans-serif;
}
.feature .icon{font-size:28px; margin-bottom:8px}
@media (max-width:900px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .features-grid{grid-template-columns:1fr}
}

/* About */
.about-split{
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-6); align-items:center;
}
.checks{margin:12px 0 0; padding-left:18px; font-family:'Lato', sans-serif}
.checks li{margin:6px 0}
.about-visual {display:flex; align-items:center; justify-content:center}
@media (max-width:980px){
  .about-split{grid-template-columns:1fr}
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.contact-card{
  background:var(--surface); border-radius:var(--radius); padding:var(--space-4);
  box-shadow:var(--shadow-sm); border:1px solid #f2efe6;
  font-family:'Lato', sans-serif;
}
@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr}
}

/* Footer */
.site-footer{border-top:1px solid #f2efe6; background:#fff}
.footer-inner{display:flex; justify-content:space-between; gap:var(--space-4); padding:24px 0; align-items:flex-start}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-links a{
  text-decoration:none; color:#1f2937; font-family:'Montserrat', sans-serif;
  font-weight:500; letter-spacing:.2px;
}
.footer-links a:hover{color:var(--brand-gold)}
@media (max-width:720px){
  .footer-inner{flex-direction:column}
}