/* ── TOKENS ───────────────────────────────── */
:root {
  --navy:        #0f0f0f;
  --navy-2:      #111418;
  --navy-3:      #1a1d21;
  --gold:        #34d298;
  --gold-light:  #00ffa1;
  --gold-dim:    rgba(52,210,152,.15);
  --steel:       #6b7685;
  --steel-lt:    #a7a7a7;
  --off:         #171717;
  --white:       #ffffff;
  --tx-dark:     #ffffff;
  --tx-mid:      #cfcfcf;
  --tx-lt:       #656565;
  --border:      #292929;
  /* Modern system font stack — zero external CDN, crisp at all sizes */
  --fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fc: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Display headings use the same clean system stack — weight-based hierarchy, no condensed/impact */
  --fd: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fh: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --nav-h: 56px;
  --radius: 12px;
  --gap: clamp(12px, 2vw, 24px);
  --bottom-cta-h: 0px;
  --compare-h: 0px;
  --grad-silver: linear-gradient(320deg, #a8a8a6 15%, #c2c0c0 48%, #f9f8f6 64%, #d4d4d4 76%, #7f7f7f 88%);
  --grad-green:  linear-gradient(84deg, #00bf79 42%, #00ffa1 81%);
}
@media (max-width: 760px) {
  :root { --bottom-cta-h: 60px; }
}
/* --compare-h is set dynamically by updateBottomStack() based on actual tray height */

/* ── RESET ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* All scrolls are instant — anchors, Top FAB, RFQ jumps, results panels.
   No `behavior:'smooth'` anywhere; no `scroll-behavior:smooth` CSS rule.
   User preference: snappy navigation across menu · Top FAB · in-page hashes. */
html { font-size: 16px; overflow-x: hidden; }
body { font-family: var(--fb); color: var(--tx-dark); background: var(--navy); overflow-x: hidden; width: 100%; max-width: 100vw; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── TYPOGRAPHY HELPERS ──────────────────── */
.label {
  font-family: var(--fb);
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.h-xl {
  font-family: var(--fd);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800; line-height: .96;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-wrap: balance;
}
.h-lg {
  font-family: var(--fd);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 800; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-wrap: balance;
}
.h-md {
  font-family: var(--fd);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.body-lg { font-size: clamp(15px,1.2vw,17px); font-weight: 300; color: var(--tx-mid); line-height: 1.75; text-wrap: pretty; }
.body-sm { font-size: 14px; color: var(--tx-mid); line-height: 1.65; }

/* ── LAYOUT ──────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px,4vw,48px); }
section { scroll-margin-top: var(--nav-h); }

/* ── BUTTONS ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fb); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 28px; border-radius: 36px;
  transition: background .2s ease, transform .1s, color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-gold  { background: var(--gold); color: #0f1110; }
.btn-gold:hover { background: var(--gold-light); box-shadow: 0 0 20px rgba(52,210,152,.35); }
.btn-outline { background: #002c1c; color: var(--gold); border: 1px solid var(--gold); }
.btn-outline:hover { background: var(--gold); color: #0f1110; }
.btn-navy  { background: var(--gold); color: #0f1110; width: 100%; justify-content: center; }
.btn-navy:hover { background: var(--gold-light); box-shadow: 0 0 20px rgba(52,210,152,.35); }

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: var(--navy-2);
  border-bottom: 1px solid #1e252e;
}
.nav-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px,2vw,24px);
}
.nav-right {
  display: flex; align-items: center; gap: clamp(12px,2vw,20px);
}

/* LOGO */
.nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; }
.logo-mark {
  font-family: var(--fd);
  font-size: clamp(22px,2.8vw,30px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  padding-bottom: 0;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Disable font kerning so letter-spacing applies uniformly between every
     pair of glyphs (E↔R was rendering wider than R↔G↔S↔N when kerning
     was on, especially under Webkit-clipped gradient text). */
  font-kerning: none;
  font-feature-settings: "kern" 0;
  -webkit-font-feature-settings: "kern" 0;
}
.logo-mark::after { display: none; }
.logo-mark .e {
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-sub {
  font-family: var(--fb);
  font-size: 9px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel);
  margin-left: 12px;
  margin-top: 3px;
  align-self: flex-end;
  padding-bottom: 4px;
  border-left: 1px solid #292929;
  padding-left: 12px;
  line-height: 1.5;
}

/* NAV LINKS */
.nav-links { display: flex; align-items: center; gap: clamp(16px,2vw,32px); list-style: none; }
.nav-links a {
  font-family: var(--fb); font-size: 14px; font-weight: 500;
  letter-spacing: .03em;
  color: var(--steel); transition: color .15s;
}
.nav-links a:hover { color: var(--white); }
.nav-links .nav-cta { background: var(--gold); color: #0f1110; padding: 7px 18px; border-radius: 20px; font-weight: 600; transition: background .15s; }
.nav-links .nav-cta:hover { background: var(--gold-light); }

/* Nav dropdown (Sectors) */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: ' \25BE'; font-size: 9px; opacity: .6; }
.nav-dropmenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--navy-2); border: 1px solid var(--border); border-radius: 10px;
  min-width: 200px; max-width: 220px; padding: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, visibility .18s, transform .18s;
  margin-top: 0;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  list-style: none;
  z-index: 950;
}
/* Leftmost dropdown (Shop) — anchor to the left of its trigger so the
   200px panel doesn't spill off the viewport's left edge. */
.nav-dropdown:first-child .nav-dropmenu { left: 0; transform: translateX(0); }
.nav-dropdown:first-child:hover .nav-dropmenu,
.nav-dropdown:first-child:focus-within .nav-dropmenu { transform: translateX(0) translateY(0); }
.nav-dropmenu::before {
  content: ''; position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav-dropdown > a { padding: 8px 0; display: inline-block; }
.nav-dropdown:hover .nav-dropmenu,
.nav-dropdown:focus-within .nav-dropmenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropmenu li { display: block; }
.nav-dropmenu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 6px;
  color: var(--white); transition: background .15s;
}
.nav-dropmenu a:hover { background: rgba(52,210,152,.1); color: var(--white); }
.nav-dropmenu .ds-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.nav-dropmenu .ds-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 8px;
  background: rgba(52,210,152,.15); color: var(--gold);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
}
.nav-dropmenu .ds-tag.soon { background: rgba(255,255,255,.06); color: var(--steel-lt); }
.nav-dropmenu .ds-desc { font-size: 11px; color: var(--steel); font-weight: 400; }
.nav-dropmenu .ds-divider { height: 1px; background: rgba(255,255,255,.06); margin: 6px 12px; padding: 0; }

/* Sector tabs (above product grid) */
.sector-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}
.sector-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fb); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 20px;
  background: transparent; border: 1px solid var(--border);
  color: var(--steel-lt); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sector-tab:hover { color: var(--white); border-color: var(--steel); }
/* Active-status sectors: green outline even when the tab isn't the current selection */
.sector-tab.is-active-sector {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.sector-tab.is-active-sector:hover {
  border-color: var(--gold-light);
  color: var(--white);
  background: rgba(52,210,152,.08);
}
.sector-tab.is-active-sector .st-tag {
  background: rgba(52,210,152,.2); color: var(--gold);
}
/* Currently-selected tab always wins (filled green) */
.sector-tab.active,
.sector-tab.is-active-sector.active {
  background: var(--gold); color: #0f1110; border-color: var(--gold);
  box-shadow: none;
}
.sector-tab .st-tag {
  font-size: 8px; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,.15); letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700;
}
.sector-tab.active .st-tag,
.sector-tab.is-active-sector.active .st-tag { background: rgba(15,17,16,.25); color: #0f1110; }

/* Coming Soon placeholder */
.sector-placeholder {
  text-align: center;
  padding: clamp(3rem,6vh,5rem) 1.5rem;
  background: #171717;
  border: 1px dashed var(--border);
  border-radius: 15px;
  margin-top: 1rem;
}
.sector-placeholder .sp-icon {
  width: 64px; height: 64px; margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold); border-radius: 16px;
  color: var(--gold);
  background: rgba(52,210,152,.05);
}
.sector-placeholder .sp-icon svg { width: 32px; height: 32px; }
.sector-placeholder h3 {
  font-family: var(--fd); font-size: clamp(20px,2.5vw,28px); font-weight: 800;
  color: var(--white); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .5rem;
}
.sector-placeholder p { font-size: 14px; color: var(--tx-mid); max-width: 460px; margin: 0 auto 1.5rem; line-height: 1.6; }
.sector-placeholder .sp-coming {
  display: inline-block;
  font-family: var(--fb); font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 14px; background: rgba(52,210,152,.1); border-radius: 20px;
}

