/* =========================================================
   JULY BROS TRADING - FZCO — Global Stylesheet
   ========================================================= */

:root{
  --green:        #2E7D32;
  --green-dark:   #1B5E20;
  --green-soft:   #E9F3EA;
  --white:        #FFFFFF;
  --gray-light:   #F8F9FA;
  --ink:          #16241A;
  --ink-soft:     #4B564D;
  --gold:         #D4AF37;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 20px 45px -20px rgba(27,94,32,0.25);
  --shadow-card: 0 10px 30px -12px rgba(22,36,26,0.18);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,.display-font{
  font-family: var(--font-head);
  font-weight:700;
  color: var(--ink);
  letter-spacing:-0.01em;
}

p{ color: var(--ink-soft); line-height:1.75; }

a{ text-decoration:none; }

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

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

/* ---------- Utility ---------- */
.text-green{ color:var(--green) !important; }
.text-gold{ color:var(--gold) !important; }
.bg-green{ background:var(--green) !important; }
.bg-green-dark{ background:var(--green-dark) !important; }
.bg-soft{ background:var(--green-soft) !important; }
.section{ padding:96px 0; }
.section-sm{ padding:64px 0; }
@media (max-width:767px){
  .section{ padding:64px 0; }
  .section-sm{ padding:44px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--gold); display:inline-block;
}

.section-title{ font-size:clamp(1.9rem,3.2vw,2.75rem); margin-bottom:16px; }
.section-lead{ max-width:640px; color:var(--ink-soft); font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--font-body); font-weight:600; border-radius:999px; padding:.85rem 1.9rem; transition:all .35s var(--ease); }
.btn-primary-lg{
  background:var(--green); color:#fff; border:1px solid var(--green);
}
.btn-primary-lg:hover{ background:var(--green-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn-outline-lg{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.75);
}
.btn-outline-lg:hover{ background:#fff; color:var(--green-dark); transform:translateY(-2px); }
.btn-outline-green{
  background:transparent; color:var(--green); border:1.5px solid var(--green);
}
.btn-outline-green:hover{ background:var(--green); color:#fff; transform:translateY(-2px); }
.btn-gold{
  background:var(--gold); color:var(--ink); border:1px solid var(--gold);
}
.btn-gold:hover{ background:#c29d2c; color:var(--ink); transform:translateY(-2px); }

/* ---------- Navbar ---------- */
.navbar-jb{
  padding:18px 0; transition:all .35s var(--ease); position:fixed; top:0; left:0; right:0; z-index:1050;
  background:rgba(255,255,255,0.0);
}
.navbar-jb.is-scrolled{
  background:rgba(255,255,255,.97); padding:12px 0; box-shadow:0 8px 24px -16px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
}
.navbar-jb .navbar-brand{ font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:#fff; display:flex; align-items:center; gap:10px; }
.navbar-jb.is-scrolled .navbar-brand{ color:var(--green-dark); }
.navbar-jb .navbar-brand .brand-mark{ color: var(--gold); }
.navbar-jb .nav-link{ color:rgba(255,255,255,.92); font-weight:600; font-size:.95rem; margin:0 10px; position:relative; }
.navbar-jb.is-scrolled .nav-link{ color:var(--ink); }
.navbar-jb .nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--gold); transition:width .3s var(--ease);
}
.navbar-jb .nav-link:hover::after, .navbar-jb .nav-link.active::after{ width:100%; }
.navbar-jb .nav-link.active{ color:var(--gold) !important; }
.navbar-jb.is-scrolled .nav-link.active{ color:var(--green) !important; }
.navbar-jb .btn-primary-lg{ padding:.6rem 1.4rem; font-size:.9rem; }
.navbar-toggler{ border:none; }
.navbar-jb .navbar-toggler-icon{ filter:none; }

.page-header-offset{ padding-top:132px; }

/* dropdown mega-ish */
.dropdown-menu-jb{
  border:none; border-radius:16px; box-shadow:var(--shadow-card); padding:10px; margin-top:8px !important;
}
.dropdown-menu-jb .dropdown-item{ border-radius:10px; padding:.55rem .9rem; font-weight:500; }
.dropdown-menu-jb .dropdown-item:hover{ background:var(--green-soft); color:var(--green-dark); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; color:#fff; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06);
  animation:heroZoom 16s ease-in-out infinite alternate;
}
@keyframes heroZoom{ from{ transform:scale(1.06);} to{ transform:scale(1);} }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,12,.72) 0%, rgba(15,28,17,.55) 45%, rgba(9,18,11,.85) 100%);
}
.hero-content{ position:relative; z-index:2; }
.hero .eyebrow{ color:var(--gold); }
.hero .eyebrow::before{ background:var(--gold); }
.hero h1{ color:#fff; font-size:clamp(2.3rem,5vw,3.9rem); line-height:1.08; }
.hero p.lead{ color:rgba(255,255,255,.88); font-size:1.15rem; max-width:600px; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero-stats .stat-num{ font-family:var(--font-head); font-weight:700; font-size:2rem; color:#fff; }
.hero-stats .stat-num .accent{ color:var(--gold); }
.hero-stats .stat-label{ color:rgba(255,255,255,.7); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; color:#fff; opacity:.75;
  display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:34px; background:rgba(255,255,255,.6); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ---------- Leaf Divider (signature element) ---------- */
.leaf-divider{ width:100%; height:auto; display:block; }
.leaf-divider path{ fill:var(--white); }
.leaf-divider.flip path{ fill:var(--green-soft); }

/* ---------- Cards ---------- */
.card-jb{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); border:1px solid rgba(46,125,50,.08);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); overflow:hidden;
}
.card-jb:hover{ transform:translateY(-8px); box-shadow:0 26px 50px -18px rgba(27,94,32,.28); }

.feature-card{ padding:34px 28px; text-align:left; height:100%; }
.feature-icon{
  width:56px; height:56px; border-radius:16px; background:var(--green-soft); display:flex; align-items:center; justify-content:center;
  color:var(--green); margin-bottom:20px;
}
.feature-icon svg{ width:26px; height:26px; }

.product-card{ height:100%; }
.product-card .product-img-wrap{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.product-card .product-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.product-card:hover .product-img-wrap img{ transform:scale(1.08); }
.product-card .product-tag{
  position:absolute; top:16px; left:16px; background:rgba(255,255,255,.92); color:var(--green-dark);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.product-card .product-body{ padding:24px 26px 28px; }
.product-card .product-body h3{ font-size:1.25rem; margin-bottom:8px; }
.product-card .read-more{ font-weight:700; color:var(--green); font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.product-card .read-more svg{ transition:transform .3s var(--ease); width:16px; height:16px; }
.product-card:hover .read-more svg{ transform:translateX(5px); }

/* ---------- Counters ---------- */
.counter-block{ text-align:center; }
.counter-num{ font-family:var(--font-head); font-weight:700; font-size:clamp(2.1rem,4vw,3rem); color:var(--green-dark); }
.counter-num .plus{ color:var(--gold); }
.counter-label{ color:var(--ink-soft); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

/* ---------- Industry chip ---------- */
.industry-chip{
  border-radius:var(--radius-md); overflow:hidden; position:relative; aspect-ratio:1/1; box-shadow:var(--shadow-card);
}
.industry-chip img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.industry-chip:hover img{ transform:scale(1.1); }
.industry-chip .chip-label{
  position:absolute; inset:auto 0 0 0; padding:14px 16px; color:#fff; font-weight:700; font-size:.95rem;
  background:linear-gradient(0deg, rgba(9,18,11,.85), rgba(9,18,11,0));
}

/* ---------- Testimonials ---------- */
.testimonial-card{ padding:34px; height:100%; }
.testimonial-card .stars{ color:var(--gold); letter-spacing:2px; margin-bottom:14px; }
.testimonial-card .quote{ font-style:italic; color:var(--ink); }
.testimonial-avatar{
  width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:var(--font-head);
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; border-radius:32px; overflow:hidden; color:#fff; padding:70px 40px; text-align:center;
}
.cta-band .cta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cta-band .cta-overlay{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(27,94,32,.92), rgba(46,125,50,.85)); }
.cta-band > *{ position:relative; z-index:1; }

/* ---------- Footer ---------- */
.footer-jb{ background:#0E1A10; color:rgba(255,255,255,.75); padding-top:80px; }
.footer-jb h5{ color:#fff; font-size:1rem; margin-bottom:20px; }
.footer-jb a{ color:rgba(255,255,255,.65); }
.footer-jb a:hover{ color:var(--gold); }
.footer-jb .footer-brand{ color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.3rem; }
.footer-jb .social-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.footer-jb .social-icon:hover{ background:var(--gold); border-color:var(--gold); color:#0E1A10; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:56px; padding:22px 0; font-size:.85rem; }

/* ---------- Floating actions ---------- */
.float-actions{ position:fixed; right:22px; bottom:22px; z-index:1040; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  transition:transform .3s var(--ease);
}
.fab:hover{ transform:translateY(-4px) scale(1.04); }
.fab-whatsapp{ background:#25D366; }
.fab-top{ background:var(--green-dark); opacity:0; pointer-events:none; transform:translateY(10px); }
.fab-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Breadcrumb / inner header ---------- */
.inner-hero{
  position:relative; padding:210px 0 90px; color:#fff; overflow:hidden;
}
.inner-hero .hero-bg{ animation:none; }
.inner-hero h1{ color:#fff; font-size:clamp(2rem,4vw,3rem); }
.inner-hero .crumb{ color:rgba(255,255,255,.8); font-size:.9rem; }
.inner-hero .crumb a{ color:#fff; font-weight:600; }
.inner-hero .crumb a:hover{ color:var(--gold); }

/* ---------- Product detail ---------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid rgba(0,0,0,.07); }
.spec-table td{ padding:14px 6px; color:var(--ink-soft); }
.spec-table td:first-child{ font-weight:700; color:var(--ink); width:40%; }

.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; gap:12px; padding:10px 0; color:var(--ink-soft); border-bottom:1px dashed rgba(0,0,0,.08); }
.check-list li:last-child{ border-bottom:none; }
.check-list li svg{ flex:none; width:20px; height:20px; color:var(--green); margin-top:2px; }

.gallery-thumb{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-card); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery-thumb:hover img{ transform:scale(1.08); }

.accordion-jb .accordion-button{ font-weight:700; font-family:var(--font-head); font-size:1rem; }
.accordion-jb .accordion-button:not(.collapsed){ color:var(--green-dark); background:var(--green-soft); }
.accordion-jb .accordion-button:focus{ box-shadow:none; }

/* ---------- Forms ---------- */
.form-jb .form-control, .form-jb .form-select{
  border-radius:12px; border:1.5px solid #E3E7E3; padding:.85rem 1rem; font-size:.95rem;
}
.form-jb .form-control:focus, .form-jb .form-select:focus{ border-color:var(--green); box-shadow:0 0 0 4px rgba(46,125,50,.12); }
.form-jb label{ font-weight:600; font-size:.88rem; margin-bottom:6px; }

/* ---------- Placeholder image blocks (for assets not yet supplied) ---------- */
.img-placeholder{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background:repeating-linear-gradient(135deg, var(--green-soft), var(--green-soft) 12px, #eef5ee 12px, #eef5ee 24px);
  color:var(--green-dark); font-size:.8rem; font-weight:600; text-align:center; padding:20px;
}
.img-placeholder svg{ width:30px; height:30px; opacity:.6; }

/* ---------- Misc ---------- */
.badge-soft{
  background:var(--green-soft); color:var(--green-dark); font-weight:700; font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; padding:7px 14px; border-radius:999px; display:inline-block;
}
.divider-gold{ width:60px; height:3px; background:var(--gold); border-radius:2px; }

.form-search-pop{ min-width:280px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--green); color:#fff; padding:10px 16px; z-index:2000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.focus-ring:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }