/* ==========================================================================

   ATWX / HXWX DESIGN SYSTEM — REFINED CENTERING & BEAUTIFUL LACONIC FRAMES

   ========================================================================== */



/* Authentic HXWX Font Definitions */

@font-face {

  font-family: 'HXWX Doto';

  src: url('../assets/fonts/hxwx-doto-400.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'HXWX Doto';

  src: url('../assets/fonts/hxwx-doto-700.woff2') format('woff2');

  font-style: normal;

  font-weight: 700;

  font-display: swap;

}



@font-face {

  font-family: 'HXWX Doto';

  src: url('../assets/fonts/hxwx-doto-900.woff2') format('woff2');

  font-style: normal;

  font-weight: 900;

  font-display: swap;

}



@font-face {

  font-family: 'HXWX Mono';

  src: url('../assets/fonts/hxwx-geist-mono-400.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'HXWX Mono';

  src: url('../assets/fonts/hxwx-geist-mono-700.woff2') format('woff2');

  font-style: normal;

  font-weight: 700;

  font-display: swap;

}



@font-face {

  font-family: 'HXWX Mono';

  src: url('../assets/fonts/hxwx-geist-mono-900.woff2') format('woff2');

  font-style: normal;

  font-weight: 900;

  font-display: swap;

}





/* Authentic DotMatrix Font Definitions (Unified Cyrillic & Extended Latin LED Matrix) */

@font-face {

  font-family: 'DotMatrix';

  src: url('../assets/fonts/dotmatrix-regular.woff2?v=3.6') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'DotMatrix';

  src: url('../assets/fonts/dotmatrix-bold.woff2?v=3.6') format('woff2');

  font-style: normal;

  font-weight: 600;

  font-display: swap;

}



@font-face {

  font-family: 'DotMatrix';

  src: url('../assets/fonts/dotmatrix-bold.woff2?v=3.6') format('woff2');

  font-style: normal;

  font-weight: 700;

  font-display: swap;

}



/* Authentic HXWX Generative Display Fonts for Logo (Zero standard font) */

@font-face {

  font-family: 'Rubik Bubbles';

  src: url('../assets/fonts/rubik-bubbles.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Wet Paint';

  src: url('../assets/fonts/rubik-wet-paint.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Doodle Triangles';

  src: url('../assets/fonts/rubik-doodle-triangles.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Glitch';

  src: url('../assets/fonts/rubik-glitch.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Lines';

  src: url('../assets/fonts/rubik-lines.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Distressed';

  src: url('../assets/fonts/rubik-distressed.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Spray Paint';

  src: url('../assets/fonts/rubik-spray-paint.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



@font-face {

  font-family: 'Rubik Marker Hatch';

  src: url('../assets/fonts/rubik-marker-hatch.woff2') format('woff2');

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



/* Design Tokens */

:root {

  --ink: #141718;

  --paper: #ffffff;

  --muted: #eef4f0;

  --muted-dark: rgba(238, 244, 240, 0.72);

  --accent: #8de8cd;

  --accent-glow: rgba(141, 232, 205, 0.35);

  --line: rgba(255, 255, 255, 0.16);

  --line-strong: rgba(255, 255, 255, 0.35);

  --line-subtle: rgba(255, 255, 255, 0.08);

  --frame-bg: rgba(255, 255, 255, 0.038);

  --frame-bg-hover: rgba(255, 255, 255, 0.075);

  --font-base: 'HXWX Doto', 'Doto', monospace;

  --font-dot: 'HXWX Doto', 'Doto', monospace;

  --font-mono: 'HXWX Mono', 'Geist Mono', 'JetBrains Mono', monospace;

  --text-scale: 1;

}



/* Language-Optimized Dot-Matrix Typography (Unified True Uppercase Latin & Cyrillic) */

html[lang="ru"],

html[lang="en"],

html[lang="pl"] {

  --font-base: 'HXWX Doto', 'Doto', monospace;

}

html[lang="en"],

html[lang="pl"] {

  --font-base: 'HXWX Doto', 'Doto', monospace;

}





*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  background-color: var(--ink);

  color: var(--paper);

  font-size: 16px;

}



body.hxwx-body {

  font-family: var(--font-base);

  font-size: calc(1rem * var(--text-scale));

  font-weight: 400;

  line-height: 1.6;

  background: var(--ink);

  color: var(--paper);

  overflow-x: hidden;

  min-height: 100vh;

  position: relative;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/* Fixed Global WebGL Canvas Layer */

.hxwx-canvas-fallback {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  background: radial-gradient(circle at 30% 20%, rgba(241, 90, 34, 0.22) 0%, transparent 60%),

              radial-gradient(circle at 75% 75%, rgba(141, 232, 205, 0.18) 0%, transparent 55%),

              linear-gradient(135deg, #141718 0%, #0d0f10 100%);

  pointer-events: none;

}



#webGLApp {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  image-rendering: pixelated;

  z-index: 0;

}



/* Base Elements */

a {

  color: inherit;

  text-decoration: none;

}



button, input, textarea, select {

  font: inherit;

  font-family: var(--font-mono);

  touch-action: manipulation;

}



button {

  cursor: pointer;

}



button:disabled {

  cursor: default;

  opacity: 0.45;

}



:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 4px;

}



h1, h2, h3, h4 {

  font-family: var(--font-base);

  font-weight: 600;

  line-height: 1.2;

  overflow-wrap: anywhere;

}



h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }

h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }

h3 { font-size: calc(1.25rem * var(--text-scale)); }

h4 { font-size: calc(1.05rem * var(--text-scale)); }



p, li, label, summary {

  overflow-wrap: anywhere;

}



/* Fixed Vertical Navigation (hxwx Left Anchor) */

.hxwx-vertical-nav {

  position: fixed;

  top: 50%;

  left: 20px;

  transform: translateY(-50%);

  z-index: 50;

  display: flex;

  flex-direction: column;

  gap: clamp(14px, 2vh, 18px);

  align-items: center;

  padding: 0;

  border: none !important;

  border-right: none !important;

  background: transparent !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  user-select: none;

  pointer-events: none;

  width: auto;

  height: auto;

}



.hxwx-vnav-brand {

  writing-mode: vertical-rl;

  transform: none;

  font-family: var(--font-dot);

  font-size: clamp(12px, 1.4vh, 13.5px);

  font-weight: 700;

  letter-spacing: 0.14em;

  color: var(--accent);

  text-transform: lowercase;

  text-decoration: none;

  cursor: pointer;

  pointer-events: auto;

  transition: opacity 0.2s ease, text-shadow 0.2s ease;

}



.hxwx-vnav-brand:hover {

  opacity: 0.85;

  text-shadow: 0 0 10px var(--accent-glow);

}



.hxwx-vnav-links {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: clamp(14px, 2vh, 18px);

  align-items: center;

}



.hxwx-vnav-item {

  writing-mode: vertical-rl;

  transform: none;

  font-family: var(--font-dot);

  font-size: clamp(11.5px, 1.3vh, 12.5px);

  font-weight: 700;

  letter-spacing: 0.10em;

  color: rgba(255, 255, 255, 0.75);

  transition: all 0.25s ease;

  white-space: nowrap;

  text-transform: lowercase;

  text-decoration: none;

  cursor: pointer;

  pointer-events: auto;

}



.hxwx-vnav-item:hover {

  color: #ffffff;

}



.hxwx-vnav-item.active {

  color: #ffffff;

  font-weight: 700;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px var(--accent-glow);

}



.hxwx-vnav-indicator {

  display: none !important;

}



/* Top Right Action Bar */

.hxwx-top-bar,

.hxwx-top-actions {

  position: fixed;

  top: 24px;

  right: 28px;

  z-index: 60;

  display: flex;

  align-items: center;

  gap: 12px;

}



.hxwx-lang-capsule {

  display: flex;

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 4px;

  padding: 2px;

  gap: 2px;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



.hxwx-lang-btn {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  padding: 6px 10px;

  border: none;

  border-radius: 2px;

  background: transparent;

  color: var(--muted-dark);

  cursor: pointer;

  transition: all 0.15s ease;

  line-height: 1;

}



.hxwx-lang-btn:hover {

  color: var(--paper);

  background: var(--frame-bg-hover);

}



.hxwx-lang-btn.active {

  background: var(--accent);

  color: var(--ink);

  font-weight: 700;

}



.hxwx-back-site-btn {

  font-family: var(--font-mono);

  font-size: 11.5px;

  font-weight: 700;

  letter-spacing: 0.05em;

  padding: 8px 14px;

  border-radius: 4px;

  border: 1px solid var(--line);

  background: var(--frame-bg);

  color: var(--paper);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  transition: all 0.15s ease;

}



.hxwx-back-site-btn:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--frame-bg-hover);

}



/* ==========================================================================

   MAIN CONTENT SHELL & HERO SECTION (CENTERED)

   ========================================================================== */

.hxwx-main {

  margin-left: 64px;

  position: relative;

  z-index: 2;

  width: calc(100% - 64px);

  display: flex;

  flex-direction: column;

  align-items: center;

}



.hxwx-hero {

  min-height: 100vh;

  min-height: 100dvh;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 90px 32px 70px;

  text-align: center;

  position: relative;

  box-sizing: border-box;

}



/* Generative Stylized Logo (Image 1 match, zero standard font) */

.hxwx-brand-stage {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 24px;

  width: 100%;

}



.hxwx-big-logo {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: clamp(8px, 2.5vw, 24px);

  font-size: clamp(5.5rem, 15vw, 11.5rem);

  line-height: 0.95;

  color: #ffffff;

  user-select: none;

  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);

}



.hxwx-logo-char {

  display: inline-block;

  cursor: pointer;

  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;

  will-change: transform, font-family;

}



.hxwx-logo-char:hover {

  transform: translateY(-8px) scale(1.1);

  filter: drop-shadow(0 0 16px var(--accent-glow));

}



/* Distinct stylized display font for each letter by default (Image 1) */

.hxwx-char-glitch {

  font-family: 'Rubik Glitch', cursive, monospace !important;

}



.hxwx-char-bubble {

  font-family: 'Rubik Bubbles', cursive, sans-serif !important;

}



.hxwx-char-lines {

  font-family: 'Rubik Lines', cursive, sans-serif !important;

}



.hxwx-char-hatch {

  font-family: 'Rubik Marker Hatch', 'Rubik Doodle Triangles', cursive, sans-serif !important;

}



.hxwx-tagline {

  font-family: 'HXWX Doto', 'Doto', monospace;

  font-size: clamp(0.85rem, 1.3vw, 1.15rem);

  font-weight: 700;

  color: var(--muted);

  margin-bottom: 24px;

  letter-spacing: 0.05em;

  max-width: 880px;

  text-align: center;

}



.hxwx-hero-heading {

  max-width: 980px;

  margin: 0 auto 24px;

  text-align: center;

}



.hxwx-hero-heading h1 {

  font-family: var(--font-base);

  font-size: clamp(2rem, 4.2vw, 3.4rem);

  font-weight: 700;

  line-height: 1.25;

  color: var(--paper);

  text-wrap: balance;

  text-align: center;

}



.hxwx-hero-intro {

  font-family: var(--font-base);

  font-size: clamp(0.95rem, 1.2vw, 1.05rem);

  line-height: 1.7;

  color: var(--muted);

  max-width: 760px;

  margin: 0 auto 36px;

  text-align: center;

}



.hxwx-actions {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

}



.hxwx-btn-primary {

  font-family: var(--font-base);

  font-size: calc(0.92rem * var(--text-scale));

  font-weight: 700;

  letter-spacing: 0.04em;

  min-height: 48px;

  padding: 12px 26px;

  border-radius: 4px;

  border: 1px solid var(--accent);

  background: var(--accent);

  color: var(--ink);

  display: inline-flex;

  align-items: center;

  gap: 10px;

  transition: all 0.2s ease;

  box-shadow: 0 4px 20px var(--accent-glow);

}



.hxwx-btn-primary:hover {

  background: #a5f2db;

  border-color: #a5f2db;

  transform: translateY(-2px);

  box-shadow: 0 8px 25px var(--accent-glow);

}



.hxwx-btn-ghost {

  font-family: var(--font-mono);

  font-size: calc(0.92rem * var(--text-scale));

  font-weight: 700;

  letter-spacing: 0.04em;

  min-height: 48px;

  padding: 12px 24px;

  border-radius: 4px;

  border: 1px solid var(--line-strong);

  background: var(--frame-bg);

  color: var(--paper);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  transition: all 0.2s ease;

}



.hxwx-btn-ghost:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--frame-bg-hover);

  transform: translateY(-2px);

}



/* ==========================================================================

   GENERIC SECTION LAYOUT (HAIRLINE DIVIDERS, CENTERED INNER CONTAINER)

   ========================================================================== */

.hxwx-section {

  padding: 96px 32px;

  border-top: 1px solid var(--line);

  background: transparent;

  scroll-margin-top: 20px;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  box-sizing: border-box;

}



.hxwx-section-inner {

  max-width: 1120px;

  width: 100%;

  margin: 0 auto;

}



.hxwx-section-header {

  max-width: 860px;

  width: 100%;

  margin: 0 auto 48px;

  text-align: center;

}



.hxwx-eyebrow {

  display: block;

  font-family: var(--font-base);

  font-size: calc(0.85rem * var(--text-scale));

  font-weight: 700;

  letter-spacing: 0.1em;

  color: var(--accent);

  margin: 0 auto 16px;

  text-transform: uppercase;

  text-align: center;

}



.hxwx-section-header h2 {

  font-family: var(--font-base);

  font-size: clamp(1.8rem, 3.4vw, 2.7rem);

  font-weight: 700;

  color: var(--paper);

  margin: 0 auto 16px;

  text-align: center;

  line-height: 1.25;

}



.hxwx-section-desc {

  font-family: var(--font-base);

  font-size: calc(0.95rem * var(--text-scale));

  line-height: 1.65;

  color: var(--muted);

  margin: 0 auto;

  max-width: 760px;

  text-align: center;

}



/* ==========================================================================

   SECTION 01: SERVICES (LACONIC BEAUTIFUL 2X2 FRAMES)

   ========================================================================== */

.hxwx-services-grid,

.hxwx-grid-2x2 {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 28px;

  max-width: 1120px;

  width: 100%;

  margin: 0 auto;

}



.hxwx-service-card {

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 32px 30px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  display: flex;

  flex-direction: column;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

  text-align: left;

}



.hxwx-service-card:hover {

  border-color: var(--line-strong);

  background: var(--frame-bg-hover);

  transform: translateY(-3px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

}



.hxwx-card-num {

  display: block;

  font-family: var(--font-base);

  font-size: 12px;

  font-weight: 700;

  color: var(--accent);

  margin-bottom: 14px;

  letter-spacing: 0.08em;

}



.hxwx-service-card:nth-child(2) .hxwx-card-num { color: #ffb2a5; }

.hxwx-service-card:nth-child(3) .hxwx-card-num { color: #e3df85; }

.hxwx-service-card:nth-child(4) .hxwx-card-num { color: var(--accent); }



.hxwx-service-title {

  font-family: var(--font-base);

  font-size: clamp(1.2rem, 1.8vw, 1.45rem);

  font-weight: 700;

  margin-bottom: 14px;

  color: var(--paper);

  line-height: 1.3;

}



.hxwx-service-card p {

  font-family: var(--font-base);

  font-size: 0.92rem;

  line-height: 1.65;

  color: var(--muted);

  margin-bottom: 18px;

}



.hxwx-card-benefit {

  font-family: var(--font-base);

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--accent);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: auto;

  padding-top: 14px;

  border-top: 1px solid var(--line-subtle);

}



/* ==========================================================================

   SECTION 02: IN ACTION / DEMO BOX (UNIFIED TRANSLUCENT GLASS CONTAINER)

   ========================================================================== */

#in-action .hxwx-section-inner {

  max-width: 1120px;

  width: 100%;

  margin: 0 auto;

}



#in-action .hxwx-section-header {

  max-width: 860px;

  width: 100%;

  margin: 0 auto 36px;

  text-align: center;

}



#in-action .hxwx-eyebrow {

  font-family: var(--font-mono);

  font-size: 11.5px;

  font-weight: 700;

  color: var(--accent);

  letter-spacing: 0.08em;

  text-transform: lowercase;

  margin-bottom: 12px;

  display: block;

}



#in-action .hxwx-section-header h2 {

  font-family: var(--font-base);

  font-size: clamp(2rem, 3.8vw, 2.7rem);

  font-weight: 400;

  color: var(--paper);

  letter-spacing: 0.02em;

  line-height: 1.25;

  margin: 0 auto 16px;

  text-align: center;

  text-transform: lowercase;

}



#in-action .hxwx-section-desc {

  font-family: var(--font-base);

  font-size: clamp(0.88rem, 1.15vw, 1rem);

  color: rgba(238, 244, 240, 0.72);

  line-height: 1.6;

  max-width: 740px;

  margin: 0 auto;

  text-align: center;

  text-transform: lowercase;

}



.hxwx-demo-box {

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 32px 36px 36px 36px;

  margin: 0 auto;

  max-width: 1120px;

  width: 100%;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}



.hxwx-demo-nav {

  display: flex;

  justify-content: center;

  gap: 12px;

  border-bottom: none !important;

  padding-bottom: 0;

  margin-bottom: 28px;

  flex-wrap: wrap;

}



.hxwx-demo-tab {

  font-family: var(--font-mono);

  font-size: 11.5px;

  font-weight: 600;

  padding: 8px 16px;

  border-radius: 4px;

  border: 1px solid var(--line);

  background: rgba(255, 255, 255, 0.03);

  color: var(--muted);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;

  transition: all 0.15s ease;

  text-transform: lowercase;

}



.hxwx-demo-tab:hover {

  border-color: var(--line-strong);

  color: var(--paper);

}



.hxwx-demo-tab.active {

  background: var(--accent);

  color: var(--ink);

  border-color: var(--accent);

  font-weight: 700;

}



.hxwx-flow-nodes {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-bottom: 30px;

}



.hxwx-flow-node {

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 4px;

  padding: 18px 16px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  position: relative;

  transition: all 0.2s ease;

  cursor: pointer;

}



.hxwx-flow-node:hover {

  border-color: var(--line-strong);

  background: rgba(255, 255, 255, 0.05);

}



.hxwx-flow-node.active,

.hxwx-flow-node.active-node {

  border-color: rgba(141, 232, 205, 0.45);

  background: rgba(141, 232, 205, 0.04);

}



.hxwx-node-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.hxwx-node-step,

.hxwx-node-idx {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--muted-dark);

}



