/* ==========================================================================
   Front page — homepage-only styles (from mockup 03).
   Shared components (buttons, sec-head, grids, cards, newsletter,
   testimonials, etc.) live in main.css — do not redeclare them here.
   ========================================================================== */

/* ===== HERO ===== */
.hero{position:relative; padding:64px 0 56px; overflow:hidden;}
.hero-motif{position:absolute; right:-60px; top:-40px; width:420px; height:420px; opacity:.06; z-index:0; stroke:var(--forest); stroke-width:1.2;}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:1;}
.hero-copy .eyebrow{margin-bottom:16px; display:block;}
.hero h1{font-size:46px; line-height:1.1; margin-bottom:18px;}
.hero h1 .accent{color:var(--forest);}
.hero p.lead{font-size:17.5px; color:var(--bark-soft); max-width:480px; margin-bottom:28px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-visual{position:relative;}
.hero-img{aspect-ratio:4/3.1; border-radius:var(--r-lg); background:linear-gradient(135deg, var(--forest) 0%, var(--olive) 55%, #A9B584 100%); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-hover); position:relative; overflow:hidden;}
.hero-img .ph-label{position:absolute; bottom:16px; left:16px; background:rgba(255,255,255,.85); padding:5px 12px; border-radius:8px; font-size:11.5px; color:var(--forest-deep); font-weight:600;}
.hero-img svg{width:120px; height:120px; stroke:rgba(255,253,248,0.85); stroke-width:1.2;}
.hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-badge{position:absolute; bottom:-18px; left:-18px; background:var(--paper); border-radius:var(--r-md); padding:14px 18px; box-shadow:var(--shadow-hover); display:flex; align-items:center; gap:10px;}
.hero-badge .num{font-family:var(--font-display); font-size:24px; color:var(--forest); font-weight:600;}
.hero-badge .cap{font-size:11.5px; color:var(--bark-soft); line-height:1.25;}

/* ===== TRUST STRIP ===== */
.trust-strip{background:var(--forest-deep); padding:22px 0;}
.trust-inner{display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; text-align:center;}
.trust-item{color:var(--white);}
.trust-item .n{font-family:var(--font-display); font-size:22px; font-weight:600;}
.trust-item .l{font-size:12px; color:#C9D4C4; text-transform:uppercase; letter-spacing:.05em;}

/* ===== MILLET VARIETY GRID ===== */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
/* Per-variety placeholder gradients (mockup palette), cycled when a hub has no
   featured image. The flagship keeps main.css's default forest→olive. */
.cat-img.g1{background:linear-gradient(135deg,#8A9A5B,#B7C08A);}
.cat-img.g2{background:linear-gradient(135deg,#6B4F3A,#9C7A5C);}
.cat-img.g3{background:linear-gradient(135deg,#BE8A3D,#D9B673);}
.cat-img.g4{background:linear-gradient(135deg,#5C6B3C,#8A9A5B);}
.cat-img.g5{background:linear-gradient(135deg,#7C8B4E,#A9B584);}
.cat-img.g6{background:linear-gradient(135deg,#4A3B2E,#7C8B4E);}
.cat-card-all{display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;}
.cat-card-all h4{font-size:15px;}

/* ===== BENEFITS BAND ===== */
.benefits-band{background:var(--forest-light); border-radius:var(--r-lg); padding:44px 40px;}
.benefits-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:28px;}
.benefit{text-align:left;}
.benefit .icon{width:46px; height:46px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; margin-bottom:12px; box-shadow:var(--shadow-soft);}
.benefit .icon svg{width:22px; height:22px; stroke:var(--forest);}
.benefit h4{font-size:15px; margin-bottom:5px;}
.benefit p{font-size:12.5px; color:var(--bark-soft);}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .benefits-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .cat-grid, .benefits-grid{grid-template-columns:1fr;}
  .trust-inner{gap:24px;}
}