/* ==========================================================================
       1. CSS DƏYİŞƏNLƏRİ (Design Tokens)
       ========================================================================== */
    :root {
      /* Rənglər */
      --color-primary: #1E3A8A;
      --color-primary-dark: #0F172A;
      --color-accent: #0066FF;
      --color-accent-hover: #0052CC;
      --color-accent-subtle: #EFF6FF;
      --color-whatsapp: #25D366;
      --color-whatsapp-hover: #20BA5A;

      --color-bg-surface: #FFFFFF;
      --color-bg-subtle: #F8FAFC;

      --color-gray-50:  #F8FAFC;
      --color-gray-100: #F1F5F9;
      --color-gray-200: #E2E8F0;
      --color-gray-300: #CBD5E1;
      --color-gray-400: #94A3B8;
      --color-gray-500: #64748B;
      --color-gray-600: #475569;
      --color-gray-700: #334155;
      --color-gray-800: #1E293B;
      --color-gray-900: #0F172A;

      --color-success: #10B981;
      --color-success-bg: #ECFDF5;
      --color-warning: #F59E0B;
      --color-warning-bg: #FFFBEB;
      --color-error: #EF4444;
      --color-error-bg: #FEF2F2;
      --color-info: #3B82F6;
      --color-info-bg: #EFF6FF;

      /* Tipoqrafiya */
      --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-family-heading: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

      --font-size-xs: 0.75rem;    /* 12px */
      --font-size-sm: 0.875rem;   /* 14px */
      --font-size-base: 1rem;     /* 16px */
      --font-size-lg: 1.125rem;   /* 18px */
      --font-size-xl: 1.25rem;    /* 20px */
      --font-size-2xl: 1.5rem;    /* 24px */
      --font-size-3xl: 2rem;      /* 32px */
      --font-size-4xl: 2.75rem;   /* 44px */

      /* Aralıqlar */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;
      --space-20: 80px;

      /* Künc Radiusları */
      --radius-xs: 4px;
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-full: 9999px;

      /* Kölgələr */
      --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
      --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
      --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
      --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
      --shadow-floating: 0 8px 30px rgba(0, 102, 255, 0.2);

      /* Keçidlər */
      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);

      /* Layout */
      --container-max-width: 1240px;
    }

    /* ==========================================================================
       2. BAZA VƏ RESET
       ========================================================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-family: var(--font-family-base);
      font-size: 16px;
      line-height: 1.5;
      color: var(--color-gray-800);
      background-color: var(--color-bg-subtle);
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      overflow-x: hidden;
      min-width: 320px;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--transition-fast);
    }

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

    button, input, select, textarea {
      font: inherit;
    }

    button {
      background: none;
      border: none;
      cursor: pointer;
    }

    :focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    .container {
      width: 100%;
      max-width: var(--container-max-width);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-4);
      padding-right: var(--space-4);
    }

    @media (min-width: 768px) {
      .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
      }
    }

    /* ==========================================================================
       3. TİPOQRAFİYA VƏ BAŞLIQLAR
       ========================================================================== */
    h1, h2, h3, h4 {
      font-family: var(--font-family-heading);
      color: var(--color-gray-900);
      font-weight: 700;
      line-height: 1.25;
    }

    .section-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto var(--space-8);
    }

    .section-subtitle {
      display: inline-block;
      font-size: var(--font-size-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-accent);
      background-color: var(--color-accent-subtle);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-2);
    }

    .section-title {
      font-size: var(--font-size-2xl);
      margin-bottom: var(--space-2);
    }

    @media (min-width: 768px) {
      .section-title {
        font-size: var(--font-size-3xl);
      }
    }

    .section-desc {
      color: var(--color-gray-600);
      font-size: var(--font-size-base);
    }

    /* ==========================================================================
       4. DÜYMƏLƏR (Buttons)
       ========================================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      font-weight: 600;
      font-size: var(--font-size-sm);
      min-height: 44px;
      padding: 0 var(--space-5);
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
      white-space: nowrap;
      user-select: none;
    }

    .btn-primary {
      background-color: var(--color-accent);
      color: #FFFFFF;
      box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
      background-color: var(--color-accent-hover);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }

    .btn-secondary {
      background-color: #FFFFFF;
      color: var(--color-gray-800);
      border: 1.5px solid var(--color-gray-300);
    }

    .btn-secondary:hover {
      background-color: var(--color-gray-50);
      border-color: var(--color-gray-400);
      color: var(--color-gray-900);
    }

    .btn-whatsapp {
      background-color: var(--color-whatsapp);
      color: #0F172A;
      font-weight: 600;
    }

    .btn-whatsapp:hover {
      background-color: var(--color-whatsapp-hover);
      transform: translateY(-1px);
    }

    .btn-sm {
      min-height: 36px;
      padding: 0 var(--space-3);
      font-size: var(--font-size-xs);
    }

    .btn-lg {
      min-height: 48px;
      padding: 0 var(--space-6);
      font-size: var(--font-size-base);
    }

    /* ==========================================================================
       5. HEADER & TOPBAR
       ========================================================================== */
    .topbar {
      background-color: var(--color-gray-900);
      color: var(--color-gray-300);
      font-size: var(--font-size-xs);
      padding: var(--space-2) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .topbar-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
    }

    .topbar-info {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .topbar-info span {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .lang-switcher {
      display: flex;
      gap: var(--space-1);
    }

    .lang-btn {
      color: var(--color-gray-400);
      padding: 2px 6px;
      border-radius: var(--radius-xs);
      font-weight: 600;
    }

    .lang-btn.active {
      color: #FFFFFF;
      background-color: var(--color-accent);
    }

    .site-header {
      background-color: var(--color-bg-surface);
      border-bottom: 1px solid var(--color-gray-200);
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: var(--shadow-xs);
    }

    .header-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      gap: var(--space-4);
    }

    .header-logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 42px;
    }

    .header-logo svg {
      height: 40px;
      width: auto;
    }

    .header-search {
      flex: 1;
      max-width: 480px;
      position: relative;
      display: none;
    }

    @media (min-width: 768px) {
      .header-search {
        display: block;
      }
    }

    .search-input {
      width: 100%;
      height: 42px;
      padding: 0 var(--space-4) 0 40px;
      background-color: var(--color-gray-50);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      color: var(--color-gray-800);
      transition: all var(--transition-fast);
    }

    .search-input:focus {
      background-color: #FFFFFF;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
      outline: none;
    }

    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-gray-400);
      pointer-events: none;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .header-phone {
      display: none;
      flex-direction: column;
      align-items: flex-end;
      line-height: 1.2;
    }

    @media (min-width: 1024px) {
      .header-phone {
        display: flex;
      }
    }

    .header-phone-label {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    .header-phone-val {
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--color-gray-900);
    }

    .cart-badge-btn {
      position: relative;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--color-gray-700);
      background-color: var(--color-gray-100);
      transition: all var(--transition-fast);
    }

    .cart-badge-btn:hover {
      background-color: var(--color-gray-200);
      color: var(--color-accent);
    }

    .cart-count {
      position: absolute;
      top: 6px;
      right: 6px;
      background-color: var(--color-accent);
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #FFFFFF;
    }

    .mobile-menu-toggle {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-gray-700);
      border-radius: var(--radius-sm);
    }

    @media (min-width: 1024px) {
      .mobile-menu-toggle {
        display: none;
      }
    }

    /* Əsas Naviqasiya Bar */
    .header-nav {
      display: none;
      background-color: #FFFFFF;
      border-top: 1px solid var(--color-gray-100);
    }

    @media (min-width: 1024px) {
      .header-nav {
        display: block;
      }
    }

    .nav-list {
      display: flex;
      list-style: none;
      gap: var(--space-6);
      height: 44px;
      align-items: center;
    }

    .nav-item a {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-gray-700);
      display: inline-flex;
      align-items: center;
      height: 44px;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
    }

    .nav-item a:hover,
    .nav-item.active a {
      color: var(--color-accent);
      border-bottom-color: var(--color-accent);
    }

    .nav-badge-new {
      background-color: var(--color-accent);
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: var(--radius-full);
      margin-left: 6px;
    }

    /* Mobil Drawer Menyusu */
    .mobile-drawer {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.6);
      z-index: 2000;
      backdrop-filter: blur(4px);
    }

    .mobile-drawer.open {
      display: block;
    }

    .drawer-content {
      width: 82%;
      max-width: 320px;
      height: 100%;
      background-color: #FFFFFF;
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow-y: auto;
    }

    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-6);
      border-bottom: 1px solid var(--color-gray-200);
      padding-bottom: var(--space-4);
    }

    .drawer-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .drawer-nav-list a {
      display: block;
      padding: var(--space-3) var(--space-2);
      font-size: var(--font-size-base);
      font-weight: 600;
      color: var(--color-gray-800);
      border-radius: var(--radius-sm);
    }

    /* ==========================================================================
       SOL TƏRƏF KATEQORİYA DRAWER VƏ ÜZƏN İKON DÜYMƏSİ
       ========================================================================== */
    .nav-category-toggle {
      background: linear-gradient(135deg, var(--color-accent) 0%, #004ecc 100%);
      color: #FFFFFF;
      font-weight: 700;
      border-radius: var(--radius-md);
      padding: 9px 16px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 13.5px;
      box-shadow: 0 2px 8px rgba(0, 102, 255, 0.28);
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .nav-category-toggle:hover {
      background: linear-gradient(135deg, var(--color-accent-hover) 0%, #003db3 100%);
      box-shadow: 0 4px 14px rgba(0, 102, 255, 0.4);
      transform: translateY(-1px);
    }

    /* Sol kənarda sabit üzən kateqoriya düyməsi */
    .floating-left-cat-btn {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1500;
      background: #0F172A;
      color: #FFFFFF;
      border: 1.5px solid rgba(0, 102, 255, 0.45);
      border-left: none;
      border-radius: 0 12px 12px 0;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
      transition: all 0.22s ease;
    }

    .floating-left-cat-btn:hover {
      background: #1E293B;
      border-color: var(--color-accent);
      padding-right: 12px;
      box-shadow: 6px 0 24px rgba(0, 102, 255, 0.35);
    }

    .floating-cat-icon {
      color: var(--color-accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .floating-cat-text {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #E2E8F0;
    }

    /* Sol Drawer Backdrop */
    .category-drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .category-drawer-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Sol Drawer Konteyner */
    .category-drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: 380px;
      max-width: 88vw;
      height: 100vh;
      background: #0F172A;
      z-index: 10000;
      transform: translateX(-100%);
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 12px 0 35px rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;
      color: #FFFFFF;
    }

    .category-drawer.open {
      transform: translateX(0);
    }

    .category-drawer-head {
      padding: 18px 20px;
      border-bottom: 1px solid #1E293B;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #0B1120;
    }

    .category-drawer-close {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #94A3B8;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .category-drawer-close:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: #EF4444;
      color: #FFFFFF;
    }

    .category-drawer-search {
      padding: 12px 18px;
      border-bottom: 1px solid #1E293B;
      background: #0F172A;
      position: relative;
    }

    .category-drawer-search input {
      width: 100%;
      background: #1E293B;
      border: 1px solid #334155;
      border-radius: 8px;
      padding: 9px 12px 9px 36px;
      color: #FFFFFF;
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s;
    }

    .category-drawer-search input:focus {
      border-color: var(--color-accent);
    }

    .category-drawer-search svg {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #64748B;
    }

    .category-drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .drawer-cat-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(30, 41, 59, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.06);
      text-decoration: none;
      color: #FFFFFF;
      transition: all 0.18s ease;
    }

    .drawer-cat-item:hover {
      background: rgba(0, 102, 255, 0.15);
      border-color: rgba(0, 102, 255, 0.45);
      transform: translateX(4px);
    }

    .drawer-cat-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: rgba(0, 102, 255, 0.18);
      color: #60A5FA;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .drawer-cat-item:hover .drawer-cat-icon {
      background: var(--color-accent);
      color: #FFFFFF;
    }

    .drawer-cat-info {
      flex: 1;
      min-width: 0;
    }

    .drawer-cat-name {
      font-size: 13.5px;
      font-weight: 700;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .drawer-cat-desc {
      font-size: 11.5px;
      color: #94A3B8;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .category-drawer-foot {
      padding: 14px 18px;
      border-top: 1px solid #1E293B;
      background: #0B1120;
    }

    .drawer-nav-list a:hover {
      background-color: var(--color-gray-100);
      color: var(--color-accent);
    }

    /* ==========================================================================
       6. BLOK 1: HERO (Başlıq, Qısa təklif, 2 CTA)
       ========================================================================== */
    /* ==========================================================================
       6. BLOK 1: HERO (Təmiz 2 Sütunlu - Sol: Təklif, Sağ: 3D Animasiya Modeli)
       ========================================================================== */
    .hero-section {
      background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
      color: #FFFFFF;
      padding: var(--space-12) 0 var(--space-16);
      position: relative;
      overflow: hidden;
    }

    .hero-section .container {
      max-width: var(--container-max-width);
      width: 100%;
    }

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

    @media (min-width: 992px) {
      .hero-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 36px;
        align-items: center;
      }
    }

    .hero-content-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    /* ==========================================================================
       ALOV VƏ GÜNÜN ENDİRİMİ İSTİQAMƏTLƏRİ (DİQQƏTÇƏKƏN XÜSUSİ DİZAYN)
       ========================================================================== */
    /* Yuxarı Naviqasiyadakı Alov Linki */
    .nav-fire-link {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(249, 115, 22, 0.14) 100%) !important;
      border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
      color: #EF4444 !important;
      font-weight: 800 !important;
      padding: 6px 14px !important;
      border-radius: 9999px !important;
      transition: all 0.25s ease !important;
      animation: firePulseBorder 2.5s infinite ease-in-out;
      text-decoration: none !important;
    }

    .nav-fire-link:hover {
      background: linear-gradient(135deg, #EF4444 0%, #EA580C 100%) !important;
      color: #FFFFFF !important;
      border-color: #EF4444 !important;
      box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45);
      transform: translateY(-1px);
    }

    .nav-fire-badge {
      background: #EF4444;
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .nav-fire-link:hover .nav-fire-badge {
      background: #FFFFFF;
      color: #EF4444;
    }

    .fire-glow-icon {
      font-size: 15px;
      display: inline-block;
      animation: flameWiggle 1.8s infinite ease-in-out;
    }

    /* Sol Tərəfdə Sabit Üzən Alov Düyməsi (Gözə Batan) */
    .floating-fire-deal-btn {
      position: fixed;
      left: 18px;
      bottom: 84px;
      z-index: 1090;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .fire-btn-inner {
      background: linear-gradient(135deg, #FF3B30 0%, #FF9500 100%);
      color: #FFFFFF;
      padding: 9px 15px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      animation: fireFloatPulse 3s infinite ease-in-out;
    }

    .floating-fire-deal-btn:hover {
      transform: translateY(-3px) scale(1.04);
    }

    .fire-emoji-pulse {
      font-size: 17px;
      animation: flameWiggle 1.4s infinite ease-in-out;
    }

    .fire-btn-pill {
      background: rgba(0, 0, 0, 0.35);
      font-size: 11px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: 0.03em;
    }

    @media (max-width: 640px) {
      .floating-fire-deal-btn {
        left: 12px;
        bottom: 74px;
      }
      .fire-btn-label {
        display: none;
      }
      .fire-btn-inner {
        padding: 9px 12px;
      }
    }

    /* ==========================================================================
       BLOK 1B: GÜNÜN ENDİRİMLƏRİ AYRICA VİTRİN BÖLMƏSİ
       ========================================================================== */
    .daily-deals-section {
      background: radial-gradient(circle at 50% 0%, #1E1B4B 0%, #0F172A 70%, #090D16 100%);
      padding: 64px 0 76px;
      border-top: 1px solid rgba(239, 68, 68, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      overflow: hidden;
    }

    .daily-deals-section::before {
      content: '';
      position: absolute;
      top: -120px;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 240px;
      background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, rgba(249, 115, 22, 0) 70%);
      pointer-events: none;
    }

    .deals-header-wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-bottom: 34px;
      flex-wrap: wrap;
    }

    .deals-header-left {
      max-width: 650px;
    }

    .deals-fire-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(249, 115, 22, 0.25) 100%);
      border: 1px solid rgba(239, 68, 68, 0.45);
      color: #F87171;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 5px 14px;
      border-radius: 9999px;
      margin-bottom: 12px;
    }

    .fire-animated-emoji {
      font-size: 16px;
      animation: flameWiggle 1.5s infinite ease-in-out;
    }

    .deals-fire-pulse {
      background: #EF4444;
      color: #FFFFFF;
      font-size: 10px;
      padding: 1px 7px;
      border-radius: 4px;
      animation: firePulseBadge 2s infinite ease-in-out;
    }

    .deals-main-title {
      font-size: 2.1rem;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 1.25;
      margin: 0 0 10px 0;
      letter-spacing: -0.02em;
    }

    .deals-sub-desc {
      color: #CBD5E1;
      font-size: 15px;
      line-height: 1.55;
      margin: 0;
    }

    /* Geri Sayım Taymeri */
    .deals-timer-box {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(239, 68, 68, 0.35);
      border-radius: 14px;
      padding: 14px 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.12);
      backdrop-filter: blur(10px);
    }

    .deals-timer-title {
      font-size: 12px;
      color: #F87171;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .deals-countdown {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .deals-time-segment {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      min-width: 44px;
      padding: 4px 6px;
    }

    .deals-time-segment span {
      font-size: 20px;
      font-weight: 800;
      color: #FFFFFF;
      font-family: monospace;
      line-height: 1.1;
    }

    .deals-time-segment label {
      font-size: 9px;
      color: #94A3B8;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .deals-time-colon {
      font-size: 20px;
      font-weight: 800;
      color: #EF4444;
      line-height: 1;
      margin-bottom: 8px;
    }

    /* Vitrin Slayder Qutusunun Ayrı Bölmədəki Geniş Dizaynı */
    .deals-slider-container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .deals-visual-standalone {
      background: rgba(15, 23, 42, 0.9) !important;
      border: 1.5px solid rgba(239, 68, 68, 0.3) !important;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(239, 68, 68, 0.15) !important;
      padding: 24px 28px !important;
    }

    .deals-visual-standalone .slider-product-title {
      font-size: 1.35rem !important;
      margin-top: 4px !important;
    }

    .deals-visual-standalone .slider-feature-list {
      gap: 8px !important;
      margin: 12px 0 16px 0 !important;
    }

    .deals-visual-standalone .slider-feature-item {
      font-size: 12px !important;
      padding: 5px 12px !important;
    }

    .deals-visual-standalone .slider-price-box {
      padding: 14px 20px !important;
      margin-bottom: 8px !important;
    }

    .deals-visual-standalone .slider-current-price {
      font-size: 1.75rem !important;
    }

    .deals-visual-standalone .slider-cta-row {
      grid-template-columns: 1.4fr 1fr !important;
      gap: 12px !important;
      margin-top: 10px !important;
    }

    /* Günün Endirimləri və Brendlər Yan-yana Split Layout */
    .deals-content-split {
      display: grid;
      grid-template-columns: 1.25fr 0.95fr;
      gap: 24px;
      align-items: stretch;
      max-width: 1240px;
      margin: 0 auto;
    }

    .deals-slider-column {
      min-width: 0;
      display: flex;
    }

    .deals-slider-column .hero-visual-box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .deals-brands-column {
      min-width: 0;
      display: flex;
    }

    .deals-brands-card {
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.9);
      border: 1.5px solid rgba(59, 130, 246, 0.35);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(59, 130, 246, 0.12);
      border-radius: 16px;
      padding: 24px 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
    }

    .deals-brands-card::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 160px;
      height: 160px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
      pointer-events: none;
    }

    .deals-brands-header {
      margin-bottom: 12px;
    }

    .deals-brands-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(59, 130, 246, 0.15);
      border: 1px solid rgba(59, 130, 246, 0.35);
      color: #60A5FA;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 999px;
      margin-bottom: 8px;
    }

    .deals-brands-title {
      font-size: 1.35rem;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0 0 4px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .deals-brands-subtitle {
      font-size: 12.5px;
      color: #94A3B8;
      line-height: 1.45;
      margin: 0;
    }

    .deals-brands-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 12px 0 16px;
      max-height: 290px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .deals-brands-grid::-webkit-scrollbar {
      width: 4px;
    }
    .deals-brands-grid::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
    }

    .deals-brand-item {
      background: rgba(30, 41, 59, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 9px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .deals-brand-item:hover {
      background: rgba(30, 41, 59, 0.95);
      border-color: rgba(96, 165, 250, 0.55);
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0, 102, 255, 0.2);
    }

    .brand-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .brand-item-name {
      font-family: var(--font-family-heading);
      font-weight: 800;
      font-size: 12.5px;
      letter-spacing: 0.3px;
      color: #F8FAFC;
    }

    .brand-item-badge {
      font-size: 9px;
      font-weight: 700;
      color: #60A5FA;
      background: rgba(59, 130, 246, 0.16);
      padding: 1.5px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .brand-item-cat {
      font-size: 11px;
      color: #94A3B8;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .deals-brands-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: auto;
      gap: 12px;
    }

    .deals-brands-trust {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #10B981;
      font-weight: 600;
    }

    .deals-brands-link {
      font-size: 12px;
      font-weight: 700;
      color: #60A5FA;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.2s;
      white-space: nowrap;
    }

    .deals-brands-link:hover {
      color: #93C5FD;
      text-decoration: underline;
    }

    @media (max-width: 991px) {
      .deals-content-split {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .deals-brands-grid {
        max-height: none;
      }
    }

    @media (max-width: 576px) {
      .deals-brands-grid {
        grid-template-columns: 1fr;
      }
      .deals-brands-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }

    /* Animasiyalar */
    @keyframes flameWiggle {
      0%, 100% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(-8deg) scale(1.1); }
      75% { transform: rotate(8deg) scale(1.15); }
    }

    @keyframes firePulseBorder {
      0%, 100% {
        border-color: rgba(239, 68, 68, 0.35);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
      }
      50% {
        border-color: rgba(239, 68, 68, 0.8);
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
      }
    }

    @keyframes firePulseBadge {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.85; transform: scale(0.96); }
    }

    @keyframes fireFloatPulse {
      0%, 100% {
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
      }
      50% {
        box-shadow: 0 10px 28px rgba(239, 68, 68, 0.8), 0 0 18px rgba(255, 149, 0, 0.6);
      }
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--font-size-xs);
      font-weight: 600;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-4);
      color: #93C5FD;
    }

    .hero-title {
      font-size: 1.85rem;
      color: #FFFFFF;
      line-height: 1.2;
      margin-bottom: var(--space-4);
      letter-spacing: -0.02em;
    }

    @media (min-width: 768px) {
      .hero-title {
        font-size: var(--font-size-4xl);
      }
    }

    .hero-title span {
      color: #60A5FA;
    }

    .hero-desc {
      font-size: var(--font-size-base);
      color: #CBD5E1;
      margin-bottom: var(--space-8);
      max-width: 560px;
      line-height: 1.6;
    }

    .hero-cta-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      margin-bottom: var(--space-8);
    }

    @media (min-width: 640px) {
      .hero-cta-group {
        flex-direction: row;
      }
    }

    .hero-trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4) var(--space-6);
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      padding-top: var(--space-6);
      font-size: var(--font-size-sm);
      color: #E2E8F0;
    }

    .hero-trust-item {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }

    .hero-trust-item svg {
      color: #34D399;
    }

    /* ==========================================================================
       Hero Visual Card / Endirim Slayderi
       ========================================================================== */
    .hero-visual-box {
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
      position: relative;
      overflow: hidden;
    }

    .hero-slider-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero-slider-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      border-radius: 9999px;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    }

    .hero-slider-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .slider-nav-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
    }

    .slider-nav-btn:hover {
      background: var(--color-accent);
      border-color: var(--color-accent);
    }

    .slider-counter {
      font-size: 12px;
      color: #94A3B8;
      font-weight: 600;
      min-width: 32px;
      text-align: center;
    }

    .hero-slider-track-wrap {
      overflow: hidden;
      width: 100%;
    }

    .hero-slider-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
      width: 100%;
    }

    .hero-slider-item {
      min-width: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .slider-product-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .slider-brand-badge {
      font-size: 11px;
      font-weight: 700;
      color: #60A5FA;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .slider-discount-pill {
      background: rgba(239, 68, 68, 0.18);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #F87171;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .slider-product-title {
      color: #FFFFFF;
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.35;
      margin: 2px 0 0 0;
    }

    .slider-feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 4px 0;
    }

    .slider-feature-item {
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #CBD5E1;
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .slider-feature-item svg {
      color: #34D399;
    }

    .slider-price-box {
      background: rgba(2, 6, 23, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }

    .slider-price-left {
      display: flex;
      flex-direction: column;
    }

    .slider-old-price {
      font-size: 12px;
      color: #94A3B8;
      text-decoration: line-through;
    }

    .slider-current-price {
      font-size: 1.45rem;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 1.1;
    }

    .slider-install-option {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.35);
      color: #34D399;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 4px;
      text-align: right;
    }

    .slider-cta-row {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 8px;
      margin-top: 4px;
    }

    .slider-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      margin-top: var(--space-4);
      padding-top: var(--space-2);
    }

    .slider-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .slider-dot.active {
      width: 24px;
      border-radius: 4px;
      background: #0066FF;
    }

    /* ==========================================================================
       7. BLOK 2: KATEQORİYALAR (İkonlarla)
       ========================================================================== */
    .categories-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-surface);
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
    }

    @media (min-width: 640px) {
      .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
      }
    }

    @media (min-width: 1024px) {
      .category-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
      }
    }

    .category-card {
      background-color: var(--color-bg-subtle);
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      transition: all var(--transition-fast);
      position: relative;
    }

    .category-card:hover {
      border-color: var(--color-accent);
      background-color: #FFFFFF;
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .category-icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      background-color: var(--color-accent-subtle);
      color: var(--color-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
    }

    .category-card:hover .category-icon-wrapper {
      background-color: var(--color-accent);
      color: #FFFFFF;
    }

    .category-title {
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--color-gray-900);
      margin: 0;
    }

    .category-count {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    /* ==========================================================================
       8. BLOK 3: HAZIR DƏSTLƏR (3-4 kart, açıq qiymətlə)
       ========================================================================== */
    /* ==========================================================================
       YENİ MƏHSUL: "ÖZÜN QURAŞDIR" (DIY / PLUG & PLAY) QUTU VİTRİNİ
       ========================================================================== */
    .diy-box-showcase {
      background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
      border: 2px solid #3B82F6;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.4), 0 0 30px rgba(59, 130, 246, 0.2);
      border-radius: 20px;
      padding: 32px 36px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
      color: #FFFFFF;
    }

    .diy-box-showcase::after {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
      pointer-events: none;
    }

    .diy-showcase-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 36px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .diy-badge-top {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: #FFFFFF;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 12px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .diy-title {
      font-size: 1.85rem;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 10px;
      color: #FFFFFF;
    }

    .diy-title span {
      background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .diy-desc {
      color: #CBD5E1;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .diy-box-items {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 22px;
    }

    .diy-box-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #E2E8F0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 8px 12px;
      border-radius: 8px;
    }

    .diy-box-item svg {
      color: #34D399;
      flex-shrink: 0;
    }

    .diy-steps-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .diy-step-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: #94A3B8;
    }

    .diy-step-num {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #3B82F6;
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Sağ Konfiqurator Paneli */
    .diy-config-panel {
      background: rgba(15, 23, 42, 0.85);
      border: 1.5px solid rgba(59, 130, 246, 0.3);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
    }

    .diy-config-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #93C5FD;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .diy-opt-group {
      margin-bottom: 16px;
    }

    .diy-opt-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #CBD5E1;
      margin-bottom: 8px;
    }

    .diy-cam-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .diy-cam-btn {
      background: rgba(30, 41, 59, 0.7);
      border: 1.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 10px;
      color: #E2E8F0;
      cursor: pointer;
      text-align: center;
      font-size: 12.5px;
      font-weight: 600;
      transition: all 0.2s;
    }

    .diy-cam-btn.active {
      background: rgba(59, 130, 246, 0.2);
      border-color: #3B82F6;
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
    }

    .diy-cable-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .diy-chip {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #CBD5E1;
      cursor: pointer;
      transition: all 0.18s;
    }

    .diy-chip.active {
      background: #3B82F6;
      border-color: #3B82F6;
      color: #FFFFFF;
    }

    .diy-custom-cable-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .diy-counter-btn {
      width: 32px;
      height: 32px;
      background: rgba(30, 41, 59, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

    .diy-counter-btn:hover {
      background: #3B82F6;
    }

    .diy-cable-input {
      width: 70px;
      height: 32px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }

    .diy-cable-unit {
      font-size: 12px;
      color: #94A3B8;
    }

    .diy-summary-box {
      background: rgba(30, 41, 59, 0.5);
      border: 1px dashed rgba(59, 130, 246, 0.35);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 16px;
      font-size: 12px;
      line-height: 1.6;
    }

    .diy-summary-row {
      display: flex;
      justify-content: space-between;
      color: #CBD5E1;
      margin-bottom: 4px;
    }

    .diy-summary-row.total-row {
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      padding-top: 8px;
      margin-top: 6px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 800;
      color: #FFFFFF;
    }

    .diy-summary-row.total-row .total-val {
      color: #34D399;
      font-size: 17px;
    }

    .diy-cta-btn {
      width: 100%;
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: #FFFFFF;
      border: none;
      padding: 13px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
      transition: all 0.2s;
    }

    .diy-cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
      color: #FFFFFF;
    }

    @media (max-width: 900px) {
      .diy-box-showcase {
        padding: 24px 20px;
      }
      .diy-showcase-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .diy-box-items {
        grid-template-columns: 1fr;
      }
    }

    .kits-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-subtle);
    }

    .kits-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    @media (min-width: 680px) {
      .kits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    @media (min-width: 1100px) {
      .kits-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
    }
    .kit-card {
      background-color: var(--color-bg-surface);
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-fast);
      position: relative;
    }

    .kit-card:hover {
      border-color: var(--color-accent);
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }

    .kit-badge-popular {
      position: absolute;
      top: 14px;
      right: 14px;
      background-color: var(--color-accent);
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .kit-card-head {
      padding: var(--space-6);
      border-bottom: 1px solid var(--color-gray-100);
    }

    .kit-card-title {
      font-size: var(--font-size-xl);
      margin-bottom: var(--space-1);
    }

    .kit-card-subtitle {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    .kit-card-body {
      padding: var(--space-6);
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .kit-items-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      font-size: var(--font-size-sm);
    }

    .kit-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-2);
      color: var(--color-gray-700);
    }

    .kit-item svg {
      color: var(--color-success);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .kit-card-foot {
      padding: var(--space-5) var(--space-6);
      background-color: var(--color-gray-50);
      border-top: 1px solid var(--color-gray-200);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .kit-price-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .kit-price-label {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    .kit-price-val {
      font-size: var(--font-size-2xl);
      font-weight: 800;
      color: var(--color-gray-900);
    }

    .kit-install-note {
      font-size: var(--font-size-xs);
      color: var(--color-primary);
      background-color: #DBEAFE;
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-xs);
      font-weight: 600;
      text-align: center;
    }

    /* ==========================================================================
       9. BLOK 4: XİDMƏTLƏR (8 xidmət kartı)
       ========================================================================== */
    .services-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-surface);
    }

    .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    @media (min-width: 640px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .services-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .service-card {
      background-color: var(--color-bg-subtle);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-4);
      transition: all var(--transition-fast);
    }

    .service-card:hover {
      background-color: #FFFFFF;
      border-color: var(--color-accent);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .service-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background-color: var(--color-gray-100);
      color: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .service-title {
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: var(--space-1);
    }

    .service-desc {
      font-size: var(--font-size-sm);
      color: var(--color-gray-600);
      line-height: 1.5;
    }

    .service-link {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-accent);
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
    }

    .service-link:hover {
      text-decoration: underline;
    }

    /* ==========================================================================
       10. BLOK 5: NECƏ İŞLƏYİRİK (4 addım)
       ========================================================================== */
    .steps-section {
      padding: var(--space-16) 0;
      background: linear-gradient(to bottom, var(--color-gray-900), #111827);
      color: #FFFFFF;
    }

    .steps-section .section-title {
      color: #FFFFFF;
    }

    .steps-section .section-desc {
      color: var(--color-gray-400);
    }

    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
      position: relative;
    }

    @media (min-width: 640px) {
      .steps-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .steps-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .step-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      position: relative;
    }

    .step-number {
      font-family: var(--font-family-heading);
      font-size: var(--font-size-2xl);
      font-weight: 800;
      color: var(--color-accent);
      line-height: 1;
    }

    .step-title {
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: #FFFFFF;
    }

    .step-desc {
      font-size: var(--font-size-sm);
      color: var(--color-gray-400);
      line-height: 1.5;
    }

    /* ==========================================================================
       11. BLOK 6: KALKULYATOR BLOKU (Mini interaktiv)
       ========================================================================== */
    .calc-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-subtle);
    }

    .calc-card {
      background-color: var(--color-bg-surface);
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
      box-shadow: var(--shadow-md);
      max-width: 900px;
      margin: 0 auto;
    }

    .calc-controls-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
      margin-bottom: var(--space-8);
    }

    @media (min-width: 768px) {
      .calc-controls-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .calc-field-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .calc-label {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-gray-800);
    }

    .calc-select, .calc-range {
      width: 100%;
      height: 44px;
      padding: 0 var(--space-3);
      border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-sm);
      background-color: var(--color-gray-50);
      font-size: var(--font-size-base);
    }

    .calc-result-box {
      background-color: var(--color-accent-subtle);
      border: 1.5px dashed var(--color-accent);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      align-items: center;
      text-align: center;
    }

    @media (min-width: 640px) {
      .calc-result-box {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }
    }

    .calc-res-title {
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: var(--color-gray-900);
    }

    .calc-res-detail {
      font-size: var(--font-size-sm);
      color: var(--color-gray-600);
    }

    /* ==========================================================================
       12. BLOK 7: BREND LOQOLARI (Tərəfdaş brendlər)
       ========================================================================== */
    .brands-section {
      padding: var(--space-12) 0;
      background-color: var(--color-bg-surface);
      border-top: 1px solid var(--color-gray-200);
      border-bottom: 1px solid var(--color-gray-200);
    }

    .brands-title {
      text-align: center;
      font-size: var(--font-size-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-gray-400);
      margin-bottom: var(--space-6);
    }

    .brands-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--space-6) var(--space-10);
    }

    .brand-logo-pill {
      font-family: var(--font-family-heading);
      font-weight: 800;
      font-size: 1.15rem;
      letter-spacing: -0.02em;
      color: var(--color-gray-400);
      transition: color var(--transition-fast);
      user-select: none;
    }

    .brand-logo-pill:hover {
      color: var(--color-gray-800);
    }

    /* ==========================================================================
       13. BLOK 8: NİYƏ FOCUSTECH? (Doğru iddialar)
       ========================================================================== */
    .why-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-subtle);
    }

    .why-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    @media (min-width: 640px) {
      .why-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .why-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .why-card {
      background-color: var(--color-bg-surface);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .why-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      background-color: #ECFDF5;
      color: var(--color-success);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .why-card-title {
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--color-gray-900);
    }

    .why-card-desc {
      font-size: var(--font-size-sm);
      color: var(--color-gray-600);
      line-height: 1.5;
    }

    /* ==========================================================================
       14. BLOK 9: FAQ (Akkordeon)
       ========================================================================== */
    .faq-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-surface);
    }

    .faq-accordion {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .faq-item {
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: border-color var(--transition-fast);
    }

    .faq-item.active {
      border-color: var(--color-accent);
    }

    .faq-question {
      width: 100%;
      text-align: left;
      padding: var(--space-4) var(--space-5);
      background-color: #FFFFFF;
      font-size: var(--font-size-base);
      font-weight: 600;
      color: var(--color-gray-900);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
      min-height: 52px;
    }

    .faq-icon {
      transition: transform var(--transition-fast);
      color: var(--color-gray-500);
      flex-shrink: 0;
    }

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      color: var(--color-accent);
    }

    .faq-answer {
      display: none;
      padding: 0 var(--space-5) var(--space-5);
      font-size: var(--font-size-sm);
      color: var(--color-gray-600);
      line-height: 1.6;
      background-color: #FFFFFF;
    }

    .faq-item.active .faq-answer {
      display: block;
    }

    /* ==========================================================================
       15. BLOK 10: ƏLAQƏ VƏ BAXIŞ FORMASI
       ========================================================================== */
    .contact-section {
      padding: var(--space-16) 0;
      background-color: var(--color-bg-subtle);
    }

    .contact-card-wrap {
      background-color: var(--color-bg-surface);
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      display: grid;
      grid-template-columns: 1fr;
    }

    @media (min-width: 1024px) {
      .contact-card-wrap {
        grid-template-columns: 1fr 1.2fr;
      }
    }

    .contact-info-col {
      background-color: var(--color-primary-dark);
      color: #FFFFFF;
      padding: var(--space-8);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-6);
    }

    .contact-info-title {
      color: #FFFFFF;
      font-size: var(--font-size-2xl);
      margin-bottom: var(--space-2);
    }

    .contact-details-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      font-size: var(--font-size-sm);
    }

    .contact-detail-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      color: var(--color-gray-300);
    }

    .contact-detail-item svg {
      color: var(--color-accent);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .contact-form-col {
      padding: var(--space-8);
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .form-label {
      font-size: var(--font-size-xs);
      font-weight: 600;
      color: var(--color-gray-700);
    }

    .form-input, .form-textarea {
      width: 100%;
      min-height: 44px;
      padding: 0 var(--space-3);
      border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-sm);
      background-color: var(--color-gray-50);
      font-size: var(--font-size-sm);
      transition: all var(--transition-fast);
    }

    .form-textarea {
      min-height: 90px;
      padding-top: var(--space-2);
      resize: vertical;
    }

    .form-input:focus, .form-textarea:focus {
      background-color: #FFFFFF;
      border-color: var(--color-accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
    }

    /* Müştəri Qeydiyyat / Giriş Modalı */
    .auth-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(6px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .auth-modal.open {
      display: flex;
    }
    .auth-modal-card {
      background: #0F172A;
      color: #FFFFFF;
      border: 1px solid #334155;
      border-radius: var(--radius-lg);
      max-width: 480px;
      width: 100%;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
      overflow: hidden;
      animation: modalFadeIn 0.25s ease-out;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: translateY(-12px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .auth-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 24px;
      border-bottom: 1px solid #1E293B;
    }
    .auth-tabs {
      display: flex;
      background: #1E293B;
      padding: 4px;
      margin: 18px 24px 0;
      border-radius: 8px;
      gap: 4px;
    }
    .auth-tab-btn {
      flex: 1;
      background: none;
      border: none;
      color: #94A3B8;
      padding: 8px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .auth-tab-btn.active {
      background: var(--color-accent);
      color: #FFFFFF;
    }
    .auth-modal-body {
      padding: 20px 24px 24px;
    }
    .auth-form-group {
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .auth-form-group label {
      font-size: 12px;
      color: #CBD5E1;
      font-weight: 600;
    }
    .auth-input {
      background: #1E293B;
      border: 1px solid #334155;
      color: #FFFFFF;
      padding: 10px 14px;
      border-radius: 6px;
      font-size: 14px;
      outline: none;
    }
    .auth-input:focus {
      border-color: var(--color-accent);
    }
    .customer-order-item {
      background: #1E293B;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 12px 14px;
      margin-bottom: 8px;
      font-size: 13px;
    }

    /* ==========================================================================
       16. FOOTER
       ========================================================================== */
    .site-footer {
      background-color: var(--color-gray-900);
      color: var(--color-gray-400);
      padding: var(--space-16) 0 var(--space-8);
      font-size: var(--font-size-sm);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-12);
    }

    @media (min-width: 640px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
      }
    }

    .footer-logo {
      height: 38px;
      margin-bottom: var(--space-4);
    }

    .footer-logo svg {
      height: 38px;
    }

    .footer-col-title {
      font-size: var(--font-size-base);
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: var(--space-4);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-links a:hover {
      color: #FFFFFF;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-xs);
    }

    @media (min-width: 640px) {
      .footer-bottom {
        flex-direction: row;
      }
    }

    /* ==========================================================================
       17. ÜZƏN WHATSAPP DÜYMƏSİ (Floating Action Button)
       ========================================================================== */
    .floating-whatsapp {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1060;
      width: 56px;
      height: 56px;
      border-radius: var(--radius-full);
      background-color: var(--color-whatsapp);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
      transition: all var(--transition-fast);
    }

    .floating-whatsapp:hover {
      background-color: var(--color-whatsapp-hover);
      transform: scale(1.08);
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    }

    /* ==========================================================================
       18. HERO İNTERAKTİV 3D SİSTEM MODELİ (FOCUSTECH & EUROTECH STYLE)
       ========================================================================== */
    :root {
      --hs-white: #C3CAD0;
      --hs-white-c: #DFE4E8;
      --hs-white-d: #8E979F;
      --hs-hi: #F4F6F8;
      --hs-dark: #334155;
      --hs-dark-c: #475569;
      --hs-black: #0F172A;
      --hs-black-c: #1E293B;
      --hs-silver: #94A3B8;
      --hs-silver-c: #CBD5E1;
      --hs-teal: #00E5FF;
      --hs-teal-c: #38BDF8;
      --hs-glass: rgba(0, 229, 255, 0.08);
      --hs-glass-c: rgba(0, 229, 255, 0.03);
      --hs-plate-edge: rgba(0, 229, 255, 0.45);
      --hs-grid-dot: rgba(0, 229, 255, 0.22);
      --hs-tier-text: #38BDF8;
      --hs-shadow: rgba(0, 0, 0, 0.6);
      --hs-hole: rgba(0, 0, 0, 0.6);
      --hs-cable: #64748B;
      --hs-rim: rgba(255, 255, 255, 0.25);
      --hs-collapse: 24px;
      --color-brand-500: #0066FF;
      --color-brand-700: #0047BA;
      --color-brand-50: rgba(0, 102, 255, 0.15);
      --color-surface: #0F172A;
      --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ft-hero-system-card {
      background: rgba(15, 23, 42, 0.78);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: 14px 16px 16px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 102, 255, 0.08);
      backdrop-filter: blur(14px);
      position: relative;
      max-width: 520px;
      width: 100%;
      margin: 0 auto;
    }

    .ft-hero-system-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ft-hero-system-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 700;
      color: #38BDF8;
      background: rgba(0, 102, 255, 0.2);
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0, 229, 255, 0.3);
      letter-spacing: 0.02em;
    }

    .ft-eco-dot-live {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 8px #10B981;
      animation: ftBlink 1.8s infinite;
    }

    @keyframes ftBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }

    .ft-hs-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: center;
    }

    @media (min-width: 640px) {
      .ft-hs-layout {
        grid-template-columns: minmax(0, 1fr) 13.5rem;
        gap: 12px;
      }
    }

    .hs-scene {
      margin: 0 auto;
      width: 100%;
      max-width: 250px;
    }

    @media (min-width: 640px) {
      .hs-scene {
        max-width: 260px;
      }
    }

    .hs-svg {
      width: 100%;
      height: auto;
      max-height: 290px;
      display: block;
      overflow: visible;
    }

    .hs-m-white { fill: var(--hs-white); }
    .hs-m-white-c { fill: var(--hs-white-c); }
    .hs-m-pearl { fill: var(--hs-white); }
    .hs-m-pearl-c { fill: var(--hs-white-c); }
    .hs-m-dark { fill: var(--hs-dark); }
    .hs-m-dark-c { fill: var(--hs-dark-c); }
    .hs-m-black { fill: var(--hs-black); }
    .hs-m-black-c { fill: var(--hs-black-c); }
    .hs-m-silver { fill: var(--hs-silver); }
    .hs-m-silver-c { fill: var(--hs-silver-c); }
    .hs-m-teal { fill: var(--hs-teal); }
    .hs-m-teal-c { fill: var(--hs-teal-c); }
    .hs-m-glass { fill: var(--hs-glass); }
    .hs-m-glass-c { fill: var(--hs-glass-c); }
    .hs-rim { fill: none; stroke: var(--hs-rim); stroke-width: 0.6px; stroke-linejoin: round; }
    .hs-shadow { fill: var(--hs-shadow); }
    .hs-plate-edge { stroke: var(--hs-plate-edge); stroke-width: 0.8px; }
    .hs-grid-dot { fill: var(--hs-grid-dot); }
    .hs-tier-name { font: 900 10.5px system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; fill: var(--hs-tier-text); }
    .hs-etch { font: 900 5px system-ui, sans-serif; letter-spacing: .06em; fill: rgba(255, 255, 255, 0.45); }
    .hs-ui-text { font: 800 2.6px system-ui, sans-serif; fill: #B9FBFF; fill-opacity: .85; }
    .hs-wind-d { fill: none; stroke: rgba(0, 0, 0, 0.4); stroke-width: .7px; }
    .hs-wind-l { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: .5px; }
    .hs-tube { fill: none; stroke: var(--hs-teal); stroke-width: 3px; stroke-linecap: round; }
    .hs-tube-hi { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: .9px; stroke-linecap: round; transform: translate(-.5px, -.6px); }
    .hs-wifi { fill: none; stroke: #38BDF8; stroke-width: 1.6px; stroke-linecap: round; animation: 2.4s ease-in-out infinite hs-wifi; }
    .hs-w2 { animation-delay: .25s; }
    .hs-w3 { animation-delay: .5s; }
    .hs-cable { fill: none; stroke: var(--hs-cable); stroke-width: 2.4px; stroke-linecap: round; }
    .hs-cable-hi { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: .8px; stroke-linecap: round; transform: translate(-.4px, -.5px); }
    .hs-cable.is-power { stroke: #F59E0B; }
    .hs-packet { fill: #00E5FF; opacity: 0; filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.95)); transition: opacity .4s; }
    .hs-packet.is-power { fill: #FCD34D; filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.95)); }
    .hs-scene.is-live .hs-packet { opacity: 1; }

    .hs-marker { cursor: pointer; transition: opacity .3s, transform .45s var(--ease-smooth); transform-box: fill-box; transform-origin: 50%; }
    .hs-marker circle { fill: #0F172A; stroke: #38BDF8; stroke-width: 1.2px; transition: fill .25s, stroke .25s; }
    .hs-marker text { font: 900 8.5px system-ui, sans-serif; fill: #38BDF8; text-anchor: middle; dominant-baseline: central; transition: fill .25s; }
    .hs-marker.is-active { transform: translateY(-5px); }
    .hs-marker.is-active circle { fill: #0066FF; stroke: #00E5FF; }
    .hs-marker.is-active text { fill: #FFFFFF; }

    .hs-device { cursor: pointer; transition: transform .45s var(--ease-smooth); }
    .hs-device.is-active { transform: translateY(-5px); }
    .hs-device.is-active > .hs-body { filter: drop-shadow(0 6px 12px rgba(0, 229, 255, 0.45)); }

    .hs-tier { transition: opacity .45s var(--ease-smooth), transform 1s cubic-bezier(.2, 1.05, .3, 1); }
    .hs-scene.is-wired :is(.hs-cable, .hs-cable-hi) { stroke-dasharray: var(--len); animation: hs-draw .9s var(--ease-smooth) both; }

    .hs-blink { animation: 1.6s step-end infinite hs-blink; }
    .hs-b2 { animation-delay: -.4s; }
    .hs-b3 { animation-delay: -.9s; }
    .hs-b4 { animation-delay: -1.2s; }
    .hs-float { animation: 3.4s ease-in-out infinite hs-float; }
    .hs-float-slow { animation-duration: 4.6s; }
    .hs-bar { animation: 2.8s step-end infinite hs-charge; }
    .hs-k1 { animation-delay: .35s; }
    .hs-k2 { animation-delay: .7s; }
    .hs-k3 { animation-delay: 1.05s; }
    .hs-scanline { animation: 2.4s ease-in-out infinite hs-scan; }
    .hs-feed-flicker { animation: 5s step-end infinite hs-flicker; }
    .hs-glow { animation: 3s ease-in-out infinite hs-glow; }

    /* Legend List / Items */
    .hs-legend-tier p {
      margin: 0 0 2px 4px;
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #64748B;
    }

    .hs-legend-tier ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .hs-item {
      display: grid;
      width: 100%;
      grid-template-columns: 20px 1fr;
      align-items: start;
      gap: 7px;
      border-radius: 7px;
      padding: 3px 6px;
      text-align: left;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      color: inherit;
    }

    .hs-item:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .hs-item[aria-current="true"] {
      background: rgba(0, 102, 255, 0.22);
      border-left: 2px solid #00E5FF;
    }

    .hs-num {
      margin-top: 1px;
      display: flex;
      width: 17px;
      height: 17px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid rgba(0, 229, 255, 0.4);
      font-size: 9.5px;
      font-weight: 900;
      color: #38BDF8;
      background: rgba(15, 23, 42, 0.8);
      transition: all 0.2s ease;
    }

    .hs-item[aria-current="true"] .hs-num {
      background: #0066FF;
      border-color: #00E5FF;
      color: #FFFFFF;
      box-shadow: 0 0 8px rgba(0, 102, 255, 0.8);
    }

    .hs-name {
      font-size: 12px;
      font-weight: 700;
      color: #CBD5E1;
      transition: color 0.2s ease;
    }

    .hs-item[aria-current="true"] .hs-name {
      color: #FFFFFF;
      font-weight: 800;
    }

    .hs-desc {
      grid-column-start: 2;
      font-size: 10.5px;
      line-height: 1.35;
      color: #94A3B8;
      opacity: 0;
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .35s var(--ease-smooth), opacity .25s, margin .35s var(--ease-smooth);
    }

    .hs-desc > span {
      overflow: hidden;
    }

    .hs-item[aria-current="true"] .hs-desc {
      opacity: 1;
      grid-template-rows: 1fr;
      margin-top: 1px;
    }

    .hs-progress {
      grid-column-start: 2;
      background: rgba(255, 255, 255, 0.1);
      opacity: 0;
      border-radius: 2px;
      height: 2px;
      overflow: hidden;
    }

    .hs-progress > i {
      background: linear-gradient(90deg, #0066FF, #00E5FF);
      transform-origin: 0;
      height: 100%;
      display: block;
      transform: scaleX(0);
    }

    .hs-item[aria-current="true"] .hs-progress {
      opacity: 1;
      margin-top: 3px;
    }

    .is-touring .hs-item[aria-current="true"] .hs-progress > i {
      animation: hs-progress var(--hs-tour, 3.6s) linear forwards;
    }

    .hs-dots {
      display: flex;
      justify-content: center;
      gap: 5px;
      margin-top: 6px;
    }

    .hs-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .hs-dot[aria-current="true"] {
      background: #00E5FF;
      width: 16px;
      box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
    }

    @keyframes hs-failsafe{to{opacity:1;transform:none}}
    @keyframes hs-draw{0%{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
    @keyframes hs-blink{0%,62%{opacity:1}64%,72%{opacity:.2}74%,to{opacity:1}}
    @keyframes hs-wifi{0%,to{opacity:.15}40%{opacity:1}}
    @keyframes hs-float{0%,to{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
    @keyframes hs-charge{0%{opacity:.2}20%,80%{opacity:1}to{opacity:.2}}
    @keyframes hs-scan{0%,to{transform:translateY(0)}50%{transform:translateY(17px)}}
    @keyframes hs-flicker{0%,90%{opacity:1}92%{opacity:.7}94%,to{opacity:1}}
    @keyframes hs-glow{0%,to{opacity:.25}50%{opacity:.6}}
    @keyframes hs-progress{to{transform:scaleX(1)}}