/* K-Tech product card SVG visual (services have no photo) */
.card-image.card-image-svg { padding: 0; background: #ffffff; }
.card-image.card-image-svg svg { width: 100%; height: 100%; display: block; }

/* HAMBURGER */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.hamburger span { width: 22px; height: 2px; background: var(--white); border-radius: 1px; transition: all .2s; display: block; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* MOBILE MENU */
.mobile-menu {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--navy-2); z-index: 890;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem clamp(24px,4vw,48px);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 0; }
.mobile-menu a {
  display: block;
  font-family: var(--fc); font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-lt); padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: color .18s;
}
.mobile-menu a:hover { color: var(--gold-light); }
.mobile-menu .m-cta { color: var(--gold); }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
#home {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--nav-h);
  background: var(--navy);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
#home::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('images/hero-workplace.jpg');
  background-image: image-set(
    url('images/hero-workplace.webp') type('image/webp'),
    url('images/hero-workplace.jpg') type('image/jpeg')
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: kenBurns 28s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
  z-index: 0;
}
#home::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(11,29,56,.94) 0%, rgba(11,29,56,.82) 55%, rgba(18,34,66,.78) 100%);
  pointer-events: none;
  z-index: 1;
}
@keyframes kenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  #home::before { animation: none; }
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(200,147,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,147,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  z-index: 2;
}
.hero-accent {
  position: absolute; bottom: 0; right: 0;
  width: 45%; height: 80%;
  background: linear-gradient(135deg, transparent 40%, rgba(200,147,42,.04) 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-body {
  flex: 1;
  display: flex; align-items: center;
  padding: clamp(3rem,6vh,6rem) 0 clamp(2rem,4vh,4rem);
  position: relative; z-index: 3;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 1.75rem;
}
.hero-tag-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.hero-title {
  font-family: var(--fd);
  font-size: clamp(44px,5.5vw,80px);
  font-weight: 800; line-height: .94;
  letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: 1.75rem;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title em {
  font-style: normal; display: block;
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc { color: var(--steel-lt); margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* HERO STAT GRID */
.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 15px;
  overflow: hidden;
}
.hero-stat {
  background: #171717;
  padding: clamp(1.25rem,2.5vw,2rem) clamp(1rem,2vw,1.5rem);
  text-align: center;
  transition: background .18s;
}
.hero-stat:hover { background: #1a1d21; }
.stat-num {
  font-family: var(--fd); font-size: clamp(36px,4vw,52px);
  font-weight: 800; text-transform: uppercase;
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1; display: block;
}
.stat-lbl {
  font-family: var(--fb); font-size: 10px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel-lt); margin-top: 6px; display: block;
}

/* TRUST BAR */
.trust-bar {
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 3;
}
.trust-inner {
  padding: .9rem clamp(16px,4vw,48px);
  display: flex; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  flex-wrap: wrap; justify-content: center;
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--fc); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel-lt);
}
.trust-item::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════════
   PRODUCTS
════════════════════════════════════════ */
#products { background: var(--off); }
.products-inner { padding: clamp(3.5rem,7vh,6rem) clamp(16px,4vw,48px); }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(1.5rem,3vw,3rem); flex-wrap: wrap; gap: 1rem;
}
.section-head-text { display: flex; flex-direction: column; gap: .6rem; }

/* PRODUCT GRID — auto-fill so new models just drop in */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Sub-category filtering (Plan C-1 v2) — used on K-Beauty grid today.
   scripts/build-products.js adds `.is-grouped` to the grid and prepends a
   <div class="filter-chips"> with one chip per sub-category (plus "All").
   Chip click toggles `[hidden]` on cards whose data-subcategory mismatches.
   `overflow: visible` is required so position:sticky on the chip row works. */
.product-grid.is-grouped {
  overflow: visible;
}
.filter-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  background: #0f1110;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(var(--nav-h, 60px) + 6px);
  z-index: 5;
}
.filter-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--tx-mid, #cfcfcf);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .03em;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { border-color: var(--gold); color: var(--gold); }
.filter-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.filter-chip.is-active {
  background: var(--gold);
  color: #0f1110;
  border-color: var(--gold);
  font-weight: 700;
}
.filter-chip-count {
  margin-left: 6px;
  font-weight: 700;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}
/* `.product-card { display: flex }` overrides the UA `[hidden]` rule, so the
   chip filter has no effect without this explicit override. */
.product-card[hidden] { display: none; }
.product-card {
  background: #171717;
  padding: clamp(1.25rem,2.5vw,2rem);
  display: flex; flex-direction: column;
  cursor: pointer; position: relative;
  transition: box-shadow .18s, background .18s;
  outline: none;
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.product-card::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  border: 3px solid transparent;
  transition: border-color .2s ease;
  z-index: 3;
}
.product-card:hover, .product-card:focus-visible {
  background: #1a1d21;
  z-index: 1;
}
.product-card:hover::after,
.product-card:focus-visible::after { border-color: var(--gold); }
.card-image {
  margin: calc(clamp(1.25rem,2.5vw,2rem) * -1) calc(clamp(1.25rem,2.5vw,2rem) * -1) 1.25rem;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overflow: hidden;
}
/* Let <picture> be transparent to flex so the inner <img> obeys the
   card-image flex container's sizing rules directly. */
.card-image picture { display: contents; }
.card-image img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}
.product-card:hover .card-image img { transform: scale(1.05); }
.card-tag {
  font-family: var(--fc); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); margin-bottom: .9rem;
}
.card-model {
  font-family: var(--fd); font-size: clamp(28px,3vw,38px);
  font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 4px;
  letter-spacing: .02em; text-transform: uppercase;
}
.card-part { font-size: 11px; color: var(--tx-lt); margin-bottom: 4px; }
.card-mfg { font-size: 10px; color: var(--steel); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-verified { color: var(--gold); font-weight: 600; font-size: 9px; padding: 2px 6px; background: rgba(52,210,152,.1); border-radius: 10px; }
.card-desc { font-size: 13px; color: var(--tx-mid); line-height: 1.6; flex: 1; margin-bottom: 1.25rem; }

/* MINI SPECS */
.card-specs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; border-top: 1px solid var(--border);
  padding-top: 1.1rem; margin-bottom: 1.25rem;
}
.spec-lbl { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lt); }
.spec-val { font-family: var(--fb); font-size: 15px; font-weight: 600; color: var(--white); }
.card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-cta {
  font-family: var(--fc); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 6px;
  transition: color .15s;
}
.card-cta::after { content: '\2192'; transition: transform .15s; }
.product-card:hover .card-cta::after { transform: translateX(4px); }
.card-cta:hover { color: var(--navy); }

/* COMPARE BUTTON (per card) */
.compare-btn {
  font-family: var(--fb); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); background: transparent;
  border: 1px solid var(--gold); border-radius: 999px;
  padding: 6px 10px 6px 8px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s, border-color .15s, background .15s;
  z-index: 4; position: relative;
  flex-shrink: 0;
}
.compare-btn svg { width: 11px; height: 11px; transition: transform .2s; }
.compare-btn:hover { color: var(--gold-light); border-color: var(--gold-light); }
.compare-btn.active {
  color: var(--white); background: var(--navy); border-color: var(--navy);
}
.compare-btn.active svg { transform: rotate(45deg); }

/* BADGE — 신모델 표시 */
.card-badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--fc); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold); color: var(--white);
  padding: 3px 8px; border-radius: 1px;
  z-index: 4;
}

/* COMPARE TRAY */
.compare-tray {
  position: fixed; left: 0; right: 0;
  bottom: var(--bottom-cta-h);
  background: var(--navy);
  border-top: 2px solid var(--gold);
  padding: 14px clamp(16px,3vw,32px);
  display: flex; align-items: center; gap: clamp(12px,2vw,24px);
  flex-wrap: wrap; justify-content: space-between;
  z-index: 850;
  transform: translateY(100%);
  transition: transform .3s ease;
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,.3);
}
.compare-tray.open,
.compare-tray:has(.compare-chip) { transform: translateY(0); }
@media (max-width: 760px) {
  .compare-tray, .compare-tray.open, .compare-tray:has(.compare-chip) { display: none !important; }
  .compare-btn { display: none !important; }
}
.compare-tray-left {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1;
  min-width: 0;
}
.compare-tray-label {
  font-family: var(--fc); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel-lt); white-space: nowrap;
}
.compare-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.compare-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fc); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.08);
  color: var(--white);
  padding: 5px 6px 5px 10px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.12);
}
.compare-chip button {
  color: var(--steel-lt); font-size: 14px; line-height: 1;
  padding: 0 4px; transition: color .15s;
}
.compare-chip button:hover { color: var(--gold-light); }
.compare-tray-actions { display: flex; align-items: center; gap: 10px; }
.compare-tray .btn-clear {
  font-family: var(--fc); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-lt); transition: color .15s;
}
.compare-tray .btn-clear:hover { color: var(--gold-light); }
.compare-tray .btn-gold { padding: 10px 20px; font-size: 12px; }
.compare-tray .btn-gold:disabled {
  background: rgba(200,147,42,.3); cursor: not-allowed;
}
@media (max-width: 520px) {
  .compare-tray { padding: 12px 16px; gap: 10px; }
  .compare-tray-label { display: none; }
  .compare-tray .btn-gold { padding: 8px 14px; font-size: 11px; }
}