.hxwx-flow-node.active-node .hxwx-node-step,

.hxwx-flow-node.active .hxwx-node-idx {

  color: var(--accent);

}



.hxwx-node-status {

  display: none;

}



.hxwx-node-title {

  font-family: var(--font-mono);

  font-size: 12.5px;

  font-weight: 700;

  color: var(--paper);

  text-transform: lowercase;

}



.hxwx-node-desc {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--muted-dark);

  line-height: 1.45;

  text-transform: lowercase;

}



.hxwx-node-desc strong,

.hxwx-node-desc b {

  font-weight: 700;

  color: #ffffff;

}



.hxwx-terminal {

  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible;

  padding: 0;

}



.hxwx-terminal-header {

  padding: 0;

  background: transparent !important;

  border-bottom: none !important;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--muted-dark);

  margin-bottom: 20px;

  text-transform: lowercase;

}



.hxwx-terminal-header span:first-child {

  color: var(--muted-dark);

}



.hxwx-terminal-body {

  padding: 0;

  display: grid;

  grid-template-columns: 1.05fr 1fr;

  gap: 40px;

}



.hxwx-term-block h5 {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--accent);

  margin-bottom: 12px;

  text-transform: lowercase;

  letter-spacing: 0.04em;

}



.hxwx-term-kv,

.hxwx-term-row {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  padding: 6px 0;

  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);

  font-family: var(--font-mono);

  font-size: 11.5px;

  text-transform: lowercase;

}



.hxwx-term-k {

  color: var(--muted-dark);

}



.hxwx-term-v {

  color: var(--paper);

  font-weight: 600;

  text-align: right;

}



#term-discovery-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--accent);

  color: var(--ink);

  border-radius: 4px;

  font-family: var(--font-mono);

  font-weight: 700;

  font-size: 11px;

  padding: 10px 18px;

  text-decoration: none;

  text-transform: lowercase;

  transition: all 0.2s ease;

  border: 1px solid var(--accent);

}



#term-discovery-btn:hover {

  background: #a5f2db;

  border-color: #a5f2db;

  transform: translateY(-1px);

}



/* ==========================================================================

   SECTION 03: PROCESS GRID (LACONIC 4-COLUMN CARDS)

   ========================================================================== */

.hxwx-process-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  max-width: 1120px;

  width: 100%;

  margin: 0 auto;

}



.hxwx-process-card {

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 26px 22px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  display: flex;

  flex-direction: column;

  transition: all 0.25s ease;

  text-align: left;

}



.hxwx-process-card:hover {

  border-color: var(--line-strong);

  background: var(--frame-bg-hover);

  transform: translateY(-2px);

}



