/* ═══════════════════════════════════════════════════════
   TÖRE Advanced Technology — Stylesheet
   Fonts (allow-list, in priority order):
     Palatino Linotype → Mongolian Baiti → Times New Roman
   Headings & body use Palatino Linotype;
   accents and the "re-engineered" lockup use Times New Roman.
   ═══════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── CUSTOM PROPERTIES ─── */
:root {
  --deep-navy:    #003752;
  --off-white:    #EBEBEB;
  --black:        #000000;

  --teal:         #1D688D;
  --dark-teal:    #184D68;
  --midnight:     #00273A;
  --silver:       #A8B2B9;
  --silver-bright:#C9D1D6;

  --bg:           #060A0D;
  --bg-section:   #0A0F13;
  --bg-card:      #0D1318;
  --border:       rgba(235, 235, 235, 0.06);
  --border-light: rgba(235, 235, 235, 0.10);
  --text-primary: #EBEBEB;
  --text-muted:   #8A9299;
  --text-dim:     #5A6369;

  --font-heading: 'Palatino Linotype', 'Mongolian Baiti', 'Times New Roman', serif;
  --font-body:    'Palatino Linotype', 'Mongolian Baiti', 'Times New Roman', serif;
  --font-accent:  'Times New Roman', 'Mongolian Baiti', 'Palatino Linotype', serif;

  /* Corner radius scale — every corner is smoothly curved. */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;

  --max-w:        1200px;
  --gutter:       clamp(20px, 5vw, 80px);
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

/* ─── NOISE TEXTURE (global) ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(6, 10, 13, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s;
}

.nav__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__logo {
  height: 36px;
  width: auto;
}

.nav__links {
  display: flex;
  gap: 36px;
}

.nav__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--teal);
  transition: width 0.3s;
}

.nav__link:hover {
  color: var(--off-white);
}

.nav__link:hover::after {
  width: 100%;
}

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  padding: 4px 0;
}

.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--off-white);
  transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 768px) {
  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-left: 1px solid var(--border);
    padding: 100px 32px 40px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
  }

  .nav__links.is-open {
    transform: translateX(0);
  }

  .nav__link {
    font-size: 15px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav__link::after { display: none; }

  .nav__burger {
    display: flex;
    z-index: 1001;
  }

  .nav__burger.is-open span:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }
  .nav__burger.is-open span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }
}


/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
  background: var(--bg);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(29,104,141,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,104,141,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 512px 512px;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(29,104,141,0.3);
  padding: 6px 16px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.2s forwards;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.0;
  color: var(--off-white);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s 0.35s forwards;
}

.hero__title--accent {
  font-family: var(--font-accent);
  color: var(--teal);
  font-style: italic;
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 500px;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.55s forwards;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.7s forwards;
}

.hero__logo-mark {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 30vw, 420px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.hero__logo-img {
  width: 100%;
  height: auto;
}

.hero__scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--teal), transparent);
  animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */

.btn { border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
}

.btn--primary {
  background: var(--deep-navy);
  color: var(--off-white);
  border: 1px solid var(--dark-teal);
}

.btn--primary:hover {
  background: var(--teal);
  border-color: var(--teal);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

.btn--ghost:hover {
  color: var(--off-white);
  border-color: rgba(235,235,235,0.25);
}


/* ═══════════════════════════════════════════════════════
   SHARED SECTION
   ═══════════════════════════════════════════════════════ */

.flex-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.flex-content {
  flex: 1;
  max-width: 600px;
}

.flex-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .flex-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .flex-icon {
    margin-top: 40px;
    padding: 0;
  }
}

.section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 16px;
}

.section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  color: var(--off-white);
  letter-spacing: -0.01em;
}


/* ═══════════════════════════════════════════════════════
   VISION
   ═══════════════════════════════════════════════════════ */

.vision {
  padding: 120px 0;
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.vision__header {
  margin-bottom: 40px;
}

/* ─── Vision split: lockup on the left, heading + copy on the right ─── */
.vision__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.vision__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(29, 104, 141, 0.22), transparent 62%),
    var(--bg-card);
}

.vision__mark {
  width: clamp(120px, 15vw, 190px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.18));
}

.vision__lockup-text {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.28;
  text-align: center;
  color: var(--off-white);
  letter-spacing: 0.01em;
}

