/* ============================================
   VERDANTA — Arabic Gum & Natural Ingredients
   Main Stylesheet
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --forest:    #1a2e1c;
  --moss:      #2d4a2f;
  --sage:      #5c7d52;
  --leaf:      #7aaa6a;
  --lime:      #b8d89a;
  --cream:     #f5f0e8;
  --sand:      #e8dfc8;
  --parchment: #faf7f2;
  --ink:       #1a1a18;
  --muted:     #6b6b60;
  --gold:      #c4a35a;
  --white:     #ffffff;
  --nav-h:     76px;
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--parchment); color: var(--ink); font-size: 16px; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ── TOPBAR ─────────────────────────────── */
.vd-topbar { background: var(--forest); color: var(--lime); font-size: 12px; letter-spacing:.06em; text-transform:uppercase; padding: 8px 60px; display:flex; justify-content:space-between; align-items:center; }
.vd-topbar a { color: var(--lime); opacity:.8; transition:opacity .2s; }
.vd-topbar a:hover { opacity:1; }
.vd-topbar-links { display:flex; gap:24px; }

/* ── NAVIGATION ─────────────────────────── */
#masthead { position:sticky; top:0; z-index:999; background:var(--white); height:var(--nav-h); display:flex; align-items:center; padding:0 60px; border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 2px 20px rgba(0,0,0,.06); justify-content:space-between; }
.vd-logo { display:flex; align-items:center; gap:10px; font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--forest); letter-spacing:.03em; }
.vd-logo-mark { width:36px; height:36px; background:var(--forest); border-radius:50% 50% 50% 10%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vd-logo-mark svg { width:20px; height:20px; fill:var(--lime); }
.site-branding img { max-height:48px; width:auto; }

#primary-menu { display:flex; align-items:center; }
#primary-menu li { position:relative; }
#primary-menu > li > a { display:block; padding:0 16px; line-height:var(--nav-h); font-size:14px; font-weight:500; color:var(--ink); letter-spacing:.02em; transition:color .2s; white-space:nowrap; }
#primary-menu > li > a:hover { color:var(--moss); }
#primary-menu ul { position:absolute; top:calc(var(--nav-h) - 1px); left:0; min-width:220px; background:var(--white); border:1px solid rgba(0,0,0,.08); border-top:3px solid var(--sage); box-shadow:0 12px 40px rgba(0,0,0,.12); padding:10px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .22s ease; z-index:1000; }
#primary-menu li:hover > ul { opacity:1; visibility:visible; transform:translateY(0); }
#primary-menu ul li a { display:block; padding:10px 22px; font-size:13.5px; color:var(--ink); transition:background .15s, color .15s, padding .15s; line-height:1.4; }
#primary-menu ul li a:hover { background:var(--cream); color:var(--moss); padding-left:28px; }
.menu-item-cta > a { background:var(--forest) !important; color:var(--white) !important; padding:10px 20px !important; border-radius:4px; line-height:1 !important; margin-left:10px; font-size:13px !important; transition:background .2s !important; }
.menu-item-cta > a:hover { background:var(--moss) !important; }
.menu-toggle { display:none; background:none; border:2px solid var(--forest); border-radius:4px; padding:7px 12px; cursor:pointer; font-size:20px; color:var(--forest); line-height:1; }

/* ── HERO ───────────────────────────────── */
.vd-hero { display:grid; grid-template-columns:1fr 1fr; min-height:90vh; overflow:hidden; }
.vd-hero-left { background:var(--forest); padding:100px 80px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.vd-hero-left::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 80%, rgba(90,160,80,.22) 0%, transparent 60%); pointer-events:none; }
.vd-hero-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(184,216,154,.4); border-radius:100px; padding:6px 16px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); margin-bottom:32px; width:fit-content; animation:vdFadeUp .8s ease both; }
.vd-hero-badge-dot { width:6px; height:6px; background:var(--leaf); border-radius:50%; flex-shrink:0; }
.vd-hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(44px,5vw,70px); font-weight:500; line-height:1.08; color:var(--white); margin-bottom:28px; animation:vdFadeUp .8s .12s ease both; }
.vd-hero-title em { font-style:italic; color:var(--lime); }
.vd-hero-desc { font-size:17px; line-height:1.75; color:rgba(255,255,255,.72); max-width:420px; margin-bottom:48px; animation:vdFadeUp .8s .22s ease both; }
.vd-hero-btns { display:flex; gap:16px; flex-wrap:wrap; animation:vdFadeUp .8s .32s ease both; }
.vd-btn-primary { background:var(--leaf); color:var(--forest); padding:14px 32px; border-radius:4px; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; transition:background .2s, transform .15s; }
.vd-btn-primary:hover { background:var(--lime); transform:translateY(-2px); color:var(--forest); }
.vd-btn-ghost { border:1px solid rgba(255,255,255,.35); color:var(--white); padding:14px 32px; border-radius:4px; font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; transition:border-color .2s, background .2s; }
.vd-btn-ghost:hover { border-color:var(--lime); background:rgba(255,255,255,.07); }
.vd-hero-right { position:relative; overflow:hidden; background:linear-gradient(160deg,#c8dfc0 0%,#7aaa6a 40%,#2d6030 100%); }
.vd-hero-right img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.vd-stat-card { position:absolute; background:var(--white); border-radius:12px; padding:18px 24px; box-shadow:0 8px 32px rgba(0,0,0,.18); z-index:2; animation:vdFadeUp .8s .5s ease both; }
.vd-stat-card.card-a { bottom:60px; left:40px; }
.vd-stat-card.card-b { top:60px; right:40px; }
.vd-stat-num { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:600; color:var(--forest); line-height:1; }
.vd-stat-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:4px; }

/* ── MARQUEE ─────────────────────────────── */
.vd-marquee { background:var(--moss); color:var(--lime); padding:15px 0; overflow:hidden; white-space:nowrap; }
.vd-marquee-track { display:inline-block; animation:vdMarquee 32s linear infinite; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
.vd-marquee-track span { margin:0 36px; }
.vd-marquee-track .dot { color:var(--gold); }

/* ── SECTIONS ───────────────────────────── */
.vd-section { padding:100px 60px; }
.vd-section-label { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.vd-section-label::before { content:''; display:block; width:32px; height:2px; background:var(--sage); }
.vd-section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(34px,4vw,52px); font-weight:500; line-height:1.15; color:var(--forest); }
.vd-section-title em { font-style:italic; color:var(--sage); }
.vd-section-desc { font-size:17px; color:var(--muted); line-height:1.75; max-width:560px; margin-top:18px; }
.vd-row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; flex-wrap:wrap; gap:24px; }
.vd-btn-dark { background:var(--forest); color:var(--white); padding:13px 28px; border-radius:4px; font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; transition:background .2s, transform .15s; white-space:nowrap; }
.vd-btn-dark:hover { background:var(--moss); transform:translateY(-1px); color:var(--white); }

/* ── MARKETS ─────────────────────────────── */
.vd-markets { background:var(--parchment); }
.vd-markets-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vd-market-card { position:relative; border-radius:12px; overflow:hidden; display:block; }
.vd-market-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.vd-market-placeholder { width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.vd-market-card:nth-child(1) .vd-market-placeholder { background:linear-gradient(135deg,#c8dfc0,#4a8a3a); }
.vd-market-card:nth-child(2) .vd-market-placeholder { background:linear-gradient(135deg,#e8d8b8,#8a6030); }
.vd-market-card:nth-child(3) .vd-market-placeholder { background:linear-gradient(135deg,#b8d4e8,#305a7a); }
.vd-market-card:nth-child(4) .vd-market-placeholder { background:linear-gradient(135deg,#e8d0c8,#9a4030); }
.vd-market-card:nth-child(5) .vd-market-placeholder { background:linear-gradient(135deg,#d8e8c0,#4a7a30); }
.vd-market-card:nth-child(6) .vd-market-placeholder { background:linear-gradient(135deg,#ddd0e8,#6a4a8a); }
.vd-market-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,25,10,.88) 0%,rgba(0,0,0,.06) 65%); display:flex; flex-direction:column; justify-content:flex-end; padding:28px; transition:background .3s; }
.vd-market-card:hover .vd-market-overlay { background:linear-gradient(to top,rgba(8,25,10,.96) 0%,rgba(20,40,22,.5) 65%); }
.vd-market-num { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--lime); margin-bottom:6px; }
.vd-market-title { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:500; color:var(--white); line-height:1.2; }
.vd-market-arrow { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.4); color:var(--white); font-size:18px; margin-top:14px; transition:background .2s, border-color .2s; }
.vd-market-card:hover .vd-market-arrow { background:var(--leaf); border-color:var(--leaf); }

/* ── STATS STRIP ─────────────────────────── */
.vd-stats { background:var(--forest); padding:80px 60px; display:grid; grid-template-columns:repeat(5,1fr); gap:40px; text-align:center; }
.vd-count-wrap { font-family:'Cormorant Garamond',serif; font-size:58px; font-weight:500; color:var(--white); line-height:1; display:flex; align-items:flex-start; justify-content:center; }
.vd-count-wrap sup { font-size:26px; margin-top:10px; color:var(--lime); }
.vd-count-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); margin-top:12px; }

/* ── ABOUT ───────────────────────────────── */
.vd-about { background:var(--white); }
.vd-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.vd-about-visual { position:relative; }
.vd-about-img { width:100%; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#a8c890,#2d6030); display:flex; align-items:center; justify-content:center; }
.vd-about-img img { width:100%; height:100%; object-fit:cover; }
.vd-about-badge { position:absolute; bottom:-28px; right:-32px; width:180px; background:var(--sand); border-radius:12px; padding:24px; border:6px solid var(--white); box-shadow:0 12px 40px rgba(0,0,0,.15); text-align:center; }
.vd-about-badge strong { font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--forest); display:block; line-height:1; }
.vd-about-badge span { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:6px; display:block; }
.vd-about-features { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.vd-about-feat { padding:22px; background:var(--parchment); border-radius:8px; border-left:3px solid var(--sage); }
.vd-feat-icon { width:38px; height:38px; background:var(--forest); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.vd-feat-icon svg { width:18px; fill:var(--lime); }
.vd-about-feat h4 { font-weight:600; font-size:14px; margin-bottom:6px; color:var(--forest); }
.vd-about-feat p { font-size:13px; color:var(--muted); line-height:1.6; }

/* ── COMMITMENTS ─────────────────────────── */
.vd-commitments { background:var(--cream); }
.vd-commit-center { text-align:center; max-width:600px; margin:0 auto 56px; }
.vd-commit-center .vd-section-label { justify-content:center; }
.vd-commit-center .vd-section-desc { margin:16px auto 0; }
.vd-commit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.vd-commit-card { background:var(--white); border-radius:12px; padding:40px 28px; text-align:center; border:1px solid rgba(0,0,0,.05); transition:transform .25s, box-shadow .25s; }
.vd-commit-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.1); }
.vd-commit-icon { width:68px; height:68px; border-radius:50%; background:var(--forest); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.vd-commit-icon svg { width:30px; fill:var(--lime); }
.vd-commit-card h3 { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--forest); margin-bottom:12px; }
.vd-commit-card p { font-size:13.5px; color:var(--muted); line-height:1.7; }

/* ── NEWS ────────────────────────────────── */
.vd-news { background:var(--parchment); }
.vd-news-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
.vd-news-card { background:var(--white); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.vd-news-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.1); }
.vd-news-thumb { width:100%; aspect-ratio:16/9; overflow:hidden; flex-shrink:0; }
.vd-news-card:first-child .vd-news-thumb { aspect-ratio:16/10; }
.vd-news-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.vd-news-card:hover .vd-news-thumb img { transform:scale(1.04); }
.vd-news-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; min-height:200px; }
.vd-news-card:nth-child(1) .vd-news-placeholder { background:linear-gradient(135deg,#b8d4a8,#2a6020); }
.vd-news-card:nth-child(2) .vd-news-placeholder { background:linear-gradient(135deg,#d4c4a8,#7a5020); }
.vd-news-card:nth-child(3) .vd-news-placeholder { background:linear-gradient(135deg,#c8d4e8,#305070); }
.vd-news-body { padding:28px; flex:1; display:flex; flex-direction:column; }
.vd-news-tag { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--sage); font-weight:600; margin-bottom:10px; }
.vd-news-card h3 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500; line-height:1.25; color:var(--forest); margin-bottom:12px; }
.vd-news-card:not(:first-child) h3 { font-size:18px; }
.vd-news-card p { font-size:14px; color:var(--muted); line-height:1.65; flex:1; margin-bottom:0; }
.vd-news-meta { font-size:12px; color:var(--muted); margin-top:20px; padding-top:16px; border-top:1px solid var(--sand); display:flex; justify-content:space-between; align-items:center; }
.vd-news-read { color:var(--sage); font-weight:600; }

/* ── CTA BAND ────────────────────────────── */
.vd-cta { background:var(--forest); padding:100px 60px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; position:relative; overflow:hidden; }
.vd-cta::before { content:''; position:absolute; right:-200px; top:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(90,160,80,.18) 0%,transparent 70%); pointer-events:none; }
.vd-cta h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(34px,3.5vw,50px); color:var(--white); font-weight:400; line-height:1.18; }
.vd-cta h2 em { font-style:italic; color:var(--lime); }
.vd-cta p { font-size:16px; color:rgba(255,255,255,.65); margin-top:16px; max-width:480px; }
.vd-btn-cta { background:var(--leaf); color:var(--forest); padding:18px 40px; border-radius:4px; font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; transition:background .2s; display:inline-block; }
.vd-btn-cta:hover { background:var(--lime); color:var(--forest); }

/* ── FOOTER ──────────────────────────────── */
#colophon { background:#0f1a10; color:rgba(255,255,255,.55); padding:80px 60px 40px; }
.vd-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.08); }
.vd-footer-brand p { font-size:14px; line-height:1.75; margin:18px 0 26px; }
.vd-footer-social { display:flex; gap:10px; }
.vd-footer-social a { width:38px; height:38px; border:1px solid rgba(255,255,255,.2); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:rgba(255,255,255,.6); transition:border-color .2s, color .2s; }
.vd-footer-social a:hover { border-color:var(--lime); color:var(--lime); }
.vd-footer-col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--white); margin-bottom:20px; font-weight:600; }
.vd-footer-col ul li { margin-bottom:10px; }
.vd-footer-col ul li a { color:rgba(255,255,255,.5); font-size:14px; transition:color .2s; }
.vd-footer-col ul li a:hover { color:var(--lime); }
.vd-footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:30px; font-size:13px; flex-wrap:wrap; gap:12px; }
.vd-footer-legal a { color:rgba(255,255,255,.4); margin-left:20px; font-size:13px; transition:color .2s; }
.vd-footer-legal a:hover { color:var(--lime); }

/* ── INNER PAGES ─────────────────────────── */
.vd-page-hero { background:var(--forest); padding:80px 60px; text-align:center; }
.vd-page-hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,64px); font-weight:500; color:var(--white); }
.vd-page-hero h1 em { font-style:italic; color:var(--lime); }
.vd-page-hero p { font-size:18px; color:rgba(255,255,255,.7); margin-top:16px; }
.vd-content-wrap { max-width:860px; margin:0 auto; padding:80px 40px; }
.vd-content-wrap h1,.vd-content-wrap h2 { font-family:'Cormorant Garamond',serif; color:var(--forest); margin-bottom:20px; }
.vd-content-wrap p { margin-bottom:20px; color:var(--muted); line-height:1.8; }
.vd-content-wrap img { border-radius:10px; margin:28px 0; }
.vd-content-wrap a { color:var(--sage); text-decoration:underline; }

/* Blog archive */
.vd-blog-wrap { padding:80px 60px; background:var(--parchment); }
.vd-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.vd-post-card { background:var(--white); border-radius:12px; overflow:hidden; transition:transform .25s, box-shadow .25s; }
.vd-post-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.1); }
.vd-post-thumb { width:100%; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--lime),var(--forest)); }
.vd-post-thumb img { width:100%; height:100%; object-fit:cover; }
.vd-post-body { padding:28px; }
.vd-post-cat { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--sage); font-weight:600; margin-bottom:10px; }
.vd-post-card h2 { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:500; line-height:1.3; color:var(--forest); margin-bottom:12px; }
.vd-post-card h2 a { color:inherit; }
.vd-post-card h2 a:hover { color:var(--moss); }
.vd-post-excerpt { font-size:14px; color:var(--muted); line-height:1.65; }
.vd-post-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:20px; padding-top:16px; border-top:1px solid var(--sand); }
.vd-read-more { color:var(--sage); font-weight:600; }

/* ── ANIMATIONS ──────────────────────────── */
@keyframes vdFadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes vdMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.vd-reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.vd-reveal.is-visible { opacity:1; transform:none; }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width:1024px) {
  .vd-hero { grid-template-columns:1fr; }
  .vd-hero-right { display:none; }
  .vd-hero-left { padding:80px 40px; }
  .vd-about-grid { grid-template-columns:1fr; gap:60px; }
  .vd-about-badge { display:none; }
  .vd-news-grid { grid-template-columns:1fr 1fr; }
  .vd-stats { grid-template-columns:repeat(3,1fr); }
  .vd-commit-grid { grid-template-columns:1fr 1fr; }
  .vd-section { padding:70px 40px; }
  #masthead { padding:0 32px; }
  .vd-topbar { padding:8px 32px; }
  .vd-cta { grid-template-columns:1fr; }
  .vd-footer-grid { grid-template-columns:1fr 1fr; }
  .vd-blog-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .menu-toggle { display:flex; align-items:center; justify-content:center; }
  #primary-menu { display:none; flex-direction:column; align-items:stretch; }
  #primary-menu.toggled-on { display:flex; position:absolute; top:var(--nav-h); left:0; right:0; background:var(--white); padding:12px 0; box-shadow:0 12px 30px rgba(0,0,0,.12); border-top:2px solid var(--sage); }
  #primary-menu > li > a { line-height:1.4; padding:12px 24px; }
  #primary-menu ul { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:4px 0 4px 20px; }
  .vd-markets-grid { grid-template-columns:1fr 1fr; }
  .vd-news-grid { grid-template-columns:1fr; }
  .vd-topbar-links { display:none; }
  .vd-about-features { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .vd-markets-grid { grid-template-columns:1fr; }
  .vd-commit-grid { grid-template-columns:1fr; }
  .vd-stats { grid-template-columns:1fr 1fr; padding:60px 24px; }
  .vd-footer-grid { grid-template-columns:1fr; gap:36px; }
  .vd-section { padding:60px 24px; }
  #masthead { padding:0 20px; }
  .vd-topbar { padding:8px 20px; }
  .vd-blog-grid { grid-template-columns:1fr; }
  .vd-hero-left { padding:60px 24px; }
}