/* COMPARE MODAL (shares modal-overlay shell, wider card) */
.compare-modal {
  background: #171717;
  max-width: 1100px; width: 100%;
  margin: auto; border-radius: 15px;
  overflow: hidden;
  animation: modalIn .22s ease;
  border: 1px solid var(--border);
}
.compare-modal-hd {
  background: var(--navy);
  padding: clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,2rem);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.compare-modal-hd h3 {
  font-family: var(--fc); font-size: clamp(22px,3vw,32px);
  font-weight: 700; color: var(--white); line-height: 1;
}
.compare-modal-hd .modal-sub { margin-top: 6px; }
.compare-modal-bd {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.compare-table thead th {
  position: sticky; top: 0;
  background: #1a1d21;
  border-bottom: 1px solid var(--gold);
  padding: 1rem clamp(12px,1.5vw,18px);
  text-align: left;
  vertical-align: bottom;
  z-index: 1;
  color: var(--tx-mid);
}
.compare-table thead th:first-child {
  background: #171717;
  border-bottom-color: var(--border);
  width: 22%;
  min-width: 140px;
}
.compare-table .ct-img {
  width: 100%; max-width: 170px;
  aspect-ratio: 4/3;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; margin: 0 0 10px;
}
.compare-table .ct-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compare-table .ct-img-svc {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: var(--gold); font-family: var(--fd); font-size: 13px; font-weight: 800;
  letter-spacing: .08em; border-radius: 3px;
}
.compare-table .ct-model {
  font-family: var(--fd); font-size: clamp(18px,2vw,24px);
  font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .02em;
}
.compare-table .ct-part { font-size: 10px; color: var(--tx-lt); letter-spacing: .05em; }
.compare-table tbody tr { border-bottom: 1px solid #222; }
.compare-table tbody tr:hover { background: #1a1d21; }
.compare-table tbody td {
  padding: 10px clamp(12px,1.5vw,18px);
  font-size: 13px; color: var(--tx-mid); vertical-align: top;
}
.compare-table tbody td:first-child {
  font-family: var(--fb);
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-lt);
  background: #171717;
}
.compare-table .ct-empty { color: var(--tx-lt); font-style: italic; }
.compare-modal-ft {
  padding: 1rem clamp(1.25rem,3vw,2rem);
  background: #0f0f0f; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  justify-content: space-between;
}
.compare-modal-ft .modal-ft-note { font-size: 12px; color: var(--tx-lt); }

/* MOBILE STICKY CTA BAR */
.mobile-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: var(--navy-2);
  border-top: 1px solid var(--border);
  z-index: 860;
  padding: 0 16px;
  align-items: center;
  gap: 10px;
  box-shadow: 0 -8px 24px -8px rgba(0,0,0,.35);
}
.mobile-cta-bar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fb); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 36px;
  padding: 12px 10px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.mobile-cta-bar a svg { width: 16px; height: 16px; flex-shrink: 0; }
.mobile-cta-bar .mcta-call {
  background: var(--gold); color: #0f1110;
}
.mobile-cta-bar .mcta-call:active { background: var(--gold-light); box-shadow: 0 0 20px rgba(52,210,152,.35); }
.mobile-cta-bar .mcta-quote {
  background: #002c1c; color: var(--gold);
  border: 1px solid var(--gold);
}
.mobile-cta-bar .mcta-quote:active { background: var(--gold); color: #0f1110; }
@media (max-width: 760px) {
  .mobile-cta-bar { display: flex; }
}

/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.85); z-index: 990;
  overflow-y: auto; padding: clamp(1rem,3vw,2rem);
  backdrop-filter: blur(8px);
  align-items: flex-start; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #171717;
  max-width: 900px; width: 100%;
  margin: auto; border-radius: 15px;
  overflow: hidden;
  animation: modalIn .22s ease;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  border: 1px solid var(--border);
}
@keyframes modalIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* View Transitions API — smooth cross-fade when modals open/close */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .25s;
  animation-timing-function: ease;
}
.modal-hd {
  background: var(--navy); padding: clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2.5rem);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.modal-hd-text {}
.modal-model { font-family: var(--fd); font-size: clamp(38px,5vw,58px); font-weight: 800; color: var(--white); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.modal-sub  { font-size: 13px; color: var(--steel-lt); margin-top: 5px; }
.modal-part { font-size: 11px; color: var(--gold); letter-spacing: .1em; margin-top: 3px; }
.modal-close {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--steel-lt); font-size: 20px; border-radius: 50%;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: rgba(255,255,255,.1); color: var(--white); }
/* ════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════ */
#toTop {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: calc(clamp(16px, 3vw, 32px) + var(--bottom-cta-h) + var(--compare-h));
  width: 48px; height: 48px;
  background: #171717;
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(11,29,56,.55);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s, color .15s;
  z-index: 800;
}
#toTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#toTop:hover { background: var(--gold); color: #0f1110; }
#toTop svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  #toTop { width: 44px; height: 44px; }
}

