/* ============================================================
   JUKOLO INTEGRATED COMMODITIES
   Corporate Website — Premium Redesign
============================================================ */

/* --- DESIGN TOKENS --- */
:root {
  --primary:       #0B2E59;
  --primary-dark:  #071E3D;
  --secondary:     #D6A43A;
  --secondary-rgb: 214, 164, 58;
  --light:         #F6F8FA;
  --dark:          #1A2535;
  --text:          #4B5563;
  --white:         #FFFFFF;
  --shadow-sm:     0 4px 12px rgba(0,0,0,.06);
  --shadow:        0 10px 30px rgba(0,0,0,.09);
  --shadow-lg:     0 20px 50px rgba(0,0,0,.14);
  --radius:        14px;
  --radius-lg:     22px;
  --ease:          cubic-bezier(.4,0,.2,1);
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --transition:    all .3s var(--ease);
}

/* --- RESET & BASE --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Poppins',sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }

.container { max-width:1180px; margin:0 auto; }

/* ============================================================
   TYPOGRAPHY — SHARED UTILITIES
============================================================ */

/* Small gold pill label shown above section headings */
.section-label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(var(--secondary-rgb),.12);
  color:var(--secondary);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:30px;
  margin-bottom:16px;
}

.section-heading {
  text-align:center;
  max-width:780px;
  margin:0 auto 64px;
}

.section-heading .section-label { margin-bottom:20px; }

.section-heading h2 {
  font-size:2.55rem;
  color:var(--primary);
  font-family:'Playfair Display',serif;
  line-height:1.25;
  margin-bottom:18px;
}

/* Gold accent bar beneath every section heading */
.section-heading h2::after {
  content:'';
  display:block;
  width:56px;
  height:3px;
  background:var(--secondary);
  border-radius:2px;
  margin:18px auto 0;
}

.section-heading p {
  color:var(--text);
  line-height:1.9;
  font-size:1.02rem;
  margin-top:20px;
}

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  position:fixed;
  top:0; left:0;
  width:100%;
  height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 7%;
  z-index:1000;
  background:transparent;
  transition:var(--transition);
}

/* JS adds this on scroll on the homepage */
.navbar.scrolled {
  height:70px;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}

/* Used on all inner pages (about, trade, contact) */
.navbar--solid {
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}

.logo img {
  height:78px;
  transition:var(--transition);
}
.navbar.scrolled .logo img { height:62px; }

/* Nav links */
.nav-links { display:flex; gap:36px; }

.nav-links a {
  color:rgba(255,255,255,.92);
  font-weight:600;
  font-size:.93rem;
  letter-spacing:.2px;
  transition:var(--transition);
  position:relative;
  padding-bottom:4px;
}

.navbar.scrolled .nav-links a,
.navbar--solid   .nav-links a { color:var(--primary); }

/* Animated underline */
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background:var(--secondary);
  border-radius:2px;
  transition:width .3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }

.nav-links a:hover,
.nav-links a.active { color:var(--secondary); }

.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.active,
.navbar--solid   .nav-links a:hover,
.navbar--solid   .nav-links a.active { color:var(--secondary); }

/* CTA button */
.nav-btn {
  background:var(--secondary);
  color:white;
  padding:12px 26px;
  border-radius:40px;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.4px;
  transition:var(--transition);
  box-shadow:0 4px 16px rgba(var(--secondary-rgb),.35);
}
.nav-btn:hover {
  background:var(--primary);
  box-shadow:0 6px 22px rgba(11,46,89,.3);
  transform:translateY(-1px);
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:18px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.hamburger span {
  display:block;
  width:100%;
  height:2.5px;
  background:white;
  border-radius:3px;
  transition:var(--transition);
}
.navbar.scrolled .hamburger span,
.navbar--solid   .hamburger span { background:var(--primary); }

.hamburger.open span:nth-child(1) { transform:translateY(7.75px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7.75px) rotate(-45deg); }

/* ============================================================
   BUTTONS
============================================================ */
.btn, .btn-outline {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 34px;
  border-radius:40px;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.3px;
  transition:var(--transition);
}

.btn {
  background:var(--secondary);
  color:white;
  box-shadow:0 4px 16px rgba(var(--secondary-rgb),.32);
}
.btn:hover {
  background:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(11,46,89,.24);
}

.btn-outline {
  border:2px solid rgba(255,255,255,.75);
  color:white;
}
.btn-outline:hover {
  background:white;
  color:var(--primary);
  border-color:white;
}

/* ============================================================
   HERO
============================================================ */
.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:170px 8% 110px;
  color:white;
  background:
    linear-gradient(168deg,rgba(7,30,61,.90) 0%,rgba(11,46,89,.72) 100%),
    url("../images/hero.jpg") center/cover no-repeat;
  position:relative;
  overflow:hidden;
}

