.brand-logo{
width:46px;
height:46px;
object-fit:contain;
border-radius:12px;
display:block;
flex-shrink:0;
}

    :root{
      --bg:#060816;
      --surface:rgba(11,17,36,.68);
      --card-border:rgba(255,255,255,.08);
      --text:#f8fbff;
      --muted:#98add3;
      --primary:#56c6ff;
      --primary-2:#7a6bff;
      --accent:#34f5c5;
      --shadow:0 30px 80px rgba(0,0,0,.35);
      --radius-lg:24px;
      --container:1240px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
        font-family: "Vazirmatn";
      background:
        radial-gradient(circle at 10% 10%, rgba(86,198,255,.15), transparent 26%),
        radial-gradient(circle at 90% 10%, rgba(122,107,255,.17), transparent 24%),
        radial-gradient(circle at 50% 90%, rgba(52,245,197,.10), transparent 28%),
        linear-gradient(180deg, #060816 0%, #070b18 32%, #040712 100%);
      color:var(--text);
      line-height:1.8;
      overflow-x:hidden;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
    }
    body::before{
      background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
      background-size:44px 44px;
      mask-image:radial-gradient(circle at center, #000 34%, transparent 82%);
    }
    body::after{
      background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 14%, transparent 84%, rgba(255,255,255,.02));
      z-index:-3;
    }

    a{text-decoration:none;color:inherit}
    .container{width:min(var(--container), calc(100% - 32px)); margin-inline:auto}
    .section{padding:94px 0; position:relative}
    .section-title{
      font-size:clamp(30px,3vw,56px);
      line-height:1.15;
      margin:10px 0 14px;
      letter-spacing:-.03em;
    }
    .section-subtitle{
      color:var(--muted);
      max-width:760px;
      font-size:17px;
      margin:0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:9px 15px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:#d8e7ff;
      font-size:13px;
      backdrop-filter:blur(18px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--primary));
      box-shadow:0 0 18px rgba(86,198,255,.55);
    }

    .header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      background:rgba(4,7,16,.52);
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      min-height:84px;
      position:relative;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      font-weight:800;
      font-size:20px;
    }
    .brand-mark{
      width:46px;height:46px;border-radius:15px;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      display:grid;place-items:center;
      box-shadow:0 16px 40px rgba(86,198,255,.24);
      position:relative;
      overflow:hidden;
      isolation:isolate;
      flex-shrink:0;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      border-radius:13px;
      transform:rotate(40deg);
      z-index:0;
    }
    .brand-mark::before{width:16px;height:56px;right:9px;top:-5px;background:rgba(255,255,255,.26)}
    .brand-mark::after{width:12px;height:44px;left:9px;bottom:-7px;background:rgba(255,255,255,.18)}

    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .nav-links a{
      padding:10px 14px;
      border-radius:12px;
      color:#d8e6ff;
      font-size:14px;
      transition:.25s ease;
    }
    .nav-links a:hover{background:rgba(255,255,255,.05); color:#fff}

    .nav-actions{display:flex; align-items:center; gap:12px}

    .btn{
      border:none;
      cursor:pointer;
      font:inherit;
      border-radius:18px;
      padding:14px 20px;
      transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
    }
    .btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 50%);
      opacity:.7;
      pointer-events:none;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      color:#031119;
      background:linear-gradient(135deg, var(--accent), var(--primary));
      box-shadow:0 18px 40px rgba(52,245,197,.18);
      font-weight:800;
    }
    .btn-secondary{
      color:#f5f8ff;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(20px);
    }

    .hero{padding:54px 0 40px}
    .hero-grid{
      display:grid;
      grid-template-columns:1.04fr .96fr;
      gap:28px;
      align-items:center;
    }

    .hero-copy{position:relative}
    .hero-copy::before{
      content:"";
      position:absolute;
      width:220px;height:220px;border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.05), transparent 68%);
      top:-60px; right:-40px;
      filter:blur(8px);
      pointer-events:none;
    }

    .hero-title{
      font-size:clamp(42px, 6vw, 84px);
      line-height:1.02;
      margin:0 0 18px;
      letter-spacing:-.05em;
      max-width:780px;
    }
    .hero-title .grad{
      background:linear-gradient(135deg, #ffffff 0%, #93e0ff 32%, #8a7bff 63%, #bffff1 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero p{
      color:var(--muted);
      max-width:700px;
      font-size:18px;
      margin:0 0 28px;
    }
    .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px}

    .stat-row{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:18px;
    }
    .stat-card{
      padding:18px;
      border:1px solid var(--card-border);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border-radius:20px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      position:relative;
      overflow:hidden;
    }
    .stat-card::before{
      content:"";
      position:absolute;
      inset:auto -30px -50px auto;
      width:120px;height:120px;border-radius:50%;
      background:radial-gradient(circle, rgba(86,198,255,.16), transparent 70%);
    }
    .stat-card strong{
      display:block;
      font-size:24px;
      margin-bottom:6px;
      letter-spacing:-.03em;
    }
    .stat-card span{color:var(--muted); font-size:13px}

    .hero-visual{
      position:relative;
      min-height:640px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .orb{
      position:absolute;
      border-radius:50%;
      filter:blur(14px);
      opacity:.85;
      pointer-events:none;
    }
    .orb-1{width:240px;height:240px;background:rgba(86,198,255,.20); top:10px; left:20px}
    .orb-2{width:200px;height:200px;background:rgba(122,107,255,.20); bottom:50px; right:25px}
    .orb-3{width:130px;height:130px;background:rgba(52,245,197,.20); bottom:190px; left:10px}

    .cluster{
      position:relative;
      width:100%;
      max-width:520px;
      margin:auto;
      display:grid;
      place-items:center;
    }

    .glass-panel,
    .feature-card,
    .service-card,
    .pricing-card,
    .faq-item,
    .cta-box,
    .showcase-box{
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.11);
      box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter:blur(22px);
    }

    .glass-panel{
      width:min(100%, 540px);
      border-radius:34px;
      padding:26px;
      position:relative;
      overflow:hidden;
      transform:perspective(1200px) rotateY(-8deg) rotateX(4deg);
    }
    .glass-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 24%);
      pointer-events:none;
    }
    .glass-panel::after{
      content:"";
      position:absolute;
      inset:auto -70px -70px auto;
      width:220px;height:220px;border-radius:50%;
      background:radial-gradient(circle, rgba(86,198,255,.16), transparent 70%);
      pointer-events:none;
    }
    .panel-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:24px;
    }
    .signal{display:flex; gap:8px}
    .signal span{
      width:10px;height:10px;border-radius:50%;
      background:rgba(255,255,255,.16);
    }
    .signal span:nth-child(1){background:#ff7b8d}
    .signal span:nth-child(2){background:#ffd65c}
    .signal span:nth-child(3){background:#55f2a3}

    .server-rack{display:grid; gap:14px}
    .rack-item{
      padding:18px;
      border-radius:18px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
    }
    .rack-icon{
      width:48px;height:48px;border-radius:15px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(86,198,255,.24), rgba(122,107,255,.28));
      font-size:20px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .rack-item h4{margin:0 0 4px; font-size:15px}
    .rack-item p{margin:0; color:var(--muted); font-size:12px}
    .tag{
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      color:#03131d;
      background:linear-gradient(135deg, var(--accent), #7df4ff);
      font-weight:800;
      box-shadow:0 8px 20px rgba(52,245,197,.16);
    }

    .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}

    .feature-card{
      padding:30px;
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
    }
    .feature-card::after{
      content:"";
      position:absolute;
      inset:auto -20% -40% auto;
      width:180px;height:180px;border-radius:50%;
      background:radial-gradient(circle, rgba(86,198,255,.15), transparent 70%);
      pointer-events:none;
    }
    .feature-no{
      width:48px;height:48px;border-radius:16px;
      display:grid;place-items:center;
      background:rgba(255,255,255,.06);
      color:#d5ebff;
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:18px;
      font-weight:800;
    }
    .feature-card h3,
    .service-card h3,
    .pricing-card h3{margin:0 0 10px; font-size:22px}
    .feature-card p,
    .service-card p,
    .pricing-card p{margin:0; color:var(--muted)}

    .service-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
      margin-top:34px;
    }
    .service-card{
      padding:28px;
      min-height:280px;
      position:relative;
      border-radius:var(--radius-lg);
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
    }
    .service-card:hover{transform:translateY(-6px); border-color:rgba(86,198,255,.22)}
    .service-card .service-link{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding-top:22px;
      color:#dff1ff;
      font-weight:700;
      font-size:14px;
    }
    .service-card .service-link::after{
      content:"←";
      transition:transform .25s ease;
      font-size:18px;
    }
    .service-card:hover .service-link::after{transform:translateX(-4px)}

    .section-split{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:26px;
      align-items:stretch;
      margin-top:34px;
    }
    .hub-panel,
    .route-panel{
      border-radius:30px;
      padding:30px;
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.11);
      box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter:blur(22px);
    }
    .hub-panel::before,
    .route-panel::before{
      content:"";
      position:absolute;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(86,198,255,.12), transparent 70%);
      left:-40px;
      bottom:-80px;
      pointer-events:none;
    }
    .route-panel::before{
      left:auto;
      right:-40px;
      background:radial-gradient(circle, rgba(122,107,255,.16), transparent 70%);
    }
    .hub-list{display:grid; gap:14px; margin-top:22px}
    .hub-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:16px 18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
    }
    .hub-item strong{display:block; margin-bottom:4px; font-size:16px}
    .hub-item span{color:var(--muted); font-size:13px}
    .hub-item a{
      flex-shrink:0;
      padding:10px 14px;
      border-radius:14px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#f4f9ff;
      font-size:13px;
      font-weight:700;
    }
    .route-steps{display:grid; gap:14px; margin-top:22px}
    .route-step{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:14px;
      align-items:flex-start;
      padding:14px 0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .route-step:last-child{border-bottom:none}
    .route-step .num{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(86,198,255,.22), rgba(122,107,255,.22));
      border:1px solid rgba(255,255,255,.08);
      font-weight:800;
    }

    .showcase{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
      margin-top:34px;
    }
    .showcase-box{
      border-radius:30px;
      padding:32px;
      min-height:300px;
      position:relative;
      overflow:hidden;
    }
    .showcase-box::before{
      content:"";
      position:absolute;
      inset:auto auto -80px -40px;
      width:220px;height:220px;border-radius:50%;
      background:radial-gradient(circle, rgba(86,198,255,.16), transparent 70%);
    }
    .showcase-box.alt::before{background:radial-gradient(circle, rgba(122,107,255,.22), transparent 70%); left:auto; right:-40px}
    .showcase-box h3{font-size:30px; margin:10px 0 14px}
    .showcase-box p{color:var(--muted); margin:0 0 20px}
    .bullet-list{display:grid; gap:12px; margin-top:18px}
    .bullet{
      display:flex; align-items:center; gap:12px; color:#e7f2ff;
      padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.06);
    }
    .bullet i{
      width:28px;height:28px;border-radius:10px; display:grid; place-items:center;
      background:linear-gradient(135deg, rgba(52,245,197,.24), rgba(86,198,255,.24));
      font-style:normal;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .pricing-wrap{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
      margin-top:34px;
      align-items:stretch;
    }
    .pricing-card{
      padding:30px;
      position:relative;
      border-radius:28px;
      transition:transform .25s ease, border-color .25s ease;
    }
    .pricing-card:hover{transform:translateY(-4px)}
    .pricing-card.featured{
      background:linear-gradient(180deg, rgba(86,198,255,.15), rgba(122,107,255,.14));
      transform:translateY(-10px);
      border-color:rgba(86,198,255,.3);
    }
    .plan-badge{
      display:inline-flex;
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      background:rgba(255,255,255,.08);
      color:#e0efff;
      margin-bottom:14px;
      border:1px solid rgba(255,255,255,.09);
    }
    .price{
      font-size:46px;
      line-height:1;
      margin:18px 0 10px;
      letter-spacing:-.05em;
    }
    .price span{font-size:14px; color:var(--muted)}
    .plan-list{display:grid; gap:12px; margin:24px 0 28px; padding:0}
    .plan-list li{list-style:none; color:#e4f1ff; position:relative; padding-right:24px}
    .plan-list li::before{
      content:""; width:10px; height:10px; border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--primary));
      position:absolute; right:0; top:10px;
      box-shadow:0 0 16px rgba(86,198,255,.35);
    }

    .faq-grid{display:grid; gap:16px; margin-top:34px}
    .faq-item{overflow:hidden; border-radius:22px}
    .faq-question{
      width:100%; background:none; border:none; color:#fff; font:inherit;
      text-align:right; padding:22px 24px; cursor:pointer;
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      font-size:18px;
    }
    .faq-question span:last-child{
      width:36px;height:36px;border-radius:12px; display:grid; place-items:center;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
      transition:transform .25s ease;
      flex-shrink:0;
    }
    .faq-item.active .faq-question span:last-child{transform:rotate(45deg)}
    .faq-answer{
      max-height:0; overflow:hidden; transition:max-height .35s ease;
      color:var(--muted); padding:0 24px;
    }
    .faq-answer p{margin:0 0 22px}

    .cta-box{
      padding:40px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      overflow:hidden;
      position:relative;
      border-radius:30px;
    }
    .cta-box::before{
      content:"";
      position:absolute;
      inset:auto auto -120px -60px;
      width:260px;height:260px;border-radius:50%;
      background:radial-gradient(circle, rgba(52,245,197,.18), transparent 72%);
      pointer-events:none;
    }
    .cta-box::after{
      content:"";
      position:absolute;
      inset:-40px -50px auto auto;
      width:240px;height:240px;border-radius:50%;
      background:radial-gradient(circle, rgba(122,107,255,.18), transparent 72%);
      pointer-events:none;
    }
    .cta-box h3{margin:0 0 12px; font-size:36px}
    .cta-box p{margin:0; color:var(--muted); max-width:680px}

    .footer{
      padding:26px 0 48px;
      color:#95accd;
    }
    .footer-bar{
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:center;
      border-top:1px solid rgba(255,255,255,.08);
      padding-top:24px;
      flex-wrap:wrap;
    }
    .footer-links{display:flex; gap:14px; flex-wrap:wrap}

    .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
    .reveal.is-visible{opacity:1; transform:none}

    .mobile-toggle{
      display:none;
      width:48px;height:48px;border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.05);
      color:#fff; font-size:22px;
    }

    @media (max-width: 1100px){
      .hero-grid,
      .showcase,
      .grid-2,
      .pricing-wrap,
      .service-grid{
        grid-template-columns:1fr 1fr;
      }
      .hero-visual{min-height:560px}
      .glass-panel{transform:none}
      .section-split{grid-template-columns:1fr}
    }

    @media (max-width: 860px){
      .nav{min-height:72px}
      .mobile-toggle{display:grid; place-items:center}
      .nav-links{
        position:absolute;
        top:80px; right:12px; left:12px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:12px;
        background:rgba(4,10,20,.94);
        border:1px solid rgba(255,255,255,.08);
        border-radius:20px;
        backdrop-filter:blur(20px);
        box-shadow:var(--shadow);
      }
      .nav-links.open{display:flex}
      .nav-links a{padding:13px 12px}
      .nav-actions .btn-secondary{display:none}

      .hero-grid,
      .grid-2,
      .showcase,
      .pricing-wrap,
      .service-grid,
      .section-split{
        grid-template-columns:1fr;
      }

      .hero{padding-top:16px}
      .hero-copy{order:1}
      .hero-visual{order:2; min-height:auto; margin-top:10px}
      .cluster{padding:16px 0 0; max-width:100%}
      .glass-panel{
        width:100%;
        max-width:100%;
        transform:none;
        border-radius:26px;
        padding:20px;
      }
      .rack-item{
        grid-template-columns:auto 1fr;
        gap:12px;
      }
      .rack-item .tag{
        grid-column:1/-1;
        justify-self:flex-start;
      }
      .stat-row{grid-template-columns:repeat(2,1fr)}
      .cta-box{flex-direction:column; align-items:flex-start}
      .hub-item{flex-direction:column; align-items:flex-start}
      .footer-top{grid-template-columns:1fr !important; gap:22px !important}
    }

    @media (max-width: 560px){
      .container{width:min(var(--container), calc(100% - 18px))}
      .section{padding:60px 0}
      .hero-title{
        font-size:34px;
        line-height:1.15;
        margin:0 0 14px;
      }
      .hero p{
        font-size:15px;
        margin-bottom:20px;
      }
      .section-title{
        font-size:28px;
        line-height:1.25;
      }
      .section-subtitle{font-size:15px}
      .stat-row{
        grid-template-columns:1fr 1fr;
        gap:10px;
      }
      .stat-card{
        padding:14px;
        border-radius:16px;
      }
      .stat-card strong{font-size:20px}
      .price{font-size:34px}
      .cta-box{padding:24px}
      .cta-box h3{font-size:24px}
      .hub-panel,
      .route-panel,
      .showcase-box,
      .pricing-card,
      .feature-card,
      .service-card{
        padding:20px;
      }
      .showcase-box h3{font-size:24px}
      .hub-item{padding:14px}
      .bullet{padding:10px 12px}
      .footer{padding:18px 0 36px}
    }

