/* =====================================================================
   SEO LANDING PAGES — SHARED STYLES
   Used by all 23 keyword landing page files
   ===================================================================== */

/* HERO */
.sx-hero{
  position:relative; min-height:62vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  padding:120px 20px 80px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  overflow:hidden;
}
.sx-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(8,20,40,.55), rgba(8,20,40,.82));
}
.sx-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(212,175,55,.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(212,175,55,.16), transparent 40%);
  pointer-events:none;
}
.sx-hero-inner{ position:relative; z-index:2; max-width:880px; margin:0 auto; }
.sx-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:999px;
  background:rgba(212,175,55,.15); border:1px solid rgba(212,175,55,.45);
  color:#F4D03F; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:18px; backdrop-filter:blur(6px);
}
.sx-hero h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(26px, 4.4vw, 50px);
  line-height:1.15; margin:6px 0 14px;
  text-shadow:0 4px 28px rgba(0,0,0,.4);
}
.sx-hero h1 span{
  background:linear-gradient(135deg,#D4AF37,#F4D03F,#D4AF37);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.sx-hero p{ max-width:720px; margin:14px auto 24px; font-size:clamp(14px,1.4vw,16.5px); line-height:1.7; opacity:.92; color:#f3e8d0; }
.sx-breadcrumb{ font-size:12.5px; opacity:.85; }
.sx-breadcrumb a{ color:#F4D03F; text-decoration:none; }

/* SECTIONS */
.sx-section{ padding:70px 20px; }
.sx-section .container{ max-width:1180px; margin:0 auto; }
.sx-section.alt{ background:#f9f6f1; }
.sx-section.dark{
  background:#0B3156; color:#fff;
}
.sx-eyebrow{ color:#D4AF37; font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:12px; }
.sx-h2{ font-family:'Playfair Display',serif; font-size:clamp(22px,3vw,34px); margin:8px 0 14px; color:#0B3156; }
.sx-section.dark .sx-h2{ color:#fff; }

/* INTRO LAYOUTS */
.sx-intro-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center; }
.sx-intro-grid.reverse{ grid-template-columns:1fr 1.1fr; }
.sx-intro-grid.reverse .sx-intro-text{ order:2; }
.sx-intro-text p{ font-size:15.5px; line-height:1.85; color:#3a4a5e; }
.sx-intro-img{
  border-radius:20px; overflow:hidden;
  box-shadow:0 25px 60px rgba(11,49,86,.25);
  position:relative;
}
.sx-intro-img img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.sx-intro-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(212,175,55,.12), transparent 50%);
}

/* FEATURES */
.sx-features-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:14px; margin-top:18px;
}
.sx-feature{
  background:#fff; border:1px solid rgba(212,175,55,.25);
  border-radius:14px; padding:16px 18px;
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:#0B3156; font-weight:600;
  box-shadow:0 6px 18px rgba(11,49,86,.06);
  transition:.3s;
}
.sx-feature:hover{ transform:translateY(-3px); border-color:#D4AF37; }
.sx-feature i{ color:#D4AF37; font-size:18px; }

/* STATS STRIP */
.sx-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:18px; }
.sx-stat{
  background:#fff; border-radius:16px; padding:24px 18px; text-align:center;
  box-shadow:0 10px 28px rgba(11,49,86,.08);
  border-bottom:3px solid #D4AF37;
}
.sx-stat .num{
  font-family:'Playfair Display',serif; font-size:34px; color:#0B3156;
  display:block; font-weight:700;
}
.sx-stat .lbl{ font-size:12.5px; color:#777; text-transform:uppercase; letter-spacing:.1em; }

/* CONTENT BLOCKS */
.sx-blocks{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:30px; }
.sx-block{
  background:#fff; border-radius:18px; padding:28px 26px;
  box-shadow:0 10px 30px rgba(11,49,86,.08);
  border-top:3px solid #D4AF37;
  transition:.3s;
}
.sx-block:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,49,86,.12); }
.sx-block h3{ font-family:'Playfair Display',serif; font-size:21px; color:#0B3156; margin-bottom:10px; }
.sx-block p{ font-size:14.5px; line-height:1.75; color:#4a5a6e; }

/* ZIGZAG */
.sx-zigzag{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-bottom:50px; }
.sx-zigzag.reverse > div:first-child{ order:2; }
.sx-zigzag img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:0 18px 40px rgba(11,49,86,.18); }
.sx-zigzag h3{ font-family:'Playfair Display',serif; color:#0B3156; font-size:24px; margin-bottom:10px; }
.sx-zigzag p{ color:#4a5a6e; line-height:1.8; font-size:15px; }

/* GALLERY */
.sx-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1180px; margin:30px auto 0; }
.sx-gallery img{ width:100%; height:240px; object-fit:cover; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.15); transition:.4s; }
.sx-gallery img:hover{ transform:scale(1.03); }

/* CALLOUT (Did You Know / Pro Tip / Recipe) */
.sx-callout{
  display:flex; gap:18px; align-items:flex-start;
  background:linear-gradient(135deg, #fff8e1, #fff);
  border-left:4px solid #D4AF37;
  padding:24px 26px; border-radius:14px;
  box-shadow:0 10px 26px rgba(11,49,86,.08);
  margin-top:24px;
}
.sx-callout .ic{
  width:44px; height:44px; flex:0 0 44px;
  background:linear-gradient(135deg,#D4AF37,#F4D03F);
  color:#fff; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:18px;
}
.sx-callout h4{ margin:0 0 6px; color:#0B3156; font-family:'Playfair Display',serif; font-size:18px; }
.sx-callout p{ margin:0; color:#4a5a6e; font-size:14.5px; line-height:1.7; }

/* RECIPE STEPS */
.sx-steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-top:24px; }
.sx-step{
  background:#fff; border-radius:14px; padding:22px;
  box-shadow:0 8px 22px rgba(11,49,86,.08);
  position:relative;
}
.sx-step .n{
  position:absolute; top:-18px; left:22px;
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#0B3156,#1e3a5f); color:#F4D03F;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:'Playfair Display',serif;
}
.sx-step h4{ margin:8px 0 6px; color:#0B3156; font-size:16px; }
.sx-step p{ margin:0; color:#5a6a7e; font-size:13.5px; line-height:1.6; }

/* FAQ */
.sx-faq-wrap{ max-width:880px; margin:0 auto; }
.sx-faq{
  background:#fff; border-radius:14px; padding:18px 22px; margin-bottom:12px;
  box-shadow:0 6px 18px rgba(11,49,86,.06);
  border-left:3px solid #D4AF37;
}
.sx-faq summary{
  cursor:pointer; font-weight:700; color:#0B3156; font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.sx-faq summary::after{ content:"+"; font-size:22px; color:#D4AF37; transition:.3s; }
.sx-faq[open] summary::after{ transform:rotate(45deg); }
.sx-faq p{ margin-top:10px; font-size:14.5px; color:#4a5a6e; line-height:1.75; }

/* CTA */
.sx-cta{
  text-align:center;
  background:linear-gradient(135deg,#0B3156,#1e3a5f);
  color:#fff; padding:70px 20px; border-radius:24px;
  position:relative; overflow:hidden;
  margin:60px auto; max-width:1100px;
}
.sx-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.18), transparent 50%);
}
.sx-cta > *{ position:relative; z-index:2; }
.sx-cta h2{ font-family:'Playfair Display',serif; font-size:clamp(22px,3vw,34px); margin-bottom:12px; }
.sx-cta h2 span{ color:#F4D03F; }
.sx-cta p{ max-width:600px; margin:0 auto 22px; opacity:.9; }
.sx-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.sx-cta .btn-primary{
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(135deg,#D4AF37,#F4D03F);
  color:#1a1a1a; padding:13px 28px; border-radius:999px;
  font-weight:700; text-decoration:none;
  box-shadow:0 12px 30px rgba(212,175,55,.4); transition:.3s;
}
.sx-cta .btn-primary:hover{ transform:translateY(-3px); }
.sx-cta .btn-ghost{
  display:inline-flex; align-items:center; gap:9px;
  border:1.5px solid rgba(255,255,255,.4); color:#fff;
  padding:12px 26px; border-radius:999px; font-weight:600;
  text-decoration:none; transition:.3s;
}
.sx-cta .btn-ghost:hover{ background:rgba(255,255,255,.1); }

/* INTERLINKS */
.sx-interlinks{ background:#0B3156; color:#fff; padding:56px 20px; }
.sx-interlinks .container{ max-width:1180px; margin:0 auto; }
.sx-interlinks h3{ font-family:'Playfair Display',serif; font-size:clamp(20px,2.6vw,28px); text-align:center; margin-bottom:8px; }
.sx-interlinks .sub{ text-align:center; opacity:.8; margin-bottom:26px; font-size:14px; }
.sx-interlinks ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.sx-interlinks a{
  display:block; padding:11px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(212,175,55,.2);
  border-radius:10px; color:#f0e5d2; text-decoration:none;
  font-size:13.5px; transition:.25s;
}
.sx-interlinks a:hover{ background:rgba(212,175,55,.15); color:#F4D03F; transform:translateX(3px); }

/* RESPONSIVE */
@media (max-width: 900px){
  .sx-intro-grid, .sx-intro-grid.reverse, .sx-zigzag, .sx-zigzag.reverse{ grid-template-columns:1fr; gap:30px; }
  .sx-intro-grid.reverse .sx-intro-text, .sx-zigzag.reverse > div:first-child{ order:0; }
  .sx-blocks{ grid-template-columns:1fr; }
  .sx-gallery{ grid-template-columns:1fr 1fr; }
  .sx-gallery img{ height:200px; }
}
@media (max-width:560px){
  .sx-hero{ min-height:50vh; padding:100px 16px 60px; }
  .sx-section{ padding:50px 16px; }
  .sx-gallery{ grid-template-columns:1fr; }
  .sx-gallery img{ height:220px; }
  .sx-cta{ margin:30px 16px; padding:50px 18px; border-radius:18px; }
}

/* ============= EXPANDED CONTENT SECTIONS ============= */

/* Long-read body */
.sx-longread{ background:#fffdf7; }
.sx-longread-body{
  font-size:15.5px; line-height:1.95; color:#2c3e50;
  max-width:880px; margin:0 auto;
  font-family:'Georgia', 'Playfair Display', serif;
}
.sx-longread-body p{ margin:0; }

/* Benefits grid */
.sx-benefits-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  margin-top:10px;
}
.sx-benefit{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid #f0e6d0;
  padding:22px 20px; border-radius:14px;
  box-shadow:0 4px 14px rgba(11,49,86,.05);
  transition:.25s; min-height:110px;
}
.sx-benefit:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(11,49,86,.1); border-color:#D4AF37; }
.sx-benefit-ic{
  flex-shrink:0; width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg,#D4AF37,#F4D03F);
  display:flex; align-items:center; justify-content:center;
  color:#0B3156; font-size:19px;
}
.sx-benefit h4{ margin:0 0 6px; font-size:16px; color:#0B3156; font-weight:700; }
.sx-benefit p{ margin:0; font-size:13.5px; color:#4a5a6e; line-height:1.55; }

/* Use cases grid */
.sx-usecase-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.sx-usecase{
  background:#fff; border:1px solid #f0e6d0;
  padding:30px 24px; border-radius:16px; text-align:center;
  transition:.3s; box-shadow:0 4px 14px rgba(11,49,86,.05);
}
.sx-usecase:hover{ transform:translateY(-4px); border-color:#D4AF37; box-shadow:0 12px 28px rgba(11,49,86,.1); }
.sx-usecase-ic{
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:linear-gradient(135deg,#0B3156,#1e3a5f);
  display:flex; align-items:center; justify-content:center;
  color:#F4D03F; font-size:26px;
}
.sx-usecase h4{ margin:0 0 8px; font-size:17px; color:#0B3156; font-weight:700; }
.sx-usecase p{ margin:0; font-size:13.8px; color:#4a5a6e; line-height:1.6; }

/* Mid CTA banner */
.sx-mid-cta{
  max-width:1100px; margin:0 auto;
  background:linear-gradient(135deg,#D4AF37 0%,#F4D03F 100%);
  border-radius:20px; padding:34px 38px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
  box-shadow:0 14px 36px rgba(212,175,55,.25);
  position:relative; overflow:hidden;
}
.sx-mid-cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 30%, rgba(11,49,86,.12), transparent 55%);
}
.sx-mid-cta-text{ position:relative; z-index:2; flex:1; min-width:260px; }
.sx-mid-cta-text h3{
  margin:0; font-size:21px; line-height:1.4; color:#0B3156;
  font-family:'Playfair Display', serif; font-weight:700;
}
.sx-mid-cta-btns{ position:relative; z-index:2; display:flex; gap:12px; flex-wrap:wrap; }
.sx-mid-cta-btns .btn-primary{
  background:#0B3156; color:#fff;
  padding:13px 24px; border-radius:10px; text-decoration:none;
  font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px;
  transition:.25s;
}
.sx-mid-cta-btns .btn-primary:hover{ background:#0a2545; transform:translateY(-2px); }
.btn-ghost-dark{
  background:transparent; color:#0B3156;
  padding:13px 24px; border-radius:10px;
  border:2px solid #0B3156;
  text-decoration:none; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  transition:.25s;
}
.btn-ghost-dark:hover{ background:#0B3156; color:#F4D03F; }

/* Testimonial */
.sx-testimonial{
  background:linear-gradient(135deg,#fffdf7,#fef7e0);
  border-left:5px solid #D4AF37;
  padding:38px 38px 32px; border-radius:16px;
  box-shadow:0 8px 24px rgba(11,49,86,.07);
  position:relative;
}
.sx-quote-mark{
  font-size:32px; color:#D4AF37; opacity:.45;
  position:absolute; top:18px; left:22px;
}
.sx-testimonial-q{
  font-style:italic; font-size:18px; line-height:1.7;
  color:#2c3e50; margin:14px 0 18px 0;
  font-family:'Playfair Display', Georgia, serif;
}
.sx-testimonial-a{
  margin:0; font-size:14px; color:#4a5a6e;
  text-align:right; padding-top:10px;
  border-top:1px dashed rgba(11,49,86,.15);
}
.sx-testimonial-a strong{ color:#0B3156; }

/* Section background variant for alt */
.sx-section.alt{ background:#faf6ee; }

/* Responsive */
@media (max-width: 900px){
  .sx-benefits-grid{ grid-template-columns:repeat(2, 1fr); }
  .sx-usecase-grid{ grid-template-columns:1fr; gap:18px; }
  .sx-mid-cta{ padding:28px 24px; text-align:center; flex-direction:column; }
  .sx-mid-cta-btns{ justify-content:center; }
  .sx-longread-body{ font-size:15px; line-height:1.85; }
}
@media (max-width: 560px){
  .sx-benefits-grid{ grid-template-columns:1fr; }
  .sx-benefit{ min-height:auto; }
  .sx-mid-cta-text h3{ font-size:18px; }
  .sx-testimonial{ padding:30px 22px 24px; }
  .sx-testimonial-q{ font-size:16px; }
}

/* ======================================================
   KNOWLEDGE GUIDE — 7-8 semantic section design
   Replaces the old single-block longread section
   ====================================================== */
.sx-guide-section { padding:70px 20px; }
.sx-guide-section .container { max-width:1100px; margin:0 auto; }
.sx-guide-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:40px;
}
.sx-guide-card {
  background:#fff; border-radius:18px; padding:32px 28px;
  box-shadow:0 8px 28px rgba(11,49,86,.07);
  border-left:4px solid #D4AF37;
  transition:.3s;
}
.sx-guide-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,49,86,.13); }
.sx-guide-card .gc-icon {
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg,#0B3156,#1e4a7a);
  display:flex; align-items:center; justify-content:center;
  color:#F4D03F; font-size:22px; margin-bottom:16px;
}
.sx-guide-card h3 {
  font-family:'Playfair Display',serif; font-size:20px;
  color:#0B3156; margin:0 0 10px; line-height:1.3;
}
.sx-guide-card p {
  font-size:14.5px; color:#4a5a6e; line-height:1.8; margin:0;
}

/* Punjab focus badge strip */
.sx-punjab-strip {
  background:linear-gradient(135deg,#0B3156,#12407a);
  border-radius:18px; padding:40px 38px; color:#fff;
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px;
  text-align:center; margin:40px 0;
}
.sx-punjab-stat { padding:10px; }
.sx-punjab-stat .ps-num {
  font-family:'Playfair Display',serif; font-size:38px;
  color:#F4D03F; font-weight:700; display:block; line-height:1.1;
}
.sx-punjab-stat .ps-lbl {
  font-size:13px; opacity:.88; line-height:1.5; margin-top:6px;
}

/* Comparison table */
.sx-compare-table { width:100%; border-collapse:collapse; margin:28px 0; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(11,49,86,.08); }
.sx-compare-table th { background:#0B3156; color:#F4D03F; padding:14px 18px; text-align:left; font-size:14px; font-weight:600; letter-spacing:.05em; }
.sx-compare-table td { padding:13px 18px; font-size:14px; color:#3a4a5e; border-bottom:1px solid #f0e8d8; }
.sx-compare-table tr:last-child td { border-bottom:none; }
.sx-compare-table tr:nth-child(even) td { background:#fdf8f0; }
.sx-compare-table td:first-child { font-weight:600; color:#0B3156; }

/* Pack size cards */
.sx-pack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-top:28px; }
.sx-pack-card {
  background:#fff; border-radius:16px; padding:28px 20px; text-align:center;
  border:2px solid rgba(212,175,55,.3); box-shadow:0 6px 20px rgba(11,49,86,.07);
  transition:.3s;
}
.sx-pack-card:hover { border-color:#D4AF37; transform:translateY(-5px); box-shadow:0 16px 36px rgba(11,49,86,.13); }
.sx-pack-card .pk-icon { font-size:36px; margin-bottom:12px; }
.sx-pack-card .pk-size { font-family:'Playfair Display',serif; font-size:26px; color:#0B3156; font-weight:700; }
.sx-pack-card .pk-label { font-size:13px; color:#6a7a8e; margin-top:4px; }
.sx-pack-card .pk-best { display:inline-block; margin-top:10px; padding:4px 12px; background:linear-gradient(135deg,#D4AF37,#F4D03F); color:#0B3156; border-radius:999px; font-size:11.5px; font-weight:700; }

/* Nutrition table */
.sx-nutrition { background:#fdf8f0; border-radius:14px; padding:28px 24px; margin-top:28px; }
.sx-nutrition h4 { font-family:'Playfair Display',serif; color:#0B3156; font-size:18px; margin:0 0 16px; }
.sx-nutrition-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed rgba(11,49,86,.12); font-size:14px; color:#3a4a5e; }
.sx-nutrition-row:last-child { border-bottom:none; }
.sx-nutrition-row strong { color:#0B3156; }

/* Responsive */
@media (max-width:900px) {
  .sx-guide-grid { grid-template-columns:1fr; gap:20px; }
  .sx-punjab-strip { grid-template-columns:1fr 1fr; gap:18px; }
}
@media (max-width:560px) {
  .sx-punjab-strip { grid-template-columns:1fr 1fr; padding:28px 20px; }
  .sx-punjab-stat .ps-num { font-size:30px; }
  .sx-compare-table th, .sx-compare-table td { padding:10px 12px; font-size:13px; }
}