:root{
      --primary:#1f3a5f;
      --primary-dark:#132a46;
      --primary-light:#2f568b;

      --secondary:#ff8a1f;
      --secondary-dark:#e56f00;
      --secondary-light:#ffb15c;

      --accent:#21c28a;
      --accent-dark:#159c6d;
      --accent-light:#37d9a3;

      --danger:#ff4d6d;
      --danger-dark:#d93752;

      --bg:#f4f7fb;
      --card:#ffffff;
      --muted:#7a8797;
      --text:#1f2937;

      --shadow: 0 10px 30px rgba(16,24,40,.08);
      --shadow-lg: 0 16px 50px rgba(16,24,40,.14);

      --radius:14px;
      --radius-lg:22px;

      --transition: all .25s ease;
    }

    *{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family:'Tajawal', sans-serif;
      background:
        radial-gradient(800px 400px at 20% 0%, rgba(255,138,31,.18), transparent 60%),
        radial-gradient(900px 450px at 90% 10%, rgba(33,194,138,.14), transparent 55%),
        var(--bg);
      color: var(--text);
      line-height: 1.65;
      padding-top: 108px;
    }

    /* Header */
    header{
      position:fixed; top:0; width:100%; z-index:1000;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color:#fff;
      box-shadow: var(--shadow-lg);
    }
    .header-container{
      max-width:1300px; margin:0 auto; padding: 0.9rem 1.25rem;
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
    }
    .logo{
      display:flex; align-items:center; gap:.75rem; cursor:pointer;
      min-width: 0;
    }
    .logo i{
      font-size: 2rem; color: var(--secondary);
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
    }
    .logo h1{
      font-size:1.55rem; font-weight:800;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    /* Nav */
    .nav-menu{
      display:flex; align-items:center; gap:1.6rem;
    }
    .nav-item{position:relative}
    .nav-link{
      color: rgba(255,255,255,.92);
      font-weight:600;
      padding: .5rem 0;
      display:flex; align-items:center; gap:.5rem;
      cursor:pointer;
      transition: var(--transition);
    }
    .nav-link:hover{color:#fff; transform: translateY(-1px);}
    .nav-link.active{color:#fff;}
    .nav-link.active::after{
      content:'';
      position:absolute; bottom:0; right:0;
      width:100%; height:3px;
      background: linear-gradient(90deg, var(--secondary), var(--accent));
      border-radius: 3px 3px 0 0;
    }

    /* Header right */
    .store-info-header{
      display:flex; align-items:center; gap:1rem;
    }
    .contact-pill{
      display:flex; align-items:center; gap:.5rem;
      padding: .45rem .75rem;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.16);
      font-size:.92rem;
      backdrop-filter: blur(10px);
      white-space: nowrap;
      max-width: 240px;
    }
    .contact-pill span{
      overflow:hidden; text-overflow:ellipsis;
    }
    .contact-pill i{color: var(--secondary)}
    .cart-icon{
      position:relative;
      cursor:pointer;
      font-size:1.4rem;
      padding:.6rem .7rem;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.16);
      transition: var(--transition);
      backdrop-filter: blur(10px);
    }
    .cart-icon:hover{transform: translateY(-2px); background: rgba(255,255,255,.18);}
    .cart-badge{
      position:absolute; top:-7px; left:-7px;
      width:22px; height:22px;
      border-radius:999px;
      background: var(--danger);
      border: 2px solid rgba(255,255,255,.9);
      display:flex; align-items:center; justify-content:center;
      font-size:.75rem; font-weight:800;
    }

    .mobile-toggle{
      display:none;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.16);
      color:#fff;
      font-size:1.4rem;
      padding:.55rem .8rem;
      border-radius: 14px;
      cursor:pointer;
    }

    /* Announcement bar */
    #announcement-bar{
      background: linear-gradient(90deg, var(--secondary), var(--secondary-light));
      color:#fff;
      padding:.7rem 0;
      position:fixed; top:78px; width:100%;
      z-index:999;
      overflow:hidden;
      text-align:center;
      box-shadow: 0 10px 18px rgba(255,138,31,.22);
    }
    .announcement-content{
      max-width:1300px;
      margin:0 auto;
      padding: 0 1.25rem;
      display:flex; align-items:center; justify-content:center;
      gap:.8rem;
      white-space: nowrap;
      animation: slideRight 18s linear infinite;
    }
    .announcement-content i{font-size:1.15rem; animation: bounce 2s infinite;}
    @keyframes slideRight{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
    @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

    /* Main */
    .main-content{min-height: calc(100vh - 420px); padding: 2.2rem 0;}
    .container{max-width:1300px; margin:0 auto; padding: 0 1.25rem;}
    .page{display:none; animation: fadeIn .45s ease;}
    .page.active{display:block;}
    @keyframes fadeIn{from{opacity:0; transform: translateY(10px)}to{opacity:1; transform: translateY(0)}}

    /* Category nav */
    .category-nav{
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(16,24,40,.06);
      backdrop-filter: blur(10px);
      border-radius: var(--radius-lg);
      padding: .9rem;
      margin-bottom: 1.6rem;
      box-shadow: var(--shadow);
      display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
      position: sticky; top: 132px; z-index: 99;
    }
    .cat-btn{
      background: rgba(31,58,95,.06);
      color: var(--text);
      padding: .55rem 1.25rem;
      border-radius: 999px;
      font-weight:700;
      border: 1px solid rgba(16,24,40,.08);
      cursor:pointer;
      display:flex; align-items:center; gap:.5rem;
      transition: var(--transition);
    }
    .cat-btn:hover{transform: translateY(-2px); background: rgba(31,58,95,.10);}
    .cat-btn.active{
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color:#fff;
      border-color: rgba(255,255,255,.16);
      box-shadow: 0 10px 22px rgba(19,42,70,.22);
    }

    /* Products grid */
    .products-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2.8rem;
    }

    .section-header{
      text-align:center;
      margin-bottom: 1.8rem;
      position:relative;
    }
    .section-header h2{
      font-size: 2rem;
      color: var(--primary);
      margin-bottom:.5rem;
      font-weight:800;
      letter-spacing: .2px;
    }
    .section-header p{
      color: var(--muted);
      font-size: 1.07rem;
      max-width: 720px;
      margin: 0 auto;
    }
    .section-header::after{
      content:'';
      position:absolute;
      bottom:-12px;
      right:50%;
      transform: translateX(50%);
      width: 96px; height: 4px;
      background: linear-gradient(90deg, var(--secondary), var(--accent));
      border-radius: 999px;
    }

    /* Product card */
    .product-card{
      background: var(--card);
      border-radius: var(--radius-lg);
      overflow:hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      display:flex; flex-direction:column;
      position:relative;
      border: 1px solid rgba(16,24,40,.06);
    }
    .product-card:hover{
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }
    .product-card.inactive{
      opacity:.72;
      filter: grayscale(.55);
    }
    .product-card.inactive:hover{transform:none; box-shadow: var(--shadow);}

    .product-image-container{
      position:relative;
      height: 220px;
      overflow:hidden;
      background: linear-gradient(135deg, rgba(31,58,95,.10), rgba(33,194,138,.08));
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .product-image{
      width:100%; height:100%;
      object-fit: cover;
      transition: var(--transition);
      display:block;
    }
    .product-card:hover .product-image{transform: scale(1.05);}

    .placeholder-image{
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      text-align:center;
      color: rgba(31,41,55,.65);
      font-weight:800;
      padding: 12px;
    }
    .placeholder-image .ph{
      background: rgba(255,255,255,.75);
      border: 1px dashed rgba(16,24,40,.18);
      border-radius: 14px;
      padding: 10px 12px;
      box-shadow: 0 10px 20px rgba(16,24,40,.06);
      line-height: 1.2;
    }
    .placeholder-image .ph small{
      display:block;
      margin-top:6px;
      font-weight:700;
      color: rgba(31,41,55,.72);
    }

    /* Badges */
    .product-badges{
      position:absolute;
      top:.75rem;
      right:.75rem;
      display:flex;
      flex-direction: column;
      gap:.45rem;
      z-index:2;
    }
    .discount-badge{
      background: linear-gradient(135deg, var(--danger), var(--danger-dark));
      color:#fff;
      padding:.35rem .75rem;
      border-radius: 10px;
      font-size:.85rem;
      font-weight:900;
      box-shadow: 0 10px 18px rgba(255,77,109,.25);
    }
    .bundle-badge{
      background: linear-gradient(135deg, var(--accent), var(--accent-dark));
      color:#fff;
      padding:.35rem .75rem;
      border-radius: 10px;
      font-size:.85rem;
      font-weight:900;
      white-space:nowrap;
      box-shadow: 0 10px 18px rgba(33,194,138,.18);
    }
    .inactive-badge{
      background: rgba(31,41,55,.88);
      color:#fff;
      padding:.35rem .75rem;
      border-radius: 10px;
      font-size:.85rem;
      font-weight:900;
    }

    .product-info{
      padding: 1.25rem 1.25rem 1.15rem;
      flex:1;
      display:flex; flex-direction:column;
      gap:.7rem;
    }
    .product-title{
      font-size: 1.18rem;
      font-weight:900;
      color: var(--text);
      line-height: 1.35;
      letter-spacing: .2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .product-title .desc-toggle {
      color: var(--secondary);
      font-size: 0.9rem;
      transition: var(--transition);
    }
    .product-title:hover .desc-toggle {
      color: var(--secondary-dark);
    }
    .product-desc{
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.7;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .product-desc.expanded {
      max-height: 500px;
      margin-top: 0.5rem;
    }
    .product-size{
      font-size:.9rem;
      color: rgba(31,41,55,.86);
      display:flex; align-items:center; gap:.5rem;
    }
    .product-size i{color: var(--secondary);}

    .bundle-info{
      background: rgba(33,194,138,.10);
      border: 1px solid rgba(33,194,138,.18);
      padding:.75rem;
      border-radius: 12px;
      border-right: 4px solid var(--accent);
      text-align:center;
      color: var(--accent-dark);
      font-weight:800;
      font-size:.88rem;
    }

    .price-container{margin-top:auto; display:flex; flex-direction:column; gap:.75rem;}
    .price-wrapper{
      display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
      justify-content:flex-start;
    }
    .price-old{text-decoration: line-through; color: rgba(122,135,151,.9); font-size:.95rem;}
    .price-new{font-size: 1.55rem; font-weight:900; color: var(--text);}
    .price-new.discount{color: var(--danger-dark);}
    .price-new.bundle{color: var(--accent-dark);}

    .add-btn{
      width:100%;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color:#fff;
      border:none;
      padding: .95rem 1rem;
      border-radius: 14px;
      font-size: 1rem;
      font-weight:900;
      cursor:pointer;
      transition: var(--transition);
      display:flex; align-items:center; justify-content:center; gap:.6rem;
      box-shadow: 0 14px 28px rgba(19,42,70,.18);
    }
    .add-btn:hover{transform: translateY(-2px); background: linear-gradient(135deg, var(--primary-light), var(--primary));}
    .add-btn:disabled{background: #a0a9b4; cursor:not-allowed; transform:none !important; box-shadow:none;}

    /* Inactive section */
    .inactive-section{
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(16,24,40,.06);
      border-radius: var(--radius-lg);
      padding: 2rem;
      margin-top: 2.5rem;
      box-shadow: var(--shadow);
    }
    .toggle-inactive-btn{
      background: rgba(31,58,95,.06);
      border: 1px solid rgba(16,24,40,.08);
      padding: .85rem 1.4rem;
      border-radius: 16px;
      font-weight:900;
      display:flex; align-items:center; gap:.6rem; justify-content:center;
      margin: 0 auto 1.4rem;
      cursor:pointer;
      transition: var(--transition);
    }
    .toggle-inactive-btn:hover{background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; transform: translateY(-2px);}

    /* Offers */
    .offers-banner{
      background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
      color:#fff;
      border-radius: var(--radius-lg);
      padding: 1.8rem;
      margin-bottom: 2rem;
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap;
      gap: 1.2rem;
      box-shadow: 0 18px 34px rgba(255,138,31,.22);
    }
    .offers-banner h1{font-size: 1.85rem; font-weight:900;}
    .offers-banner p{font-size: 1.1rem; opacity:.95;}
    .timer{
      display:flex; gap:.75rem;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.22);
      padding: .95rem;
      border-radius: 16px;
      backdrop-filter: blur(10px);
    }
    .timer-item{display:flex; flex-direction:column; align-items:center; min-width:70px;}
    .timer-value{font-size: 2rem; font-weight:900; line-height:1;}
    .timer-label{font-size:.85rem; opacity:.92;}

    /* Contact */
    .contact-container{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.6rem;
      margin-bottom: 3rem;
    }
    .contact-info{
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(16,24,40,.06);
      border-radius: var(--radius-lg);
      padding: 1.8rem;
      box-shadow: var(--shadow);
    }
    .contact-info h3{
      font-size: 1.5rem;
      margin-bottom: 1.2rem;
      color: var(--primary);
      font-weight: 900;
      position:relative;
      padding-bottom:.7rem;
    }
    .contact-info h3::after{
      content:'';
      position:absolute;
      bottom:0; right:0;
      width:70px; height:4px;
      background: linear-gradient(90deg, var(--secondary), var(--accent));
      border-radius: 999px;
    }
    .contact-details{display:flex; flex-direction:column; gap:1.2rem;}
    .contact-item{display:flex; align-items:flex-start; gap: 1rem;}
    .contact-icon{
      width:52px; height:52px;
      background: rgba(255,138,31,.12);
      border: 1px solid rgba(255,138,31,.18);
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-size: 1.2rem;
      color: var(--secondary-dark);
      flex:0 0 auto;
      box-shadow: 0 12px 20px rgba(255,138,31,.10);
    }
    .contact-text h4{font-size: 1.06rem; margin-bottom:.2rem; font-weight:900;}
    .contact-text p{color: var(--muted); line-height: 1.7;}

    .map-wrap{
      margin-top: 1.1rem;
      border-radius: var(--radius-lg);
      overflow:hidden;
      border: 1px solid rgba(16,24,40,.08);
      box-shadow: var(--shadow);
      background: #fff;
    }
    .map-wrap iframe{
      width:100%;
      height: 320px;
      border:0;
      display:block;
    }

    /* Social links */
    .social-links{display:flex; gap:.9rem; margin-top: 1.2rem;}
    .social-links a{
      width:46px; height:46px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border: 1px solid rgba(255,255,255,.10);
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size: 1.2rem;
      transition: var(--transition);
      box-shadow: 0 14px 24px rgba(19,42,70,.16);
    }
    .social-links a:hover{transform: translateY(-4px);}
    .social-links a.facebook:hover{background:#1877F2}
    .social-links a.instagram:hover{background:#E4405F}
    .social-links a.tiktok:hover{background:#000}

    /* Loading */
    .loading{text-align:center; padding: 4rem 0; color: var(--muted);}
    .loading-spinner{
      display:inline-block;
      width: 62px; height: 62px;
      border: 5px solid rgba(122,135,151,.25);
      border-top-color: var(--secondary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 1rem;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Modal cart - COMPLETELY REVISED */
    .modal{
      display:none;
      position:fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.55);
      z-index: 2000;
      overflow-y: auto; /* Allows scrolling the whole modal */
    }
    .modal.active{
      display:block;
    }
    .modal-content{
      background:#fff;
      width: 100%;
      max-width: 650px;
      min-height: 100vh; /* Full height on mobile */
      margin: 0 auto;
      position: relative;
      display:flex;
      flex-direction:column;
      box-shadow: 0 24px 60px rgba(0,0,0,.25);
    }
    

    .modal-header{
      padding: 1.2rem 1.3rem;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color:#fff;
      display:flex; align-items:center; justify-content:space-between;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .modal-header h3{font-size: 1.35rem; font-weight:900; display:flex; gap:.6rem; align-items:center}
    .close-modal{
      background:none;
      border:none;
      font-size: 2rem;
      color:#fff;
      cursor:pointer;
      line-height:1;
      transition: var(--transition);
    }
    .close-modal:hover{color: var(--secondary); transform: rotate(6deg);}

    .cart-items-container{
      flex: 1;
      overflow-y: auto;
      padding: 1.2rem 1.3rem;
      min-height: 200px;
    }
    .cart-empty{
      text-align:center; 
      padding: 2rem; 
      color: var(--muted);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
    .cart-empty i{font-size: 3rem; margin-bottom: .8rem; color: rgba(122,135,151,.25);}

    .cart-item{
      display:flex; 
      justify-content:space-between; 
      align-items:flex-start;
      padding: 1rem 0;
      border-bottom: 1px solid rgba(16,24,40,.08);
      gap: 1rem;
    }
    .cart-item:last-child{border-bottom:none}
    .item-info{flex:1; min-width: 0;}
    .item-name{font-weight:900; margin-bottom:.2rem; color: var(--primary);}
    .item-size{font-size:.86rem; color: var(--muted); margin-bottom:.35rem;}
    .item-price{color: var(--secondary-dark); font-weight:900; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
    .item-price .old-price{color: var(--muted); text-decoration: line-through; font-weight:800}
    .bundle-note{font-size:.82rem; color: var(--accent-dark); font-weight:900}
    .item-controls{
      display:flex; align-items:center; gap:.6rem;
      flex: 0 0 auto;
    }
    .item-controls button{
      width:34px; height:34px;
      border:none;
      background: rgba(31,58,95,.08);
      border: 1px solid rgba(16,24,40,.10);
      color: var(--text);
      border-radius: 999px;
      cursor:pointer;
      font-weight:900;
      display:flex; align-items:center; justify-content:center;
      transition: var(--transition);
    }
    .item-controls button:hover{background: var(--secondary); color:#fff; border-color: rgba(255,255,255,.18);}
    .remove-item-btn{background: rgba(255,77,109,.08) !important; color: var(--danger-dark) !important;}
    .remove-item-btn:hover{background: var(--danger) !important; color:#fff !important;}
    .item-qty{min-width: 24px; text-align:center; font-weight:900;}

    .cart-summary{
      padding: 1.2rem 1.3rem;
      background: rgba(244,247,251,.65);
      border-top: 1px solid rgba(16,24,40,.10);
    }
    .summary-row{display:flex; justify-content:space-between; margin-bottom:.7rem; font-size: 1rem;}
    .summary-row.total{
      font-size: 1.35rem;
      font-weight: 900;
      color: var(--primary);
      border-top: 1px solid rgba(16,24,40,.10);
      padding-top: .8rem;
      margin-top: .6rem;
    }

    .customer-details{
      margin-top: .85rem;
    }
    .customer-details summary{
      cursor:pointer;
      font-weight:900;
      padding: .85rem 1rem;
      border-radius: 14px;
      background: rgba(31,58,95,.08);
      border: 1px solid rgba(16,24,40,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    
    .checkout-form{
      padding: 1rem;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(16,24,40,.10);
      border-top: none;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
    }

    .form-group{margin-bottom: 1rem;}
    .form-group label{display:block; margin-bottom:.5rem; font-weight:900;}
    .form-control{
      width:100%;
      padding: .95rem;
      border: 1px solid rgba(16,24,40,.14);
      border-radius: 14px;
      font-family:'Tajawal', sans-serif;
      font-size: 1rem;
      transition: var(--transition);
      background: rgba(255,255,255,.9);
    }
    .form-control:focus{
      outline:none;
      border-color: rgba(255,138,31,.65);
      box-shadow: 0 0 0 4px rgba(255,138,31,.18);
    }

    .checkout-btn{
      width:100%;
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      color:#fff;
      border:none;
      padding: 1rem;
      border-radius: 14px;
      font-size: 1.12rem;
      font-weight: 900;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:.6rem;
      transition: var(--transition);
      box-shadow: 0 16px 30px rgba(33,194,138,.18);
      margin-top: .9rem;
    }
    .checkout-btn:hover{transform: translateY(-2px); background: linear-gradient(135deg, var(--accent-dark), var(--accent));}

    /* FAB */
    .fab{
      position:fixed;
      bottom: 1.5rem;
      left: 1.5rem;
      width: 58px; height: 58px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size: 1.45rem;
      box-shadow: 0 22px 40px rgba(255,138,31,.28);
      cursor:pointer;
      z-index: 999;
      transition: var(--transition);
    }
    .fab:hover{transform: translateY(-5px) scale(1.04);}

    /* Footer */
    footer{
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color:#fff;
      padding: 3rem 0 1.6rem;
      margin-top: 3.8rem;
    }
    .footer-container{
      max-width:1300px; margin:0 auto; padding: 0 1.25rem;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    .footer-section h4{
      font-size: 1.25rem;
      margin-bottom: 1.2rem;
      color: var(--secondary-light);
      font-weight: 900;
      position:relative;
      padding-bottom: .5rem;
    }
    .footer-section h4::after{
      content:'';
      position:absolute;
      bottom:0; right:0;
      width: 55px; height: 3px;
      background: var(--secondary);
      border-radius: 999px;
    }
    .footer-section p{color: rgba(255,255,255,.86); margin-bottom: 1rem;}
    .footer-section ul{list-style:none}
    .footer-section ul li{margin-bottom:.75rem}
    .footer-section ul li a{
      color: rgba(255,255,255,.86);
      text-decoration:none;
      transition: var(--transition);
      display:flex; align-items:center; gap:.55rem;
      cursor:pointer;
    }
    .footer-section ul li a:hover{color:#fff; transform: translateX(-3px);}

    .footer-bottom{
      text-align:center;
      padding-top: 2rem;
      margin-top: 2rem;
      border-top: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.72);
      font-size: .92rem;
    }

    /* Responsive - IMPROVED MOBILE DISPLAY */
    
    
    
    
    
    
    
    
    /* Desktop specific - show description toggle only on desktop */