/* ==========================================================================
   SIDDHACHAL INTERNATIONAL — CORE STYLESHEET
   Design system: "The Manifest" — a trade-ledger aesthetic for a B2B
   agri-export house. Ink & paper base, gold (spice) and leaf (vegetable)
   accents, monospace lot-codes as the structural signature.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------*/
:root{
  /* Color */
  --ink:        #0B0F0D;   /* near-black ground */
  --ink-soft:   #121815;
  --paper:      #F5F1E6;   /* warm paper white */
  --paper-dim:  #E9E3D3;
  --gold:       #C79A49;   /* spice accent */
  --gold-soft:  #E4C98A;
  --leaf:       #52795A;   /* vegetable accent */
  --leaf-soft:  #8FAE8C;
  --rust:       #A4522E;   /* chilli / warm secondary */
  --mist:       #8B978E;   /* muted line/text on dark */
  --line:       rgba(245,241,230,0.14);
  --line-soft:  rgba(245,241,230,0.08);

  /* Type */
  --f-display: 'Fraunces', 'Georgia', serif;
  --f-body: 'Inter', -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Scale */
  --fs-hero: clamp(3.2rem, 8vw, 8rem);
  --fs-xl: clamp(2.2rem, 5vw, 4.2rem);
  --fs-lg: clamp(1.6rem, 3vw, 2.4rem);
  --fs-md: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-base: 1rem;
  --fs-sm: 0.85rem;
  --fs-xs: 0.72rem;

  /* Layout */
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --maxw: 1440px;
  --radius: 2px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ---------------------------------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html,body{ height:100%; }
body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
::selection{ background: var(--gold); color: var(--ink); }

h1,h2,h3,h4{ font-family: var(--f-display); font-weight:500; line-height:1.05; letter-spacing:-0.01em; }

.container{
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---- Utility ---------------------------------------------------------------*/
.eyebrow{
  display:flex; align-items:center; gap:.65rem;
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold-soft);
}
.eyebrow::before{ content:''; width:26px; height:1px; background: currentColor; opacity:.7; }
.eyebrow.leaf{ color: var(--leaf-soft); }

.lede{ color: var(--mist); font-size: var(--fs-md); max-width: 46ch; line-height:1.65; }

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 1rem 1.9rem;
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line);
  color: var(--paper);
  overflow:hidden;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--gold);
  transform: translateY(101%); transition: transform .45s var(--ease);
  z-index:-1;
}
.btn:hover{ color:var(--ink); border-color:var(--gold); }
.btn:hover::before{ transform:translateY(0); }
.btn.solid{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn.solid::before{ background: var(--paper); }
.btn.solid:hover{ color:var(--ink); }
.btn.leaf::before{ background:var(--leaf); }
.btn.leaf:hover{ border-color:var(--leaf); color:var(--ink); }

.btn-ghost{
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem; color: var(--mist);
  border-bottom:1px solid var(--line); padding-bottom:.35rem;
  transition: color .3s, border-color .3s;
}
.btn-ghost:hover{ color:var(--paper); border-color:var(--gold-soft); }

.section{ position:relative; padding: clamp(5rem,10vw,9rem) 0; }
.section-head{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.section-head h2{ font-size: var(--fs-xl); max-width:16ch; }
.split-head{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,5rem); align-items:end; }

.divider{ height:1px; background: var(--line); width:100%; }

/* lot-code tag — signature structural device */
.lot{
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.08em;
  color: var(--mist); display:inline-flex; gap:.4em;
}
.lot b{ color: var(--gold-soft); font-weight:600; }

/* ---- Loader ---------------------------------------------------------------*/
#loader{
  position:fixed; inset:0; z-index:9999;
  background: var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 2rem;
}
#loader .mark{
  font-family: var(--f-display); font-size:2.6rem; letter-spacing:.02em; color:var(--paper);
}
#loader .mark em{ font-style:normal; color:var(--gold); }
#loader .bar{ width:220px; height:1px; background:var(--line); position:relative; overflow:hidden; }
#loader .bar span{ position:absolute; inset:0; width:0%; background:var(--gold); }
#loader .pct{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--mist); letter-spacing:.1em; }
.loaded #loader{ pointer-events:none; }

/* ---- Custom cursor ---------------------------------------------------------*/
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--gold); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--line); transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
.cursor-ring.hover{ width:64px; height:64px; border-color:var(--gold); background:rgba(199,154,73,0.08); }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---- Navbar ----------------------------------------------------------------*/
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding: 1.6rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition: padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding: 1rem var(--gutter);
  background: rgba(11,15,13,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__logo{ display:flex; flex-direction:column; line-height:1; }
.nav__logo .n1{ font-family:var(--f-display); font-size:1.35rem; letter-spacing:.01em; }
.nav__logo .n2{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; color:var(--gold-soft); text-transform:uppercase; margin-top:.35rem; }
.nav__links{ display:flex; align-items:center; gap: 2.4rem; }
.nav__links a{
  position:relative; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--mist); padding:.3rem 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav__links a:hover, .nav__links a.active{ color:var(--paper); }
.nav__links a:hover::after, .nav__links a.active::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1.6rem; }
.nav__cta .btn{ padding:.75rem 1.4rem; }
.nav__burger{ display:none; }

