:root{
  /* LOGO YAŞIL TONU (sənin screenshotdakı tona yaxın) */
  --green:#8DBB6E;     /* əsas accent */
  --green2:#6AA84F;    /* hover/daha tünd */

  --bg:#ffffff;
  --text:#101828;
  --muted:#667085;
  --line:#e5e7eb;
  --soft:#f7f7f9;
  --shadow:0 10px 30px rgba(16,24,40,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{width:min(1160px, 92%); margin:0 auto}

.topbar{
  background: var(--green);
  color:#fff;
  font-size:13px;
}
.topbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:12px;
}
.topbar__left{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:999px;background:#fff;opacity:.9}
.topbar__right{display:flex;align-items:center;gap:10px}
.sep{opacity:.5}

.header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:44px;height:44px;border-radius:14px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  display:grid;place-items:center;
  color:#fff;font-weight:900;
  box-shadow: var(--shadow);
}
.brand__name{font-weight:800;letter-spacing:.2px}
.brand__sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav a{
  font-size:14px;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
}
.nav a:hover{background:var(--soft)}
.nav__try{
  background: rgba(141,187,110,.16);
  color: var(--green2) !important;
  border:1px solid rgba(141,187,110,.28);
}
.nav__cart{
  border:1px solid var(--line);
  background:#fff;
}

.main{min-height:60vh}

.hero{
  background:
    radial-gradient(1200px 450px at 20% 10%, rgba(141,187,110,.22), transparent 60%),
    radial-gradient(900px 350px at 90% 20%, rgba(141,187,110,.12), transparent 60%);
  padding:46px 0 26px;
}
.hero__row{display:grid;grid-template-columns: 1.2fr .8fr;gap:24px;align-items:center}
.hero__badge{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pill{
  border:1px solid rgba(16,24,40,.15);
  padding:8px 12px;border-radius:999px;
  font-size:12px;color:rgba(16,24,40,.85);
  background:#fff;
}
.hero__title{
  font-size:52px; line-height:1.05;
  margin:0 0 14px;
}
.accent{color:var(--green2)}
.hero__text{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 18px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  font-weight:700;font-size:14px;
  border:1px solid transparent;
}
.btn--primary{
  background: var(--green);
  color:#fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover{background:var(--green2)}
.btn--ghost{
  background:#fff;
  border:1px solid var(--line);
}
.btn--ghost:hover{background:var(--soft)}

.hero__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.hero__cardTitle{font-weight:800}
.hero__cardText{margin-top:10px;color:var(--muted);line-height:1.6}
.hero__cardHint{margin-top:12px;font-size:12px;color:rgba(102,112,133,.9)}

.stats{padding:18px 0 34px}
.stats__grid{display:grid;grid-template-columns: repeat(4,1fr);gap:14px}
.stat{
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:18px;
  box-shadow: 0 8px 22px rgba(16,24,40,.06);
}
.stat__title{color:var(--muted);font-size:13px}
.stat__value{font-size:34px;font-weight:900;margin-top:8px}

.section{padding:44px 0}
.section__head{text-align:center}
.section__kicker{letter-spacing:.22em;color:var(--muted);font-size:12px}
.section__title{margin:10px 0 10px;font-size:34px}
.section__desc{color:var(--muted);max-width:760px;margin:0 auto;line-height:1.7}

.footer{
  border-top:1px solid var(--line);
  padding:26px 0 16px;
  background:#fff;
}
.footer__row{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:18px;
}
.footer__title{font-weight:900;margin-bottom:8px}
.footer__text{color:var(--muted);line-height:1.6}
.footer__link{color:var(--green2)}
.footer__link:hover{text-decoration:underline}
.footer__bottom{margin-top:14px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:12px}

@media (max-width: 920px){
  .hero__row{grid-template-columns:1fr}
  .hero__title{font-size:40px}
  .stats__grid{grid-template-columns: repeat(2,1fr)}
  .footer__row{grid-template-columns:1fr}
}
/* =========================
   HOME (NEW SECTIONS) STYLES
   ========================= */

:root{
  --bg-soft: #f6faf7;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, .10);
  --shadow: 0 10px 30px rgba(2, 6, 23, .06);
  /* Accent rəngin səndə yaşıl olmalıdır – istəsən burada dəqiq tənzimlə */
  --accent: #16a34a;
  --accent-2: #0ea5a4;
}

/* section layout */
.section{
  padding: 42px 0;
}
.section--soft{
  background: var(--bg-soft);
}
.section__head{
  margin-bottom: 18px;
}
.section__kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.section__title{
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text);
}
.section__desc{
  margin: 0;
  color: var(--muted);
  max-width: 720px;
}
.section__actions{
  margin-top: 16px;
}

/* generic grid */
.grid{
  display: grid;
  gap: 14px;
}

/* cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.card__title{
  font-weight: 700;
  color: var(--text);
}
.card__hint{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* =========================
   CATEGORIES GRID
   ========================= */
.grid--cats{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.card--cat{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  text-decoration: none;
  min-height: 92px;
  transition: transform .15s ease, border-color .15s ease;
}
.card--cat:hover{
  transform: translateY(-2px);
  border-color: rgba(22, 163, 74, .35);
}
.card--cat .card__title{
  font-size: 16px;
}
.card--cat .card__hint{
  color: var(--accent);
  font-weight: 600;
}

/* =========================
   PRODUCTS GRID
   ========================= */
.grid--products{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card--product{
  overflow: hidden;
}
.prod__img{
  display:block;
  position: relative;
  height: 190px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(22,163,74,.10), rgba(14,165,164,.08));
}
.prod__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  transition: transform .2s ease;
}
.card--product:hover .prod__img img{
  transform: scale(1.05);
}

.badge{
  position:absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(22,163,74,.12);
  color: var(--accent);
  border: 1px solid rgba(22,163,74,.25);
}
.badge--sale{
  background: rgba(22,163,74,.14);
}

.prod__body{
  padding: 14px 14px 16px;
}
.prod__title{
  display:block;
  text-decoration:none;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
}
.prod__title:hover{
  color: var(--accent);
}

.prod__price{
  display:flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.price__now{
  font-weight: 800;
  color: var(--text);
}
.price__old{
  color: var(--muted);
  text-decoration: line-through;
  font-size: 13px;
}

.prod__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons (əgər səndə btn varsa, bu yalnız ölçü siniflərini tamamlayır) */
.btn--sm{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1;
}

/* =========================
   BENEFITS
   ========================= */
.grid--benefits{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card--benefit{
  padding: 16px;
}
.benefit__title{
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
}
.benefit__text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================
   STEPS
   ========================= */
.grid--steps{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card--step{
  padding: 16px;
  position: relative;
}
.step__num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--accent);
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.22);
  margin-bottom: 10px;
}
.step__title{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.step__text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================
   FAQ
   ========================= */
.grid--faq{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card--faq{
  padding: 16px;
}
.faq__q{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.faq__a{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px){
  .grid--cats{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--products{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--benefits{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px){
  .section{ padding: 30px 0; }
  .section__title{ font-size: 22px; }

  .grid--cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--steps{ grid-template-columns: 1fr; }
  .grid--faq{ grid-template-columns: 1fr; }

  .prod__img{ height: 160px; }
}

@media (max-width: 420px){
  .grid--products{ grid-template-columns: 1fr; }
}
/* ===== HOME: layout fixes + new sections ===== */

.section { padding: 56px 0; }
.section--soft { background: #f7faf7; }
.section__head { text-align: center; margin-bottom: 22px; }
.section__kicker { letter-spacing: .18em; font-size: 12px; text-transform: uppercase; opacity: .7; }
.section__title { margin: 10px 0 6px; font-size: 34px; line-height: 1.15; }
.section__desc { max-width: 720px; margin: 0 auto; opacity: .85; }

.hero--img { background-size: cover; background-position: center; }
.heroCard { background: #fff; border: 1px solid #e7ece7; border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.heroCard__title { font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.heroCard__text { opacity: .85; }
.heroCard__hint { margin-top: 10px; font-size: 12px; opacity: .65; }

.cardsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.card {
  display: block;
  background: #fff;
  border: 1px solid #e7ece7;
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.06); }
.card__title { font-weight: 800; font-size: 16px; color: #0b1220; }
.card__sub { margin-top: 6px; opacity: .75; }

.productGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pCard{
  display:block;
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
}
.pCard__img{ height: 170px; background:#f1f4f1; display:flex; align-items:center; justify-content:center; }
.pCard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pCard__ph{ opacity:.55; font-weight:800; }
.pCard__body{ padding:14px; }
.pCard__title{ font-weight:800; color:#0b1220; }
.pCard__price{ margin-top:6px; opacity:.75; }

.featuresGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feature{
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:18px;
  padding:18px;
}
.feature__title{ font-weight:900; margin-bottom:6px; }
.feature__text{ opacity:.85; }

.faq{ max-width: 920px; margin: 0 auto; }
.faqItem{
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:18px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.faqItem__q{ cursor:pointer; font-weight:900; list-style:none; }
.faqItem__q::-webkit-details-marker { display:none; }
.faqItem__a{ margin-top:10px; opacity:.85; line-height:1.5; }

.cta{ padding: 26px 0 60px; }
.cta__row{
  background: linear-gradient(90deg, rgba(140,195,116,.18), rgba(140,195,116,.06));
  border: 1px solid #e7ece7;
  border-radius: 22px;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.cta__title{ font-weight: 900; font-size: 18px; }
.cta__text{ opacity:.85; margin-top: 4px; }

.emptyNote{
  text-align:center;
  opacity:.7;
  padding: 18px;
  border: 1px dashed #d9e3d9;
  border-radius: 18px;
  grid-column: 1 / -1;
}

/* ===== Footer redesign (more modern) ===== */
.footer{
  margin-top: 10px;
  background:#0b1220;
  color: rgba(255,255,255,.88);
}
.footer__row{
  display:grid;
  grid-template-columns: 2fr 1.2fr 1.2fr;
  gap: 18px;
  padding: 26px 0;
}
.footer__title{ font-weight: 900; margin-bottom: 8px; color:#fff; }
.footer__text{ opacity:.85; line-height:1.6; }
.footer__link{ color: rgba(255,255,255,.9); opacity:.9; text-decoration:none; }
.footer__link:hover{ text-decoration:underline; }
.footer__bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 14px 0 20px;
  opacity:.75;
}

/* responsive */
@media (max-width: 980px){
  .cardsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .productGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featuresGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__row{ grid-template-columns: 1fr; }
  .cta__row{ flex-direction: column; align-items:flex-start; }
}
@media (max-width: 520px){
  .cardsGrid, .productGrid, .featuresGrid{ grid-template-columns: 1fr; }
  .section__title{ font-size: 28px; }
}
/* =========================
   HOME (views/pages/home.php)
   ========================= */

:root{
  --container: 1180px;
  --radius: 18px;
  --radius-sm: 14px;
  --border: rgba(15, 23, 42, .10);
  --text: #0f172a;
  --muted: #64748b;
  --bg: #ffffff;
  --card: #ffffff;
  --soft: rgba(140,190,120,.16);
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --shadow-sm: 0 6px 18px rgba(2, 6, 23, .06);
  --green: #8cc078;
  --green-dark: #6aa85a;
}

.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.muted{ color: var(--muted); }

/* accent span from DB (hero title) */
.accent{
  color: var(--green-dark);
  background: rgba(140,190,120,.18);
  padding: .08em .28em;
  border-radius: .45em;
}

/* Shared section spacing */
.home-section{
  padding: 56px 0;
}
.sec-head{
  text-align: center;
  margin-bottom: 22px;
}
.sec-kicker{
  letter-spacing: .18em;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.sec-title{
  margin: 8px 0 0;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--text);
}
.sec-sub{
  margin: 10px auto 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Empty */
.empty-box{
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  background: rgba(255,255,255,.55);
}

/* Buttons (home only; if you already have btn styles, these will just improve) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover{
  background: var(--green-dark);
}
.btn--ghost{
  background: rgba(255,255,255,.65);
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover{
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* =========================
   HERO
   ========================= */
.home-hero{
  padding: 52px 0 28px;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 26px;
  align-items: start;
}
.hero-badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.badge-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.hero-title{
  margin: 0;
  color: var(--text);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4.4vw, 58px);
}
.hero-text{
  margin: 16px 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.hero-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-right{
  display: flex;
  justify-content: flex-end;
}
.hero-card{
  width: 100%;
  max-width: 360px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-sm);
}
.hero-card-title{
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 16px;
}
.hero-card-text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* =========================
   STATS
   ========================= */
.home-stats{
  padding: 18px 0 10px;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-card{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-title{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.stat-value{
  margin-top: 6px;
  color: var(--text);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

/* =========================
   CATEGORIES
   ========================= */
.cats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.cat-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(140,190,120,.45);
}
.cat-name{
  color: var(--text);
  font-weight: 900;
  font-size: 16px;
}
.cat-link{
  margin-top: 6px;
  color: var(--green-dark);
  font-weight: 800;
  font-size: 13px;
}

/* =========================
   PRODUCTS (TREND)
   ========================= */
.prod-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.prod-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.prod-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(140,190,120,.45);
}
.prod-media{
  height: 190px;
  background: linear-gradient(135deg, rgba(140,190,120,.18), rgba(148,163,184,.12));
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prod-placeholder{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
}
.prod-body{
  padding: 14px 14px 15px;
}
.prod-title{
  color: var(--text);
  font-weight: 900;
  line-height: 1.25;
  font-size: 15px;
}
.prod-price{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.price-now{
  color: var(--text);
  font-weight: 950;
}
.price-old{
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 700;
  font-size: 13px;
}

/* =========================
   WHY US
   ========================= */
.why-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.why-card{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.why-title{
  font-weight: 950;
  color: var(--text);
  font-size: 16px;
}
.why-text{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   FAQ
   ========================= */
.faq-list{
  margin-top: 18px;
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin-inline: auto;
}
.faq-item{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.faq-item summary{
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: var(--text);
  padding: 8px 2px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-a{
  padding: 2px 2px 10px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

/* =========================
   CTA
   ========================= */
.cta-box{
  margin-top: 8px;
  background: rgba(140,190,120,.14);
  border: 1px solid rgba(140,190,120,.28);
  border-radius: var(--radius);
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cta-title{
  font-weight: 950;
  color: var(--text);
  font-size: 18px;
}
.cta-text{
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-right{ justify-content: flex-start; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .cats-grid{ grid-template-columns: repeat(2, 1fr); }
  .prod-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns: 1fr; }
  .cats-grid{ grid-template-columns: 1fr; }
  .prod-grid{ grid-template-columns: 1fr; }
  .cta-box{
    flex-direction: column;
    align-items: stretch;
  }
}
/* style.css-in sonuna əlavə et */
@media (max-width: 768px) {
  .container { width: 92%; }
  
  /* Hero Responsive */
  .hero__row { grid-template-columns: 1fr; text-align: center; }
  .hero__title { font-size: 32px; }
  .hero__actions { justify-content: center; }
  
  /* Grids Responsive */
  .stats__grid, .grid--cats, .grid--products, .product-grid, .cat-grid, .feature-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 15px !important;
  }
  
  .stats-bar { padding: 20px; grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Footer Responsive */
  .footer__row { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  
  /* CTA Responsive */
  .cta-modern { flex-direction: column; text-align: center; padding: 40px 20px; }
}

@media (max-width: 480px) {
  .grid--products, .product-grid, .cat-grid, .feature-grid { 
    grid-template-columns: 1fr !important; 
  }
  .hero h1 { font-size: 34px !important; letter-spacing: -1px !important; }
}