/* MODERNIZUOTAS CSS - 2026 STILIUS */
    /* ============================================ */

    :root {
      --quantum: #00f0ff;
      --cosmic-purple: #a855f7;
      --cosmic-pink: #ec4899;
      --cosmic-blue: #3b82f6;
      --cosmic-green: #10b981;
      --cosmic-yellow: #f59e0b;
      --cosmic-red: #ef4444;
      --bg-deep: #000000;
      --bg-darker: #050510;
      --bg-dark: #0a0a1a;
      --glass-bg: rgba(10, 10, 30, 0.78);
      --glass-border: rgba(0, 240, 255, 0.25);
      --glass-border-hover: rgba(0, 240, 255, 0.55);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    background: var(--bg-deep);
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    line-height: 1.6;
    scroll-behavior: smooth;
    }

    /* ===== TYPOGRAPHY ===== */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .font-orbitron {
      font-family: 'Orbitron', sans-serif;
    }

    .font-inter {
      font-family: 'Inter', sans-serif;
    }

    /* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}
/* Prevent horizontal overflow */
html, body {
max-width: 100%;
overflow-x: hidden;
}

/* Safe container */
.section-safe {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

/* Grid protection */
.grid {
max-width: 100%;
}
    @media (max-width: 768px) {
      .container {
        padding: 0 1.5rem;
      }
    }

    /* ===== TEXT EFFECTS ===== */
    .glitch {
      position: relative;
      animation: glitch 4s infinite;
    }

    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .glitch::before {
      left: 2px;
      text-shadow: -2px 0 var(--cosmic-purple);
      clip: rect(24px, 550px, 90px, 0);
      animation: glitch-anim 3s infinite linear alternate-reverse;
    }

    .glitch::after {
      left: -2px;
      text-shadow: -2px 0 var(--quantum);
      clip: rect(85px, 550px, 140px, 0);
      animation: glitch-anim 2s infinite linear alternate-reverse;
    }

    @keyframes glitch {

      0%,
      100% {
        transform: skew(0deg);
      }

      95% {
        transform: skew(2deg);
      }

      96% {
        transform: skew(-2deg);
      }

      97% {
        transform: skew(0deg);
      }
    }

    @keyframes glitch-anim {
      0% {
        clip: rect(42px, 9999px, 44px, 0);
      }

      5% {
        clip: rect(12px, 9999px, 59px, 0);
      }

      10% {
        clip: rect(48px, 9999px, 29px, 0);
      }

      15% {
        clip: rect(42px, 9999px, 73px, 0);
      }

      20% {
        clip: rect(63px, 9999px, 27px, 0);
      }

      25% {
        clip: rect(34px, 9999px, 55px, 0);
      }

      30% {
        clip: rect(86px, 9999px, 73px, 0);
      }

      35% {
        clip: rect(20px, 9999px, 20px, 0);
      }

      40% {
        clip: rect(26px, 9999px, 60px, 0);
      }

      45% {
        clip: rect(25px, 9999px, 66px, 0);
      }

      50% {
        clip: rect(57px, 9999px, 98px, 0);
      }

      55% {
        clip: rect(5px, 9999px, 46px, 0);
      }

      60% {
        clip: rect(82px, 9999px, 31px, 0);
      }

      65% {
        clip: rect(54px, 9999px, 27px, 0);
      }

      70% {
        clip: rect(28px, 9999px, 99px, 0);
      }

      75% {
        clip: rect(45px, 9999px, 69px, 0);
      }

      80% {
        clip: rect(23px, 9999px, 85px, 0);
      }

      85% {
        clip: rect(54px, 9999px, 84px, 0);
      }

      90% {
        clip: rect(45px, 9999px, 47px, 0);
      }

      95% {
        clip: rect(37px, 9999px, 20px, 0);
      }

      100% {
        clip: rect(4px, 9999px, 91px, 0);
      }
    }

    .quantum-gradient {
      background: linear-gradient(135deg,
          var(--quantum) 0%,
          var(--cosmic-purple) 25%,
          var(--cosmic-blue) 50%,
          var(--cosmic-pink) 75%,
          var(--quantum) 100%);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: quantumGradient 10s ease infinite;
    }

    @keyframes quantumGradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .neon-glow {
      text-shadow:
        0 0 20px var(--quantum),
        0 0 40px var(--quantum),
        0 0 60px var(--cosmic-purple);
    }

    .neon-glow-blue {
      text-shadow: 0 0 20px var(--cosmic-blue), 0 0 40px var(--cosmic-blue);
    }

    .neon-glow-purple {
      text-shadow: 0 0 20px var(--cosmic-purple), 0 0 40px var(--cosmic-purple);
    }

    .neon-glow-pink {
      text-shadow: 0 0 20px var(--cosmic-pink), 0 0 40px var(--cosmic-pink);
    }

    /* ===== BACKGROUNDS ===== */
    .grid-bg {
      background-image:
        linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      background-attachment: fixed;
    }

    .grid-bg-dynamic {
      background-image:
        linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: gridShift 30s linear infinite;
    }

    .grid-bg-light {
      background-image:
        linear-gradient(rgba(168, 85, 247, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.02) 1px, transparent 1px);
      background-size: 80px 80px;
    }

    .noise-bg {
      position: relative;
    }

    .noise-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc0IiBudW1PY3RhdmVzPSIzIiAvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNmKSIgb3BhY2l0eT0iMC4wNSIgLz48L3N2Zz4=');
      opacity: 0.1;
      pointer-events: none;
      z-index: 1;
    }

    /* ===== GLASS CARDS ===== */
    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid var(--glass-border);
      border-radius: 2rem;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      will-change: transform, border-color, box-shadow;
      max-width: 100%;
      overflow: hidden;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    }

    .glass-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 70%);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }

    .glass-card:hover {
      border-color: var(--glass-border-hover);
      box-shadow:
        0 18px 42px rgba(0, 240, 255, 0.10),
        0 24px 56px rgba(168, 85, 247, 0.08),
        0 16px 34px rgba(0, 0, 0, 0.16);
      transform: translateY(-6px) scale(1.012);
    }

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

    .glass-card-lg {
      background: rgba(10, 10, 30, 0.88);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 240, 255, 0.28);
      border-radius: 2.5rem;
    }

    .glass-card-sm {
      background: rgba(10, 10, 30, 0.65);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 1.5rem;
    }

    .glass-card-cosmic {
      background: linear-gradient(135deg, rgba(10, 10, 30, 0.82), rgba(20, 5, 40, 0.82));
      backdrop-filter: blur(14px);
      border: 1px solid rgba(168, 85, 247, 0.3);
    }

    /* Cosmic-card: mažesnis skaidrumas, kad boxai nesusilietų su fonu */
    .cosmic-card {
      background: rgba(10, 10, 28, 0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(0, 240, 255, 0.2);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
    }
    .cosmic-glow {
      box-shadow: 0 0 28px rgba(0, 240, 255, 0.10), 0 0 56px rgba(168, 85, 247, 0.06);
    }

    /* ===== BUTTONS ===== */
    .btn-glow {
      position: relative;
      background: linear-gradient(135deg,
          rgba(0, 240, 255, 0.2),
          rgba(168, 85, 247, 0.2));
      border: 1px solid rgba(0, 240, 255, 0.3);
      border-radius: 9999px;
      padding: 1rem 2.5rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: white;
      overflow: hidden;
      transition: all 0.4s ease;
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
      z-index: 1;
    }

    .btn-glow::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent);
      transition: left 0.7s ease;
      z-index: -1;
    }

    .btn-glow:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow:
        0 0 30px rgba(0, 240, 255, 0.4),
        0 0 60px rgba(168, 85, 247, 0.3);
      border-color: rgba(0, 240, 255, 0.6);
    }

    .btn-glow:hover::before {
      left: 100%;
    }

    .btn-glow:active {
      transform: translateY(-1px) scale(1.02);
    }

    .btn-quantum {
      background: linear-gradient(135deg, var(--quantum), var(--cosmic-purple));
      border: none;
      box-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
    }

    .btn-quantum:hover {
      box-shadow: 0 0 50px rgba(0, 240, 255, 0.6);
    }

    .btn-outline {
      background: transparent;
      border: 2px solid rgba(0, 240, 255, 0.3);
      color: white;
      transition: all 0.3s ease;
    }

    .btn-outline:hover {
      border-color: var(--quantum);
      background: rgba(0, 240, 255, 0.05);
      transform: translateY(-2px);
    }

    /* ===== PROGRESS BARS ===== */
    .progress-bar {
      width: 100%;
      height: 8px;
      background: rgba(75, 85, 99, 0.3);
      border-radius: 9999px;
      overflow: hidden;
      position: relative;
    }

    .progress-fill {
      height: 100%;
      border-radius: 9999px;
      background: linear-gradient(90deg, var(--quantum), var(--cosmic-purple));
      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .progress-fill::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent);
      animation: progressShimmer 2s infinite;
    }

    @keyframes progressShimmer {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    .progress-bar-glow {
      box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    }

    /* ===== NODES & INDICATORS ===== */
    .node {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 8px;
      animation: nodePulse 2s ease-in-out infinite;
    }

    .node-b1 {
      background: var(--quantum);
      box-shadow: 0 0 20px var(--quantum);
    }

    .node-b2 {
      background: var(--cosmic-purple);
      box-shadow: 0 0 20px var(--cosmic-purple);
    }

    .node-b3 {
      background: var(--cosmic-blue);
      box-shadow: 0 0 20px var(--cosmic-blue);
    }

    .node-b4 {
      background: var(--cosmic-pink);
      box-shadow: 0 0 20px var(--cosmic-pink);
    }

    .node-b5 {
      background: var(--cosmic-yellow);
      box-shadow: 0 0 20px var(--cosmic-yellow);
    }

    .node-green {
      background: var(--cosmic-green);
      box-shadow: 0 0 20px var(--cosmic-green);
    }

    .node-red {
      background: var(--cosmic-red);
      box-shadow: 0 0 20px var(--cosmic-red);
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--quantum);
      animation: pulse 2s ease-in-out infinite;
    }

    /* ===== QUANTUM BORDERS ===== */
    .quantum-border {
      border: 1px solid rgba(0, 240, 255, 0.3);
      box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
      position: relative;
    }

    .quantum-border::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(135deg, var(--quantum), var(--cosmic-purple), transparent 70%);
      border-radius: inherit;
      z-index: -1;
      opacity: 0.5;
      filter: blur(10px);
    }

    .quantum-border-animated {
      border: 1px solid transparent;
      background: linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
        linear-gradient(135deg, var(--quantum), var(--cosmic-purple)) border-box;
      animation: borderRotate 4s linear infinite;
    }

    @keyframes borderRotate {
      0% {
        border-image-source: linear-gradient(0deg, var(--quantum), var(--cosmic-purple));
      }

      100% {
        border-image-source: linear-gradient(360deg, var(--quantum), var(--cosmic-purple));
      }
    }

    /* ===== CANVAS CONTAINER ===== */
    #canvas-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.9;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    /* ===== CONTENT LAYER ===== */
    .content {
      position: relative;
      z-index: 10;
      min-height: 100vh;
      pointer-events: auto;
    }

    /* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg-darker);
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, var(--quantum), var(--cosmic-purple));
      border-radius: 9999px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, var(--cosmic-purple), var(--quantum));
    }

    /* ===== ANIMATIONS ===== */
    .float {
      animation: float 7s ease-in-out infinite;
    }

    .float-slow {
      animation: float 12s ease-in-out infinite;
    }

    .float-reverse {
      animation: float 8s ease-in-out infinite reverse;
    }

    .pulse {
      animation: pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .pulse-slow {
      animation: pulse 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .pulse-slower {
      animation: pulse 10s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .scan {
      animation: scan 10s linear infinite;
    }

    .scan-slow {
      animation: scan 15s linear infinite;
    }

    .spin-slow {
      animation: spin 20s linear infinite;
    }

    .spin-slower {
      animation: spin 30s linear infinite;
    }

    .spin-reverse {
      animation: spin 20s linear infinite reverse;
    }

    .glow {
      animation: glow 3s ease-in-out infinite;
    }

    .glow-slow {
      animation: glow 5s ease-in-out infinite;
    }

    .flicker {
      animation: flicker 3s linear infinite;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .glass-card {
        border-radius: 1.5rem;
      }

      .btn-glow {
        padding: 0.875rem 2rem;
        font-size: 0.875rem;
      }
    }

    @media (max-width: 768px) {
      .container {
        padding: 0 1rem;
      }

      h1 {
        font-size: 3rem;
      }

      h2 {
        font-size: 2.5rem;
      }
    }

    @media (max-width: 640px) {
      h1 {
        font-size: 2.5rem;
      }

      h2 {
        font-size: 2rem;
      }

      .glass-card {
        border-radius: 1.25rem;
      }
    }

    /* ===== ACCESSIBILITY ===== */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      #canvas-container {
        display: none !important;
      }
    }

    /* ===== UTILITY CLASSES ===== */
    .text-shadow-quantum {
      text-shadow: 0 0 20px var(--quantum);
    }

    .text-shadow-purple {
      text-shadow: 0 0 20px var(--cosmic-purple);
    }

    .text-shadow-blue {
      text-shadow: 0 0 20px var(--cosmic-blue);
    }

    .box-shadow-quantum {
      box-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
    }

    .box-shadow-purple {
      box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
    }

    .backdrop-blur-custom {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .bg-gradient-quantum {
      background: linear-gradient(135deg,
          rgba(0, 240, 255, 0.18),
          rgba(168, 85, 247, 0.18));
    }

    .border-gradient {
      border: 2px solid transparent;
      background: linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
        linear-gradient(135deg, var(--quantum), var(--cosmic-purple)) border-box;


    /* ===== FULL-WIDTH TOP MENU UNIFICATION (public pages) ===== */
    body .content > nav.fixed.top-0.left-0.right-0 {
      padding: 16px 20px !important;
      background: rgba(3, 7, 18, 0.90) !important;
      border-bottom: 1px solid rgba(0, 240, 255, 0.20) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 > .container {
      max-width: none !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      gap: 16px !important;
      align-items: center !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 a.group.flex.items-baseline {
      align-items: center !important;
      gap: 8px !important;
      padding: 6px 10px !important;
      border-radius: 8px !important;
      transition: color 0.2s, background 0.2s !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 a.group.flex.items-baseline:hover {
      background: rgba(0, 240, 255, 0.08) !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 a.group.flex.items-baseline span:last-child {
      font-size: 0.70rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.06em !important;
      color: #9ca3af !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 a.group.flex.items-baseline:hover span:last-child {
      color: #00f0ff !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 .nav-icon-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px !important;
      border-radius: 8px !important;
      font-family: 'Orbitron', sans-serif !important;
      font-size: 0.60rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      transition: color 0.2s, background 0.2s, border-color 0.2s !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 .nav-icon-btn.bg-gradient-to-r {
      color: #fff !important;
      border: 1px solid transparent !important;
      background: linear-gradient(90deg, rgba(0,240,255,0.4), rgba(168,85,247,0.4)) !important;
      box-shadow: none !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 .nav-icon-btn:not(.bg-gradient-to-r) {
      box-shadow: none !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 .nav-icon-btn:hover {
      transform: none !important;
      filter: brightness(1.05);
    }

    body .content > nav.fixed.top-0.left-0.right-0 #mobile-menu-btn {
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      border-radius: 10px !important;
      background: rgba(255,255,255,0.06) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      color: #e5e7eb !important;
      box-shadow: none !important;
    }

    body .content > nav.fixed.top-0.left-0.right-0 #mobile-menu-btn:hover {
      background: rgba(0,240,255,0.10) !important;
      border-color: rgba(0,240,255,0.30) !important;
      color: #00f0ff !important;
    }

    body #mobile-menu {
      background: rgba(3, 7, 18, 0.97) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }

    body #mobile-menu a {
      font-family: 'Orbitron', sans-serif !important;
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      color: #9ca3af !important;
      border-radius: 12px !important;
      transition: color 0.2s, background 0.2s !important;
    }

    body #mobile-menu a:hover,
    body #mobile-menu a:focus {
      color: #00f0ff !important;
      background: rgba(0,240,255,0.10) !important;
    }

    body #mobile-menu .mobile-lang a.flag-circle {
      font-family: inherit !important;
      font-size: 0 !important;
      font-weight: normal !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      padding: 0 !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      max-width: none !important;
      color: transparent !important;
      line-height: 0 !important;
    }

    body #mobile-menu .mobile-lang a.flag-circle:hover,
    body #mobile-menu .mobile-lang a.flag-circle:focus {
      color: transparent !important;
      background: transparent !important;
    }

    @media (max-width: 1024px) {
      body .content > nav.fixed.top-0.left-0.right-0 {
        padding: 14px 16px !important;
      }

      body .content > nav.fixed.top-0.left-0.right-0 > .container {
        gap: 12px !important;
      }
    }

    /* ===== UNIFIED FULL-WIDTH HEADER (index, intro, marketing, …) ===== */
    .top-bar {
      flex: none;
      padding: 16px 20px;
      background: rgba(3, 7, 18, 0.9);
      border-bottom: 1px solid rgba(0, 240, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      position: relative;
      z-index: 60;
    }

    .top-bar .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      min-width: 0;
    }

    .top-bar .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, #00f0ff, #a855f7);
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
      flex-shrink: 0;
    }

    .top-bar .logo-text {
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      font-size: 1.35rem;
      letter-spacing: -0.02em;
      background: linear-gradient(90deg, #00f0ff, #a855f7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .top-bar .live-badge {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(0, 240, 255, 0.8);
    }

    .top-bar .nav {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .top-bar .nav > a {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      color: #9ca3af;
      padding: 6px 10px;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
    }

    .top-bar .nav > a:hover {
      color: #00f0ff;
      background: rgba(0, 240, 255, 0.08);
    }

    .top-bar .nav > a.active {
      color: #00f0ff;
      background: rgba(0, 240, 255, 0.12);
    }

    .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: 10px;
    }

    .flag-circle {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.15);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .flag-circle:hover {
      transform: scale(1.05);
      border-color: rgba(0, 240, 255, 0.35);
    }

    .flag-circle.active {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .flag {
      display: block;
      width: 100%;
      height: 100%;
    }

    .flag-lt {
      background: linear-gradient(180deg, #fdb913 0%, #fdb913 33%, #006a44 33%, #006a44 66%, #c1272d 66%, #c1272d 100%);
    }

    .flag-uk {
      background: linear-gradient(90deg, #012169 0%, #012169 100%);
      position: relative;
    }

    .flag-uk::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, transparent 42%, white 42%, white 58%, transparent 58%),
        linear-gradient(90deg, transparent 42%, white 42%, white 58%, transparent 58%);
    }

    .flag-uk::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54%),
        linear-gradient(90deg, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54%);
    }

    .top-bar .resonance-block {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding-right: 16px;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      margin-right: 8px;
    }

    .top-bar .resonance-label {
      font-size: 0.55rem;
      font-family: ui-monospace, monospace;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #6b7280;
    }

    .top-bar .resonance-value {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      color: #00f0ff;
    }

    .top-bar .resonance-ok {
      font-size: 0.55rem;
      font-family: ui-monospace, monospace;
      font-weight: 700;
      color: #22c55e;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .top-bar .nav-icons {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .top-bar .nav-icons a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      border-radius: 8px;
      font-family: 'Orbitron', sans-serif;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      transition: color 0.2s, background 0.2s, border-color 0.2s;
    }

    .top-bar .nav-icons a.nav-live {
      color: #00f0ff;
      border: 1px solid rgba(0, 240, 255, 0.35);
      background: rgba(0, 240, 255, 0.08);
    }

    .top-bar .nav-icons a.nav-live:hover {
      background: rgba(0, 240, 255, 0.15);
      border-color: rgba(0, 240, 255, 0.5);
    }

    .top-bar .nav-icons a.nav-astro {
      color: #a855f7;
      border: 1px solid rgba(168, 85, 247, 0.35);
      background: rgba(168, 85, 247, 0.06);
    }

    .top-bar .nav-icons a.nav-astro:hover {
      background: rgba(168, 85, 247, 0.12);
      border-color: rgba(168, 85, 247, 0.5);
    }

    .top-bar .nav-icons a.nav-host {
      color: #fff;
      border: 1px solid transparent;
      background: linear-gradient(90deg, rgba(0, 240, 255, 0.4), rgba(168, 85, 247, 0.4));
    }

    .top-bar .nav-icons a.nav-host:hover {
      opacity: 0.95;
      filter: brightness(1.1);
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      color: #e5e7eb;
      cursor: pointer;
      font-size: 1.25rem;
      -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle:hover {
      background: rgba(0, 240, 255, 0.1);
      border-color: rgba(0, 240, 255, 0.3);
      color: #00f0ff;
    }

    .menu-toggle:focus {
      outline: none;
    }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(3, 7, 18, 0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 2rem;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      text-align: center;
    }

    .mobile-menu.open {
      display: flex;
      opacity: 1;
      visibility: visible;
    }

    .mobile-menu a {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      color: #9ca3af;
      padding: 14px 20px;
      width: 100%;
      max-width: 280px;
      text-align: center;
      border-radius: 12px;
      transition: color 0.2s, background 0.2s;
    }

    .mobile-menu a:hover,
    .mobile-menu a:focus {
      color: #00f0ff;
      background: rgba(0, 240, 255, 0.1);
    }

    .mobile-menu a.active {
      color: #00f0ff;
      background: rgba(0, 240, 255, 0.15);
    }

    .mobile-menu a.ext {
      color: #a855f7;
    }

    .mobile-menu a.ext:hover {
      color: #c084fc;
      background: rgba(168, 85, 247, 0.1);
    }

    .mobile-lang {
      margin: 12px 0 4px;
    }

    .mobile-menu .mobile-lang {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: auto;
      max-width: none;
      padding: 0;
      background: transparent;
      border: 0;
    }

    .mobile-menu .mobile-lang .flag-circle {
      display: inline-flex !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px;
      max-width: 32px;
      padding: 0;
      border-radius: 999px;
      overflow: hidden;
      text-align: center;
      flex: 0 0 32px;
    }

    .mobile-menu .mobile-lang .flag-circle:hover,
    .mobile-menu .mobile-lang .flag-circle:focus {
      background: transparent;
    }

    @media (max-width: 1100px) {
      .top-bar .nav {
        gap: 4px;
      }

      .top-bar .nav > a {
        font-size: 0.64rem;
        padding: 6px 8px;
      }
    }

    @media (max-width: 900px) {
      .top-bar {
        padding: 14px 16px;
      }

      .top-bar .nav,
      .top-bar .resonance-block,
      .top-bar .nav-icons {
        display: none;
      }

      .menu-toggle {
        display: flex;
      }

      .top-bar .logo-text {
        font-size: 1.2rem;
      }
    }