/* Subtle diagonal shimmer overlay */
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(45deg,rgba(214,164,58,.05) 0%,transparent 60%);
  pointer-events:none;
}

.hero-content {
  max-width:860px;
  position:relative;
  z-index:1;
}

/* Badge pill above headline */
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(var(--secondary-rgb),.18);
  border:1px solid rgba(var(--secondary-rgb),.45);
  color:#F2C84B;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:8px 20px;
  border-radius:30px;
  margin-bottom:30px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:4rem;
  line-height:1.18;
  margin-bottom:26px;
  font-weight:700;
}

.hero h1 em {
  font-style:normal;
  color:var(--secondary);
}

.hero > .hero-content > p {
  font-size:1.15rem;
  color:rgba(255,255,255,.86);
  max-width:660px;
  margin:0 auto 44px;
  line-height:1.88;
}

.hero-buttons {
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:52px;
}

.hero-features {
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.hero-features span {
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  padding:9px 20px;
  border-radius:30px;
  font-size:.85rem;
  font-weight:500;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.hero-features i { color:var(--secondary); margin-right:6px; }

/* Scroll-down bounce indicator */
.hero-scroll {
  position:absolute;
  bottom:38px;
  left:0;
  right:0;
  width:-moz-fit-content;
  width:fit-content;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.55);
  font-size:.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
  z-index:1;
  will-change:transform;
  animation:heroBounce 2.2s ease-in-out infinite;
}
.hero-scroll i { font-size:18px; color:var(--secondary); }

@keyframes heroBounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-9px); }
}

/* ============================================================
   TRUST BAR
============================================================ */
.trust-bar {
  background:var(--white);
  padding:28px 8%;
  border-bottom:1px solid #eef0f4;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}

.trust-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  gap:8px;
  max-width:860px;
  margin:0 auto;
}

.trust-grid div {
  padding:16px;
  font-size:24px;
  transition:var(--transition);
}
.trust-grid div:hover { transform:translateY(-4px); }
.trust-grid h4 {
  margin-top:10px;
  color:var(--primary);
  font-size:.88rem;
  font-weight:600;
}

/* ============================================================
   ABOUT (homepage snippet)
============================================================ */
.about { padding:110px 8%; background:var(--light); }

.about-grid {
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}

/* Decorative border behind image */
.about-image { position:relative; }
.about-image::before {
  content:'';
  position:absolute;
  top:-18px; left:-18px;
  right:18px; bottom:18px;
  border:3px solid rgba(var(--secondary-rgb),.28);
  border-radius:var(--radius-lg);
  z-index:0;
}
.about-image img {
  position:relative;
  z-index:1;
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

.about-content h2 {
  font-size:2.4rem;
  color:var(--primary);
  margin-bottom:22px;
  font-family:'Playfair Display',serif;
  line-height:1.3;
}
.about-content p { color:var(--text); margin-bottom:18px; line-height:1.95; }

/* ============================================================
   NUMBERS / STATS (homepage)
============================================================ */
.numbers {
  padding:110px 8%;
  background:var(--primary);
  text-align:center;
}

.numbers h2 {
  font-size:2.5rem;
  margin-bottom:60px;
  color:white;
  font-family:'Playfair Display',serif;
}

.numbers-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  max-width:1000px;
  margin:0 auto;
}

.numbers-grid > div {
  padding:44px 20px;
  border-right:1px solid rgba(255,255,255,.1);
  transition:var(--transition);
}
.numbers-grid > div:last-child { border-right:none; }
.numbers-grid > div:hover { background:rgba(255,255,255,.04); }

.promise-icon {
  width:64px; height:64px;
  border-radius:50%;
  background:rgba(var(--secondary-rgb),.15);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  transition:var(--transition);
}
.promise-icon i { font-size:26px; color:var(--secondary); }
.numbers-grid > div:hover .promise-icon { background:var(--secondary); }
.numbers-grid > div:hover .promise-icon i { color:white; }
.numbers-grid h3 {
  font-size:1rem;
  color:white;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:.3px;
}
.numbers-grid p {
  color:rgba(255,255,255,.65);
  font-size:.85rem;
  font-weight:400;
  line-height:1.75;
}

/* ============================================================
   WHY CHOOSE US
============================================================ */
.why-us { padding:110px 8%; background:var(--white); }

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
}

