/* FertGaia Mockup Design System - pure CSS (no frameworks)
   Goal: clean, modern, premium look that works on any shared hosting.
*/
:root{
  --fg-bg: #0b130d;
  --fg-surface: #0f1a12;
  --fg-surface-2: #122016;
  --fg-card: #122417;
  --fg-primary: #27ae60;
  --fg-primary-2: #2ecc71;
  --fg-accent: #b6ffcc;
  --fg-text: #ecfdf0;
  --fg-text-dim: #b8d2c1;
  --fg-muted: #1a2c20;
  --fg-border: #274233;
  --fg-warn: #ffd166;
  --fg-danger: #ff6b6b;
  --shadow-lg: 0 15px 40px rgba(0,0,0,.35);
  --shadow-md: 0 10px 25px rgba(0,0,0,.25);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg, #08100a, #0b130d 30%, #0f1811);
  color:var(--fg-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1200px; margin:0 auto; padding:0 24px}
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(18,32,22,.9), rgba(18,32,22,.65));
  border-bottom:1px solid var(--fg-border);
}
.header-inner{display:flex; align-items:center; gap:18px; padding:14px 0}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg-text);
}
.brand-logo{
  width:40px;height:40px;border-radius:12px;
  background:conic-gradient(from 180deg at 50% 50%, #2ecc71, #27ae60, #12a150, #2ecc71);
  box-shadow:inset 0 0 20px rgba(0,0,0,.25), 0 10px 30px rgba(39,174,96,.25);
  display:grid; place-items:center;
}
.brand-logo svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.brand-name{font-weight:800; letter-spacing:.2px}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--fg-border); color:var(--fg-text-dim); background:var(--fg-muted);
}

.nav{
  margin-left:auto; display:flex; gap:8px;
}
.nav a{
  color:var(--fg-text-dim); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:10px;
  border:1px solid transparent;
}
.nav a:hover{ color:var(--fg-text); background:rgba(39,174,96,.1); border-color:var(--fg-border)}

