/* P10-SITE-1659 | Global visual evolution.
   Institutional clarity and calm premium-product craft; no third-party marks or assets. */
:root {
  --fnb-blue-950: #102a43;
  --fnb-blue-800: #164f7a;
  --fnb-blue-700: #1565a8;
  --fnb-blue-100: #e7f0f8;
  --fnb-blue-050: #f3f8fc;
  --fnb-ink: #102a43;
  --fnb-muted: #526a80;
  --fnb-line: #d8e2ec;
  --fnb-line-strong: #b7c8d7;
  --fnb-canvas: #f4f7fb;
  --fnb-surface: #ffffff;
  --fnb-surface-muted: #edf3f8;
  --fnb-radius: 14px;
  --fnb-radius-small: 10px;
  --fnb-shadow: 0 18px 52px rgba(16, 42, 67, .10);
  --fnb-shadow-soft: 0 8px 22px rgba(16, 42, 67, .07);
  --teal: var(--fnb-blue-700);
  --teal-dark: var(--fnb-blue-800);
  --teal-light: var(--fnb-blue-100);
  --blue: var(--fnb-blue-700);
  --bg: var(--fnb-canvas);
  --surface: var(--fnb-surface);
  --text: var(--fnb-ink);
  --muted: var(--fnb-muted);
  --border: var(--fnb-line);
}
html { background: var(--fnb-canvas); color-scheme: light; }
body {
  background: radial-gradient(circle at 88% -12%, rgba(21, 101, 168, .12), transparent 30rem), linear-gradient(180deg, #fbfdff 0, var(--fnb-canvas) 36rem);
  color: var(--fnb-ink);
  font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  letter-spacing: .003em;
}
::selection { background: var(--fnb-blue-100); color: var(--fnb-blue-950); }
a { text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(21, 101, 168, .48); outline-offset: 3px; }
.site-header {
  min-height: 72px;
  background: rgba(252, 253, 255, .92);
  border-top: 0;
  border-bottom: 1px solid rgba(184, 200, 215, .78);
  box-shadow: 0 8px 26px rgba(16, 42, 67, .05);
  backdrop-filter: blur(20px) saturate(135%);
}
.site-header .container { min-height: 72px; }
.brand { gap: 12px; }
.brand-mark { border-radius: 8px; box-shadow: 0 5px 14px rgba(21, 101, 168, .16); }
.brand-name { color: var(--fnb-blue-950); letter-spacing: -.025em; }
.brand-tagline { color: var(--fnb-muted); letter-spacing: .02em; }
.site-nav a, .site-nav button { border-radius: 9px; color: #35526c; font-weight: 650; letter-spacing: .005em; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav .active, .site-nav a[aria-current="page"] { color: var(--fnb-blue-800); background: var(--fnb-blue-050); }
.site-nav .nav-cta, .site-nav a.nav-cta { background: var(--fnb-blue-700); border-color: var(--fnb-blue-700); color: #fff; box-shadow: 0 7px 17px rgba(21, 101, 168, .18); }
.site-nav .nav-cta:hover, .site-nav a.nav-cta:hover { background: var(--fnb-blue-800); color: #fff; }
.button, button, input[type="submit"], .btn, .cta-button { border-radius: var(--fnb-radius-small); font-weight: 700; letter-spacing: .01em; box-shadow: 0 5px 14px rgba(16, 42, 67, .08); }
.button-primary, .btn-primary, .hero .button, .cta-strip .button, .hero-actions .button:first-child { background: var(--fnb-blue-700); border-color: var(--fnb-blue-700); color: #fff; }
.button-primary:hover, .btn-primary:hover, .hero .button:hover, .cta-strip .button:hover, .hero-actions .button:first-child:hover { background: var(--fnb-blue-800); border-color: var(--fnb-blue-800); color: #fff; transform: translateY(-1px); }
.button-secondary, .btn-secondary, .hero-actions .button:not(:first-child) { background: rgba(255, 255, 255, .76); border-color: var(--fnb-line-strong); color: var(--fnb-blue-800); }
.hero, .page-hero, .detail-hero, .product-hero, .knowledge-hero, .oem-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--fnb-line);
  background: linear-gradient(118deg, rgba(255, 255, 255, .96), rgba(243, 248, 252, .90)), var(--fnb-surface-muted);
}
.hero::after, .page-hero::after, .detail-hero::after, .product-hero::after, .knowledge-hero::after, .oem-hero::after {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  right: -18rem;
  top: -19rem;
  border: 1px solid rgba(21, 101, 168, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 4.5rem rgba(21, 101, 168, .035), 0 0 0 9rem rgba(21, 101, 168, .02);
  pointer-events: none;
}
.hero > *, .page-hero > *, .detail-hero > *, .product-hero > *, .knowledge-hero > *, .oem-hero > * { position: relative; z-index: 1; }
.hero h1, .page-hero h1, .detail-hero h1, .product-hero h1, .knowledge-hero h1, .oem-hero h1 { color: var(--fnb-blue-950); letter-spacing: -.045em; line-height: 1.08; max-width: 18ch; }
.hero p, .page-hero p, .detail-hero p, .product-hero p, .knowledge-hero p, .oem-hero p { color: var(--fnb-muted); max-width: 64ch; }
main section { position: relative; }
.section-title, .section-heading, .content-section h2, .article-content h2, .product-detail h2 { color: var(--fnb-blue-950); letter-spacing: -.028em; }
.section-kicker, .eyebrow, .overline, .breadcrumb, .breadcrumbs { color: var(--fnb-blue-800); font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.card, .product-card, .category-card, .article-card, .knowledge-card, .info-card, .feature-card, .service-card, .stat-card, .content-card, .product-info-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--fnb-line);
  border-radius: var(--fnb-radius);
  box-shadow: var(--fnb-shadow-soft);
}
.product-card, .category-card, .article-card, .knowledge-card, .feature-card, .service-card { overflow: hidden; }
.product-card:hover, .category-card:hover, .article-card:hover, .knowledge-card:hover, .feature-card:hover, .service-card:hover { border-color: rgba(21, 101, 168, .42); box-shadow: var(--fnb-shadow); transform: translateY(-3px); }
.product-card img, .category-card img, .article-card img, .knowledge-card img, .feature-card img { transition: transform .35s ease; }
.product-card:hover img, .category-card:hover img, .article-card:hover img, .knowledge-card:hover img, .feature-card:hover img { transform: scale(1.025); }
.product-card h2, .product-card h3, .category-card h2, .category-card h3, .article-card h2, .article-card h3, .knowledge-card h2, .knowledge-card h3 { color: var(--fnb-blue-950); letter-spacing: -.016em; }
.product-card p, .category-card p, .article-card p, .knowledge-card p { color: var(--fnb-muted); }
.category-rail, .filters-panel, .filter-bar, .directory-controls, .search-panel, .product-filters { background: rgba(255, 255, 255, .78); border: 1px solid var(--fnb-line); border-radius: var(--fnb-radius); box-shadow: var(--fnb-shadow-soft); backdrop-filter: blur(16px); }
.category-rail a, .filter-button, .filter-chip, .product-filter button, .directory-filter button { border-radius: 9px; border-color: transparent; color: #35526c; font-weight: 700; }
.category-rail a:hover, .category-rail a[aria-current="page"], .filter-button:hover, .filter-button.active, .filter-chip.active, .product-filter button.active, .directory-filter button.active { background: var(--fnb-blue-100); border-color: rgba(21, 101, 168, .28); color: var(--fnb-blue-800); }
input, select, textarea { background: rgba(255, 255, 255, .94); border-color: var(--fnb-line-strong); border-radius: var(--fnb-radius-small); color: var(--fnb-blue-950); box-shadow: inset 0 1px 1px rgba(16, 42, 67, .025); }
input:hover, select:hover, textarea:hover { border-color: rgba(21, 101, 168, .52); }
input:focus, select:focus, textarea:focus { border-color: var(--fnb-blue-700); box-shadow: 0 0 0 4px rgba(21, 101, 168, .13); }
.cta-strip, .cta-band, .knowledge-mid-cta-card, .oem-cta, .contact-cta { background: linear-gradient(125deg, var(--fnb-blue-950), #164f7a); border-radius: var(--fnb-radius); box-shadow: 0 20px 42px rgba(16, 42, 67, .20); }
.cta-strip h2, .cta-band h2, .knowledge-mid-cta-card h2, .oem-cta h2, .contact-cta h2 { color: #fff; }
.cta-strip p, .cta-band p, .knowledge-mid-cta-card p, .oem-cta p, .contact-cta p { color: #dbeaf5; }
.cta-strip .button, .cta-band .button, .knowledge-mid-cta-card .button, .oem-cta .button, .contact-cta .button { background: #fff; border-color: #fff; color: var(--fnb-blue-800); }
table { border-color: var(--fnb-line); border-radius: var(--fnb-radius-small); overflow: hidden; }
th { background: var(--fnb-blue-050); color: var(--fnb-blue-950); }
td, th { border-color: var(--fnb-line); }
blockquote { border-left-color: var(--fnb-blue-700); background: var(--fnb-blue-050); border-radius: 0 var(--fnb-radius-small) var(--fnb-radius-small) 0; }
.floating-whatsapp, .whatsapp-float { border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 12px 28px rgba(16, 42, 67, .24); }
.site-footer, footer { background: var(--fnb-blue-950); border-top: 4px solid var(--fnb-blue-700); color: #dbe7f1; }
.site-footer h2, .site-footer h3, .site-footer h4, footer h2, footer h3, footer h4 { color: #fff; }
.site-footer a, footer a { color: #eaf3fb; }
.site-footer a:hover, footer a:hover { color: #fff; }
@media (max-width: 980px) {
  .site-header, .site-header .container { min-height: 66px; }
  .site-nav { background: rgba(248, 251, 254, .98); box-shadow: 0 16px 34px rgba(16, 42, 67, .12); }
  .hero::after, .page-hero::after, .detail-hero::after, .product-hero::after, .knowledge-hero::after, .oem-hero::after { right: -23rem; top: -22rem; }
}
@media (max-width: 600px) {
  body { background: var(--fnb-canvas); }
  .hero h1, .page-hero h1, .detail-hero h1, .product-hero h1, .knowledge-hero h1, .oem-hero h1 { letter-spacing: -.035em; }
  .card, .product-card, .category-card, .article-card, .knowledge-card, .info-card, .feature-card, .service-card, .stat-card, .content-card, .product-info-card { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}