.why-card {
  background:var(--white);
  padding:44px 34px;
  border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:var(--shadow);
  border:1px solid #eef1f5;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
/* Gold stripe that slides in on hover */
.why-card::before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:4px;
  background:var(--secondary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}
.why-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent; }
.why-card:hover::before { transform:scaleX(1); }

/* Icon circle */
.icon-wrap {
  width:70px; height:70px;
  background:rgba(var(--secondary-rgb),.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
  transition:var(--transition);
}
.why-card:hover .icon-wrap { background:var(--secondary); }
.why-card i { font-size:28px; color:var(--secondary); transition:var(--transition); }
.why-card:hover i { color:white; }

.why-card h3 { color:var(--primary); margin-bottom:12px; font-size:1.1rem; font-weight:700; }
.why-card p  { color:var(--text);    line-height:1.85;  font-size:.94rem; }

/* ============================================================
   COMMODITIES (homepage cards)
============================================================ */
.commodities { padding:110px 8%; background:var(--light); }

.commodity-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:30px;
}

.commodity-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid #eef1f5;
  transition:var(--transition);
}
.commodity-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }

/* Image wrapper — enables zoom + overlay */
.commodity-card-img {
  position:relative;
  overflow:hidden;
  height:230px;
}
.commodity-card-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .65s ease;
}
.commodity-card:hover .commodity-card-img img { transform:scale(1.08); }

/* Dark overlay on hover */
.commodity-card-img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(11,46,89,.55),transparent 55%);
  opacity:0;
  transition:opacity .4s ease;
}
.commodity-card:hover .commodity-card-img::after { opacity:1; }

.commodity-info { padding:26px 28px; }
.commodity-info h3 { color:var(--primary); margin-bottom:10px; font-size:1.15rem; font-weight:700; }
.commodity-info p  { color:var(--text);    line-height:1.88;  margin-bottom:14px; font-size:.94rem; }

.commodity-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:.88rem;
  color:var(--primary);
  transition:var(--transition);
}
.commodity-link:hover { color:var(--secondary); gap:10px; }

/* ============================================================
   WORLDWIDE REACH
============================================================ */
.reach { padding:110px 8%; background:var(--white); }

.reach-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
}

.reach-card {
  background:var(--light);
  padding:38px 30px;
  border-radius:var(--radius-lg);
  text-align:center;
  border:1px solid #eef1f5;
  transition:var(--transition);
}
.reach-card:hover {
  transform:translateY(-8px);
  background:var(--white);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.reach-icon-wrap {
  width:66px; height:66px;
  background:rgba(var(--secondary-rgb),.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  transition:var(--transition);
}
.reach-card:hover .reach-icon-wrap { background:var(--secondary); }
.reach-card i { font-size:26px; color:var(--secondary); transition:var(--transition); }
.reach-card:hover i { color:white; }
.reach-card h3 { color:var(--primary); margin-bottom:10px; font-size:1.05rem; font-weight:700; }
.reach-card p  { color:var(--text); font-size:.92rem; line-height:1.85; }

/* ============================================================
   GLOBAL PRESENCE
============================================================ */
.global { padding:120px 8%; background:var(--light); }

.global-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
}

.global-text h2 {
  font-size:2.7rem;
  margin-bottom:20px;
  color:var(--primary);
  font-family:'Playfair Display',serif;
  line-height:1.3;
}
.global-text p { line-height:1.95; margin-bottom:30px; color:var(--text); }

.global-list { padding:0; margin-bottom:36px; }
.global-list li {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 0;
  border-bottom:1px solid rgba(11,46,89,.08);
  font-weight:600;
  color:var(--dark);
  font-size:.96rem;
}
.global-list li:last-child { border-bottom:none; }
.global-list li::before {
  content:'';
  width:9px; height:9px;
  min-width:9px;
  background:var(--secondary);
  border-radius:50%;
}

.global-image img {
  width:100%;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.12));
}

/* ============================================================
   COMMITMENT
============================================================ */
.commitment {
  padding:110px 8%;
  background:var(--primary);
  color:white;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* Decorative circles */
.commitment::before {
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:340px; height:340px;
  border-radius:50%;
  background:rgba(var(--secondary-rgb),.06);
  pointer-events:none;
}
.commitment::after {
  content:'';
  position:absolute;
  bottom:-100px; left:-60px;
  width:280px; height:280px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}

.commitment h2 {
  font-size:2.7rem;
  margin-bottom:26px;
  font-family:'Playfair Display',serif;
  position:relative; z-index:1;
}
.commitment p {
  max-width:840px;
  margin:0 auto;
  line-height:2;
  font-size:1.06rem;
  color:rgba(255,255,255,.8);
  position:relative; z-index:1;
}

/* ============================================================
   EXPORT PROCESS
============================================================ */
.process { padding:110px 8%; background:var(--white); }

.process-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  position:relative;
}

