/* ==========================================================================
   AkreTrix Group — Enterprise Technical Design System

   Theming
   -------
   Every colour is a semantic token. The dark palette lives on :root and is the
   brand default; the light palette overrides those same token names, so no rule
   further down this file needs to know which theme is active.

   The accent washes are built with color-mix() from --accent-cyan rather than
   being hardcoded tints. Custom properties resolve lazily, so redefining
   --accent-cyan for light mode re-derives every wash from it automatically.

   Light mode is NOT the dark palette inverted. Electric cyan (#00E5FF) sits at
   1.4:1 on white — unreadable — so light mode moves the accent to a deep teal
   and drops the glows, which only read as glows against near-black.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --bg-deep: #02050e;
  --bg-dark: #030712;
  --bg-tools: #080f20;
  --bg-card: #0b1120;
  --bg-elevated: #0d1527;
  --bg-card-hover: #111827;
  --bg-glass: rgba(11, 17, 32, 0.75);
  --bg-input: #050a14;
  --bg-code: #040812;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-light: #0b1120;
  --surface-hover: #0c1833;
  --tech-band: rgba(11, 17, 32, 0.4);

  /* Brand accents */
  --accent-cyan: #00E5FF;
  --accent-cyan-hover: #33ebff;
  --accent-blue: #0077FF;
  --accent-cyan-glow: rgba(0, 229, 255, 0.35);
  --accent-cyan-glow-strong: rgba(0, 229, 255, 0.5);
  --accent-blue-glow: rgba(0, 119, 255, 0.4);
  /* Text/icons placed ON a filled accent surface. */
  --on-accent: #030712;

  /* Accent tints, all derived from --accent-cyan */
  --accent-wash-weak: color-mix(in srgb, var(--accent-cyan) 6%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  --accent-wash-strong: color-mix(in srgb, var(--accent-cyan) 20%, transparent);
  --accent-line: color-mix(in srgb, var(--accent-cyan) 30%, transparent);
  --accent-line-strong: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
  --blue-wash: color-mix(in srgb, var(--accent-blue) 15%, transparent);
  --blue-line: color-mix(in srgb, var(--accent-blue) 30%, transparent);

  /* Text */
  --text-main: #FFFFFF;
  --text-light: #FFFFFF;
  --text-muted: #8b949e;
  --text-subtle: #484f58;
  --text-tag: #a0aec0;
  --text-badge-cat: #60a5fa;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(0, 229, 255, 0.3);
  --grid-line: rgba(255, 255, 255, 0.04);

  /* Status */
  --success: #34d399;
  --success-wash: rgba(52, 211, 153, 0.1);
  --success-line: rgba(52, 211, 153, 0.3);
  --warning: #f59e0b;
  --warning-wash: rgba(245, 158, 11, 0.12);
  --warning-line: rgba(245, 158, 11, 0.45);
  --danger: #f87171;
  --danger-wash: rgba(248, 113, 113, 0.12);
  --danger-line: rgba(248, 113, 113, 0.25);

  /* Depth */
  --shadow-sm: rgba(0, 0, 0, 0.4);
  --shadow-md: rgba(0, 0, 0, 0.5);
  --shadow-lg: rgba(0, 0, 0, 0.7);
  --shadow-xl: rgba(0, 0, 0, 0.8);
  --overlay: rgba(3, 7, 18, 0.85);

  /* Terminal syntax */
  --syntax-comment: #5c6370;
  --syntax-keyword: #c678dd;
  --syntax-string: #98c379;
  --syntax-func: #61afef;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container-max: 1240px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Light palette.

   Declared twice on purpose. CSS cannot share one declaration block between a
   media query and an attribute selector, and both paths are needed: the media
   query serves visitors whose OS asks for light and who have not overridden it
   (including when JavaScript is unavailable), while the attribute selector
   serves an explicit pick from the theme toggle. Keep the two blocks in sync.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg-deep: #e6ecf5;
    --bg-dark: #f4f7fb;
    --bg-tools: #eaf0f8;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-card-hover: #f8fafd;
    --bg-glass: rgba(255, 255, 255, 0.82);
    --bg-input: #ffffff;
    --bg-code: #f1f5fa;
    --surface: rgba(11, 17, 32, 0.04);
    --surface-light: #ffffff;
    --surface-hover: #f4f8ff;
    --tech-band: rgba(11, 17, 32, 0.03);

    --accent-cyan: #0e7490;
    --accent-cyan-hover: #0891b2;
    --accent-blue: #0059c1;
    --accent-cyan-glow: rgba(14, 116, 144, 0.16);
    --accent-cyan-glow-strong: rgba(14, 116, 144, 0.28);
    --accent-blue-glow: rgba(0, 89, 193, 0.18);
    --on-accent: #ffffff;

    --text-main: #0b1120;
    --text-light: #0b1120;
    --text-muted: #4b5563;
    --text-subtle: #6b7280;
    --text-tag: #475569;
    --text-badge-cat: #1d4ed8;

    --border-subtle: rgba(11, 17, 32, 0.12);
    --border-glow: rgba(14, 116, 144, 0.35);
    --grid-line: rgba(11, 17, 32, 0.035);

    --success: #047857;
    --success-wash: rgba(4, 120, 87, 0.1);
    --success-line: rgba(4, 120, 87, 0.3);
    --warning: #b45309;
    --warning-wash: rgba(180, 83, 9, 0.1);
    --warning-line: rgba(180, 83, 9, 0.35);
    --danger: #b91c1c;
    --danger-wash: rgba(185, 28, 28, 0.09);
    --danger-line: rgba(185, 28, 28, 0.28);

    --shadow-sm: rgba(15, 23, 42, 0.08);
    --shadow-md: rgba(15, 23, 42, 0.12);
    --shadow-lg: rgba(15, 23, 42, 0.16);
    --shadow-xl: rgba(15, 23, 42, 0.2);
    --overlay: rgba(15, 23, 42, 0.45);

    --syntax-comment: #6b7280;
    --syntax-keyword: #7c3aed;
    --syntax-string: #15803d;
    --syntax-func: #1d4ed8;
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-deep: #e6ecf5;
  --bg-dark: #f4f7fb;
  --bg-tools: #eaf0f8;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-card-hover: #f8fafd;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-input: #ffffff;
  --bg-code: #f1f5fa;
  --surface: rgba(11, 17, 32, 0.04);
  --surface-light: #ffffff;
  --surface-hover: #f4f8ff;
  --tech-band: rgba(11, 17, 32, 0.03);

  --accent-cyan: #0e7490;
  --accent-cyan-hover: #0891b2;
  --accent-blue: #0059c1;
  --accent-cyan-glow: rgba(14, 116, 144, 0.16);
  --accent-cyan-glow-strong: rgba(14, 116, 144, 0.28);
  --accent-blue-glow: rgba(0, 89, 193, 0.18);
  --on-accent: #ffffff;

  --text-main: #0b1120;
  --text-light: #0b1120;
  --text-muted: #4b5563;
  --text-subtle: #6b7280;
  --text-tag: #475569;
  --text-badge-cat: #1d4ed8;

  --border-subtle: rgba(11, 17, 32, 0.12);
  --border-glow: rgba(14, 116, 144, 0.35);
  --grid-line: rgba(11, 17, 32, 0.035);

  --success: #047857;
  --success-wash: rgba(4, 120, 87, 0.1);
  --success-line: rgba(4, 120, 87, 0.3);
  --warning: #b45309;
  --warning-wash: rgba(180, 83, 9, 0.1);
  --warning-line: rgba(180, 83, 9, 0.35);
  --danger: #b91c1c;
  --danger-wash: rgba(185, 28, 28, 0.09);
  --danger-line: rgba(185, 28, 28, 0.28);

  --shadow-sm: rgba(15, 23, 42, 0.08);
  --shadow-md: rgba(15, 23, 42, 0.12);
  --shadow-lg: rgba(15, 23, 42, 0.16);
  --shadow-xl: rgba(15, 23, 42, 0.2);
  --overlay: rgba(15, 23, 42, 0.45);

  --syntax-comment: #6b7280;
  --syntax-keyword: #7c3aed;
  --syntax-string: #15803d;
  --syntax-func: #1d4ed8;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  /* Must stay tokenised. A hardcoded dark value here paints the whole top of the
     viewport dark in light mode — the hero sits in exactly that region — which
     also hides the hex overlay, since its lines are a low-alpha navy. */
  background: radial-gradient(circle at 50% 0%, var(--bg-elevated) 0%, var(--bg-dark) 70%);
  min-height: 100vh;
}