.vision__type {
  display: block;
  min-height: 1.28em;
}

/* The wording lives in the markup, so it is readable (and indexed)
   without JavaScript. When scripting is available the text is held back
   and typed in instead. */
.js .vision__type { visibility: hidden; }
.js .vision__type.is-typing { visibility: visible; }

/* The caret that trails the typing animation. */
.vision__type::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--neon);
  animation: caretBlink 0.85s steps(2, start) infinite;
}

.vision__type.is-typed::after { display: none; }

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.vision__content { min-width: 0; }

.vision__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.vision__card {
  background: var(--bg-section);
  padding: 48px 36px;
}

.vision__card-num {
  font-family: var(--font-accent);
  font-size: 14px;
  color: var(--dark-teal);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  font-style: italic;
}

.vision__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--off-white);
  margin-bottom: 16px;
}

.vision__card-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .vision__grid {
    grid-template-columns: 1fr;
  }

  .vision__split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .vision__header {
    margin-bottom: 28px;
  }
}


/* ═══════════════════════════════════════════════════════
   PRODUCTS
   ═══════════════════════════════════════════════════════ */

.products {
  padding: 120px 0;
  background: var(--bg);
}

.products__header {
  margin-bottom: 64px;
}

.products__intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 520px;
}

.products__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}

.products__featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dark-teal), transparent);
}

.products__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}

.products__status-dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.products__product-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  color: var(--off-white);
  margin-bottom: 4px;
}

.products__product-type {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.products__product-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Specs grid */
.products__specs-grid {
  border-top: 1px solid var(--border);
}

.products__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.products__spec-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.products__spec-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--off-white);
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

/* Vendor marks sit inline with the component value, matching the
   small LinkedIn / GitHub glyph treatment. */
.vendor-logo {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: var(--silver);
  opacity: 0.75;
  transition: fill 0.2s ease, opacity 0.2s ease;
}

.vendor-logo--wide {
  width: auto;
  height: 14px;
}

.product-block__spec:hover .vendor-logo,
.products__spec:hover .vendor-logo {
  fill: var(--neon);
  opacity: 1;
}

.products__cta {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .products__featured {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }
}


/* ═══════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════ */

.about {
  padding: 100px 0;
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about__block {
  max-width: 600px;
}

/* Two story columns side by side; the capability chips and the call to
   action run across the full width underneath. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(36px, 5vw, 76px);
  row-gap: 26px;
  align-items: start;
}

.about__grid > .about__block { max-width: none; }

.about__grid > .module-chips,
.about__grid > .btn {
  grid-column: 1 / -1;
}

.about__grid > .btn { justify-self: start; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
}

.about__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 20px 0 32px;
}


/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */

.faq {
  padding: 100px 0;
  background: var(--bg);
}

.faq__block {
  max-width: 600px;
}

.faq__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 20px 0 32px;
}


/* ═══════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════ */

.contact {
  padding: 120px 0;
  background: var(--bg-section);
  border-top: 1px solid var(--border);
}

.contact__block {
  max-width: 560px;
}

.contact__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: 20px;
  margin-bottom: 32px;
}

.contact__email {
  font-family: var(--font-accent);
  font-size: clamp(20px, 3vw, 32px);
  color: var(--teal);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
  display: inline-block;
}

.contact__email:hover {
  border-color: var(--teal);
}


/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */

.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  background: var(--bg);
}

.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__logo {
  height: 24px;
  width: auto;
  opacity: 0.5;
}

.footer__name {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.footer__copy {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════
   COMING SOON PAGE
   ═══════════════════════════════════════════════════════ */

.soon {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 40px var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.soon__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 512px 512px;
}

.soon__logo {
  width: clamp(140px, 25vw, 240px);
  height: auto;
  filter: blur(2px);
  opacity: 0.35;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}

.soon__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 48px);
  color: var(--off-white);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.soon__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 440px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.soon__back {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .hero__title {
    font-size: 40px;
  }

  .hero__logo-mark {
    display: none;
  }

  .section__title {
    font-size: 28px;
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
}
/* =======================================================
   LANG TOGGLE
   ======================================================= */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.lang-btn {
  color: inherit;
  transition: color 0.2s;
  text-transform: uppercase;
}
.lang-btn:hover, .lang-btn.is-active {
  color: var(--off-white);
}
.lang-sep {
  color: var(--border-light);
}


/* =======================================================
   VIDEO BACKGROUND
   ======================================================= */
.hero__video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.hero__video-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 20%, transparent 80%, transparent 100%);
}