/* Horizontal connector line between steps */
.process-grid::before {
  content:'';
  position:absolute;
  top:34px;
  left:12%;
  width:76%;
  height:2px;
  background:linear-gradient(to right,var(--secondary),rgba(var(--secondary-rgb),.15));
  z-index:0;
}

.process-card {
  background:var(--light);
  padding:44px 28px;
  border-radius:var(--radius-lg);
  text-align:center;
  transition:var(--transition);
  margin:0 10px;
  position:relative;
  z-index:1;
  border:1px solid #eef1f5;
}
.process-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); background:var(--white); }

.step {
  width:68px; height:68px;
  margin:0 auto 26px;
  border-radius:50%;
  background:var(--secondary);
  color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  font-weight:800;
  font-family:'Playfair Display',serif;
  box-shadow:0 8px 22px rgba(var(--secondary-rgb),.38);
}

.process-card h3 { color:var(--primary); margin-bottom:12px; font-size:1.05rem; font-weight:700; }
.process-card p  { color:var(--text);    font-size:.92rem;  line-height:1.85; }

/* ============================================================
   CALL TO ACTION
============================================================ */
.cta {
  padding:110px 8%;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  text-align:center;
  color:white;
  position:relative;
  overflow:hidden;
}
.cta::before {
  content:'';
  position:absolute;
  top:-120px; right:-120px;
  width:420px; height:420px;
  border-radius:50%;
  background:rgba(var(--secondary-rgb),.07);
  pointer-events:none;
}
.cta::after {
  content:'';
  position:absolute;
  bottom:-100px; left:-60px;
  width:320px; height:320px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}

.cta h2 {
  font-size:2.75rem;
  margin-bottom:18px;
  font-family:'Playfair Display',serif;
  position:relative; z-index:1;
}
.cta p {
  max-width:660px;
  margin:0 auto 40px;
  color:rgba(255,255,255,.8);
  line-height:1.9;
  font-size:1.04rem;
  position:relative; z-index:1;
}
.cta .btn { position:relative; z-index:1; }

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background:#050E1D;
  color:white;
  padding:80px 8% 0;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:48px;
}

.footer-column:first-child p {
  color:rgba(255,255,255,.5);
  line-height:1.9;
  font-size:.91rem;
  margin-top:18px;
  max-width:270px;
}

.footer-logo { width:155px; }

.footer-column h3 {
  color:var(--secondary);
  margin-bottom:22px;
  font-size:.96rem;
  font-weight:700;
  letter-spacing:.5px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-column ul li { margin-bottom:13px; }

.footer-column ul li a {
  color:rgba(255,255,255,.55);
  font-size:.91rem;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.footer-column ul li a::before {
  content:'›';
  color:var(--secondary);
  font-size:1.1rem;
}
.footer-column ul li a:hover { color:var(--secondary); padding-left:4px; }

/* Contact column items */
.footer-column.contact-col p {
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:rgba(255,255,255,.55);
  font-size:.91rem;
  margin-bottom:14px;
  line-height:1.7;
}
.footer-column.contact-col i {
  color:var(--secondary);
  margin-top:3px;
  min-width:16px;
}

/* Bottom bar */
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.07);
  margin-top:60px;
  padding:26px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.footer-bottom p { color:rgba(255,255,255,.38); font-size:.85rem; }

/* Social icons */
.footer-social { display:flex; gap:12px; }
.footer-social a {
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55);
  font-size:14px;
  transition:var(--transition);
}
.footer-social a:hover { background:var(--secondary); color:white; transform:translateY(-2px); }

/* ============================================================
   PAGE HERO (About, Trade, Contact)
============================================================ */
.page-hero {
  height:58vh;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:130px 8% 60px;
  background:
    linear-gradient(160deg,rgba(7,30,61,.90) 0%,rgba(11,46,89,.72) 100%),
    url("../images/hero.jpg") center/cover no-repeat;
  color:white;
}

.page-hero h1 {
  font-size:3.4rem;
  font-family:'Playfair Display',serif;
  margin-bottom:18px;
  line-height:1.2;
}
.page-hero p {
  max-width:640px;
  margin:0 auto;
  font-size:1.06rem;
  color:rgba(255,255,255,.84);
  line-height:1.88;
}

