/* ============================================================
   JAIPUR DAIRY DIGITAL ECOSYSTEM — DESIGN SYSTEM
   Typography: 'Fraunces' (display/serif) + 'Manrope' (UI/body)
   Motif: Rajasthani jali (lattice) geometry, reduced to a quiet
   line-pattern used as texture, never as literal ornament.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,380..600&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --bg:#FFFFFF;
  --surface:#F5F7FB;
  --surface-raised:#FFFFFF;
  --text:#10172A;
  --text-soft:#5B6472;
  --line:#E4E8F0;
  --green:#1E3A8A;
  --green-deep:#14275C;
  --gold:#FFD54F;
  --gold-deep:#C79A1E;

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:22px;
  --shadow-1: 0 1px 2px rgba(17,24,39,.04), 0 6px 20px rgba(17,24,39,.05);
  --shadow-2: 0 12px 40px rgba(17,24,39,.10);

  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .18s;
  --dur-m: .4s;

  color-scheme: light;
}

/* Default theme on first visit is dark (see assets/js/main.js) — the visitor
   can switch to the light palette above via the nav's theme toggle; their
   choice is remembered in localStorage. */
[data-theme="dark"]{
  --bg:#05060A;
  --surface:#0A0C12;
  --surface-raised:#10131B;
  --text:#FFFFFF;
  --text-soft:#98A2B3;
  --line: rgba(255,255,255,.09);
  --green:#2C4CA6;
  --green-deep:#16265A;
  --gold:#FFD54F;
  --gold-deep:#C79A1E;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.35);
  --shadow-2: 0 20px 60px rgba(0,0,0,.5);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }
@media (min-width:1920px){ .wrap{ max-width:1520px; } }

section{ position:relative; }

/* Type scale */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:560; line-height:1.08; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(2.4rem, 4.6vw, 4.4rem); }
h2{ font-size:clamp(1.9rem, 3.2vw, 3rem); }
h3{ font-size:clamp(1.3rem, 1.8vw, 1.7rem); }
p{ margin:0; }
.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:.82rem;
  color:var(--green); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--gold); border-radius:2px; }

.lede{ color:var(--text-soft); font-size:1.08rem; max-width:56ch; line-height:1.7; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-weight:700; font-size:.96rem;
  border:1px solid transparent; transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-1); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); background:var(--green-deep); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-gold{ background:var(--gold); color:#1a1400; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.btn-sm{ padding:10px 18px; font-size:.86rem; }

/* ---------- 2. JALI TEXTURE (background motif) ---------- */
.jali-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
[data-theme="dark"] .jali-bg{ opacity:.35; }

/* ---------- 3. NAVIGATION ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:background var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), backdrop-filter var(--dur-m) var(--ease);
}
.nav.is-scrolled{
  padding:12px 0;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.28rem; font-weight:560; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-logo{ height:40px; max-width:70vw; width:auto; object-fit:contain; display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-actions{ display:flex; align-items:center; gap:14px; }

/* The nav starts transparent, overlapping the always-dark hero video —
   keep it legible with fixed light text no matter which site theme is
   active. Once scrolled it gets a solid theme-coloured background, so
   text switches to following the theme from that point on. */
.nav .brand{ color:#fff; }
.nav-links a{ font-size:.94rem; font-weight:600; color:rgba(255,255,255,.82); transition:color var(--dur-s); position:relative; }
.nav-links a:hover{ color:#fff; }
.nav-actions .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.nav-actions .btn-ghost:hover{ color:var(--gold); border-color:var(--gold); }
.nav-burger span, .nav-burger::before, .nav-burger::after{ content:''; display:block; width:20px; height:2px; background:#fff; margin:4px auto; transition:transform var(--dur-s), opacity var(--dur-s); }

.nav.is-scrolled .brand{ color:var(--text); }
.nav.is-scrolled .nav-links a{ color:var(--text-soft); }
.nav.is-scrolled .nav-links a:hover{ color:var(--text); }
.nav.is-scrolled .nav-actions .btn-ghost{ color:var(--text); border-color:var(--line); }
.nav.is-scrolled .nav-actions .btn-ghost:hover{ color:var(--green); border-color:var(--green); }
.nav.is-scrolled .nav-burger span,
.nav.is-scrolled .nav-burger::before,
.nav.is-scrolled .nav-burger::after{ background:var(--text); }

.theme-toggle{
  width:44px; height:26px; border-radius:100px; background:var(--surface); border:1px solid var(--line);
  position:relative; padding:0; flex-shrink:0;
}
.theme-toggle::after{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--green); transition:transform var(--dur-m) var(--ease);
}
[data-theme="dark"] .theme-toggle::after{ transform:translateX(18px); background:var(--gold); }

.nav-burger{ display:none; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:none; }

.mobile-menu{
  position:fixed; inset:0; z-index:99; visibility:hidden;
}
.mobile-menu-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity var(--dur-m) var(--ease); }
.mobile-menu-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(320px,84vw); background:var(--bg);
  transform:translateX(100%); transition:transform var(--dur-m) var(--ease);
  padding:90px 28px 28px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-2);
}
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu.is-open .mobile-menu-overlay{ opacity:1; }
.mobile-menu.is-open .mobile-menu-panel{ transform:translateX(0); }
.mobile-menu a{ padding:14px 4px; font-size:1.05rem; font-weight:650; border-bottom:1px solid var(--line); }

