/* =========================
   تنظیمات اصلی
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background: #01190e;

    color: #fff;

    /* فونت Gill */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    overflow-x: hidden;
}

.menu-button {

    position: fixed;

    top: 30px;
    right: 30px;

    width: 55px;
    height: 55px;

    border:
        1px solid #ffffff22;

    border-radius: 14px;

    background:
        rgba(0,0,0,.6);

    backdrop-filter:
        blur(15px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 7px;

    cursor: pointer;

    z-index: 3000;

    transition:
        .4s ease;
}


.menu-button:hover {

    border-color: #008cff;

    box-shadow:
        0 0 15px #008cff55,
        0 0 35px #ff00aa22;

    transform:
        scale(1.08)
        rotate(2deg);
}


.menu-button span {

    width: 27px;

    height: 3px;

    border-radius: 10px;

    background: #fff;

    transition:
        .45s cubic-bezier(.77,0,.18,1);
}


/* =========================================
   MENU → X
   ========================================= */

.menu-button.active {

    border-color:
        #008cff;

    box-shadow:
        0 0 20px #008cff55,
        0 0 40px #ff00aa22;
}


.menu-button.active span:nth-child(1) {

    transform:
        translateY(10px)
        rotate(45deg);
}


.menu-button.active span:nth-child(2) {

    opacity: 0;

    transform:
        scaleX(0);
}


.menu-button.active span:nth-child(3) {

    transform:
        translateY(-10px)
        rotate(-45deg);
}


/* =========================================
   SIDE MENU
   ========================================= */

.side-menu {

    position: fixed;

    top: 0;
    right: -400px;

    width: 380px;

    height: 100vh;

    padding:
        130px 45px 40px;

    background:
        rgba(3,3,8,.96);

    backdrop-filter:
        blur(30px);

    border-left:
        1px solid #ffffff12;

    box-shadow:
        -20px 0 70px #0066ff22;

    z-index: 2000;

    transition:
        right .65s cubic-bezier(.77,0,.18,1);
}


.side-menu.open {

    right: 0;
}


/* =========================================
   MENU GLOW
   ========================================= */

.side-menu::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    top: -100px;
    right: -100px;

    background: #0066ff;

    filter: blur(100px);

    opacity: .15;

    pointer-events: none;
}


/* =========================================
   MENU TITLE
   ========================================= */

.menu-title h2 {

    font-size: 35px;

    letter-spacing: 7px;

    animation:
        menuTitle 1s ease;
}


.menu-title span {

    color: #008cff;

    font-size: 11px;

    letter-spacing: 8px;
}


@keyframes menuTitle {

    from {
        opacity: 0;
        transform:
            translateX(30px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}


/* =========================================
   MENU LINE
   ========================================= */

.menu-line {

    width: 100%;

    height: 1px;

    margin-top: 30px;

    background: #ffffff18;
}


/* =========================================
   MENU LINKS
   ========================================= */

.side-menu nav {

    margin-top: 25px;
}


.side-menu nav a {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 23px 5px;

    color: #888;

    text-decoration: none;

    font-size: 20px;

    border-bottom:
        1px solid #ffffff0c;

    transition:
        .35s ease;

}


.side-menu nav a b {

    color: #333;

    font-size: 11px;

    transition:
        .35s ease;
}


.side-menu nav a:hover {

    color: #fff;

    padding-right: 20px;

    text-shadow:
        0 0 15px #008cff;
}


.side-menu nav a:hover b {

    color: #008cff;
}


/* =========================================
   MENU FOOTER
   ========================================= */

.menu-bottom {

    position: absolute;

    bottom: 30px;
    right: 45px;

    color: #333;

    font-size: 10px;

    letter-spacing: 3px;
}



/* =========================
   شبکه متحرک
========================= */

.background-grid {

    position: fixed;

    inset: 0;

    z-index: -10;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    animation: gridMove 12s linear infinite;
}

@keyframes gridMove {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(65px,65px);
    }

}


/* =========================
   نورهای پس زمینه
========================= */

.glow {

    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(140px);

    pointer-events: none;

    z-index: -9;
}

.glow-blue {

    background: #006eff;

    top: -250px;
    right: -200px;

    opacity: .28;

    animation: blueGlow 9s infinite alternate ease-in-out;
}

.glow-purple {

    background: #7900ff;

    bottom: -300px;
    left: -200px;

    opacity: .25;

    animation: purpleGlow 12s infinite alternate ease-in-out;
}

.glow-pink {

    width: 300px;
    height: 300px;

    background: #ff008c;

    left: 45%;
    top: 45%;

    opacity: .12;

    animation: pinkGlow 8s infinite alternate ease-in-out;
}


@keyframes blueGlow {

    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(-150px,180px) scale(1.35);
    }

}


@keyframes purpleGlow {

    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(170px,-150px) scale(1.4);
    }

}


@keyframes pinkGlow {

    0% {
        transform: translate(-100px,-50px);
    }

    100% {
        transform: translate(100px,100px);
    }

}


/* =========================
   ذرات
========================= */

.particles span {

    position: fixed;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: white;

    opacity: .3;

    animation: particleFloat 7s infinite ease-in-out;
}


.particles span:nth-child(1) {
    top: 10%;
    left: 10%;
}

.particles span:nth-child(2) {
    top: 20%;
    left: 80%;
    animation-delay: 1s;
}

.particles span:nth-child(3) {
    top: 35%;
    left: 30%;
    animation-delay: 2s;
}

.particles span:nth-child(4) {
    top: 45%;
    left: 90%;
    animation-delay: 3s;
}

.particles span:nth-child(5) {
    top: 60%;
    left: 15%;
    animation-delay: 1.5s;
}

.particles span:nth-child(6) {
    top: 70%;
    left: 70%;
    animation-delay: 2.5s;
}

.particles span:nth-child(7) {
    top: 80%;
    left: 40%;
    animation-delay: 4s;
}

.particles span:nth-child(8) {
    top: 90%;
    left: 85%;
    animation-delay: 1s;
}

.particles span:nth-child(9) {
    top: 15%;
    left: 50%;
    animation-delay: 3s;
}

.particles span:nth-child(10) {
    top: 50%;
    left: 55%;
    animation-delay: 2s;
}

.particles span:nth-child(11) {
    top: 30%;
    left: 5%;
    animation-delay: 4s;
}

.particles span:nth-child(12) {
    top: 75%;
    left: 90%;
    animation-delay: 5s;
}

.particles span:nth-child(13) {
    top: 85%;
    left: 8%;
    animation-delay: 2s;
}

.particles span:nth-child(14) {
    top: 5%;
    left: 65%;
    animation-delay: 3s;
}


@keyframes particleFloat {

    0%,100% {
        transform: translateY(0);
        opacity: .15;
    }

    50% {
        transform: translateY(-35px);
        opacity: .9;
    }

}


/* =========================
   هدر
========================= */

.header {

    position: absolute;

    top: 30px;
    left: 40px;

    z-index: 100;
}


/* =========================
   دو لوگو
========================= */

.logo-slider {

    position: relative;

    width: 125px;
    height: 125px;
}