/* ============================================================
   ABOUT PAGE
============================================================ */
.company-story { padding:110px 8%; background:var(--white); }

.mission-vision { padding:110px 8%; background:var(--light); }

.mission-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
}

.mission-box {
  background:var(--white);
  padding:50px 42px;
  text-align:center;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  border-top:4px solid var(--secondary);
  transition:var(--transition);
}
.mission-box:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.mission-box .icon-wrap {
  width:68px; height:68px;
  background:rgba(var(--secondary-rgb),.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.mission-box i { font-size:30px; color:var(--secondary); }
.mission-box h3 { margin-bottom:14px; color:var(--primary); font-size:1.25rem; font-weight:700; }
.mission-box p  { color:var(--text); line-height:1.9; }

/* ============================================================
   TRADE PAGE
============================================================ */
.commodity-section         { padding:120px 8%; background:var(--white); }
.commodity-section.alt     { background:var(--light); }

.commodity-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
}

.commodity-image img {
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

.tag {
  display:inline-block;
  background:var(--secondary);
  color:white;
  padding:5px 16px;
  border-radius:30px;
  margin-bottom:16px;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.commodity-text h2 {
  font-size:2.7rem;
  color:var(--primary);
  margin-bottom:18px;
  font-family:'Playfair Display',serif;
  line-height:1.3;
}
.commodity-text p { line-height:1.95; color:var(--text); margin-bottom:30px; }

.specs {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.specs > div {
  background:var(--light);
  padding:16px 18px;
  border-radius:var(--radius);
  border-left:3px solid var(--secondary);
}
.specs h4 {
  color:var(--primary);
  margin-bottom:5px;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
}
.specs p { color:var(--dark); font-weight:600; font-size:.93rem; }

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-section { padding:120px 8%; background:var(--light); }

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:48px;
  max-width:1180px;
  margin:0 auto;
}

.contact-info h2,
.contact-form  h2 {
  color:var(--primary);
  margin-bottom:30px;
  font-family:'Playfair Display',serif;
  font-size:2rem;
}

.info-card {
  background:var(--white);
  padding:30px;
  border-radius:var(--radius);
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
  border-left:4px solid var(--secondary);
  transition:var(--transition);
}
.info-card:hover { transform:translateX(4px); box-shadow:var(--shadow); }
.info-card h3   { margin-bottom:12px; color:var(--primary); font-size:1.05rem; font-weight:700; }
.info-card .info-icon { color:var(--secondary); margin-right:6px; }
.info-card p    { color:var(--text); margin-bottom:6px; font-size:.93rem; line-height:1.7; }
.info-card p strong { color:var(--dark); }

.contact-form {
  background:var(--white);
  padding:48px 42px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.contact-form input,
.contact-form textarea {
  width:100%;
  padding:14px 17px;
  margin-bottom:16px;
  border:1.5px solid #e5e7eb;
  border-radius:var(--radius);
  font-size:.95rem;
  font-family:'Poppins',sans-serif;
  color:var(--dark);
  background:var(--light);
  transition:var(--transition);
}
.contact-form textarea { resize:vertical; min-height:140px; }
.contact-form button   { border:none; cursor:pointer; width:100%; justify-content:center; }

.map-section { padding:0 8% 100px; background:var(--light); }
.map-section h2 {
  text-align:center;
  margin-bottom:36px;
  font-family:'Playfair Display',serif;
  color:var(--primary);
  font-size:1.9rem;
}
.map-embed {
  border:0;
  border-radius:var(--radius-lg);
  display:block;
  width:100%;
  box-shadow:var(--shadow);
}

/* ============================================================
   SCROLL-TO-TOP BUTTON
============================================================ */
.scroll-top {
  position:fixed;
  bottom:34px; right:34px;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--secondary);
  color:white;
  border:none;
  cursor:pointer;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(var(--secondary-rgb),.42);
  opacity:0;
  transform:translateY(20px);
  transition:var(--transition);
  z-index:998;
}
.scroll-top.visible { opacity:1; transform:translateY(0); }
.scroll-top:hover   { background:var(--primary); transform:translateY(-3px); box-shadow:0 10px 26px rgba(11,46,89,.28); }

/* ============================================================
   SCROLL ANIMATIONS
============================================================ */
.fade-up {
  opacity:0;
  transform:translateY(38px);
  transition:opacity .85s ease, transform .85s ease;
}
.fade-up.show { opacity:1; transform:translateY(0); }

/* ============================================================
   ACCESSIBILITY
============================================================ */
a:focus-visible,
button:focus-visible {
  outline:2px solid var(--secondary);
  outline-offset:3px;
  border-radius:4px;
}
input:focus,
textarea:focus {
  border-color:var(--secondary) !important;
  box-shadow:0 0 0 3px rgba(var(--secondary-rgb),.15) !important;
  outline:none;
  background:var(--white) !important;
}

/* ============================================================
   RESPONSIVE — 1100px
============================================================ */
@media(max-width:1100px){
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .hero h1    { font-size:3.4rem; }
  .numbers-grid { grid-template-columns:repeat(2,1fr); }
  .numbers-grid > div { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); }
  .numbers-grid > div:nth-child(2n) { border-bottom:1px solid rgba(255,255,255,.1); }
  .numbers-grid > div:nth-last-child(-n+2) { border-bottom:none; }
}

/* ============================================================
   RESPONSIVE — 900px  (Tablet)
============================================================ */
@media(max-width:900px){
  /* Navbar */
  .navbar { height:66px; padding:0 5%; }
  .nav-btn  { display:none; }
  .hamburger{ display:flex; }
  .nav-links {
    display:none;
    flex-direction:column;
    position:absolute;
    top:66px; left:0;
    width:100%;
    background:rgba(255,255,255,.99);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    padding:26px 7%;
    gap:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.1);
    z-index:999;
  }
  .nav-links.open { display:flex; }
  .nav-links a { color:var(--primary) !important; font-size:.97rem; }

  /* Hero */
  .hero { padding:140px 6% 90px; }
  .hero h1 { font-size:2.6rem; }
  .hero > .hero-content > p { font-size:.97rem; }
  .hero-buttons { flex-direction:column; align-items:center; }

  /* About */
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .about-content { text-align:center; }
  .about-image::before { display:none; }

  /* Numbers */
  .numbers-grid { grid-template-columns:repeat(2,1fr); }
  .numbers-grid > div { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); }
  .numbers-grid > div:nth-last-child(-n+2) { border-bottom:none; }

  /* Trust bar */
  .trust-grid { grid-template-columns:repeat(2,1fr); }

  /* Why cards */
  .why-grid { grid-template-columns:repeat(2,1fr); }

  /* Global */
  .global-grid { grid-template-columns:1fr; gap:44px; }

  /* Process */
  .process-grid::before { display:none; }
  .process-card { margin:0 0 18px; }

  /* Trade */
  .commodity-layout { grid-template-columns:1fr; gap:38px; }
  .commodity-section.alt .commodity-image { order:-1; }
  .specs { grid-template-columns:1fr; }

  /* Contact */
  .contact-grid { grid-template-columns:1fr; }

  /* Page hero */
  .page-hero h1 { font-size:2.5rem; }
}

