/* ==========================================================================
   BZTRONICS.COM - PRIMARY SITE STYLESHEET
   Authoritative / engineering-focused redesign
   --------------------------------------------------------------------------
   HOW TO EDIT THIS FILE
   1. Global colors and sizing are in SECTION 01 (:root variables).
   2. Header/navigation is SECTION 04.
   3. Hero areas are SECTION 05.
   4. Cards and content panels are SECTION 07.
   5. Product-specific styles are SECTION 09.
   6. Mobile / responsive rules are at the bottom in SECTION 16.

   The goal is to keep the site easy to maintain. Most visual changes can be
   made by editing only the variables below instead of hunting through HTML.
   ========================================================================== */

/* ==========================================================================
   SECTION 01 - DESIGN TOKENS / GLOBAL VARIABLES
   ========================================================================== */
:root {
  /* Brand colors */
  --navy-950: #07111f;
  --navy-900: #0a1728;
  --navy-850: #0d1d31;
  --navy-800: #10243c;
  --navy-700: #173451;
  --blue-600: #1d67a8;
  --blue-500: #2d83c6;
  --cyan-400: #63d4e8;
  --cyan-300: #92e6f2;
  --gold-500: #cda64a;
  --gold-400: #e4c66c;
  --gold-300: #efd98d;

  /* Neutral colors */
  --white: #ffffff;
  --paper: #f6f8fb;
  --paper-2: #eef3f8;
  --ink: #152235;
  --ink-soft: #44546a;
  --line: #d9e1eb;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Status / utility */
  --success: #18794e;
  --warning: #8a5b00;

  /* Layout */
  --content: 1180px;
  --content-narrow: 900px;
  --gutter: clamp(20px, 4vw, 46px);

  /* Corners and shadows */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 8px 24px rgba(7, 17, 31, 0.08);
  --shadow: 0 18px 50px rgba(7, 17, 31, 0.14);
  --shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.28);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ==========================================================================
   SECTION 02 - RESET / BASE ELEMENTS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--blue-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--navy-800);
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  color: var(--navy-950);
  background: var(--gold-300);
}

/* ==========================================================================
   SECTION 03 - TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0 0 0.72em;
  color: var(--navy-950);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2.45rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15rem; }

ul, ol { margin: 0 0 1.3rem; padding-left: 1.35rem; }
li + li { margin-top: 0.5rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  color: var(--blue-600);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 2px;
  content: "";
  background: var(--gold-500);
}

.lead {
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.7;
}

.kicker {
  color: var(--gold-400);
  font-weight: 760;
}

.small { font-size: 0.9rem; }
.muted { color: var(--ink-soft); }

/* ==========================================================================
   SECTION 04 - HEADER / PRIMARY NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  color: var(--white);
  background: rgba(7, 17, 31, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.nav-wrap {
  display: flex;
  width: min(var(--content), calc(100% - (var(--gutter) * 2)));
  min-height: 78px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  color: var(--white);
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: 900;
  place-items: center;
}

.brand-copy { line-height: 1.05; }
.brand-name { display: block; font-size: 1.2rem; font-weight: 860; letter-spacing: -0.03em; }
.brand-tag { display: block; margin-top: 0.28rem; color: #aebdd1; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.primary-nav a {
  padding: 0.72rem 0.82rem;
  color: #d9e3ef;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.primary-nav .nav-cta {
  margin-left: 0.4rem;
  color: var(--navy-950);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
}

.primary-nav .nav-cta:hover {
  color: var(--navy-950);
  background: var(--gold-300);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  cursor: pointer;
}

/* ==========================================================================
   SECTION 05 - HERO AREAS
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 22%, rgba(45, 131, 198, 0.28), transparent 32%),
    radial-gradient(circle at 16% 78%, rgba(205, 166, 74, 0.12), transparent 34%),
    linear-gradient(145deg, var(--navy-950), var(--navy-800));
}

.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(var(--content), calc(100% - (var(--gutter) * 2)));
  min-height: 610px;
  margin: 0 auto;
  padding: clamp(70px, 9vw, 118px) 0;
  align-items: center;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 6vw, 82px);
}

.hero h1,
.hero h2,
.hero h3 { color: var(--white); }

.hero .lead { color: #c7d5e6; }

.hero-visual {
  position: relative;
}

.hero-visual img,
.hero-visual svg {
  width: 100%;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.26));
}

.hero-actions {
  display: flex;
  margin-top: 1.8rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.page-hero .hero-inner {
  min-height: 390px;
  grid-template-columns: 1fr;
}

.page-hero h1 { max-width: 900px; font-size: clamp(2.5rem, 5vw, 4.3rem); }
.page-hero .lead { max-width: 830px; }

/* ==========================================================================
   SECTION 06 - BUTTONS / LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  min-height: 48px;
  padding: 0.78rem 1.12rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.94rem;
  font-weight: 780;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-primary { color: var(--navy-950); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); box-shadow: 0 10px 26px rgba(205,166,74,.2); }
.btn-primary:hover { color: var(--navy-950); background: #f3dd95; }
.btn-secondary { color: var(--white); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.btn-secondary:hover { color: var(--white); background: rgba(255,255,255,.12); }
.btn-blue { color: var(--white); background: var(--blue-600); }
.btn-blue:hover { color: var(--white); background: var(--navy-700); }

.text-link { font-weight: 760; text-decoration: none; }
.text-link::after { content: "  →"; }

/* ==========================================================================
   SECTION 07 - SECTIONS / CARDS / PANELS
   ========================================================================== */
