/* Premium styling for Shivatva Spices export site */
:root{
  --bg:#faf7f2;
  --muted:#6b5b52;
  --brand:#b91c1c;
  --accent:#f59e0b;
  --accent-dark:#d97706;
  --text-dark:#1a1410;
  --container:1200px;
  --header-height:65px;
  --header-height-scrolled:50px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text-dark);
  line-height:1.5;
  letter-spacing:0.2px;
}

.container{max-width:var(--container);margin:0 auto;padding:3rem 2rem}

/* Header Styles */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  background:rgba(255,255,255,0.98);
  /* removed backdrop-filter for performance */
  z-index:9999;
  border-bottom:1px solid rgba(185,28,28,0.06);
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  transition:height 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.02rem 2rem;
  max-width:var(--container);
  margin:0 auto;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  height:75px;
  width:auto;
  display:block;
  transition:height 200ms ease, transform 200ms ease;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding-bottom:10px; /* extra whitespace below logo */
}

.nav{display:flex;gap:2rem;align-items:center}

/* Shrink header on scroll for practicality */
.site-header{
  transition:background 180ms ease, box-shadow 180ms ease;
}
.site-header.scrolled{
  /*height:var(--header-height-scrolled);*/
  background:rgba(255,255,255,0.99);
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
}
.site-header.scrolled .brand-logo{
  height: 69px;
}
.site-header.scrolled .nav a{
  transform:translateY(-1px);
}

.nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  transition:all 0.3s ease;
  position:relative;
  padding:0.5rem 0;
}

.nav a:hover{color:var(--brand)}
.nav a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width 0.3s ease;
}

.nav a:hover::after{width:100%}

.nav .cta{
  padding:0.7rem 1.6rem;
  border-radius:40px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 30px rgba(185,28,28,0.45);
  transition:all 0.18s ease;
  z-index:10010;
}

.nav .cta:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(185,28,28,0.5);
  color:#fff;
}

/* Hero Section */
.hero{
  padding:5.5rem 0 6.5rem;
  position:relative;
  overflow:hidden;
  background-image: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)), url('assets/turmeric.avif');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  min-height:56vh;
  display:flex;
  align-items:center;
}

/* prevent content from being hidden behind fixed header */
main{padding-top:var(--header-height)}

.hero-bg{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 25%,rgba(245,158,11,0.06) 0%,transparent 12%),
    radial-gradient(circle at 85% 75%,rgba(220,38,38,0.04) 0%,transparent 18%);
  pointer-events:none;
  /* animations removed for performance */
}

/* drift animation removed to reduce repaints */

.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
  position:relative;
  z-index:2;
  justify-items:start;
  padding:2rem 0;
}

.hero-copy{
  max-width:720px;
  background:rgba(0,0,0,0.46);
  padding:1.2rem 1.6rem;
  border-radius:10px;
  color:#ffffff;
}

.hero-copy h1{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2.8rem;
  margin:0 0 0.8rem;
  line-height:1.08;
  color:#fff;
}

.hero-copy p{
  color:rgba(255,255,255,0.95);
  margin:0 0 1.2rem;
  font-size:1rem;
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  animation:none;
}

/* reduced animations for performance */

.btn{
  display:inline-block;
  padding:1rem 2rem;
  border-radius:50px;
  text-decoration:none;
  font-weight:600;
  transition:all 0.3s ease;
  cursor:pointer;
  border:none;
  font-size:1rem;
  letter-spacing:0.5px;
}

.btn.primary{
  background:linear-gradient(135deg,var(--brand),#ef4444);
  color:white;
  box-shadow:0 12px 30px rgba(185,28,28,0.3);
}

.btn.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(185,28,28,0.4);
}

.btn.ghost{
  border:2px solid var(--brand);
  background:white;
  color:var(--brand);
  font-weight:600;
}

.btn.ghost:hover{
  background:var(--brand);
  color:white;
  transform:translateY(-3px);
}

.hero-visual{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  height:400px;
}

.hero-image{
  width:100%;
  height:100%;
  max-width:420px;
  border-radius:24px;
  object-fit:cover;
  box-shadow:0 30px 80px rgba(185,28,28,0.35);
}

