@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root {
    --orange: #f28c28;
    --orange-light: #ffb45f;
    --orange-soft: #fff4e8;

    --green: #28956f;
    --green-light: #63c49f;
    --green-soft: #edf9f4;

    --telegram: #229ed9;
    --telegram-soft: #edf8fd;

    --whatsapp: #25d366;
    --whatsapp-soft: #effcf4;

    --text-main: #26332f;
    --text-secondary: #74817d;

    --white: #ffffff;
    --background: #fbfcfb;

    --border: rgba(242, 140, 40, 0.13);
}

/* ==============================
   RESET
============================== */

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

html {
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;

    color: var(--text-main);

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(242, 140, 40, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(40, 149, 111, 0.08),
            transparent 28%
        ),
        #fbfcfb;

    overflow-x: hidden;
}

/* ==============================
   BACKGROUND
============================== */

.bg-shape {
    position: fixed;

    pointer-events: none;

    z-index: 0;

    border-radius: 50%;

    opacity: 0.8;
}

.bg-shape-1 {
    width: 350px;
    height: 350px;

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

    border: 1px solid rgba(242, 140, 40, 0.12);
}

.bg-shape-2 {
    width: 300px;
    height: 300px;

    bottom: -150px;
    left: -100px;

    border: 1px solid rgba(40, 149, 111, 0.12);
}

.bg-shape-3 {
    width: 100px;
    height: 100px;

    top: 20%;
    left: 8%;

    border: 1px solid rgba(242, 140, 40, 0.09);
}

.grid-overlay {
    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(242, 140, 40, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(40, 149, 111, 0.035) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;
}

/* ==============================
   MAIN
============================== */

.maintenance-page {
    position: relative;

    z-index: 1;

    min-height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 35px 20px;
}

/* ==============================
   CARD
============================== */

.maintenance-card {
    position: relative;

    width: min(790px, 100%);

    padding: 55px 55px 34px;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.9);

    border:
        1px solid rgba(242, 140, 40, 0.13);

    border-radius: 30px;

    box-shadow:
        0 35px 90px rgba(30, 47, 41, 0.08),
        0 10px 30px rgba(242, 140, 40, 0.04);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow: hidden;
}

/* Top line */

.maintenance-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--orange-light),
            var(--green-light),
            var(--green)
        );
}

/* ==============================
   LOGO
============================== */

.logo-area {
    position: relative;

    display: inline-flex;

    justify-content: center;
    align-items: center;

    margin-bottom: 30px;
}

.company-logo {
    position: relative;

    z-index: 2;

    display: block;

    width: auto;

    max-width: 230px;
    max-height: 120px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px rgba(242, 140, 40, 0.15)
        );
}

.logo-glow {
    position: absolute;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        rgba(242, 140, 40, 0.07);

    filter: blur(28px);

    animation:
        logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}

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

h1 {
    font-size:
        clamp(29px, 5vw, 45px);

    line-height: 1.4;

    font-weight: 800;

    color: var(--text-main);

    margin-bottom: 18px;
}

h1::after {
    content: "";

    display: block;

    width: 62px;
    height: 3px;

    margin:
        17px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--green)
        );
}

/* ==============================
   TEXT
============================== */

.main-text {
    max-width: 650px;

    margin:
        0 auto 12px;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 2;
}

.contact-text {
    max-width: 620px;

    margin: 0 auto;

    color: #87918e;

    font-size: 14px;

    line-height: 2;
}

/* ==============================
   LOADER
============================== */

.loader-wrapper {
    display: flex;

    justify-content: center;
    align-items: center;

    margin:
        38px 0 34px;
}

.loader-ring {
    position: relative;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--orange),
            #ffb35b,
            var(--green),
            rgba(40, 149, 111, 0.12),
            var(--orange)
        );

    box-shadow:
        0 0 30px rgba(242, 140, 40, 0.08);

    will-change: transform;
}

.loader-ring::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background: var(--white);
}

.loader-ring::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 50%;

    width: 14px;
    height: 14px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 0 5px rgba(242, 140, 40, 0.09),
        0 0 20px rgba(242, 140, 40, 0.35);
}

.loader-center {
    position: absolute;

    z-index: 2;

    inset: 23px;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(242, 140, 40, 0.07);

    background:
        radial-gradient(
            circle,
            rgba(242, 140, 40, 0.04),
            rgba(40, 149, 111, 0.04)
        );
}

