/* FarmFlow Site — Neon + Liquid Glass Design System */
:root {
  --bg: #05050a;
  --bg-card: rgba(12, 15, 25, 0.7);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --text: #f0f4ff;
  --text-muted: #8b9cc0;
  --neon-blue: #00f3ff;
  --neon-purple: #b026ff;
  --neon-green: #39ff14;
  --neon-red: #ff073a;
  --neon-gold: #ffd166;
  --accent: #00f3ff;
  --accent2: #b026ff;
  --success: #39ff14;
  --warning: #ffd166;
  --danger: #ff073a;
  --border: rgba(255, 255, 255, 0.06);
  --border-glow: rgba(0, 243, 255, 0.2);
  --glass-blur: blur(16px);
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-neon: 0 0 30px rgba(0, 243, 255, 0.15);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0, 243, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(176, 38, 255, 0.03) 0%, transparent 50%);
}
a { color: var(--neon-blue); text-decoration: none; transition: all var(--transition) }
a:hover { text-shadow: 0 0 8px var(--neon-blue) }
img { max-width: 100%; height: auto; border-radius: var(--radius) }

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px }
@media(min-width:768px) { .container { padding: 40px 24px } }

/* Liquid Glass Card */
.card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,243,255,0.03), rgba(176,38,255,0.03));
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: var(--shadow-neon);
}
.card:hover::before { opacity: 1 }

/* Grid */
.grid { display: grid; gap: 16px }
.grid-2 { grid-template-columns: 1fr }
.grid-3 { grid-template-columns: 1fr }
.grid-4 { grid-template-columns: 1fr 1fr }
@media(min-width:768px) {
  .grid-2 { grid-template-columns: 1fr 1fr }
  .grid-3 { grid-template-columns: repeat(3, 1fr) }
  .grid-4 { grid-template-columns: repeat(4, 1fr) }
}

/* Typography */
h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.1; margin-bottom: .5rem; letter-spacing: -0.02em }
h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: .5rem }
h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 700; margin-bottom: .4rem }
p { color: var(--text-muted); margin-bottom: 1rem }

/* Neon text */
.neon-blue { color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue), 0 0 20px rgba(0,243,255,0.4) }
.neon-purple { color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple), 0 0 20px rgba(176,38,255,0.4) }
.neon-green { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green), 0 0 20px rgba(57,255,20,0.4) }
.neon-red { color: var(--neon-red); text-shadow: 0 0 10px var(--neon-red), 0 0 20px rgba(255,7,58,0.4) }
.gradient-text {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7em 1.3em; border-radius: 10px; font-weight: 700; font-size: .9rem;
  border: 1px solid var(--border); background: var(--bg-card);
  backdrop-filter: var(--glass-blur); color: var(--text);
  cursor: pointer; transition: all var(--transition); text-decoration: none;
}
.btn:hover { border-color: var(--neon-blue); box-shadow: 0 0 20px rgba(0,243,255,0.3); text-decoration: none; text-shadow: none }
.btn-primary {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  color: #050505; border-color: transparent; font-weight: 900;
}
.btn-primary:hover { box-shadow: 0 0 30px var(--neon-blue); transform: translateY(-2px) }

/* Tags */
.tag {
  display: inline-block; padding: .25em .7em; border-radius: 999px;
  background: rgba(0, 243, 255, 0.08); color: var(--neon-blue);
  font-size: .8rem; font-weight: 700; border: 1px solid rgba(0, 243, 255, 0.25);
  text-shadow: 0 0 6px rgba(0, 243, 255, 0.3);
}

/* Big stat */
.big-stat {
  font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(0, 243, 255, 0.3));
}

/* Section */
.section { padding: 60px 0; border-bottom: 1px solid var(--border) }
.section-tag {
  font-size: .85rem; color: var(--neon-blue); text-transform: uppercase;
  letter-spacing: .2em; font-weight: 800; margin-bottom: .5rem;
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

/* Table */
table { width: 100%; border-collapse: collapse; font-size: .9rem }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--border) }
th { background: rgba(0, 243, 255, 0.05); color: var(--text); font-weight: 700 }
@media(max-width:600px) { table { font-size: .75rem } th, td { padding: .4rem .5rem } }

/* Back button — glass */
.back-btn {
  position: fixed; bottom: 16px; left: 16px; z-index: 100;
  padding: .6em 1em; border-radius: 10px;
  background: rgba(5, 5, 10, 0.8); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border); color: var(--text);
  font: 700 .85rem/1 'Inter', system-ui, sans-serif; text-decoration: none;
  transition: all var(--transition);
}
.back-btn:hover { border-color: var(--neon-blue); box-shadow: 0 0 16px rgba(0,243,255,0.3); text-decoration: none; text-shadow: none }

/* Skip link */
.skip-link {
  position: absolute; top: -100%; left: 1rem; padding: .5rem 1rem;
  background: var(--neon-blue); color: #050505; border-radius: 0 0 8px 8px;
  font-weight: 700; z-index: 10000; text-decoration: none;
}
.skip-link:focus { top: 0 }

/* ROI Calculator */
.roi-inputs { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px }
@media(min-width:500px) { .roi-inputs { grid-template-columns: 1fr 1fr } }
.roi-input-group label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px }
.roi-input-wrap { display: flex; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 10px; overflow: hidden }
.roi-input-wrap:focus-within { border-color: var(--neon-blue); box-shadow: 0 0 12px rgba(0,243,255,0.2) }
.roi-currency { padding: 8px 12px; background: rgba(0,243,255,0.05); color: var(--neon-blue); font-size: .8rem; font-weight: 700; border-right: 1px solid var(--border) }
.roi-input-wrap input { flex: 1; border: none; background: transparent; color: var(--text); padding: 10px 12px; font-size: 1rem; font-family: inherit; outline: none; -moz-appearance: textfield }
.roi-input-wrap input::-webkit-outer-spin-button, .roi-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px }
@media(max-width:400px) { .roi-grid { grid-template-columns: 1fr } }
.roi-box { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 10px; padding: 12px }
.roi-box .label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em }
.roi-box .value { font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 900; margin-top: 4px }
.roi-card { background: var(--bg-card); backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px }

/* Print */
@media print {
  body { background: #fff; color: #111 }
  .card { box-shadow: none; border: 1px solid #ccc; background: #f9f9f9; backdrop-filter: none }
  .back-btn, .skip-link { display: none }
  .neon-blue, .neon-purple, .neon-green, .neon-red { color: inherit; text-shadow: none }
}