/* =======================================================
   BETA MODAL
   ======================================================= */
.beta-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.beta-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}
.beta-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 13, 0.85);
  backdrop-filter: blur(8px);
}
.beta-modal__content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  max-width: 500px;
  text-align: center;
  z-index: 1;
  transform: translateY(20px);
  transition: transform 0.3s;
}
.beta-modal.is-active .beta-modal__content {
  transform: translateY(0);
}
.beta-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beta-modal__close:hover {
  color: var(--off-white);
}
.beta-modal__logo {
  width: 80px;
  height: auto;
  margin: 0 auto 24px;
  filter: blur(1.5px);
  opacity: 0.8;
}
.beta-modal__title {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--off-white);
  margin-bottom: 12px;
}
.beta-modal__text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted);
}

/* Override all body-level texts to match the hero subtitle (per user request) */
.about__text, .faq__text, .contact__text, .products__intro, .soon__text {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 3vw, 24px) !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
}

/* Product card copy stays at body density — it sits beside a spec table. */
.products__product-desc {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
}

.products__spec-label {
  font-size: 12px !important;
  color: var(--text-dim);
}


/* ═══════════════════════════════════════════════════════
   NEON FIGURE SYSTEM
   A reusable "electric trace" rig: a dim base drawing plus a
   short bright dash that travels along the artwork's outline.
   ═══════════════════════════════════════════════════════ */

:root {
  --neon:        #00e5ff;
  --neon-soft:   rgba(0, 229, 255, 0.55);
  --neon-dim:    rgba(0, 229, 255, 0.13);
  --neon-far:    rgba(0, 229, 255, 0.28);
}

.figure {
  position: relative;
  width: clamp(170px, 19vw, 235px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.figure__halo {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--neon-dim) 0%, rgba(0, 229, 255, 0.04) 45%, transparent 70%);
  filter: blur(16px);
  z-index: 0;
  pointer-events: none;
}

.figure__svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Stroke weight follows the viewBox scale of each figure.
   --dash / --dash-gap describe one travelling streak (sum = 100, one
   full loop of the normalised path). --head / --head-gap describe the
   bright leading tip. --head-from / --head-to phase-lock that tip to
   the leading edge of the streak (offset = dash - head), so the tip
   rides the front of the trail and the two can never cross. */
.figure--team { --sw: 1.05; --dash: 13; --dash-gap: 87; --head: 5; --head-gap: 95; --head-from: -8; --head-to: -108; }
.figure--faq  { --sw: 1.7; --dash: 13; --dash-gap: 87; --head: 5; --head-gap: 95; --head-from: -8; --head-to: -108; }

/* The handshake is drawn on a 24-unit grid, so its stroke and
   travel distances are scaled to match. */
.figure--shake { --sw: 0.3; --dash: 13; --dash-gap: 87; --head: 5; --head-gap: 95; --head-from: -8; --head-to: -108; }

.figure--logo { --sw: 7; --dash: 7; --dash-gap: 93; --head: 3; --head-gap: 97; --head-from: -4; --head-to: -104; }

/* Base artwork — dim, structural */
.fx-base {
  fill: none;
  stroke: var(--teal);
  stroke-width: var(--sw, 0.17);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* The travelling current: a short bright dash that runs the outline.
   Paths carry pathLength="100", so dash units are normalised and the
   dash travels the full border once per cycle. */
.fx-trace {
  fill: none;
  stroke: var(--neon);
  stroke-width: var(--sw, 0.17);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--dash) var(--dash-gap);
  stroke-dashoffset: 0;
  animation: fx-flow var(--flow, 3.4s) linear infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 9px var(--neon-soft));
  opacity: 0.95;
}

/* Brighter head that leads the trail.
   It shares the trail's timing exactly and is offset by the trail
   length, so it always rides the leading edge instead of
   crossing over it. */
.fx-head {
  fill: none;
  stroke: #b8f7ff;
  stroke-width: calc(var(--sw, 0.17) * 1.2);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--head) var(--head-gap);
  stroke-dashoffset: var(--head-from);
  animation: fx-flow-head var(--flow, 3.4s) linear infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 12px var(--neon));
}

@keyframes fx-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

@keyframes fx-flow-head {
  from { stroke-dashoffset: var(--head-from); }
  to   { stroke-dashoffset: var(--head-to); }
}

/* Soft fill for solid shapes (logo slabs) */
.fx-solid {
  stroke: none;
  opacity: 0.92;
}

/* Progressive enhancement — without scripting the figures are shown in
   their finished state instead of waiting for a trigger that never
   arrives. Nothing on the page depends on an animation to be legible. */
html:not(.js) .figure--logo .lg-stem,
html:not(.js) .figure--logo .lg-band,
html:not(.js) .figure--logo .fx-trace,
html:not(.js) .figure--logo .fx-head,
html:not(.js) .figure--shake .hs-current {
  opacity: 1 !important;
}

html:not(.js) .figure--shake .hs-draw {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}


/* ─── 03 — LOGO ASSEMBLY ───
   The build is scroll-triggered: `.is-live` is added by the observer in
   script.js, so the layers slide in exactly when the section is reached. */
.figure--logo .lg-stem {
  opacity: 0;
  transform-origin: 500px 725px;
}

.figure--logo .lg-band {
  opacity: 0;
}

.figure--logo.is-live .lg-stem {
  animation: lg-stem-rise 0.9s cubic-bezier(0.22, 0.75, 0.28, 1) forwards;
  animation-delay: 0.15s;
}

.figure--logo.is-live .lg-band {
  animation: lg-band-slide 0.85s cubic-bezier(0.18, 0.72, 0.24, 1) forwards;
}

.figure--logo.is-live .lg-band--1 { animation-delay: 0.55s; }
.figure--logo.is-live .lg-band--2 { animation-delay: 1.10s; }
.figure--logo.is-live .lg-band--3 { animation-delay: 1.65s; }
.figure--logo.is-live .lg-band--4 { animation-delay: 2.20s; }

@keyframes lg-band-slide {
  0%   { opacity: 0; transform: translateX(var(--from, 170px)); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes lg-stem-rise {
  0%   { opacity: 0; transform: scaleY(0.06); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* The assembled silhouette + the current that circles it.
   The current is held back until the four layers have landed. */
.figure--logo .lg-outline {
  fill: none;
  stroke: var(--neon-far);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0;
}

.figure--logo.is-live .lg-outline {
  animation: fx-fade-in 0.5s ease forwards;
  animation-delay: 2.85s;
}

.figure--logo .fx-trace,
.figure--logo .fx-head {
  opacity: 0;
  --flow: 4.6s;
}

.figure--logo.is-live .fx-trace {
  animation: fx-flow 4.6s linear infinite, fx-fade-in 0.5s ease forwards;
  animation-delay: var(--delay, 0s), 2.85s;
}

.figure--logo.is-live .fx-head {
  animation: fx-flow-head 4.6s linear infinite, fx-fade-in 0.5s ease forwards;
  animation-delay: var(--delay, 0s), 2.85s;
}

/* The logo reads better with a restrained glow — it is a solid mark,
   not a filament. */
.figure--logo .fx-trace {
  filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 6px var(--neon-soft));
  opacity: 0.8;
}

.figure--logo .fx-head {
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px var(--neon));
}

@keyframes fx-fade-in {
  to { opacity: 0.95; }
}


/* ─── 06 — HANDSHAKE (one-shot) ───
   The Lucide handshake writes itself in stroke by stroke, then a
   continuous current runs along the finished clasp. */
.figure--shake .hs-draw {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}

.figure--shake.is-clasped .hs-draw {
  animation: hs-draw 0.55s cubic-bezier(0.35, 0, 0.2, 1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes hs-draw {
  to { stroke-dashoffset: 0; }
}

/* The current is withheld until the clasp completes */
.figure--shake .hs-current {
  opacity: 0;
  --flow: 3.6s;
}

.figure--shake.is-clasped .hs-current .fx-trace {
  animation: fx-flow 3.6s linear infinite, fx-fade-in 0.5s ease forwards;
  animation-delay: var(--delay, 0s), 0.85s;
}

.figure--shake.is-clasped .hs-current .fx-head {
  animation: fx-flow-head 3.6s linear infinite, fx-fade-in 0.5s ease forwards;
  animation-delay: var(--delay, 0s), 0.85s;
}


/* ═══════════════════════════════════════════════════════
   FORM / STATUS FEEDBACK
   ═══════════════════════════════════════════════════════ */

.form-field {
  margin-bottom: 22px;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}

.form-label .req { color: var(--teal); }

.form-control {
  width: 100%;
  background: rgba(10, 15, 19, 0.85);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-control::placeholder { color: var(--text-dim); }

.form-control:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(13, 19, 24, 0.95);
  box-shadow: 0 0 0 3px rgba(29, 104, 141, 0.22);
}

.form-control:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

textarea.form-control {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.form-control[aria-invalid="true"] {
  border-color: #e05a5a;
  box-shadow: 0 0 0 3px rgba(224, 90, 90, 0.16);
}

.form-error {
  display: none;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: #f08a8a;
}

.form-error::before {
  content: '!';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(224, 90, 90, 0.18);
  border: 1px solid rgba(224, 90, 90, 0.55);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.form-field.has-error .form-error { display: flex; }

.form-hint {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  margin-bottom: 26px;
  border: 1px solid var(--border-light);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: rgba(13, 19, 24, 0.8);
  font-size: 14.5px;
  line-height: 1.55;
}

.form-status.is-visible { display: flex; }
.form-status__note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.72;
}

.form-status[data-state="success"] { border-left-color: #2fbf87; color: #9fe3c4; }
.form-status[data-state="error"]   { border-left-color: #e05a5a; color: #f0a5a5; }
.form-status[data-state="info"]    { border-left-color: var(--teal); color: var(--text-muted); }
.form-status[data-state="sending"] { border-left-color: var(--neon); color: var(--silver-bright); }

.form-status__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.form-status strong { color: var(--off-white); font-weight: 700; }

.form-status a { color: var(--teal); text-decoration: underline; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-form {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
  max-width: 560px;
}

.form-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--off-white);
  margin-bottom: 24px;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__spinner {
  width: 13px;
  height: 13px;
  margin-right: 9px;
  border: 2px solid rgba(235, 235, 235, 0.28);
  border-top-color: var(--off-white);
  border-radius: 50%;
  display: inline-block;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════
   SOCIAL LINKS
   ═══════════════════════════════════════════════════════ */

.social {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: rgba(13, 19, 24, 0.6);
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.social__link:hover {
  border-color: var(--teal);
  background: rgba(29, 104, 141, 0.12);
  transform: translateY(-2px);
}

.social__icon {
  width: 20px;
  height: 20px;
  fill: var(--silver);
  transition: fill 0.22s ease;
  flex: 0 0 auto;
}

.social__link:hover .social__icon { fill: var(--neon); }

.social__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--off-white);
}

.social__handle {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-dim);
}


/* ═══════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════ */

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 22px 4px;
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--off-white);
  transition: color 0.2s ease;
}

.faq-item__question:hover { color: var(--silver-bright); }

.faq-item__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: border-color 0.25s ease, transform 0.3s ease, background 0.25s ease;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--silver);
  transition: transform 0.3s ease, background 0.25s ease;
}

.faq-item__icon::before { width: 10px; height: 1.5px; }
.faq-item__icon::after  { width: 1.5px; height: 10px; }

.faq-item__question[aria-expanded="true"] .faq-item__icon {
  border-color: var(--teal);
  background: rgba(29, 104, 141, 0.15);
  transform: rotate(180deg);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon::after { transform: scaleY(0); }
.faq-item__question[aria-expanded="true"] .faq-item__icon::before { background: var(--neon); }

.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item__answer-inner {
  padding: 0 4px 26px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 760px;
}


/* ═══════════════════════════════════════════════════════
   EMPTY / ZERO STATES
   ═══════════════════════════════════════════════════════ */

.empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius);
  background: rgba(10, 15, 19, 0.5);
}

.empty-state.is-visible { display: flex; }

.empty-state__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--dark-teal);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--off-white);
  margin-bottom: 8px;
}

.empty-state__text {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 420px;
  margin-bottom: 20px;
}


/* ═══════════════════════════════════════════════════════
   PAGE HEADER (sub-pages)
   ═══════════════════════════════════════════════════════ */