.loader-core {
    width: 25px;
    height: 25px;

    display: flex;

    justify-content: center;
    align-items: center;
}

.loader-core span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 18px rgba(40, 149, 111, 0.4);
}

/* ==============================
   CONTACT
============================== */

.contact-section {
    margin-top: 5px;
}

.contact-title {
    margin-bottom: 15px;

    font-size: 14px;

    font-weight: 700;

    color: var(--text-main);
}

.phone-list {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;
}

.phone-box {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

    padding: 17px;

    text-align: right;

    text-decoration: none;

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid rgba(242, 140, 40, 0.12);

    border-radius: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.phone-box:hover {
    transform: translateY(-4px);

    border-color:
        rgba(242, 140, 40, 0.28);

    box-shadow:
        0 15px 35px rgba(31, 48, 42, 0.08);
}

.phone-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 14px;

    background:
        var(--orange-soft);
}

.phone-icon.green {
    background:
        var(--green-soft);
}

.phone-icon svg {
    width: 21px;
    height: 21px;

    fill: var(--orange);
}

.phone-icon.green svg {
    fill: var(--green);
}

.phone-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.phone-label {
    font-size: 11px;

    color: var(--text-secondary);
}

.phone-content strong {
    direction: ltr;

    color: var(--text-main);

    font-size: 15px;
    font-weight: 700;
}

.phone-arrow {
    margin-right: auto;

    color: var(--orange);

    font-size: 19px;

    transition:
        transform 0.3s ease;
}

.phone-box:hover .phone-arrow {
    transform:
        translateX(-5px);
}

/* ==============================
   SOCIAL BUTTONS
============================== */

.social-buttons {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;

    margin-top: 16px;
}

.social-button {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    min-height: 56px;

    padding: 13px 18px;

    text-decoration: none;

    border-radius: 17px;

    font-size: 13px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.social-button:hover {
    transform:
        translateY(-3px);
}

.social-icon {
    width: 25px;
    height: 25px;

    display: flex;

    justify-content: center;
    align-items: center;
}

.social-icon svg {
    width: 22px;
    height: 22px;
}

.social-button.whatsapp {
    color:
        #138a46;

    background:
        var(--whatsapp-soft);

    border:
        1px solid rgba(37, 211, 102, 0.14);
}

.social-button.whatsapp .social-icon svg {
    fill:
        var(--whatsapp);
}

.social-button.whatsapp:hover {
    box-shadow:
        0 12px 28px rgba(37, 211, 102, 0.11);
}

.social-button.telegram {
    color:
        #167da9;

    background:
        var(--telegram-soft);

    border:
        1px solid rgba(34, 158, 217, 0.14);
}

.social-button.telegram .social-icon svg {
    fill:
        var(--telegram);
}

.social-button.telegram:hover {
    box-shadow:
        0 12px 28px rgba(34, 158, 217, 0.11);
}

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

.footer {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 30px;

    color: #99a39f;

    font-size: 11px;
}

.footer-line {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--orange);
}

/* ==============================
   MOBILE
============================== */

@media (max-width: 700px) {

    .maintenance-page {
        padding:
            18px 13px;
    }

    .maintenance-card {
        padding:
            42px 20px 28px;

        border-radius: 25px;
    }

    .company-logo {
        max-width: 185px;
        max-height: 100px;
    }

    .main-text {
        font-size: 14px;

        line-height: 1.9;
    }

    .contact-text {
        font-size: 13px;

        line-height: 2;
    }

    .phone-list {
        grid-template-columns: 1fr;
    }

    .social-buttons {
        grid-template-columns: 1fr;
    }

    .loader-ring {
        width: 88px;
        height: 88px;
    }

    .footer {
        flex-direction: column;

        gap: 7px;
    }

    .footer-line {
        display: none;
    }
}

@media (max-width: 400px) {

    h1 {
        font-size: 27px;
    }

    .maintenance-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .phone-box {
        padding: 14px;
    }

    .social-button {
        min-height: 53px;
    }
}

/* ==============================
   REDUCED MOTION
============================== */

@media (prefers-reduced-motion: reduce) {

    .logo-glow {
        animation: none;
    }

    .loader-ring {
        transition: none;
    }

    .phone-box,
    .social-button {
        transition: none;
    }
}