/* Visible keyboard focus for every interactive element. Uses :focus-visible so
   pointer users don't see a ring on click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

@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;
  }
}

/* Background Honeycomb (Bee Panel) Overlay */
.grid-bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--grid-line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='34.64' height='60' viewBox='0 0 34.64 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L17.32 10V30L0 40V60M17.32 30L34.64 40M17.32 10L34.64 0' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='34.64' height='60' viewBox='0 0 34.64 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L17.32 10V30L0 40V60M17.32 30L34.64 40M17.32 10L34.64 0' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: 69.28px 120px;
  mask-size: 69.28px 120px;
  pointer-events: none;
  z-index: 0;
}

/* Typography Utilities */
h1, h2, h3, h4 {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Gradient headline text.
   `color` is a real fallback, not decoration: the gradient is only visible
   because it is clipped to the glyphs, so anything that strips background
   images (forced-colors mode, printing, an engine without clip-to-text) would
   otherwise leave transparent — invisible — text. The fill is therefore only
   made transparent where clipping is actually supported. */
.gradient-text {
  color: var(--text-main);
  background-image: linear-gradient(135deg, #FFFFFF 0%, #00E5FF 55%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-theme="light"] .gradient-text {
  background-image: linear-gradient(135deg, #0b1120 0%, #0891b2 55%, #0284c7 100%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .gradient-text {
    background-image: linear-gradient(135deg, #0b1120 0%, #0891b2 55%, #0284c7 100%);
  }
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradient-text {
    -webkit-text-fill-color: transparent;
  }
}

/* High-contrast modes discard the gradient, so hand the glyphs back a colour. */
@media (forced-colors: active) {
  .gradient-text {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    forced-color-adjust: auto;
  }
}

@media print {
  .gradient-text {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

.cyan-text {
  color: var(--accent-cyan);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 100;
  transition: var(--transition-normal);
}

/* Elevated state once the page scrolls. Driven by a class from app.js so the
   colours stay themeable. */
.navbar.scrolled {
  border-bottom-color: var(--accent-line);
  box-shadow: 0 10px 30px var(--shadow-xl);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

.logo-mark {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-mark svg {
  width: 20px;
  height: 20px;
  fill: var(--on-accent);
}

.logo-mark img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain;
  display: block;
}

.dropdown-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-name span {
  color: var(--accent-cyan);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--text-main);
}

.nav-link:hover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  border-radius: 2px;
}

/* Products Dropdown Navigation Menu */
.nav-item-dropdown {
  position: relative;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 290px;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 40px var(--shadow-lg), 0 0 20px var(--accent-cyan-glow);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  z-index: 110;
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--accent-wash-weak);
}

.dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--accent-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.dropdown-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.dropdown-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Multi-column Grouped Dropdown Menu */
.dropdown-menu.dropdown-menu-wide {
  width: 670px;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}

.dropdown-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-column:first-child {
  position: relative;
  padding-right: 14px;
  border-right: 1px solid var(--border-subtle);
}

.dropdown-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border-subtle);
}

.dropdown-group-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}

.dropdown-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
  display: inline-block;
  line-height: 1.3;
}

.badge-cyan {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
  cursor: pointer;
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-wash-weak);
}

.nav-cta-btn:hover {
  background: var(--accent-cyan);
  color: var(--on-accent);
  box-shadow: 0 0 24px var(--accent-cyan-glow);
  transform: translateY(-1px);
}

.argos-btn {
  border-color: var(--accent-cyan);
  background: linear-gradient(135deg, var(--accent-wash), var(--blue-wash));
  box-shadow: 0 0 16px var(--accent-cyan-glow);
}

/* ==========================================================================
   Theme + language controls
   ========================================================================== */
.nav-utilities {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent-wash-weak);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--accent-wash);
}

.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent-wash-weak);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lang-toggle-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--accent-wash);
}

/* Screen-reader-only text that still gets announced. */
.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;
}

.mobile-utilities {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.mobile-utility-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
}

/* Mobile Nav Drawer */
.mobile-menu {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-120%);
  transition: var(--transition-normal);
  z-index: 99;
}

.mobile-menu.active {
  transform: translateY(0);
}

.mobile-menu .nav-link {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 8px;
  transition: var(--transition-fast);
  color: var(--text-main);
}

.mobile-menu .nav-link:hover {
  background: var(--surface-hover);
  color: var(--accent-cyan);
}