.page-head {
  padding: 150px 0 70px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.page-head__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.page-head__title { margin-top: 14px; }
.page-head__lede {
  margin-top: 22px;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 26px;
  transition: color 0.2s ease;
}

.back-link:hover { color: var(--neon); }


/* ═══════════════════════════════════════════════════════
   PRODUCT CATALOG
   ═══════════════════════════════════════════════════════ */

.product-block {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 40px;
  border-radius: var(--radius-lg);
  position: relative;
  margin-bottom: 26px;
  transition: border-color 0.25s ease;
}

.product-block:hover { border-color: var(--border-light); }

.product-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dark-teal), transparent);
}

.product-block--primary {
  border-color: rgba(29, 104, 141, 0.34);
  background: linear-gradient(180deg, rgba(29, 104, 141, 0.07), var(--bg-card) 55%);
}

.product-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.product-block__role {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
  display: block;
}

.product-block__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--off-white);
  margin-bottom: 18px;
  line-height: 1.15;
}

.product-block__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 720px;
}

.product-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-top: 30px;
}

.product-block__specs {
  border-top: 1px solid var(--border);
}

.product-block__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.product-block__spec-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.product-block__spec-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--off-white);
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

/* Stack composition diagram */
.stack-diagram {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stack-diagram__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  background: rgba(6, 10, 13, 0.6);
  transition: border-color 0.22s ease, transform 0.22s ease;
}

.stack-diagram__row:hover { border-color: var(--teal); transform: translateX(4px); }

.stack-diagram__index {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dark-teal);
  border-radius: 50%;
  font-family: var(--font-accent);
  font-size: 12px;
  font-style: italic;
  color: var(--teal);
}

.stack-diagram__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--off-white);
}

.stack-diagram__role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
}

.stack-diagram__arrow {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
}

/* Module chips */
.module-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.module-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--silver);
  background: rgba(29, 104, 141, 0.08);
}

.module-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--teal);
  border-radius: 50%;
}

/* Catalog search */
.catalog-search {
  margin-bottom: 34px;
  max-width: 520px;
}

.catalog-search__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.catalog-search .form-control {
  flex: 1 1 280px;
}

.catalog-count {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
}

.module-chip--link {
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
  text-decoration: none;
}

.module-chip--link:hover {
  border-color: var(--teal);
  background: rgba(29, 104, 141, 0.16);
  transform: translateY(-2px);
}

.module-chip--link .social__icon {
  width: 16px;
  height: 16px;
  fill: var(--teal);
}

.module-chip--link:hover .social__icon { fill: var(--neon); }

@media (max-width: 900px) {
  .product-block { padding: 28px 22px; }
  .product-block__grid { grid-template-columns: 1fr; gap: 30px; }
}


/* ═══════════════════════════════════════════════════════
   FOOTER EXTENSIONS
   ═══════════════════════════════════════════════════════ */

.footer__nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.footer__nav-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s ease;
}

.footer__nav-link:hover { color: var(--neon); }

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
}

.footer__social-link {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer__social-link:hover {
  border-color: var(--teal);
  background: rgba(29, 104, 141, 0.14);
}

.footer__social-icon {
  width: 15px;
  height: 15px;
  fill: var(--text-dim);
  transition: fill 0.2s ease;
}

.footer__social-link:hover .footer__social-icon { fill: var(--neon); }


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  color: var(--off-white);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top 0.2s ease;
}

.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Only apply reveal-hiding when JS is present, so content never vanishes. */
.js .reveal { opacity: 0; transform: translateY(32px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* The FAQ accordion needs JS to collapse; without it every answer is shown. */
html:not(.js) .faq-item__answer { max-height: none !important; overflow: visible; }
html:not(.js) .faq-item__icon { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fx-trace, .fx-head { animation: none; stroke-dasharray: none; opacity: 0.9; }
  .figure--logo .lg-band, .figure--logo .lg-stem { opacity: 1; transform: none; }
  .figure--shake .hs-draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
  .figure--shake .hs-current { opacity: 1; }
}

/* Printing must not lose content that is waiting on a scroll reveal. */
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }

  .figure--logo .lg-band,
  .figure--logo .lg-stem,
  .figure--logo .lg-outline,
  .figure--shake .hs-draw { opacity: 1 !important; transform: none !important; }

  .figure--shake .hs-draw { stroke-dashoffset: 0 !important; }

  .fx-trace, .fx-head { opacity: 1 !important; animation: none !important; }

  .beta-modal { display: none !important; }
  .nav { position: static !important; }
  .skip-link { display: none !important; }
}