/* ==================================================================
   stofarm.com v2 — modern mobile-first overrides
   layered on top of style.css. uses CSS variables already defined.
   ================================================================== */

:root{
  --v2-primary:#15803D;
  --v2-primary-dark:#14532D;
  --v2-accent:#65A30D;
  --v2-warm:#CA8A04;
  --v2-bg-deep:#0F172A;
  --v2-bg-soft:#F0FDF4;
  --v2-card:#FFFFFF;
  --v2-text:#0F172A;
  --v2-text-soft:#475569;
  --v2-border:#E2E8F0;
  --v2-grad-hero:linear-gradient(135deg,#14532D 0%,#15803D 45%,#65A30D 100%);
  --v2-grad-glow:radial-gradient(80% 60% at 50% 0%,rgba(101,163,13,.18),transparent 70%);
  --v2-shadow-lg:0 20px 50px -20px rgba(20,83,45,.35);
  --v2-radius:18px;
}

*{ -webkit-tap-highlight-color: rgba(21,128,61,.18); }
html{ scroll-behavior:smooth; }
body{ font-feature-settings:'ss01','tnum'; -webkit-font-smoothing:antialiased; }

/* ---------- HERO override ---------- */
.hero-section{
  position:relative;
  background:var(--v2-grad-hero);
  color:#fff;
  padding:80px 0 110px;
  overflow:hidden;
}
.hero-section::before{
  content:'';position:absolute;inset:0;background:var(--v2-grad-glow);pointer-events:none;
}
.hero-section::after{
  content:'';position:absolute;inset:auto -10% -40% -10%;height:200px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.1),transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.hero-content h1{ font-size:clamp(2rem,7vw,3.6rem);line-height:1.15;letter-spacing:-.03em; }
.hero-content p{ font-size:clamp(1rem,3.4vw,1.25rem);opacity:.92;max-width:640px; }
.hero-buttons{ gap:12px; }
.hero-buttons .btn-primary{
  background:#fff;color:var(--v2-primary-dark);font-weight:700;
  box-shadow:var(--v2-shadow-lg);
}
.hero-buttons .btn-primary:hover{ transform:translateY(-2px); }
.hero-buttons .btn-secondary{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);
}

/* ---------- Section spacing ---------- */
.section{ padding:64px 0; }
.section-header h2{
  font-size:clamp(1.5rem,5vw,2.1rem);
  letter-spacing:-.02em;
}
.section-header h2::after{
  content:'';display:block;width:48px;height:3px;background:var(--v2-grad-hero);
  margin:14px auto 0;border-radius:3px;
}

/* ---------- Card refresh ---------- */
.cost-grid,.features-grid{ gap:18px; }
.cost-item,.feature-card{
  background:var(--v2-card);
  border:1px solid var(--v2-border);
  border-radius:var(--v2-radius);
  padding:24px 22px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative;overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--v2-grad-hero);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.feature-card:hover{ transform:translateY(-4px);box-shadow:var(--v2-shadow-lg);border-color:rgba(21,128,61,.35); }
.feature-card:hover::before{ transform:scaleX(1); }
.cost-item:hover{ transform:translateY(-3px);box-shadow:var(--v2-shadow-lg); }
.cost-item .icon{ font-size:2.4rem;margin-bottom:8px; }
.cost-item .amount{ font-weight:800;color:var(--v2-primary-dark);font-size:1.4rem;letter-spacing:-.02em; }