.mobile-nav-group {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}

.mobile-nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
}

.mobile-nav-header:hover,
.mobile-nav-header.expanded {
  background: var(--surface-hover);
  color: var(--accent-cyan);
}

.mobile-nav-header .mobile-arrow {
  transition: transform 0.2s ease;
}

.mobile-nav-header.expanded .mobile-arrow {
  transform: rotate(180deg);
}

.mobile-submenu {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px 12px 10px;
}

.mobile-submenu.open {
  display: flex;
}

.mobile-group-tag {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-cyan);
  padding: 6px 8px 2px 8px;
  font-weight: 700;
}

.mobile-sublink {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.02);
  transition: var(--transition-fast);
}

.mobile-sublink:hover {
  background: var(--surface-hover);
  color: var(--accent-cyan);
}

.mobile-sublink-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.mobile-sublink-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-sublink:hover .mobile-sublink-title {
  color: var(--accent-cyan);
}

.mobile-sublink-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  padding: 160px 0 100px 0;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.tagline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--accent-wash-weak);
  border: 1px solid var(--accent-line);
  color: var(--accent-cyan);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}

.badge-pulse {
  width: 8px;
  height: 8px;
  background: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.hero-headline {
  font-size: 3.5rem;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}

.hero-description {
  font-size: 1.2rem;
  margin-bottom: 36px;
  max-width: 540px;
}

.hero-section div[style*="text-align: center"] .hero-description,
.hero-section div[style*="text-align:center"] .hero-description {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 14px 28px;
  border-radius: 8px;
  background: var(--accent-cyan);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 0 24px var(--accent-cyan-glow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  background: var(--accent-cyan-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 32px var(--accent-cyan-glow-strong);
}

/* Success confirmation state for a submitted form button. */
.btn-primary.btn-success {
  background: var(--success);
  color: var(--on-accent);
  box-shadow: none;
}

.btn-secondary {
  padding: 14px 28px;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-cyan);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--accent-line);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: var(--accent-wash-weak);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

/* Terminal Interactive Preview Widget */
.hero-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.hero-feature-card {
  background: var(--surface-light);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-feature-card:hover {
  border-color: var(--accent-cyan);
  background: var(--surface-hover);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px var(--accent-cyan-glow);
}

.hero-feature-card .feature-icon {
  font-size: 24px;
  background: var(--surface);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.hero-feature-card h4 {
  font-size: 1.1rem;
  color: var(--text-light);
  margin: 0;
}

.hero-feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.t-comment { color: var(--syntax-comment); }
.t-keyword { color: var(--syntax-keyword); }
.t-string { color: var(--syntax-string); }
.t-func { color: var(--syntax-func); }
.t-cyan { color: var(--accent-cyan); }
.t-success { color: var(--success); }

/* ==========================================================================
   3. Comprehensive Services Grid (3x2 Grid)
   ========================================================================== */
.services-section {
  padding: 100px 0;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-tag {
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.section-subtitle {
  max-width: 600px;
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 32px;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0;
  transition: var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-6px);
  background: var(--bg-card-hover);
  border-color: var(--border-glow);
  box-shadow: 0 16px 40px var(--shadow-sm), 0 0 24px var(--accent-cyan-glow);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent-wash-weak);
  border: 1px solid var(--accent-wash-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  margin-bottom: 24px;
}

.service-title {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.service-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}

.service-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-tag);
}

/* ==========================================================================
   4. Technology Stack Banner (Marquee)
   ========================================================================== */
.tech-section {
  padding: 60px 0;
  background: var(--tech-band);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

.marquee-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.marquee-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.tech-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-main);
  white-space: nowrap;
}

.tech-badge svg {
  width: 20px;
  height: 20px;
  color: var(--accent-cyan);
}

/* ==========================================================================
   5. Interactive Review Modal & Contact Section
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--overlay);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-normal);
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  padding: 40px;
  box-shadow: 0 25px 60px var(--shadow-xl), 0 0 30px var(--accent-cyan-glow);
  transform: scale(0.92);
  transition: var(--transition-normal);
  position: relative;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.success-icon-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px auto;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(0, 119, 255, 0.12));
  border: 1px solid rgba(0, 229, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  box-shadow: 0 0 30px var(--accent-cyan-glow), inset 0 0 15px rgba(0, 229, 255, 0.15);
}

.btn-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glow);
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-modal-close:hover {
  background: var(--accent-wash-weak);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 16px var(--accent-cyan-glow);
}

.modal-backdrop.active .modal-card {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-close:hover {
  color: var(--accent-cyan);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-fast);
}

.form-select option, .form-select optgroup {
  background: var(--bg-card);
  color: var(--text-main);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}

/* ==========================================================================
   FREE TOOLS DIRECTORY SECTION
   ========================================================================== */
.tools-section {
  padding: 100px 0;
  background: radial-gradient(circle at 50% 50%, var(--bg-tools) 0%, var(--bg-dark) 100%);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

/* Two-by-two at desktop: the live catalogue is small, and an auto-fill grid
   left the last card stranded alone on its own row with dead space beside it. */
.tools-grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

/* The card itself is the button — resets the UA button styling first. */
.tool-card {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-normal);
  position: relative;
  text-decoration: none;
  color: inherit;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: 0 12px 30px var(--shadow-md), 0 0 20px var(--accent-cyan-glow);
  background: var(--bg-card-hover);
}

/* Hovering the card lights up its call to action, since they are now one
   control rather than two. */
.tool-card:hover .tool-launch-btn {
  background: var(--accent-wash);
  border-color: var(--accent-cyan);
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.tool-badge-cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--blue-wash);
  border: 1px solid var(--blue-line);
  color: var(--text-badge-cat);
}

/* No glow here: the card's call to action is the one cyan element that should
   pull the eye, and a glowing badge was competing with it. */
.tool-badge-new {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line-strong);
  color: var(--accent-cyan);
}