.modal-image-row {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: clamp(1.5rem,3vw,2.5rem);
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(220px, 30vh, 340px);
}
.modal-image-row img {
  max-width: 100%; max-height: clamp(200px, 28vh, 320px);
  object-fit: contain;
}
/* Edge-to-edge hero variant for K-Tech and K-Energy modals. */
.modal-image-row.modal-image-fill {
  padding: 0;
  display: block;
  min-height: 0;
}
.modal-image-row.modal-image-fill img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
}
.modal-image-row.modal-svg-row { padding: 0; background: #ffffff; }
.modal-image-row.modal-svg-row svg { width: 100%; max-width: 560px; height: auto; display: block; }
.modal-bd {
  padding: clamp(1.25rem,3vw,2.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem);
}
.modal-sec-title {
  font-family: var(--fb); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 1rem;
}
.spec-tbl { width: 100%; border-collapse: collapse; }
.spec-tbl tr { border-bottom: 1px solid #222; }
.spec-tbl td { padding: 8px 0; font-size: 13px; vertical-align: top; }
.spec-tbl td:first-child { color: var(--tx-lt); font-weight: 500; width: 46%; padding-right: 1rem; }
.spec-tbl td:last-child { color: var(--tx-mid); font-weight: 400; }
.feat-list { list-style: none; }
.feat-list li {
  font-size: 13px; color: var(--tx-mid);
  padding: 6px 0; border-bottom: 1px solid #222;
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.5;
}
.feat-list li::before { content: '\2713'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.modal-desc-row {
  padding: 0 clamp(1.25rem,3vw,2.5rem) clamp(1.25rem,3vw,2rem);
}
.modal-desc { font-size: 13px; color: var(--tx-mid); line-height: 1.75; }
.modal-ft {
  padding: 1.25rem clamp(1.25rem,3vw,2.5rem);
  background: #0f0f0f; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.modal-ft-note { font-size: 12px; color: var(--tx-lt); }

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
#about { background: #151515; }
.about-inner { padding: clamp(3.5rem,7vh,6rem) clamp(16px,4vw,48px); }
.about-visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2.5rem,5vh,4rem);
  aspect-ratio: 21 / 9;
  box-shadow: 0 20px 50px -22px rgba(11,29,56,.35);
}
.about-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.about-visual:hover img { transform: scale(1.03); }
.about-visual-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(11,29,56,.72) 0%, rgba(11,29,56,.35) 55%, rgba(11,29,56,.1) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.25rem,3vw,2.5rem);
  gap: .5rem;
  border-left: 3px solid var(--gold);
}
.about-visual-overlay .label { color: var(--gold-light); }
.about-visual-caption {
  font-family: var(--fc);
  font-size: clamp(15px,1.7vw,24px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  max-width: 640px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: start;
}
.about-copy { display: flex; flex-direction: column; gap: 1.25rem; }
.about-copy .h-lg { margin-bottom: .25rem; }
.kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-top: 2.25rem;
}
.kpi-cell {
  background: #171717; padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--gold);
}
.kpi-num { font-family: var(--fd); font-size: 30px; font-weight: 800; color: var(--gold); line-height: 1; text-transform: uppercase; }
.kpi-lbl { font-size: 12px; color: var(--tx-lt); margin-top: 4px; }
.ceo-card {
  background: var(--navy); padding: clamp(1.5rem,3vw,2.5rem);
  border-radius: var(--radius); position: sticky; top: calc(var(--nav-h) + 16px);
}
.ceo-logo-row {
  margin-bottom: 1.75rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center;
}
.ceo-logo-text {
  font-family: var(--fd); font-size: 22px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; position: relative; padding-bottom: 5px;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-kerning: none;
  font-feature-settings: "kern" 0;
  -webkit-font-feature-settings: "kern" 0;
}
.ceo-logo-text .e {
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ceo-logo-text::after { display: none; }
.ceo-name { font-family: var(--fd); font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.ceo-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; }
.ceo-quote {
  font-size: 14px; font-weight: 300; color: var(--steel-lt); line-height: 1.8;
  font-style: italic; border-left: 2px solid var(--gold);
  padding-left: 1.1rem; margin-bottom: 1.5rem;
}
.co-info { font-size: 12px; color: var(--steel-lt); line-height: 2.1; }
.co-lbl { color: var(--steel); font-weight: 500; display: inline-block; width: 56px; }

/* ════════════════════════════════════════
   COMPLIANCE
════════════════════════════════════════ */
#compliance { background: var(--off); }
.compliance-inner { padding: clamp(3.5rem,7vh,6rem) clamp(16px,4vw,48px); }
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-top: 2.5rem;
}
.comp-card { background: #171717; padding: 2rem; text-align: center; }
.comp-icon {
  width: 48px; height: 48px; background: var(--navy);
  border-radius: 50%; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.comp-icon::after {
  content: ''; position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--gold); border-radius: 50%;
}
.comp-title { font-family: var(--fd); font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.comp-desc  { font-size: 12px; color: var(--tx-lt); line-height: 1.65; }

/* ════════════════════════════════════════
   RFQ
════════════════════════════════════════ */
#rfq { background: var(--navy); }
.rfq-inner { padding: clamp(3.5rem,7vh,6rem) clamp(16px,4vw,48px); }
.rfq-grid {
  display: grid; grid-template-columns: 1fr 1.55fr;
  gap: clamp(2rem,5vw,5rem); align-items: start;
}
.rfq-info .label { margin-bottom: .6rem; }
.rfq-info .h-lg { color: var(--white); margin-bottom: 1rem; }
.rfq-info .body-lg { color: var(--steel-lt); }
.sla-badge { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 1.2rem; padding: 14px 16px; border: 1px solid #2a3a2a; background: linear-gradient(135deg, rgba(0,44,28,.6), rgba(0,30,20,.3)); border-radius: 10px; }
.sla-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #15d78a; margin-top: 6px; box-shadow: 0 0 0 4px rgba(21,215,138,.15); animation: slaPulse 2.4s ease-in-out infinite; }
@keyframes slaPulse { 0%,100%{box-shadow:0 0 0 4px rgba(21,215,138,.15)} 50%{box-shadow:0 0 0 8px rgba(21,215,138,.04)} }
.sla-title { font-family: var(--fd); font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: .02em; margin-bottom: 4px; }
.sla-sub { font-size: 12.5px; color: var(--steel-lt); line-height: 1.55; }
.rfq-contacts { list-style: none; margin-top: 2rem; }
.rfq-contacts li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.rfq-cl { font-family: var(--fc); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); width: 56px; flex-shrink: 0; padding-top: 2px; }
.rfq-cv { font-size: 13px; color: var(--steel-lt); line-height: 1.55; }

/* FORM */
.rfq-form { background: #171717; padding: clamp(1.5rem,3vw,2.5rem); border-radius: 15px; border: 1px solid var(--border); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-grp { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.f-lbl {
  font-family: var(--fc); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tx-lt);
}
.f-lbl span { color: var(--gold); margin-left: 2px; }
.f-in, .f-sel, .f-ta {
  font-family: var(--fb); font-size: 14px; color: var(--white);
  background: #1d1d1d; border: 1px solid var(--border);
  padding: 10px 13px; border-radius: 8px;
  outline: none; width: 100%;
  transition: border-color .18s, background .18s;
  -webkit-appearance: none;
}
.f-sel:invalid, .f-sel option[value=""] { color: var(--tx-lt); }
.f-sel option { color: var(--white); background: #1d1d1d; }
.f-in::placeholder, .f-ta::placeholder { color: var(--tx-lt); }
.f-in:focus, .f-sel:focus, .f-ta:focus { border-color: var(--gold); background: #232524; }
.f-ta { min-height: 96px; resize: vertical; }
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.model-cb { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.model-cb input { width: 15px; height: 15px; accent-color: var(--gold); flex-shrink: 0; }
.model-cb-lbl { font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--tx-mid); }
/* ── RFQ sector accordion ─────────────────────────────
   Groups the Models-of-Interest checkboxes under collapsible sector
   sections (Stage 1 of the RFQ picker plan). The underlying <input
   type="checkbox"> ids stay identical so submitRFQ/MODEL_LABELS keep
   working without changes. */
.rfq-hint { font-size: 11.5px; color: var(--steel); margin: 0 0 .7rem; line-height: 1.5; }
.rfq-sectors { display: flex; flex-direction: column; gap: 8px; }
.rfq-sector {
  background: #141414; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; transition: border-color .15s;
}
.rfq-sector.has-selection { border-color: var(--gold); }
.rfq-sector > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-family: var(--fb);
  -webkit-tap-highlight-color: transparent;
}
.rfq-sector > summary::-webkit-details-marker { display: none; }
.rfq-sector > summary::before {
  content: '\25B8'; color: var(--gold); font-size: 11px;
  transition: transform .15s; flex-shrink: 0; width: 10px; display: inline-block;
}
.rfq-sector[open] > summary::before { transform: rotate(90deg); }
.rs-name { font-size: 14px; font-weight: 700; color: var(--white); }
.rs-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 8px;
  background: rgba(52,210,152,.15); color: var(--gold);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
}
.rs-tag.soon { background: rgba(255,255,255,.06); color: var(--steel-lt); }
.rs-meta { font-size: 11.5px; color: var(--steel); margin-left: auto; font-weight: 500; }
.rs-count { font-weight: 700; color: var(--steel); padding: 2px 9px; border-radius: 10px; transition: background .15s, color .15s; }
.rs-count.has-selection { color: var(--gold); background: rgba(52,210,152,.14); }
.rs-count.has-selection::before { content: '\25CF '; font-size: 8px; position: relative; top: -1px; margin-right: 2px; }
.rs-body { padding: 0 14px 14px; border-top: 1px solid rgba(255,255,255,.04); padding-top: 12px; }
.rs-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--steel); text-transform: uppercase; margin: 0 0 8px; }
.rs-sub:not(:first-child) { margin-top: 14px; }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 520px) { .rs-grid { grid-template-columns: 1fr; } }
.f-note { font-size: 11px; color: var(--tx-lt); text-align: center; margin-top: .9rem; line-height: 1.5; }
.form-success { display: none; text-align: center; padding: 3rem 1.5rem; }
.success-icon { width: 60px; height: 60px; background: var(--off); border-radius: 50%; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.form-success h3 { font-family: var(--fd); font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: .75rem; text-transform: uppercase; }
.form-success p { font-size: 14px; color: var(--tx-mid); line-height: 1.65; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
#footer { background: #0a0a0a; }
.footer-inner { padding: clamp(2.5rem,5vh,4rem) clamp(16px,4vw,48px) clamp(1.5rem,3vh,2.5rem); }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap: clamp(1.25rem,2.4vw,2rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 1.5rem;
}
.footer-brand {}
.footer-logo-row {
  display: flex; align-items: center; margin-bottom: 1rem;
}
.footer-logo-text {
  font-family: var(--fd); font-size: 20px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  position: relative; padding-bottom: 5px;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-kerning: none;
  font-feature-settings: "kern" 0;
  -webkit-font-feature-settings: "kern" 0;
}
.footer-logo-text .e {
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-logo-text::after { display: none; }
.footer-about { font-size: 12px; color: var(--steel); line-height: 1.75; }
.footer-col-title { font-family: var(--fb); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 7px; }
.footer-links a { font-size: 13px; color: var(--steel); transition: color .15s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.footer-copy { font-size: 11px; color: var(--tx-lt); line-height: 1.9; margin: 0; }
.footer-copy a { color: var(--tx-lt); text-decoration: none; transition: color .15s; }
.footer-copy a:hover { color: var(--steel-lt); }
.footer-copy .footer-mid { margin: 0 6px 0 2px; color: #3a3d40; }
.footer-copy .footer-copy-main { white-space: nowrap; }
.footer-copy .footer-link { white-space: nowrap; }
.footer-swift { font-size: 10px; color: #2e4260; background: rgba(255,255,255,.02); padding: 4px 10px; border: 1px solid rgba(255,255,255,.03); border-radius: var(--radius); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-layout   { grid-template-columns: 1fr; }
  .hero-stats    { grid-template-columns: repeat(4,1fr); }
  .about-grid    { grid-template-columns: 1fr; }
  .ceo-card      { position: static; }
  .rfq-grid      { grid-template-columns: 1fr; }
  .footer-top    { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand  { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .hero-stats    { grid-template-columns: 1fr 1fr; }
  .modal-bd      { grid-template-columns: 1fr; }
  .f-row         { grid-template-columns: 1fr; }
  .footer-top    { grid-template-columns: 1fr 1fr; }
  .footer-brand  { grid-column: 1 / -1; }
  .kpi-grid      { grid-template-columns: 1fr 1fr; }
  .nav-links     { display: none; }
  .hamburger     { display: flex; }
  .nav-right .lang-sel { order: -1; }
  .logo-sub      { display: none; }
  .about-visual  {
    margin-left: calc(-1 * clamp(24px,4vw,48px));
    margin-right: calc(-1 * clamp(24px,4vw,48px));
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }
}
@media (max-width: 420px) {
  .hero-stats    { grid-template-columns: 1fr 1fr; }
  .comp-grid     { grid-template-columns: 1fr 1fr; }
}

/* ── ANIMATIONS ──────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.hero-tag    { animation: fadeUp .55s ease both; }
.hero-title  { animation: fadeUp .55s ease .08s both; }
.hero-desc   { animation: fadeUp .55s ease .16s both; }
.hero-actions{ animation: fadeUp .55s ease .24s both; }
.hero-stats  { animation: fadeUp .55s ease .32s both; }

/* SCROLL REVEAL — JS-driven baseline */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* SCROLL-DRIVEN upgrade when browser supports view timelines */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    animation: revealIn linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
    transition: none;
  }
  .reveal.in { animation: none; opacity: 1; transform: none; }
}
@keyframes revealIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; animation: none; }
}
/* ════════════════════════════════════════
   PARTICLE CANVAS (Hero overlay)
════════════════════════════════════════ */
#particleCanvas {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}

/* ════════════════════════════════════════
   VERIFICATION PROCESS
════════════════════════════════════════ */
.verify-section { background: #151515; }
.verify-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); text-align: center; }
.verify-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: 2.5rem;
}
.verify-step {
  background: #171717; border: 1px solid var(--border); border-radius: 12px;
  padding: 1.5rem 1.25rem; text-align: left; position: relative;
  transition: border-color .2s, transform .2s;
}
.verify-step:hover { border-color: var(--gold); transform: translateY(-4px); }
.verify-icon {
  width: 44px; height: 44px; margin-bottom: .75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--gold);
  background: rgba(52,210,152,.05);
  transition: border-color .25s, background .25s, transform .25s;
}
.verify-icon svg { width: 24px; height: 24px; }
.verify-step:hover .verify-icon {
  border-color: var(--gold);
  background: rgba(52,210,152,.12);
  transform: scale(1.05);
}
.verify-num {
  font-family: var(--fd); font-weight: 800; font-size: 11px; color: var(--gold);
  letter-spacing: .15em; margin-bottom: .25rem;
}
.verify-title {
  font-family: var(--fd); font-size: 17px; font-weight: 800;
  color: var(--white); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .5rem;
}
.verify-desc { font-size: 12px; color: var(--tx-mid); line-height: 1.55; }
@media (max-width: 900px) { .verify-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .verify-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   TRADE ROUTE MAP
════════════════════════════════════════ */
.map-section { background: #0a0a0a; overflow: hidden; }
.map-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); text-align: center; }
/* ── Airline-style world map ── */
.route-map { width: 100%; max-width: 1100px; height: auto; display: block; margin: 2rem auto 0; }
.continents-layer use, .continents-layer path {
  fill: #1c2420; stroke: #2d3833; stroke-width: 0.5;
}
.route-lines path {
  fill: none; stroke: #34d298; stroke-width: 1.2;
  stroke-dasharray: 5 4; opacity: 0.55;
  animation: routeFlow 3s linear infinite;
}
@keyframes routeFlow { to { stroke-dashoffset: -90; } }
.plane {
  fill: #00ffa1; opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(52,210,152,0.9));
  animation-name: planeMove;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes planeMove { 0%{offset-distance:0%} 100%{offset-distance:100%} }
.origin {
  fill: var(--gold);
  filter: drop-shadow(0 0 8px rgba(52,210,152,1));
}
.origin-pulse {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  opacity: 0; animation: originPulse 2.5s ease-out infinite;
}
@keyframes originPulse {
  0%   { opacity: 0.7; r: 5; stroke-width: 2; }
  100% { opacity: 0;   r: 22; stroke-width: 0.5; }
}
.origin-label {
  font-family: var(--fd); font-size: 13px; font-weight: 800;
  fill: var(--gold); text-anchor: middle; letter-spacing: 0.12em;
  text-transform: uppercase;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
}
.destinations circle {
  fill: var(--gold); opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(52,210,152,0.6));
  cursor: pointer; transition: opacity .2s, r .2s;
}
.destinations circle:hover { opacity: 1; }
.destinations text {
  font-family: var(--fb); font-size: 10px; font-weight: 600;
  fill: rgba(255,255,255,0.85); text-anchor: middle;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.9));
}
@media (max-width: 600px) {
  .destinations text, .origin-label { font-size: 8px; }
}
.map-info-cards {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2rem;
}
.map-info-card {
  background: #171717; border: 1px solid var(--border); border-radius: 12px;
  padding: 1.25rem 1.5rem; min-width: 140px; text-align: center;
}
.map-info-val {
  font-family: var(--fd); font-size: 22px; font-weight: 800;
  text-transform: uppercase; color: var(--gold);
}
.map-info-lbl { font-size: 11px; color: var(--steel); margin-top: 4px; }
@media (max-width: 600px) {
  .map-label { font-size: 8px; }
  .map-origin-label { font-size: 11px; }
}

