/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--color-background-primary) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-6); height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline: auto; }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--color-text-secondary); transition: color var(--t-base);
}
.site-nav__link:hover { color: var(--color-text-primary); }
.site-nav__link.is-active { color: var(--color-gold-primary); font-weight: 600; }
.site-nav__link.is-active::after { content: ""; position: absolute; inset-inline-start: var(--sp-3); inset-inline-end: var(--sp-3); bottom: -2px; height: 2px; background: var(--color-gold-primary); border-radius: 2px; }
.nav-dropdown { position: relative; }

/* Bridges the gap between the trigger and the menu.

   The menu sits 14px below its trigger, which looks right and broke the interaction: moving
   the pointer down crossed 14px of nothing, mouseleave fired on .nav-dropdown, and the menu
   closed before the pointer arrived. Users saw a submenu that vanished the moment they
   reached for it.

   This invisible strip makes the hover area contiguous, so the pointer never leaves the
   element on the way down. It is only present while open, so it cannot block clicks on
   whatever sits beneath a closed dropdown. */
.nav-dropdown.is-open::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 100%;
  height: 16px;
}

.nav-dropdown__menu {
  position: absolute; top: calc(100% + 14px); inset-inline-start: 0; transform: translateY(-6px);
  min-width: 220px; padding: var(--sp-2); opacity: 0; pointer-events: none;
  background: var(--color-panel-primary); border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  transition: opacity var(--t-base), transform var(--t-base);
}
.nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown__menu a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.nav-dropdown__menu a:hover { background: var(--color-gold-wash); color: var(--color-gold-primary); }
.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: var(--color-text-primary); }
.mobile-drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 79;
  background: var(--color-background-primary); padding: var(--sp-6) var(--gutter);
  overflow-y: auto; transform: translateX(100%); transition: transform var(--t-slow);
}
.mobile-drawer.is-open { transform: none; }
.mobile-drawer a { display: block; padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-border); font-size: 1.0625rem; font-weight: 600; }
.mobile-drawer .sub a { padding-inline-start: var(--sp-4); font-size: var(--fs-sm); font-weight: 400; color: var(--color-text-secondary); }
.mobile-drawer__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-background-deep); padding-block: var(--sp-12) var(--sp-6); margin-top: var(--sp-16); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) 1.2fr; gap: var(--sp-8); }
.footer-brand img { height: 28px; margin-bottom: var(--sp-4); }
.footer-brand p { font-size: var(--fs-sm); color: var(--color-text-secondary); max-width: 30ch; }
.footer-col__title { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-primary); margin-bottom: var(--sp-4); }
.footer-col a, .footer-contact li { display: block; font-size: var(--fs-sm); color: var(--color-text-secondary); padding-block: 5px; }
.footer-col a:hover { color: var(--color-gold-primary); }
.footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer-contact svg { color: var(--color-gold-primary); flex: none; margin-top: 3px; }
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-panel-secondary); color: var(--color-text-secondary); transition: all var(--t-base); }
.footer-social a:hover { background: var(--color-gold-primary); color: var(--color-text-inverse); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.footer-bottom a:hover { color: var(--color-gold-primary); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--sp-16) var(--sp-12); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-10); align-items: center; }
.hero__rule { width: 56px; height: 3px; background: var(--color-gold-primary); border-radius: 2px; margin: var(--sp-5) 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero__visual { position: relative; }
.hero__visual svg { width: 100%; height: auto; }
.hero--service .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hero--service .h-hero { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.hero__sub { font-size: 1.125rem; font-weight: 600; color: var(--color-text-primary); margin-top: var(--sp-3); }

/* ---------- Live price band ---------- */
.price-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.price-card { background: var(--color-panel-primary); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-4); transition: border-color var(--t-base); }
.price-card:hover { border-color: var(--color-gold-edge); }
.price-card__name { font-size: var(--fs-sm); font-weight: 600; }
.price-card__unit { font-size: var(--fs-xs); color: var(--color-text-muted); }
.price-card__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-top: var(--sp-3); }
.price-card__change { font-size: var(--fs-xs); font-family: var(--font-mono); }
.ticker { display: flex; align-items: center; gap: var(--sp-5); overflow-x: auto; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-gold-edge); border-radius: var(--r-md); background: var(--color-panel-primary); scrollbar-width: none; }
.ticker::-webkit-scrollbar { display: none; }
.ticker__item { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; font-size: var(--fs-sm); }
.ticker__label { color: var(--color-text-muted); font-size: var(--fs-xs); }
.ticker__price { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Service & product cards ---------- */
.service-card { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 210px; }
.service-card__icon { width: 44px; height: 44px; color: var(--service-accent); }
.service-card h3 { font-size: 1.0625rem; }
.service-card p { font-size: var(--fs-sm); color: var(--color-text-secondary); flex: 1; }
.product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.product-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--color-panel-secondary); }
.product-card__media svg { width: 100%; height: 100%; }

