/* =========================================================
   LAYOUT — structural grids: header, hero, footer, breakpoints
   ========================================================= */

.wrap{ max-width:1280px; margin-inline:auto; padding-inline:24px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:var(--border-w) solid var(--ink);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
  gap:20px;
}
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__right{ display:flex; align-items:center; gap:14px; }

/* ---------- hero ---------- */
.hero{ padding-block:64px 40px; position:relative; overflow:hidden; }
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero__visual{ position:relative; }

/* ---------- generic section head ---------- */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:36px;
  flex-wrap:wrap;
}

/* ---------- products / categories ---------- */
.products{ padding-block:88px 60px; }
.product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; }

.categories{ padding-block:60px; }
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }

/* ---------- story / siso ---------- */
.story{ padding-block:100px; }
.story__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:center; }

.siso{ padding-block:100px; }
.siso__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; z-index:2; }

/* ---------- social ---------- */
.social{ padding-block:90px; }
.social-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; }

/* ---------- final CTA ---------- */
.final-cta{ padding-block:90px; text-align:center; position:relative; overflow:hidden; }

/* ---------- footer ---------- */
.site-footer{ padding-block:56px 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:22px;
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav__links{ display:none; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid{ grid-template-columns:1fr; }
  .story__grid{ grid-template-columns:1fr; }
  .siso__grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .social-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .social-grid{ grid-template-columns:repeat(3,1fr); }
}