/* ==========================================================================
   JUTEBERRY — Premium Sustainable Jute & Cotton Bags
   Design tokens: ivory/sand base, deep forest green, coral accent
   Type: Cormorant Garamond (display) + Inter (body/UI) + JetBrains Mono (data)
   Layout language adapted from an editorial botanical-luxury reference.
   Brand colors (forest green / coral) intentionally preserved.
   ========================================================================== */

:root{
  /* ---- Color (Juteberry brand colors kept) ---- */
  --ivory:        #F7F3EA;
  --ivory-2:      #FBF9F4;
  --sand:         #EAE1CD;
  --sage:         #6f8a72;
  --forest:       #0d3b2a;
  --forest-2:     #082018;
  --forest-light: #1a5f3d;
  --coral:        #ff6b4a;
  --coral-dark:   #e53e25;
  --coral-light:  #ff8a6f;
  --charcoal:     #1f1d18;
  --gray:         #5a5a5a;
  --line:         rgba(31,29,24,0.12);
  --line-on-dark: rgba(247,243,234,0.18);
  --shadow:       0 8px 32px rgba(13,59,42,0.08);
  --shadow-lg:    0 20px 60px rgba(13,59,42,0.15);

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- Scale ---- */
  --container: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-s: .4s;
  --dur-m: .8s;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -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; background:none; border:none; cursor:pointer; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

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

::selection{ background:var(--coral); color:#fff; }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll                                                        */
/* ---------------------------------------------------------------------- */
.reveal-up{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
.reveal-up.is-inview{ opacity:1; transform:translateY(0); }
[data-stagger] > *{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
[data-stagger].is-inview > *{ opacity:1; transform:translateY(0); }
[data-stagger].is-inview > *:nth-child(1){ transition-delay:.02s; }
[data-stagger].is-inview > *:nth-child(2){ transition-delay:.08s; }
[data-stagger].is-inview > *:nth-child(3){ transition-delay:.14s; }
[data-stagger].is-inview > *:nth-child(4){ transition-delay:.20s; }
[data-stagger].is-inview > *:nth-child(5){ transition-delay:.26s; }
[data-stagger].is-inview > *:nth-child(6){ transition-delay:.32s; }
[data-stagger].is-inview > *:nth-child(7){ transition-delay:.38s; }
[data-stagger].is-inview > *:nth-child(8){ transition-delay:.44s; }

/* ---------------------------------------------------------------------- */
/* Preloader                                                               */
/* ---------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--forest);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader img{ width:52px; opacity:.9; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.94);} 50%{ opacity:1; transform:scale(1);} }
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------------------------------------------------------------------- */
/* Typography helpers                                                     */
/* ---------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--forest-light);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--coral); display:inline-block; }

.h-display-xl{ font-size:clamp(44px, 7vw, 100px); }
.h-display-l{ font-size:clamp(34px, 4.6vw, 58px); }
.h-display-m{ font-size:clamp(26px, 3.2vw, 40px); }

.lede{ font-size:clamp(16px, 1.4vw, 19px); color:#4b473e; max-width:46ch; line-height:1.75; }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-head h2{ margin-top:14px; }
.section-head p{ max-width:34ch; color:var(--gray); font-size:15px; line-height:1.7; }
.section-cta{ margin-top:56px; display:flex; justify-content:center; }
.section-pad{ padding:120px 0; }
@media (max-width:768px){ .section-pad{ padding:80px 0; } }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  border-radius:50px;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; }

.btn-primary{ background:var(--coral); color:#fff; border:1px solid var(--coral); box-shadow:0 12px 32px rgba(255,107,74,.28); }
.btn-primary:hover{ background:var(--coral-dark); border-color:var(--coral-dark); transform:translateY(-3px); }

.btn-forest{ background:var(--forest); color:var(--ivory-2); border:1px solid var(--forest); }
.btn-forest:hover{ background:var(--forest-2); transform:translateY(-3px); }

.btn-outline{ background:transparent; color:var(--charcoal); border:1px solid var(--charcoal); }
.btn-outline:hover{ background:var(--charcoal); color:var(--ivory); }

.btn-outline-light{ background:transparent; color:#fff; border:1px solid var(--line-on-dark); }
.btn-outline-light:hover{ background:#fff; color:var(--forest); border-color:#fff; }

/* ---------------------------------------------------------------------- */
/* Announcement bar                                                        */
/* ---------------------------------------------------------------------- */
.announce{ background:var(--forest); color:var(--ivory); overflow:hidden; height:36px; display:flex; align-items:center; }
.announce__track{ display:flex; white-space:nowrap; animation:marquee 26s linear infinite; }
.announce__track span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:0 26px; border-right:1px solid var(--line-on-dark); color:var(--coral-light); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------------- */
/* Header / Nav                                                            */
/* ---------------------------------------------------------------------- */
header{
  position:fixed; top:36px; left:0; right:0; z-index:999;
  background:rgba(247,243,234,0.7);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-on-dark);
  transition:all var(--dur-s) var(--ease);
}
header.scrolled{ top:0; background:rgba(247,243,234,0.95); box-shadow:var(--shadow); }
.nav-wrapper{ max-width:var(--container); margin:0 auto; padding:18px var(--gutter); display:flex; justify-content:space-between; align-items:center; }
header.scrolled .nav-wrapper{ padding:13px var(--gutter); }

.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--forest); }
.logo img{ height:32px; width:auto; }

nav.nav-links{ display:flex; gap:42px; }
nav.nav-links a{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; position:relative; }
nav.nav-links a::after{ content:''; position:absolute; bottom:-6px; left:0; width:0; height:1px; background:var(--coral); transition:width var(--dur-s) var(--ease); }
nav.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-icon-btn{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; transition:background var(--dur-s), color var(--dur-s); }
.nav-icon-btn:hover{ background:var(--forest); color:var(--ivory); border-color:var(--forest); }
.cta-header{ background:var(--forest); color:var(--ivory); padding:12px 26px; border-radius:50px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; transition:background var(--dur-s); }
.cta-header:hover{ background:var(--forest-2); }

.nav-burger{ display:none; width:40px; height:40px; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.nav-burger span{ width:22px; height:1.5px; background:var(--charcoal); transition:transform var(--dur-s), opacity var(--dur-s); }

@media (max-width:900px){
  nav.nav-links{ display:none; }
  .cta-header{ display:none; }
  .nav-burger{ display:flex; }
}

/* Mobile full-screen menu */
.mobile-menu{
  position:fixed; inset:0; z-index:1100; background:var(--forest); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform .6s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu__close{ position:absolute; top:26px; right:var(--gutter); width:40px; height:40px; }
.mobile-menu__close svg{ width:22px; height:22px; }
.mobile-menu__links{ display:flex; flex-direction:column; gap:14px; }
.mobile-menu__links a{ font-family:var(--font-display); font-size:38px; }
.mobile-menu__foot{ position:absolute; bottom:36px; left:var(--gutter); display:flex; flex-direction:column; gap:6px; font-size:13px; color:rgba(247,243,234,.7); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero{ padding:190px var(--gutter) 90px; background:var(--ivory); }
.hero-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; }
.hero-kicker{ margin-bottom:22px; }
.hero-title{ font-size:clamp(42px,6vw,88px); margin-bottom:22px; }
.hero-title em{ color:var(--coral); font-style:italic; }
.hero-sub{ font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--forest-light); margin-bottom:18px; }
.hero-desc{ font-size:16px; color:#4b473e; max-width:48ch; line-height:1.8; margin-bottom:38px; }
.hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:54px; }

.hero-trust{ display:grid; grid-template-columns:repeat(3,auto); gap:40px; padding-top:32px; border-top:1px solid var(--line); }
.hero-trust .stat-number{ font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--coral); line-height:1; margin-bottom:8px; }
.hero-trust .stat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--gray); font-weight:600; }