.logo {

    position: absolute;

    top: 0;
    left: 0;

    width: 125px;
    height: 125px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 10px #008cff)
        drop-shadow(0 0 30px #0066ff55);
}


/* لوگوی اول */

.logo-one {

    animation:
        logoOne 6s infinite ease-in-out;
}


/* لوگوی دوم */

.logo-two {

    opacity: 0;

    border-radius: 15px;

    animation:
        logoTwo 6s infinite ease-in-out;
}


@keyframes logoOne {

    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    40% {
        opacity: 1;
        transform: rotate(180deg) scale(1);
    }

    50% {
        opacity: 0;
        transform: rotate(270deg) scale(.7);
    }

    90% {
        opacity: 0;
        transform: rotate(350deg) scale(.7);
    }

    100% {
        opacity: 1;
        transform: rotate(360deg) scale(1);
    }

}


@keyframes logoTwo {

    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(.7);
    }

    45% {
        opacity: 0;
        transform: rotate(-90deg) scale(.7);
    }

    50% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    90% {
        opacity: 1;
        transform: rotate(180deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotate(360deg) scale(.7);
    }

}


/* =========================
   خط زیر لوگو
========================= */

.logo-line {

    width: 120px;

    height: 2px;

    margin-top: 12px;

    background:
        linear-gradient(
            90deg,
            #008cff,
            transparent
        );

    box-shadow:
        0 0 10px #008cff,
        0 0 25px #008cff;

    animation: lineAnimation 3s infinite alternate;
}


@keyframes lineAnimation {

    from {
        width: 70px;
        opacity: .4;
    }

    to {
        width: 220px;
        opacity: 1;
    }

}


/* =========================
   دکمه بازگشت
========================= */

.back-button {

    position: fixed;

    top: 30px;
    right: 100px;

    z-index: 9999;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 20px;

    color: #999;

    text-decoration: none;

    border: 1px solid #ffffff18;

    border-radius: 12px;

    background: rgba(0,0,0,.7);

    backdrop-filter: blur(15px);

    transition: .4s ease;

    animation: backEnter 1s .4s both;
}


@keyframes backEnter {

    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


.back-button span {

    color: #008cff;

    font-size: 22px;

    transition: .4s;
}


.back-button:hover {

    color: white;

    border-color: #008cff;

    box-shadow:
        0 0 20px #008cff55,
        0 0 50px #008cff22;

    transform: translateX(7px);
}


.back-button:hover span {

    transform: translateX(-6px);
}


/* =========================
   محتوای صفحه
========================= */

.about-container {

    width: min(1050px, 90%);

    margin: auto;

    padding-top: 190px;

    padding-bottom: 100px;
}


/* =========================
   عنوان
========================= */

.hero-title {

    text-align: center;

    animation: heroEnter 1.2s ease both;
}


@keyframes heroEnter {

    from {
        opacity: 0;
        transform: translateY(60px);
        filter: blur(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


.small-title {

    color: #008cff;

    font-size: 13px;

    letter-spacing: 7px;

    margin-bottom: 20px;

    animation: smallTitle 3s infinite alternate;
}


@keyframes smallTitle {

    from {
        letter-spacing: 5px;
        opacity: .4;
    }

    to {
        letter-spacing: 11px;
        opacity: 1;
    }

}


.hero-title h1 {

    font-size: clamp(55px, 9vw, 105px);

    font-weight: bold;

    background:
        linear-gradient(
            90deg,
            #fff,
            #008cff,
            #fff,
            #7900ff,
            #fff
        );

    background-size: 300%;

    background-clip: text;

    color: transparent;

    animation:
        titleGradient 5s infinite linear,
        titleFloat 4s infinite ease-in-out;
}


@keyframes titleGradient {

    from {
        background-position: 0%;
    }

    to {
        background-position: 300%;
    }

}


@keyframes titleFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


.title-line {

    width: 100px;

    height: 2px;

    margin: 25px auto;

    background: #008cff;

    box-shadow:
        0 0 15px #008cff,
        0 0 40px #008cff;

    animation: titleLine 2s infinite alternate;
}


@keyframes titleLine {

    from {
        width: 60px;
    }

    to {
        width: 180px;
    }

}


.hero-title p {

    color: #777;

    font-size: 17px;
}


/* =========================
   کارت
========================= */

.info-card {

    position: relative;

    margin-top: 90px;

    padding: 35px;

    overflow: hidden;

    border-radius: 22px;

    border: 1px solid #ffffff12;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05),
            rgba(0,140,255,.025)
        );

    opacity: 0;

    transform:
        translateY(70px)
        scale(.94);

    transition:
        opacity 1s ease,
        transform .8s ease,
        border .4s,
        box-shadow .4s;
}


.info-card.visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.info-card:hover {

    border-color: #008cff66;

    box-shadow:
        0 0 50px #008cff12,
        inset 0 0 50px #008cff08;
}


.card-light {

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: #008cff;

    filter: blur(120px);

    opacity: .08;

    top: -180px;
    right: -120px;

    animation: cardLight 5s infinite alternate;
}


@keyframes cardLight {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(-200px,180px);
    }

}


.card-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    color: #777;

    font-size: 14px;
}


.online {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #00ff88;
}


.online i {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00ff88;

    box-shadow:
        0 0 10px #00ff88,
        0 0 25px #00ff88;

    animation: onlinePulse 1.5s infinite;
}


@keyframes onlinePulse {

    50% {
        transform: scale(1.7);
        opacity: .5;
    }

}


/* =========================
   ردیف های اطلاعات
========================= */

.info-row {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 23px 5px;

    border-bottom: 1px solid #ffffff0b;

    transition: .4s;
}


.info-row.last {
    border-bottom: none;
}


.info-row:hover {

    padding-right: 18px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #008cff08
        );
}


.label {

    color: #666;

    transition: .4s;
}

.label img {

    width: 80px;
    height: 80px;
    border-radius: 30px;
}

.label img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px #008cff;
}