/* ====== Locations Section (PRO UI) ====== */

.locations-section{
  padding:100px 0;
  position:relative;
  background:
    radial-gradient(circle at 20% 10%, rgba(86,198,255,.08), transparent 30%),
    radial-gradient(circle at 80% 90%, rgba(122,107,255,.10), transparent 30%);
}

.locations-shell{
  width:min(1240px, calc(100% - 32px));
  margin:auto;
}

.locations-head{
  margin-bottom:34px;
}

.locations-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
  color:#dbe8ff;
}

.locations-badge::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#34f5c5,#56c6ff);
  box-shadow:0 0 14px rgba(86,198,255,.6);
}

.locations-head h2{
  font-size:clamp(30px,3vw,52px);
  margin:16px 0 10px;
  line-height:1.2;
}

.locations-head p{
  color:#9db3d9;
  max-width:720px;
}

/* ===== Layout ===== */

.locations-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:20px;
}

/* ===== Sidebar ===== */

.locations-sidebar{
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  position:sticky;
  top:90px;
}

#locationSearch{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  outline:none;
}

#locationSearch::placeholder{
  color:#8fa4c9;
}

.locations-tabs{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.continent-tab{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  color:#dbe8ff;
  cursor:pointer;
  transition:.2s;
}

.continent-tab:hover{
  background:rgba(255,255,255,.07);
}

.continent-tab.active{
  background:linear-gradient(135deg, rgba(52,245,197,.2), rgba(86,198,255,.2));
  border-color:rgba(86,198,255,.3);
}

/* ===== Main ===== */

.locations-main{
  position:relative;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
}

/* ===== Scroll Grid ===== */

.locations-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;

  max-height:460px;
  overflow-y:auto;
  padding-right:6px;
}