.hero-visual{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-visual .img-card{ border-radius:6px; overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-visual .img-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.hero-visual .img-card:hover img{ transform:scale(1.06); }
.hero-visual .img-large{ grid-column:1/-1; height:340px; }
.hero-visual .img-small{ height:160px; }

@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:50px; }
}
@media (max-width:640px){
  .hero{ padding:150px 20px 60px; }
  .hero-trust{ grid-template-columns:1fr 1fr; row-gap:24px; }
}

/* ---------------------------------------------------------------------- */
/* Promise strip (certifications marquee)                                  */
/* ---------------------------------------------------------------------- */
.promise{ background:var(--forest); color:var(--ivory); overflow:hidden; padding:22px 0; }
.promise__track{ display:flex; white-space:nowrap; animation:marquee 30s linear infinite; gap:0; }
.promise__track > div{ display:flex; align-items:center; gap:10px; padding:0 34px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; border-right:1px solid var(--line-on-dark); }
.promise__track b{ color:var(--coral-light); font-family:var(--font-mono); font-weight:600; }

/* ---------------------------------------------------------------------- */
/* Products section                                                        */
/* ---------------------------------------------------------------------- */
.products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1100px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .products-grid{ grid-template-columns:1fr; } }

.product-card{ background:var(--ivory-2); display:flex; flex-direction:column; transition:background var(--dur-s); }
.product-card:hover{ background:#fff; }
.product-image{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#eee; }
.product-image img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.product-card:hover .product-image img{ transform:scale(1.07); }
.product-badge{ position:absolute; top:14px; left:14px; background:var(--coral); color:#fff; padding:6px 14px; border-radius:50px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.product-info{ padding:26px 24px; flex:1; display:flex; flex-direction:column; }
.product-category{ font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--coral); font-weight:700; margin-bottom:8px; }
.product-name{ font-family:var(--font-display); font-size:21px; margin-bottom:8px; }
.product-desc{ font-size:13px; color:var(--gray); line-height:1.65; margin-bottom:18px; flex:1; }
.product-cta{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--forest); display:inline-flex; align-items:center; gap:6px; padding-top:12px; border-top:1px solid var(--line); }
.product-cta svg{ width:13px; height:13px; transition:transform var(--dur-s); }
.product-cta:hover svg{ transform:translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Why us / features                                                       */
/* ---------------------------------------------------------------------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
.why-item{ padding:40px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-item__icon{ font-size:26px; margin-bottom:18px; display:block; }
.why-item h3{ font-size:21px; margin-bottom:10px; }
.why-item p{ font-size:14px; color:var(--gray); line-height:1.65; max-width:30ch; }

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                           */
/* ---------------------------------------------------------------------- */
.faq-list{ max-width:900px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; text-align:left; }
.faq-q h3{ font-size:19px; font-weight:500; }
.faq-q .plus{ position:relative; width:16px; height:16px; flex-shrink:0; }
.faq-q .plus::before,.faq-q .plus::after{ content:''; position:absolute; background:var(--forest); transition:transform var(--dur-s) var(--ease); }
.faq-q .plus::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-q .plus::after{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.faq-item.is-open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease); }
.faq-item.is-open .faq-a{ max-height:200px; }
.faq-a p{ padding-bottom:26px; font-size:14.5px; color:var(--gray); line-height:1.75; max-width:64ch; }

/* ---------------------------------------------------------------------- */
/* CTA section                                                             */
/* ---------------------------------------------------------------------- */
.wa-cta{ padding:130px var(--gutter); text-align:center; background:var(--forest); color:var(--ivory); position:relative; overflow:hidden; }
.wa-cta h2{ font-size:clamp(34px,5vw,58px); margin:18px 0 20px; }
.wa-cta h2 em{ color:var(--coral-light); font-style:italic; }
.wa-cta p{ color:rgba(247,243,234,.75); max-width:52ch; margin:0 auto 40px; font-size:16px; line-height:1.75; }
.wa-cta .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:54px; }