/* ============================================================
   RESPONSIVE — 600px  (Mobile)
============================================================ */
@media(max-width:600px){
  .hero { padding:120px 5% 80px; }
  .hero h1 { font-size:2rem; }
  .hero-badge { font-size:.68rem; }
  .hero-scroll { display:none; }

  .section-heading h2  { font-size:1.85rem; }
  .about-content h2    { font-size:1.9rem; }
  .commodity-text h2   { font-size:1.9rem; }
  .cta h2              { font-size:1.9rem; }
  .numbers h2          { font-size:1.9rem; }
  .global-text h2      { font-size:1.9rem; }
  .page-hero h1        { font-size:1.9rem; }
  .commitment h2       { font-size:1.9rem; }
  .legal-inner > h1    { font-size:2rem; }

  .numbers-grid         { grid-template-columns:repeat(2,1fr); gap:14px; }
  .numbers-grid > div   { padding:30px 16px; }
  .numbers-grid h3      { font-size:.9rem; }
  .promise-icon         { width:52px; height:52px; }
  .promise-icon i       { font-size:22px; }

  .why-grid    { grid-template-columns:1fr; }

  .contact-form { padding:28px 20px; }
  .footer-grid  { grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:12px; }
  .footer-column:first-child p { max-width:100%; }

  .scroll-top     { bottom:20px; right:20px; width:42px; height:42px; }
  .whatsapp-float { bottom:80px; right:20px; }
  .legal-content  { padding:70px 5%; }

  .process-grid { gap:0; grid-template-columns:1fr; }

  /* Trust bar → single column so items breathe */
  .trust-grid { grid-template-columns:1fr; gap:14px; }

  /* Reach grid → single column on phones */
  .reach-grid { grid-template-columns:1fr; }

  /* Map → shorter on mobile; 450px is too tall for a phone */
  .map-embed { height:260px; }

  /* Cookie banner → stack vertically so accept button never clips */
  .cookie-banner { flex-direction:column; align-items:flex-start; gap:14px; padding:20px 5%; }

  /* Prevent grid children overflowing their track */
  .commodity-card, .why-card, .reach-card, .process-card,
  .mission-box, .info-card { min-width:0; }

  /* Section horizontal padding tighter on phones */
  .why-us, .commodities, .reach, .numbers, .cta,
  .process, .global, .map-section, .about,
  .contact-section, .commitment { padding-left:5%; padding-right:5%; }
}