/* ---------- 4. HERO: VIDEO BACKGROUND + QUERY FORM ---------- */
.hero-video-hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:100px; padding-bottom:60px; overflow:hidden; color:#fff;
}
.hero-video-bg{ position:absolute; inset:0; z-index:0; background:#050B18; }
.hero-video-bg video, .hero-video-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,10,26,.82) 0%, rgba(6,16,40,.62) 45%, rgba(8,22,48,.22) 100%);
}
.hero-video-row{ position:relative; z-index:1; display:flex; justify-content:flex-end; width:100%; }

.query-form-card{
  width:100%; max-width:360px; background:rgba(9,17,36,.72);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-m);
  padding:22px; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow-2); color-scheme:dark;
}
.query-form-card h2{ color:#fff; text-align:center; margin-bottom:16px; font-size:1.15rem; }
.query-form-card .field{ margin-bottom:11px; }
.query-form-card label{ display:block; font-size:.74rem; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:4px; }
.query-form-card .req{ color:var(--gold); }
/* Higher-specificity + !important: these must always win over the generic
   ".field input" light-theme rule further down the sheet, regardless of
   source order or active theme. This is what was making the boxes go white. */
.query-form-card .field input:not([type="checkbox"]):not([type="radio"]),
.query-form-card .field select,
.query-form-card .field textarea,
.query-form-card input:not([type="checkbox"]):not([type="radio"]),
.query-form-card select,
.query-form-card textarea{
  width:100% !important; padding:9px 11px !important; border-radius:var(--radius-s) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.08) !important; color:#fff !important; font-family:inherit; font-size:.84rem;
}
.query-form-card textarea{ min-height:64px; }
.query-form-card input::placeholder, .query-form-card textarea::placeholder{ color:rgba(255,255,255,.5) !important; }
.query-form-card input:focus, .query-form-card select:focus, .query-form-card textarea:focus{ outline:none; border-color:var(--gold) !important; }
.phone-row{ display:grid; grid-template-columns:104px 1fr; gap:8px; }
.phone-row select{ padding:9px 6px !important; }
.captcha-row{ display:flex; align-items:center; gap:12px; }
.captcha-row input{ flex:1; }
.captcha-refresh{ background:none; border:none; color:var(--gold); font-size:.76rem; font-weight:700; text-decoration:underline; padding:0; white-space:nowrap; }
.agree-row{ display:flex; align-items:flex-start; gap:7px; font-size:.72rem; color:rgba(255,255,255,.75); margin:4px 0 14px; cursor:pointer; }
.agree-row input[type="checkbox"]{ width:16px !important; height:16px; flex-shrink:0; margin:2px 0 0; }
.agree-row a{ color:var(--gold); text-decoration:underline; }
.query-form-card .btn{ padding:10px 18px !important; font-size:.86rem; }

@media (max-width:1023px){
  .hero-video-row{ justify-content:center; }
  .query-form-card{ max-width:340px; }
}

/* ---------- 5. ECOSYSTEM (network) ---------- */
.ecosystem{ padding:48px 0 56px; }
.ecosystem-head{ max-width:640px; margin-bottom:56px; }
.ecosystem-diagram{ position:relative; }
.ecosystem-diagram svg{ width:100%; height:auto; }
.node-label{ font-family:var(--font-body); font-weight:700; font-size:13px; fill:var(--text); }
.node-sub{ font-size:11px; fill:var(--text-soft); }

/* ---------- 6. STATISTICS ---------- */
.stats{ padding:80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.stat-item{ text-align:left; border-left:2px solid var(--gold); padding-left:18px; }
.stat-num{ font-family:var(--font-display); font-size:clamp(2rem,3.4vw,3rem); font-weight:560; display:block; }
.stat-label{ color:var(--text-soft); font-size:.9rem; margin-top:6px; display:block; }
@media (max-width:767px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:28px; } }

/* ---------- 7. PRODUCT HUB (bento, non-uniform) ---------- */
.products{ padding:120px 0; }
.products-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap; }
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:190px; gap:18px;
}
.product-card{
  position:relative; grid-column:span 2; border-radius:var(--radius-l); padding:26px;
  background:var(--surface-raised); border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-s);
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb, var(--green) 40%, var(--line)); }
.product-card.featured{ grid-row:span 2; grid-column:span 3; background:linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%); color:#fff; border:none; }
.product-card.featured .product-desc{ color:rgba(255,255,255,.82); }
.product-card.wide{ grid-column:span 3; }
.product-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--green); flex-shrink:0; }
.product-card.featured .product-icon{ background:rgba(255,255,255,.14); color:#fff; }
.product-name{ font-family:var(--font-display); font-size:1.2rem; margin-top:16px; }
.product-desc{ color:var(--text-soft); font-size:.88rem; margin-top:8px; line-height:1.55; }
.product-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.84rem; margin-top:16px; color:var(--green); }
.product-card.featured .product-link{ color:var(--gold); }
.product-link svg{ width:14px; height:14px; transition:transform var(--dur-s); }
.product-card:hover .product-link svg{ transform:translateX(3px); }

@media (max-width:1023px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .product-card, .product-card.featured, .product-card.wide{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:639px){
  .bento{ grid-template-columns:1fr; }
  .product-card, .product-card.featured, .product-card.wide{ grid-column:span 1; }
}

/* ---------- 8. CAROUSEL ---------- */
.carousel{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-2); }
.carousel-track{ display:flex; transition:transform var(--dur-m) var(--ease); }
.carousel-slide{ min-width:100%; position:relative; aspect-ratio:21/8; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; }
.carousel-slide-content{ position:absolute; left:0; bottom:0; padding:36px; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent 70%); width:100%; }
.carousel-dots{ position:absolute; bottom:18px; right:28px; display:flex; gap:8px; }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:none; padding:0; }
.carousel-dots button.active{ background:#fff; width:22px; border-radius:4px; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(6,10,26,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-s), border-color var(--dur-s), transform var(--dur-s);
}
.carousel-arrow svg{ width:20px; height:20px; }
.carousel-arrow:hover{ background:rgba(44,76,166,.65); border-color:rgba(255,255,255,.5); }
.carousel-arrow-prev{ left:24px; }
.carousel-arrow-prev svg{ transform:rotate(180deg); }
.carousel-arrow-next{ right:24px; }
@media (max-width:640px){ .carousel-arrow{ width:38px; height:38px; } .carousel-arrow-prev{ left:12px; } .carousel-arrow-next{ right:12px; } }
@media (max-width:767px){ .carousel-slide{ aspect-ratio:4/5; } }