.cta-methods{ display:flex; justify-content:center; gap:60px; padding-top:38px; border-top:1px solid var(--line-on-dark); flex-wrap:wrap; }
.cta-method{ text-align:center; }
.cta-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; opacity:.75; margin-bottom:8px; }
.cta-value{ font-size:17px; font-weight:600; font-family:var(--font-display); }
.cta-value a{ color:var(--coral-light); }
.cta-value a:hover{ opacity:.85; }

@media (max-width:640px){ .wa-cta{ padding:90px 20px; } .cta-methods{ gap:30px; } }

/* ---------------------------------------------------------------------- */
/* Footer  — unchanged visual language, social icons untouched            */
/* ---------------------------------------------------------------------- */
footer{ background:linear-gradient(135deg,#051c15 0%,#08271d 100%); color:rgba(255,255,255,.8); padding:70px var(--gutter) 30px; }
.footer-wrapper{ max-width:var(--container); margin:0 auto; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-col h3{ color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:2px; margin-bottom:24px; font-family:var(--font-body); }
.footer-col ul li{ margin-bottom:14px; }
.footer-col a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:13px; transition:.3s; }
.footer-col a:hover{ color:var(--coral); }
.footer-brand{ font-family:var(--font-display); font-size:32px; font-weight:600; margin-bottom:14px; color:#fff; }
.footer-desc{ font-size:14px; line-height:1.8; max-width:380px; margin-bottom:25px; }
.footer-social{ display:flex; gap:14px; flex-wrap:wrap; }
.social-btn{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); transition:all .3s ease; }
.social-btn svg{ width:20px; height:20px; fill:currentColor; }
.social-btn:hover{ background:var(--coral); border-color:var(--coral); transform:translateY(-4px); box-shadow:0 10px 30px rgba(255,107,74,.35); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; font-size:12px; color:rgba(255,255,255,.6); }

@media (max-width:992px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:768px){
  footer{ padding:50px 20px 25px; }
  .footer-grid{ grid-template-columns:1fr; gap:35px; }
  .footer-brand{ font-size:27px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .footer-social{ justify-content:center; }
}

/* ---------------------------------------------------------------------- */
/* Floating buttons — unchanged, social icons/links untouched              */
/* ---------------------------------------------------------------------- */
.float-buttons{ position:fixed; bottom:24px; right:16px; z-index:997; display:flex; flex-direction:column; gap:8px; align-items:center; }

.float-socials{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.float-social-btn{ width:38px; height:38px; border-radius:50%; background:var(--forest); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(13,59,42,.28); transition:all var(--dur-s) var(--ease); }
.float-social-btn:hover{ transform:scale(1.12); background:var(--forest-light); }
.float-social-btn svg{ width:18px; height:18px; }

.whatsapp-float{ width:46px; height:46px; background:linear-gradient(135deg,#25d366,#20ba5c); border-radius:50%; box-shadow:0 12px 40px rgba(37,211,102,.3); transition:all var(--dur-s) var(--ease); display:flex; align-items:center; justify-content:center; position:relative; }
.whatsapp-float:hover{ transform:scale(1.15) rotate(-10deg); box-shadow:0 16px 60px rgba(37,211,102,.4); }
.whatsapp-float::before{ content:''; position:absolute; inset:-4px; background:linear-gradient(135deg,#25d366,#20ba5c); border-radius:50%; opacity:.3; animation:pulse-whatsapp 2s ease-in-out infinite; }
@keyframes pulse-whatsapp{ 0%,100%{ transform:scale(1); opacity:.3; } 50%{ transform:scale(1.1); opacity:0; } }
.whatsapp-icon{ width:22px; height:22px; position:relative; z-index:1; fill:#fff; }

.scroll-float{ width:46px; height:46px; background:rgba(0,0,0,.7); border-radius:50%; display:none; align-items:center; justify-content:center; color:#fff; font-size:19px; transition:all var(--dur-s) var(--ease); opacity:0; }
.scroll-float.show{ display:flex; opacity:1; }
.scroll-float:hover{ background:var(--coral); transform:translateY(-4px); }