/* mobile nav */
.nav__panel{
  position:fixed; inset:0; z-index:490; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:2rem; padding: 3rem var(--gutter);
  transform: translateY(-100%); transition: transform .6s var(--ease);
}
.nav__panel.open{ transform:translateY(0); }
.nav__panel a{ font-family:var(--f-display); font-size:2.4rem; color:var(--paper); }
.nav__panel .lot{ margin-top:1rem; }

/* ---- Hero base --------------------------------------------------------------*/
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding: 8rem var(--gutter) 5rem; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__grid{ position:absolute; inset:0; z-index:1; opacity:.35;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 60% 20%, black, transparent 75%);
}
.hero__content{ position:relative; z-index:2; width:100%; }
.hero h1{ font-size: var(--fs-hero); }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 em{ font-style:italic; color: var(--gold); font-weight:400; }
.hero__meta{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:2.2rem; gap:2rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:2.4rem; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.hero__scroll .track{ width:1px; height:56px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll .track span{ position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold); animation: scrollTrack 2.2s var(--ease) infinite; }
@keyframes scrollTrack{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
.hero__scroll small{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.15em; color:var(--mist); writing-mode:vertical-rl; }

/* floating chips */
.float-chip{
  position:absolute; padding:.5rem .9rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em;
  border:1px solid var(--line); background:rgba(11,15,13,0.55); backdrop-filter:blur(6px);
  color:var(--mist); text-transform:uppercase; will-change:transform;
}

/* ---- Cards -------------------------------------------------------------------*/
.card{
  position:relative; border:1px solid var(--line); padding: 2.2rem;
  background: linear-gradient(155deg, rgba(245,241,230,0.035), rgba(245,241,230,0));
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ border-color: var(--line-soft); }
.card .lot{ margin-bottom:1.4rem; }
.card h3{ font-size:1.35rem; margin-bottom:.7rem; }
.card p{ color:var(--mist); font-size:.92rem; line-height:1.6; }

/* glass panel */
.glass{
  background: rgba(245,241,230,0.045);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---- Product grid --------------------------------------------------------*/
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.product-card{
  position:relative; background:var(--ink); padding:1.8rem; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; cursor:pointer;
}
.product-card__img{ position:absolute; inset:0; z-index:0; }
.product-card__img img{ width:100%; height:100%; object-fit:cover; opacity:.5; transform:scale(1.08); transition: transform 1.1s var(--ease-soft), opacity .5s; }
.product-card:hover .product-card__img img{ transform:scale(1); opacity:.85; }
.product-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,15,13,0.94) 10%, rgba(11,15,13,0.15) 75%); z-index:1; }
.product-card__body{ position:relative; z-index:2; }
.product-card .lot{ margin-bottom:.6rem; }
.product-card h3{ font-size:1.25rem; margin-bottom:.3rem; }
.product-card .tag{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em; color:var(--gold-soft); text-transform:uppercase; }
.product-card .expand{ position:absolute; top:1.4rem; right:1.4rem; z-index:2; width:30px; height:30px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.product-card:hover .expand{ border-color:var(--gold); transform:rotate(90deg); }

/* product detail sheet */
.sheet-overlay{ position:fixed; inset:0; background:rgba(11,15,13,0.7); backdrop-filter:blur(4px); z-index:800; opacity:0; pointer-events:none; transition:opacity .4s; }
.sheet-overlay.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; top:0; right:0; height:100%; width:min(560px,92vw); z-index:801;
  background:var(--ink-soft); border-left:1px solid var(--line);
  transform: translateX(100%); transition: transform .55s var(--ease);
  overflow-y:auto; padding: 3rem clamp(1.8rem,4vw,3rem);
}
.sheet.open{ transform:translateX(0); }
.sheet__close{ position:absolute; top:2rem; right:2rem; width:38px; height:38px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.sheet img{ width:100%; height:220px; object-fit:cover; margin-bottom:2rem; }
.sheet h3{ font-size:2rem; margin-bottom:.4rem; }
.sheet .spec-row{ display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.88rem; gap:1rem; }
.sheet .spec-row span:first-child{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); flex-shrink:0; }
.sheet .spec-row span:last-child{ text-align:right; color:var(--paper-dim); }