/* ---------- 8b. CAMPAIGN / LATEST UPDATES ---------- */
.campaign{
  padding:100px 0 110px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(44,76,166,.28), transparent 70%) #070B1C;
}
.campaign-eyebrow{ color:#6FC3FF; }
.campaign-hero{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
.campaign-hero-text h2{ margin:10px 0 0; font-size:clamp(2rem,4vw,3rem); color:#fff; }
.campaign-hero-text h2 .grad{ background:linear-gradient(90deg,#6FC3FF,#4C7CF0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.campaign-tagline{ font-size:1.05rem; font-weight:700; color:#fff; margin:12px 0 0; }
.campaign-desc{ color:rgba(255,255,255,.6); margin:8px 0 26px; max-width:440px; }
.campaign-hero-media{ position:relative; }
.campaign-hero-media img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:var(--radius-l); box-shadow:var(--shadow-2); }
.campaign-impact{
  position:absolute; right:-16px; bottom:-30px; width:230px; z-index:2;
  background:#0E1B4D; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-m);
  padding:18px; box-shadow:var(--shadow-2);
}
.campaign-impact h4{ display:flex; align-items:center; gap:8px; color:#fff; font-size:.85rem; margin:0 0 12px; }
.campaign-impact h4 svg{ width:16px; height:16px; color:#6FC3FF; }
.campaign-impact-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,.08); }
.campaign-impact-row:first-of-type{ border-top:none; }
.campaign-impact-icon{ width:30px; height:30px; border-radius:50%; background:rgba(111,195,255,.15); color:#6FC3FF; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.campaign-impact-icon svg{ width:15px; height:15px; }
.campaign-impact-row strong{ display:block; color:#fff; font-size:.95rem; font-family:var(--font-display); }
.campaign-impact-row span{ display:block; color:rgba(255,255,255,.55); font-size:.72rem; }
@media (max-width:1023px){ .campaign-hero{ grid-template-columns:1fr; } .campaign-impact{ position:static; width:100%; margin-top:20px; } }

.campaign-cards{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr);
  gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:80px; padding-bottom:8px;
}
.campaign-card{
  scroll-snap-align:start; background:var(--surface-raised); border:1px solid var(--line);
  border-radius:var(--radius-m); overflow:hidden; transition:transform var(--dur-s) var(--ease), border-color var(--dur-s);
}
.campaign-card:hover{ transform:translateY(-4px); border-color:rgba(111,195,255,.4); }
.campaign-card-media{ position:relative; aspect-ratio:16/10; }
.campaign-card-media img{ width:100%; height:100%; object-fit:cover; }
.campaign-card-badge{ position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:100px; color:#fff; font-size:.72rem; font-weight:700; }
.campaign-card-body{ padding:18px; }
.campaign-card-date{ display:flex; align-items:center; gap:6px; color:var(--text-soft); font-size:.78rem; }
.campaign-card-date svg{ width:13px; height:13px; }
.campaign-card-body h4{ font-size:1.02rem; margin:8px 0 6px; color:var(--text); }
.campaign-card-body p{ font-size:.86rem; color:var(--text-soft); margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.campaign-card-link{ display:flex; align-items:center; gap:6px; color:#6FC3FF; font-weight:700; font-size:.85rem; }
.campaign-card-link svg{ width:14px; height:14px; }

.campaign-foot{
  margin-top:60px; padding:24px 32px; border-radius:100px; background:var(--surface);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px;
}
.campaign-foot-item{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.9rem; color:var(--text); }
.campaign-foot-item svg{ width:20px; height:20px; color:#6FC3FF; }
@media (max-width:640px){ .campaign-foot{ border-radius:var(--radius-m); gap:18px; justify-content:flex-start; } }

/* ---------- 8c. BLOG (listing + single post) ---------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:24px; margin-top:44px;
}
.blog-grid .campaign-card-body p{ -webkit-line-clamp:3; }
.blog-post-meta{ display:flex; align-items:center; gap:8px; color:var(--text-soft); font-size:.9rem; margin-bottom:28px; }
.blog-post-meta svg{ width:15px; height:15px; }
.blog-post-hero{ border-radius:var(--radius-l); overflow:hidden; margin-bottom:36px; box-shadow:var(--shadow-2); }
.blog-post-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.prose{ font-size:1.05rem; line-height:1.8; color:var(--text); }
.prose p{ margin:0 0 22px; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- 4b. ECOSYSTEM GALLERY CAROUSEL (replaces network diagram) ---------- */
.gallery-carousel{ height:70vh; }
.gallery-carousel .carousel-track,
.gallery-carousel .carousel-slide{ height:100%; }
.gallery-carousel .carousel-slide{ min-width:100%; aspect-ratio:auto; }
.gallery-carousel-full{
  width:calc(100vw - 48px); max-width:calc(100vw - 48px); margin-left:calc(50% - 50vw + 24px);
  border-radius:0; box-shadow:var(--shadow-2);
}
@media (max-width:640px){
  .gallery-carousel-full{ width:calc(100vw - 24px); max-width:calc(100vw - 24px); margin-left:calc(50% - 50vw + 12px); border-radius:0; }
}
.gallery-carousel-empty{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:var(--radius-l); border:1px dashed var(--line); background:var(--surface);
  color:var(--text-soft); font-size:.95rem; padding:24px;
}
.carousel-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:70px 0 54px;
  background:linear-gradient(0deg, rgba(5,8,20,.92) 0%, rgba(10,18,45,.55) 45%, rgba(44,76,166,.12) 78%, transparent 100%);
}
.carousel-caption .eyebrow{ color:var(--gold); }
.carousel-caption h2{ color:#fff; max-width:680px; }
@media (max-width:767px){ .carousel-caption{ padding:40px 0 30px; } }
@media (max-width:767px){ .gallery-carousel{ height:50vh; } }

/* ---------- 7b. SOFTWARE HUB (laptop mockup + live product links) ---------- */
.software-hub{
  padding:100px 0 90px;
  background:#0E1B4D;
  position:relative; overflow:hidden;
}
.software-hub::before, .software-hub::after{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(80,130,230,.28) 0%, transparent 70%);
  pointer-events:none;
}
.software-hub::before{ top:-160px; left:-140px; }
.software-hub::after{ top:-160px; right:-140px; }

.software-hub-badge{
  display:flex; align-items:center; gap:8px; justify-content:center; width:fit-content;
  margin:0 auto 22px; padding:7px 18px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-weight:700; font-size:.82rem; color:#fff;
}
.software-hub-badge-dot{ width:8px; height:8px; border-radius:50%; background:#4FA8E0; flex-shrink:0; }
.software-hub-head{ text-align:center; max-width:640px; margin:0 auto; position:relative; }
.software-hub-head h2{ margin:0; color:#fff; }
.software-hub-head h2 .grad{
  background:linear-gradient(90deg, #6FC3FF, #4C7CF0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.software-hub-sub{ color:rgba(255,255,255,.6); margin:16px 0 0; font-size:1rem; }
.software-hub-divider{ width:64px; height:3px; margin:22px auto 0; border-radius:3px; background:linear-gradient(90deg, #4C7CF0, #6FC3FF); }

.doodle{
  position:absolute; font-family:'Caveat', cursive; font-size:1.35rem; line-height:1.15;
  color:rgba(255,255,255,.55); text-align:center; pointer-events:none; z-index:1;
}
.doodle-left{ top:64px; left:2%; }
.doodle-right{ top:56px; right:2%; }
.doodle svg{ width:34px; height:34px; color:rgba(255,255,255,.4); margin-top:4px; }
@media (max-width:1180px){ .doodle{ display:none; } }

.software-hub-inner{
  display:grid; grid-template-columns:1fr minmax(340px,460px) 1fr;
  align-items:center; gap:36px; margin-top:56px; position:relative; z-index:1;
}
.software-links{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.software-links-right{ align-items:stretch; }
.software-pill{
  display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:13px 16px; min-width:0;
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s), background var(--dur-s);
}
.software-links-right .software-pill{ flex-direction:row-reverse; text-align:right; }
.software-pill:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }
.software-pill-icon{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;
}
.software-pill-icon svg{ width:20px; height:20px; }
.software-pill-text{ flex:1; min-width:0; }
.software-pill-name{ display:block; font-weight:700; font-size:.94rem; color:#fff; }
.software-pill-desc{ display:block; font-size:.8rem; color:rgba(255,255,255,.5); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.software-pill-go{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); transition:transform var(--dur-s), background var(--dur-s);
}
.software-pill-go svg{ width:14px; height:14px; }
.software-pill:hover .software-pill-go{ background:rgba(255,255,255,.12); transform:translateX(3px); }
.software-links-right .software-pill:hover .software-pill-go{ transform:translateX(-3px); }

.laptop-mockup{ position:relative; width:100%; max-width:460px; margin:0 auto; padding-bottom:26px; justify-self:center; }
.laptop-screen{
  background:#0B1330;
  border:10px solid #0A0F24; border-bottom:none;
  border-radius:14px 14px 0 0; aspect-ratio:16/11; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:12% 8% 16%;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.laptop-screen::before, .laptop-screen::after{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,168,224,.35), transparent 70%);
}
.laptop-screen::before{ top:-60px; left:-60px; }
.laptop-screen::after{ bottom:-70px; right:-40px; }
.laptop-label{ position:relative; z-index:1; font-size:.72rem; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.55); text-transform:uppercase; }
.laptop-headline{ position:relative; z-index:1; font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.5rem); color:#fff; margin-top:6px; }
.laptop-divider{ position:relative; z-index:1; width:40px; height:3px; margin:14px auto 0; border-radius:3px; background:linear-gradient(90deg,#4C7CF0,#6FC3FF); }
.laptop-chips{ position:relative; z-index:1; display:flex; gap:8px; margin-top:auto; padding-top:16px; }
.laptop-chip{
  width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#8FC7F5;
}
.laptop-chip svg{ width:14px; height:14px; }
.laptop-base{
  position:relative; height:16px; border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#171d33,#0A0F24);
}
.laptop-base::after{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:26%; height:5px; background:#0B1330; border-radius:0 0 6px 6px;
}
.laptop-stand-shadow{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:88%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(79,168,224,.55), transparent 72%);
}

.software-hub-foot{
  position:relative; z-index:1; margin-top:80px; padding-top:36px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;
}
.software-hub-foot-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.75); font-weight:700; font-size:.92rem; }
.software-hub-foot-item svg{ width:24px; height:24px; color:#6FC3FF; }

@media (max-width:1023px){
  .software-hub-inner{ grid-template-columns:1fr; gap:44px; }
  .software-links-right{ align-items:stretch; }
  .software-links-right .software-pill{ flex-direction:row; text-align:left; }
  .software-links-right .software-pill:hover{ transform:translateY(-3px); }
  .software-links-right .software-pill:hover .software-pill-go{ transform:translateX(3px); }
  .laptop-mockup{ order:-1; max-width:400px; margin:0 auto; }
}
@media (max-width:640px){
  .software-hub-foot{ grid-template-columns:1fr; gap:20px; }
}

/* ---------- 9. VILLAGE TO MARKET FLOW ---------- */
.flow-section{ padding:100px 0 110px; position:relative; overflow:hidden; background:#0B1330; }
.flow-head{ max-width:640px; }
.flow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:56px 24px; margin-top:70px; }
.flow-step{ text-align:center; }
.flow-step:nth-child(even){ margin-top:64px; }
.flow-num{
  font-family:var(--font-display); font-size:2.4rem; font-weight:600; line-height:1; margin-bottom:2px;
  color:transparent; -webkit-text-stroke:1.5px var(--gold);
}
.flow-stem{ width:1px; height:20px; background:rgba(255,213,79,.55); margin:0 auto; position:relative; }
.flow-stem::before, .flow-stem::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.flow-stem::before{ top:-3px; }
.flow-stem::after{ bottom:-3px; }
.flow-circle{
  width:186px; height:186px; border-radius:50%; margin:0 auto; padding:6px;
  border:2px solid rgba(255,255,255,.85);
}
.flow-circle-inner{
  width:100%; height:100%; border-radius:50%; padding:5px; border:3px solid var(--gold);
  box-shadow:0 16px 36px rgba(0,0,0,.5);
}
.flow-circle img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.flow-step h4{ color:var(--gold); font-size:1.05rem; margin:14px 0 10px; }
.flow-step ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.flow-step li{ color:rgba(255,255,255,.72); font-size:.84rem; }
@media (max-width:1023px){
  .flow-grid{ grid-template-columns:repeat(2,1fr); }
  .flow-step:nth-child(even){ margin-top:0; }
  .flow-step:nth-child(4n+3), .flow-step:nth-child(4n){ margin-top:48px; }
}
@media (max-width:640px){
  .flow-grid{ grid-template-columns:1fr; gap:44px; }
  .flow-step{ margin-top:0 !important; }
  .flow-circle{ width:160px; height:160px; }
}

/* ---------- 9b. VILLAGE TO MARKET — PROTECTED IMAGE VERSION ---------- */
/* Full-bleed, edge-to-edge, background matched to the artwork's own black
   so no theme color (navy/white) can ever peek through on any screen size. */
.flow-section--image{ padding:0; margin:0; background:#060606; overflow:hidden; }
.protected-media{
  position:relative;
  width:100%;
  aspect-ratio: 1366 / 768;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#060606;
  display:block;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-user-drag:none;
  pointer-events:auto;
}
/* Transparent shield sits above the background image so the image element
   itself is never a direct drag/click target — this blocks the browser's
   native "save image" / "copy image" affordances for casual visitors. */
.protected-media-shield{
  position:absolute; inset:0;
  background:transparent;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  z-index:2;
}
@media (max-width:640px){
  .protected-media{ aspect-ratio:1366/768; background-size:contain; }
}

/* ---------- 13. CONTACT ---------- */
.contact{ padding:120px 0; background:var(--surface); }
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-form{ display:grid; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.82rem; font-weight:700; color:var(--text-soft); }
.field input, .field textarea{
  padding:13px 16px; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--bg); color:var(--text);
  font-family:inherit; font-size:.95rem; transition:border-color var(--dur-s);
}
.field input:focus, .field textarea:focus{ border-color:var(--green); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-info{ display:flex; flex-direction:column; gap:26px; }
.info-block{ display:flex; gap:16px; }
.info-block svg{ width:22px; height:22px; color:var(--green); flex-shrink:0; margin-top:2px; }
.info-block strong{ display:block; font-size:.92rem; }
.info-block span{ color:var(--text-soft); font-size:.88rem; }
.map-frame{ border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); height:220px; }
.map-frame iframe{ width:100%; height:100%; border:0; }
@media (max-width:1023px){ .contact-layout{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

/* ---------- 14. FOOTER ---------- */
/* Footer is always dark, regardless of the site's light/dark theme toggle. */
.site-footer{
  padding:80px 0 30px;
  background:#05060A;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:36px; padding-bottom:56px; }
.site-footer .brand{ color:#FFFFFF; }
.footer-brand p{ color:#98A2B3; font-size:.88rem; margin-top:14px; max-width:32ch; }
.footer-col h5{ font-size:.85rem; margin-bottom:16px; color:#FFFFFF; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.86rem; color:#98A2B3; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap; gap:14px; }
.footer-bottom p{ color:#98A2B3; font-size:.8rem; }
.social-row{ display:flex; gap:12px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.15); color:#98A2B3; display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ border-color:var(--gold); color:var(--gold); }
.social-row svg{ width:16px; height:16px; }
@media (max-width:1023px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:639px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- utility reveal (single orchestrated on-scroll reveal) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }