/* =====================================================================
   RegenBox HK — Shared Stylesheet
   ---------------------------------------------------------------------
   Design language: institutional jade + clay + rice-paper cream, with
   a brass "verification seal" as the signature device — a literal
   stamp motif used only where something is actually being verified
   (farm certification, ESG figures, partner credentials). This is the
   throughline of the brief: transparency and traceability in a
   regenerative food system, expressed as a recurring visual mark
   rather than illustrated decoratively.

   Tailwind utilities are loaded via CDN + tailwind-config.js; this
   file covers everything Tailwind doesn't: the seal device, hairline
   document-style dividers, card/nav/drawer mechanics, and motion.
   ===================================================================== */

:root{
  --jade:#0F3D2E; --rice:#F5F1E8; --clay:#C17A4D; --sage:#8FA68E;
  --ink:#1A1A18; --brass:#D4AF6A; --stone:#B3AC9C; --ledger:#E4DECC;
}
*{ scroll-behavior:smooth; }
body{ background:var(--rice); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; }
.font-display{ font-family:'Source Serif 4',serif; font-feature-settings:'liga' 1; }
.font-mono{ font-family:'IBM Plex Mono', monospace; }

/* Traditional Chinese mode typography — applies when html[lang=zh-Hant] */
html[lang="zh-Hant"] body{ font-family:'Noto Sans HK','IBM Plex Sans',sans-serif; letter-spacing:0.01em; }
html[lang="zh-Hant"] .font-display{ font-family:'Noto Serif HK','Source Serif 4',serif; }

/* ---------- Hairline document rule (institutional, not decorative) ---------- */
.doc-rule{ height:1px; background:var(--stone); opacity:.4; }
.doc-rule-strong{ height:2px; background:var(--jade); }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Verification seal — the signature device ---------- */
/* A circular stamp used ONLY at genuine verification points: farm
   certifications, ESG metric callouts, partner credentials. Never
   used decoratively on every card — that would dilute what it means. */
.seal{
  position:relative; width:84px; height:84px; border-radius:50%;
  border:2px solid var(--brass); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--rice);
}
.seal::before{
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed var(--brass); opacity:.6;
}
.seal-inner{ text-align:center; line-height:1.1; }
.seal-inner .seal-num{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:18px; color:var(--jade); display:block; }
.seal-inner .seal-label{ font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:0.06em; text-transform:uppercase; color:var(--clay); display:block; }
.seal.sm{ width:56px; height:56px; }
.seal.sm .seal-inner .seal-num{ font-size:13px; }
.seal.sm .seal-inner .seal-label{ font-size:6.5px; }
.seal.lg{ width:120px; height:120px; }
.seal.lg .seal-inner .seal-num{ font-size:26px; }
.seal.lg .seal-inner .seal-label{ font-size:9px; }

.lift-card{ transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.lift-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 38px -12px rgba(15,61,46,0.22); }

.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0%; background:var(--clay); transition:width .25s ease; }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* ---------- Desktop mega-menu / dropdown navigation ---------- */
.nav-item{ position:relative; }
.nav-item .nav-chevron{ transition:transform .25s ease; display:inline-block; }
.nav-item:hover .nav-chevron, .nav-item.menu-open .nav-chevron{ transform:rotate(180deg); }
.mega-panel{
  position:fixed; left:0; right:0; top:76px;
  background:var(--rice);
  border-bottom:1px solid rgba(179,172,156,0.4);
  box-shadow:0 24px 48px -16px rgba(15,61,46,0.16);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:35;
}
.mega-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-item::before{ content:''; position:absolute; left:0; right:0; top:100%; height:18px; }
.mega-col-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--clay); margin-bottom:14px; }
.mega-link{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; margin:0 -12px; border-radius:10px; transition:background .2s ease, transform .2s ease; }
.mega-link:hover{ background:rgba(15,61,46,0.05); transform:translateX(2px); }
.mega-link .mega-link-icon{ width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ledger); color:var(--jade); }
.mega-divider{ width:1px; background:rgba(179,172,156,0.4); align-self:stretch; }

/* ---------- Mobile full-height drawer ---------- */
#mobile-drawer{ position:fixed; inset:0; z-index:60; visibility:hidden; }
#mobile-drawer.open{ visibility:visible; }
#mobile-drawer .drawer-overlay{ position:absolute; inset:0; background:rgba(8,31,23,0.55); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s ease; }
#mobile-drawer.open .drawer-overlay{ opacity:1; }
#mobile-drawer .drawer-panel{
  position:absolute; top:0; right:0; height:100vh; height:100dvh; width:min(86vw,400px);
  background:var(--rice); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column; box-shadow:-12px 0 40px -10px rgba(15,61,46,0.25);
}
#mobile-drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-acc-btn{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:18px 0; font-size:17px; font-weight:600; color:var(--ink); border-bottom:1px solid rgba(179,172,156,0.3); }
.drawer-acc-chevron{ transition:transform .25s ease; }
.drawer-acc-btn.open .drawer-acc-chevron{ transform:rotate(180deg); }
.drawer-acc-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.drawer-acc-panel.open{ max-height:340px; }
.drawer-link{ display:block; padding:14px 0 14px 12px; font-size:15px; color:var(--ink); opacity:0.85; }

.thin-scroll::-webkit-scrollbar{ width:6px; }
.thin-scroll::-webkit-scrollbar-thumb{ background:var(--stone); border-radius:99px; }

.tab-btn{ position:relative; padding-bottom:10px; }
.tab-btn.active{ color:var(--jade); font-weight:600; }
.tab-btn.active::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--clay); }

.badge-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.hero-grain{ background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 3px 3px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--clay); outline-offset:2px; border-radius:6px;
}

.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.img-frame{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--sage) 0%, var(--clay) 55%, var(--jade) 100%); }
.img-frame img{ position:relative; z-index:1; }

input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, textarea::placeholder{ color:#9b9483; }

/* ---------- KPI / impact metric card ---------- */
.kpi-card{ background:#fff; border-radius:20px; box-shadow:0 2px 16px -4px rgba(15,61,46,0.10); padding:28px; }

/* ---------- Step indicator (How It Works) ---------- */
.step-num{ width:48px; height:48px; border-radius:50%; background:var(--jade); color:var(--rice); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:16px; flex-shrink:0; }

/* ---------- Tier toggle (B2C / B2B) ---------- */
.audience-toggle{ display:inline-flex; background:#fff; border-radius:999px; padding:4px; box-shadow:0 2px 10px -2px rgba(15,61,46,0.12); }
.audience-toggle button{ padding:10px 22px; border-radius:999px; font-weight:600; font-size:14px; transition:all .2s ease; }
.audience-toggle button.active{ background:var(--jade); color:var(--rice); }
.audience-toggle button:not(.active){ color:var(--ink); opacity:.6; }

/* ---------- Certification strip ---------- */
.cert-strip{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:center; }
.cert-item{ display:flex; align-items:center; gap:10px; opacity:.85; }

/* ---------- Form ---------- */
.form-field label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:rgba(26,26,24,0.6); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:12px 16px; border-radius:10px; background:#fff; border:1px solid var(--stone);
  font-size:14px; outline:none; transition:border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--clay); }

.view-toggle-btn{ padding:8px 12px; border-radius:10px; transition:background .2s ease,color .2s ease; }
.view-toggle-btn.active{ background:var(--jade); color:#fff; }
.view-toggle-btn:not(.active){ color:var(--stone); }
.list-row{ display:flex; gap:16px; align-items:center; }
.list-row img{ width:96px; height:96px; border-radius:14px; object-fit:cover; flex-shrink:0; }