:root{

    --primary:#5f5cff;

    --primary-light:#7b79ff;

    --dark:#0b1120;

    --bg:#f5f8fc;

    --surface:#ffffff;

    --text:#1f2937;

    --muted:#6b7280;

}

/* Persian typography — applies to the whole site since the page is RTL/Farsi */
html, body, .btn, .form-control, .nav-link, .dropdown-item {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}

body{

    background:#050816;
    font-family: "Vazirmatn", sans-serif;

}
h1,h2,h3,h4,h5,h6{
    color:#ffffff;
}
p{
    color:#aeb8ca;
}
a{
    color:#d7def5;
    transition:.3s;
}

a:hover{
    color:#7b79ff;
}
        
        .header{

    background:rgba(11,17,32,.88);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);
}
.navbar-brand{

    color:white !important;
}

.nav-link{

    color:#c5d0e8 !important;
}

.nav-link:hover{

    color:#7b79ff !important;
}


       .hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(8,12,30,.82),

        rgba(8,12,30,.45),

        rgba(8,12,30,.10)

    );

}
        .hero{

position:relative;

}

.hero::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:220px;

    background:linear-gradient(
        transparent,
        #111827
    );

}

        .hero-content{
            position:relative;
            z-index:2;
        }
            .hero-section{

background:#050816;

position:relative;

color:white;

overflow:hidden;

}

        .hero-grid{
    display:none;
}

        .hero-glow {
    position: absolute;
    right: 55%;
    top: 50%;

    width: 650px;
    height: 650px;

    transform: translateY(-50%);
    border-radius: 50%;

    background: var(--primary);
    filter: blur(170px);
    opacity: .22;
}


        .hero-title{

    font-family: "Vazirmatn", sans-serif;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;

}

        .hero-subtitle{

    font-family: "Vazirmatn", sans-serif;
    font-size: 1.15rem;
    line-height: 2;
    color: rgba(255,255,255,.78);
    font-weight: 400;

}

        .hero-text{

    color:#bcc6da;

    font-size:20px;

    max-width:560px;

}

        .hero-tag{

        color:#7c7cff;

        letter-spacing:4px;

        font-size:15px;

        text-transform:uppercase;

        }

        .hero-image{

        width:100%;

        max-width:700px;

        animation:float 6s ease-in-out infinite;

        filter:

        drop-shadow(0 0 50px rgba(120,120,255,.45))

        drop-shadow(0 0 120px rgba(120,120,255,.25));

        }

        .hero-tech{

        display:flex;

        gap:15px;

        flex-wrap:wrap;

        }

        .hero-tech span {
    display: inline-block;
    padding: 8px 16px;
    margin: 6px;

    background: rgba(255, 255, 255, 0.12);
    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);

    border-radius: 999px;

    transition: .3s;
}

.hero-tech span:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Responsive hero typography — 84px/42px only ever looked right on large desktops */
@media (max-width: 991.98px){
    .hero-title{ font-size:56px; letter-spacing:1px; }
    .hero-subtitle{ font-size:30px; }
    .hero-text{ max-width:100%; }
}

@media (max-width: 575.98px){
    .hero-title{ font-size:40px; }
    .hero-subtitle{ font-size:24px; }
    .hero-text{ font-size:17px; }
}
.card{

    background:#1a2233;

    border:1px solid rgba(255,255,255,.05);

    color:white;
}

.card:hover{

    transform:translateY(-8px);

}
.btn-primary{

    background:var(--primary);

    border:none;

    box-shadow:0 12px 35px rgba(95,92,255,.28);

}

.btn-primary:hover{

    background:var(--primary-light);

    transform:translateY(-2px);

}
.form-control{

    background:#111827;

    border:1px solid #2d3a52;

    color:white;
}
.form-control::placeholder{

    color:#6b7280;
}
.form-control:focus{

    background:#111827;

    color:white;

    border-color:#5f5cff;

    box-shadow:0 0 0 .2rem rgba(95,92,255,.25);
}
.form-label{

    color:#d6d9e4;
}
.team-section h2{

    color:white;
}

.team-section p{

    color:#9ca8bd;
}
.footer{

    background:#050816;
}

.footer h6{

    color:white;
}

.footer p{

    color:#9ba8c7;
}

.footer a{

    color:#cfd7eb;
}

.footer a:hover{

    color:#7b79ff;
}



        @keyframes float{

        0%{

        transform:translateY(0px);

        }

        50%{

        transform:translateY(-18px);

        }

        100%{

        transform:translateY(0px);

        }

        }
            html{
            scroll-behavior:smooth;
        }
      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #eef2ff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }