/* ==========================================================================
   AZPROTECH — site styles
   Dark hero / light body. Palette derived from the logo (graphite + bronze).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* ink & paper */
  --ink:        #0F171C;
  --ink-2:      #38464F;
  --muted:      #6B7A85;
  --paper:      #FFFFFF;
  --paper-soft: #F4F6F7;
  --paper-soft2:#EAEEF0;
  --line:       #E0E6E9;

  /* dark surfaces */
  --dark:       #0C1216;
  --dark-2:     #131C22;
  --dark-3:     #1C272F;
  --dark-line:  rgba(255,255,255,.12);
  --on-dark:    #E9EEF1;
  --on-dark-mut:#9AAAB4;

  /* brand accent — the bronze of the logo drop */
  --accent:     #C4802E;
  --accent-2:   #E0A24C;
  --accent-dim: rgba(196,128,46,.14);
  --steel:      #5C7C8C;

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* rhythm */
  --wrap: 1260px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 8vw, 118px);
  --radius: 3px;
}

/* Barlow Condensed не содержит кириллицы — русские заголовки падали на системный
   шрифт и выбивались из вёрстки. Для русской версии берём Oswald: тот же узкий
   характер, но с полным кириллическим набором. */
html[lang="ru"]{
  --font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif;
}
/* у кириллицы есть надстрочные знаки (Й, Ё) — при line-height 1.02 их срезает */
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] h4{ letter-spacing:-.005em; line-height:1.12; }
html[lang="ru"] .strip b,
html[lang="ru"] .strip__facts b,
html[lang="ru"] .pillars b,
html[lang="ru"] .steps b,
html[lang="ru"] .brands li{ line-height:1.2; }
html[lang="ru"] .h-sec{ font-size:clamp(29px, 4vw, 46px); }
html[lang="ru"] .hero h1{ font-size:clamp(36px, 5vw, 66px); }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; line-height:1.02; letter-spacing:.005em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ---------- language ----------
   Опубликованные страницы одноязычные (сборщик режет лишний язык), поэтому
   правила ниже нужны только чтобы двуязычный мастер src/index.html можно было
   открыть глазами: по умолчанию он показывает английскую версию. */
html:not(.lang-az) [data-lang="az"]{ display:none !important; }
html.lang-az [data-lang="en"]{ display:none !important; }

/* ---------- a11y ---------- */
.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:12px 18px; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--soft{ background:var(--paper-soft); }
.section--dark{ background:var(--dark); color:var(--on-dark); }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;
}
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--accent); flex:none; }
.section--dark .eyebrow{ color:var(--accent-2); }
.section--dark .eyebrow::before{ background:var(--accent-2); }

.h-sec{ font-size:clamp(31px, 4.4vw, 52px); max-width:20ch; }
.lede{ font-size:clamp(17px,1.6vw,19px); color:var(--ink-2); max-width:62ch; }
.section--dark .lede{ color:var(--on-dark-mut); }

.sec-head{ display:grid; gap:clamp(20px,3vw,56px); align-items:end;
  grid-template-columns:minmax(0,1fr); margin-bottom:clamp(34px,4vw,58px); }
@media (min-width:900px){
  .sec-head--split{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:1px solid transparent; border-radius:var(--radius);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg{ width:16px; height:16px; }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--outline{ border-color:var(--ink); color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:#fff; }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid transparent; padding-bottom:2px;
}
.link-arrow svg{ width:15px; height:15px; transition:transform .18s ease; }
.link-arrow:hover{ border-color:var(--accent); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:#fff; border-bottom:1px solid var(--line);
  transition:box-shadow .28s ease;
}
.hdr__in{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); height:84px;
  max-width:1440px; transition:height .28s ease; }
.hdr.is-stuck{ box-shadow:0 10px 30px -24px rgba(15,23,28,.55); }
.hdr.is-stuck .hdr__in{ height:68px; }

.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:34px; width:auto; }
.hdr.is-stuck .brand img{ height:30px; }

.nav{ display:none; align-items:center; gap:clamp(10px,1.5vw,22px); margin-inline-start:auto; }
@media (min-width:1040px){ .nav{ display:flex; } }
.nav a{
  position:relative; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); padding-block:8px; white-space:nowrap;
}
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--accent-2); transition:right .22s ease; }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }

.hdr__side{ display:flex; align-items:center; gap:14px; margin-inline-start:auto; }
@media (min-width:1040px){ .hdr__side{ margin-inline-start:0; } }