.hxwx-process-step {

  font-family: var(--font-base);

  font-size: 11.5px;

  font-weight: 700;

  color: var(--accent);

  margin-bottom: 12px;

  letter-spacing: 0.06em;

}



.hxwx-process-card:nth-child(2) .hxwx-process-step { color: #ffb2a5; }

.hxwx-process-card:nth-child(3) .hxwx-process-step { color: #e3df85; }

.hxwx-process-card:nth-child(4) .hxwx-process-step { color: var(--accent); }



.hxwx-process-title {

  font-family: var(--font-base);

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--paper);

  margin-bottom: 12px;

  line-height: 1.3;

}



.hxwx-process-desc {

  font-family: var(--font-mono);

  font-size: 0.88rem;

  line-height: 1.6;

  color: var(--muted);

}



/* ==========================================================================

   SECTION 04: CV GRID (LACONIC 2-COLUMN CARDS)

   ========================================================================== */

.hxwx-cv-grid {

  display: grid;

  grid-template-columns: 1.15fr 1fr;

  gap: 28px;

  max-width: 1120px;

  width: 100%;

  margin: 0 auto;

}



.hxwx-cv-card {

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 34px 30px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  display: flex;

  flex-direction: column;

  text-align: left;

  transition: all 0.25s ease;

}



.hxwx-cv-card:hover {

  border-color: var(--line-strong);

  background: var(--frame-bg-hover);

}



.hxwx-badge {

  display: inline-block;

  align-self: flex-start;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.05em;

  padding: 5px 12px;

  border-radius: 3px;

  border: 1px solid var(--line);

  background: rgba(255, 255, 255, 0.04);

  color: var(--accent);

  margin-bottom: 20px;

}



.hxwx-cv-title {

  font-family: var(--font-base);

  font-size: clamp(1.25rem, 1.8vw, 1.55rem);

  font-weight: 700;

  color: var(--paper);

  margin-bottom: 16px;

  line-height: 1.3;

}



.hxwx-cv-desc {

  font-family: var(--font-mono);

  font-size: 0.92rem;

  line-height: 1.65;

  color: var(--muted);

  margin-bottom: 24px;

}



.hxwx-cv-actions {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: auto;

}



.hxwx-cv-btn {

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 700;

  padding: 10px 18px;

  border-radius: 4px;

  border: 1px solid var(--line);

  background: transparent;

  color: var(--paper);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: all 0.15s ease;

}



.hxwx-cv-btn:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--frame-bg-hover);

}



.hxwx-cv-btn.primary {

  background: var(--accent);

  border-color: var(--accent);

  color: var(--ink);

}



.hxwx-cv-btn.primary:hover {

  background: #a5f2db;

  border-color: #a5f2db;

}



.hxwx-pills-wrap {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 14px;

}



.hxwx-pill {

  font-family: var(--font-mono);

  font-size: 11px;

  padding: 6px 12px;

  border-radius: 4px;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, 0.2);

  color: var(--paper);

}



.hxwx-cv-note {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--muted-dark);

  font-style: italic;

  margin-top: 20px;

  line-height: 1.5;

  border-top: 1px solid var(--line-subtle);

  padding-top: 14px;

}



/* ==========================================================================

   SECTION 05: FAQ LIST (AUTHENTIC RETRO-TERMINAL ACCORDION DIVIDERS)

   ========================================================================== */

#faq .hxwx-section-inner {

  max-width: 1120px;

  width: 100%;

  margin: 0 auto;

}



#faq .hxwx-section-header {

  max-width: 860px;

  width: 100%;

  margin: 0 auto 36px auto;

  text-align: center;

}



#faq .hxwx-eyebrow {

  font-family: var(--font-mono);

  font-size: 11.5px;

  font-weight: 700;

  color: var(--accent);

  letter-spacing: 0.08em;

  text-transform: lowercase;

  margin-bottom: 12px;

  display: block;

  text-align: center;

}



