/* ==========================================================================
   XCMG Used Concrete Pump Trucks — design system
   Palette verified against xcmgglobal.com's own stylesheets
   (/resources/web/css/style.css + responsive.css), not from memory:

     #062147  navy      — dark section backgrounds, headings   (217 uses)
     #053588  brand blue— all interactive elements             (181 uses)
     #fcbb1f  amber     — CTAs, ALWAYS with navy text          ( 71 uses)
     #0062b0  logo blue — the flat colour of XCMG's logo mark
     #4a4a4a  body text

   Deliberately NOT used: #E60012 / #C8102E. A widely repeated "XCMG red"
   guess; both appear zero times in XCMG's stylesheets. This site is blue.

   Typography mirrors the official site's industrial, bold, tight headings.
   ========================================================================== */

:root {
  --blue:        #053588;   /* brand blue — interactive elements */
  --blue-dark:   #04296a;
  --blue-light:  #1e5fbf;
  --logo-blue:   #0062b0;
  --navy:        #062147;   /* deep navy — dark sections, headings */
  --navy-2:      #0a2f5e;
  --accent:      #fcbb1f;   /* amber — always paired with navy text */
  --accent-dark: #e0a410;

  --ink:         #333333;
  --ink-2:       #4a4a4a;   /* XCMG body-text colour */
  --ink-3:       #7a8a99;
  --line:        #dfe5ec;
  --line-2:      #eef2f7;

  --bg:          #ffffff;
  --bg-soft:     #f5f7fa;
  --bg-alt:      #eef3f8;

  --green:       #25d366;   /* WhatsApp */
  --green-dark:  #1da851;
  --ok:          #16a34a;
  --warn:        #d97706;

  --radius:      10px;
  --radius-lg:   16px;
  --shadow-sm:   0 1px 3px rgba(6,33,71,.08), 0 1px 2px rgba(6,33,71,.06);
  --shadow:      0 6px 20px rgba(6,33,71,.10);
  --shadow-lg:   0 16px 44px rgba(6,33,71,.16);
  --container:   1200px;
  --header-h:    68px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy);
  margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.015em; font-weight: 800; }