/* language switch */
.lang{ display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lang a,.lang span,.lang button{
  display:inline-block; background:transparent; border:0; cursor:pointer; padding:7px 9px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--muted);
  transition:background .16s ease, color .16s ease;
}
.lang a:hover{ color:var(--ink); background:var(--paper-soft); }
.lang .is-active{ background:var(--accent); color:#fff; cursor:default; }

.hdr .btn--primary{ display:none; padding:12px 20px; }
@media (min-width:1400px){ .hdr .btn--primary{ display:inline-flex; } }

/* burger */
.burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); cursor:pointer; }
@media (min-width:1040px){ .burger{ display:none; } }
.burger span{ display:block; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu */
.mnav{
  position:fixed; inset:0; z-index:99; background:var(--dark);
  padding:120px var(--gutter) 48px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .26s ease, transform .26s ease, visibility .26s;
}
body.menu-open .mnav{ opacity:1; visibility:visible; transform:none; }
.mnav a{ display:block; padding:16px 0; border-bottom:1px solid var(--dark-line);
  font-family:var(--font-display); font-size:30px; text-transform:uppercase; color:#fff; }
.mnav a:hover{ color:var(--accent-2); }
.mnav .btn{ margin-top:32px; width:100%; }
.mnav__meta{ margin-top:36px; color:var(--on-dark-mut); font-size:15px; }
.mnav__meta a{ font:inherit; text-transform:none; display:inline; padding:0; border:0; color:var(--on-dark-mut); }
.mnav__meta a:hover{ color:#fff; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; background:var(--dark); color:#fff; overflow:hidden;
  padding-block:clamp(124px,14vw,180px) 0; margin-top:85px; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__bg::before{ /* engineered grid */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 78% 25%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 25%, #000 0%, transparent 72%);
}
.hero__bg::after{ /* bronze glow */
  content:""; position:absolute; inset:0;
  background:radial-gradient(78% 62% at 88% 8%, rgba(196,128,46,.30) 0%, transparent 62%),
             radial-gradient(60% 60% at 8% 96%, rgba(92,124,140,.26) 0%, transparent 66%);
}
.hero__schematic{ position:absolute; right:-12%; top:6%; width:min(720px,58%); opacity:.38; }
@media (max-width:900px){ .hero__schematic{ opacity:.22; right:-24%; top:auto; bottom:16%; width:110%; } }

.hero__in{ position:relative; z-index:2; }
.hero__grid{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); } }

.hero h1{ font-size:clamp(40px,5.6vw,76px); letter-spacing:-.005em; margin-bottom:26px; }
.hero h1 em{ font-style:normal; color:var(--accent-2); }
.hero__lede{ font-size:clamp(17px,1.8vw,20px); color:#C4D0D8; max-width:56ch; margin-bottom:34px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* hero side card */
.hero__card{ border:1px solid var(--dark-line); background:rgba(255,255,255,.035);
  backdrop-filter:blur(6px); padding:clamp(22px,2.6vw,32px); }
.hero__card h2{ font-size:22px; letter-spacing:.06em; margin-bottom:18px; color:#fff; }
.hero__card li{ display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--dark-line);
  color:#C4D0D8; font-size:15.5px; }
.hero__card li:first-of-type{ border-top:0; }
.hero__card li svg{ width:19px; height:19px; flex:none; color:var(--accent-2); margin-top:2px; }

/* capability strip */
.strip{ position:relative; z-index:2; margin-top:clamp(48px,6vw,86px);
  border-top:1px solid var(--dark-line); }
.strip ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .strip ul{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.strip li{ padding:24px clamp(14px,2vw,28px) 26px; border-inline-end:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line); }
@media (min-width:900px){ .strip li{ border-bottom:0; } .strip li:last-child{ border-inline-end:0; } }
.strip__facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--dark-line); }
@media (min-width:900px){ .strip__facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.strip__facts li{ padding:24px clamp(14px,2vw,28px) 26px; border-inline-end:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line); }
@media (min-width:900px){ .strip__facts li{ border-bottom:0; }
  .strip__facts li:last-child{ border-inline-end:0; } }
.strip__facts b{ display:block; font-family:var(--font-display); font-size:34px; line-height:1;
  text-transform:uppercase; color:var(--accent-2); letter-spacing:.01em; }
.strip__facts span{ display:block; font-size:13px; color:var(--on-dark-mut); margin-top:6px; }

.hero__promise{ margin-top:22px; font-size:14.5px; color:#9FB0BA; }
.hero__promise::before{ content:""; display:inline-block; width:6px; height:6px; margin-inline-end:10px;
  background:var(--accent-2); vertical-align:middle; }

.strip b{ display:block; font-family:var(--font-display); font-size:26px; text-transform:uppercase;
  color:#fff; letter-spacing:.02em; }
.strip span{ display:block; font-size:13px; color:var(--on-dark-mut); margin-top:4px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:980px){ .about__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.about__media{ position:relative; }
@media (min-width:980px){ .about__media{ position:sticky; top:104px; } }
.about__media img{ width:100%; height:clamp(360px,52vh,560px); object-fit:cover; }
.about__badge{ position:absolute; left:-1px; bottom:-1px; background:var(--dark); color:#fff;
  padding:20px 26px; max-width:78%; }
.about__badge b{ display:block; font-family:var(--font-display); font-size:24px; text-transform:uppercase; }
.about__badge span{ font-size:13px; color:var(--on-dark-mut); letter-spacing:.06em; }

.pillars{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(28px,3vw,40px); }
@media (min-width:640px){ .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pillars li{ background:var(--paper); padding:22px 24px; }
.section--soft .pillars li{ background:var(--paper-soft); }
.pillars svg{ width:24px; height:24px; color:var(--accent); margin-bottom:12px; }
.pillars b{ display:block; font-family:var(--font-display); font-size:21px; text-transform:uppercase;
  letter-spacing:.02em; margin-bottom:6px; }
.pillars p{ font-size:14.5px; color:var(--muted); margin:0; line-height:1.55; }

/* ==========================================================================
   SOLUTIONS
   ========================================================================== */
.cards{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:700px){ .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{ position:relative; background:var(--paper); border:1px solid var(--line);
  padding:clamp(24px,2.6vw,34px); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card::after{ content:""; position:absolute; inset:auto auto 0 0; width:0; height:3px;
  background:var(--accent); transition:width .28s ease; }
.card:hover{ border-color:#C9D2D7; transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(15,23,28,.45); }
.card:hover::after{ width:64px; }
.card__ico{ width:44px; height:44px; color:var(--accent); margin-bottom:20px; }
.card h3{ font-size:26px; margin-bottom:12px; letter-spacing:.02em; }
.card p{ font-size:15px; color:var(--ink-2); line-height:1.6; }
.card--dark{ background:var(--dark-2); border-color:var(--dark-line); }
.card--dark h3{ color:#fff; }
.card--dark p{ color:var(--on-dark-mut); }

/* product card */
a.card--product{ display:flex; flex-direction:column; gap:16px; }
.card--product .card__num{ font-family:var(--font-display); font-size:14px; letter-spacing:.2em;
  color:var(--muted); }
.card--product h3{ font-size:24px; margin:0; max-width:22ch; }
.card--product p{ flex:1; }
.card--product .link-arrow{ margin-top:2px; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.steps{ counter-reset:step; display:grid; gap:1px; background:var(--dark-line);
  border:1px solid var(--dark-line); }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.steps li{ background:var(--dark); padding:28px clamp(20px,2vw,28px) 32px; }
.steps li::before{ counter-increment:step; content:"0" counter(step);
  display:block; font-family:var(--font-display); font-size:40px; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(224,162,76,.85); margin-bottom:16px; }
.steps b{ display:block; font-family:var(--font-display); font-size:21px; text-transform:uppercase;
  color:#fff; letter-spacing:.03em; margin-bottom:8px; }
.steps p{ font-size:14.5px; color:var(--on-dark-mut); line-height:1.55; margin:0; }

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.brands{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .brands{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1000px){ .brands{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.brands li{ background:var(--paper); display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:112px; padding:18px; text-align:center; line-height:1.15;
  font-family:var(--font-display); font-size:20px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-2); transition:color .2s ease, background .2s ease; }
.brands li:hover{ color:var(--accent); background:#fff; }
/* если положен файл логотипа — он встаёт вместо текста */
.brands img{ max-height:38px; max-width:78%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:filter .2s ease, opacity .2s ease; }
.brands li:hover img{ filter:none; opacity:1; }
.brands li small{ display:block; font-family:var(--font-body); font-size:11px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; margin-top:5px; }
.note{ font-size:13px; color:var(--muted); margin-top:18px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid{ display:grid; gap:clamp(28px,4vw,60px); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){ .contact__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.cinfo li{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--dark-line); }
.cinfo li:first-child{ border-top:1px solid var(--dark-line); }
.cinfo svg{ width:20px; height:20px; color:var(--accent-2); flex:none; margin-top:4px; }
.cinfo span{ display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-mut); margin-bottom:3px; }
.cinfo a,.cinfo b{ font-size:17px; font-weight:500; color:#fff; }
.cinfo a:hover{ color:var(--accent-2); }

.cinfo__map{ margin-top:24px; }

.form{ background:rgba(255,255,255,.04); border:1px solid var(--dark-line); padding:clamp(24px,3vw,38px); }
.form__grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .form__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field--full{ grid-column:1/-1; }
.form label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:8px; }
.form input,.form textarea,.form select{
  width:100%; background:rgba(0,0,0,.28); border:1px solid var(--dark-line); border-radius:var(--radius);
  color:#fff; font:inherit; font-size:15.5px; padding:13px 15px; transition:border-color .18s ease, background .18s ease;
}
.form textarea{ min-height:130px; resize:vertical; }
.form input:focus,.form textarea:focus,.form select:focus{ border-color:var(--accent); background:rgba(0,0,0,.42); outline:none; }
.form input::placeholder,.form textarea::placeholder{ color:#6E808C; }
.form option{ background:var(--dark-2); }
.form .btn{ width:100%; margin-top:6px; }
.form__note{ font-size:12.5px; color:var(--on-dark-mut); margin-top:14px; line-height:1.5; }

/* ==========================================================================
   CTA BAND + FOOTER
   ========================================================================== */
.cta{ background:var(--accent); color:#fff; }
.cta__in{ display:grid; gap:24px; align-items:center; padding-block:clamp(44px,5vw,64px); }
@media (min-width:900px){ .cta__in{ grid-template-columns:minmax(0,1fr) auto; } }
.cta h2{ font-size:clamp(28px,3.4vw,44px); max-width:24ch; }
.cta p{ margin-top:10px; color:rgba(255,255,255,.86); max-width:56ch; }
.cta .btn{ background:#fff; color:var(--ink); }
.cta .btn:hover{ background:var(--ink); color:#fff; }

.foot{ background:var(--paper-soft); color:var(--ink-2); padding-block:clamp(48px,6vw,72px) 28px;
  border-top:1px solid var(--line); }
.foot__grid{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){ .foot__grid{ grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); } }
.foot img{ height:36px; width:auto; margin-bottom:20px; }
.foot h4{ font-size:15px; letter-spacing:.14em; color:var(--ink); margin-bottom:16px; }
.foot li{ margin-bottom:11px; font-size:15px; }
.foot a:hover{ color:var(--accent); }
.foot__social{ margin-top:18px; }
.foot__social a{ display:inline-flex; align-items:center; gap:9px; font-size:14px;
  padding:9px 14px; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .18s ease, color .18s ease; }
.foot__social svg{ width:17px; height:17px; }
.foot__social a:hover{ border-color:var(--accent); color:var(--accent); }

.foot__bottom{ margin-top:clamp(36px,4vw,56px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-size:13px; }

/* ==========================================================================
   PRODUCT PAGES
   ========================================================================== */
.phead{ position:relative; background:var(--dark); color:#fff; overflow:hidden;
  padding-block:clamp(130px,15vw,168px) clamp(48px,6vw,72px); }
.phead__bg{ position:absolute; inset:0;
  background:radial-gradient(70% 70% at 84% 0%, rgba(196,128,46,.26) 0%, transparent 62%),
             radial-gradient(60% 60% at 0% 100%, rgba(92,124,140,.22) 0%, transparent 60%); }
.phead__in{ position:relative; z-index:2; }
.crumbs{ display:flex; flex-wrap:wrap; gap:10px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:20px; }
.crumbs a:hover{ color:#fff; }
.phead h1{ font-size:clamp(34px,5.4vw,64px); max-width:20ch; margin-bottom:18px; }
.phead p{ color:#C4D0D8; max-width:64ch; font-size:clamp(16px,1.5vw,18px); }

/* per-item borders (not a 1px-gap grid) so a half-filled last row stays invisible */
.scope{ display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:640px){ .scope{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .scope{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.scope li{ background:var(--paper); padding:20px 22px; font-size:15.5px; display:flex; gap:12px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.scope li::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; margin-top:9px; }

.callouts{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){ .callouts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.callout{ border-inline-start:2px solid var(--accent); padding:4px 0 4px 20px; }
.callout b{ display:block; font-family:var(--font-display); font-size:20px; text-transform:uppercase; margin-bottom:6px; }
.callout p{ font-size:14.5px; color:var(--ink-2); margin:0; }

.pother{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:700px){ .pother{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .pother{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.pother a{ background:var(--paper); padding:22px; display:flex; flex-direction:column; gap:8px;
  min-height:120px; transition:background .18s ease; }
.pother a:hover{ background:var(--paper-soft); }
.pother small{ font-family:var(--font-display); font-size:13px; letter-spacing:.18em; color:var(--muted); }
.pother b{ font-family:var(--font-display); font-size:19px; text-transform:uppercase; line-height:1.15; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}