.card-media img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* Features Section */
.features{
  background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,250,245,0.98));
  border-radius:18px;
  margin:3.5rem 1.5rem;
}

.features h2{
  margin:0 0 0.5rem;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2.2rem;
  color:var(--text-dark);
}

.lede{
  color:var(--muted);
  margin-bottom:2rem;
  font-size:1.1rem;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  animation:none;
}

.card{
  background:white;
  border-radius:12px;
  padding:1.2rem;
  box-shadow:0 6px 16px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  transition:box-shadow 180ms ease, transform 180ms ease;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(245,158,11,0.06);
}

.grid > .card:nth-child(1){animation-delay:0s}
.grid > .card:nth-child(2){animation-delay:0.1s}
.grid > .card:nth-child(3){animation-delay:0.2s}
.grid > .card:nth-child(4){animation-delay:0.3s}
.grid > .card:nth-child(5){animation-delay:0.4s}
.grid > .card:nth-child(6){animation-delay:0.5s}
.grid > .card:nth-child(7){animation-delay:0.6s}

/* Removed slideUpCard animation for performance */

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s ease;
}

/* simplified hover: lighter lift */
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(15,23,42,0.08);
}

.card-media{
  height:140px;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:0.8rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card h3{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:1.25rem;
  margin:0.4rem 0;
  color:var(--text-dark);
}

.card:hover h3{
  color:var(--brand);
}

.card p{
  color:var(--muted);
  margin:0;
  font-size:0.95rem;
  line-height:1.6;
}

.card .spec{
  color:var(--brand);
  font-weight:600;
  font-size:0.85rem;
  margin-bottom:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* About Section */
.about{margin:4rem 2rem;background:linear-gradient(135deg,rgba(185,28,28,0.05),rgba(245,158,11,0.05));border-radius:24px;padding:3rem}

.about-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:3rem;
  align-items:start;
}

.about h2{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2.5rem;
  margin:0 0 1rem;
  color:var(--text-dark);
}

.about p{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.8;
  margin:0 0 1.5rem;
}

.about ul{
  list-style:none;
  padding:0;
  margin:0;
}

.about li{
  padding:0.8rem 0;
  color:var(--muted);
  padding-left:1.5rem;
  position:relative;
  font-size:0.95rem;
}

.about li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--brand);
  font-weight:bold;
  font-size:1.2rem;
}

.stats{display:flex;flex-direction:column;gap:1rem}

.stat{
  background:white;
  padding:1.2rem;
  border-radius:12px;
  text-align:center;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  border:1px solid rgba(245,158,11,0.1);
}

.stat h3{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:1.8rem;
  margin:0;
  color:var(--brand);
}

.stat p{
  margin:0.5rem 0 0;
  color:var(--muted);
  font-size:0.9rem;
}

/* Benefits Section */
.benefits{
  margin:4rem 2rem;
  background:linear-gradient(135deg,rgba(245,158,11,0.05),rgba(185,28,28,0.02));
  border-radius:24px;
  padding:3rem;
}

.benefits h2{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2rem;
  margin:0 0 1.6rem;
  color:var(--text-dark);
  text-align:center;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.benefit-card{
  background:white;
  padding:2rem;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  text-align:center;
  transition:all 0.4s ease;
  border:1px solid rgba(245,158,11,0.1);
  animation:none;
}

.benefits-grid > .benefit-card:nth-child(1){animation-delay:0s}
.benefits-grid > .benefit-card:nth-child(2){animation-delay:0.1s}
.benefits-grid > .benefit-card:nth-child(3){animation-delay:0.2s}
.benefits-grid > .benefit-card:nth-child(4){animation-delay:0.3s}
.benefits-grid > .benefit-card:nth-child(5){animation-delay:0.4s}
.benefits-grid > .benefit-card:nth-child(6){animation-delay:0.5s}

.benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(15,23,42,0.15);
  border-color:var(--brand);
}

.benefit-icon{
  font-size:3rem;
  margin-bottom:1rem;
  display:inline-block;
}

