/* =====================================================================
   BirTool.az — Homepage  ·  css/home.css
   hero · trust strip · category grid · product carousels ·
   brand strip · SEO intro · final CTA banner
   Depends on css/style.css + css/shell.css (chrome)
   ===================================================================== */

.home-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.home-sec { padding: 48px 0; }
.home-sec--tight { padding: 32px 0; }

/* section heads */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.sec-head__l { display: flex; align-items: center; gap: 14px; }
.sec-head__ic { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; }
.sec-head__ic svg { width: 24px; height: 24px; }
.sec-head h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; color: var(--text-strong); letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.sec-head h2 .accent { color: var(--primary); }
.sec-head p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }
.sec-head__link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 800; color: var(--primary); white-space: nowrap; }
.sec-head__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.sec-head__link:hover svg { transform: translateX(3px); }

/* ===================== HERO ===================== */
.hero { position: relative; overflow: hidden; background: radial-gradient(130% 150% at 88% -10%, #2c3354 0%, var(--navy-800) 48%, var(--navy-900) 100%); }
.hero__in { max-width: 1280px; margin: 0 auto; padding: 56px 24px 64px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.hero__deco { position: absolute; inset: 0; pointer-events: none; opacity: .5; background:
  radial-gradient(380px 380px at 92% 12%, rgba(229,48,27,.22), transparent 70%),
  radial-gradient(300px 300px at 8% 96%, rgba(46,53,80,.5), transparent 70%); }
.hero__content { position: relative; z-index: 2; }
.hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: var(--radius-full); background: var(--primary); color: #fff; font-weight: 800; font-size: var(--fs-sm); box-shadow: var(--shadow-primary); margin-bottom: 22px; }
.hero__badge svg { width: 16px; height: 16px; }
.hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1.03; margin: 0; }
.hero h1 .accent { color: var(--red-400); }
.hero__sub { color: rgba(255,255,255,.78); font-size: 1.15rem; line-height: 1.55; margin: 20px 0 0; max-width: 520px; }
.hero__ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; max-width: 520px; }
.hero__trust-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hero__trust-item svg { width: 22px; height: 22px; flex: none; color: var(--red-400); }
.hero__trust-item b { display: block; color: #fff; font-size: var(--fs-sm); font-weight: 800; }
.hero__trust-item span { font-size: var(--fs-xs); color: rgba(255,255,255,.6); }

/* hero visual card */
.hero__visual { position: relative; z-index: 2; }
.hero__panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl); padding: 26px; backdrop-filter: blur(4px); }
.hero__panel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hero__panel-top .ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hero__panel-top .ic svg { width: 26px; height: 26px; }
.hero__panel-top b { color: #fff; font-size: var(--fs-lg); font-weight: 800; }
.hero__panel-top span { display: block; color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hstat { padding: 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.hstat b { display: block; font-size: 1.7rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.hstat b.red { color: var(--red-400); }
.hstat b.green { color: var(--whatsapp); }
.hstat span { font-size: var(--fs-xs); color: rgba(255,255,255,.6); font-weight: 600; }
@media (max-width: 880px){ .hero__in { grid-template-columns: 1fr; gap: 30px; } .hero__visual { display: none; } .hero__trust { max-width: none; } }
@media (max-width: 460px){ .hero__trust { grid-template-columns: 1fr; } }

/* ===================== TRUST STRIP ===================== */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--border); }
.trust-strip__in { max-width: 1280px; margin: 0 auto; padding: 22px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tstrip { display: flex; align-items: center; gap: 14px; }
.tstrip__ic { width: 46px; height: 46px; flex: none; border-radius: var(--radius-md); background: var(--red-50); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.tstrip__ic svg { width: 23px; height: 23px; }
.tstrip b { display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--text-strong); }
.tstrip span { font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 820px){ .trust-strip__in { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ===================== CATEGORY GRID ===================== */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px){ .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px){ .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 26px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all var(--dur) var(--ease);
}
.cat-card:hover { border-color: var(--red-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-card__ic { width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--red-50); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); }
.cat-card__ic svg { width: 30px; height: 30px; }
.cat-card:hover .cat-card__ic { background: var(--primary); color: #fff; }
.cat-card__name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-strong); line-height: 1.25; }
.cat-card__count { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }

/* ===================== PRODUCT CAROUSEL ===================== */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 6px; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (min-width: 1080px){ .carousel__track { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; overflow: visible; } }
.carousel__nav { display: inline-flex; gap: 8px; }
.carousel__btn { width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn:hover { border-color: var(--primary); color: var(--primary); }
@media (min-width: 1080px){ .carousel__nav { display: none; } }

/* product card cta row (reused from listing) */
.pc-bottom { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.pc-actions-row { display: flex; gap: 6px; margin-top: var(--space-3); }
.pc-actions-row .icon-btn { --size: 40px; flex: none; }
.pc-actions-row .btn { flex: 1; }
.pc-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-300); position: relative; }
.pc-ph svg { width: 46%; height: 46%; }
.pc-ph::after { content: "BirTool.az"; position: absolute; bottom: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--gray-300); }
@media (max-width: 760px){ .pc-actions-row .icon-btn { display: none; } }

/* ===================== BRAND STRIP ===================== */
.brand-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 900px){ .brand-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px){ .brand-strip { grid-template-columns: repeat(2, 1fr); } }
.brand-chip {
  display: flex; align-items: center; justify-content: center; height: 78px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 1.15rem; font-weight: 900; letter-spacing: -0.02em; color: var(--gray-400);
  transition: all var(--dur) var(--ease);
}
.brand-chip:hover { color: var(--navy-700); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* ===================== SEO INTRO ===================== */
.seo-intro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 44px; }
.seo-intro h2 { font-size: var(--fs-h3); font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; margin: 0 0 16px; }
.seo-intro__cols { columns: 2; column-gap: 40px; }
@media (max-width: 760px){ .seo-intro { padding: 28px 24px; } .seo-intro__cols { columns: 1; } }
.seo-intro p { color: var(--gray-600); line-height: 1.7; margin: 0 0 14px; break-inside: avoid; }
.seo-intro p:last-child { margin-bottom: 0; }

/* ===================== FINAL CTA ===================== */
.cta-banner { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: radial-gradient(120% 160% at 85% 0%, var(--red-600) 0%, var(--red-700) 40%, var(--navy-800) 120%); padding: 48px 52px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.cta-banner__deco { position: absolute; inset: 0; opacity: .5; background: radial-gradient(300px 300px at 90% 110%, rgba(255,255,255,.12), transparent 70%); pointer-events: none; }
.cta-banner__c { position: relative; z-index: 2; }
.cta-banner h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.cta-banner p { color: rgba(255,255,255,.85); font-size: var(--fs-lg); margin: 14px 0 0; }
.cta-banner__actions { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.cta-banner .btn--light { background: #fff; color: var(--primary-active); }
.cta-banner .btn--light:hover { background: var(--gray-100); }
@media (max-width: 760px){ .cta-banner { grid-template-columns: 1fr; padding: 32px 28px; } }