/* ════════════════════════════════════════
   CHATBOT
════════════════════════════════════════ */
#chatToggle {
  position: fixed;
  right: clamp(16px,3vw,32px);
  bottom: calc(clamp(16px,3vw,32px) + var(--bottom-cta-h) + var(--chat-lift, 0px));
  width: 52px; height: 52px;
  background: var(--gold); color: #0f1110;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(52,210,152,.4);
  cursor: pointer; z-index: 800;
  transition: bottom .3s ease, transform .2s, box-shadow .2s;
}
#chatToggle:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(52,210,152,.55); }
#chatToggle svg { width: 24px; height: 24px; }
#chatPanel {
  position: fixed;
  right: clamp(16px,3vw,32px);
  bottom: calc(84px + var(--bottom-cta-h) + var(--chat-lift, 0px));
  width: min(360px, calc(100vw - 32px));
  max-height: 480px;
  background: #171717; border: 2px solid var(--gold);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 30px rgba(52,210,152,.2), 0 20px 60px rgba(0,0,0,.6);
  z-index: 810;
  display: none; flex-direction: column;
  transition: bottom .3s ease;
}
#chatPanel.open { display: flex; }
.chat-hd {
  background: var(--navy-2); padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.chat-hd-dot { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }
.chat-hd-title { font-family: var(--fb); font-size: 14px; font-weight: 600; color: var(--white); }
.chat-hd-sub { font-size: 11px; color: var(--steel); }
.chat-close {
  margin-left: auto; color: var(--steel); font-size: 18px;
  cursor: pointer; transition: color .15s;
}
.chat-close:hover { color: var(--white); }
.chat-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 340px;
}
.chat-msg {
  max-width: 85%; padding: 10px 14px;
  font-size: 13px; line-height: 1.55; border-radius: 14px;
  animation: chatPop .25s ease;
  white-space: pre-line;
}
@keyframes chatPop { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chat-msg.bot {
  background: #232524; color: var(--tx-mid);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.chat-msg.user {
  background: var(--gold); color: #0f1110; font-weight: 500;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.chat-options {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-self: flex-start;
  animation: chatPop .25s ease;
}
.chat-opt {
  font-family: var(--fb); font-size: 12px; font-weight: 500;
  background: #002c1c; color: var(--gold); border: 1px solid var(--gold);
  border-radius: 20px; padding: 7px 14px;
  cursor: pointer; transition: background .15s, color .15s;
}
.chat-opt:hover { background: var(--gold); color: #0f1110; }
.chat-opt-back { background: transparent; color: var(--tx-mid); border-color: #3a3a3a; opacity: .75; }
.chat-opt-back:hover { background: #232524; color: var(--tx-hi); border-color: var(--tx-mid); opacity: 1; }
.chat-typing {
  display: flex; gap: 4px; align-self: flex-start; padding: 10px 14px;
  background: #232524; border-radius: 14px; border-bottom-left-radius: 4px;
}
.chat-typing span {
  width: 6px; height: 6px; background: var(--steel);
  border-radius: 50%; animation: typingDot .8s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-input-row {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border); background: #111;
}
.chat-input {
  flex: 1; background: #1d1d1d; border: 1px solid var(--border);
  color: var(--white); border-radius: 20px; padding: 9px 16px;
  font-family: var(--fb); font-size: 13px; outline: none;
  transition: border-color .15s;
}
.chat-input:focus { border-color: var(--gold); }
.chat-input::placeholder { color: var(--tx-lt); }
.chat-send {
  background: var(--gold); color: #0f1110; border: none;
  border-radius: 50%; width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.chat-send:hover { background: var(--gold-light); }
.chat-send svg { width: 16px; height: 16px; }

/* QUOTE CALCULATOR */
.calc-section { background: #0a0a0a; }
.calc-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); }
.calc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,4vw,4rem); align-items: start;
  margin-top: 2rem;
}
.calc-form { display: flex; flex-direction: column; gap: 14px; }
.calc-form .f-sel, .calc-form .f-in {
  font-size: 14px; padding: 11px 14px; border-radius: 10px;
  background: #1d1d1d; border: 1px solid var(--border);
  color: var(--white); width: 100%; outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.calc-form .f-sel:focus, .calc-form .f-in:focus { border-color: var(--gold); }
.calc-form label {
  font-family: var(--fb); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lt);
  margin-bottom: -8px;
}
.calc-result {
  background: #171717; border: 1px solid var(--border);
  border-radius: 15px; padding: clamp(1.5rem,3vw,2.5rem);
}
.calc-result-title {
  font-family: var(--fd); font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold); margin-bottom: 1.25rem;
}
.calc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #222;
  font-size: 13px;
}
.calc-row:last-child { border-bottom: none; }
.calc-row-label { color: var(--tx-lt); }
.calc-row-val { color: var(--white); font-weight: 600; font-family: var(--fb); }
.calc-total {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 2px solid var(--gold);
  display: flex; justify-content: space-between; align-items: baseline;
}
.calc-total-label { font-family: var(--fd); font-weight: 800; font-size: 13px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.calc-total-val { font-family: var(--fd); font-weight: 800; font-size: 28px; color: var(--white); }
.calc-fx { font-size: 12px; color: var(--tx-lt); margin-top: 8px; }
.calc-disclaimer { font-size: 10px; color: var(--tx-lt); margin-top: 1rem; line-height: 1.5; opacity: .7; }
.calc-cta { margin-top: 1.25rem; }
@media (max-width: 760px) {
  .calc-grid { grid-template-columns: 1fr; }
}

/* LANGUAGE SWITCHER */
.lang-sel {
  font-family: var(--fb); font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.08); color: var(--white);
  border: 1px solid rgba(255,255,255,.15); border-radius: 20px;
  padding: 5px 12px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  outline: none; transition: border-color .15s;
}
.lang-sel:hover, .lang-sel:focus { border-color: var(--gold); }
.lang-sel option { background: #171717; color: var(--white); }

/* RTL support for Arabic */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
[dir="rtl"] .hero-layout { direction: ltr; }
[dir="rtl"] .about-grid { direction: ltr; }
[dir="rtl"] .rfq-grid { direction: ltr; }
[dir="rtl"] .card-foot { flex-direction: row-reverse; }
[dir="rtl"] .compare-tray { flex-direction: row-reverse; }
[dir="rtl"] .chat-msg.user { align-self: flex-start; }
[dir="rtl"] .chat-msg.bot { align-self: flex-end; }
[dir="rtl"] .f-row { direction: ltr; }
[dir="rtl"] .footer-top { direction: ltr; }
[dir="rtl"] .mobile-cta-bar { flex-direction: row-reverse; }

/* ── Scroll progress bar ─────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0%; background: linear-gradient(90deg, var(--gold), #1a8f65);
  z-index: 1200; pointer-events: none;
  transition: width .08s linear;
  box-shadow: 0 0 10px rgba(52,210,152,.6);
}

/* ── Side dot navigator ──────────────── */
.side-nav {
  position: fixed; right: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 900;
}
@media (max-width: 920px) { .side-nav { display: none; } }
.side-dot {
  position: relative;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; padding: 0;
  transition: background .2s, transform .2s;
}
.side-dot:hover { background: var(--gold); transform: scale(1.3); }
.side-dot.active { background: var(--gold); box-shadow: 0 0 10px rgba(52,210,152,.6); }
.side-dot .sd-tip {
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  background: var(--navy-2); color: var(--white);
  font-family: var(--fb); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  border: 1px solid var(--border);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.side-dot:hover .sd-tip { opacity: 1; transform: translateY(-50%) translateX(-4px); }

/* ── Mobile menu groups ──────────────── */
.mobile-menu .mm-group-title {
  font-family: var(--fb); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 1.2rem 0 .4rem;
  padding-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu details { border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-menu details > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--fb); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); padding: 14px 4px;
}
.mobile-menu details > summary::-webkit-details-marker { display: none; }
.mobile-menu details > summary::after {
  content: '+'; font-size: 20px; font-weight: 400; color: var(--gold);
  transition: transform .2s;
}
.mobile-menu details[open] > summary::after { content: '−'; }
.mobile-menu details ul { padding: 0 0 10px 4px; }
.mobile-menu details ul li a { padding: 10px 0; font-size: 14px; }

/* ── RFQ 2-step progress ──────────────── */
.rfq-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.rfq-step { display: flex; align-items: center; gap: 8px; font-family: var(--fb); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lt); }
.rfq-step .n { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tx-lt); font-size: 11px; }
.rfq-step.active { color: var(--gold); }
.rfq-step.active .n { background: var(--gold); color: #0a0a0a; }
.rfq-step-line { flex: 1; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; }

/* ── Referral UI ──────────────────────── */
.ref-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(52,210,152,.15); color: var(--gold); padding: 4px 10px; border-radius: 16px; font-family: var(--fb); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-top: 6px; }
.pp-ref-box { background: #1a1a1a; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 12px; color: var(--tx-mid); }
.pp-ref-box code { display: block; background: #0a0a0a; padding: 8px 10px; border-radius: 6px; color: var(--gold); font-family: var(--fc); font-size: 12px; word-break: break-all; margin-top: 6px; cursor: pointer; }
.pp-ref-box .copy-hint { font-size: 10px; color: var(--tx-lt); margin-top: 4px; }

/* ── Accessibility: focus rings ───────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.side-dot:focus-visible, .sector-tab:focus-visible, .hamburger:focus-visible, .nav-dropdown > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button:focus:not(:focus-visible) { outline: none; }

/* ── Toast notifications ──────────────── */
.toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 1500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: calc(100vw - 40px); }
.toast { background: #1a1a1a; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 12px 16px; color: var(--white); font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: toastIn .25s ease-out; pointer-events: auto; max-width: 320px; }
.toast.info { border-left-color: #4a90e2; }
.toast.warn { border-left-color: #ffa940; }
.toast.error { border-left-color: #ff7070; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.leaving { animation: toastOut .25s ease-in forwards; }
@keyframes toastOut { to { transform: translateX(110%); opacity: 0; } }

/* ── WhatsApp FAB ─────────────────────── */
.wa-fab { position: fixed; left: 20px; bottom: calc(20px + var(--chat-lift, 0px)); z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: #25D366; color: #fff; border: 0; box-shadow: 0 8px 20px rgba(0,0,0,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; text-decoration: none; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(37,211,102,.4); }
.wa-fab svg { width: 26px; height: 26px; }
@media (max-width: 640px){ .wa-fab { left: 14px; width: 44px; height: 44px; } }

/* ── Newsletter section ─────────────── */
.news-section { background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%); }
.news-inner { padding: clamp(2.5rem,5vh,4rem) clamp(16px,4vw,48px); text-align: center; }
.news-inner h2 { margin: .4rem 0 .8rem; }
.news-inner p { color: var(--tx-mid); max-width: 540px; margin: 0 auto 1.6rem; font-size: 14px; }
.news-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; flex-wrap: wrap; }
.news-form input { flex: 1; min-width: 200px; background: #1d1d1d; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--white); font-size: 14px; font-family: inherit; outline: none; }
.news-form input:focus { border-color: var(--gold); }
.news-form button { background: var(--gold); color: #0a0a0a; border: 0; border-radius: 8px; padding: 12px 22px; font-family: var(--fb); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.news-inner .news-mini { font-size: 11px; color: var(--tx-lt); margin: 1.1rem auto 0; }

/* ── Partner logos + trust bar ────── */
.partners-section { background: #0f0f0f; padding: clamp(2rem,4vh,3rem) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.partners-title { font-family: var(--fb); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-lt); text-align: center; margin-bottom: 1.4rem; }
.partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem,3vw,3rem); align-items: center; }
.partner-item { font-family: var(--fh); font-weight: 800; font-size: clamp(14px,1.4vw,18px); color: var(--tx-mid); padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: #141414; transition: color .2s, border-color .2s; }
.partner-item:hover { color: var(--gold); border-color: rgba(52,210,152,.3); }

/* ── Case studies ──────────────────── */
.cases-section { background: #0a0a0a; }
.cases-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); }
.cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.2rem,2vw,1.8rem); margin-top: 2rem; }
.case-card { background: #141414; border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; }
.case-card .c-flag { font-size: 28px; line-height: 1; margin-bottom: .6rem; }
.case-card .c-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: .3rem; }
.case-card .c-hd .c-flag { margin-bottom: 0; flex-shrink: 0; }
.case-card .c-hd-text { flex: 1; min-width: 0; }
.case-card .c-thumb {
  flex-shrink: 0; width: 80px; height: 80px;
  border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.case-card .c-thumb img, .case-card .c-thumb picture { width: 100%; height: 100%; object-fit: contain; display: block; }
.case-card .c-thumb svg { width: 100%; height: 100%; display: block; }
.case-card .c-thumb.c-thumb-svg { background: #0f1830; padding: 4px; }
.case-card h3 { font-family: var(--fh); font-weight: 800; font-size: 1.05rem; color: var(--white); margin: 0 0 .3rem; }
.case-card .c-sub { font-size: 11px; color: var(--gold); font-family: var(--fb); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.case-card p { font-size: 13px; color: var(--tx-mid); line-height: 1.55; margin: 0 0 .8rem; }
.case-card .c-stats { display: flex; gap: 10px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.05); }
.case-card .c-stat { flex: 1; text-align: center; }
.case-card .c-stat .n { font-family: var(--fh); font-weight: 800; font-size: 1.3rem; color: var(--gold); display: block; }
.case-card .c-stat .l { font-size: 10px; font-family: var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-lt); margin-top: 3px; display: block; }

/* PDF spec sheet now renders inside an isolated iframe with its own
   document and inline CSS (see printSpecSheet() in index.html). The
   parent page no longer participates in print rendering, so no
   `@media print` rule is needed here. */

/* ── Consent banner ────────────────────── */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1300; background: #141414; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; display: none; align-items: center; gap: 14px; font-size: 13px; color: var(--tx-mid); box-shadow: 0 20px 50px rgba(0,0,0,.5); max-width: 720px; margin: 0 auto; flex-wrap: wrap; }
.consent.open { display: flex; }
.consent a { color: var(--gold); text-decoration: underline; }
.consent button { margin-left: auto; background: var(--gold); color: #0a0a0a; border: 0; padding: 8px 16px; border-radius: 7px; font-family: var(--fb); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

/* ── Commercial strip inside product modal ── */
.commercial-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; background: #111; border-radius: 12px; border: 1px solid var(--border); margin: 1rem 0 1.2rem; }
@media (max-width: 640px){ .commercial-strip { grid-template-columns: 1fr 1fr; } }
.commercial-strip .c-cell { display: flex; flex-direction: column; gap: 4px; }
.commercial-strip .c-l { font-family: var(--fb); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-lt); }
.commercial-strip .c-v { font-family: var(--fh); font-weight: 800; font-size: 14px; color: var(--white); }
.commercial-strip .c-sub { font-family: var(--fb); font-weight: 500; font-size: 11px; color: var(--tx-lt); }

/* ── Trade Tools (Tier 3) ─────────────── */
.tools-section { background: #0f0f0f; }
.tools-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.6rem); margin-top: 2rem; }
@media (max-width: 900px){ .tools-grid { grid-template-columns: 1fr; } }
.tool-card { background: #141414; border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.tool-card h3 { font-family: var(--fh); font-weight: 800; font-size: 1.1rem; color: var(--white); margin: 0; }
.tool-card .t-sub { font-size: 12px; color: var(--tx-mid); margin: 0; }
.tool-card label { font-family: var(--fb); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lt); margin-bottom: -6px; }
.tool-card input, .tool-card select { background: #1d1d1d; border: 1px solid var(--border); border-radius: 8px; color: var(--white); padding: 9px 12px; font-size: 13px; width: 100%; outline: none; -webkit-appearance: none; font-family: inherit; }
.tool-card input:focus, .tool-card select:focus { border-color: var(--gold); }
.tool-card button { background: var(--gold); color: #0a0a0a; padding: 10px; border: 0; border-radius: 8px; font-family: var(--fb); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; margin-top: .3rem; }
.tool-result { background: #1a1a1a; border-radius: 8px; padding: 12px; font-size: 12px; color: var(--tx-mid); margin-top: .5rem; line-height: 1.6; min-height: 50px; }
.tool-result.active { color: var(--white); border-left: 2px solid var(--gold); }
.tool-result strong { color: var(--gold); font-family: var(--fh); font-weight: 800; }

/* ── Q&A Wall (Tier 2) ─────────────── */
.qa-section { background: #0a0a0a; }
.qa-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); }
.qa-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem,3vw,2.5rem); margin-top: 2rem; }
@media (max-width: 900px){ .qa-wrap { grid-template-columns: 1fr; } }
.qa-list { display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.qa-item { background: #141414; border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; }
.qa-q { font-size: 13px; color: var(--white); font-weight: 600; margin: 0 0 .4rem; display: flex; gap: 8px; }
.qa-q::before { content:'Q'; color: var(--gold); font-family: var(--fh); font-weight: 800; flex-shrink: 0; }
.qa-a { font-size: 12px; color: var(--tx-mid); line-height: 1.55; margin: 0; display: flex; gap: 8px; }
.qa-a::before { content:'A'; color: var(--tx-lt); font-family: var(--fh); font-weight: 800; flex-shrink: 0; }
.qa-meta { font-size: 10px; color: var(--tx-lt); font-family: var(--fb); letter-spacing: .08em; text-transform: uppercase; margin-top: .5rem; }
.qa-form { background: #141414; border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; display: flex; flex-direction: column; gap: 12px; height: fit-content; }
.qa-form label { font-family: var(--fb); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lt); margin-bottom: -8px; }
.qa-form input, .qa-form select, .qa-form textarea { background: #1d1d1d; border: 1px solid var(--border); border-radius: 8px; color: var(--white); padding: 10px 12px; font-size: 13px; width: 100%; outline: none; -webkit-appearance: none; font-family: inherit; }
.qa-form textarea { resize: vertical; min-height: 70px; }
.qa-form button { background: var(--gold); color: #0a0a0a; padding: 10px; border: 0; border-radius: 8px; font-family: var(--fb); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

/* ── AI Curation / Partner Match-making ── */
.match-section { background: radial-gradient(ellipse at top, #131616 0%, #0a0a0a 70%); }
.match-inner { padding: clamp(3rem,6vh,5rem) clamp(16px,4vw,48px); }
.match-wrap {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem,4vw,3.5rem); align-items: start; margin-top: 2rem;
}
@media (max-width: 840px){ .match-wrap { grid-template-columns: 1fr; } }
.match-form {
  background: #141414; border: 1px solid var(--border);
  border-radius: 16px; padding: clamp(1.4rem,2.4vw,2rem);
  display: flex; flex-direction: column; gap: 14px;
}
.match-form label {
  font-family: var(--fb); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lt);
  margin-bottom: -8px;
}
.match-form .f-sel, .match-form .f-in {
  font-size: 14px; padding: 11px 14px; border-radius: 10px;
  background: #1d1d1d; border: 1px solid var(--border);
  color: var(--white); width: 100%; outline: none;
  transition: border-color .15s; -webkit-appearance: none;
}
.match-form .f-sel:focus, .match-form .f-in:focus { border-color: var(--gold); }
.match-btn {
  margin-top: 6px; padding: 13px 20px; border-radius: 10px;
  background: var(--gold); color: #0a0a0a; border: 0;
  font-family: var(--fb); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.match-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(52,210,152,.25); }
.match-btn:disabled { opacity: .6; cursor: wait; }
.match-result {
  background: #101010; border: 1px solid var(--border);
  border-radius: 16px; padding: clamp(1.4rem,2.4vw,2rem);
  min-height: 260px; position: relative;
}
.match-empty {
  color: var(--tx-mid); font-size: 14px; text-align: center;
  padding: 3rem 1rem; line-height: 1.6;
}
.match-empty .ai-pulse {
  width: 44px; height: 44px; margin: 0 auto 1rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(52,210,152,.35), transparent 70%);
  animation: aiPulse 2.4s ease-in-out infinite;
}
@keyframes aiPulse { 0%,100%{transform:scale(.8);opacity:.6} 50%{transform:scale(1.15);opacity:1} }
.match-typing { color: var(--gold); font-family: var(--fb); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.match-typing::after { content:'▊'; animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.match-header { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.match-header .label { color: var(--gold); }
.match-header h4 { font-family: var(--fh); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.35rem); margin: .3rem 0 .4rem; color: var(--white); }
.match-header p { color: var(--tx-mid); font-size: 13px; line-height: 1.55; }
.match-item {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.match-item:last-child { border-bottom: 0; }
.match-rank {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), #1a8f65);
  color: #0a0a0a; font-family: var(--fb); font-weight: 800;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.match-body h5 { font-family: var(--fh); font-weight: 800; font-size: 15px; color: var(--white); margin: 2px 0 4px; }
.match-body .m-sector { font-size: 11px; font-family: var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.match-body p { font-size: 13px; color: var(--tx-mid); line-height: 1.5; }
.match-score {
  margin-left: auto; flex-shrink: 0; font-family: var(--fb);
  font-size: 11px; color: var(--gold); text-align: right; white-space: nowrap;
}
.concierge-wrap { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #1e1e1e; }
.concierge-head { margin-bottom: 1.4rem; }
.concierge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .concierge-grid { grid-template-columns: 1fr; } }
.concierge-tier { position: relative; padding: 26px 24px; border: 1px solid #2a2a2a; border-radius: 14px; background: #121212; display: flex; flex-direction: column; }
.concierge-tier-pro { border-color: var(--gold); background: linear-gradient(160deg, #181410 0%, #0e0e0e 100%); box-shadow: 0 0 0 1px rgba(200,147,42,.12), 0 8px 30px rgba(0,0,0,.45); }
.ct-flag { position: absolute; top: -11px; right: 18px; background: var(--gold); color: #0a0a0a; font-family: var(--fb); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.ct-tag { font-family: var(--fb); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-lt); margin-bottom: 6px; }
.ct-name { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.ct-price { font-family: var(--fd); font-size: 32px; font-weight: 800; color: var(--white); margin-bottom: 18px; letter-spacing: -.01em; }
.ct-price-sub { font-size: 13px; font-weight: 500; color: var(--tx-mid); margin-left: 4px; letter-spacing: 0; }
.ct-list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.ct-list li { position: relative; padding: 7px 0 7px 22px; font-size: 13px; color: var(--tx-mid); line-height: 1.55; border-bottom: 1px dashed #252525; }
.ct-list li:last-child { border-bottom: 0; }
.ct-list li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: var(--gold); font-weight: 800; font-size: 13px; }
.concierge-note { margin-top: 1.2rem; font-size: 12px; color: var(--tx-lt); text-align: center; }
.calc-row-benchmark { border-top: 1px dashed #2a2a2a; margin-top: 2px; padding-top: 8px; }
.trend-section { background: linear-gradient(180deg, #0f1110 0%, #141616 100%); padding: 5rem 0; }
.trend-inner { max-width: 1180px; }
.trend-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 2rem; flex-wrap: wrap; }
.trend-meta { text-align: right; font-family: var(--fb); font-size: 12px; color: var(--tx-lt); letter-spacing: .06em; }
.trend-edition { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.trend-next { opacity: .7; }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 2.2rem; }
.trend-card { position: relative; padding: 22px 22px 20px; border: 1px solid #252525; background: #181818; border-radius: 12px; transition: border-color .2s, transform .2s; }
.trend-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.trend-rank { position: absolute; top: 12px; right: 14px; font-family: var(--fd); font-size: 38px; font-weight: 800; color: #2a2a2a; line-height: 1; letter-spacing: -.02em; }
.trend-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; max-width: calc(100% - 50px); }
.trend-thumb {
  flex-shrink: 0; width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden;
  background: #fff; border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.trend-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.trend-thumb.trend-thumb-svg { background: #0f1830; padding: 3px; }
.trend-thumb svg { width: 100%; height: 100%; display: block; }
.trend-top .trend-cat { margin-bottom: 0; }
.trend-cat { font-family: var(--fb); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.trend-title { font-family: var(--fh); font-size: 17px; font-weight: 800; color: var(--white); margin-bottom: 10px; line-height: 1.3; max-width: calc(100% - 50px); }
.trend-growth { font-family: var(--fb); font-size: 12px; font-weight: 700; color: #15d78a; margin-bottom: 12px; letter-spacing: .04em; }
.trend-arrow { margin-right: 4px; }
.trend-body { font-size: 13px; color: var(--tx-mid); line-height: 1.58; }
.trend-cta { text-align: center; padding: 1.8rem; border: 1px dashed #2a2a2a; border-radius: 14px; background: #0e0e0e; }
.trend-cta-lead { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 14px; }
.trend-form { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.trend-form input { font-family: var(--fb); font-size: 14px; padding: 11px 16px; border: 1px solid #2a2a2a; background: #1a1a1a; color: var(--white); border-radius: 8px; min-width: 240px; outline: none; }
.trend-form input:focus { border-color: var(--gold); }
.trend-disclaimer { font-size: 11px; color: var(--tx-lt); max-width: 620px; margin: 0 auto; line-height: 1.5; opacity: .8; }
.wanted-section { background: #0a0a0a; padding: 5rem 0; border-top: 1px solid #1a1a1a; }
.wanted-inner { max-width: 1180px; }
.wanted-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 2rem; flex-wrap: wrap; }
.wanted-post-btn { flex-shrink: 0; }
.wanted-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 1.6rem; }
.wanted-card { position: relative; padding: 18px 18px 16px; border: 1px solid #222; background: #131313; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.wanted-card:hover { border-color: #3a3a3a; }
.wanted-card.wanted-card-mine { border-color: var(--gold); background: linear-gradient(180deg, #1a1611 0%, #131313 100%); }
.wanted-card-row { display: flex; align-items: center; gap: 8px; font-family: var(--fb); font-size: 11px; letter-spacing: .08em; color: var(--tx-lt); text-transform: uppercase; }
.wanted-country { color: var(--gold); font-weight: 700; }
.wanted-dot { opacity: .4; }
.wanted-body { display: flex; align-items: flex-start; gap: 12px; }
.wanted-picto {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 8px; background: rgba(52,210,152,.08);
  border: 1px solid rgba(52,210,152,.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.wanted-picto svg { width: 22px; height: 22px; display: block; }
.wanted-cat { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.35; flex: 1; min-width: 0; margin: 0; }
.wanted-band { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fb); font-size: 12px; font-weight: 600; color: #15d78a; }
.wanted-band::before { content: "💰"; font-size: 13px; }
.wanted-age { font-size: 11px; color: var(--tx-lt); font-family: var(--fb); }
.wanted-match-btn { margin-top: 8px; width: 100%; padding: 8px 12px; font-family: var(--fb); font-size: 12px; font-weight: 600; background: transparent; color: var(--gold); border: 1px solid var(--gold); border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.wanted-match-btn:hover { background: var(--gold); color: #0a0a0a; }
.wanted-mine-flag { position: absolute; top: -9px; right: 14px; background: var(--gold); color: #0a0a0a; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 10px; font-family: var(--fb); letter-spacing: .08em; }
.wanted-note { font-size: 12px; color: var(--tx-lt); max-width: 720px; margin: 0; line-height: 1.55; opacity: .85; }
.wanted-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 1002; padding: 20px; }
.wanted-overlay.open { display: flex; }
.wanted-modal { background: #141414; border: 1px solid #2a2a2a; border-radius: 16px; padding: 28px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; }
.wanted-modal-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.wanted-modal-hd h3 { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--white); }