:root {
  --bg: #07070a;
  --bg-2: #0e0d13;
  --panel: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.12);
  --text: #f6f4f8;
  --muted: #b6b1be;
  --purple: #a646ff;
  --purple-2: #d886ff;
  --silver: #d8d7de;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 10%, rgba(161,65,255,.15), transparent 28%),
    radial-gradient(circle at 20% 48%, rgba(112,62,190,.10), transparent 30%),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max); margin: 0 auto; padding: 18px 24px;
  backdrop-filter: blur(18px);
  background: linear-gradient(to bottom, rgba(7,7,10,.92), rgba(7,7,10,.68));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.02em; }
.brand-mark {
  width: 38px; height: 38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24); border-radius:10px;
  background: linear-gradient(145deg, #f5f5f6, #8f8f96 45%, #25252b 46%, #111116 100%);
  color:#0a0a0d; font-family: Archivo Black, sans-serif; font-size:14px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 0 30px rgba(170,76,255,.16);
}
.brand-name { font-family: UnifrakturCook, Georgia, serif; font-size: 28px; }
.nav { display:flex; align-items:center; gap:24px; color:var(--muted); font-size:14px; font-weight:700; }
.nav a:hover { color:white; }
.nav-toggle { display:none; background:none; border:0; color:white; font-size:24px; }

