/* ============================================================
   GGR TRADE — MAIN STYLESHEET
   @layer order: reset < base < layout < components < utilities
   Uses logical properties throughout for LTR/RTL parity.
   ============================================================ */
@layer reset, base, layout, components, utilities;

/* ---- Brand fonts: local-first, graceful system fallback ----
   Drop woff2 files into /assets/fonts/ to activate. Until then,
   the system stack in tokens.css renders cleanly. See docs. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap; src:local("Inter"), url("/assets/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family:"Inter Tight"; font-style:normal; font-weight:500 800; font-display:swap; src:local("Inter Tight"), url("/assets/fonts/inter-tight-var.woff2") format("woff2"); }
@font-face { font-family:"Rajdhani"; font-style:normal; font-weight:600; font-display:swap; src:local("Rajdhani SemiBold"), url("/assets/fonts/rajdhani-600.woff2") format("woff2"); }
@font-face { font-family:"Rajdhani"; font-style:normal; font-weight:700; font-display:swap; src:local("Rajdhani Bold"), url("/assets/fonts/rajdhani-700.woff2") format("woff2"); }

@layer reset {
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }
  body { min-height:100vh; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
  img,svg,video,canvas { display:block; max-width:100%; height:auto; }
  button,input,select,textarea { font:inherit; color:inherit; }
  button { cursor:pointer; background:none; border:none; }
  a { color:inherit; text-decoration:none; }
  ul,ol { list-style:none; }
  :focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-1); }
  table { border-collapse:collapse; width:100%; }
}

@layer base {
  body {
    font-family:var(--font-body); font-size:var(--fs-500); line-height:var(--lh-body);
    color:var(--ink-2); background:var(--c-surface);
    display:flex; flex-direction:column;
  }
  main { flex:1 0 auto; }
  h1,h2,h3,h4,h5 { font-family:var(--font-heading); color:var(--ink-1); line-height:var(--lh-snug); font-weight:700; letter-spacing:-.01em; }
  h1{ font-size:var(--fs-900); line-height:var(--lh-tight); font-weight:800; }
  h2{ font-size:var(--fs-800); }
  h3{ font-size:var(--fs-700); }
  h4{ font-size:var(--fs-600); }
  p{ margin-block:0 var(--sp-4); } p:last-child{ margin-block-end:0; }
  strong{ color:var(--ink-1); font-weight:700; }
  a.link{ color:var(--brand); font-weight:600; } a.link:hover{ color:var(--brand-strong); text-decoration:underline; text-underline-offset:3px; }
  .eyebrow{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:var(--fs-400); color:var(--brand); display:inline-flex; align-items:center; gap:.5em; }
  .eyebrow.on-navy{ color:var(--c-teal); }
  .eyebrow::before{ content:""; inline-size:26px; block-size:3px; background:var(--accent); border-radius:2px; }
  ::selection{ background:var(--c-blue); color:#fff; }
  .visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
  .skip-link{ position:fixed; inset-block-start:-100px; inset-inline-start:12px; z-index:1000; background:var(--c-navy); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-2); font-weight:700; transition:inset-block-start var(--dur-2); }
  .skip-link:focus{ inset-block-start:12px; }
}

@layer layout {
  .wrap{ inline-size:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
  .wrap-wide{ inline-size:min(100% - 2.4rem, var(--wrap-wide)); margin-inline:auto; }
  .wrap-narrow{ inline-size:min(100% - 2.4rem, var(--wrap-narrow)); margin-inline:auto; }
  section{ padding-block:var(--sp-8); }
  section.tight{ padding-block:var(--sp-7); }
  .section-navy{ background:var(--c-surface-navy); color:var(--ink-inv-1); }
  .section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4{ color:#fff; }
  .section-pale{ background:var(--c-surface-2); }
  .section-pale-blue{ background:var(--c-surface-3); }
  .grid{ display:grid; gap:var(--sp-5); }
  .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); }
  .g-4{ grid-template-columns:repeat(4,1fr); } .g-auto{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
  .cluster{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
  .stack > * + *{ margin-block-start:var(--sp-4); }
  @media (max-width:960px){ .g-4{ grid-template-columns:repeat(2,1fr);} .g-3{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } section{ padding-block:var(--sp-7);} }

  .section-head{ max-inline-size:64ch; margin-block-end:var(--sp-6); }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .section-head p.lede{ font-size:var(--fs-600); color:var(--ink-3); }
}

@layer components {
  /* ---------- Buttons ---------- */
  .btn{ --bg:var(--brand); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:var(--font-heading); font-weight:700; font-size:var(--fs-500); line-height:1;
    padding:.9em 1.5em; border-radius:var(--r-2); background:var(--bg); color:var(--fg);
    border:2px solid transparent; min-block-size:48px; transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2), background var(--dur-2); text-align:center; }
  .btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }
  .btn:active{ transform:translateY(0); }
  .btn svg{ inline-size:1.15em; block-size:1.15em; }
  .btn-accent{ --bg:var(--accent); } .btn-accent:hover{ --bg:var(--accent-strong); }
  .btn-navy{ --bg:var(--c-navy); }
  .btn-teal{ --bg:var(--verified-deep); }
  .btn-ghost{ --bg:transparent; --fg:var(--brand); border-color:var(--c-line-strong); }
  .btn-ghost:hover{ --fg:var(--brand-strong); border-color:var(--brand); box-shadow:var(--sh-2); }
  .btn-ghost.on-navy{ --fg:#fff; border-color:rgba(255,255,255,.4); }
  .btn-ghost.on-navy:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
  .btn-lg{ font-size:var(--fs-600); padding:1em 1.8em; }
  .btn-sm{ font-size:var(--fs-400); padding:.6em 1em; min-block-size:40px; }
  .btn-block{ inline-size:100%; }
  .btn-wa{ --bg:#1FA855; } .btn-wa:hover{ --bg:#178a44; }

  /* ---------- Badges ---------- */
  .badge{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; padding:.34em .7em; border-radius:var(--r-pill); background:var(--muted-bg); color:var(--ink-2); line-height:1; }
  .badge svg{ inline-size:.95em; block-size:.95em; }
  .badge-verified{ background:var(--ok-bg); color:var(--ok); }
  .badge-info{ background:var(--info-bg); color:var(--info); }
  .badge-caution{ background:var(--warn-bg); color:var(--warn); }
  .badge-danger{ background:var(--danger-bg); color:var(--danger); }
  .badge-quote{ background:#EAF0FA; color:var(--brand-strong); }
  .badge-new{ background:var(--c-navy); color:#fff; }

  /* ---------- Cards ---------- */
  .card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-3); overflow:clip; transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2), border-color var(--dur-2); display:flex; flex-direction:column; }
  .card.interactive:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--c-line-strong); }
  .card-media{ position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,var(--c-surface-3),var(--c-surface-2)); display:grid; place-items:center; overflow:clip; }
  .card-media img{ inline-size:100%; block-size:100%; object-fit:cover; }
  .card-body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
  .card-body h3,.card-body h4{ font-size:var(--fs-600); }
  .card-kicker{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:var(--ink-3); }
  .card-foot{ margin-block-start:auto; padding-block-start:var(--sp-3); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
  .card-media .badge{ position:absolute; inset-block-start:var(--sp-3); inset-inline-start:var(--sp-3); }
  .card-media .badge.tr{ inset-inline-start:auto; inset-inline-end:var(--sp-3); }

  /* product card */
  .p-card .card-media{ background:#fff; aspect-ratio:1/1; }
  .p-card .card-media .ph{ inline-size:100%; block-size:100%; }
  .p-card .code{ font-family:var(--font-mono); font-size:.78rem; color:var(--brand-strong); font-weight:600; }
  .p-card .card-title{ font-family:var(--font-heading); font-weight:700; color:var(--ink-1); font-size:var(--fs-500); line-height:1.3; }
  .p-card .chips{ display:flex; flex-wrap:wrap; gap:.3rem; }
  .chip{ font-size:.7rem; padding:.2em .55em; border-radius:var(--r-1); background:var(--c-surface-2); border:1px solid var(--c-line); color:var(--ink-3); }
  .p-card .actions{ display:flex; gap:.5rem; }

  /* ---------- Placeholder media (no product photo yet) ---------- */
  .ph{ display:grid; place-items:center; background:
      radial-gradient(circle at 30% 25%, rgba(15,117,188,.10), transparent 55%),
      radial-gradient(circle at 75% 80%, rgba(16,168,152,.10), transparent 55%),
      var(--c-surface-2); color:var(--brand); position:relative; }
  .ph svg{ inline-size:44%; block-size:44%; opacity:.55; }
  .ph .ph-label{ position:absolute; inset-block-end:8px; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }

  /* ---------- Utility bar ---------- */
  .utilbar{ background:var(--c-navy); color:var(--ink-inv-2); font-size:var(--fs-300); }
  .utilbar .wrap-wide{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-block-size:38px; }
  .utilbar a{ color:var(--ink-inv-2); display:inline-flex; align-items:center; gap:.4em; padding:.3em 0; }
  .utilbar a:hover{ color:#fff; }
  .utilbar .u-left{ display:flex; gap:var(--sp-4); align-items:center; }
  .utilbar .u-right{ display:flex; gap:var(--sp-4); align-items:center; }
  .utilbar .dot{ color:var(--c-teal); }
  @media (max-width:900px){ .utilbar{ display:none; } }

  /* ---------- Header ---------- */
  .site-header{ position:sticky; inset-block-start:0; z-index:200; background:rgba(255,255,255,.96); backdrop-filter:saturate(140%) blur(8px); border-block-end:1px solid var(--c-line); }
  .header-main{ display:flex; align-items:center; gap:var(--sp-5); min-block-size:74px; }
  .brand-logo{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }
  .brand-logo img{ block-size:44px; inline-size:auto; }
  .brand-logo .bl-text{ display:flex; flex-direction:column; line-height:1; }
  .brand-logo .bl-name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--c-navy); letter-spacing:.02em; }
  .brand-logo .bl-sub{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
  .primary-nav{ display:flex; align-items:center; gap:.2rem; margin-inline-start:auto; }
  .primary-nav > li > a, .primary-nav > li > button{ display:inline-flex; align-items:center; gap:.35em; padding:.7em .85em; font-family:var(--font-heading); font-weight:600; font-size:.98rem; color:var(--ink-1); border-radius:var(--r-2); }
  .primary-nav > li > a:hover, .primary-nav > li > button:hover, .primary-nav > li.open > button{ background:var(--c-surface-2); color:var(--brand-strong); }
  .primary-nav .caret{ inline-size:.7em; block-size:.7em; transition:transform var(--dur-2); }
  .primary-nav li.open .caret{ transform:rotate(180deg); }
  .header-actions{ display:flex; align-items:center; gap:.4rem; }
  .icon-btn{ inline-size:46px; block-size:46px; display:grid; place-items:center; border-radius:var(--r-2); color:var(--ink-1); position:relative; }
  .icon-btn:hover{ background:var(--c-surface-2); color:var(--brand); }
  .icon-btn svg{ inline-size:22px; block-size:22px; }
  .quote-count{ position:absolute; inset-block-start:4px; inset-inline-end:4px; min-inline-size:18px; block-size:18px; padding:0 4px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:700; border-radius:var(--r-pill); display:grid; place-items:center; }
  .quote-count:empty, .quote-count[data-count="0"]{ display:none; }
  .nav-cta{ margin-inline-start:.3rem; }
  .burger{ display:none; }
  @media (max-width:1100px){ .primary-nav{ display:none; } .burger{ display:grid; } .nav-cta{ display:none; } }
  @media (max-width:900px){ .header-main{ min-block-size:60px; gap:var(--sp-3); } .brand-logo img{ block-size:36px; } .brand-logo .bl-sub{ display:none; } }

  /* ---------- Mega menu ---------- */
  .mega{ position:absolute; inset-inline:0; inset-block-start:100%; background:#fff; border-block-start:1px solid var(--c-line); box-shadow:var(--sh-3); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur-2), transform var(--dur-2), visibility var(--dur-2); }
  .has-mega.open .mega{ opacity:1; visibility:visible; transform:none; }
  .mega-inner{ display:grid; grid-template-columns:1.1fr 1.1fr 1.1fr .9fr; gap:var(--sp-6); padding-block:var(--sp-6); }
  .mega-col h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-family:var(--font-display); margin-block-end:var(--sp-3); padding-block-end:var(--sp-2); border-block-end:1px solid var(--c-line); }
  .mega-col li a{ display:flex; align-items:center; gap:.6rem; padding:.5em .6em; border-radius:var(--r-2); color:var(--ink-2); font-weight:500; font-size:.95rem; }
  .mega-col li a:hover{ background:var(--c-surface-2); color:var(--brand-strong); }
  .mega-col li a .mi{ inline-size:34px; block-size:34px; border-radius:var(--r-1); background:var(--c-surface-3); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
  .mega-col li a .mi svg{ inline-size:18px; block-size:18px; }
  .mega-feature{ background:linear-gradient(160deg,var(--c-navy),var(--c-surface-navy-2)); color:#fff; border-radius:var(--r-3); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
  .mega-feature h4{ color:#fff; border:0; font-family:var(--font-heading); font-size:var(--fs-600); text-transform:none; letter-spacing:0; }
  .mega-feature p{ color:var(--ink-inv-2); font-size:.9rem; }

  /* ---------- Hero ---------- */
  .hero{ position:relative; background:linear-gradient(155deg,#06184C 0%, #0B2E7A 55%, #0F75BC 130%); color:#fff; overflow:clip; }
  .hero::after{ content:""; position:absolute; inset-block-start:-20%; inset-inline-end:-10%; inline-size:520px; block-size:520px;
    background:conic-gradient(from 210deg at 50% 50%, rgba(191,30,46,.5), rgba(16,168,152,.4), transparent 60%); filter:blur(20px); opacity:.4; pointer-events:none; }
  .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-7); align-items:center; padding-block:var(--sp-9) var(--sp-8); position:relative; z-index:1; }
  .hero h1{ color:#fff; margin-block:var(--sp-4); }
  .hero h1 .hl-blue{ color:#8FD0FF; } .hero h1 .hl-red{ color:#FF8A96; }
  .hero .lede{ font-size:var(--fs-600); color:var(--ink-inv-2); max-inline-size:52ch; }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-block-start:var(--sp-5); }
  .hero-search{ margin-block-start:var(--sp-5); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-3); padding:var(--sp-2); display:flex; gap:.5rem; }
  .hero-search input{ flex:1; background:#fff; border:0; border-radius:var(--r-2); padding:.85em 1em; color:var(--ink-1); }
  .hero-panel{ position:relative; }
  .hero-statcard{ background:rgba(255,255,255,.08); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-4); padding:var(--sp-5); display:grid; gap:var(--sp-4); }
  .hero-stat{ display:flex; align-items:center; gap:var(--sp-3); }
  .hero-stat .hs-ico{ inline-size:46px; block-size:46px; border-radius:var(--r-2); background:rgba(255,255,255,.12); color:#8FD0FF; display:grid; place-items:center; flex-shrink:0; }
  .hero-stat .hs-ico svg{ inline-size:24px; block-size:24px; }
  .hero-stat strong{ color:#fff; display:block; font-family:var(--font-heading); font-size:var(--fs-500); }
  .hero-stat span{ font-size:.85rem; color:var(--ink-inv-2); }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; padding-block:var(--sp-7) var(--sp-7); gap:var(--sp-5);} .hero-panel{ order:-1; } }

  /* ---------- Trust strip ---------- */
  .trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
  .trust-item{ display:flex; gap:var(--sp-3); align-items:flex-start; }
  .trust-item .ti-ico{ inline-size:44px; block-size:44px; border-radius:var(--r-2); background:var(--c-surface-3); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
  .trust-item strong{ display:block; color:var(--ink-1); font-family:var(--font-heading); font-size:var(--fs-500); }
  .trust-item span{ font-size:.88rem; color:var(--ink-3); }
  @media (max-width:820px){ .trust-strip{ grid-template-columns:1fr 1fr; } }

  /* ---------- Division cards ---------- */
  .division-card{ position:relative; padding:var(--sp-6); border-radius:var(--r-4); overflow:clip; color:#fff; min-block-size:280px; display:flex; flex-direction:column; justify-content:flex-end; gap:var(--sp-2); isolation:isolate; }
  .division-card.d-blue{ background:linear-gradient(160deg,#0B3A8C,#0F75BC); }
  .division-card.d-navy{ background:linear-gradient(160deg,#061B55,#123)}
  .division-card.d-navy{ background:linear-gradient(160deg,#061B55,#0A2A6E); }
  .division-card.d-teal{ background:linear-gradient(160deg,#0B8577,#10A898); }
  .division-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 10%, rgba(255,255,255,.18), transparent 45%); z-index:-1; }
  .division-card h3{ color:#fff; font-size:var(--fs-700); }
  .division-card p{ color:rgba(255,255,255,.88); }
  .division-card .dc-tag{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.75); }
  .division-card .dc-link{ margin-block-start:var(--sp-3); font-weight:700; display:inline-flex; align-items:center; gap:.4em; }
  .division-card:hover .dc-link{ gap:.7em; }

  /* ---------- Category pills grid ---------- */
  .cat-tile{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-3); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; transition:transform var(--dur-2),box-shadow var(--dur-2),border-color var(--dur-2); }
  .cat-tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--brand); }
  .cat-tile .ct-ico{ inline-size:50px; block-size:50px; border-radius:var(--r-2); background:var(--c-surface-3); color:var(--brand); display:grid; place-items:center; }
  .cat-tile .ct-ico svg{ inline-size:26px; block-size:26px; }
  .cat-tile h4{ font-size:var(--fs-500); }
  .cat-tile p{ font-size:.85rem; color:var(--ink-3); }
  .cat-tile .ct-count{ font-size:.72rem; font-weight:700; color:var(--verified-deep); text-transform:uppercase; letter-spacing:.05em; }

  /* ---------- Steps ---------- */
  .steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
  .step{ position:relative; padding-block-start:var(--sp-5); }
  .step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--brand); opacity:.35; line-height:1; }
  .step h4{ margin-block:var(--sp-2); }
  .step p{ font-size:.9rem; color:var(--ink-3); }
  @media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }

  /* ---------- Accordion ---------- */
  .accordion{ border:1px solid var(--c-line); border-radius:var(--r-3); overflow:clip; background:#fff; }
  .acc-item + .acc-item{ border-block-start:1px solid var(--c-line); }
  .acc-trigger{ inline-size:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); text-align:start; font-family:var(--font-heading); font-weight:600; font-size:var(--fs-500); color:var(--ink-1); }
  .acc-trigger:hover{ background:var(--c-surface-2); }
  .acc-trigger .acc-ico{ flex-shrink:0; inline-size:24px; block-size:24px; border-radius:var(--r-pill); border:2px solid var(--c-line-strong); display:grid; place-items:center; transition:transform var(--dur-2),border-color var(--dur-2); position:relative; }
  .acc-trigger .acc-ico::before,.acc-trigger .acc-ico::after{ content:""; position:absolute; background:var(--brand); border-radius:2px; }
  .acc-trigger .acc-ico::before{ inline-size:11px; block-size:2px; } .acc-trigger .acc-ico::after{ inline-size:2px; block-size:11px; transition:transform var(--dur-2); }
  .acc-item[open] .acc-ico::after,.acc-trigger[aria-expanded="true"] .acc-ico::after{ transform:scaleY(0); }
  .acc-panel{ padding:0 var(--sp-5) var(--sp-5); color:var(--ink-2); }
  .acc-panel p{ font-size:.95rem; }

  /* ---------- Tabs ---------- */
  .tabs-nav{ display:flex; flex-wrap:wrap; gap:.3rem; border-block-end:2px solid var(--c-line); margin-block-end:var(--sp-5); }
  .tab-btn{ padding:.7em 1.1em; font-family:var(--font-heading); font-weight:600; color:var(--ink-3); border-block-end:3px solid transparent; margin-block-end:-2px; border-radius:var(--r-1) var(--r-1) 0 0; }
  .tab-btn[aria-selected="true"]{ color:var(--brand-strong); border-block-end-color:var(--accent); }
  .tab-btn:hover{ color:var(--brand); }
  .tab-panel[hidden]{ display:none; }

  /* ---------- Spec table ---------- */
  .spec-table-wrap{ overflow-x:auto; border:1px solid var(--c-line); border-radius:var(--r-3); }
  .spec-table{ min-inline-size:100%; }
  .spec-table th,.spec-table td{ text-align:start; padding:.8em 1.1em; border-block-end:1px solid var(--c-line); font-size:.95rem; vertical-align:top; }
  .spec-table tr:last-child th,.spec-table tr:last-child td{ border-block-end:0; }
  .spec-table th{ inline-size:38%; color:var(--ink-1); font-family:var(--font-heading); background:var(--c-surface-2); font-weight:600; }
  .spec-table tbody tr:nth-child(even) td{ background:var(--c-surface-2); }

  /* ---------- Alerts / notes ---------- */
  .note{ border:1px solid var(--c-line); border-inline-start:4px solid var(--brand); border-radius:var(--r-2); padding:var(--sp-4); background:var(--c-surface-2); font-size:.92rem; display:flex; gap:var(--sp-3); }
  .note .n-ico{ flex-shrink:0; color:var(--brand); } .note .n-ico svg{ inline-size:22px; block-size:22px; }
  .note-info{ border-inline-start-color:var(--info); background:var(--info-bg); } .note-info .n-ico{ color:var(--info); }
  .note-warn{ border-inline-start-color:var(--warn); background:var(--warn-bg); } .note-warn .n-ico{ color:var(--warn); }
  .note-verified{ border-inline-start-color:var(--ok); background:var(--ok-bg); } .note-verified .n-ico{ color:var(--ok); }

  /* ---------- Breadcrumbs ---------- */
  .crumbs{ font-size:.85rem; color:var(--ink-3); padding-block:var(--sp-3); display:flex; flex-wrap:wrap; gap:.4em; align-items:center; }
  .crumbs a:hover{ color:var(--brand); text-decoration:underline; }
  .crumbs .sep{ color:var(--c-line-strong); }
  .crumbs [aria-current]{ color:var(--ink-1); font-weight:600; }

  /* ---------- Forms ---------- */
  .field{ display:flex; flex-direction:column; gap:.4rem; margin-block-end:var(--sp-4); }
  .field label{ font-weight:600; color:var(--ink-1); font-size:.92rem; }
  .field .req{ color:var(--accent); }
  .field .hint{ font-size:.8rem; color:var(--ink-3); }
  .input,.select,.textarea{ inline-size:100%; padding:.8em 1em; border:1.5px solid var(--c-line-strong); border-radius:var(--r-2); background:#fff; color:var(--ink-1); transition:border-color var(--dur-2),box-shadow var(--dur-2); min-block-size:48px; }
  .textarea{ min-block-size:120px; resize:vertical; }
  .input:focus,.select:focus,.textarea:focus{ border-color:var(--brand); box-shadow:var(--focus); outline:none; }
  .field.err .input,.field.err .select,.field.err .textarea{ border-color:var(--danger); }
  .field .err-msg{ color:var(--danger); font-size:.82rem; font-weight:600; display:none; }
  .field.err .err-msg{ display:block; }
  .checkline{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; }
  .checkline input{ margin-block-start:.2em; inline-size:20px; block-size:20px; flex-shrink:0; }

  /* file uploader */
  .uploader{ border:2px dashed var(--c-line-strong); border-radius:var(--r-3); padding:var(--sp-6); text-align:center; background:var(--c-surface-2); transition:border-color var(--dur-2),background var(--dur-2); }
  .uploader.drag{ border-color:var(--brand); background:var(--info-bg); }
  .uploader svg{ inline-size:40px; block-size:40px; color:var(--brand); margin-inline:auto; margin-block-end:var(--sp-2); }
  .uploaded-list{ margin-block-start:var(--sp-3); display:flex; flex-direction:column; gap:.5rem; }
  .uploaded-item{ display:flex; align-items:center; gap:.6rem; padding:.6em .8em; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-2); font-size:.88rem; }
  .uploaded-item .ui-rm{ margin-inline-start:auto; color:var(--danger); }

  /* ---------- Quote tray ---------- */
  .qtray{ position:fixed; inset-block-end:0; inset-inline-end:0; z-index:180; }
  /* ---------- Chips / filters ---------- */
  .filter-chip{ display:inline-flex; align-items:center; gap:.4em; padding:.5em .9em; border-radius:var(--r-pill); border:1.5px solid var(--c-line-strong); background:#fff; font-size:.85rem; font-weight:600; color:var(--ink-2); }
  .filter-chip[aria-pressed="true"]{ background:var(--brand); color:#fff; border-color:var(--brand); }
  .filter-chip:hover{ border-color:var(--brand); }
  .active-filter{ background:var(--info-bg); color:var(--brand-strong); border:1px solid #BcD6F0; padding:.35em .7em .35em .9em; border-radius:var(--r-pill); font-size:.8rem; display:inline-flex; align-items:center; gap:.4em; }
  .active-filter button{ inline-size:18px; block-size:18px; border-radius:50%; display:grid; place-items:center; background:rgba(15,117,188,.15); color:var(--brand-strong); }

  /* ---------- Footer ---------- */
  .site-footer{ background:var(--c-navy); color:var(--ink-inv-2); padding-block:var(--sp-8) var(--sp-5); margin-block-start:var(--sp-8); }
  .footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:var(--sp-6); }
  .site-footer h5{ color:#fff; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; margin-block-end:var(--sp-3); }
  .site-footer a{ color:var(--ink-inv-2); font-size:.92rem; display:inline-block; padding-block:.28em; }
  .site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
  .footer-brand .brand-logo .bl-name{ color:#fff; } .footer-brand .brand-logo .bl-sub{ color:var(--ink-inv-2); }
  .footer-brand p{ font-size:.9rem; color:var(--ink-inv-2); max-inline-size:38ch; }
  .footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; margin-block-end:.5rem; font-size:.9rem; }
  .footer-contact svg{ inline-size:18px; block-size:18px; color:var(--c-teal); flex-shrink:0; margin-block-start:.15em; }
  .footer-social{ display:flex; gap:.6rem; margin-block-start:var(--sp-3); }
  .footer-social a{ inline-size:40px; block-size:40px; border-radius:var(--r-2); background:rgba(255,255,255,.08); display:grid; place-items:center; }
  .footer-social a:hover{ background:rgba(255,255,255,.16); }
  .footer-social svg{ inline-size:20px; block-size:20px; color:#fff; }
  .footer-bottom{ border-block-start:1px solid rgba(255,255,255,.12); margin-block-start:var(--sp-6); padding-block-start:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between; font-size:.82rem; }
  .footer-bottom .fb-links{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
  @media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
  @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

  /* ---------- Empty / skeleton / offline ---------- */
  .empty-state{ text-align:center; padding:var(--sp-8) var(--sp-4); max-inline-size:52ch; margin-inline:auto; }
  .empty-state .es-ico{ inline-size:72px; block-size:72px; border-radius:var(--r-4); background:var(--c-surface-3); color:var(--brand); display:grid; place-items:center; margin-inline:auto; margin-block-end:var(--sp-4); }
  .empty-state .es-ico svg{ inline-size:36px; block-size:36px; }
  .skeleton{ background:linear-gradient(90deg,var(--c-surface-2) 25%,var(--c-grey) 37%,var(--c-surface-2) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:var(--r-2); }
  @keyframes sk{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
  @media (prefers-reduced-motion: reduce){ .skeleton{ animation:none; } }

  /* ---------- CTA panel ---------- */
  .cta-panel{ background:linear-gradient(150deg,#061B55,#0F3A8F 70%,#0F75BC); color:#fff; border-radius:var(--r-4); padding:var(--sp-8) var(--sp-7); text-align:center; position:relative; overflow:clip; }
  .cta-panel h2{ color:#fff; } .cta-panel p{ color:var(--ink-inv-2); max-inline-size:56ch; margin-inline:auto; }
  .cta-panel .cta-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-block-start:var(--sp-5); }

  /* ---------- Pattern band ---------- */
  .diag-accent{ position:relative; }
  .diag-accent::before{ content:""; position:absolute; inset-block-start:0; inset-inline-end:0; inline-size:120px; block-size:120px; background:
    linear-gradient(135deg, transparent 45%, var(--c-blue) 45% 55%, transparent 55%),
    linear-gradient(135deg, transparent 60%, var(--c-red) 60% 70%, transparent 70%); opacity:.5; pointer-events:none; }

  /* ---------- Toast ---------- */
  .toast-region{ position:fixed; inset-block-end:calc(var(--bottomnav-h) + 12px); inset-inline:0; display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:400; pointer-events:none; padding-inline:12px; }
  .toast{ background:var(--c-navy); color:#fff; padding:.8em 1.2em; border-radius:var(--r-pill); box-shadow:var(--sh-3); font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.6em; pointer-events:auto; max-inline-size:92vw; }
  .toast .t-ico{ color:var(--c-teal); display:grid; place-items:center; }
  @media (min-width:1101px){ .toast-region{ inset-block-end:20px; inset-inline-end:20px; inset-inline-start:auto; align-items:flex-end; } }
}

@layer utilities {
  .text-center{ text-align:center; } .text-muted{ color:var(--ink-3); }
  .mt-0{ margin-block-start:0; } .mt-4{ margin-block-start:var(--sp-4);} .mt-6{ margin-block-start:var(--sp-6);}
  .mb-4{ margin-block-end:var(--sp-4);} .mb-6{ margin-block-end:var(--sp-6);}
  .hide-mobile{ } .only-mobile{ display:none; }
  @media (max-width:900px){ .hide-mobile{ display:none!important; } .only-mobile{ display:revert; } }
  .flow > * + *{ margin-block-start:var(--sp-4); }
  .lead{ font-size:var(--fs-600); color:var(--ink-2); }
  .pill-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
  .tick-list li{ display:flex; gap:.6rem; align-items:flex-start; margin-block-end:.6rem; }
  .tick-list li::before{ content:""; inline-size:20px; block-size:20px; flex-shrink:0; border-radius:50%; background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B8577' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; margin-block-start:.15em; }
  .cross-list li{ display:flex; gap:.6rem; align-items:flex-start; margin-block-end:.6rem; }
  .cross-list li::before{ content:""; inline-size:20px; block-size:20px; flex-shrink:0; border-radius:50%; background:var(--danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF1E2E' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat; margin-block-start:.15em; }
}