/* ============================================================
   RESPONSIVE — 480px  (Small phones: iPhone SE, 12 mini)
============================================================ */
@media(max-width:480px){
  .hero { padding:110px 5% 70px; }
  .hero h1 { font-size:1.75rem; line-height:1.2; }
  .hero > .hero-content > p { font-size:.9rem; }

  .section-heading h2   { font-size:1.5rem; }
  .about-content h2,
  .commodity-text h2,
  .cta h2,
  .numbers h2,
  .global-text h2,
  .commitment h2,
  .contact-info h2,
  .contact-form h2      { font-size:1.55rem; }
  .page-hero h1         { font-size:1.55rem; }
  .legal-inner > h1     { font-size:1.65rem; }

  /* Promise cards → 1 column so text never wraps awkwardly */
  .numbers-grid         { grid-template-columns:1fr; gap:12px; }
  .numbers-grid > div   { border-bottom:1px solid rgba(255,255,255,.1); }
  .numbers-grid > div:last-child { border-bottom:none; }

  /* Buttons: easier to tap */
  .btn, .btn-outline    { padding:13px 24px; font-size:.87rem; }

  /* Hero CTA buttons: full width on tiny screens */
  .hero-buttons         { width:100%; }
  .hero-buttons .btn,
  .hero-buttons .btn-outline { width:100%; justify-content:center; }

  /* Footer bottom: tighter */
  .footer-bottom        { gap:10px; }

  /* Map: compact */
  .map-embed            { height:220px; }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
============================================================ */
.whatsapp-float {
  position:fixed;
  bottom:92px; right:34px;
  width:50px; height:50px;
  border-radius:50%;
  background:#25D366;
  color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  box-shadow:0 6px 22px rgba(37,211,102,.4);
  z-index:997;
  transition:var(--transition);
  text-decoration:none;
}
.whatsapp-float:hover {
  background:#128C7E;
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 12px 30px rgba(37,211,102,.5);
}

/* ============================================================
   COOKIE CONSENT BANNER
============================================================ */
.cookie-banner {
  position:fixed;
  bottom:0; left:0;
  width:100%;
  background:rgba(5,14,29,.97);
  color:white;
  padding:18px 7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  z-index:2000;
  transform:translateY(100%);
  transition:transform .5s var(--ease);
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
.cookie-banner.visible { transform:translateY(0); }
.cookie-banner p { font-size:.88rem; color:rgba(255,255,255,.75); line-height:1.6; }
.cookie-banner a { color:var(--secondary); text-decoration:underline; }
.cookie-accept {
  background:var(--secondary);
  color:white;
  border:none;
  padding:10px 24px;
  border-radius:30px;
  font-weight:700;
  font-size:.83rem;
  cursor:pointer;
  white-space:nowrap;
  font-family:'Poppins',sans-serif;
  transition:var(--transition);
}
.cookie-accept:hover { background:var(--primary); }

/* ============================================================
   FOOTER — LEGAL LINKS
============================================================ */
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.footer-legal a {
  color:rgba(255,255,255,.38);
  font-size:.83rem;
  transition:var(--transition);
}
.footer-legal a:hover { color:var(--secondary); }

/* ============================================================
   CONTACT FORM — LABELS
============================================================ */
.form-group { margin-bottom:0; }
.form-group label {
  display:block;
  font-size:.8rem;
  font-weight:600;
  color:var(--primary);
  margin-bottom:5px;
  letter-spacing:.3px;
}

/* ============================================================
   LEGAL PAGES  (Terms of Service / Privacy Policy)
============================================================ */
.legal-content { padding:100px 8%; background:var(--white); }

.legal-inner { max-width:800px; margin:0 auto; }

.legal-inner > h1 {
  font-size:2.9rem;
  color:var(--primary);
  font-family:'Playfair Display',serif;
  margin-bottom:12px;
}

.legal-date {
  color:var(--text);
  font-size:.88rem;
  margin-bottom:56px;
  padding-bottom:22px;
  border-bottom:2px solid #eef1f5;
}

.legal-section { margin-bottom:50px; }

.legal-section h2 {
  font-size:1.25rem;
  color:var(--primary);
  margin-bottom:16px;
  font-weight:700;
  padding-left:16px;
  border-left:3px solid var(--secondary);
  line-height:1.45;
}

.legal-section p {
  color:var(--text);
  line-height:1.95;
  margin-bottom:16px;
}

.legal-section ul {
  list-style:disc;
  padding-left:24px;
  color:var(--text);
  line-height:2;
  margin-bottom:16px;
}

.legal-section ul li { margin-bottom:6px; }

.legal-contact {
  background:var(--light);
  padding:28px 34px;
  border-radius:var(--radius-lg);
  border-left:4px solid var(--secondary);
  margin-top:10px;
}
.legal-contact p { color:var(--text); margin-bottom:8px; font-size:.93rem; }
.legal-contact p:last-child { margin-bottom:0; }
.legal-contact strong { color:var(--primary); }
.legal-contact a { color:var(--secondary); }

/* ============================================================
   APPLE DESIGN & MOTION IMPROVEMENTS
   find-animation-opportunities · improve-animations · apple-design
============================================================ */

/* ── 1. TYPOGRAPHY: tight tracking on Playfair Display display headings
        Negative letter-spacing is standard Apple / premium-brand practice.
        Playfair Display is designed for large sizes — tracking corrects for it. */
.hero h1                { letter-spacing:-0.036em; }
.page-hero h1           { letter-spacing:-0.026em; }
.section-heading h2,
.global-text h2,
.about-content h2,
.commitment h2,
.cta h2,
.commodity-text h2,
.contact-info h2,
.contact-form h2,
.numbers h2,
.legal-inner > h1       { letter-spacing:-0.022em; }

/* ── 2. BUTTON PRESS FEEDBACK (Apple: respond on pointer-down, not release)
        Scale 0.97 per AUDIT.md — subtle enough for tens-per-day frequency.
        !important overrides the slow --transition so the snap is instant. */
.btn:active,
.btn-outline:active,
.nav-btn:active,
.cookie-accept:active   { transform:scale(0.97); transition:transform 160ms var(--ease-out) !important; }

/* ── 3. CARD HOVER: composited-only transitions, snappier duration
        Replaces `transition: all .3s` (which animates layout properties off-GPU)
        with explicit GPU-composited properties.
        Gated by hover media query so touch devices get no false hover trigger. */
@media (hover: hover) and (pointer: fine) {
  .commodity-card { transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
  .why-card       { transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
  .mission-box    { transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
  .process-card   { transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
  .info-card      { transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
  .reach-card     { transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
                               background-color .22s var(--ease-out), border-color .22s var(--ease-out); }
}

/* ── 4. STAGGERED GRID ENTRANCES (30–80ms steps; decorative; never blocks interaction)
        Uses transform-only keyframe to avoid multiplicative opacity with the
        parent .fade-up opacity transition. Cards nudge up within the rising section. */
@keyframes cardNudgeUp {
  from { transform:translateY(16px); }
  to   { transform:translateY(0); }
}

.commodities.show .commodity-card {
  animation:cardNudgeUp .5s var(--ease-out) backwards;
}
.commodities.show .commodity-card:nth-child(2) { animation-delay:70ms; }
.commodities.show .commodity-card:nth-child(3) { animation-delay:140ms; }

.reach.show .reach-card {
  animation:cardNudgeUp .5s var(--ease-out) backwards;
}
.reach.show .reach-card:nth-child(2) { animation-delay:60ms; }
.reach.show .reach-card:nth-child(3) { animation-delay:120ms; }
.reach.show .reach-card:nth-child(4) { animation-delay:180ms; }

/* ── 5. PREFERS-REDUCED-MOTION (AUDIT.md §6: keep opacity fades, drop movement)
        Cross-fades only — never zero, but no position changes. */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .fade-up              { opacity:0; transform:none; transition:opacity .35s ease !important; }
  .fade-up.show         { opacity:1; }
  .hero-badge           { animation:none; }
  .commodities.show .commodity-card,
  .reach.show .reach-card { animation:none; transform:none; }
  .scroll-top           { transition:opacity .3s ease !important; transform:translateY(0) !important; }
}

/* ── 6. PREFERS-REDUCED-TRANSPARENCY: solid navbar over blurred glass */
@media (prefers-reduced-transparency: reduce) {
  .navbar.scrolled, .navbar--solid {
    background:rgba(255,255,255,1);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}