.benefit-card h3{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:1.15rem;
  margin:0 0 0.6rem;
  color:var(--text-dark);
}

.benefit-card p{
  color:var(--muted);
  margin:0;
  font-size:0.95rem;
  line-height:1.6;
}

/* Certifications Section */
.certifications{
  margin:4rem 2rem;
  background:linear-gradient(135deg,rgba(185,28,28,0.04),rgba(245,158,11,0.06));
  border-radius:24px;
  padding:3rem;
}

.certifications h2{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2rem;
  margin:0 0 0.6rem;
  color:var(--text-dark);
  text-align:center;
}

.certifications .lede{
  text-align:center;
  margin-bottom:2rem;
}

.certs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.5rem;
}

.cert-badge{
  background:white;
  padding:1.5rem;
  border-radius:12px;
  text-align:center;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  border:2px solid rgba(245,158,11,0.15);
  transition:all 0.3s ease;
  animation:none;
}

.certs-grid > .cert-badge:nth-child(1){animation-delay:0s}
.certs-grid > .cert-badge:nth-child(2){animation-delay:0.1s}
.certs-grid > .cert-badge:nth-child(3){animation-delay:0.2s}
.certs-grid > .cert-badge:nth-child(4){animation-delay:0.3s}
.certs-grid > .cert-badge:nth-child(5){animation-delay:0.4s}
.certs-grid > .cert-badge:nth-child(6){animation-delay:0.5s}

.cert-badge:hover{
  border-color:var(--brand);
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(185,28,28,0.15);
}

.cert-icon{
  display:inline-flex;
  width:50px;
  height:50px;
  background:linear-gradient(135deg,var(--brand),#ef4444);
  color:white;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:bold;
  margin-bottom:1rem;
}

.cert-badge h3{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:1.1rem;
  margin:0 0 0.5rem;
  color:var(--text-dark);
}

.cert-badge p{
  color:var(--muted);
  margin:0;
  font-size:0.85rem;
}

/* Testimonials Section */
.testimonials{
  margin:4rem 2rem;
  background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(185,28,28,0.04));
  border-radius:24px;
  padding:3rem;
}

.testimonials h2{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2rem;
  margin:0 0 0.5rem;
  color:var(--text-dark);
  text-align:center;
}

.testimonials .lede{
  text-align:center;
  margin-bottom:2rem;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.testimonial{
  background:white;
  padding:2rem;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  border-left:4px solid var(--brand);
  transition:all 0.3s ease;
  animation:none;
}

.testimonials-grid > .testimonial:nth-child(1){animation-delay:0s}
.testimonials-grid > .testimonial:nth-child(2){animation-delay:0.1s}
.testimonials-grid > .testimonial:nth-child(3){animation-delay:0.2s}
.testimonials-grid > .testimonial:nth-child(4){animation-delay:0.3s}

.testimonial:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(15,23,42,0.15);
}

.stars{
  color:var(--accent);
  font-size:1.2rem;
  margin-bottom:1rem;
  letter-spacing:2px;
}

.testimonial p{
  color:var(--text-dark);
  font-style:italic;
  margin:0 0 1rem;
  line-height:1.7;
}

.testimonial-author{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.testimonial-author strong{
  color:var(--text-dark);
  font-weight:600;
  margin-bottom:0.3rem;
}

.testimonial-author span{
  color:var(--muted);
  font-size:0.85rem;
}

/* Contact Form */
.contact{
  margin:4rem 2rem;
  background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(185,28,28,0.04));
  border-radius:24px;
  padding:3rem;
}

.contact h2{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2rem;
  margin:0 0 0.5rem;
  color:var(--text-dark);
}

.contact .lede{font-size:1.05rem}

.contact-form{
  display:grid;
  gap:1.5rem;
  max-width:720px;
  margin-top:2rem;
}

.contact-form label{
  display:block;
  font-weight:600;
  color:var(--text-dark);
  margin-bottom:0.5rem;
  font-size:0.95rem;
}

.contact-form input,
.contact-form textarea{
  padding:1rem;
  border-radius:12px;
  border:2px solid rgba(15,23,42,0.08);
  font-family:Inter,system-ui,sans-serif;
  font-size:1rem;
  transition:all 0.3s ease;
  background:white;
  width:100%;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(185,28,28,0.1);
}

