:root{
      --bg0:#070A12;
      --bg1:#0B1020;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.09);
      --stroke: rgba(255,255,255,.10);
      --text:#E9ECF5;
      --muted:#A6ADC8;
      --accent:#7C7CFF;
      --accent2:#22D3EE;
      --good:#3CC878;
      --warn:#FFB020;
      --danger:#FF6B6B;
      --shadow: 0 18px 70px rgba(0,0,0,.55);
      --radius: 22px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(124,124,255,.22), transparent 60%),
        radial-gradient(900px 500px at 90% 30%, rgba(34,211,238,.16), transparent 55%),
        radial-gradient(900px 500px at 50% 100%, rgba(60,200,120,.10), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    .container{ width:min(1120px, 92vw); margin:0 auto; }

    /* subtle animated grain */
    .grain{
      pointer-events:none;
      position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
      opacity:.22;
      animation: grainMove 8s steps(10) infinite;
    }
    @keyframes grainMove{
      0%{ transform:translate(0,0); }
      20%{ transform:translate(-2%,3%); }
      40%{ transform:translate(4%,-2%); }
      60%{ transform:translate(-3%, -4%); }
      80%{ transform:translate(3%,2%); }
      100%{ transform:translate(0,0); }
    }

    /* Header */
    .topbar{
      border-bottom:1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.18);
      backdrop-filter: blur(14px);
    }
    .topbar-inner{
      display:flex; gap:14px;
      align-items:center; justify-content:space-between;
      padding:10px 0;
      color:var(--muted);
      font-size:13px;
    }
    .topbar a{ color:var(--muted); }
    .social{ display:flex; gap:10px; }
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      border-radius:999px;
    }

    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(16px);
      background: rgba(7,10,18,.55);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900; letter-spacing:.2px;
    }
.brand .logo{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  overflow:hidden;
  position:relative; /* ← FIX */
}


.brand .logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
}
.brand .logo:after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(255,255,255,.45), transparent 55%);
  opacity:0;
  transition:.3s ease;
  z-index:1;
}

