/* Global Styles */
    html, body { width: 100%; height:100%; margin:0; padding:0; background:#000000; overflow:hidden; user-select: none; }
    #app { position:fixed; inset:0; outline:none; }
    canvas { display:block; width:100%; height:100%; }

    body { font-family: 'Segoe UI', 'Roboto', monospace; color: rgba(255,255,255,0.8); }

    /* ═══════════════════════════════════════════════════════════════ */
    /* PERFORMANCE - GPU Acceleration Hints */
    /* ═══════════════════════════════════════════════════════════════ */
    .hud-panel, .section-panel, .modal, .overlay-container, .intro-container {
      will-change: transform, opacity;
    }
    .nav-btn, .service-card, .submit-btn, .cookie-btn {
      will-change: transform;
    }
    .chat-panel, .cookie-banner, .policy-modal {
      will-change: transform, opacity;
    }
    /* Remove will-change after animation to free GPU memory */
    .section-panel:not(.active),
    .chat-panel:not(.active) {
      will-change: auto;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* ACCESSIBILITY - Focus Indicators (WCAG 2.4.7) */
    /* ═══════════════════════════════════════════════════════════════ */
    *:focus {
      outline: none;
    }
    *:focus-visible {
      outline: 2px solid #409cff !important;
      outline-offset: 3px !important;
      box-shadow: 0 0 0 4px rgba(64, 156, 255, 0.25) !important;
    }
    button:focus-visible,
    a:focus-visible,
    .nav-btn:focus-visible,
    .nav-item:focus-visible,
    .service-card:focus-visible,
    .panel-close:focus-visible,
    .cookie-btn:focus-visible {
      outline: 2px solid #409cff !important;
      outline-offset: 3px !important;
      box-shadow: 0 0 0 4px rgba(64, 156, 255, 0.25) !important;
      transition: outline 0.1s ease, box-shadow 0.1s ease !important;
    }
    /* Skip link for screen readers */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      background: #409cff;
      color: #000;
      padding: 12px 24px;
      font-weight: bold;
      z-index: 100000;
      border-radius: 0 0 8px 8px;
      text-decoration: none;
      transition: top 0.3s ease;
    }
    .skip-link:focus {
      top: 0;
    }
    /* SEO H1 - Visually hidden but accessible to search engines */
    .seo-h1 {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* UI Styles */
    .glass-panel {
      background: rgba(10, 16, 26, 0.85);
      border: 1px solid rgba(100, 200, 255, 0.25);
      backdrop-filter: blur(20px);
      border-radius: 8px;
      box-shadow: 0 0 40px rgba(0,0,0,0.6);
    }

    .date-display {
      position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
      padding: 8px 40px; pointer-events: none; text-align: center; letter-spacing: 2px;
    }
    .date-year { font-size: 24px; color: #fff; font-weight: 300; }
    .date-full { font-size: 11px; color: #409cff; margin-top: 4px; opacity: 0.9; text-transform: uppercase;}

    .nav-menu {
      position: absolute; top: 120px; left: 30px; width: 220px;
      padding: 15px 0; pointer-events: auto;
      max-height: 70vh; overflow-y: auto;
      transition: transform 0.3s ease; display: none;
    }
    .nav-menu::-webkit-scrollbar { width: 3px; }
    .nav-menu::-webkit-scrollbar-thumb { background: #409cff; border-radius: 2px; }

    .nav-title {
      padding: 0 20px 10px; font-size: 12px; color: #409cff; letter-spacing: 3px; font-weight: bold;
      border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 5px;
    }
    .nav-group-title {
        padding: 15px 20px 5px; font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px;
    }
    .nav-item {
      padding: 8px 20px; cursor: pointer; font-size: 12px; color: rgba(255,255,255,0.9);
      transition: all 0.2s; display: flex; justify-content: space-between; align-items: center;
    }
    .nav-item:hover { background: rgba(64, 156, 255, 0.1); color: #fff; padding-left: 28px; }
    .nav-item.active { background: linear-gradient(90deg, rgba(64,156,255,0.2), transparent); color: #fff; border-left: 3px solid #409cff;}

    .type-galaxy { color: #d4aaff; }
    .type-nebula { color: #ff99aa; }
    .type-probe { color: #ffd700; }
    .type-blackhole { color: #ff4444; font-weight: bold; text-shadow: 0 0 5px rgba(255,0,0,0.5);}

    .brand-box { position: absolute; top: 30px; left: 30px; pointer-events: none; }
    .brand {
      font-size: 24px; font-weight: 800; letter-spacing: 0.2em; color: #fff;
      text-shadow: 0 0 30px rgba(64, 156, 255, 0.8);
      border-left: 4px solid #409cff; padding-left: 15px;
    }
    .brand span { font-size: 10px; display: block; opacity: 0.7; font-weight: 400; letter-spacing: 0.3em; margin-top: 4px; color: #409cff;}

    .bottom-bar {
      position: fixed; bottom: 100px; left: 0; right: 0; height: 60px;
      background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
      z-index: 450; display: flex; justify-content: center; align-items: center;
      pointer-events: auto;
    }

    .time-control { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .time-label { font-size: 9px; color: #409cff; letter-spacing: 3px; opacity: 0.7; }
    input[type=range] {
      -webkit-appearance: none; width: 400px; height: 2px; background: rgba(255,255,255,0.15);
      outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 30px; height: 10px; background: #409cff;
      cursor: pointer; border-radius: 1px; box-shadow: 0 0 15px #409cff;
      transition: transform 0.1s;
    }
    input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); background: #fff;}

    .hud-panel {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 280px; padding: 30px; pointer-events: none;
      transition: opacity 0.3s ease-out, transform 0.3s ease-out;
      opacity: 0;
      right: 40px; text-align: right;
    }
    .hud-panel.visible { opacity: 1; transform: translate(0, -50%); }

    .hud-title { font-size: 28px; color: #fff; font-weight: 200; letter-spacing: 4px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 15px; text-transform: uppercase;}
    .hud-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
    .hud-label { color: rgba(255,255,255,0.7); letter-spacing: 1px;}
    .hud-value { color: #409cff; font-family: monospace; font-size: 13px; font-weight: bold;}

    .reticle {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 300px; height: 300px;
      border: 1px solid rgba(255,255,255,0.08); border-radius: 50%;
      pointer-events: none; opacity: 0; transition: opacity 0.5s;
    }
    .reticle::before {
      content: ''; position: absolute; top: 50%; left: 50%; width: 280px; height: 280px;
      border: 1px dashed rgba(64, 156, 255, 0.3); border-radius: 50%;
      animation: spin 60s linear infinite; transform: translate(-50%, -50%);
    }
    .reticle.visible { opacity: 1; }
    @keyframes spin { from {transform:translate(-50%,-50%) rotate(0deg);} to {transform:translate(-50%,-50%) rotate(360deg);} }

    .loader {
        position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
        color: #409cff; font-size: 12px; letter-spacing: 0.3em;
        animation: pulse 2s infinite; text-transform: uppercase;
        background: rgba(0,0,0,0.8); padding: 20px; border: 1px solid #409cff; border-radius: 4px;
    }
    @keyframes pulse { 0% {opacity:0.4;} 50% {opacity:1;} 100% {opacity:0.4;} }

    /* MAIN NAVIGATION */
    .main-nav {
      position: absolute;
      top: 20px; right: 25px;
      display: flex; gap: 10px;
      z-index: 1000;
    }
    .nav-btn {
      padding: 11px 16px;
      background: rgba(5, 10, 20, 0.9);
      border: 1px solid rgba(64, 156, 255, 0.3);
      border-radius: 10px;
      color: #00d4ff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(15px);
      position: relative;
      overflow: hidden;
      text-shadow:
        0 0 5px #00d4ff,
        0 0 10px #00d4ff,
        0 0 20px #00d4ff,
        0 0 40px #0088ff,
        0 0 80px #0088ff;
      animation: neonTextPulse 2s ease-in-out infinite;
    }
    @keyframes neonTextPulse {
      0%, 100% {
        text-shadow:
          0 0 5px #00d4ff,
          0 0 10px #00d4ff,
          0 0 20px #00d4ff,
          0 0 40px #0088ff,
          0 0 80px #0088ff;
        color: #00d4ff;
      }
      50% {
        text-shadow:
          0 0 2px #00ffff,
          0 0 5px #00ffff,
          0 0 10px #00ffff,
          0 0 20px #00d4ff,
          0 0 40px #0088ff;
        color: #00ffff;
      }
    }
    .nav-btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(64, 156, 255, 0.2), transparent);
      transition: left 0.5s;
    }
    .nav-btn:hover::before {
      left: 100%;
    }
    .nav-btn:hover {
      background: rgba(0, 212, 255, 0.15);
      border-color: rgba(0, 212, 255, 0.6);
      color: #fff;
      transform: translateY(-3px);
      text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 80px #00d4ff,
        0 0 120px #0088ff;
    }
    .nav-btn.active {
      background: rgba(0, 212, 255, 0.1);
      border-color: #00d4ff;
      color: #fff;
      text-shadow:
        0 0 5px #fff,
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00d4ff,
        0 0 80px #0088ff;
    }
    .nav-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0; left: 20%; right: 20%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #409cff, transparent);
    }

    /* SECTION PANELS */
    .section-panel {
      position: fixed;
      top: 45%; left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: 92%;
      max-width: 1150px;
      max-height: 88vh;
      background: rgba(5, 12, 25, 0.96);
      border: 1px solid rgba(64, 156, 255, 0.25);
      backdrop-filter: blur(25px);
      border-radius: 20px;
      padding: 45px 50px;
      overflow-y: auto;
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .section-panel.active {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }
    .section-panel::-webkit-scrollbar { width: 5px; }
    .section-panel::-webkit-scrollbar-thumb { background: linear-gradient(#409cff, #7b2dff); border-radius: 3px; }

    .panel-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 35px; padding-bottom: 20px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .panel-title {
      font-size: 28px; font-weight: 200; color: #fff;
      letter-spacing: 5px; text-transform: uppercase;
    }
    .panel-subtitle {
      color: rgba(255,255,255,0.5); font-size: 12px;
      margin-top: 8px; letter-spacing: 2px;
    }
    .panel-close {
      width: 45px; height: 45px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%; color: #fff;
      font-size: 22px; cursor: pointer;
      transition: all 0.3s;
      display: flex; align-items: center; justify-content: center;
    }
    .panel-close:hover {
      background: rgba(255, 80, 80, 0.25);
      border-color: #ff5050;
      transform: rotate(90deg);
    }

    /* SERVICE CARDS */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
    }
    .service-card {
      background: rgba(64, 156, 255, 0.04);
      border: 1px solid rgba(64, 156, 255, 0.12);
      border-radius: 16px;
      padding: 30px;
      transition: all 0.4s;
    }
    .service-card:hover {
      background: rgba(64, 156, 255, 0.1);
      border-color: rgba(64, 156, 255, 0.4);
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(64, 156, 255, 0.15);
    }
    .service-card .icon {
      width: 50px; height: 50px;
      margin-bottom: 18px;
      color: #409cff;
    }
    .service-card .icon svg {
      width: 100%; height: 100%;
    }
    .service-card h3 { color: #fff; font-size: 16px; margin-bottom: 10px; letter-spacing: 1px; }
    .service-card p { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.7; }
    .service-price {
      color: #00ff88; font-weight: bold; margin-top: 15px; font-size: 18px;
      display: flex; align-items: center; gap: 10px;
    }
    .service-price small { color: rgba(255,255,255,0.4); font-size: 11px; font-weight: normal; }

    /* DETAILED SERVICE CARDS */
    .service-detailed-card {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.05), rgba(123, 45, 255, 0.03));
      border: 1px solid rgba(64, 156, 255, 0.15);
      border-radius: 20px;
      margin-bottom: 25px;
      overflow: hidden;
      transition: all 0.4s ease;
    }
    .service-detailed-card:hover {
      border-color: rgba(64, 156, 255, 0.4);
      box-shadow: 0 15px 50px rgba(64, 156, 255, 0.1);
    }
    .service-detailed-header {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 25px 30px;
      background: rgba(0, 0, 0, 0.2);
      border-bottom: 1px solid rgba(64, 156, 255, 0.1);
    }
    .service-detailed-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.2), rgba(123, 45, 255, 0.2));
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #409cff;
      flex-shrink: 0;
    }
    .service-detailed-icon svg { width: 30px; height: 30px; }
    .service-detailed-icon.blue { background: linear-gradient(135deg, rgba(64, 156, 255, 0.2), rgba(0, 212, 255, 0.2)); color: #00d4ff; }
    .service-detailed-icon.gold { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)); color: #ffd700; }
    .service-detailed-icon.green { background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(40, 167, 69, 0.2)); color: #00ff88; }
    .service-detailed-icon.purple { background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(123, 45, 255, 0.2)); color: #8a2be2; }
    .service-detailed-icon.pink { background: linear-gradient(135deg, rgba(255, 105, 180, 0.2), rgba(255, 20, 147, 0.2)); color: #ff69b4; }
    .service-detailed-icon.cyan { background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(64, 224, 208, 0.2)); color: #00ffff; }
    .service-detailed-title { flex: 1; }
    .service-detailed-title h3 { color: #fff; font-size: 20px; margin: 0 0 5px 0; letter-spacing: 1px; }
    .service-detailed-price { color: rgba(255,255,255,0.5); font-size: 14px; }
    .service-detailed-price span { color: #00ff88; font-weight: bold; font-size: 22px; }
    .service-detailed-badge {
      background: linear-gradient(135deg, #409cff, #7b2dff);
      color: #fff;
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .service-detailed-badge.blue { background: linear-gradient(135deg, #00d4ff, #409cff); }
    .service-detailed-badge.gold { background: linear-gradient(135deg, #ffd700, #ff8c00); }
    .service-detailed-badge.green { background: linear-gradient(135deg, #00ff88, #28a745); }
    .service-detailed-badge.purple { background: linear-gradient(135deg, #8a2be2, #7b2dff); }
    .service-detailed-badge.pink { background: linear-gradient(135deg, #ff69b4, #ff1493); }
    .service-detailed-badge.cyan { background: linear-gradient(135deg, #00ffff, #40e0d0); color: #000; }
    .service-detailed-content { padding: 30px; }
    .service-intro {
      color: rgba(255,255,255,0.8);
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 25px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(64, 156, 255, 0.1);
    }
    .service-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
    .service-feature-group { margin-bottom: 15px; }
    .service-feature-group h4 {
      color: #409cff;
      font-size: 14px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .service-feature-group ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .service-feature-group ul li {
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      line-height: 1.7;
      padding: 8px 0;
      padding-left: 20px;
      position: relative;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .service-feature-group ul li:last-child { border-bottom: none; }
    .service-feature-group ul li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      color: #00ff88;
      font-weight: bold;
    }
    .service-feature-group ul li strong { color: #fff; }
    .service-ideal {
      margin-top: 25px;
      padding: 15px 20px;
      background: rgba(64, 156, 255, 0.08);
      border-radius: 10px;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      line-height: 1.6;
    }
    .service-ideal strong { color: #409cff; }

    @media (max-width: 768px) {
      .service-detailed-header { flex-wrap: wrap; padding: 20px; }
      .service-detailed-icon { width: 50px; height: 50px; }
      .service-detailed-icon svg { width: 24px; height: 24px; }
      .service-detailed-title h3 { font-size: 16px; }
      .service-detailed-badge { margin-top: 10px; }
      .service-detailed-content { padding: 20px; }
      .service-features { grid-template-columns: 1fr; }
      .service-intro { font-size: 14px; }
    }

    /* CALCULATOR */
    .calc-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
    }
    @media (max-width: 900px) { .calc-container { grid-template-columns: 1fr; } }
    .calc-form { display: flex; flex-direction: column; gap: 25px; }
    .calc-group label {
      display: block; font-size: 10px; color: #409cff;
      letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase;
    }
    .calc-group select {
      width: 100%; padding: 16px 20px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px; color: #fff;
      font-size: 14px; cursor: pointer;
      transition: all 0.3s;
    }
    .calc-group select:focus {
      border-color: #409cff;
      outline: none;
      box-shadow: 0 0 25px rgba(64, 156, 255, 0.2);
    }
    .calc-group select option { background: #0a1628; }
    .calc-result {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.08), rgba(123, 45, 255, 0.08));
      border: 1px solid rgba(64, 156, 255, 0.25);
      border-radius: 20px; padding: 45px; text-align: center;
    }
    .calc-label { font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 3px; margin-bottom: 15px; }
    .calc-price { font-size: 4rem; font-weight: 200; color: #fff; letter-spacing: 3px; }
    .calc-price span { color: #409cff; }
    .calc-range { color: rgba(255,255,255,0.4); margin-top: 12px; font-size: 13px; }
    .calc-discount {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #00ff88, #409cff);
      color: #000; font-size: 11px; font-weight: 700;
      padding: 12px 28px; border-radius: 25px; margin-top: 25px;
      letter-spacing: 1px;
    }

    /* Calculator Tabs */
    .calc-tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 30px;
    }
    .calc-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 24px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      color: rgba(255,255,255,0.6);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }
    .calc-tab:hover {
      background: rgba(64, 156, 255, 0.1);
      border-color: rgba(64, 156, 255, 0.3);
      color: #fff;
    }
    .calc-tab.active {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.15), rgba(123, 45, 255, 0.15));
      border-color: #409cff;
      color: #fff;
    }
    .calc-tab svg { color: currentColor; }

    .calc-tab-content {
      display: none;
    }
    .calc-tab-content.active {
      display: block;
      animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Extended Calculator */
    .calc-container-extended {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 40px;
    }
    @media (max-width: 1000px) {
      .calc-container-extended { grid-template-columns: 1fr; }
    }
    .calc-form-extended {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    /* Slider */
    .calc-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
      outline: none;
      margin-top: 10px;
    }
    .calc-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(64, 156, 255, 0.5);
    }
    .slider-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    /* Extras Checkboxes */
    .calc-extras-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    @media (max-width: 600px) {
      .calc-extras-grid { grid-template-columns: 1fr; }
    }
    .calc-checkbox {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 15px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .calc-checkbox:hover {
      background: rgba(64, 156, 255, 0.08);
      border-color: rgba(64, 156, 255, 0.3);
    }
    .calc-checkbox input {
      display: none;
    }
    .calc-checkbox .checkmark {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 4px;
      position: relative;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .calc-checkbox input:checked + .checkmark {
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border-color: transparent;
    }
    .calc-checkbox input:checked + .checkmark::after {
      content: '\2713';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 12px;
      font-weight: bold;
    }
    .checkbox-label {
      font-size: 12px;
      color: rgba(255,255,255,0.8);
      flex: 1;
    }
    .extra-price {
      color: #00ff88;
      font-weight: 600;
      font-size: 11px;
    }

    /* Result Extended */
    .calc-result-extended {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .calc-result-card {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.08), rgba(123, 45, 255, 0.08));
      border: 1px solid rgba(64, 156, 255, 0.25);
      border-radius: 16px;
      padding: 30px;
      text-align: center;
    }

    /* Breakdown */
    .calc-breakdown {
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 20px;
    }
    .breakdown-title {
      font-size: 10px;
      color: #409cff;
      letter-spacing: 2px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .breakdown-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 13px;
      color: rgba(255,255,255,0.6);
    }
    .breakdown-row.total {
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: 10px;
      padding-top: 15px;
      font-weight: bold;
      color: #fff;
    }
    .breakdown-row.total span:last-child {
      color: #00ff88;
      font-size: 16px;
    }

    /* Get Quote Button */
    .get-quote-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 18px 30px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .get-quote-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(64, 156, 255, 0.4);
    }

    .calc-note {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      text-align: center;
      line-height: 1.6;
    }

    /* Custom Project Form */
    .custom-project-form {
      max-width: 800px;
      margin: 0 auto;
    }
    .custom-intro {
      text-align: center;
      margin-bottom: 35px;
    }
    .custom-intro h3 {
      font-size: 22px;
      color: #fff;
      margin-bottom: 10px;
    }
    .custom-intro p {
      color: rgba(255,255,255,0.6);
      font-size: 14px;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
    }
    .custom-project-form .form-group {
      margin-bottom: 0;
    }
    .custom-project-form .form-group.full-width {
      margin-bottom: 20px;
    }
    .custom-project-form label {
      display: block;
      font-size: 11px;
      color: #409cff;
      letter-spacing: 1px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }
    .custom-project-form input,
    .custom-project-form select,
    .custom-project-form textarea {
      width: 100%;
      padding: 14px 18px;
      background: rgba(10, 22, 40, 0.95);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      color: #fff;
      font-size: 14px;
      transition: all 0.3s;
    }
    .custom-project-form select option {
      background: #0a1628;
      color: #fff;
      padding: 12px;
    }
    .custom-project-form input:focus,
    .custom-project-form select:focus,
    .custom-project-form textarea:focus {
      border-color: #409cff;
      outline: none;
      box-shadow: 0 0 20px rgba(64, 156, 255, 0.15);
    }
    .custom-project-form textarea {
      resize: vertical;
      min-height: 120px;
    }
    .submit-custom-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 18px 30px;
      background: linear-gradient(135deg, #00ff88, #409cff);
      border: none;
      border-radius: 12px;
      color: #000;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 10px;
    }
    .submit-custom-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(0, 255, 136, 0.3);
    }
    .submit-custom-btn .btn-text {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .submit-custom-btn .btn-loader {
      display: none;
    }
    .submit-custom-btn.loading .btn-text { display: none; }
    .submit-custom-btn.loading .btn-loader {
      display: block;
      width: 20px;
      height: 20px;
      border: 2px solid transparent;
      border-top-color: #000;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    /* TEAM */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
    }
    .team-card {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.06), rgba(123, 45, 255, 0.06));
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 20px; padding: 40px; text-align: center;
      transition: all 0.4s;
    }
    .team-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 25px 60px rgba(64, 156, 255, 0.2);
    }
    .team-avatar {
      width: 120px; height: 120px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border-radius: 50%; margin: 0 auto 25px;
      display: flex; align-items: center; justify-content: center;
      font-size: 3.5rem;
      box-shadow: 0 0 40px rgba(64, 156, 255, 0.4);
    }
    .team-name { font-size: 18px; color: #fff; margin-bottom: 8px; letter-spacing: 1px; }
    .team-role { font-size: 10px; color: #409cff; letter-spacing: 3px; margin-bottom: 20px; text-transform: uppercase; }
    .team-bio { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.8; }

    /* FACTS - Enhanced */
    .facts-category {
      margin-bottom: 40px;
    }
    .facts-category-title {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 16px;
      color: #fff;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(64, 156, 255, 0.2);
    }
    .category-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.2), rgba(123, 45, 255, 0.2));
      border-radius: 10px;
      font-size: 20px;
    }
    .category-icon.blue { background: linear-gradient(135deg, rgba(64, 156, 255, 0.2), rgba(0, 212, 255, 0.2)); }
    .category-icon.purple { background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(123, 45, 255, 0.2)); }
    .category-icon.green { background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(40, 167, 69, 0.2)); }
    .facts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .facts-grid.animated .fact-card {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease forwards;
      animation-delay: var(--delay, 0s);
    }
    @keyframes fadeInUp {
      to { opacity: 1; transform: translateY(0); }
    }
    .fact-card {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), rgba(64, 156, 255, 0.02));
      border: 1px solid rgba(255, 215, 0, 0.15);
      border-radius: 16px;
      padding: 25px;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }
    .fact-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #ffd700, #409cff);
      transform: scaleX(0);
      transition: transform 0.4s ease;
    }
    .fact-card:hover::before { transform: scaleX(1); }
    .fact-card:hover {
      background: rgba(255, 215, 0, 0.08);
      border-color: rgba(255, 215, 0, 0.35);
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(255, 215, 0, 0.1);
    }
    .fact-card.cosmic {
      background: linear-gradient(135deg, rgba(138, 43, 226, 0.06), rgba(64, 156, 255, 0.03));
      border-color: rgba(138, 43, 226, 0.2);
    }
    .fact-card.cosmic::before { background: linear-gradient(90deg, #8a2be2, #00d4ff); }
    .fact-card.cosmic:hover { border-color: rgba(138, 43, 226, 0.4); box-shadow: 0 15px 40px rgba(138, 43, 226, 0.1); }
    .fact-card.business {
      background: linear-gradient(135deg, rgba(0, 255, 136, 0.04), rgba(64, 156, 255, 0.02));
      border-color: rgba(0, 255, 136, 0.15);
    }
    .fact-card.business::before { background: linear-gradient(90deg, #00ff88, #409cff); }
    .fact-card.business:hover { border-color: rgba(0, 255, 136, 0.35); box-shadow: 0 15px 40px rgba(0, 255, 136, 0.1); }
    .fact-number {
      font-size: 32px;
      font-weight: 200;
      color: #ffd700;
      margin-bottom: 10px;
      letter-spacing: 2px;
    }
    .fact-card.cosmic .fact-number { color: #8a2be2; }
    .fact-card.business .fact-number { color: #00ff88; }
    .fact-card .icon { font-size: 2rem; margin-bottom: 15px; }
    .fact-card h4 { color: #ffd700; font-size: 15px; margin-bottom: 12px; letter-spacing: 1px; }
    .fact-card.cosmic h4 { color: #b78fff; }
    .fact-card.business h4 { color: #00ff88; }
    .fact-card p { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.8; margin-bottom: 15px; }
    .fact-card p strong { color: #fff; }
    .fact-source {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      font-style: italic;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .facts-interactive {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.08), rgba(123, 45, 255, 0.05));
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 20px;
      padding: 35px;
      margin-top: 40px;
      text-align: center;
    }
    .facts-interactive h3 {
      color: #fff;
      font-size: 20px;
      margin-bottom: 15px;
    }
    .facts-interactive > p {
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      margin-bottom: 25px;
    }
    .interactive-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-bottom: 30px;
    }
    .interactive-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0,0,0,0.2);
      padding: 15px 20px;
      border-radius: 10px;
      transition: all 0.3s;
    }
    .interactive-item:hover {
      background: rgba(64, 156, 255, 0.1);
      transform: translateX(5px);
    }
    .interactive-icon { font-size: 24px; }
    .interactive-item span:last-child {
      color: rgba(255,255,255,0.8);
      font-size: 13px;
    }
    .explore-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      color: #fff;
      border: none;
      padding: 15px 35px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .explore-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(64, 156, 255, 0.3);
    }

    /* ABOUT */
    .about-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }
    @media (max-width: 900px) { .about-content { grid-template-columns: 1fr; } }
    .about-text h3 { color: #409cff; font-size: 14px; letter-spacing: 3px; margin-bottom: 20px; }
    .about-text p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
    .about-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
    }
    .stat-box {
      background: rgba(64, 156, 255, 0.06);
      border: 1px solid rgba(64, 156, 255, 0.15);
      border-radius: 14px; padding: 25px; text-align: center;
    }
    .stat-number { font-size: 2.5rem; color: #409cff; font-weight: 200; }
    .stat-label { font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 2px; margin-top: 8px; }

    /* SOCIAL PROOF SECTION */
    .social-proof-section {
      margin-top: 50px;
      padding-top: 40px;
      border-top: 1px solid rgba(64, 156, 255, 0.1);
    }
    .social-proof-section h3 {
      color: #409cff;
      font-size: 14px;
      letter-spacing: 3px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Trust Guarantees */
    .trust-guarantees {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }
    .guarantee-card {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.08), rgba(123, 45, 255, 0.05));
      border: 1px solid rgba(64, 156, 255, 0.15);
      border-radius: 16px;
      padding: 25px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .guarantee-card:hover {
      transform: translateY(-5px);
      border-color: rgba(64, 156, 255, 0.4);
      box-shadow: 0 15px 40px rgba(64, 156, 255, 0.15);
    }
    .guarantee-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 15px;
      background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.05));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #00ff88;
    }
    .guarantee-icon.gold {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
      color: #ffd700;
    }
    .guarantee-icon.purple {
      background: linear-gradient(135deg, rgba(123, 45, 255, 0.15), rgba(123, 45, 255, 0.05));
      color: #a855f7;
    }
    .guarantee-icon.cyan {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.15), rgba(64, 156, 255, 0.05));
      color: #409cff;
    }
    .guarantee-card h4 {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .guarantee-card p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 13px;
      line-height: 1.7;
    }
    .guarantee-card p strong {
      color: #00ff88;
    }

    /* Trust Badges */
    .trust-badges-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      margin-bottom: 40px;
      padding: 25px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 16px;
      border: 1px solid rgba(64, 156, 255, 0.1);
    }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: rgba(64, 156, 255, 0.08);
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 25px;
      color: #409cff;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    .trust-badge:hover {
      background: rgba(64, 156, 255, 0.15);
      border-color: rgba(64, 156, 255, 0.4);
      transform: scale(1.05);
    }
    .trust-badge svg {
      color: #00ff88;
    }

    /* Process Steps */
    .process-section {
      margin-bottom: 40px;
    }
    .process-section h4 {
      color: #409cff;
      font-size: 13px;
      letter-spacing: 2px;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .process-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .process-step {
      display: flex;
      align-items: center;
      gap: 15px;
      background: rgba(64, 156, 255, 0.06);
      border: 1px solid rgba(64, 156, 255, 0.15);
      border-radius: 12px;
      padding: 15px 20px;
      min-width: 200px;
      transition: all 0.3s ease;
    }
    .process-step:hover {
      border-color: rgba(64, 156, 255, 0.4);
      transform: translateY(-3px);
    }
    .step-number {
      font-size: 24px;
      font-weight: 700;
      color: #409cff;
      opacity: 0.5;
    }
    .step-content h5 {
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 3px;
    }
    .step-content p {
      color: rgba(255, 255, 255, 0.5);
      font-size: 11px;
      line-height: 1.5;
    }
    .process-connector {
      width: 30px;
      height: 2px;
      background: linear-gradient(90deg, rgba(64, 156, 255, 0.3), rgba(123, 45, 255, 0.3));
    }
    @media (max-width: 768px) {
      .process-steps {
        flex-direction: column;
      }
      .process-connector {
        width: 2px;
        height: 20px;
      }
    }

    /* Tech Stack Section */
    .tech-stack-section {
      margin-bottom: 40px;
    }
    .tech-stack-section h4 {
      color: #409cff;
      font-size: 13px;
      letter-spacing: 2px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .tech-intro {
      color: rgba(255, 255, 255, 0.5);
      font-size: 13px;
      margin-bottom: 20px;
    }
    .tech-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
    }
    .tech-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 15px 20px;
      background: rgba(64, 156, 255, 0.05);
      border: 1px solid rgba(64, 156, 255, 0.1);
      border-radius: 12px;
      min-width: 80px;
      transition: all 0.3s ease;
    }
    .tech-item:hover {
      border-color: rgba(64, 156, 255, 0.3);
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(64, 156, 255, 0.1);
    }
    .tech-icon {
      font-size: 28px;
    }
    .tech-item span {
      color: rgba(255, 255, 255, 0.6);
      font-size: 11px;
      font-weight: 500;
    }

    /* Quick Trust Stats */
    .quick-trust-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 15px;
      padding: 25px;
      background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(64, 156, 255, 0.05));
      border-radius: 16px;
      border: 1px solid rgba(0, 255, 136, 0.15);
    }
    .trust-stat {
      text-align: center;
      padding: 15px;
    }
    .trust-stat-value {
      font-size: 28px;
      font-weight: 700;
      color: #00ff88;
      margin-bottom: 5px;
    }
    .trust-stat-label {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* CONTACT */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
    }
    @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
    .contact-info h3 { color: #409cff; font-size: 14px; letter-spacing: 2px; margin-bottom: 25px; }
    .contact-item {
      display: flex; align-items: center; gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: all 0.3s;
    }
    .contact-item:hover { color: #409cff; padding-left: 12px; }
    .contact-item .icon { font-size: 1.4rem; width: 50px; height: 50px;
      background: rgba(64, 156, 255, 0.1); border-radius: 12px;
      display: flex; align-items: center; justify-content: center; }
    .contact-form { display: flex; flex-direction: column; gap: 18px; }
    .contact-form input, .contact-form textarea {
      padding: 16px 20px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px; color: #fff;
      font-family: inherit; font-size: 14px;
      transition: all 0.3s;
    }
    .contact-form input:focus, .contact-form textarea:focus {
      border-color: #409cff; outline: none;
      box-shadow: 0 0 20px rgba(64, 156, 255, 0.15);
    }
    .contact-form textarea { min-height: 120px; resize: vertical; }
    .contact-form button {
      padding: 18px 35px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border: none; border-radius: 10px;
      color: #fff; font-weight: 600;
      font-size: 12px; letter-spacing: 2px;
      cursor: pointer; transition: all 0.3s;
    }
    .contact-form button:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(64, 156, 255, 0.4);
    }

    /* CHAT BUTTON & PANEL */
    .chat-btn {
      position: fixed; bottom: 115px; right: 25px;
      width: 50px; height: 50px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border: none; border-radius: 50%;
      font-size: 1.5rem; cursor: pointer; z-index: 1000;
      box-shadow: 0 8px 30px rgba(64, 156, 255, 0.5);
      transition: all 0.3s;
    }
    .chat-btn:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(64, 156, 255, 0.6); }

    .chat-panel {
      display: none; position: fixed;
      bottom: 175px; right: 25px;
      width: 350px; max-height: 400px;
      background: rgba(5, 15, 30, 0.96);
      border: 1px solid rgba(64, 156, 255, 0.3);
      border-radius: 14px; z-index: 1000;
      flex-direction: column; overflow: hidden;
      box-shadow: 0 15px 50px rgba(0,0,0,0.6);
    }
    .chat-panel.active { display: flex; }
    .chat-header {
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      display: flex; justify-content: space-between; align-items: center;
    }
    .chat-header span { font-size: 12px; color: #409cff; letter-spacing: 2px; }
    .chat-header button { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 20px; cursor: pointer; }
    .chat-messages {
      flex: 1; padding: 15px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 10px; max-height: 280px;
    }
    .chat-msg {
      max-width: 85%; padding: 12px 15px;
      border-radius: 12px; font-size: 13px; line-height: 1.5;
    }
    .chat-msg.bot {
      background: rgba(64, 156, 255, 0.15);
      border: 1px solid rgba(64, 156, 255, 0.2);
      align-self: flex-start;
    }
    .chat-msg.user {
      background: rgba(123, 45, 255, 0.2);
      border: 1px solid rgba(123, 45, 255, 0.25);
      align-self: flex-end;
    }
    .chat-input-area {
      display: flex; gap: 10px; padding: 15px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .chat-input-area input {
      flex: 1; padding: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px; color: #fff; font-size: 13px;
    }
    .chat-input-area input:focus { border-color: #409cff; outline: none; }
    .chat-input-area button {
      padding: 12px 18px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border: none; border-radius: 8px;
      color: #fff; font-weight: bold; cursor: pointer;
    }

    /* GAME BUTTON - positioned to avoid FPS counter */
    .game-btn {
      position: fixed; bottom: 115px; left: 180px;
      padding: 10px 16px;
      background: rgba(64, 156, 255, 0.12);
      border: 1px solid rgba(64, 156, 255, 0.35);
      border-radius: 8px;
      font-size: 9px; letter-spacing: 1px;
      color: #409cff; cursor: pointer; z-index: 1000;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .game-btn:hover {
      background: rgba(64, 156, 255, 0.25);
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(64, 156, 255, 0.3);
    }
    .game-btn svg { width: 16px; height: 16px; }

    .game-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.96); z-index: 3000;
      flex-direction: column; align-items: center; justify-content: center;
    }
    .game-overlay.active { display: flex; }
    .game-close {
      position: absolute; top: 25px; right: 25px;
      width: 50px; height: 50px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%; color: #fff; font-size: 24px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .game-ui { text-align: center; margin-bottom: 20px; }
    .game-title { font-size: 28px; color: #409cff; letter-spacing: 5px; margin-bottom: 20px; text-shadow: 0 0 30px rgba(64, 156, 255, 0.5); }
    .game-stats {
      display: flex;
      justify-content: center;
      gap: 40px;
    }
    .game-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .game-stat .stat-label {
      font-size: 10px;
      color: rgba(255,255,255,0.4);
      letter-spacing: 2px;
    }
    .game-stat .stat-value {
      font-size: 24px;
      color: #fff;
      font-weight: 300;
      margin-top: 5px;
    }
    #gameCanvas {
      border: 2px solid rgba(64, 156, 255, 0.3);
      border-radius: 15px;
      box-shadow: 0 0 50px rgba(64, 156, 255, 0.2), inset 0 0 50px rgba(0,0,0,0.5);
      max-width: 100%;
      height: auto;
    }
    .game-controls {
      margin-top: 20px;
      display: flex;
      gap: 30px;
      justify-content: center;
    }
    .game-controls span {
      color: rgba(255,255,255,0.4);
      font-size: 11px;
      letter-spacing: 1px;
      padding: 8px 16px;
      background: rgba(255,255,255,0.05);
      border-radius: 20px;
    }
    /* Mobile Touch Controls */
    .touch-controls {
      display: none;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      padding: 0 20px;
    }
    .touch-btn {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.3), rgba(123, 45, 255, 0.2));
      border: 2px solid rgba(64, 156, 255, 0.5);
      color: #fff;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      transition: all 0.15s;
    }
    .touch-btn:active {
      transform: scale(0.95);
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.5), rgba(123, 45, 255, 0.4));
    }
    .touch-btn.fire {
      width: 90px;
      height: 90px;
      background: linear-gradient(135deg, rgba(255, 45, 124, 0.4), rgba(255, 100, 50, 0.3));
      border-color: rgba(255, 45, 124, 0.6);
    }
    @media (max-width: 768px) {
      .game-overlay { padding: 10px; }
      .game-title { font-size: 20px; letter-spacing: 3px; }
      .game-stats { gap: 20px; }
      .game-stat .stat-value { font-size: 18px; }
      #gameCanvas { max-width: calc(100vw - 40px); max-height: 50vh; }
      .game-controls { display: none; }
      .touch-controls { display: flex; }
    }
    @media (max-width: 480px) {
      .game-title { font-size: 16px; }
      .touch-btn { width: 60px; height: 60px; font-size: 24px; }
      .touch-btn.fire { width: 75px; height: 75px; }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* NEW IMPROVEMENTS - Stats, Portfolio, Testimonials, Footer, etc */
    /* ═══════════════════════════════════════════════════════════════ */

    /* Stats Bar */
    .stats-bar {
      display: flex;
      justify-content: space-around;
      gap: 20px;
      padding: 30px;
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.08), rgba(123, 45, 255, 0.05));
      border: 1px solid rgba(64, 156, 255, 0.15);
      border-radius: 16px;
      margin-bottom: 40px;
    }
    .stat-item { text-align: center; }
    .stat-num {
      font-size: 2.5rem;
      font-weight: 200;
      color: #409cff;
      display: inline;
    }
    .stat-plus { font-size: 1.5rem; color: #00ff88; }
    .stat-text {
      display: block;
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 1px;
      margin-top: 5px;
    }

    /* About Section */
    .about-section { margin-bottom: 40px; }
    .about-mission h3 {
      font-size: 12px;
      color: #409cff;
      letter-spacing: 3px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .accent-dot {
      width: 8px; height: 8px;
      background: #409cff;
      border-radius: 50%;
      display: inline-block;
    }
    .about-mission p {
      color: rgba(255,255,255,0.65);
      font-size: 14px;
      line-height: 1.9;
      margin-bottom: 15px;
    }
    .about-mission strong { color: #00ff88; }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-top: 25px;
    }
    .value-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      transition: all 0.3s;
    }
    .value-item:hover {
      background: rgba(64, 156, 255, 0.08);
      border-color: rgba(64, 156, 255, 0.3);
    }
    .value-icon { font-size: 1.3rem; }

    /* Portfolio Section */
    .portfolio-section { margin-bottom: 40px; }
    .portfolio-section h3 {
      font-size: 12px;
      color: #409cff;
      letter-spacing: 3px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .portfolio-intro {
      color: rgba(255,255,255,0.5);
      font-size: 13px;
      margin-bottom: 25px;
    }
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
    }
    .portfolio-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.4s;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .portfolio-card:hover {
      transform: translateY(-8px);
      border-color: rgba(64, 156, 255, 0.4);
      box-shadow: 0 20px 50px rgba(64, 156, 255, 0.15);
    }
    .portfolio-image {
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .portfolio-logo {
      font-size: 4rem;
      font-weight: bold;
      color: #409cff;
      opacity: 0.8;
    }
    .portfolio-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .portfolio-card:hover .portfolio-overlay { opacity: 1; }
    .view-project {
      color: #fff;
      font-size: 13px;
      letter-spacing: 2px;
      padding: 12px 25px;
      border: 1px solid #fff;
      border-radius: 25px;
    }
    .coming-badge {
      position: absolute;
      top: 15px; right: 15px;
      background: rgba(123, 45, 255, 0.9);
      color: #fff;
      padding: 6px 14px;
      border-radius: 15px;
      font-size: 10px;
      letter-spacing: 1px;
    }
    .portfolio-info { padding: 25px; }
    .portfolio-info h4 {
      color: #fff;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .portfolio-info p {
      color: rgba(255,255,255,0.5);
      font-size: 13px;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    .portfolio-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .portfolio-tags span {
      background: rgba(64, 156, 255, 0.15);
      color: #409cff;
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 10px;
      letter-spacing: 0.5px;
    }

    /* Testimonials */
    .testimonials-section h3 {
      font-size: 12px;
      color: #409cff;
      letter-spacing: 3px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .testimonial-card {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(64, 156, 255, 0.05));
      border: 1px solid rgba(255, 215, 0, 0.15);
      border-radius: 16px;
      padding: 25px;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .testimonial-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 215, 0, 0.3);
    }
    .testimonial-stars { color: #ffd700; font-size: 18px; margin-bottom: 15px; }
    .testimonial-text {
      color: rgba(255,255,255,0.75);
      font-size: 14px;
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 20px;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .author-avatar {
      width: 45px; height: 45px;
      background: rgba(64, 156, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
    }
    .author-avatar.gold { background: rgba(255, 215, 0, 0.2); }
    .author-avatar.green { background: rgba(40, 167, 69, 0.2); }
    .author-avatar.purple { background: rgba(138, 43, 226, 0.2); }
    .author-name { color: #fff; font-size: 14px; }
    .author-role { color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 3px; }

    /* Customer Review Form - Fully Responsive */
    .review-form-section {
      margin-top: clamp(20px, 4vw, 30px);
      padding-top: clamp(20px, 4vw, 30px);
      border-top: 1px solid rgba(64, 156, 255, 0.2);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .review-form-section h3 {
      font-size: clamp(11px, 2vw, 12px);
      color: #409cff;
      letter-spacing: clamp(1px, 0.5vw, 3px);
      margin-bottom: clamp(15px, 3vw, 20px);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .review-form {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.05), rgba(138, 43, 226, 0.05));
      border: 1px solid rgba(64, 156, 255, 0.15);
      border-radius: clamp(12px, 2vw, 16px);
      padding: clamp(15px, 4vw, 25px);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
    .review-form-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      gap: clamp(10px, 2vw, 15px);
      margin-bottom: clamp(10px, 2vw, 15px);
      width: 100%;
    }
    .review-form-group {
      margin-bottom: clamp(10px, 2vw, 15px);
      width: 100%;
      box-sizing: border-box;
    }
    .review-form-group label {
      display: block;
      color: rgba(255,255,255,0.7);
      font-size: clamp(10px, 1.8vw, 12px);
      margin-bottom: clamp(5px, 1vw, 8px);
      text-transform: uppercase;
      letter-spacing: 1px;
      word-wrap: break-word;
    }
    .review-form-group input,
    .review-form-group textarea {
      width: 100%;
      max-width: 100%;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 8px;
      padding: clamp(10px, 2vw, 12px) clamp(12px, 2vw, 15px);
      color: #fff;
      font-size: clamp(13px, 2vw, 14px);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    .review-form-group input:focus,
    .review-form-group textarea:focus {
      outline: none;
      border-color: #409cff;
      box-shadow: 0 0 15px rgba(64, 156, 255, 0.2);
    }
    .review-form-group textarea {
      min-height: clamp(80px, 15vw, 100px);
      resize: vertical;
      max-height: 300px;
    }
    .star-rating {
      display: flex;
      gap: clamp(5px, 1.5vw, 8px);
      flex-direction: row-reverse;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .star-rating input {
      display: none;
    }
    .star-rating label {
      cursor: pointer;
      font-size: clamp(22px, 5vw, 28px);
      color: rgba(255, 215, 0, 0.3);
      transition: color 0.2s ease, transform 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .star-rating label:hover,
    .star-rating label:hover ~ label,
    .star-rating input:checked ~ label {
      color: #ffd700;
      transform: scale(1.1);
    }
    .review-submit-btn {
      background: linear-gradient(135deg, #409cff, #8a2be2);
      color: #fff;
      border: none;
      padding: clamp(12px, 2vw, 14px) clamp(20px, 4vw, 30px);
      border-radius: 8px;
      font-size: clamp(12px, 2vw, 14px);
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      width: 100%;
      max-width: 300px;
      -webkit-tap-highlight-color: transparent;
    }
    .review-submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(64, 156, 255, 0.3);
    }
    /* Review Pending Box */
    .review-pending {
      margin-top: clamp(15px, 3vw, 20px);
      padding: clamp(12px, 2vw, 15px);
      background: rgba(64, 156, 255, 0.08);
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 10px;
      box-sizing: border-box;
    }
    .review-pending-title {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #ffa500;
      font-size: clamp(12px, 2vw, 14px);
      font-weight: 600;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .review-pending-text {
      color: rgba(255,255,255,0.6);
      font-size: clamp(11px, 1.8vw, 13px);
      line-height: 1.5;
    }
    .review-submit-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    .review-error {
      background: rgba(220, 53, 69, 0.2);
      border: 1px solid rgba(220, 53, 69, 0.5);
      color: #ff6b6b;
      padding: 12px 15px;
      border-radius: 8px;
      margin-bottom: 15px;
      font-size: 13px;
      display: none;
    }
    .review-success {
      background: rgba(40, 167, 69, 0.2);
      border: 1px solid rgba(40, 167, 69, 0.5);
      color: #51cf66;
      padding: 12px 15px;
      border-radius: 8px;
      margin-bottom: 15px;
      font-size: 13px;
      display: none;
    }
    .review-pending {
      background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
      border: 1px solid rgba(255, 193, 7, 0.3);
      border-radius: 12px;
      padding: 15px;
      margin-top: 20px;
    }
    .review-pending-title {
      color: #ffc107;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .review-pending-text {
      color: rgba(255,255,255,0.6);
      font-size: 12px;
      line-height: 1.6;
    }

    /* Contact Improvements */
    .contact-label {
      color: rgba(255,255,255,0.4);
      font-size: 10px;
      letter-spacing: 1px;
    }
    .contact-value {
      color: #fff;
      margin-top: 4px;
      display: block;
      text-decoration: none;
      transition: color 0.3s;
    }
    a.contact-value:hover { color: #409cff; }

    .social-links {
      margin-top: 30px;
      padding-top: 25px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .social-links h4 {
      font-size: 10px;
      color: rgba(255,255,255,0.4);
      letter-spacing: 2px;
      margin-bottom: 15px;
    }
    .social-icons { display: flex; gap: 12px; }
    .social-icon {
      width: 45px; height: 45px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.6);
      transition: all 0.3s;
    }
    .social-icon:hover {
      background: rgba(64, 156, 255, 0.15);
      border-color: #409cff;
      color: #409cff;
      transform: translateY(-3px);
    }
    .social-icon.whatsapp:hover {
      background: rgba(37, 211, 102, 0.15);
      border-color: #25d366;
      color: #25d366;
    }

    /* Form Improvements */
    .form-group {
      position: relative;
      margin-bottom: 18px;
    }
    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 16px 20px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      color: #fff;
      font-family: inherit;
      font-size: 14px;
      transition: all 0.3s;
      box-sizing: border-box;
    }
    .form-group input:focus,
    .form-group textarea:focus {
      border-color: #409cff;
      outline: none;
      box-shadow: 0 0 20px rgba(64, 156, 255, 0.15);
    }
    .form-group textarea { min-height: 120px; resize: vertical; }
    .input-focus-border {
      position: absolute;
      bottom: 0; left: 50%;
      width: 0; height: 2px;
      background: linear-gradient(90deg, #409cff, #7b2dff);
      transition: all 0.3s;
    }
    .form-group input:focus ~ .input-focus-border,
    .form-group textarea:focus ~ .input-focus-border {
      width: 100%;
      left: 0;
    }

    /* Form Validation States */
    .form-group input:invalid:not(:placeholder-shown),
    .form-group textarea:invalid:not(:placeholder-shown) {
      border-color: #ff4444;
    }
    .form-group input:valid:not(:placeholder-shown),
    .form-group textarea:valid:not(:placeholder-shown) {
      border-color: #00ff88;
    }
    .form-group .error-message {
      color: #ff4444;
      font-size: 11px;
      margin-top: 5px;
      display: none;
    }
    .form-group.has-error .error-message {
      display: block;
    }
    .form-group.has-error input,
    .form-group.has-error textarea {
      border-color: #ff4444 !important;
      animation: shake 0.3s ease;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }

    .submit-btn {
      width: 100%;
      padding: 18px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border: none;
      border-radius: 10px;
      color: #fff;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }
    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(64, 156, 255, 0.4);
    }
    .submit-btn.loading .btn-text { opacity: 0; }
    .submit-btn.loading .btn-loader { opacity: 1; }
    .btn-loader {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 20px; height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      opacity: 0;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
    .form-note {
      color: rgba(255,255,255,0.35);
      font-size: 11px;
      text-align: center;
      margin-top: 15px;
    }

    /* Toast Notification */
    .toast {
      position: fixed;
      bottom: 30px; left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: linear-gradient(135deg, #00ff88, #409cff);
      color: #000;
      padding: 16px 30px;
      border-radius: 50px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      font-size: 14px;
      box-shadow: 0 10px 40px rgba(0, 255, 136, 0.4);
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 9500;
    }
    .toast.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .toast-icon {
      width: 24px; height: 24px;
      background: rgba(0,0,0,0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Footer - positioned at very bottom */
    .site-footer {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: rgba(0,0,0,0.75);
      border-top: 1px solid rgba(64, 156, 255, 0.1);
      padding: 8px 0;
      z-index: 500;
      pointer-events: none;
      backdrop-filter: blur(10px);
    }
    .footer-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      padding: 0 25px;
      pointer-events: auto;
      max-width: 1400px;
      margin: 0 auto;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      letter-spacing: 1.5px;
      font-weight: 500;
    }
    .footer-logo {
      width: 32px; height: 32px;
      background: linear-gradient(135deg, #409cff, #7b2dff);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #fff;
      font-size: 14px;
    }
    .footer-links {
      display: flex;
      gap: 15px;
    }
    .footer-links button,
    .footer-links a {
      background: none;
      border: none;
      color: rgba(255,255,255,0.8);
      font-size: 12px;
      cursor: pointer;
      transition: color 0.3s;
      text-decoration: none;
    }
    .footer-links button:hover,
    .footer-links a:hover { color: #409cff; }
    .footer-social {
      display: flex;
      gap: 12px;
    }
    .footer-social a {
      color: rgba(255,255,255,0.8);
      transition: color 0.3s;
      font-size: 18px;
    }
    .footer-social a:hover { color: #409cff; }
    .footer-copyright {
      color: rgba(255,255,255,0.4);
      font-size: 11px;
      white-space: nowrap;
    }

    /* Improved Panel Animations */
    .section-panel {
      animation: none;
    }
    .section-panel.active {
      animation: panelSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes panelSlideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.9) translateY(30px);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
      }
    }

    /* Cookie Consent Banner */
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(5, 12, 25, 0.98);
      border-top: 1px solid rgba(64, 156, 255, 0.3);
      padding: 20px 30px;
      z-index: 10000;
      transform: translateY(100%);
      transition: transform 0.4s ease;
      backdrop-filter: blur(20px);
    }
    .cookie-banner.show {
      transform: translateY(0);
    }
    .cookie-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
    }
    .cookie-text {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      flex: 1;
      min-width: 300px;
    }
    .cookie-text svg {
      color: #409cff;
      flex-shrink: 0;
      margin-top: 3px;
    }
    .cookie-text strong {
      color: #fff;
      font-size: 15px;
      display: block;
      margin-bottom: 5px;
    }
    .cookie-text p {
      color: rgba(255,255,255,0.6);
      font-size: 13px;
      line-height: 1.5;
      margin: 0;
    }
    .cookie-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .cookie-btn {
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
    }
    .cookie-btn.primary {
      background: linear-gradient(135deg, #409cff, #7b2dff);
      color: #fff;
    }
    .cookie-btn.primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(64, 156, 255, 0.4);
    }
    .cookie-btn.secondary {
      background: rgba(255,255,255,0.08);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .cookie-btn.secondary:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.25);
    }

    /* Policy Modals */
    .policy-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.85);
      z-index: 10001;
      align-items: center;
      justify-content: center;
      padding: 20px;
      backdrop-filter: blur(10px);
    }
    .policy-modal.active {
      display: flex;
      animation: fadeIn 0.3s ease;
    }
    .policy-content {
      background: rgba(10, 20, 40, 0.98);
      border: 1px solid rgba(64, 156, 255, 0.3);
      border-radius: 16px;
      max-width: 500px;
      width: 100%;
      max-height: 90vh;
      overflow: hidden;
    }
    .policy-content.large {
      max-width: 700px;
    }
    .policy-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 25px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .policy-header h2 {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    .policy-close {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.08);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .policy-close:hover {
      background: rgba(255,255,255,0.15);
      transform: rotate(90deg);
    }
    .policy-body {
      padding: 25px;
    }
    .policy-body.scrollable {
      max-height: calc(90vh - 100px);
      overflow-y: auto;
    }
    .policy-body.scrollable::-webkit-scrollbar {
      width: 5px;
    }
    .policy-body.scrollable::-webkit-scrollbar-thumb {
      background: linear-gradient(#409cff, #7b2dff);
      border-radius: 3px;
    }
    .policy-body p {
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 15px;
    }
    .policy-body h3 {
      color: #409cff;
      font-size: 15px;
      margin: 25px 0 12px;
    }
    .policy-body ul {
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      line-height: 1.8;
      padding-left: 20px;
      margin-bottom: 15px;
    }
    .policy-body li {
      margin-bottom: 5px;
    }
    .policy-date {
      color: rgba(255,255,255,0.4) !important;
      font-size: 12px !important;
      font-style: italic;
    }

    /* Cookie Options in Settings */
    .cookie-option {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 18px;
      margin-bottom: 12px;
    }
    .cookie-option-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
    }
    .cookie-option strong {
      color: #fff;
      font-size: 14px;
      display: block;
      margin-bottom: 4px;
    }
    .cookie-option p {
      color: rgba(255,255,255,0.5);
      font-size: 12px;
      margin: 0;
      line-height: 1.4;
    }

    /* Toggle Switch */
    .toggle {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
      flex-shrink: 0;
    }
    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255,255,255,0.15);
      transition: 0.3s;
      border-radius: 26px;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background: #fff;
      transition: 0.3s;
      border-radius: 50%;
    }
    .toggle input:checked + .toggle-slider {
      background: linear-gradient(135deg, #409cff, #7b2dff);
    }
    .toggle input:checked + .toggle-slider:before {
      transform: translateX(24px);
    }
    .toggle.disabled .toggle-slider {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .cookie-save-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      justify-content: flex-end;
    }

    /* Enhanced Footer Styles - Compact Version */
    .footer-links-container {
      display: flex;
      gap: 35px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
    }
    .footer-links-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .footer-links-title {
      color: #409cff;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      opacity: 0.9;
    }
    .footer-links-group .footer-links {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .footer-links-group .footer-links a,
    .footer-links-group .footer-links button {
      font-size: 12px;
      opacity: 0.85;
    }
    .footer-links-group .footer-links a:hover,
    .footer-links-group .footer-links button:hover {
      opacity: 1;
      color: #409cff;
    }
    .footer-gdpr-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: rgba(64, 156, 255, 0.08);
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 20px;
    }
    .footer-gdpr-badge svg {
      color: #409cff;
      width: 16px;
      height: 16px;
    }
    .footer-gdpr-badge span {
      font-size: 11px;
      color: rgba(255,255,255,0.7);
    }

    /* Footer Left Controls (FPS, Game) */
    .footer-left-controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .footer-status-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: rgba(255,255,255,0.6);
      letter-spacing: 1px;
    }
    .footer-online svg {
      fill: #00ff88;
    }
    .footer-fps svg {
      fill: #409cff;
    }
    .footer-game-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.2), rgba(123, 45, 255, 0.2));
      border: 1px solid rgba(64, 156, 255, 0.4);
      border-radius: 6px;
      color: #00d4ff;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    }
    .footer-game-btn:hover {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.35), rgba(123, 45, 255, 0.35));
      border-color: #409cff;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(64, 156, 255, 0.4);
    }
    .footer-game-btn svg {
      stroke: currentColor;
    }

    /* Footer Right Controls (Social, AI) */
    .footer-right-controls {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .footer-ai-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 136, 255, 0.2));
      border: 1px solid rgba(0, 212, 255, 0.4);
      border-radius: 6px;
      color: #00ffff;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
      animation: aiPulse 2s ease-in-out infinite;
    }
    @keyframes aiPulse {
      0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
      50% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); }
    }
    .footer-ai-btn:hover {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(0, 136, 255, 0.35));
      border-color: #00ffff;
      transform: translateY(-2px);
    }
    .footer-ai-btn svg {
      stroke: currentColor;
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* FIXED BOTTOM CONTROLS - Floating at screen corners */
    /* ═══════════════════════════════════════════════════════════════ */
    .fixed-bottom-left {
      position: fixed;
      bottom: 15px;
      left: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 9000;
      pointer-events: auto;
    }
    .fixed-fps {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: #409cff;
      letter-spacing: 1px;
      background: rgba(5, 12, 25, 0.85);
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid rgba(64, 156, 255, 0.3);
      backdrop-filter: blur(10px);
      text-shadow: 0 0 10px rgba(64, 156, 255, 0.5);
    }
    .fixed-fps svg {
      fill: #409cff;
    }
    .fixed-game-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.2), rgba(123, 45, 255, 0.2));
      border: 1px solid rgba(64, 156, 255, 0.4);
      border-radius: 8px;
      color: #00d4ff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
      backdrop-filter: blur(10px);
    }
    .fixed-game-btn:hover {
      background: linear-gradient(135deg, rgba(64, 156, 255, 0.35), rgba(123, 45, 255, 0.35));
      border-color: #409cff;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(64, 156, 255, 0.4);
    }
    .fixed-game-btn svg {
      stroke: currentColor;
    }
    /* Fixed Bottom Right Container (Live Chat + AI Chat) */
    .fixed-bottom-right {
      position: fixed;
      bottom: 15px;
      right: 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 9000;
    }
    .fixed-live-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      background: linear-gradient(135deg, rgba(37, 211, 102, 0.25), rgba(18, 140, 126, 0.25));
      border: 1px solid rgba(37, 211, 102, 0.5);
      border-radius: 8px;
      color: #25D366;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
      animation: livePulse 2s ease-in-out infinite;
      backdrop-filter: blur(10px);
    }
    @keyframes livePulse {
      0%, 100% { box-shadow: 0 0 5px rgba(37, 211, 102, 0.3); }
      50% { box-shadow: 0 0 20px rgba(37, 211, 102, 0.6); }
    }
    .fixed-live-btn:hover {
      background: linear-gradient(135deg, rgba(37, 211, 102, 0.4), rgba(18, 140, 126, 0.4));
      border-color: #25D366;
      transform: translateY(-2px) scale(1.02);
    }
    .fixed-live-btn svg {
      stroke: currentColor;
    }
    .fixed-ai-btn-stacked {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 136, 255, 0.2));
      border: 1px solid rgba(0, 212, 255, 0.4);
      border-radius: 8px;
      color: #00ffff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
      animation: fixedAiPulse 2s ease-in-out infinite;
      backdrop-filter: blur(10px);
    }
    @keyframes fixedAiPulse {
      0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
      50% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); }
    }
    .fixed-ai-btn-stacked:hover {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(0, 136, 255, 0.35));
      border-color: #00ffff;
      transform: translateY(-2px);
    }
    .fixed-ai-btn-stacked svg {
      stroke: currentColor;
    }

    /* Mobile WhatsApp Floating Button */
    .mobile-whatsapp-float {
      display: none;
      position: fixed;
      bottom: 100px;
      right: 20px;
      width: 60px;
      height: 60px;
      background: #25D366;
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
      z-index: 9999;
      animation: whatsappPulse 2s ease-in-out infinite;
      text-decoration: none;
    }
    .mobile-whatsapp-float:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 30px rgba(37, 211, 102, 0.7);
    }
    @keyframes whatsappPulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5); }
      50% { box-shadow: 0 4px 35px rgba(37, 211, 102, 0.8), 0 0 0 10px rgba(37, 211, 102, 0.1); }
    }

    /* Hide original status bar, chat btn, game btn */
    .status-bar { display: none !important; }
    .chat-btn { display: none !important; }
    .game-btn { display: none !important; }

    /* Legal Info Box */
    .legal-info-box {
      background: rgba(64, 156, 255, 0.08);
      border: 1px solid rgba(64, 156, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      margin: 15px 0;
    }
    .legal-info-box p {
      margin: 8px 0;
      font-size: 14px;
    }
    .legal-info-box p:first-child {
      margin-top: 0;
    }
    .legal-info-box p:last-child {
      margin-bottom: 0;
    }

    /* GDPR Form Styles */
    #gdprRequestForm .form-group {
      margin-bottom: 18px;
    }
    #gdprRequestForm label {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    #gdprRequestForm input[type="text"],
    #gdprRequestForm input[type="email"],
    #gdprRequestForm select,
    #gdprRequestForm textarea {
      width: 100%;
      padding: 12px 15px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      color: #fff;
      font-size: 14px;
      transition: all 0.3s;
    }
    #gdprRequestForm input:focus,
    #gdprRequestForm select:focus,
    #gdprRequestForm textarea:focus {
      outline: none;
      border-color: #409cff;
      background: rgba(64, 156, 255, 0.08);
    }
    #gdprRequestForm select option {
      background: #0a1628;
      color: #fff;
    }
    #gdprRequestForm .checkbox-group {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    #gdprRequestForm .checkbox-group input[type="checkbox"] {
      width: auto;
      margin-top: 3px;
      accent-color: #409cff;
    }
    #gdprRequestForm .checkbox-group label {
      margin-bottom: 0;
      line-height: 1.4;
    }
    .gdpr-info-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 20px;
      padding: 15px;
      background: rgba(64, 156, 255, 0.08);
      border-radius: 10px;
      border-left: 3px solid #409cff;
    }
    .gdpr-info-note svg {
      color: #409cff;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .gdpr-info-note p {
      margin: 0;
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      line-height: 1.5;
    }

    /* Status Bar (above footer) */
    .status-bar {
      position: fixed;
      bottom: 70px;
      left: 0;
      right: 0;
      height: 24px;
      background: rgba(5, 12, 25, 0.85);
      border-top: 1px solid rgba(64, 156, 255, 0.15);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      z-index: 490;
      font-size: 9px;
      font-family: 'Courier New', monospace;
      backdrop-filter: blur(8px);
    }
    .status-left, .status-center, .status-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .status-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .status-item svg {
      color: #409cff;
      opacity: 0.8;
    }
    .status-item span {
      color: rgba(255, 255, 255, 0.7);
    }
    .temporal-status {
      color: #7b2dff;
    }
    .temporal-status span {
      color: #409cff;
      font-weight: bold;
    }
    .datetime-status span {
      color: #00f2ff;
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* RESPONSIVE DESIGN - TABLETS (max-width: 1024px) */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .main-nav {
        flex-wrap: wrap;
        right: 15px;
        gap: 8px;
        max-width: 85%;
      }
      .nav-btn {
        padding: 12px 16px;
        font-size: 11px;
      }
      .section-panel {
        width: 95%;
        max-height: 85vh;
      }
      .brand-box {
        left: 15px;
        top: 15px;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* RESPONSIVE DESIGN - MOBILE (max-width: 768px) */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* FORCE HIDE elements not needed on mobile */
      .nav-menu,
      .hud-panel,
      .hud-panel.right,
      .hud-panel.visible,
      .bottom-bar,
      .status-bar,
      .reticle {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
      }

      /* SHOW WhatsApp floating button on mobile */
      .mobile-whatsapp-float {
        display: flex !important;
      }

      /* Navigation - Fixed bottom bar */
      .main-nav {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(5, 12, 25, 0.98) !important;
        border-top: 1px solid rgba(64, 156, 255, 0.3) !important;
        border-radius: 0 !important;
        padding: 12px 10px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 6px !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 9000 !important;
        backdrop-filter: blur(20px) !important;
      }
      .nav-btn {
        padding: 10px 14px !important;
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        min-height: 44px !important;
        min-width: 44px !important;
      }
      .nav-btn::before { display: none !important; }
      .nav-btn::after { display: none !important; }

      /* WCAG 2.5.5 - All touch targets minimum 44x44px */
      button,
      a,
      input[type="submit"],
      input[type="button"],
      .panel-close,
      .chat-btn,
      .game-btn,
      .cookie-btn,
      .service-card,
      .nav-item,
      .calc-tab,
      .calc-checkbox,
      .portfolio-card {
        min-height: 44px !important;
      }

      /* Brand - Top left corner */
      .brand-box {
        position: fixed !important;
        left: 10px !important;
        top: 10px !important;
        z-index: 100 !important;
      }
      .brand {
        font-size: 14px !important;
        border-left-width: 3px !important;
        padding-left: 10px !important;
      }
      .brand span {
        font-size: 7px !important;
        letter-spacing: 0.2em !important;
      }

      /* Date Display - Top right */
      .date-display {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        padding: 6px 10px !important;
        z-index: 100 !important;
      }
      .date-year { font-size: 12px !important; }
      .date-full { font-size: 8px !important; }

      /* Section Panels - FULL SCREEN on mobile */
      .section-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        padding-bottom: 70px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        animation: none !important;
        z-index: 8500 !important;
      }
      .section-panel.active {
        transform: none !important;
        animation: mobileSlideUp 0.3s ease-out forwards !important;
      }
      @keyframes mobileSlideUp {
        from {
          opacity: 0;
          transform: translateY(100%);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Panel Header */
      .panel-header {
        position: sticky !important;
        top: 0 !important;
        background: rgba(5, 15, 30, 0.98) !important;
        padding: 15px !important;
        margin: 0 !important;
        z-index: 10 !important;
        border-bottom: 1px solid rgba(64, 156, 255, 0.2) !important;
      }
      .panel-title { font-size: 18px !important; }
      .panel-subtitle { font-size: 11px !important; }
      .panel-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
        min-width: 44px !important;
        min-height: 44px !important;
      }

      /* Panel Content */
      .panel-content,
      .section-panel > *:not(.panel-header) {
        padding: 15px !important;
      }

      /* Stats Bar in About section */
      .stats-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 15px !important;
      }
      .stat-item {
        flex: 1 1 45% !important;
        padding: 12px !important;
        min-width: 120px !important;
      }
      .stat-num { font-size: 22px !important; }
      .stat-text { font-size: 9px !important; }

      /* Values Grid */
      .values-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      .value-item {
        padding: 12px !important;
        font-size: 10px !important;
      }

      /* Services Grid */
      .services-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
      }
      .service-card {
        padding: 20px !important;
      }
      .service-card h3 {
        font-size: 16px !important;
      }
      .service-card p {
        font-size: 13px !important;
      }

      /* Contact Grid */
      .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
      }

      /* Calculator */
      .calc-container {
        grid-template-columns: 1fr !important;
      }
      .calc-section {
        padding: 15px !important;
      }
      .calc-title { font-size: 14px !important; }
      .form-group label { font-size: 11px !important; }
      .form-group select,
      .form-group input {
        padding: 12px !important;
        font-size: 14px !important;
      }
      .checkbox-grid {
        grid-template-columns: 1fr !important;
      }

      /* Footer - Hide on mobile */
      .site-footer {
        display: none !important;
      }

      /* Chat Button & Panel */
      .chat-btn {
        position: fixed !important;
        bottom: 80px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 8000 !important;
      }
      .chat-btn svg { width: 22px !important; height: 22px !important; }
      .chat-panel {
        position: fixed !important;
        bottom: 70px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 140px) !important;
        max-height: calc(100dvh - 140px) !important;
        border-radius: 15px 15px 0 0 !important;
        z-index: 8500 !important;
        transition: max-height 0.2s ease !important;
      }
      /* When keyboard is open */
      .chat-panel.keyboard-open {
        max-height: 50vh !important;
        bottom: 0 !important;
      }
      .chat-input-container {
        position: sticky !important;
        bottom: 0 !important;
        background: rgba(5, 15, 30, 0.98) !important;
      }

      /* Game Button */
      .game-btn {
        position: fixed !important;
        bottom: 80px !important;
        left: 15px !important;
        padding: 10px 14px !important;
        font-size: 9px !important;
        z-index: 8000 !important;
      }
      .game-btn svg { width: 16px !important; height: 16px !important; }

      /* Cookie Banner */
      .cookie-banner {
        padding: 15px !important;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
        bottom: 0 !important;
        z-index: 10000 !important;
      }
      .cookie-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
      }
      .cookie-text {
        flex-direction: column !important;
        align-items: center !important;
        min-width: auto !important;
      }
      .cookie-actions {
        flex-direction: column !important;
        width: 100% !important;
      }
      .cookie-btn {
        width: 100% !important;
        padding: 14px !important;
        min-height: 48px !important;
      }

      /* Policy Modals */
      .policy-modal {
        padding: 0 !important;
      }
      .policy-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
      }
      .policy-content.large {
        max-height: 100% !important;
      }
      .policy-header {
        padding: 15px !important;
      }
      .policy-header h2 { font-size: 18px !important; }
      .policy-body {
        padding: 15px !important;
        padding-bottom: 80px !important;
      }
      .policy-body h3 { font-size: 14px !important; }
      .policy-body p { font-size: 13px !important; }

      /* Portfolio Grid */
      .portfolio-grid {
        grid-template-columns: 1fr !important;
      }

      /* Toast */
      .toast {
        left: 15px !important;
        right: 15px !important;
        bottom: 80px !important;
        max-width: none !important;
      }

      /* Team Grid */
      .team-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }

      /* FAQ */
      .faq-item {
        padding: 15px !important;
      }
      .faq-question {
        font-size: 14px !important;
      }
      .faq-answer {
        font-size: 13px !important;
      }

      /* About Section */
      .about-content {
        grid-template-columns: 1fr !important;
      }

      /* CALCULATOR - Mobile Specific Styles */
      .calc-tabs {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        padding: 0 15px !important;
      }
      .calc-tab {
        padding: 12px 16px !important;
        font-size: 12px !important;
        justify-content: center !important;
      }
      .calc-tab svg {
        width: 16px !important;
        height: 16px !important;
      }
      .calc-tab-content {
        padding: 0 15px 15px 15px !important;
      }
      .calc-container-extended {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
      }
      .calc-form-extended {
        gap: 18px !important;
      }
      .calc-group {
        margin-bottom: 0 !important;
      }
      .calc-group label {
        font-size: 12px !important;
        margin-bottom: 8px !important;
      }
      .calc-group select,
      .calc-group input[type="text"],
      .calc-group input[type="email"],
      .calc-group input[type="tel"] {
        padding: 14px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
      }
      .calc-slider {
        height: 8px !important;
      }
      .slider-labels {
        font-size: 10px !important;
        margin-top: 8px !important;
      }
      .calc-extras-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .calc-checkbox {
        padding: 12px !important;
        border-radius: 10px !important;
      }
      .checkbox-label {
        font-size: 13px !important;
      }
      .extra-price {
        font-size: 11px !important;
      }
      .calc-result-extended {
        gap: 15px !important;
      }
      .calc-result-card {
        padding: 25px !important;
        border-radius: 16px !important;
      }
      .calc-label {
        font-size: 10px !important;
      }
      .calc-price {
        font-size: 42px !important;
      }
      .calc-price span {
        font-size: 24px !important;
      }
      .calc-range {
        font-size: 12px !important;
      }
      .calc-discount {
        font-size: 11px !important;
        padding: 8px 16px !important;
      }
      .calc-breakdown {
        padding: 20px !important;
        border-radius: 12px !important;
      }
      .breakdown-title {
        font-size: 11px !important;
      }
      .breakdown-row {
        font-size: 13px !important;
        padding: 10px 0 !important;
      }
      .get-quote-btn {
        padding: 16px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
      }
      .calc-note {
        font-size: 11px !important;
        padding: 0 5px !important;
      }

      /* Custom Project Form Mobile */
      .custom-project-form {
        padding: 0 !important;
      }
      .custom-intro h3 {
        font-size: 18px !important;
      }
      .custom-intro p {
        font-size: 13px !important;
      }
      .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
      }
      .custom-project-form .form-group label {
        font-size: 12px !important;
      }
      .custom-project-form input,
      .custom-project-form select,
      .custom-project-form textarea {
        padding: 14px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
      }
      .submit-custom-btn {
        padding: 16px !important;
        font-size: 14px !important;
      }

      /* FACTS GRID - Mobile */
      .facts-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
      }
      .fact-card {
        padding: 20px !important;
      }
      .fact-card h4 {
        font-size: 15px !important;
      }
      .fact-card p {
        font-size: 13px !important;
      }

      /* CONTACT - Mobile */
      .contact-grid {
        padding: 15px !important;
      }
      .contact-info {
        padding: 20px !important;
      }
      .contact-info h3 {
        font-size: 12px !important;
      }
      .contact-item {
        padding: 15px 0 !important;
        gap: 15px !important;
      }
      .contact-label {
        font-size: 10px !important;
      }
      .contact-value {
        font-size: 14px !important;
      }
      .contact-form-container {
        padding: 20px !important;
      }
      .contact-form-container h3 {
        font-size: 16px !important;
      }
      .contact-form .form-group input,
      .contact-form .form-group textarea {
        padding: 14px !important;
        font-size: 14px !important;
      }
      .submit-btn {
        padding: 16px !important;
        font-size: 14px !important;
      }

      /* TESTIMONIALS - Mobile */
      .testimonials-section {
        padding: 15px !important;
      }
      .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
      }
      .testimonial-card {
        padding: 18px !important;
      }
      .testimonial-card:hover {
        transform: none !important;
      }
      .testimonial-text {
        font-size: 13px !important;
        line-height: 1.6 !important;
      }
      .testimonial-author {
        gap: 12px !important;
      }
      .author-avatar {
        width: 40px !important;
        height: 40px !important;
      }
      /* Review Form Mobile - Perfect Scaling */
      .review-form-section {
        margin-top: 15px !important;
        padding-top: 15px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .review-form {
        padding: 15px !important;
        border-radius: 12px !important;
        margin: 0 !important;
      }
      .review-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
      }
      .review-form-group {
        margin-bottom: 12px !important;
      }
      .review-form-group label {
        font-size: 11px !important;
        margin-bottom: 6px !important;
      }
      .review-form-group input,
      .review-form-group textarea {
        padding: 12px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
      }
      .star-rating {
        gap: 8px !important;
        justify-content: center !important;
        padding: 10px 0 !important;
      }
      .star-rating label {
        font-size: 32px !important;
      }
      .review-submit-btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
      }
      .review-pending {
        padding: 12px !important;
        margin-top: 15px !important;
      }
      .review-pending-title {
        font-size: 12px !important;
      }
      .review-pending-text {
        font-size: 11px !important;
      }
      .author-name {
        font-size: 14px !important;
      }
      .author-role {
        font-size: 11px !important;
      }

      /* PORTFOLIO - Mobile */
      .portfolio-section {
        padding: 15px !important;
      }
      .portfolio-grid {
        gap: 20px !important;
      }
      .portfolio-card {
        border-radius: 12px !important;
      }
      .portfolio-image {
        height: 150px !important;
      }
      .portfolio-info {
        padding: 15px !important;
      }
      .portfolio-info h4 {
        font-size: 16px !important;
      }
      .portfolio-info p {
        font-size: 13px !important;
      }
      .portfolio-tags span {
        font-size: 10px !important;
        padding: 4px 10px !important;
      }

      /* ABOUT SECTION - Mobile */
      .about-section {
        padding: 15px !important;
      }
      .about-mission h3 {
        font-size: 12px !important;
      }
      .about-mission p {
        font-size: 14px !important;
        line-height: 1.7 !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* RESPONSIVE DESIGN - SMALL PHONES (max-width: 480px) */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .main-nav {
        padding: 10px 8px !important;
        gap: 4px !important;
      }
      .nav-btn {
        padding: 8px 10px !important;
        font-size: 8px !important;
      }

      .brand {
        font-size: 12px !important;
      }
      .brand span {
        font-size: 6px !important;
        display: none !important;
      }

      .date-display {
        padding: 4px 8px !important;
      }
      .date-year { font-size: 10px !important; }
      .date-full { display: none !important; }

      .panel-title { font-size: 16px !important; }
      .panel-subtitle { font-size: 10px !important; }

      .stat-item { flex: 1 1 100% !important; }
      .values-grid { grid-template-columns: 1fr !important; }

      .chat-btn {
        bottom: 75px !important;
        width: 44px !important;
        height: 44px !important;
      }
      .game-btn {
        bottom: 75px !important;
        padding: 8px 10px !important;
        font-size: 8px !important;
      }

      .service-card h3 {
        font-size: 14px !important;
      }
      .service-card p {
        font-size: 12px !important;
      }
      .service-price {
        font-size: 18px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* COMPREHENSIVE MOBILE RESPONSIVE - ALL NEW SECTIONS */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* DETAILED SERVICE CARDS - Mobile */
      .services-detailed-grid {
        gap: 20px !important;
      }
      .service-detailed-card {
        padding: 20px !important;
        border-radius: 16px !important;
      }
      .service-detailed-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
      }
      .service-detailed-icon {
        width: 50px !important;
        height: 50px !important;
      }
      .service-detailed-title h3 {
        font-size: 18px !important;
      }
      .service-detailed-title .service-price-tag {
        font-size: 22px !important;
      }
      .service-detailed-badge {
        font-size: 10px !important;
        padding: 4px 12px !important;
      }
      .service-detailed-intro {
        font-size: 13px !important;
        text-align: center !important;
      }
      .service-features {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
      }
      .service-feature-group h4 {
        font-size: 13px !important;
      }
      .service-feature-group ul {
        font-size: 12px !important;
      }
      .service-footer {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
      }
      .service-tech-stack {
        justify-content: center !important;
        flex-wrap: wrap !important;
      }
      .tech-tag {
        font-size: 10px !important;
        padding: 4px 10px !important;
      }
      .service-delivery, .service-bonus, .service-ideal {
        font-size: 12px !important;
      }

      /* SOCIAL PROOF SECTION - Mobile */
      .social-proof-section {
        margin-top: 30px !important;
        padding-top: 25px !important;
      }
      .social-proof-section h3 {
        font-size: 12px !important;
        text-align: center !important;
        justify-content: center !important;
      }

      /* Trust Guarantees Mobile */
      .trust-guarantees {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
      }
      .guarantee-card {
        padding: 20px !important;
      }
      .guarantee-icon {
        width: 60px !important;
        height: 60px !important;
      }
      .guarantee-icon svg {
        width: 32px !important;
        height: 32px !important;
      }
      .guarantee-card h4 {
        font-size: 15px !important;
      }
      .guarantee-card p {
        font-size: 12px !important;
      }

      /* Trust Badges Mobile */
      .trust-badges-container {
        padding: 15px !important;
        gap: 10px !important;
      }
      .trust-badge {
        padding: 8px 14px !important;
        font-size: 11px !important;
      }
      .trust-badge svg {
        width: 20px !important;
        height: 20px !important;
      }

      /* Process Steps Mobile */
      .process-section h4 {
        font-size: 12px !important;
        text-align: center !important;
        justify-content: center !important;
      }
      .process-steps {
        flex-direction: column !important;
        gap: 0 !important;
      }
      .process-step {
        width: 100% !important;
        min-width: unset !important;
        padding: 15px !important;
      }
      .step-number {
        font-size: 20px !important;
      }
      .step-content h5 {
        font-size: 13px !important;
      }
      .step-content p {
        font-size: 11px !important;
      }
      .process-connector {
        width: 2px !important;
        height: 15px !important;
        margin: 0 auto !important;
      }

      /* Tech Stack Mobile */
      .tech-stack-section h4 {
        font-size: 12px !important;
        text-align: center !important;
        justify-content: center !important;
      }
      .tech-intro {
        font-size: 12px !important;
        text-align: center !important;
      }
      .tech-logos {
        gap: 10px !important;
      }
      .tech-item {
        padding: 12px 15px !important;
        min-width: 70px !important;
      }
      .tech-icon {
        font-size: 22px !important;
      }
      .tech-item span {
        font-size: 10px !important;
      }

      /* Quick Trust Stats Mobile */
      .quick-trust-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 15px !important;
        gap: 10px !important;
      }
      .trust-stat {
        padding: 10px !important;
      }
      .trust-stat-value {
        font-size: 22px !important;
      }
      .trust-stat-label {
        font-size: 9px !important;
      }

      /* FACTS SECTION - Mobile */
      .facts-category {
        margin-bottom: 25px !important;
      }
      .facts-category-title {
        font-size: 12px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
      }
      .facts-category-title span:first-child {
        font-size: 20px !important;
      }
      .facts-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      .fact-card {
        padding: 18px !important;
      }
      .fact-number {
        font-size: 26px !important;
      }
      .fact-text {
        font-size: 13px !important;
      }
      .fact-source {
        font-size: 10px !important;
      }
      .facts-interactive {
        padding: 20px !important;
        text-align: center !important;
      }
      .facts-interactive h4 {
        font-size: 16px !important;
      }
      .facts-interactive p {
        font-size: 13px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* SMALL PHONES - EXTRA OPTIMIZATIONS */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      /* Service Detailed Extra Small */
      .service-detailed-card {
        padding: 15px !important;
      }
      .service-detailed-title h3 {
        font-size: 16px !important;
      }
      .service-detailed-title .service-price-tag {
        font-size: 18px !important;
      }
      .service-feature-group ul li {
        font-size: 11px !important;
        padding-left: 18px !important;
      }

      /* Social Proof Extra Small */
      .guarantee-card {
        padding: 15px !important;
      }
      .guarantee-icon {
        width: 50px !important;
        height: 50px !important;
      }
      .guarantee-card h4 {
        font-size: 14px !important;
      }
      .guarantee-card p {
        font-size: 11px !important;
      }

      /* Quick Stats 2x2 grid on very small screens */
      .quick-trust-stats {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .trust-stat-value {
        font-size: 18px !important;
      }
      .trust-stat-label {
        font-size: 8px !important;
      }

      /* Facts Extra Small */
      .fact-card {
        padding: 15px !important;
      }
      .fact-number {
        font-size: 22px !important;
      }
      .fact-text {
        font-size: 12px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* LANDSCAPE ORIENTATION ON MOBILE - New Sections */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) and (orientation: landscape) {
      .trust-guarantees {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .facts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .quick-trust-stats {
        grid-template-columns: repeat(4, 1fr) !important;
      }
      .process-steps {
        flex-direction: row !important;
        flex-wrap: wrap !important;
      }
      .process-step {
        flex: 1 1 200px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* TOUCH DEVICE OPTIMIZATIONS */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (hover: none) and (pointer: coarse) {
      /* Larger touch targets */
      .nav-btn {
        min-height: 44px;
        min-width: 44px;
      }
      .panel-close {
        min-width: 44px;
        min-height: 44px;
      }
      .cookie-btn {
        min-height: 48px;
      }
      .footer-links button,
      .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
      }
      /* Disable hover effects that don't work on touch */
      .nav-btn:hover {
        transform: none;
      }
      .service-card:hover {
        transform: none;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* LANDSCAPE MODE ON MOBILE */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) and (orientation: landscape) {
      .section-panel {
        max-height: 100vh !important;
        padding-bottom: 55px !important;
      }
      .main-nav {
        padding: 6px 10px !important;
      }
      .nav-btn {
        padding: 6px 10px !important;
        font-size: 8px !important;
        min-height: 32px !important;
      }
      .brand {
        font-size: 12px !important;
      }
      .brand span {
        display: none !important;
      }
      .chat-btn, .game-btn {
        bottom: 60px !important;
      }
      .chat-btn {
        width: 40px !important;
        height: 40px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* iOS SAFE AREA (notch) */
    /* ═══════════════════════════════════════════════════════════════ */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      .main-nav {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
      }
      .cookie-banner {
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* ULTRAWIDE SCREENS (2K, 4K+) */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (min-width: 1920px) {
      .section-panel {
        max-width: 1400px;
      }
      .services-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .nav-btn {
        padding: 12px 18px;
        font-size: 11px;
      }
      .brand {
        font-size: 28px;
      }
      .panel-title {
        font-size: 36px;
      }
    }

    @media (min-width: 2560px) {
      .section-panel {
        max-width: 1800px;
        padding: 60px 80px;
      }
      .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
      }
      .nav-btn {
        padding: 13px 20px;
        font-size: 12px;
      }
      .brand {
        font-size: 32px;
      }
      .brand span {
        font-size: 12px;
      }
      .panel-title {
        font-size: 42px;
      }
      .panel-subtitle {
        font-size: 18px;
      }
      .service-card {
        padding: 40px;
      }
      .service-card h3 {
        font-size: 24px;
      }
      .service-card p {
        font-size: 16px;
      }
      .stat-num {
        font-size: 56px;
      }
    }

    @media (min-width: 3840px) {
      .section-panel {
        max-width: 2400px;
        padding: 80px 100px;
      }
      .nav-btn {
        padding: 14px 22px;
        font-size: 13px;
      }
      .brand {
        font-size: 40px;
      }
      .panel-title {
        font-size: 52px;
      }
    }

    /* Hide scrollbar on mobile nav but keep functionality */
    .main-nav::-webkit-scrollbar {
      display: none;
    }
    .main-nav {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* MOBILE NAVIGATION SYSTEM - Clean Galaxy View */
    /* ═══════════════════════════════════════════════════════════════ */

    /* Hide mobile elements on desktop */
    .mobile-menu-btn,
    .mobile-atlas-btn,
    .mobile-menu-panel,
    .mobile-atlas-panel,
    .mobile-overlay {
      display: none;
    }

    @media (max-width: 768px) {
      /* CLEAN GALAXY VIEW - Hide cluttering elements */

      /* Hide desktop navigation bar */
      .main-nav {
        display: none !important;
      }

      /* Hide fixed bottom controls - they're in mobile menu now */
      .fixed-bottom-left,
      .fixed-bottom-right {
        display: none !important;
      }

      /* Make brand smaller and less intrusive */
      .brand-box {
        position: fixed !important;
        left: 12px !important;
        top: 12px !important;
        z-index: 100 !important;
      }
      .brand {
        font-size: 16px !important;
        border-left-width: 3px !important;
        padding-left: 10px !important;
        text-shadow: 0 0 20px rgba(64, 156, 255, 0.6) !important;
      }
      .brand span {
        font-size: 7px !important;
        letter-spacing: 0.15em !important;
      }

      /* Date display - top right, minimal */
      .date-display {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        transform: none !important;
        padding: 6px 12px !important;
        z-index: 100 !important;
        background: rgba(5, 12, 25, 0.7) !important;
        backdrop-filter: blur(10px) !important;
      }
      .date-year { font-size: 14px !important; }
      .date-full { font-size: 8px !important; margin-top: 2px !important; }

      /* MOBILE HAMBURGER MENU BUTTON */
      .mobile-menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, rgba(64, 156, 255, 0.3), rgba(123, 45, 255, 0.3));
        border: 2px solid rgba(64, 156, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        z-index: 9500;
        transition: all 0.3s;
        box-shadow: 0 4px 20px rgba(64, 156, 255, 0.4);
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .mobile-menu-btn:active {
        transform: scale(0.95);
      }
      .hamburger-line {
        width: 22px;
        height: 2px;
        background: #00d4ff;
        border-radius: 2px;
        transition: all 0.3s;
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
      }
      .mobile-menu-btn.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      .mobile-menu-btn.active .hamburger-line:nth-child(2) {
        opacity: 0;
      }
      .mobile-menu-btn.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }

      /* MOBILE COSMOS ATLAS BUTTON */
      .mobile-atlas-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 56px;
        height: 56px;
        background: rgba(5, 12, 25, 0.85);
        border: 1px solid rgba(255, 170, 100, 0.4);
        border-radius: 50%;
        cursor: pointer;
        z-index: 9500;
        transition: all 0.3s;
        color: #ffaa64;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .mobile-atlas-btn svg {
        stroke: #ffaa64;
      }
      .mobile-atlas-btn span {
        font-size: 7px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      .mobile-atlas-btn:active {
        transform: scale(0.95);
        background: rgba(255, 170, 100, 0.2);
      }
      .mobile-atlas-btn.active {
        background: rgba(255, 170, 100, 0.2);
        border-color: #ffaa64;
      }

      /* MOBILE FULL SCREEN MENU PANEL */
      .mobile-menu-panel {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(5, 10, 20, 0.98);
        backdrop-filter: blur(30px);
        z-index: 10000;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .mobile-menu-panel.active {
        transform: translateY(0);
      }

      .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
        border-bottom: 1px solid rgba(64, 156, 255, 0.2);
        background: rgba(5, 15, 30, 0.9);
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .mobile-menu-brand {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .mobile-brand-logo {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #409cff, #7b2dff);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }
      .mobile-menu-brand span {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #fff;
      }

      .mobile-menu-close {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        color: #fff;
      }
      .mobile-menu-close:active {
        background: rgba(255, 80, 80, 0.2);
        border-color: #ff5050;
      }

      .mobile-menu-content {
        flex: 1;
        padding: 15px 20px;
        padding-bottom: 100px;
      }

      .mobile-menu-section {
        margin-bottom: 25px;
      }

      .mobile-menu-label {
        display: block;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 2px;
        margin-bottom: 12px;
        padding-left: 5px;
      }

      .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 16px 15px;
        background: rgba(64, 156, 255, 0.05);
        border: 1px solid rgba(64, 156, 255, 0.1);
        border-radius: 12px;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 8px;
        text-decoration: none;
      }
      .mobile-menu-item svg {
        stroke: #409cff;
        flex-shrink: 0;
      }
      .mobile-menu-item span {
        flex: 1;
        text-align: left;
      }
      .mobile-menu-item:active {
        background: rgba(64, 156, 255, 0.15);
        transform: scale(0.98);
      }

      .mobile-menu-item.accent-green {
        background: rgba(37, 211, 102, 0.1);
        border-color: rgba(37, 211, 102, 0.3);
      }
      .mobile-menu-item.accent-green svg { stroke: #25D366; }
      .mobile-menu-item.accent-green:active { background: rgba(37, 211, 102, 0.2); }

      .mobile-menu-item.accent-cyan {
        background: rgba(0, 212, 255, 0.1);
        border-color: rgba(0, 212, 255, 0.3);
      }
      .mobile-menu-item.accent-cyan svg { stroke: #00d4ff; }
      .mobile-menu-item.accent-cyan:active { background: rgba(0, 212, 255, 0.2); }

      .mobile-menu-item.accent-purple {
        background: rgba(123, 45, 255, 0.1);
        border-color: rgba(123, 45, 255, 0.3);
      }
      .mobile-menu-item.accent-purple svg { stroke: #9b59ff; }
      .mobile-menu-item.accent-purple:active { background: rgba(123, 45, 255, 0.2); }

      .mobile-menu-item.whatsapp-item {
        background: rgba(37, 211, 102, 0.15);
        border-color: rgba(37, 211, 102, 0.4);
      }
      .mobile-menu-item.whatsapp-item svg { fill: #25D366; stroke: none; }

      .menu-badge {
        font-size: 9px;
        padding: 4px 8px;
        background: rgba(37, 211, 102, 0.3);
        color: #25D366;
        border-radius: 20px;
        letter-spacing: 1px;
        font-weight: 600;
      }
      .menu-badge.purple {
        background: rgba(123, 45, 255, 0.3);
        color: #9b59ff;
      }

      .mobile-menu-footer {
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(64, 156, 255, 0.1);
        background: rgba(5, 10, 20, 0.95);
        text-align: center;
      }

      .mobile-social-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 15px;
      }
      .mobile-social-links a {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(64, 156, 255, 0.1);
        border: 1px solid rgba(64, 156, 255, 0.2);
        border-radius: 50%;
        color: #409cff;
        transition: all 0.3s;
      }
      .mobile-social-links a:active {
        background: rgba(64, 156, 255, 0.25);
        transform: scale(0.95);
      }

      .mobile-copyright {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        margin: 0;
      }

      /* MOBILE COSMOS ATLAS PANEL */
      .mobile-atlas-panel {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        background: rgba(5, 12, 25, 0.98);
        backdrop-filter: blur(30px);
        border-right: 1px solid rgba(255, 170, 100, 0.3);
        z-index: 10000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .mobile-atlas-panel.active {
        transform: translateX(0);
      }

      .mobile-atlas-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        padding-top: calc(15px + env(safe-area-inset-top, 0px));
        background: rgba(255, 170, 100, 0.1);
        border-bottom: 1px solid rgba(255, 170, 100, 0.2);
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .atlas-title {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2px;
        color: #ffaa64;
      }

      .atlas-close-btn {
        width: 36px;
        height: 36px;
        background: rgba(255, 170, 100, 0.1);
        border: 1px solid rgba(255, 170, 100, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #ffaa64;
      }
      .atlas-close-btn:active {
        background: rgba(255, 170, 100, 0.3);
      }

      .mobile-atlas-content {
        flex: 1;
        padding: 10px 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      }

      .atlas-group-title {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 1.5px;
        padding: 15px 20px 8px;
      }

      .atlas-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        border-left: 3px solid transparent;
      }
      .atlas-item:active {
        background: rgba(64, 156, 255, 0.15);
        border-left-color: #409cff;
      }
      .atlas-item .type {
        font-size: 11px;
        letter-spacing: 1px;
      }
      .atlas-item .type-star { color: #ffd700; }
      .atlas-item .type-planet { color: #409cff; }
      .atlas-item .type-probe { color: #ffa500; }
      .atlas-item .type-blackhole { color: #ff4444; }
      .atlas-item .type-galaxy { color: #d4aaff; }
      .atlas-item .type-nebula { color: #ff99aa; }

      /* MOBILE OVERLAY */
      .mobile-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
      }
      .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
      }

      /* SECTION PANELS - Mobile Optimized */
      .section-panel {
        padding-bottom: 30px !important;
      }

      /* Hide old desktop elements on mobile */
      .nav-menu,
      .hud-panel,
      .bottom-bar,
      .status-bar,
      .reticle,
      .site-footer {
        display: none !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* SMALL PHONES (480px and below) */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .brand {
        font-size: 14px !important;
      }
      .brand span {
        display: none !important;
      }
      .date-display {
        padding: 5px 10px !important;
      }
      .date-year {
        font-size: 12px !important;
      }
      .date-full {
        display: none !important;
      }

      .mobile-menu-btn,
      .mobile-atlas-btn {
        width: 52px;
        height: 52px;
        bottom: 15px;
      }
      .mobile-menu-btn {
        right: 15px;
      }
      .mobile-atlas-btn {
        left: 15px;
      }
      .mobile-atlas-btn span {
        font-size: 6px;
      }

      .mobile-menu-item {
        padding: 14px 12px;
        font-size: 14px;
      }
      .mobile-menu-label {
        font-size: 9px;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* LANDSCAPE MODE ON MOBILE */
    /* ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) and (orientation: landscape) {
      .mobile-menu-btn,
      .mobile-atlas-btn {
        width: 48px;
        height: 48px;
        bottom: 10px;
      }
      .mobile-atlas-btn span {
        display: none;
      }

      .mobile-menu-panel {
        flex-direction: row;
        flex-wrap: wrap;
      }
      .mobile-menu-header {
        width: 100%;
        padding: 10px 15px;
      }
      .mobile-menu-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 15px;
      }
      .mobile-menu-section {
        margin-bottom: 10px;
      }
      .mobile-menu-item {
        padding: 12px 10px;
        font-size: 13px;
      }
      .mobile-menu-footer {
        width: 100%;
        padding: 10px 15px;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* iOS SAFE AREAS */
    /* ═══════════════════════════════════════════════════════════════ */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      @media (max-width: 768px) {
        .mobile-menu-btn,
        .mobile-atlas-btn {
          bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        }
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* REDUCED MOTION - 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;
      }
      .intro-container::before,
      .intro-container::after {
        animation: none !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* INTRO SEQUENCE - Spaceship Capsule Background */
    /* ═══════════════════════════════════════════════════════════════ */
    .intro-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      background: url('capsule.JPG') center center / cover no-repeat;
      transition: opacity 1.5s ease-out, visibility 1.5s ease-out;
      overflow: hidden;
    }
    /* Dark overlay for text readability */
    .intro-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
      pointer-events: none;
    }
    /* Subtle glow effect */
    .intro-container::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 60%;
      background: radial-gradient(ellipse at center, rgba(0,180,255,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .intro-container.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    #intro-canvas-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #intro-canvas-wrapper canvas {
      width: 100% !important;
      height: 100% !important;
    }
    .intro-overlay {
      position: absolute;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 10;
    }
    .intro-loading-bar {
      width: 300px;
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 15px;
    }
    .intro-loading-progress {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #00d4ff, #7b2dff, #ff006e);
      border-radius: 2px;
      transition: width 0.3s ease-out;
      box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    }
    .intro-text {
      font-family: 'Orbitron', sans-serif;
      font-size: 12px;
      letter-spacing: 4px;
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      animation: pulse-text 2s ease-in-out infinite;
    }
    @keyframes pulse-text {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    .intro-skip-btn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: rgba(0,0,0,0.6);
      border: 1px solid rgba(0,212,255,0.4);
      color: rgba(255,255,255,0.8);
      padding: 12px 24px;
      font-family: 'Orbitron', sans-serif;
      font-size: 12px;
      letter-spacing: 2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      border-radius: 6px;
      z-index: 100000;
      min-width: 44px;
      min-height: 44px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .intro-skip-btn:hover {
      background: rgba(0,212,255,0.2);
      border-color: rgba(0,212,255,0.8);
      color: #fff;
      box-shadow: 0 0 20px rgba(0,212,255,0.3);
    }
    /* Mobile: larger touch target */
    @media (max-width: 768px) {
      .intro-skip-btn {
        bottom: 20px;
        right: 20px;
        padding: 14px 20px;
        font-size: 11px;
      }
    }
    .intro-enter {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 10;
    }
    .intro-enter-btn {
      position: relative;
      background: transparent;
      border: 2px solid rgba(0, 212, 255, 0.5);
      color: #00d4ff;
      padding: 20px 50px;
      font-family: 'Orbitron', sans-serif;
      font-size: 16px;
      letter-spacing: 6px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.4s ease;
      border-radius: 4px;
    }
    .intro-enter-btn:hover {
      border-color: #00d4ff;
      box-shadow: 0 0 40px rgba(0, 212, 255, 0.3), inset 0 0 40px rgba(0, 212, 255, 0.1);
      text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    }
    .intro-enter-btn .enter-text {
      position: relative;
      z-index: 2;
    }
    .intro-enter-btn .enter-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
      transform: translate(-50%, -50%);
      animation: glow-pulse 3s ease-in-out infinite;
    }
    @keyframes glow-pulse {
      0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
      50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Intro Content Overlay */
    .intro-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      text-align: center;
      z-index: 10;
      background: radial-gradient(ellipse at center, rgba(0,100,150,0.08) 0%, transparent 60%);
      pointer-events: none;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .intro-content.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .intro-content > * {
      pointer-events: auto;
    }

    /* Intro Logo */
    .intro-logo {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 40px;
      animation: fadeInUp 1s ease-out;
    }
    .intro-logo-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #00f2ff, #7b2dff);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Orbitron', sans-serif;
      font-size: 30px;
      font-weight: 900;
      color: #000;
      box-shadow: 0 0 30px rgba(0, 242, 255, 0.5), 0 0 60px rgba(123, 45, 255, 0.3);
      animation: pulse 3s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 30px rgba(0, 242, 255, 0.5), 0 0 60px rgba(123, 45, 255, 0.3); }
      50% { box-shadow: 0 0 50px rgba(0, 242, 255, 0.8), 0 0 100px rgba(123, 45, 255, 0.5); }
    }
    .intro-logo-text {
      font-family: 'Orbitron', sans-serif;
      text-align: left;
    }
    .intro-logo-text h1 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.15em;
      background: linear-gradient(135deg, #fff 0%, #00f2ff 50%, #7b2dff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0;
    }
    .intro-logo-text span {
      font-size: 10px;
      letter-spacing: 0.4em;
      color: #00f2ff;
      opacity: 0.8;
    }

    /* Intro Headline */
    .intro-headline {
      max-width: 800px;
      margin-bottom: 30px;
      animation: fadeInUp 1s ease-out 0.2s both;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
      padding: 30px 50px;
      border-radius: 20px;
    }
    .intro-headline h2 {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(22px, 4vw, 42px);
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 30px rgba(0,0,0,0.5);
    }
    .intro-headline h2 .highlight {
      background: linear-gradient(135deg, #00f2ff, #7b2dff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .intro-headline h2 .glow {
      color: #00f2ff;
      text-shadow: 0 0 10px #00f2ff, 0 0 20px #00f2ff, 0 0 40px #00f2ff;
    }
    .intro-headline p {
      font-size: clamp(14px, 2vw, 18px);
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.7;
      font-weight: 400;
      text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
    }

    /* Intro Question */
    .intro-question {
      margin-bottom: 30px;
      animation: fadeInUp 1s ease-out 0.4s both;
    }
    .intro-question h3 {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(16px, 3vw, 24px);
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 10px;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    }
    .intro-question .neon-cyan {
      color: #00f2ff;
      text-shadow: 0 0 10px #00f2ff, 0 0 20px #00f2ff, 0 0 40px #00f2ff;
    }
    .intro-question .neon-purple {
      color: #7b2dff;
      text-shadow: 0 0 10px #7b2dff, 0 0 20px #7b2dff, 0 0 40px #7b2dff;
    }
    .intro-question p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    }

    /* Intro Enter Button - positioned in content */
    .intro-content .intro-enter {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      animation: fadeInUp 1s ease-out 0.6s both;
    }
    .intro-content .intro-enter-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, rgba(0, 242, 255, 0.1), rgba(123, 45, 255, 0.1));
      border: 2px solid rgba(0, 242, 255, 0.5);
      padding: 18px 40px;
      font-size: 14px;
      letter-spacing: 4px;
    }
    .intro-content .intro-enter-btn:hover {
      background: linear-gradient(135deg, rgba(0, 242, 255, 0.2), rgba(123, 45, 255, 0.2));
      transform: translateY(-3px);
    }
    .intro-content .intro-enter-btn svg {
      transition: transform 0.3s ease;
    }
    .intro-content .intro-enter-btn:hover svg {
      transform: translateX(5px);
    }

    /* Content skip button */
    .intro-skip-btn.content-skip {
      position: absolute;
      bottom: 30px;
      right: 30px;
    }

    /* Mobile adjustments for intro */
    @media (max-width: 768px) {
      .intro-loading-bar {
        width: 200px;
      }
      .intro-text {
        font-size: 10px;
        letter-spacing: 2px;
      }
      .intro-skip-btn {
        bottom: 20px;
        right: 20px;
        padding: 8px 15px;
        font-size: 10px;
      }
      .intro-enter-btn {
        padding: 15px 30px;
        font-size: 12px;
        letter-spacing: 4px;
      }
      .intro-content {
        padding: 20px 15px;
      }
      .intro-logo {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
      }
      .intro-logo-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
      }
      .intro-logo-text {
        text-align: center;
      }
      .intro-logo-text h1 {
        font-size: 22px;
      }
      .intro-logo-text span {
        font-size: 8px;
      }
      .intro-headline {
        margin-bottom: 20px;
      }
      .intro-headline h2 {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
      .intro-headline p {
        font-size: 13px;
        line-height: 1.6;
      }
      .intro-question {
        margin-bottom: 20px;
      }
      .intro-question h3 {
        font-size: 14px;
      }
      .intro-question p {
        font-size: 12px;
      }
      .intro-content .intro-enter-btn {
        padding: 14px 30px;
        font-size: 12px;
        letter-spacing: 3px;
      }
    }

    /* Very small screens (480px and below) */
    @media (max-width: 480px) {
      .intro-content {
        padding: 15px 10px;
        justify-content: flex-start;
        padding-top: 60px;
      }
      .intro-logo {
        margin-bottom: 15px;
      }
      .intro-logo-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      .intro-logo-text h1 {
        font-size: 18px;
      }
      .intro-logo-text span {
        font-size: 7px;
        letter-spacing: 2px;
      }
      .intro-headline h2 {
        font-size: 15px;
        margin-bottom: 10px;
      }
      .intro-headline p {
        font-size: 11px;
        line-height: 1.5;
      }
      .intro-question {
        margin-bottom: 15px;
      }
      .intro-question h3 {
        font-size: 12px;
      }
      .intro-question p {
        font-size: 10px;
      }
      .intro-content .intro-enter-btn {
        padding: 12px 24px;
        font-size: 11px;
        letter-spacing: 2px;
        min-height: 48px;
      }
      .intro-content .intro-enter-btn svg {
        width: 16px;
        height: 16px;
      }
      .intro-skip-btn {
        bottom: 15px;
        right: 15px;
        padding: 6px 12px;
        font-size: 9px;
      }
    }