.hero{
  position:relative; margin-top:18px; overflow:hidden;
  border-radius:var(--radius-xl); background:
    radial-gradient(1200px 400px at 120% -20%, rgba(46,204,113,.25), transparent 40%),
    radial-gradient(800px 300px at -20% 0%, rgba(183,255,209,.15), transparent 50%),
    linear-gradient(180deg, var(--fg-surface), var(--fg-surface-2));
  box-shadow: var(--shadow-lg);
  border:1px solid var(--fg-border);
}
.hero-inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; padding:48px }
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; padding:28px }
}
.kicker{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-accent)}
.hero h1{font-size:40px; margin:6px 0 10px; line-height:1.05}
.hero p{color:var(--fg-text-dim); font-size:18px; margin:0 0 20px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none; font-weight:800;
  padding:14px 18px; border-radius:14px; letter-spacing:.2px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{
  background:linear-gradient(180deg, var(--fg-primary-2), var(--fg-primary));
  color:#082112; box-shadow:0 10px 25px rgba(46,204,113,.25);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(46,204,113,.32) }
.btn-ghost{
  background:rgba(255,255,255,.02); color:var(--fg-text);
  border:1px solid var(--fg-border);
}
.btn-ghost:hover{ background:rgba(255,255,255,.06) }

.hero-visual{
  position:relative; border-radius:16px; background:linear-gradient(180deg, #0c1610, #0c1b12);
  border:1px solid var(--fg-border); overflow:hidden;
  box-shadow: inset 0 -40px 80px rgba(0,0,0,.35);
}
.hero-visual .ring{
  position:absolute; inset:-40% -10% auto auto; width:520px; height:520px; border-radius:999px;
  background:radial-gradient(closest-side, rgba(46,204,113,.35), transparent 70%);
  filter: blur(30px);
}
.hero-visual .mesh{
  position:absolute; inset:auto auto 0 0; width:120%; height:70%;
  background:radial-gradient(ellipse at 30% 100%, rgba(183,255,209,.15), transparent 60%);
}
.hero-visual .grid{
  position:absolute; inset:0; opacity:.15;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.section{ margin:28px 0 }
.section-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:14px }
.section h2{margin:0; font-size:26px}
.tabs{
  display:inline-flex; padding:6px; gap:6px; background:var(--fg-muted); border:1px solid var(--fg-border);
  border-radius:14px;
}
.tab{
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; color:var(--fg-text-dim);
  border:1px solid transparent;
}
.tab[aria-selected="true"]{
  color:var(--fg-text);
  background:linear-gradient(180deg, rgba(39,174,96,.18), rgba(39,174,96,.12));
  border-color:var(--fg-border);
}

.filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px
}
.chip{
  font-size:13px; padding:8px 12px; border-radius:999px; border:1px solid var(--fg-border);
  color:var(--fg-text-dim); background:rgba(255,255,255,.02); cursor:pointer;
}
.chip[data-active="true"]{
  color:#0b130d; background:var(--fg-accent); border-color:transparent; font-weight:800;
}

.grid{
  display:grid; gap:16px; grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 12;
  background:linear-gradient(180deg, #122417, #0f1a12);
  border:1px solid var(--fg-border); border-radius:18px; overflow:hidden; box-shadow: var(--shadow-md);
  display:flex; flex-direction:column;
}
@media (min-width:540px){ .card{ grid-column: span 6 } }
@media (min-width:900px){ .card{ grid-column: span 4 } }
.card-media{
  position:relative; height:200px; background:linear-gradient(180deg,#173823,#102117);
}
.card-media .tag{
  position:absolute; top:12px; left:12px; background:rgba(8,19,13,.65); color:var(--fg-accent);
  padding:6px 10px; border-radius:999px; border:1px solid var(--fg-border); font-size:12px; font-weight:700;
  backdrop-filter: blur(6px);
}
.card-media .ill{
  position:absolute; inset:0; display:grid; place-items:center; opacity:.85;
}
.card-body{ padding:16px }
.card-title{ margin:0 0 6px; font-size:18px }
.card-desc{ margin:0; color:var(--fg-text-dim) }
.card-benefits{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:var(--fg-text-dim); font-size:13px;
}
.card-actions{ display:flex; gap:10px; margin-top:14px }
.btn-small{ padding:10px 12px; border-radius:10px; font-weight:800; font-size:14px }
.btn-outline{
  background:transparent; border:1px solid var(--fg-border); color:var(--fg-text);
}
.btn-outline:hover{ background:rgba(255,255,255,.06) }

.footer{
  margin:40px 0 24px; color:var(--fg-text-dim); text-align:center; font-size:13px;
  border-top:1px solid var(--fg-border); padding-top:18px
}

/* Category header */
.category-hero{
  margin-top:24px; padding:38px; border-radius:var(--radius-xl);
  background: radial-gradient(800px 300px at 100% -10%, rgba(46,204,113,.2), transparent 40%), linear-gradient(180deg, var(--fg-surface), var(--fg-surface-2));
  border:1px solid var(--fg-border); box-shadow: var(--shadow-lg);
}
.category-hero h1{ margin:0 0 8px; font-size:34px }
.category-hero p{ margin:0; color:var(--fg-text-dim) }

/* Product detail */
.product{
  display:grid; gap:24px; grid-template-columns: 1fr; margin-top:24px
}
@media (min-width:960px){
  .product{ grid-template-columns: 1.1fr 1fr }
}
.product-gallery{
  border:1px solid var(--fg-border); border-radius:16px; background:linear-gradient(180deg,#132519,#0e1912);
  min-height:380px; display:grid; place-items:center; box-shadow:var(--shadow-md);
}
.product-info{
  display:grid; gap:14px;
}
.kpis{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
}
.kpi{
  background:var(--fg-muted); border:1px solid var(--fg-border); border-radius:14px; padding:12px;
  text-align:center; color:var(--fg-text-dim); font-weight:700
}
.feature{
  display:flex; gap:10px; align-items:flex-start; background:var(--fg-muted); border:1px solid var(--fg-border);
  padding:12px; border-radius:14px
}

.callout{
  margin-top:4px; border-left:4px solid var(--fg-primary-2); padding:10px 12px; background:rgba(183,255,209,.06);
  border-radius:10px;
}
.small{ font-size:13px; color:var(--fg-text-dim) }