/* Scrollbar */
.locations-grid::-webkit-scrollbar{
  width:8px;
}
.locations-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(#56c6ff,#7a6bff);
  border-radius:10px;
}
.locations-grid::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(#34f5c5,#56c6ff);
}

/* Fade bottom */
.locations-main::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:60px;
  background:linear-gradient(to top,#060816,transparent);
  pointer-events:none;
}

/* ===== Card ===== */

.location-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:.25s;
}

.location-card:hover{
  transform:translateY(-4px) scale(1.02);
  background:rgba(255,255,255,.08);
  border-color:rgba(86,198,255,.3);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}

/* Flag */
.location-flag{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:linear-gradient(135deg, rgba(86,198,255,.2), rgba(122,107,255,.25));
}

/* Text */
.location-body h3{
  margin:0;
  font-size:16px;
}

.location-body p{
  margin:0;
  font-size:12px;
  color:#9db3d9;
}

/* Tag */
.location-tag{
  margin-right:auto;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#34f5c5,#56c6ff);
  color:#021018;
  font-weight:700;
}

/* ===== Mobile ===== */

@media (max-width:900px){
  .locations-layout{
    grid-template-columns:1fr;
  }

  .locations-sidebar{
    position:static;
  }

  .locations-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:500px){
  .locations-section{
    padding:70px 0;
  }

  .locations-head h2{
    font-size:28px;
  }
}
.locations-wrap{
  margin-top:34px;
  display:grid;
  grid-template-columns:290px 1fr;
  gap:22px;
  align-items:start;
}

.locations-sidebar,
.locations-main{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.locations-sidebar{
  padding:18px;
  position:sticky;
  top:96px;
}

.locations-main{
  position:relative;
  padding:18px;
  overflow:hidden;
}

.search-wrap{
  margin-bottom:14px;
}

#countrySearch{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  outline:none;
  font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#countrySearch:focus{
  border-color:rgba(86,198,255,.28);
  box-shadow:0 0 0 4px rgba(86,198,255,.08);
  background:rgba(255,255,255,.06);
}

#countrySearch::placeholder{
  color:#8fa4c9;
}

.continent-tabs{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.continent-tab{
  width:100%;
  border:none;
  cursor:pointer;
  font:inherit;
  text-align:right;
  padding:12px 14px;
  border-radius:14px;
  color:#dce8ff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  transition:.2s ease;
}

.continent-tab:hover{
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}

.continent-tab.active{
  background:linear-gradient(135deg, rgba(52,245,197,.18), rgba(86,198,255,.18));
  border-color:rgba(86,198,255,.26);
  color:#fff;
  box-shadow:0 10px 22px rgba(86,198,255,.08);
}

.countries-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  max-height:470px;
  overflow-y:auto;
  padding-right:6px;
  padding-bottom:40px;
}

.countries-grid::-webkit-scrollbar{
  width:8px;
}