#faq .hxwx-section-header h2 {

  font-family: var(--font-base);

  font-size: clamp(2rem, 3.8vw, 2.7rem);

  font-weight: 400;

  color: var(--paper);

  letter-spacing: 0.02em;

  line-height: 1.2;

  margin: 0 auto 14px auto;

  text-align: center;

  text-transform: lowercase;

}



#faq .hxwx-section-desc {

  font-family: var(--font-base);

  font-size: clamp(0.88rem, 1.15vw, 1rem);

  color: rgba(238, 244, 240, 0.72);

  line-height: 1.6;

  max-width: 680px;

  margin: 0 auto;

  text-align: center;

  text-transform: lowercase;

}



.hxwx-faq-list {

  width: 100%;

  max-width: 760px;

  margin: 36px auto 0 auto;

  border-top: 1px solid var(--line);

  display: flex;

  flex-direction: column;

  gap: 0;

}



.hxwx-faq-item {

  width: 100%;

  background: transparent !important;

  border: none !important;

  border-bottom: 1px solid var(--line) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  padding: 0 !important;

  margin: 0 !important;

  transition: border-color 0.2s ease;

}



.hxwx-faq-item:hover {

  border-bottom-color: var(--line-strong) !important;

}



.hxwx-faq-trigger {

  width: 100%;

  background: transparent;

  border: none;

  padding: 24px 0 20px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  color: var(--paper);

  font-family: var(--font-base);

  font-size: clamp(0.98rem, 1.25vw, 1.12rem);

  font-weight: 700;

  text-align: left;

  cursor: pointer;

  text-transform: lowercase;

  letter-spacing: -0.01em;

  transition: color 0.15s ease;

}



.hxwx-faq-trigger:hover {

  color: var(--accent);

}



.hxwx-faq-trigger span:first-child {

  flex: 1;

  padding-right: 24px;

}



.hxwx-faq-trigger strong,

.hxwx-faq-trigger b {

  font-weight: 700;

  color: #ffffff;

}



.hxwx-faq-icon {

  font-family: var(--font-base);

  font-size: 1.35rem;

  font-weight: 400;

  color: var(--accent);

  line-height: 1;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  user-select: none;

  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;

  flex-shrink: 0;

}



.hxwx-faq-item.open .hxwx-faq-icon {

  transform: rotate(45deg);

  color: var(--accent);

}



.hxwx-faq-body {

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.25s ease;

  padding: 0;

}



.hxwx-faq-item.open .hxwx-faq-body {

  max-height: 350px;

  opacity: 1;

  padding-bottom: 24px;

}



.hxwx-faq-body p {

  font-family: var(--font-base);

  font-size: clamp(0.88rem, 1.15vw, 0.98rem);

  line-height: 1.72;

  color: rgba(238, 244, 240, 0.78);

  text-transform: lowercase;

  margin: 0;

  letter-spacing: 0;

}



.hxwx-faq-body strong,

.hxwx-faq-body b {

  font-weight: 700;

  color: #ffffff;

}



/* ==========================================================================

   SECTION 05: CONTACT (PERFECTLY ALIGNED FRAMES & READABLE TYPOGRAPHY)

   ========================================================================== */

#contact .hxwx-section-inner {

  max-width: 1040px;

  width: 100%;

  margin: 0 auto;

}



#contact .hxwx-section-header {

  max-width: 860px;

  width: 100%;

  margin: 0 auto 36px auto;

  text-align: center;

}



#contact .hxwx-eyebrow {

  font-family: var(--font-mono);

  font-size: 11.5px;

  font-weight: 700;

  color: var(--accent);

  letter-spacing: 0.08em;

  text-transform: lowercase;

  margin-bottom: 12px;

  display: block;

  text-align: center;

}



#contact .hxwx-section-header h2 {

  font-family: var(--font-base);

  font-size: clamp(2rem, 3.8vw, 2.7rem);

  font-weight: 400;

  color: var(--paper);

  letter-spacing: 0.02em;

  line-height: 1.2;

  margin: 0 auto 14px auto;

  text-align: center;

  text-transform: lowercase;

}



#contact .hxwx-section-desc {

  font-family: var(--font-base);

  font-size: clamp(0.88rem, 1.15vw, 1rem);

  color: rgba(238, 244, 240, 0.72);

  line-height: 1.6;

  max-width: 680px;

  margin: 0 auto;

  text-align: center;

  text-transform: lowercase;

}



.hxwx-contact-box {

  display: grid;

  grid-template-columns: 1.1fr 1fr;

  gap: 32px;

  max-width: 1040px;

  width: 100%;

  margin: 0 auto;

  align-items: stretch;

}



/* Left Column Form */

.hxwx-contact-form {

  display: flex;

  flex-direction: column;

  gap: 16px;

  height: 100%;

  box-sizing: border-box;

}



.hxwx-form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

  text-align: left;

}