/* ---------- Steps timeline mobile ---------- */
@media (max-width:768px){
  .step-item{ background:var(--v2-card);border:1px solid var(--v2-border);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(15,23,42,.04); }
  .step-number{ background:var(--v2-grad-hero);color:#fff;font-weight:700; }
}

/* ---------- CTA section pop ---------- */
.cta-section{
  background:var(--v2-grad-hero);
  position:relative;overflow:hidden;
}
.cta-section::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(40% 60% at 80% 30%,rgba(255,255,255,.18),transparent 70%);
}
.cta-section .container{ position:relative;z-index:1; }
.cta-section h2{ color:#fff; }
.cta-section p{ color:rgba(255,255,255,.9); }
.cta-section .btn-primary{ background:#fff;color:var(--v2-primary-dark); }
.cta-section .btn-secondary{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5); }

/* ---------- Section-light tint ---------- */
.section-light{ background:linear-gradient(180deg,#F8FAFC 0%,#F0FDF4 100%); }

/* ---------- Mobile bottom nav ---------- */
.v2-bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--v2-border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.v2-bottom-nav .v2-nav-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
.v2-bottom-nav a{
  text-align:center;padding:8px 4px;text-decoration:none;color:var(--v2-text-soft);
  font-size:11px;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:4px;
  border-radius:10px;transition:background .15s,color .15s;
}
.v2-bottom-nav a.active,.v2-bottom-nav a:hover{ color:var(--v2-primary);background:var(--v2-bg-soft); }
.v2-bottom-nav a svg{ width:22px;height:22px; }
@media (max-width:768px){
  .v2-bottom-nav{ display:block; }
  body{ padding-bottom:72px; }
  .site-header .main-nav{ display:none; }
}

/* ---------- Floating quick-action ---------- */
.v2-fab{
  position:fixed;right:16px;bottom:88px;z-index:99;
  background:var(--v2-grad-hero);color:#fff;border-radius:999px;
  padding:12px 18px;font-weight:700;text-decoration:none;font-size:14px;
  box-shadow:0 10px 30px -10px rgba(21,128,61,.6);
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .2s;
}
.v2-fab:hover{ transform:translateY(-2px) scale(1.02); }
@media (min-width:769px){ .v2-fab{ bottom:24px; right:24px; } }

/* ---------- Learn page wizard ---------- */
.learn-hero{ background:var(--v2-grad-hero);color:#fff;padding:60px 0;text-align:center; }
.learn-hero h1{ font-size:clamp(1.8rem,5.5vw,3rem);margin:0 0 12px;letter-spacing:-.03em; }
.learn-hero p{ opacity:.92;font-size:clamp(1rem,3vw,1.2rem); }
.learn-progress{ max-width:620px;margin:24px auto 0;background:rgba(255,255,255,.18);border-radius:999px;height:8px;overflow:hidden; }
.learn-progress .bar{ height:100%;background:#fff;width:0%;transition:width .8s; }
.learn-step{
  background:var(--v2-card);border:1px solid var(--v2-border);border-radius:var(--v2-radius);
  padding:28px 24px;margin:18px 0;position:relative;box-shadow:0 4px 12px rgba(15,23,42,.04);
  transition:box-shadow .25s,transform .25s;
}
.learn-step:hover{ box-shadow:var(--v2-shadow-lg);transform:translateY(-2px); }
.learn-step .step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;background:var(--v2-grad-hero);color:#fff;
  font-weight:800;font-size:1.05rem;margin-right:14px;
}
.learn-step h3{ display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.2rem; }
.learn-step .meta{ display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px; }
.learn-step .badge{ background:var(--v2-bg-soft);color:var(--v2-primary-dark);padding:4px 10px;border-radius:99px;font-size:.78rem;font-weight:600; }
.learn-step ul.related{ list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px; }
.learn-step ul.related li a{ display:block;padding:10px 14px;border:1px solid var(--v2-border);border-radius:10px;text-decoration:none;color:var(--v2-text);transition:border-color .2s,background .2s; }
.learn-step ul.related li a:hover{ border-color:var(--v2-primary);background:var(--v2-bg-soft); }

/* ---------- Category grid (10 cards) ---------- */
.v2-cats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
}
.v2-cat-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 14px;border-radius:16px;
  background:var(--v2-card);border:1px solid var(--v2-border);
  text-decoration:none;color:var(--v2-text);
  transition:transform .2s,box-shadow .25s,background .2s;
  text-align:center;min-height:120px;
}
.v2-cat-card:hover{ transform:translateY(-3px);box-shadow:var(--v2-shadow-lg);background:var(--v2-bg-soft); }
.v2-cat-card .emoji{ font-size:2.1rem;margin-bottom:8px; }
.v2-cat-card .title{ font-weight:700;font-size:.95rem;letter-spacing:-.01em; }
.v2-cat-card .count{ font-size:.78rem;color:var(--v2-text-soft);margin-top:4px; }

/* ---------- Mobile-first tweaks ---------- */
@media (max-width:540px){
  .container{ padding:0 16px; }
  .section{ padding:44px 0; }
  .hero-section{ padding:60px 0 80px; }
  .hero-buttons{ flex-direction:column; }
  .hero-buttons a{ width:100%;justify-content:center; }
  .features-grid{ grid-template-columns:1fr; }
  .cost-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Reveal animation ---------- */
.fade-in-scroll{ opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease; }
.fade-in-scroll.is-visible{ opacity:1;transform:none; }

/* ---------- Dark mode (auto) ---------- */
@media (prefers-color-scheme:dark){
  body{ background:#0F172A;color:#E2E8F0; }
  .section-light{ background:linear-gradient(180deg,#0F172A 0%,#142035 100%); }
  .feature-card,.cost-item,.learn-step{ background:#1E293B;border-color:#334155;color:#E2E8F0; }
  .feature-card h3,.cost-item h4,.learn-step h3{ color:#fff; }
  .feature-card p,.cost-item .range{ color:#94A3B8; }
  .v2-bottom-nav{ background:rgba(15,23,42,.92);border-top-color:#334155; }
  .v2-cat-card{ background:#1E293B;border-color:#334155;color:#E2E8F0; }
  .v2-cat-card:hover{ background:#27324A; }
  .learn-step ul.related li a{ background:#1E293B;border-color:#334155;color:#E2E8F0; }
  .learn-step ul.related li a:hover{ background:#27324A; }
}