.info-row strong {

    color: #eee;

    transition: .4s;
}


.info-row:hover strong {

    color: #008cff;

    text-shadow:
        0 0 15px #008cff;
}


.active {

    color: #00ff88 !important;

    text-shadow:
        0 0 15px #00ff88;
}


/* =========================
   چشم انداز
========================= */

.vision {

    display: flex;

    gap: 40px;

    margin-top: 120px;

    padding: 45px;

    border-right: 2px solid #008cff;

    background:
        linear-gradient(
            90deg,
            transparent,
            #008cff05
        );

    opacity: 0;

    transform: translateX(80px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


.vision.visible {

    opacity: 1;

    transform: translateX(0);
}


.vision-number {

    color: #008cff;

    font-size: 15px;

    text-shadow:
        0 0 20px #008cff;
}


.vision-content span {

    color: #777;
}


.vision-content h2 {

    margin: 20px 0;

    font-size: clamp(35px, 5vw, 65px);

    font-weight: normal;
}


.vision-content em {

    color: #008cff;

    font-style: normal;

    text-shadow:
        0 0 25px #008cff55;
}


.vision-content p {

    max-width: 650px;

    color: #777;

    line-height: 2;

    font-size: 17px;
}


/* =========================
   خط پایانی
========================= */

.end-section {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 130px;

    opacity: 0;

    transform: scaleX(.4);

    transition: 1s ease;
}


.end-section.visible {

    opacity: 1;

    transform: scaleX(1);
}


.end-section span {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #008cff
        );
}


.end-section span:last-child {

    background:
        linear-gradient(
            90deg,
            #008cff,
            transparent
        );
}


.end-section b {

    color: #008cff;

    font-size: 12px;

    letter-spacing: 5px;

    animation: endPulse 2s infinite alternate;
}


@keyframes endPulse {

    from {
        opacity: .3;
        text-shadow: none;
    }

    to {
        opacity: 1;
        text-shadow:
            0 0 20px #008cff;
    }

}


/* =========================
   نور موس
========================= */

.mouse-light {

    position: fixed;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: #008cff;

    filter: blur(100px);

    opacity: .07;

    pointer-events: none;

    transform: translate(-50%, -50%);

    z-index: -1;
}


/* =========================
   موبایل
========================= */

@media (max-width: 700px) {

    .header {

        top: 20px;

        left: 20px;
    }


    .logo-slider {

        width: 95px;
        height: 95px;
    }


    .logo {

        width: 95px;
        height: 95px;
    }


    .back-button {

        top: 20px;
        right: 20px;

        padding: 10px 15px;
    }


    .about-container {

        width: 88%;

        padding-top: 160px;
    }


    .info-card {

        padding: 25px 20px;
    }


    .vision {

        padding: 25px 20px;

        gap: 20px;
    }


    .vision-content h2 {

        font-size: 35px;
    }

}