/* ---- Footer ------------------------------------------------------------------*/
.site-footer{ position:relative; background:var(--ink-soft); padding-top: 6rem; overflow:hidden; border-top:1px solid var(--line); }
.footer-wave{ position:absolute; top:-1px; left:0; width:100%; line-height:0; }
.footer-wave svg{ width:100%; height:80px; display:block; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; }
.footer-grid h4{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1.3rem; }
.footer-grid ul li{ margin-bottom:.7rem; }
.footer-grid ul a{ color:var(--mist); font-size:.9rem; transition:color .3s, padding-left .3s; }
.footer-grid ul a:hover{ color:var(--paper); padding-left:.3rem; }
.footer-brand p{ color:var(--mist); font-size:.92rem; max-width:32ch; margin-top:1rem; line-height:1.6; }
.footer-social{ display:flex; gap:1rem; margin-top:1.6rem; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .3s, transform .3s; }
.footer-social a:hover{ border-color:var(--gold); transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid var(--line); padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p{ font-family:var(--f-mono); font-size:.72rem; color:var(--mist); letter-spacing:.03em; }
.back-top{ display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); }
.back-top:hover{ color:var(--gold-soft); }

/* whatsapp float */
.wa-float{
  position:fixed; bottom:2rem; right:2rem; z-index:400;
  width:56px; height:56px; border-radius:50%; background:var(--leaf);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.wa-float svg{ width:26px; height:26px; fill:var(--ink); }

/* page hero small (interior pages) */
.page-hero{ padding: 10rem var(--gutter) 4rem; position:relative; }
.page-hero .eyebrow{ margin-bottom:1.4rem; }
.page-hero h1{ font-size: var(--fs-xl); max-width:18ch; }
.crumb{ font-family:var(--f-mono); font-size:.7rem; color:var(--mist); letter-spacing:.08em; margin-top:1.6rem; }
.crumb b{ color:var(--gold-soft); }

/* counters */
.counters{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.counter{ background:var(--ink); padding:2.4rem 1.6rem; text-align:left; }
.counter .num{ font-family:var(--f-display); font-size:clamp(2.2rem,4vw,3.6rem); color:var(--gold); }
.counter .lbl{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); margin-top:.6rem; }

/* timeline */
.timeline{ position:relative; padding-left: 2.6rem; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:3rem; }
.timeline-item{ position:relative; }
.timeline-item::before{ content:''; position:absolute; left:-2.66rem; top:.35rem; width:9px; height:9px; border-radius:50%; background:var(--gold); }
.timeline-item .lot{ margin-bottom:.5rem; }
.timeline-item h3{ font-size:1.3rem; margin-bottom:.5rem; }
.timeline-item p{ color:var(--mist); max-width:60ch; }

/* values / strengths grids */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: 2px; background:var(--line); border:1px solid var(--line); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.grid-2 .card, .grid-3 .card, .grid-4 .card{ border:none; background:var(--ink); }

/* testimonials */
.testi-track{ position:relative; min-height: clamp(240px, 34vw, 300px); }
.testi-card{
  position:absolute; inset:0;
  padding: 3rem clamp(1.6rem,4vw,3.5rem);
  border:1px solid var(--line); background:var(--ink-soft);
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .6s ease;
}
.testi-card:first-child{ opacity:1; visibility:visible; }
.testi-card.active{ opacity:1; visibility:visible; }
.testi-card p{ font-family:var(--f-display); font-size: clamp(1.3rem,2.2vw,1.9rem); line-height:1.45; font-style:italic; max-width:52ch; }
.testi-card .who{ margin-top:2rem; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; color:var(--mist); text-transform:uppercase; }
.testi-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:2rem; }
.testi-dots{ display:flex; gap:.6rem; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s, transform .3s; }
.testi-dots button.active{ background:var(--gold); transform:scale(1.3); }
.testi-arrows{ display:flex; gap:.7rem; }
.testi-arrows button{ width:42px; height:42px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .3s; }
.testi-arrows button:hover{ border-color:var(--gold); }

/* CTA band */
.cta-band{ position:relative; padding: clamp(4rem,9vw,7rem) var(--gutter); text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.cta-band h2{ font-size: var(--fs-xl); max-width:20ch; margin-inline:auto; }
.cta-band .actions{ display:flex; gap:1.2rem; justify-content:center; margin-top:2.4rem; flex-wrap:wrap; }

/* contact page cards */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:1px; }
.contact-card{ background:var(--ink); padding:2.4rem; display:flex; flex-direction:column; gap:1rem; }
.contact-card .ico{ width:42px; height:42px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.contact-card h3{ font-size:1.1rem; }
.contact-card a, .contact-card p{ color:var(--mist); font-size:.92rem; }
.contact-card a:hover{ color:var(--gold-soft); }
.map-wrap{ border:1px solid var(--line); height:420px; filter: grayscale(1) invert(0.92) contrast(0.9); }
.map-wrap iframe{ width:100%; height:100%; border:0; }

/* export process */
.process-row{ display:grid; grid-template-columns: repeat(4,1fr); border:1px solid var(--line); }
.process-step{ padding: 2.4rem; border-right:1px solid var(--line); position:relative; }
.process-step:last-child{ border-right:none; }
.process-step .lot{ margin-bottom:1.2rem; }
.process-step h3{ font-size:1.15rem; margin-bottom:.6rem; }
.process-step p{ color:var(--mist); font-size:.88rem; }

/* preloader hide util */
.no-scroll{ overflow:hidden; height:100%; }