.hxwx-form-group.hxwx-form-group-grow {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.hxwx-form-group label,

.hxwx-label,

.hxwx-contact-links .hxwx-card-num {

  display: block;

  font-family: var(--font-mono) !important;

  font-size: 11.5px !important;

  font-weight: 700 !important;

  color: var(--accent) !important;

  letter-spacing: 0.06em !important;

  text-transform: lowercase !important;

  margin: 0 0 8px 0;

  height: 16px;

  line-height: 16px;

}



.hxwx-form-input,

.hxwx-form-textarea,

.hxwx-input,

.hxwx-textarea {

  font-family: var(--font-mono) !important;

  font-size: 13.5px !important;

  font-weight: 400 !important;

  line-height: 1.45;

  color: #ffffff !important;

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 13px 16px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  box-sizing: border-box;

  width: 100%;

  transition: all 0.2s ease;

}



.hxwx-form-group-grow .hxwx-textarea {

  flex: 1;

  min-height: 94px;

  resize: none;

}



.hxwx-form-input::placeholder,

.hxwx-form-textarea::placeholder,

.hxwx-input::placeholder,

.hxwx-textarea::placeholder {

  font-family: var(--font-mono) !important;

  color: rgba(238, 244, 240, 0.58) !important;

  font-size: 13px !important;

  font-weight: 400;

  letter-spacing: 0;

}



.hxwx-form-input:focus,

.hxwx-form-textarea:focus,

.hxwx-input:focus,

.hxwx-textarea:focus {

  border-color: var(--accent);

  background: rgba(255, 255, 255, 0.065);

  outline: none;

  box-shadow: 0 0 16px rgba(141, 232, 205, 0.12);

}



.hxwx-contact-submit {

  width: 100%;

  height: 48px;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  font-family: var(--font-mono) !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  letter-spacing: 0.04em !important;

  border-radius: 6px;

  border: none;

  background: var(--accent);

  color: #0d1217;

  cursor: pointer;

  transition: all 0.2s ease;

  box-sizing: border-box;

  margin-top: auto;

}



.hxwx-contact-submit:hover {

  background: #a2fae0;

  transform: translateY(-1px);

  box-shadow: 0 4px 18px rgba(141, 232, 205, 0.35);

}



/* Right Column Direct Channels */

.hxwx-contact-links {

  display: flex;

  flex-direction: column;

  height: 100%;

  box-sizing: border-box;

  gap: 8px;

}



.hxwx-contact-cards-group {

  display: flex;

  flex-direction: column;

  gap: 14px;

  flex: 1;

  min-height: 0;

}



.hxwx-direct-link {

  flex: 1;

  min-height: 78px;

  background: var(--frame-bg);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 16px 20px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  display: flex;

  align-items: center;

  gap: 16px;

  text-align: left;

  box-sizing: border-box;

  text-decoration: none;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.hxwx-direct-link:hover {

  border-color: var(--accent);

  background: var(--frame-bg-hover);

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);

}



.hxwx-direct-icon,

.hxwx-link-icon {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(141, 232, 205, 0.12);

  border: 1px solid rgba(141, 232, 205, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 17px;

  color: var(--accent);

  flex-shrink: 0;

}



.hxwx-direct-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

  flex: 1;

  min-width: 0;

}



.hxwx-direct-name {

  font-family: var(--font-mono) !important;

  font-size: 13.5px !important;

  font-weight: 700 !important;

  color: #ffffff !important;

  letter-spacing: 0.02em !important;

  line-height: 1.35 !important;

  text-transform: lowercase;

}



.hxwx-direct-hint {

  font-family: var(--font-mono) !important;

  font-size: 11.5px !important;

  font-weight: 400 !important;

  color: rgba(238, 244, 240, 0.78) !important;

  line-height: 1.45 !important;

  letter-spacing: 0 !important;

}



/* Footer */

.hxwx-footer {

  max-width: 1120px;

  width: 100%;

  margin: 60px auto 0;

  padding: 32px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-top: 1px solid var(--line);

  font-family: var(--font-base);

  font-size: 11px;

  color: var(--muted-dark);

}



/* ==========================================================================

   RESPONSIVE MEDIA QUERIES

   ========================================================================== */

@media (max-width: 1024px) {

  .hxwx-services-grid,

  .hxwx-grid-2x2,

  .hxwx-process-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .hxwx-cv-grid,

  .hxwx-contact-box {

    grid-template-columns: 1fr;

  }



  .hxwx-flow-nodes {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  .hxwx-vertical-nav {

    display: none;

  }



  .hxwx-main {

    margin-left: 0;

    width: 100%;

  }



  .hxwx-section {

    padding: 60px 20px;

  }



  .hxwx-services-grid,

  .hxwx-grid-2x2,

  .hxwx-process-grid,

  .hxwx-flow-nodes,

  .hxwx-terminal-body {

    grid-template-columns: 1fr;

  }



  .hxwx-top-bar,

  .hxwx-top-actions {

    top: 16px;

    right: 16px;

  }



  .hxwx-footer {

    padding: 24px 20px;

    flex-direction: column;

    gap: 12px;

    text-align: center;

  }

}