h1 { font-size: clamp(1.85rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.12rem, 2vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto;
             padding: 0 20px; }
.section { padding: 76px 0; }
.section--tight { padding: 52px 0; }
.section--soft { background: var(--bg-soft); }
.section--alt  { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #d7e3f0; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: var(--accent); }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 0; }
.section--navy .section-head p { color: #a9c2da; }
.eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 800;
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); background: rgba(0,98,176,.09);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.section--navy .eyebrow { color: var(--accent); background: rgba(252,187,31,.14); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: 13px 24px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; text-align: center; transition: .18s ease;
  text-decoration: none !important; line-height: 1.2; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); box-shadow: var(--shadow); }
.btn--accent { background: var(--accent); color: var(--navy); }
.btn--accent:hover { background: var(--accent-dark); }
.btn--wa { background: var(--green); color: #05340f; }
.btn--wa:hover { background: var(--green-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--line-2); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--sm { padding: 9px 16px; font-size: .86rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-note { font-size: .84rem; color: var(--ink-3); margin-top: 14px; }
.section--navy .btn-note { color: #93aec8; }
.wa-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- topbar / header ---------- */
.topbar { background: var(--navy); color: #b9cde0; font-size: .82rem; }
.topbar .container { display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: space-between; padding-top: 8px;
  padding-bottom: 8px; }
.topbar__note { display: flex; align-items: center; gap: 8px; }
.topbar__links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.topbar a { color: #dbe7f2; }
.topbar a:hover { color: var(--accent); }

.header { position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(6,33,71,.04); }
.header__inner { display: flex; align-items: center; gap: 18px;
  min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto;
  text-decoration: none !important; }
.brand__mark { width: 40px; height: 40px; flex: 0 0 auto; }
.brand__text { line-height: 1.12; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  color: var(--navy); letter-spacing: -.01em; display: block; }
.brand__sub { font-size: .68rem; color: var(--ink-3); letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 3px;
  list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link { display: block; padding: 9px 13px; border-radius: 8px;
  font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.nav__link:hover { background: var(--bg-alt); color: var(--blue);
  text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--blue); background: rgba(0,98,176,.08); }
.header__cta { flex: 0 0 auto; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 2px; background: var(--navy);
  position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute;
  left: 0; width: 20px; height: 2px; background: var(--navy); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

@media (max-width: 1080px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
  .header--open .nav { display: block; position: absolute; top: 100%; left: 0;
    right: 0; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 10px 20px 18px; }
  .header--open .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .header--open .nav__link { padding: 13px 12px; font-size: 1rem; }
  .header--open .header__cta { display: block; margin: 10px 0 0; }
  .header--open .header__cta .btn { width: 100%; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--navy); color: #dbe7f2;
  overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(0,98,176,.55), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(252,187,31,.14), transparent 60%);
  pointer-events: none; }
.hero__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 48px; align-items: center; padding: 74px 0 78px; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero__sub { font-size: 1.1rem; color: #b9cde0; max-width: 40em;
  margin-bottom: 26px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.hero-chip { font-size: .82rem; font-weight: 600; padding: 6px 13px;
  border-radius: 999px; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.17); color: #e3eef8; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.hero__trust b { display: block; font-family: var(--font-head); font-size: 1.5rem;
  color: var(--accent); line-height: 1.15; }
.hero__trust span { font-size: .8rem; color: #93aec8; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 34px; padding: 52px 0 58px; }
}

/* ---------- enquiry card ---------- */
.enq { background: #fff; border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-lg); color: var(--ink); }
.enq h3 { margin-bottom: 4px; font-size: 1.16rem; }
.enq__sub { font-size: .87rem; color: var(--ink-3); margin-bottom: 16px; }
.enq .field { margin-bottom: 13px; }
.enq .btn { margin-top: 4px; }
.enq__priv { font-size: .76rem; color: var(--ink-3); margin: 11px 0 0;
  text-align: center; }

/* ---------- forms ---------- */
.field { margin-bottom: 17px; }
.field label { display: block; font-weight: 600; font-size: .87rem;
  margin-bottom: 6px; color: var(--ink); }
.field .req { color: #c0392b; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: var(--radius); background: #fff; font-size: .95rem;
  transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0,98,176,.13); }
.field textarea { min-height: 122px; resize: vertical; }
.field__hint { font-size: .78rem; color: var(--ink-3); margin-top: 5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-status { margin-top: 14px; padding: 13px 15px; border-radius: var(--radius);
  font-size: .9rem; display: none; }
.form-status.is-ok { display: block; background: #e8f7ee; color: #14532d;
  border: 1px solid #a7dcbb; }
.form-status.is-err { display: block; background: #fdeaea; color: #7f1d1d;
  border: 1px solid #f2b8b8; }

/* ---------- value props ---------- */
.props { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .props { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .props { grid-template-columns: 1fr; } }
.prop { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--shadow-sm); position: relative;
  border-top: 3px solid var(--blue); }
.prop__ico { width: 44px; height: 44px; border-radius: 11px; display: grid;
  place-items: center; background: rgba(0,98,176,.09); color: var(--blue);
  margin-bottom: 14px; }
.prop__ico svg { width: 23px; height: 23px; }
.prop h3 { font-size: 1.05rem; margin-bottom: 8px; }
.prop p { font-size: .91rem; color: var(--ink-2); margin-bottom: 0; }

/* ---------- trust strip ---------- */
.trust { background: var(--navy-2); color: #cfe0ef; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 30px 0; text-align: center; }
@media (max-width: 700px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
.trust__item b { display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.75rem; color: #fff; line-height: 1.1; }
.trust__item span { font-size: .82rem; color: #9db8d1; }

/* ---------- inventory ---------- */
.toolbar { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm);
  margin-bottom: 26px; position: sticky; top: var(--header-h); z-index: 40; }
.toolbar__top { display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: center; justify-content: space-between; margin-bottom: 14px; }
.toolbar__count { font-size: .9rem; color: var(--ink-2); }
.toolbar__count b { color: var(--navy); }
.filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1020px) { .filters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .filters { grid-template-columns: 1fr; } }
.filter label { display: block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
  margin-bottom: 5px; }
.filter select { width: 100%; padding: 9px 11px; border: 1.5px solid var(--line);
  border-radius: 9px; background: #fff; font-size: .89rem; }
.filter select:focus { border-color: var(--blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0,98,176,.13); }
.toolbar__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 14px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex;
  flex-direction: column; transition: .2s ease; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt);
  overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__badges { position: absolute; top: 11px; left: 11px; display: flex;
  flex-wrap: wrap; gap: 6px; }
.badge { font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: rgba(6,33,71,.86); color: #fff; letter-spacing: .03em;
  backdrop-filter: blur(3px); }
.badge--boom { background: rgba(252,187,31,.95); color: var(--navy); }
/* Condition badges. The condition vocabulary is Excellent / Very Good / Good /
   As-is, so the class is slugged and matched by prefix. */
.badge[class*="badge--cond-Excellent"] { background: rgba(22,163,74,.94); }
.badge[class*="badge--cond-Very-Good"] { background: rgba(5,53,136,.94); }
.badge[class*="badge--cond-Good"]      { background: rgba(30,95,191,.94); }
.badge[class*="badge--cond-As-is"]     { background: rgba(217,119,6,.94); }
.badge[class*="badge--cond-Refurbished"] { background: rgba(5,53,136,.94); }
.card__body { padding: 18px 19px 20px; display: flex; flex-direction: column;
  flex: 1; }
.card__model { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem;
  color: var(--navy); margin: 0 0 3px; }
.card__title { font-size: .87rem; color: var(--ink-3); margin: 0 0 14px; }
.card__specs { list-style: none; margin: 0 0 16px; padding: 0; font-size: .87rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.card__specs li { margin: 0; }
.card__specs dt { font-size: .7rem; text-transform: uppercase; color: var(--ink-3);
  letter-spacing: .05em; font-weight: 700; }
.card__specs dd { margin: 1px 0 0; font-weight: 600; color: var(--ink); }
.card__price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2);
  margin-bottom: 14px; }
.card__price b { font-family: var(--font-head); font-size: 1.32rem; color: var(--blue);
  display: block; line-height: 1.2; }
.card__price span { font-size: .76rem; color: var(--ink-3); }
.card__cta { display: flex; gap: 9px; }
.card__cta .btn { flex: 1; }
.empty { text-align: center; padding: 56px 24px; background: #fff;
  border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.empty h3 { margin-bottom: 10px; }
.empty p { color: var(--ink-2); max-width: 54ch; margin: 0 auto 18px; }

/* ---------- product detail ---------- */
.crumbs { font-size: .84rem; color: var(--ink-3); padding: 16px 0 0; }
.crumbs a { color: var(--ink-2); }
.crumbs span { margin: 0 7px; color: var(--line); }
.detail { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 40px; align-items: start; padding: 22px 0 0; }
/* Grid and flex children default to min-width:auto, so an inline SVG with an
   intrinsic width (the placeholder art) can push a column past the viewport.
   Every direct child of the detail grid must be allowed to shrink. */
.detail > * { min-width: 0; }
@media (max-width: 940px) { .detail { grid-template-columns: 1fr; gap: 30px; } }
.gallery { border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-alt); min-width: 0; }
.gallery__main { aspect-ratio: 4 / 3; background: var(--bg-alt); min-width: 0;
  overflow: hidden; }
.gallery__main img, .gallery__main svg { width: 100%; height: 100%;
  object-fit: cover; display: block; }
.gallery__thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto;
  background: #fff; border-top: 1px solid var(--line); }
.gallery__thumbs button { flex: 0 0 76px; width: 76px; height: 58px; padding: 0;
  border: 2px solid transparent; border-radius: 7px; overflow: hidden;
  cursor: pointer; background: var(--bg-alt); }
.gallery__thumbs button[aria-current="true"] { border-color: var(--blue); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.detail__head h1 { margin-bottom: 8px; font-size: clamp(1.55rem, 3.2vw, 2.3rem); }
.detail__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.detail__price { background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; }
.detail__price b { font-family: var(--font-head); font-size: 1.75rem; color: var(--blue);
  display: block; line-height: 1.15; }
.detail__price span { font-size: .84rem; color: var(--ink-3); }
.detail__cta { display: flex; flex-direction: column; gap: 10px; }
.detail__cta .btn { width: 100%; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: #fff; }
table.spec { width: 100%; border-collapse: collapse; font-size: .93rem;
  min-width: 420px; }
table.spec caption { text-align: left; padding: 16px 18px 0; font-family: var(--font-head);
  font-weight: 800; color: var(--navy); font-size: 1.02rem; }
table.spec th, table.spec td { padding: 11px 18px; text-align: left;
  border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.spec th { font-weight: 600; color: var(--ink-2); width: 46%; }
table.spec td { font-weight: 600; color: var(--ink); }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec tr:nth-child(even) { background: #fafcfe; }
.val-onrequest { color: var(--warn) !important; font-style: italic; font-weight: 600; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: .94rem;
  color: var(--ink-2); margin: 0; }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--ok);
  margin-top: 2px; }

.cta-band { background: linear-gradient(120deg, var(--navy), var(--blue-dark));
  color: #d7e3f0; border-radius: var(--radius-lg); padding: 34px 30px;
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  justify-content: space-between; }
.cta-band h3 { color: #fff; margin-bottom: 6px; font-size: 1.35rem; }
.cta-band p { margin: 0; color: #b9cde0; max-width: 46ch; }

/* ---------- faq ---------- */
.faq { max-width: 900px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 11px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; padding: 17px 52px 17px 19px;
  font-weight: 700; color: var(--navy); font-family: var(--font-head);
  font-size: 1rem; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue); transform: translateY(-70%) rotate(45deg);
  transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details[open] summary { color: var(--blue); }
.faq .faq__a { padding: 0 19px 18px; color: var(--ink-2); font-size: .94rem; }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- shipping / info blocks ---------- */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); }
.panel h3 { font-size: 1.1rem; margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 2px solid var(--line-2); }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel--accent { border-top: 3px solid var(--accent); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pill { font-size: .82rem; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  background: rgba(0,98,176,.09); color: var(--blue); }
.steps { list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-left: 46px;
  margin-bottom: 18px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue);
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .93rem;
  display: grid; place-items: center; }
.steps b { display: block; color: var(--navy); font-family: var(--font-head);
  margin-bottom: 2px; }
.steps p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 36px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }
.contact-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
  margin-bottom: 16px; }
.contact-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-card a { font-weight: 700; word-break: break-word; }
.contact-card p { font-size: .88rem; color: var(--ink-3); margin: 4px 0 0; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ci { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; background: rgba(0,98,176,.09);
  color: var(--blue); }
.contact-list .ci svg { width: 19px; height: 19px; }
.contact-list dt { font-size: .73rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 700; }
.contact-list dd { margin: 2px 0 0; font-weight: 600; font-size: .96rem;
  word-break: break-word; }

/* ---------- floating whatsapp ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
  border-radius: 999px; background: var(--green); color: #05340f;
  font-weight: 700; font-size: .9rem; box-shadow: 0 8px 26px rgba(6,33,71,.28);
  text-decoration: none !important; }
.wa-float:hover { background: var(--green-dark); color: #fff; }
@media (max-width: 560px) { .wa-float span { display: none; }
  .wa-float { padding: 14px; } }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: #a9c2da; padding: 54px 0 0;
  font-size: .9rem; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 14px;
  font-family: var(--font-head); }
.footer a { color: #cfe0ef; }
.footer a:hover { color: var(--accent); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 30px; padding-bottom: 34px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 9px; }
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: #8fa9c2; }
.footer__note { font-size: .82rem; color: #8fa9c2; }
.footer__disclaimer { border-top: 1px solid rgba(255,255,255,.13);
  padding: 22px 0; font-size: .9rem; color: #a9c2da; line-height: 1.7; }
.footer__disclaimer strong { color: #fff; }

/* Non-affiliation notice shown at BODY SIZE beside a price or CTA. Two UDRP
   complaints against resellers of genuine goods have been lost where the
   disclaimer was rendered as fine print or kept off the selling page, so this
   deliberately matches body text rather than shrinking. */
.independence-note { margin-top: 16px; padding: 14px 16px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--navy); border-radius: var(--radius);
  font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.independence-note strong { color: var(--navy); }
.independence-note a { font-weight: 600; }

/* Non-affiliation notice above the fold on the hero, at body size — never fine
   print. Sits on the dark hero, so it is tinted rather than boxed. */
.hero__notice { margin-top: 22px; padding: 13px 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  font-size: .95rem; line-height: 1.6; color: #cfe0ef; max-width: 46em; }
.hero__notice strong { color: #fff; }
.hero__notice a { color: var(--accent); font-weight: 600; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.13); padding: 18px 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .82rem; }

/* ---------- utilities ---------- */
/* Grid/flex children default to min-width:auto, which lets wide inline content
   (SVGs, long unbroken strings, min-width tables) blow out a column on narrow
   screens. Every multi-column layout in this file opts its children out. */
.cards > *, .props > *, .info-grid > *, .two-col > *, .contact-grid > *,
.footer__grid > *, .trust__grid > *, .form-grid > *, .detail > * { min-width: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: var(--navy); padding: 10px 16px; z-index: 100; font-weight: 700;
  border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.lead { font-size: 1.06rem; color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; gap: 22px; } }

@media print {
  .header, .topbar, .wa-float, .toolbar__actions, .burger { display: none; }
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover { transform: none; }
}