.section { padding: clamp(68px, 8vw, 110px) 0; }
.section-tight { padding: clamp(44px, 6vw, 72px) 0; }
.section-white { background: var(--white); }
.section-navy { color: #d6e2ef; background: var(--navy-900); }
.section-navy h2, .section-navy h3, .section-navy h4 { color: var(--white); }

.container { width: min(var(--content), calc(100% - (var(--gutter) * 2))); margin: 0 auto; }
.container-narrow { width: min(var(--content-narrow), calc(100% - (var(--gutter) * 2))); margin: 0 auto; }

.section-head { max-width: 820px; margin-bottom: 2.4rem; }
.section-head.center { margin-right: auto; margin-left: auto; text-align: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }

.card {
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card h3 { margin-bottom: 0.5rem; font-size: 1.28rem; }
.card p:last-child { margin-bottom: 0; }

.dark-card {
  color: #cbd8e7;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--shadow-dark);
}
.dark-card h3, .dark-card h4 { color: var(--white); }

.authority-strip {
  position: relative;
  z-index: 2;
  margin-top: -30px;
}

.authority-grid {
  display: grid;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  grid-template-columns: repeat(4, 1fr);
}

.authority-item {
  padding: 1.4rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.authority-item:last-child { border-right: 0; }
.authority-value { display: block; color: var(--navy-950); font-size: 1.45rem; font-weight: 850; letter-spacing: -0.02em; }
.authority-label { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.notice {
  padding: 1.15rem 1.3rem;
  color: var(--ink-soft);
  background: #fffdf6;
  border: 1px solid #eadba9;
  border-left: 4px solid var(--gold-500);
  border-radius: 10px;
}

/* ==========================================================================
   SECTION 08 - HOME PAGE
   ========================================================================== */
.home-intro { max-width: 760px; }
.product-feature { display: grid; align-items: center; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 76px); }
.product-feature + .product-feature { margin-top: 5rem; }

.screen-stack { position: relative; min-height: 430px; }
.screen-card {
  position: absolute;
  overflow: hidden;
  width: min(90%, 560px);
  background: #0b1119;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  box-shadow: 0 26px 54px rgba(0,0,0,.32);
}
.screen-card img { width: 100%; }
.screen-card:nth-child(1) { top: 0; left: 0; }
.screen-card:nth-child(2) { right: 0; bottom: 0; }

/* ==========================================================================
   SECTION 09 - PRODUCTS PAGE
   ========================================================================== */
.product-hero {
  display: grid;
  padding: clamp(30px, 5vw, 54px);
  color: var(--white);
  background:
    radial-gradient(circle at 90% 12%, rgba(99,212,232,.2), transparent 30%),
    linear-gradient(145deg, #0b1829, #0a2440);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 58px);
  align-items: center;
}
.product-hero h2, .product-hero h3 { color: var(--white); }
.product-hero p { color: #cbd8e7; }

.product-badge {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: .4rem .7rem;
  color: #f5e6af;
  background: rgba(205,166,74,.12);
  border: 1px solid rgba(228,198,108,.32);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.screenshot {
  overflow: hidden;
  background: #0a0e13;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  box-shadow: 0 24px 45px rgba(0,0,0,.34);
}
.screenshot img { width: 100%; }

.app-card { display: grid; height: 100%; grid-template-rows: auto 1fr; }
.app-card .app-image { padding: 1rem; background: linear-gradient(180deg, #eef6fb, #e4edf6); border-radius: 12px; }
.app-card .app-image img { width: 100%; max-height: 360px; object-fit: contain; }
.app-card .app-copy { padding-top: 1.2rem; }

/* ==========================================================================
   SECTION 10 - TECHNOLOGY / INFO PAGE
   ========================================================================== */
.tech-list { display: grid; gap: 1rem; }
.tech-row { display: grid; padding: 1.4rem 0; border-bottom: 1px solid var(--line); grid-template-columns: 200px 1fr; gap: 2rem; }
.tech-row:last-child { border-bottom: 0; }
.tech-row h3 { margin: 0; font-size: 1.15rem; }

.article-block {
  padding: clamp(28px, 4vw, 46px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.article-block + .article-block { margin-top: 1.5rem; }

/* ==========================================================================
   SECTION 11 - SUPPORT PAGE
   ========================================================================== */
.support-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.support-nav { position: sticky; top: 105px; padding: 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.support-nav a { display: block; padding: .55rem .65rem; color: var(--ink-soft); border-radius: 8px; font-size: .9rem; font-weight: 650; text-decoration: none; }
.support-nav a:hover { color: var(--navy-950); background: var(--paper-2); }

.support-section { padding: 0 0 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line); }
.support-section:last-child { border-bottom: 0; }
.support-image { max-width: 760px; margin: 1.2rem 0 1.8rem; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.support-image img { width: 100%; }

.faq { border-top: 1px solid var(--line); }
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.faq-item h3 { margin-bottom: .55rem; font-size: 1.12rem; }

/* ==========================================================================
   SECTION 12 - ABOUT / TIMELINE
   ========================================================================== */
.timeline { position: relative; margin-top: 2rem; padding-left: 28px; }
.timeline::before { position: absolute; top: 6px; bottom: 0; left: 7px; width: 2px; content: ""; background: linear-gradient(var(--gold-500), var(--blue-500)); }
.timeline-item { position: relative; padding: 0 0 2rem 1.3rem; }
.timeline-item::before { position: absolute; top: 7px; left: -27px; width: 14px; height: 14px; content: ""; background: var(--white); border: 3px solid var(--gold-500); border-radius: 50%; }
.timeline-item h3 { margin-bottom: .3rem; font-size: 1.2rem; }

/* ==========================================================================
   SECTION 13 - NEWSLETTER / CTA PANELS
   ========================================================================== */
.newsletter {
  display: grid;
  padding: clamp(28px, 5vw, 50px);
  color: #dce7f3;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
  grid-template-columns: 1fr .9fr;
  gap: 2.5rem;
  align-items: center;
}
.newsletter h2 { color: var(--white); }
.newsletter-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .65rem; }
.newsletter-form input { min-width: 0; padding: .8rem .85rem; color: var(--white); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 9px; outline: none; }
.newsletter-form input::placeholder { color: #afbed0; }
.newsletter-form input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(99,212,232,.12); }
.newsletter-form button { cursor: pointer; }

/* ==========================================================================
   SECTION 14 - FOOTER
   ========================================================================== */
.site-footer { color: #adbed0; background: #050c15; border-top: 1px solid rgba(255,255,255,.08); }
.footer-main { display: grid; padding: 54px 0 34px; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
.footer-main h3, .footer-main h4 { color: var(--white); }
.footer-links a { display: block; width: fit-content; margin: .38rem 0; color: #bac9d8; text-decoration: none; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { display: flex; padding: 20px 0 28px; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .84rem; }

/* ==========================================================================
   SECTION 15 - UTILITIES / ACCESSIBILITY
   ========================================================================== */
.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: .6rem .9rem; color: var(--navy-950); background: var(--gold-300); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.hr { height: 1px; margin: 2.2rem 0; background: var(--line); border: 0; }

/* ==========================================================================
   SECTION 16 - RESPONSIVE / MOBILE RULES
   ========================================================================== */
@media (max-width: 980px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .primary-nav {
    position: absolute;
    top: 78px;
    right: var(--gutter);
    left: var(--gutter);
    display: none;
    padding: .8rem;
    background: var(--navy-950);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: var(--shadow-dark);
    flex-direction: column;
    align-items: stretch;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav .nav-cta { margin-left: 0; text-align: center; }
  .hero-inner, .product-feature, .product-hero, .newsletter { grid-template-columns: 1fr; }
  .hero-inner { min-height: auto; }
  .hero-visual { max-width: 650px; }
  .authority-grid { grid-template-columns: repeat(2, 1fr); }
  .authority-item:nth-child(2) { border-right: 0; }
  .authority-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .support-layout { grid-template-columns: 1fr; }
  .support-nav { position: static; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .brand-tag { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .authority-grid { grid-template-columns: 1fr; }
  .authority-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .authority-item:last-child { border-bottom: 0; }
  .screen-stack { min-height: 330px; }
  .newsletter-form { grid-template-columns: 1fr; }
  .tech-row { grid-template-columns: 1fr; gap: .55rem; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* Reduced motion respects user accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   SECTION 17 - ORIGINAL BZTRONICS CONTENT COMPATIBILITY
   --------------------------------------------------------------------------
   The final redesign deliberately keeps the original page copy and working
   forms from the supplied site. These rules make that existing markup look
   native inside the new design without forcing the old Bootstrap stylesheet
   to remain loaded.

   IMPORTANT MAINTENANCE NOTE:
   If you want to change the appearance of the imported Support, About,
   Contact, Login, or original Home content, start here.
   ========================================================================== */

/* --- Shared page banner -------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7,17,31,.98), rgba(10,23,40,.91)),
    url("../images/frequency-engineering.svg") right center / min(760px, 70vw) auto no-repeat,
    var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.page-hero-inner {
  display: flex;
  min-height: 230px;
  padding-top: 56px;
  padding-bottom: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.page-hero-eyebrow { color: var(--cyan-300); }
.page-label {
  display: block;
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.page-hero-tag {
  margin: 0;
  color: var(--gold-300);
  font-size: 1rem;
  font-style: italic;
  font-weight: 750;
  white-space: nowrap;
}

/* --- Imported content area --------------------------------------------- */
.legacy-content > section:not(.authority-section):not(.products-intro):not(.flagship-section):not(.zx-products) {
  padding: clamp(28px, 5vw, 62px) 0;
}
.legacy-content > section:nth-of-type(even):not(.authority-section):not(.flagship-section):not(.zx-products) {
  background: var(--white);
}
.legacy-content .container {
  width: min(var(--content), calc(100% - (var(--gutter) * 2)));
  margin-right: auto;
  margin-left: auto;
}
.legacy-content .container .container {
  width: 100%;
}
.legacy-content .mb-4 { margin-bottom: 1.5rem; }
.legacy-content .text-center,
.legacy-content [align="center"] { text-align: center; }
.legacy-content .text-dark,
.legacy-content [style*="color: #000000"],
.legacy-content [style*="color: rgba(0,0,0"] { color: var(--navy-950) !important; }
.legacy-content .text-primary { color: var(--blue-600) !important; }
.legacy-content .text-danger { color: #a72b2b !important; }
.legacy-content strong { font-weight: 780; }
.legacy-content hr {
  height: 1px;
  margin: 2rem 0;
  background: var(--line);
  border: 0;
}
.legacy-content img {
  max-width: 100%;
  height: auto;
}
.legacy-content .img-fluid { max-width: 100%; height: auto; }
.legacy-content video,
.legacy-content iframe { max-width: 100%; }

/* A light card treatment for the long informational pages. */
.legacy-content .rounded,
.legacy-content .card,
.legacy-content fieldset {
  border-radius: var(--radius);
}
.legacy-content fieldset {
  margin: 0;
  padding: clamp(22px, 4vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* --- Old grid class compatibility -------------------------------------- */
.legacy-content .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.legacy-content .col-md-4,
.legacy-content .col-lg-4,
.legacy-content .col-xl-4 { flex: 1 1 280px; }
.legacy-content .col-md-6,
.legacy-content .col-lg-6 { flex: 1 1 420px; }
.legacy-content .col-md-8,
.legacy-content .col-lg-8 { flex: 2 1 560px; }
.legacy-content .col-12 { flex: 1 1 100%; }
.legacy-content .justify-content-center { justify-content: center; }

/* --- Forms: Contact, Customer Login and Newsletter --------------------- */
.zfrm {
  width: min(820px, 100%);
  margin: 1.6rem auto 0;
}
.zl {
  padding: 0 .35rem;
  color: var(--navy-950);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 820;
}
.zf {
  display: inline-block;
  margin-bottom: .45rem;
  color: var(--ink);
  font-weight: 720;
}
.zfrm input[type="text"],
.zfrm input[type="email"],
.zfrm textarea,
.newsletter-box input {
  width: 100%;
  max-width: 100%;
  padding: .84rem .95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #b9c6d5;
  border-radius: 9px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.zfrm textarea { min-height: 180px; resize: vertical; }
.zfrm input:focus,
.zfrm textarea:focus,
.newsletter-box input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(45,131,198,.12);
}
.zb,
.newsletter-box button {
  display: inline-flex;
  min-height: 46px;
  padding: .78rem 1.2rem;
  color: var(--white);
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  border: 0;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(29,103,168,.20);
  align-items: center;
  justify-content: center;
  font-weight: 780;
  cursor: pointer;
}
.zb:hover,
.newsletter-box button:hover { filter: brightness(1.05); }

/* Keep the original anti-spam/honeypot fields invisible. */
.zz { display: none !important; }

.newsletter-box {
  width: min(var(--content), calc(100% - (var(--gutter) * 2)));
  margin: 12px auto 70px;
  padding: clamp(26px, 5vw, 46px);
  color: #dce7f3;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
}
.newsletter-box h2 { color: var(--white); }
.newsletter-box form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .7rem;
  align-items: center;
}
.newsletter-box input {
  color: var(--white);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.newsletter-box input::placeholder { color: #b9c8d8; }
.newsletter-note { color: #b9c8d8; }

/* --- Original Pro 10 image carousel ------------------------------------ */
.pro10-carousel {
  position: relative;
  width: min(920px, 100%);
  margin: 1.8rem auto;
  overflow: hidden;
  background: var(--navy-950) !important;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.carousel-inner { position: relative; }
.carousel-item { display: none; }
.carousel-item.active { display: block; }
.carousel-item img { width: 100%; }
.carousel-indicators {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 12px;
  left: 0;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  gap: .4rem;
}
.carousel-indicators button {
  width: 26px;
  height: 5px;
  padding: 0;
  background: rgba(255,255,255,.55);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.carousel-indicators button.active { background: var(--gold-300); }
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 11%;
  padding: 0;
  color: var(--white);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  background: rgba(7,17,31,.72);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 50%;
  place-items: center;
}
.carousel-control-prev-icon::before { content: "‹"; font-size: 2rem; line-height: 1; }
.carousel-control-next-icon::before { content: "›"; font-size: 2rem; line-height: 1; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Home authority panel ---------------------------------------------- */
.authority-section {
  position: relative;
  z-index: 5;
  padding: 34px 0 0;
}
.authority-section .authority-strip { margin-top: 0; }

/* --- Combined Products page -------------------------------------------- */
.products-intro {
  padding: 70px 0 34px;
  color: var(--white);
  background:
    linear-gradient(105deg, rgba(7,17,31,.98), rgba(12,34,57,.91)),
    url("../images/frequency-engineering.svg") right center / min(750px, 70vw) auto no-repeat,
    var(--navy-950);
}
.products-intro h1 { margin-bottom: 0; color: var(--white); }
.products-intro .eyebrow { color: var(--cyan-300); }
.flagship-section { padding: 52px 0 72px; background: var(--paper); }
.flagship-label {
  width: fit-content;
  margin: 0 auto 20px;
  padding: .42rem .8rem;
  color: #5e470c;
  background: #fff4cb;
  border: 1px solid #ead47e;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.flagship-section .legacy-content,
.flagship-section section { padding: 0; }
.flagship-section section + section { margin-top: 24px; }
.flagship-section img {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.zx-products { padding: 72px 0; }
.zx-products .section-head { max-width: 930px; }
.zx-products h6 {
  color: var(--ink-soft);
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.65;
}
.product-shot {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.product-shot img { width: 100%; }
.product-feature-ai { margin-bottom: 34px; }

/* --- Footer additions --------------------------------------------------- */
.footer-about { max-width: 520px; margin-top: 1rem; }

/* --- Mobile adjustments for imported content -------------------------- */
@media (max-width: 760px) {
  .page-hero-inner { min-height: 190px; align-items: flex-start; flex-direction: column; gap: .8rem; }
  .page-hero-tag { white-space: normal; }
  .newsletter-box form { grid-template-columns: 1fr; }
  .legacy-content .row { display: block; }
  .legacy-content .row > * + * { margin-top: 1.2rem; }
  .carousel-control-prev,
  .carousel-control-next { width: 16%; }
  .products-intro { padding-top: 52px; }
}

/* ==========================================================================
   SECTION 18 - CUSTOMER CENTER (c23.php)
   --------------------------------------------------------------------------
   The Customer Center contains live PHP/customer download logic. Its logic is
   intentionally untouched; these rules modernize the surrounding presentation.
   ========================================================================== */
.customer-center-page {
  color: var(--ink);
  background: var(--paper);
}
.customer-center-page .customer-main > section:not(.page-hero) {
  padding: clamp(34px, 5vw, 64px) 0;
}
.customer-center-page .customer-main > section:not(.page-hero):nth-of-type(odd) {
  background: var(--white);
}
.customer-center-page .customer-main .container {
  width: min(var(--content), calc(100% - (var(--gutter) * 2)));
  margin-right: auto;
  margin-left: auto;
}
.customer-center-page .customer-main img {
  max-width: 100%;
  height: auto;
}
.customer-center-page .customer-main hr {
  height: 1px;
  margin: 2rem 0;
  background: var(--line);
  border: 0;
}
.customer-center-page .customer-main .bund {
  color: var(--navy-950);
  font-size: 1.15rem;
  font-weight: 800;
}
.customer-center-page .customer-main .pic {
  margin: .5rem 1.5rem 1rem 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.customer-center-page .customer-main a {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   SECTION 18 - OCTOBER 2026 VISUAL REFINEMENTS
   --------------------------------------------------------------------------
   Requested after the first live /ZTest review:
   - Restore the original bztronics logo everywhere.
   - Make page banners more visually interesting and much easier to read.
   - Increase the home authority statement size.
   - Center the flagship Pro 10 image.
   - Make Support media reliable from a subfolder test installation.
   ========================================================================== */

/* --- Original bztronics logo ------------------------------------------- */
.brand-logo {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
}

.site-footer .brand-logo {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

/* --- Stronger page banners --------------------------------------------- */
.page-hero,
.products-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 13, 24, .97) 0%, rgba(6, 20, 35, .91) 42%, rgba(5, 18, 31, .48) 100%),
    url("../images/header-frequency.svg") center / cover no-repeat,
    var(--navy-950);
  border-bottom: 1px solid rgba(126, 219, 238, .20);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}

.page-hero::after,
.products-intro::after {
  position: absolute;
  z-index: -1;
  right: -120px;
  bottom: -190px;
  width: 520px;
  height: 520px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(205,166,74,.15);
  border-radius: 50%;
  box-shadow:
    0 0 0 52px rgba(84,198,226,.035),
    0 0 0 105px rgba(205,166,74,.025);
}

.page-hero-inner {
  min-height: 290px;
  padding-top: 68px;
  padding-bottom: 68px;
}

.page-hero-eyebrow,
.products-intro .eyebrow {
  margin-bottom: .9rem;
  color: #8be6f3;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  letter-spacing: .14em;
}

.page-label,
.products-intro h1 {
  max-width: 980px;
  color: #fff;
  font-size: clamp(3rem, 6vw, 5.25rem);
  font-weight: 860;
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: 0 10px 34px rgba(0,0,0,.34);
}

/* Homepage had no second title in the original copy, so its existing
   "Healing Frequency Technology" phrase becomes the large banner title. */
.page-label-home {
  display: block;
  max-width: 760px;
  font-size: clamp(2.8rem, 5.8vw, 5rem);
  line-height: 1.02;
}

.page-hero-tag {
  max-width: 360px;
  margin: 0;
  padding: .72rem 1rem;
  color: #f0cf74;
  background: rgba(4, 14, 25, .50);
  border: 1px solid rgba(224,188,90,.28);
  border-radius: 999px;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  font-style: normal;
  font-weight: 780;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
}

.products-intro {
  min-height: 315px;
  padding: 78px 0 70px;
}
.products-intro .section-head {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* --- Home authority statement ----------------------------------------- */
.home-authority-statement {
  max-width: 1120px;
  margin: 1.35rem auto 1.7rem;
  padding: 1.15rem 1.4rem;
  color: #33475c;
  background: #f4f8fb;
  border: 1px solid #dbe5ed;
  border-left: 4px solid var(--gold-500);
  border-radius: 10px;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem) !important;
  font-weight: 650;
  line-height: 1.65;
  text-align: center;
}
.home-authority-statement span,
.home-authority-statement strong,
.home-authority-statement em {
  color: inherit !important;
}

/* --- Flagship Pro 10 image -------------------------------------------- */
.flagship-pro-image {
  display: block !important;
  width: min(100%, 880px);
  height: auto;
  margin: 1.7rem auto 1.2rem !important;
}

/* --- Support images and video ----------------------------------------- */
.support-page .legacy-content img {
  display: block;
  margin: 1rem auto;
}
.support-page .legacy-content img[width="40"] {
  display: inline-block;
  margin: .15rem .35rem;
  vertical-align: middle;
}
.responsive-video {
  display: block;
  width: min(100%, 960px);
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1.5rem auto 2rem;
  background: #000;
  border: 1px solid #c7d4df;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 760px) {
  .brand-logo {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .page-hero-inner {
    min-height: 260px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .page-label,
  .page-label-home,
  .products-intro h1 {
    font-size: clamp(2.35rem, 12vw, 3.75rem);
  }
  .page-hero-tag {
    text-align: left;
  }
}


/* ==========================================================================
   SECTION 19 - TEST-FOLDER / LEGACY CONTENT FIXES
   --------------------------------------------------------------------------
   These rules address issues found during the /ZTest deployment:
   1. Do not reserve space for empty Bootstrap-era sections.
   2. Preserve the original bztronics GIF aspect ratio in the header/footer.
   3. Keep imported support media centered and responsive.
   ========================================================================== */

/* Old source pages contained empty spacer <section> elements.  They are
   removed from the HTML in this build; this rule is an extra safety net. */
.legacy-content > section.pb-auto.pt-3,
.legacy-content > section.text-secondary:empty {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* The original bztronics logo is not forced into a square crop. */
.brand-logo {
  width: auto !important;
  height: 48px !important;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
}
.site-footer .brand-logo {
  width: auto !important;
  height: 46px !important;
  max-width: 165px;
}

/* Support screenshots keep their natural dimensions but never overflow. */
.support-page .legacy-content img:not([width="40"]) {
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .brand-logo {
    width: auto !important;
    height: 42px !important;
    max-width: 145px;
  }
}