.section-pad { max-width: var(--max); margin: 0 auto; padding: 88px 24px; }
.eyebrow, .section-kicker {
  color: var(--purple-2); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow span { width:32px; height:1px; background:var(--purple-2); box-shadow: 0 0 15px var(--purple); }

h1, h2, h3, p { margin-top:0; }
h1 {
  font-family: Archivo Black, sans-serif; font-size: clamp(56px, 8vw, 112px); line-height:.88;
  letter-spacing:-.055em; margin:24px 0 26px;
}
h1 em { color:transparent; -webkit-text-stroke: 1.4px var(--purple-2); font-style:normal; text-shadow: 0 0 30px rgba(166,70,255,.22); }
h2 { font-family: Archivo Black, sans-serif; font-size: clamp(38px, 5vw, 70px); line-height: .98; letter-spacing:-.045em; }
h3 { font-size:23px; margin-bottom:10px; }
p { color: var(--muted); line-height:1.7; }

.hero { min-height: calc(100vh - 80px); display:grid; grid-template-columns: 1.05fr .95fr; gap:68px; align-items:center; padding-top:54px; }
.hero-lede { max-width:680px; font-size:18px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 38px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px;
  border:1px solid transparent; border-radius:12px; cursor:pointer;
  background: linear-gradient(135deg, #bd6bff, #7e2bff); color:white; font-weight:800;
  box-shadow: 0 12px 34px rgba(137,44,255,.28), inset 0 1px rgba(255,255,255,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(137,44,255,.38); }
.btn-small { min-height:40px; padding:0 16px; border-radius:10px; }
.btn-xl { min-height:60px; padding:0 30px; font-size:17px; }
.btn-ghost { background:rgba(255,255,255,.04); color:white; border-color:var(--line); box-shadow:none; }
.btn-ghost:hover { border-color:rgba(202,128,255,.55); box-shadow:0 0 30px rgba(151,65,255,.12); }
.hero-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; border-top:1px solid var(--line); padding-top:22px; }
.hero-stats strong { display:block; font-family:Archivo Black,sans-serif; font-size:18px; color:white; }
.hero-stats span { display:block; color:var(--muted); font-size:12px; margin-top:4px; }

.hero-visual { position:relative; }
.glow-card { position:relative; border-radius:30px; padding:1px; background:linear-gradient(140deg, rgba(255,255,255,.45), rgba(164,61,255,.55), rgba(255,255,255,.06)); box-shadow:0 30px 100px rgba(93,25,147,.30); }
.glow-card::before { content:""; position:absolute; inset:10% -10% -8% 10%; background:#8c34dd; filter:blur(80px); opacity:.25; z-index:-1; }
.glow-card img { width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius:29px; }
.floating-chip { position:absolute; padding:10px 14px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(12,10,17,.76); backdrop-filter:blur(12px); font-size:11px; font-weight:800; letter-spacing:.16em; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.chip-one { left:-24px; top:10%; }
.chip-two { right:-18px; bottom:10%; color:var(--purple-2); }

.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(170,64,255,.05),rgba(255,255,255,.02),rgba(170,64,255,.05)); }
.ticker-track { display:flex; gap:40px; width:max-content; padding:14px 0; animation:ticker 26s linear infinite; }
.ticker span { font-family:Archivo Black,sans-serif; font-size:13px; letter-spacing:.12em; color:#d5cedd; }
@keyframes ticker { to { transform:translateX(-50%); } }

.story-grid { display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; margin-top:26px; }
.story-copy p { max-width:650px; font-size:17px; }
.text-link, .card-link { color:white; font-weight:800; }
.text-link:hover, .card-link:hover { color:var(--purple-2); }
.patch-wrap { border-radius:28px; padding:24px; background:radial-gradient(circle at 50% 50%, rgba(146,66,229,.22), rgba(255,255,255,.025) 56%); border:1px solid var(--line); }
.patch-wrap img { border-radius:20px; }

.section-heading { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:32px; }
.section-heading h2 { max-width:850px; margin:10px 0 0; }
.product-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.product-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); transition:transform .25s ease,border-color .25s ease; }
.product-card:hover { transform:translateY(-6px); border-color:rgba(199,123,255,.38); }
.product-art { height:290px; display:grid; place-content:center; text-align:center; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.product-art::after { content:""; position:absolute; inset:20%; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 90px rgba(255,255,255,.11); }
.product-art span { font-family:UnifrakturCook,serif; font-size:88px; z-index:1; text-shadow:0 0 30px currentColor; }
.product-art small { z-index:1; font-weight:800; letter-spacing:.28em; }
.art-purple { background:radial-gradient(circle at 50% 45%, #a54af1 0, #3e155d 34%, #0c0910 73%); }
.art-silver { background:radial-gradient(circle at 50% 45%, #eeeef2 0, #777781 24%, #1a1a20 60%, #09090c 80%); color:#111; }
.art-black { background:radial-gradient(circle at 50% 45%, #39204f 0, #0c0b10 60%); }
.product-info { padding:24px; }
.tag { display:inline-block; color:var(--purple-2); font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:800; margin-bottom:12px; }
.product-info p { min-height:80px; }

.quality-panel { min-height:560px; display:flex; flex-direction:column; justify-content:end; padding:58px; border-radius:32px; border:1px solid var(--line); background:linear-gradient(105deg, rgba(7,7,10,.95) 10%, rgba(7,7,10,.72) 56%, rgba(104,34,148,.35)), url('assets/farmassist-hero.jpg') center 43%/cover; box-shadow:inset 0 -180px 120px rgba(0,0,0,.5); }
.quality-panel h2 { max-width:720px; margin:14px 0 18px; }
.quality-panel p { max-width:650px; }
.quality-points { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:25px; }
.quality-points div { padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(8,7,11,.56); backdrop-filter:blur(10px); }
.quality-points b { display:block; color:var(--purple-2); margin-bottom:8px; }
.quality-points span { font-size:13px; }

.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:48px; border:1px solid rgba(191,115,255,.35); border-radius:28px; background:radial-gradient(circle at 80% 30%, rgba(159,67,255,.23), transparent 33%), linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:0 20px 80px rgba(86,23,139,.16); }
.cta h2 { margin:10px 0 12px; font-size:clamp(40px,5vw,68px); }
.cta p { margin-bottom:0; }

.faq h2 { margin:12px 0 26px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); padding:20px 0; }
summary { cursor:pointer; font-size:18px; font-weight:800; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; float:right; color:var(--purple-2); }
details[open] summary::after { content:"–"; }
details p { max-width:760px; margin:14px 0 0; }

.footer { max-width:var(--max); margin:0 auto; padding:40px 24px 52px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:28px 50px; align-items:center; }
.footer-brand { display:flex; gap:12px; align-items:center; }
.footer-brand div { display:grid; }
.footer-brand small { color:var(--muted); margin-top:3px; }
.footer-links { display:flex; justify-content:flex-end; gap:24px; color:var(--muted); font-weight:700; font-size:14px; }
.legal { grid-column:1/-1; margin:0; font-size:11px; color:#77717d; }

.age-gate { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:rgba(3,3,5,.9); backdrop-filter:blur(16px); transition:opacity .25s ease, visibility .25s ease; }
.age-gate.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.age-card { width:min(520px,100%); padding:42px; text-align:center; border:1px solid rgba(255,255,255,.15); border-radius:28px; background:radial-gradient(circle at 50% 0, rgba(156,70,255,.21), transparent 40%), #0d0c12; box-shadow:0 40px 100px rgba(0,0,0,.55); }
.age-logo { width:82px; height:82px; display:grid; place-items:center; margin:0 auto 20px; border-radius:22px; background:linear-gradient(145deg,#fff,#86838b 45%,#17171d 47%); color:#09090d; font-family:Archivo Black,sans-serif; font-size:28px; }
.age-card h2 { font-size:45px; margin:10px 0 10px; }
.age-actions { display:flex; gap:10px; justify-content:center; margin-top:26px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.22s; }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:44px; }
  .hero-copy { order:1; }
  .hero-visual { order:2; max-width:680px; margin:0 auto; }
  .story-grid { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .quality-points { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .site-header { padding:14px 18px; }
  .brand-name { font-size:24px; }
  .nav-toggle { display:block; }
  .nav { position:absolute; left:12px; right:12px; top:68px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; border:1px solid var(--line); border-radius:16px; background:rgba(10,9,14,.96); box-shadow:0 20px 60px rgba(0,0,0,.5); }
  .nav.open { display:flex; }
  .nav a { padding:14px; }
  .section-pad { padding:64px 18px; }
  h1 { font-size:clamp(48px,18vw,72px); }
  .hero { gap:42px; }
  .hero-stats { grid-template-columns:1fr; }
  .floating-chip { display:none; }
  .section-heading { align-items:start; flex-direction:column; }
  .product-grid { grid-template-columns:1fr; }
  .quality-panel { padding:30px 22px; min-height:620px; background-position:58% center; }
  .quality-points { grid-template-columns:1fr; }
  .cta-inner { flex-direction:column; align-items:flex-start; padding:32px 24px; }
  .footer { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; flex-wrap:wrap; }
  .legal { grid-column:auto; }
  .age-card { padding:30px 22px; }
  .age-actions { flex-direction:column; }
}