/* Shown on tools that aren't wired up yet, so the label reads as a release
   state to a visitor rather than as internal architecture jargon. */
.tool-badge-pending {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--warning-wash);
  border: 1px solid var(--warning-line);
  color: var(--warning);
}

.tool-card-title {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Hugs its label instead of stretching the full card width, which used to leave
   a ~230px gap between the text and its arrow. */
.tool-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent-wash-weak);
  border: 1px solid var(--accent-wash-strong);
  color: var(--accent-cyan);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
}

.tool-card:hover .tool-launch-btn svg {
  transform: translateX(3px);
}

.tool-launch-btn svg {
  transition: var(--transition-fast);
}

.tool-executor-card {
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.tool-workbench-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tool-result-box {
  background: var(--bg-code);
  border: 1px solid var(--border-glow);
  border-radius: 10px;
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.6;
}

.tool-action-bar {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */
.footer {
  padding: 80px 0 40px 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand-desc {
  margin-top: 16px;
  font-size: 0.9rem;
  max-width: 320px;
}

.footer-heading {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-cyan);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 16px;
  background: var(--success-wash);
  border: 1px solid var(--success-line);
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 600;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* Theme and language controls move into the drawer at this width. */
  .nav-links, .nav-cta-btn, .nav-utilities {
    display: none;
  }

  .mobile-menu .nav-cta-btn {
    display: inline-flex;
  }

  .mobile-toggle {
    display: block;
  }
  
  .carousel-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
  }
  
  .carousel-indicators .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    transition: var(--transition-fast);
    cursor: pointer;
  }
  
  .carousel-indicators .dot.active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan-glow);
    transform: scale(1.2);
  }

  .hero-headline {
    font-size: 2.5rem;
  }
  
  .services-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar {
    display: none;
  }
  .service-card {
    min-width: 280px;
    width: 80vw;
    max-width: 320px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .tools-grid-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tools-grid-container::-webkit-scrollbar {
    display: none;
  }
  .tool-card {
    min-width: 280px;
    width: 80vw;
    max-width: 320px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}