.brand:hover .logo:after{
  opacity:1;
  animation: pulse 2.5s ease-in-out infinite;
}


    @keyframes pulse{
      0%,100%{ transform:translate(10%,10%) scale(1); opacity:.65; }
      50%{ transform:translate(-10%,-10%) scale(1.2); opacity:.35; }
    }

    .menu{ display:flex; gap:18px; align-items:center; }
    .menu a{
      color:var(--muted);
      padding:10px 12px;
      border-radius:12px;
      transition: .2s ease;
      border:1px solid transparent;
    }
    .menu a:hover{
      color:var(--text);
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.08);
      transform: translateY(-1px);
    }

    .cta{
      display:flex; gap:10px; align-items:center;
    }
    .btn{
      padding:10px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      color:var(--text);
      cursor:pointer;
      transition:.2s ease;
      display:inline-flex; align-items:center; gap:10px;
      user-select:none;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(124,124,255,.95), rgba(34,211,238,.75));
      border-color: rgba(124,124,255,.35);
      box-shadow: 0 18px 55px rgba(124,124,255,.18);
    }
    .btn.primary:hover{ box-shadow: 0 22px 65px rgba(124,124,255,.24); }
    .btn .dot{
      width:9px; height:9px; border-radius:50%;
      background: rgba(255,255,255,.9);
      box-shadow: 0 0 18px rgba(255,255,255,.6);
    }

    /* Hero */
    .hero{
      padding:54px 0 26px;
      position:relative;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:22px;
      align-items:stretch;
    }
    .hero-card{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      padding:28px;
      overflow:hidden;
      position:relative;
      min-height: 340px;
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-1px;
      background: radial-gradient(700px 300px at 20% 0%, rgba(124,124,255,.20), transparent 55%),
                  radial-gradient(500px 280px at 95% 25%, rgba(34,211,238,.18), transparent 60%);
      pointer-events:none;
    }
    .hero h1{
      margin:0 0 12px;
      font-size: clamp(26px, 3.1vw, 44px);
      line-height:1.25;
      position:relative;
    }
    .hero h1 span{
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero p{
      margin:0 0 18px;
      color:var(--muted);
      font-size: 15px;
      line-height:1.9;
      position:relative;
    }

    .badges{
      display:flex; flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
      position:relative;
    }
    .badge{
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.15);
      border-radius: 16px;
      transition:.2s ease;
      display:flex; align-items:center; gap:10px;
      min-width: 160px;
    }
    .badge:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.14);
    }
    .badge .icon{
      width:38px; height:38px;
      border-radius:14px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      display:grid; place-items:center;
      font-size:18px;
    }
    .badge small{ display:block; color:var(--muted); margin-top:2px; font-size:12px; }

    .side{
      display:grid;
      gap:14px;
    }
    .mini{
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius);
      padding:16px;
      box-shadow: 0 14px 45px rgba(0,0,0,.45);
    }
    .mini h3{ margin:0 0 8px; font-size:14px; color:var(--muted); font-weight:700; }
    .mini .value{
      font-size:20px;
      font-weight:900;
      letter-spacing:.2px;
    }
    .mini .hint{ color:var(--muted); font-size:12px; margin-top:6px; line-height:1.6; }

    /* Sections */
    section{ padding: 34px 0; }
    .section-title{
      display:flex; align-items:end; justify-content:space-between; gap:10px;
      margin-bottom:14px;
    }
    .section-title h2{
      margin:0;
      font-size: 20px;
      letter-spacing:.2px;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      font-size: 13px;
    }

    /* Stats */
    .stats{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:14px;
    }
    .stat{
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius);
      padding:18px 18px;
      overflow:hidden;
      position:relative;
    }
    .stat:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(420px 180px at 20% 0%, rgba(124,124,255,.16), transparent 60%);
      opacity:.85;
      pointer-events:none;
    }
    .stat .num{
      font-size:34px;
      font-weight:900;
      position:relative;
    }
    .stat .label{
      color:var(--muted);
      margin-top:6px;
      position:relative;
      font-size:13px;
    }

    /* FAQ */
    .faq{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
      gap:14px;
      align-items:start;
    }
    .faq-card{
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 12px 40px rgba(0,0,0,.45);
    }
    details{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      border-radius: 18px;
      padding: 12px 14px;
      transition:.2s ease;
    }
    details[open]{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.14);
    }
    summary{
      cursor:pointer;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:800;
      font-size:14px;
    }
    summary::-webkit-details-marker{ display:none; }
    .chev{
      width:34px; height:34px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      display:grid; place-items:center;
      background: rgba(255,255,255,.04);
      transition:.2s ease;
      flex:0 0 auto;
    }
    details[open] .chev{ transform: rotate(45deg); }
    .faq-body{
      margin-top:10px;
      color:var(--muted);
      font-size:13px;
      line-height:1.9;
    }
    .faq-list{ display:grid; gap:10px; }

    /* Public server */
    .public{
      background: linear-gradient(135deg, rgba(124,124,255,.16), rgba(34,211,238,.10));
      border:1px solid rgba(255,255,255,.12);
      border-radius: calc(var(--radius) + 6px);
      padding:18px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .public:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(700px 240px at 40% 0%, rgba(255,255,255,.10), transparent 55%);
      pointer-events:none;
    }
    .public-row{
      display:flex; flex-wrap:wrap;
      align-items:center; justify-content:space-between;
      gap:12px;
      position:relative;
    }
    .dns{
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center;
    }
    .dns code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 15px;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.20);
    }

    footer{
      padding: 26px 0 40px;
      color:var(--muted);
      border-top:1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.12);
      backdrop-filter: blur(10px);
      margin-top: 26px;
    }

    /* Scroll to top */
    .toTop{
      position:fixed;
      bottom:18px;
      left:18px;
      width:46px; height:46px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
      display:grid; place-items:center;
      cursor:pointer;
      opacity:0;
      transform: translateY(10px);
      transition:.2s ease;
      z-index:30;
    }
    .toTop.show{ opacity:1; transform: translateY(0); }

    /* ===============================
       Responsive (Mobile)
    ================================ */
    @media (max-width: 920px){
    
      /* layout */
      .hero-grid{
        grid-template-columns: 1fr;
      }
    
      .faq{
        grid-template-columns: 1fr;
      }
    
      .menu{
        display:none;
      }
    
      /* ---------- Topbar ---------- */
    
      .topbar{
        background: rgba(7,10,18,.75);
        backdrop-filter: blur(12px);
      }
    
      .topbar-inner{
        display:flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap:8px;
        padding:8px 0;
        font-size:12px;
      }
    
      .topbar .chip{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:6px 10px;
        font-size:12px;
        width:100%;
      }
    
      .topbar .chip a{
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:inline-block;
      }
    
      .social{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:6px;
      }
    
      .social .chip{
        padding:6px 10px;
        font-size:11px;
      }
    
    }

    
    
    /* Android Download Modal */
.android-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}

.android-modal.show{
  opacity:1;
  pointer-events:auto;
}

.android-modal-box{
  width:min(420px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  animation: modalPop .35s ease;
}

@keyframes modalPop{
  from{ transform:scale(.9) translateY(20px); opacity:0; }
  to{ transform:scale(1) translateY(0); opacity:1; }
}

.android-modal-box h3{
  margin:0 0 6px;
  font-size:20px;
}

.android-modal-box p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:13px;
}

.android-options{
  display:grid;
  gap:12px;
}

.android-option{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  transition:.2s ease;
}

.android-option:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.android-option span{
  font-size:22px;
}

.android-option small{
  display:block;
  font-size:12px;
  color:var(--muted);
}

.android-close{
  margin-top:18px;
  width:100%;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.android-close:hover{
  background: rgba(255,255,255,.08);
}



/* iOS Modal */
.ios-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}

.ios-modal.show{
  opacity:1;
  pointer-events:auto;
}

.ios-modal-box{
  width:min(480px, 94vw);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  padding:22px;
  box-shadow: 0 35px 100px rgba(0,0,0,.65);
  animation: modalPop .35s ease;
}

.ios-modal-box h3{
  margin:0 0 10px;
  font-size:20px;
}

.ios-desc{
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:14px;
}

.ios-steps{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

.ios-step{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-size:13px;
}

.ios-step span{
  font-size:16px;
}

.ios-dns-box{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin:14px 0;
  flex-wrap:wrap;
}

.ios-dns-box code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
}

.ios-note{
  font-size:12px;
  color:var(--warn);
  margin-bottom:14px;
}

.ios-close{
  width:100%;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.ios-close:hover{
  background: rgba(255,255,255,.08);
}


/* Console Modal */
.console-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}
.console-modal.show{
  opacity:1;
  pointer-events:auto;
}

.console-modal-box{
  width:min(520px, 95vw);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  padding:22px;
  box-shadow: 0 35px 100px rgba(0,0,0,.65);
  animation: modalPop .35s ease;
}

.console-desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-bottom:12px;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
* {
  max-width: 100vw;
}

/* Tabs */
.console-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.console-tabs .tab{
  flex:1;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.console-tabs .tab.active{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
}

/* Steps */
.console-steps{
  display:none;
  font-size:13px;
}
.console-steps.show{
  display:block;
}
.console-steps ol{
  padding-right:18px;
  line-height:2;
  color:var(--muted);
}

/* DNS */
.console-dns{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin:14px 0;
  flex-wrap:wrap;
}
.console-dns code{
  font-family: ui-monospace, monospace;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
}

.console-note{
  font-size:12px;
  color:var(--warn);
  margin-bottom:14px;
}

.console-close{
  width:100%;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}