:root {
  --tfb-navy: #0d2d49;
  --tfb-blue: #1769aa;
  --tfb-teal: #0d8086;
  --tfb-orange: #ff8a34;
  --tfb-ink: #182b3a;
  --tfb-muted: #607789;
  --tfb-surface: #f3f7fa;
  --tfb-border: #dce5ed;
}

html { scroll-behavior: smooth; }
body { color: var(--tfb-ink); background: #fff; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--tfb-blue); }
img { max-width: 100%; object-fit: contain; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1100; padding: .75rem 1rem; background: #fff; color: var(--tfb-navy); }
.skip-link:focus { top: 1rem; }
.site-header { box-shadow: 0 3px 18px rgba(13, 45, 73, .12); }
.navbar { background: linear-gradient(115deg, var(--tfb-navy), #174d76); }
.navbar-brand { display: flex; align-items: center; gap: .65rem; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--tfb-orange); color: #18212a; font-size: .8rem; }
.site-search { display: flex; width: min(100%, 34rem); }
.site-search .form-control { border: 0; border-radius: .65rem 0 0 .65rem; }
.site-search .btn { border-radius: 0 .65rem .65rem 0; }
.btn-accent { background: var(--tfb-orange); border-color: var(--tfb-orange); color: #1f2933; font-weight: 700; }
.btn-accent:hover { background: #ff9d57; border-color: #ff9d57; color: #111820; }
.category-bar { background: #fff; }
.category-bar .nav-link { padding: .75rem 1rem; color: var(--tfb-ink); white-space: nowrap; font-size: .9rem; font-weight: 650; }
.category-bar .nav-link:hover { background: var(--tfb-orange); color: #18212a; border-color: transparent; box-shadow: none; outline: none; }
.category-bar .nav-link:focus-visible { background: var(--tfb-orange); color: #18212a; border-color: transparent; box-shadow: inset 0 0 0 3px #fff; outline: none; }
.category-bar .nav-link.active { background: var(--tfb-blue); color: #fff; }
.category-bar .nav-link.active:hover, .category-bar .nav-link.active:focus-visible { background: var(--tfb-orange); color: #18212a; }
.hero-section { background: linear-gradient(130deg, var(--tfb-navy), var(--tfb-blue) 60%, var(--tfb-teal)); color: #fff; }
.hero-section h1 { max-width: 14ch; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -.045em; }
.hero-section .lead { max-width: 45rem; color: #d9e8f4; }
.hero-panel { display: grid; align-content: center; gap: .4rem; min-height: 15rem; padding: 2.25rem; border: 1px solid rgba(255,255,255,.24); border-radius: 1.5rem; background: rgba(255,255,255,.1); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.hero-panel::before { content: "USB"; color: var(--tfb-orange); font-size: 3rem; font-weight: 900; letter-spacing: .15em; }
.hero-panel strong { font-size: 1.5rem; }
.hero-panel span { color: #d9e8f4; }
.eyebrow { margin-bottom: .55rem; color: var(--tfb-teal); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-section .eyebrow, .quote-banner .eyebrow { color: #67dde4; }
.section-heading { margin-bottom: 2rem; }
.section-heading h2 { font-weight: 800; letter-spacing: -.03em; }
.category-card { display: block; height: 100%; padding: 1rem; border: 1px solid var(--tfb-border); border-radius: 1rem; color: var(--tfb-ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.category-card:hover, .product-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(13,45,73,.12); }
.category-card img { width: 100%; aspect-ratio: 4 / 3; }
.category-card span { display: block; margin-top: .8rem; font-weight: 750; }
.product-card { border-color: var(--tfb-border); border-radius: 1rem; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.product-card-image { display: grid; place-items: center; min-height: 15rem; padding: 1rem; background: var(--tfb-surface); }
.product-card-image img { width: 100%; height: 14rem; }
.product-card .card-title a { color: var(--tfb-ink); text-decoration: none; }
.product-model, .result-count { color: var(--tfb-muted); font-size: .85rem; }
.catalog-sidebar { position: sticky; top: 9rem; padding: 1.25rem; border: 1px solid var(--tfb-border); border-radius: 1rem; background: #fff; }
.catalog-sidebar .list-group-item { border: 0; border-radius: .6rem; margin-block: .1rem; }
.catalog-sidebar .list-group-item.active { background: var(--tfb-blue); }
.product-main-image { display: grid; place-items: center; min-height: 30rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--tfb-surface); }
.product-main-image img { width: 100%; height: 30rem; }
.product-thumbnails { display: flex; gap: .75rem; overflow-x: auto; }
.product-thumbnails img { width: 6rem; height: 5rem; padding: .35rem; border: 1px solid var(--tfb-border); border-radius: .65rem; background: #fff; }
.option-summary { padding-block: 1rem; border-bottom: 1px solid var(--tfb-border); }
.option-chip { display: inline-block; margin: .5rem .35rem 0 0; padding: .35rem .65rem; border: 1px solid var(--tfb-border); border-radius: 999px; color: var(--tfb-muted); font-size: .82rem; }
.quote-notice { padding: 1.5rem; border: 1px solid #ffd2b0; border-radius: 1rem; background: #fff7f0; }
.quote-form, .selected-product, .contact-card { padding: 1.5rem; border: 1px solid var(--tfb-border); border-radius: 1rem; background: #fff; }
.search-results-section { background: linear-gradient(180deg, #f3f7fa, #fff); }
.mobile-nav { border-top: 1px solid rgba(255,255,255,.23); padding-top: .9rem; }
.mobile-nav-title { margin: 1rem 0 .3rem; color: #b9cad7; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mobile-nav-link { display: block; padding: .55rem .65rem; border-radius: .5rem; color: #fff; text-decoration: none; }
.mobile-nav-link:hover, .mobile-nav-link:focus-visible, .mobile-nav-link.active { background: rgba(255,255,255,.16); color: #fff; outline: none; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.content-body { line-height: 1.75; }
.content-body img { height: auto; border-radius: .75rem; }
.specification-table th { width: 35%; color: var(--tfb-muted); }
.quote-banner { background: var(--tfb-navy); color: #fff; }
.site-footer { background: #091d2c; color: #b9cad7; }
.site-footer hr { border-color: #365064; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { color: #d8e5ee; text-decoration: none; }
.site-footer .footer-attribution { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.site-footer .footer-attribution:hover { color: #67aee0; text-decoration: underline; }
.site-footer .footer-attribution:focus-visible { color: #fff; outline: 2px solid var(--tfb-orange); outline-offset: 3px; border-radius: .15rem; text-decoration: underline; }
.status-code { margin: 0; color: var(--tfb-orange); font-size: 5rem; font-weight: 900; }
.py-6 { padding-block: 7rem; }

@media (max-width: 991.98px) {
  .site-header { position: static !important; }
  .catalog-sidebar { position: static; }
  .product-main-image, .product-main-image img { min-height: 20rem; height: 20rem; }
  .category-card { height: auto; padding: .7rem; }
  .category-card img { aspect-ratio: 4 / 3; max-height: 8rem; }
  .category-card span { margin-top: .55rem; font-size: .9rem; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}