.form-actions{margin-top:1.5rem}

.form-msg{
  margin-top:1rem;
  color:var(--brand);
  font-weight:600;
  animation:none;
}

/* CTA Section */
.cta-section{
  margin:4rem 2rem;
  background:linear-gradient(135deg,var(--brand),#ef4444);
  border-radius:24px;
  padding:4rem 3rem;
  text-align:center;
  color:white;
  box-shadow:0 20px 60px rgba(185,28,28,0.3);
}

.cta-content h2{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2.2rem;
  margin:0 0 1rem;
  line-height:1.2;
  color:white;
}

.cta-content p{
  font-size:1.15rem;
  color:rgba(255,255,255,0.95);
  margin:0 0 2rem;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

.cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.cta-actions .btn.primary{
  background:white;
  color:var(--brand);
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
}

.cta-actions .btn.primary:hover{
  background:rgba(255,255,255,0.95);
  transform:translateY(-3px);
}

.cta-actions .btn.ghost{
  border-color:white;
  color:white;
  background:transparent;
}

.cta-actions .btn.ghost:hover{
  background:rgba(255,255,255,0.1);
  color:white;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(185,28,28,0.1);
  background:linear-gradient(135deg,rgba(26,20,16,0.95),rgba(26,20,16,0.92));
  color:white;
  margin-top:4rem;
  padding:4rem 0 1rem;
}

.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:3rem;
  margin-bottom:2rem;
}

.footer-section h3{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:1.1rem;
  margin:0 0 1rem;
  color:var(--accent);
}

.footer-section p{
  color:rgba(255,255,255,0.8);
  font-size:0.95rem;
  line-height:1.6;
  margin:0;
}

.social-links{
  display:flex;
  gap:1rem;
  margin-top:1rem;
}

.social-links a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:all 0.3s ease;
}

.social-links a:hover{
  color:white;
  text-decoration:underline;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:0.8rem;
}

.footer-links a{
  color:rgba(255,255,255,0.8);
  text-decoration:none;
  transition:all 0.3s ease;
  font-size:0.95rem;
}

.footer-links a:hover{
  color:var(--accent);
  padding-left:0.5rem;
}

.contact-info{
  font-size:0.9rem;
  line-height:1.8;
  color:rgba(255,255,255,0.85);
}

.contact-info strong{
  color:var(--accent);
  display:block;
  margin-bottom:0.3rem;
  font-size:1rem;
}

.contact-info .highlight{
  color:var(--accent);
  font-weight:600;
  display:inline-block;
  margin-top:0.5rem;
  font-size:0.85rem;
}

.footer-bottom{
  border-top:1px solid rgba(185,28,28,0.2);
  padding-top:1.5rem;
  text-align:center;
  color:rgba(255,255,255,0.7);
  font-size:0.85rem;
}

.footer-bottom p{
  margin:0;
}

.footer-bottom a{
  color:var(--accent);
  text-decoration:none;
  transition:all 0.3s;
}

.footer-bottom a:hover{
  color:white;
  text-decoration:underline;
}

/* Responsive */
@media (max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .hero-visual{order:-1}
  .hero-copy h1{font-size:2.4rem}
  .about-grid{grid-template-columns:1fr}
  .features h2{font-size:2rem}
  .benefits h2{font-size:2rem}
  .benefits-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .certifications h2{font-size:2rem}
  .certs-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .testimonials h2{font-size:2rem}
  .cta-content h2{font-size:2rem}
  .cta-section{padding:2.5rem 1.5rem}
  .footer-content{grid-template-columns:1fr}
}

@media (max-width:600px){
  .hero-copy h1{font-size:1.8rem}
  .nav{gap:1rem}
  .nav a{display:none}
  .nav .cta{display:inline-block}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .grid{grid-template-columns:1fr}
  .cta-actions{flex-direction:column}
  .footer-content{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .spice-blob,
  .hero-visual,
  .card,
  *{transition:none!important;animation:none!important}
}