.countries-grid::-webkit-scrollbar-track{
  background:transparent;
}

.countries-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#56c6ff,#7a6bff);
  border-radius:999px;
}

.locations-main::after{
  content:"";
  position:absolute;
  right:0;
  left:0;
  bottom:0;
  height:72px;
  pointer-events:none;
  background:linear-gradient(to top, rgba(7,11,24,1), rgba(7,11,24,0));
  border-radius:0 0 26px 26px;
}

.country-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  min-height:92px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.country-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.07);
  border-color:rgba(86,198,255,.24);
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}

.country-flag{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:24px;
  background:linear-gradient(135deg, rgba(86,198,255,.20), rgba(122,107,255,.22));
  flex-shrink:0;
}

.country-body{
  min-width:0;
  flex:1;
}

.country-body h3{
  margin:0 0 2px;
  font-size:17px;
  color:#fff;
}

.country-body p{
  margin:0;
  color:#91a7cd;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.country-tag{
  flex-shrink:0;
  font-size:12px;
  color:#0a1522;
  background:linear-gradient(135deg,#34f5c5,#56c6ff);
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
}

.empty-state{
  padding:26px 10px 10px;
  color:#98add3;
  text-align:center;
}

@media (max-width: 1100px){
  .locations-wrap{
    grid-template-columns:1fr;
  }

  .locations-sidebar{
    position:static;
  }
}

@media (max-width: 860px){
  .countries-grid{
    grid-template-columns:1fr;
    max-height:520px;
  }

  .country-tag{
    display:none;
  }
}

@media (max-width: 560px){
  .locations-sidebar,
  .locations-main{
    padding:18px;
    border-radius:22px;
  }

  .country-card{
    padding:14px;
    min-height:84px;
  }

  .country-flag{
    width:44px;
    height:44px;
    font-size:22px;
    border-radius:14px;
  }
}