/* The source photographs are not all the same shape — some 597x264, some 600x240 — so a
   row of cards rendered at different heights and never lined up. object-fit crops to the
   card's own ratio instead of stretching, which keeps the subject centred rather than
   distorted, and the normalised width/height on the tag reserves the space before the
   image arrives so the text below does not jump.

   The files are around 600px wide and 15 KB: adequate at card size, soft on a
   high-density display. Replacing them with 1200px originals is the one improvement here
   that CSS cannot make. */
.product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.product-card__badge { position: absolute; inset-inline-start: var(--sp-4); bottom: -18px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--color-background-deep); border: 1px solid var(--color-gold-edge); color: var(--color-gold-primary); }
.product-card__body { padding: var(--sp-6) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.product-card__body h3 { color: var(--color-gold-primary); font-size: 1.0625rem; }
.product-card__body p { font-size: var(--fs-sm); color: var(--color-text-secondary); flex: 1; }

/* ---------- Process / steps ---------- */
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); position: relative; }
.process__step { text-align: center; position: relative; }
.process__step::before { content: ""; position: absolute; top: 32px; inset-inline-start: -50%; width: 100%; border-top: 1px dashed var(--color-border-strong); }
.process__step:first-child::before { display: none; }
.process__icon {
  position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--service-accent); color: var(--service-accent);
  background: var(--color-background-primary); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.process__title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.process__desc { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* ---------- Feature strip ---------- */
.feature-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--color-panel-primary); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.feature { display: flex; gap: var(--sp-3); padding: var(--sp-5); border-inline-end: 1px solid var(--color-border); }
.feature:last-child { border-inline-end: 0; }
.feature__icon { color: var(--service-accent); flex: none; }
.feature__title { font-size: var(--fs-sm); font-weight: 600; }
.feature__desc { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 2px; }

/* ---------- CTA banner ---------- */
.cta-banner { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: var(--sp-8); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-panel-primary); }
.cta-banner__media { height: 100%; min-height: 200px; }
.cta-banner__media svg { width: 100%; height: 100%; object-fit: cover; }
.cta-banner__body { padding: var(--sp-8) var(--sp-8) var(--sp-8) 0; }
.cta-banner__body h2 { font-size: 1.5rem; margin-bottom: var(--sp-3); }
.cta-banner__body p { color: var(--color-text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-5); max-width: 52ch; }
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--color-gold-edge); border-radius: var(--r-lg); background: var(--color-gold-wash); }
.cta-strip h3 { font-size: 1.125rem; }
.cta-strip p { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* ---------- Opportunities ---------- */
.opp-type { display: inline-grid; place-items: center; min-width: 52px; padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--color-gold-edge); color: var(--color-gold-primary); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; }
.spotlight { border: 1px solid var(--color-gold-edge); }
.spotlight__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-gold-primary); }

/* ---------- Insights ---------- */
.article-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.article-card__cat { align-self: flex-start; }
.article-card h3 { font-size: 1rem; }
.article-card p { font-size: var(--fs-xs); color: var(--color-text-secondary); flex: 1; }
.trending { counter-reset: t; }
.trending li { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.trending li:last-child { border-bottom: 0; }
.trending li::before { counter-increment: t; content: "0" counter(t); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-gold-primary); }
.trending a:hover { color: var(--color-gold-primary); }

/* ---------- Auth ---------- */
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; padding-block: var(--sp-10); }
.auth-panel { padding: var(--sp-8); }
.auth-divider { display: flex; align-items: center; gap: var(--sp-4); color: var(--color-text-muted); font-size: var(--fs-xs); margin-block: var(--sp-5); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.assurance-strip { display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: space-between; padding: var(--sp-4) var(--sp-6); border: 1px solid var(--color-border); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--color-text-secondary); }
.assurance-strip span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.assurance-strip svg { color: var(--color-success); }


/* ── Glossary ────────────────────────────────────────────────────────────
   Two columns on desktop so the eye can scan terms without a long scroll, one on
   mobile. The term column is fixed-width and LTR: these are contract terms and
   they appear in Latin script in both locales. */
.glossary {
  display: grid;
  gap: 0;
  margin: 0;
}

.glossary__item {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: start;
}

.glossary__term {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-gold-primary);
  margin: 0;
}

.glossary__def { margin: 0; line-height: 1.7; }

@media (max-width: 640px) {
  .glossary__item { grid-template-columns: 1fr; gap: var(--sp-1); }
}


/* ── Product imagery ─────────────────────────────────────────────────────
   The source images vary in height — some 240px, some 264 — so a grid of product cards
   rendered at different heights and the row never lined up.

   object-fit crops to a fixed ratio instead of stretching, which keeps the subject
   centred rather than distorted. The explicit width and height attributes on the tag
   reserve the space before the image loads, so the text below does not jump.

   The source files are around 600px wide and 15 KB. That is adequate at card size and
   soft on a high-density display. Replacing them with 1200px originals is the one
   improvement here that cannot be made in CSS. */


/* A subtle wash so white label text stays readable over a light photograph. */