/* ======================================================
   AvenAgro — Design Tokens
   Display: Fraunces (earthy, characterful serif)
   Body: Plus Jakarta Sans
   Utility/mono: JetBrains Mono (batch codes, harvest dates)
   Palette: forest green / leaf green / butter yellow / soil brown
====================================================== */
:root{
  --forest:      #1B4332;
  --leaf:        #40916C;
  --leaf-light:  #74C69D;
  --butter:      #FDECC8;
  --butter-deep: #F6D374;
  --sun:         #F0A202;
  --soil:        #6B4226;
  --cream:       #FFFDF7;
  --ink:         #1B2A21;
  --ink-soft:    #4A5C50;
  --white:       #ffffff;
  --danger:      #C1440E;

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(27,67,50,0.08);
  --shadow-md: 0 12px 32px rgba(27,67,50,0.14);
  --shadow-lg: 0 24px 60px rgba(27,67,50,0.20);

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--forest); margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1em; color:var(--ink-soft); line-height:1.65; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

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

:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:14px 26px; border-radius:var(--radius-pill); border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--forest); color:var(--butter); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:#143a2a; box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-secondary{ background:var(--sun); color:var(--forest); }
.btn-secondary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; border-color:var(--forest); color:var(--forest); }
.btn-ghost:hover{ background:var(--forest); color:var(--butter); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,253,247,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(27,67,50,0.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px; }
.logo{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--forest); }
.logo em{ font-style:normal; color:var(--leaf); }
.logo-mark{ font-size:1.5rem; }
.main-nav{ display:flex; gap:28px; }
.main-nav a{ font-weight:600; font-size:.95rem; color:var(--ink-soft); position:relative; padding:4px 0; }
.main-nav a:hover, .main-nav a.active{ color:var(--forest); }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--leaf); transition:width .2s; }
.main-nav a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2.5px; background:var(--forest); border-radius:2px; transition:.25s; }

@media (max-width:860px){
  .main-nav{
    position:fixed; inset:72px 0 0 0; background:var(--cream); flex-direction:column;
    padding:32px 24px; gap:22px; transform:translateX(100%); transition:transform .3s ease;
    border-top:1px solid rgba(27,67,50,.1);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ font-size:1.1rem; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-waitlist-open{ display:none; }
  .main-nav::after{ content:''; display:block; margin-top:10px; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding:64px 0 90px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; background:var(--butter); color:var(--soil);
  padding:7px 14px; border-radius:var(--radius-pill); margin-bottom:20px; font-weight:600;
}
.hero h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:600; letter-spacing:-0.01em; }
.hero h1 .accent{ color:var(--leaf); font-style:italic; }
.hero-sub{ font-size:1.15rem; max-width:520px; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-stats{ display:flex; gap:32px; margin-top:44px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--forest); }
.hero-stat span{ font-size:.85rem; color:var(--ink-soft); }

/* signature: hand-grown botanical illustration */
.hero-art{ position:relative; aspect-ratio:1/1; }
.hero-art svg{ width:100%; height:100%; }
.hero-blob{ position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, var(--butter) 0%, transparent 60%); z-index:-1; }

/* ---------- Section basics ---------- */
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.section-alt{ background:var(--butter); }
.section-dark{ background:var(--forest); color:var(--butter); }
.section-dark h2, .section-dark h3{ color:var(--cream); }
.section-dark p{ color:#CFE3D6; }
.section-head{ max-width:640px; margin:0 auto 52px; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.eyebrow-center{ margin:0 auto 16px; display:table; }

/* ---------- Farm Journey (real sequence — soil to shelf) ---------- */
.journey{ position:relative; }
.journey-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.journey-step{ position:relative; background:var(--white); border-radius:var(--radius-md); padding:28px 22px; box-shadow:var(--shadow-sm); border:1px solid rgba(27,67,50,.06); }
.journey-step .step-num{ font-family:var(--font-mono); font-size:.8rem; color:var(--leaf); font-weight:700; margin-bottom:14px; display:block; }
.journey-step h4{ font-size:1.15rem; margin-bottom:8px; }
.journey-step p{ font-size:.92rem; margin:0; }
.journey-icon{ font-size:1.8rem; margin-bottom:10px; display:block; }
@media (max-width:920px){ .journey-track{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .journey-track{ grid-template-columns:1fr; } }

/* ---------- USP / Why grid ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.why-card{ background:var(--white); border-radius:var(--radius-md); padding:32px 26px; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; }
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.why-icon{ width:52px; height:52px; border-radius:16px; background:var(--butter); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px; }
.why-card h3{ font-size:1.2rem; margin-bottom:8px; }
.why-card p{ font-size:.94rem; margin:0; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- No-chemical seal (signature element) ---------- */
.seal-strip{ display:flex; align-items:center; gap:28px; background:var(--white); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md); }
.seal-badge{ flex:0 0 auto; width:120px; height:120px; }
.seal-badge svg{ width:100%; height:100%; animation:spin-slow 22s linear infinite; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
.seal-copy h3{ margin-bottom:6px; }
.seal-copy p{ margin:0; }
@media (max-width:700px){ .seal-strip{ flex-direction:column; text-align:center; } }

/* ---------- Produce gallery ---------- */
.produce-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.produce-card{ background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease; }
.produce-card:hover{ transform:translateY(-5px); }
.produce-art{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.produce-info{ padding:16px 18px 20px; }
.produce-info h4{ font-size:1rem; margin-bottom:2px; }
.produce-info span{ font-family:var(--font-mono); font-size:.75rem; color:var(--leaf); }
@media (max-width:920px){ .produce-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Testimonial / trust strip ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.trust-pill{ background:var(--white); border:1px solid rgba(27,67,50,.1); padding:10px 20px; border-radius:var(--radius-pill); font-size:.85rem; font-weight:600; color:var(--forest); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid rgba(27,67,50,.12); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:20px 4px; font-family:var(--font-display); font-size:1.1rem; color:var(--forest); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.faq-q::after{ content:'+'; font-size:1.4rem; transition:transform .25s; color:var(--leaf); }
.faq-item.open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 4px 20px; margin:0; }

/* ---------- CTA banner ---------- */
.cta-banner{ text-align:center; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--forest), #235c43); padding:64px 32px; color:var(--butter); }
.cta-banner h2{ color:var(--cream); }
.cta-banner p{ color:#CFE3D6; max-width:520px; margin:0 auto 28px; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(27,42,33,0.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-card{
  background:var(--cream); border-radius:var(--radius-lg); max-width:480px; width:100%;
  padding:36px 32px; position:relative; max-height:92vh; overflow-y:auto;
  transform:translateY(20px) scale(.97); transition:transform .25s ease; box-shadow:var(--shadow-lg);
}
.modal-overlay.active .modal-card{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top:16px; right:16px; background:var(--butter); border:none; width:34px; height:34px; border-radius:50%; font-size:1.3rem; cursor:pointer; color:var(--forest); line-height:1; }
.badge-chip{ display:inline-block; background:var(--butter); color:var(--soil); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:var(--radius-pill); margin-bottom:14px; }
.modal-header h3{ font-size:1.5rem; margin-bottom:6px; }
.modal-header p{ font-size:.9rem; margin-bottom:22px; }

.waitlist-form .field{ margin-bottom:16px; }
.waitlist-form label{ display:flex; justify-content:space-between; align-items:center; font-size:.85rem; font-weight:700; color:var(--forest); margin-bottom:6px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.waitlist-form input, .waitlist-form textarea, .waitlist-form select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid rgba(27,67,50,.18);
  font-family:var(--font-body); font-size:.95rem; background:var(--white); color:var(--ink); resize:vertical;
}
.waitlist-form input:focus, .waitlist-form textarea:focus, .waitlist-form select:focus{ border-color:var(--leaf); outline:none; }
.link-btn{ background:none; border:none; color:var(--leaf); font-weight:700; font-size:.78rem; cursor:pointer; padding:0; }
.field-hint{ font-size:.76rem; color:var(--ink-soft); margin:6px 0 0; min-height:14px; }
.field-hint.error{ color:var(--danger); }
.field-hint.success{ color:var(--leaf); }
.form-note{ font-size:.78rem; text-align:center; margin:14px 0 0; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

.btn-spinner{ width:16px; height:16px; border:2.5px solid rgba(253,236,200,.4); border-top-color:var(--butter); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-success{ text-align:center; padding:20px 0; }
.success-icon{ font-size:3rem; margin-bottom:10px; }
.form-success h3{ margin-bottom:8px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--forest); color:#CFE3D6; padding:64px 0 28px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .logo{ color:var(--cream); margin-bottom:14px; }
.footer-brand .logo em{ color:var(--leaf-light); }
.footer-brand p{ color:#AFC9BA; font-size:.9rem; max-width:320px; }
.footer-parent{ font-family:var(--font-mono); font-size:.75rem; color:#7FA88F; }
.footer-col h4{ color:var(--cream); font-size:.9rem; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }
.footer-col a{ display:block; color:#AFC9BA; font-size:.9rem; margin-bottom:10px; }
.footer-col a:hover{ color:var(--butter); }
.footer-hint{ font-size:.85rem; color:#AFC9BA; margin-bottom:12px; }
.reveal-email{ background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.3); border-radius:var(--radius-sm); padding:12px 16px; cursor:pointer; width:100%; text-align:left; }
.reveal-label{ font-size:.85rem; color:var(--butter); font-weight:600; }
.reveal-value{ font-family:var(--font-mono); font-size:.88rem; color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.8rem; color:#8FB09C; flex-wrap:wrap; gap:10px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; } }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Legal pages ---------- */
.legal-hero{ background:var(--butter); padding:64px 0 40px; }
.legal-hero h1{ font-size:clamp(2rem,4vw,2.8rem); }
.legal-hero .updated{ font-family:var(--font-mono); font-size:.82rem; color:var(--soil); }
.legal-body{ max-width:820px; margin:0 auto; padding:56px 24px; }
.legal-body h2{ font-size:1.4rem; margin-top:2.2em; }
.legal-body h3{ font-size:1.1rem; color:var(--leaf); margin-top:1.6em; }
.legal-body p, .legal-body li{ color:var(--ink-soft); line-height:1.75; }
.legal-body ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; }
.legal-body ul li{ margin-bottom:.5em; }
.legal-toc{ background:var(--white); border:1px solid rgba(27,67,50,.1); border-radius:var(--radius-md); padding:22px 26px; margin-bottom:20px; }
.legal-toc h4{ margin-bottom:10px; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; color:var(--forest); }
.legal-toc a{ display:block; font-size:.92rem; color:var(--leaf); padding:4px 0; }
.legal-contact{ background:var(--forest); color:var(--cream); border-radius:var(--radius-md); padding:26px; margin-top:2em; }
.legal-contact a{ color:var(--butter); font-weight:700; }

/* ---------- Admin ---------- */
.admin-body{ background:#F3F6F3; font-family:var(--font-body); min-height:100vh; }
.admin-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.admin-login-card{ background:var(--white); width:100%; max-width:400px; padding:40px 32px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.admin-login-card h1{ font-size:1.5rem; text-align:center; }
.admin-login-card .logo-mark{ display:block; text-align:center; font-size:2.2rem; margin-bottom:6px; }
.admin-topbar{ background:var(--forest); color:var(--cream); padding:16px 28px; display:flex; justify-content:space-between; align-items:center; }
.admin-topbar .logo{ color:var(--cream); }
.admin-topbar .logo em{ color:var(--leaf-light); }
.admin-wrap{ padding:32px 28px; max-width:1300px; margin:0 auto; }
.admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.stat-card{ background:var(--white); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-sm); }
.stat-card b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--forest); }
.stat-card span{ font-size:.82rem; color:var(--ink-soft); }
.admin-panel{ background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.admin-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid #eee; gap:12px; flex-wrap:wrap; }
.admin-search{ padding:10px 14px; border:1.5px solid #ddd; border-radius:var(--radius-sm); min-width:220px; }
table.admin-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.admin-table th{ text-align:left; background:#F3F6F3; padding:12px 16px; font-size:.78rem; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.03em; }
table.admin-table td{ padding:13px 16px; border-bottom:1px solid #f0f0f0; color:var(--ink); }
table.admin-table tr:hover td{ background:#FAFCF9; }
.admin-empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.chip{ display:inline-block; background:var(--butter); color:var(--soil); font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); }
@media (max-width:900px){ .admin-stats{ grid-template-columns:1fr 1fr; } .admin-table{ font-size:.8rem; } }