/* =========================================================
   LOCAL FONTS
   ========================================================= */

@font-face {
    font-family: "Vazirmatn";

    src:
        url("/assets/fonts/Vazirmatn-Regular.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 400;

    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";

    src:
        url("/assets/fonts/Vazirmatn-Bold.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 700;

    font-display: swap;
}


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --bg:
        #090a0f;

    --card-bg:
        rgba(18, 20, 29, 0.94);

    --card-border:
        rgba(255, 255, 255, 0.08);

    --card-hover:
        rgba(255, 255, 255, 0.14);

    --text-main:
        #f8fafc;

    --text-muted:
        #94a3b8;

    --accent:
        #38bdf8;

    --success:
        #10b981;

    --warning:
        #f59e0b;

    --radius-xl:
        22px;

    --radius-md:
        14px;

    --spring:
        cubic-bezier(0.16, 1, 0.3, 1);

    --font-main:
        "Vazirmatn",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


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

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    min-height:
        100%;

    background:
        var(--bg);

}


body {

    margin:
        0;

    min-height:
        100vh;

    background-color:
        var(--bg);

    background-image:

        radial-gradient(
            circle at 50% 0%,
            rgba(56, 189, 248, 0.08) 0%,
            transparent 50%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(99, 102, 241, 0.05) 0%,
            transparent 40%
        );

    color:
        var(--text-main);

    font-family:
        var(--font-main);

    text-rendering:
        optimizeSpeed;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        2rem 1.1rem 3rem;

}


button,
a,
input,
textarea,
select {

    font-family:
        var(--font-main);

}


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

.container {

    width:
        100%;

    max-width:
        420px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.1rem;

}


/* =========================================================
   BRAND HERO
   ========================================================= */

.brand-hero {

    background:
        rgba(18, 20, 29, 0.96);

    border:
        1px solid var(--card-border);

    border-radius:
        var(--radius-xl);

    padding:
        1.5rem 1.25rem;

    position:
        relative;

    overflow:
        hidden;

}


.brand-hero::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

}


.status-pill {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        4px 12px;

    border-radius:
        999px;

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

    border:
        1px solid rgba(255, 255, 255, 0.08);

    font-size:
        0.72rem;

    color:
        var(--text-muted);

    margin-bottom:
        0.9rem;

}


.status-dot {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 10px var(--success);

}


.brand-title {

    margin:
        0;

    font-size:
        1.85rem;

    line-height:
        1.3;

    font-weight:
        700;

    letter-spacing:
        -0.03em;

    background:
        linear-gradient(
            135deg,
            #ffffff 40%,
            #94a3b8 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


.brand-desc {

    margin:
        0.35rem 0 0;

    font-size:
        0.8rem;

    color:
        var(--text-muted);

    line-height:
        1.7;

}


/* =========================================================
   PHONE COPY
   ========================================================= */

.phone-copy-card {

    width:
        100%;

    appearance:
        none;

    border:
        1px solid var(--card-border);

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.01)
        );

    color:
        var(--text-main);

    padding:
        0.85rem 1.1rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    cursor:
        pointer;

    user-select:
        none;

    text-align:
        right;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;

}


.phone-copy-card:active {

    transform:
        scale(0.98);

    border-color:
        var(--accent);

}


.phone-info {

    display:
        flex;

    align-items:
        center;

    gap:
        0.75rem;

}


.phone-icon-wrap {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    border-radius:
        12px;

    background:
        rgba(56, 189, 248, 0.1);

    color:
        var(--accent);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.phone-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.phone-details strong {

    font-size:
        0.88rem;

    font-weight:
        700;

    direction:
        ltr;

    text-align:
        right;

    letter-spacing:
        0.05em;

}


.phone-details span {

    font-size:
        0.7rem;

    color:
        var(--text-muted);

}


.copy-badge {

    font-size:
        0.72rem;

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

    padding:
        5px 11px;

    border-radius:
        8px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    color:
        var(--text-muted);

}


/* =========================================================
   MESSENGERS
   ========================================================= */

.messengers-grid {

    display:
        grid;

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

    gap:
        0.5rem;

}


.messenger-btn {

    min-width:
        0;

    background:
        var(--card-bg);

    border:
        1px solid var(--card-border);

    border-radius:
        var(--radius-md);

    padding:
        0.85rem 0.2rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    text-decoration:
        none;

    color:
        var(--text-main);

    transition:
        transform 0.2s var(--spring),
        border-color 0.2s var(--spring);

}


.messenger-btn:active {

    transform:
        scale(0.94);

    border-color:
        rgba(255, 255, 255, 0.25);

}


.messenger-btn svg {

    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

}


.messenger-btn span {

    font-size:
        0.68rem;

    font-weight:
        700;

    color:
        var(--text-muted);

}


/* =========================================================
   NESHHAN MAP CARD
   ========================================================= */

.neshan-dark-card {

    background:
        var(--card-bg);

    border:
        1px solid var(--card-border);

    border-radius:
        var(--radius-xl);

    overflow:
        hidden;

    text-decoration:
        none;

    display:
        block;

    color:
        inherit;

    transition:
        border-color 0.25s var(--spring),
        transform 0.25s var(--spring);

}


.neshan-dark-card:active {

    border-color:
        rgba(56, 189, 248, 0.4);

    transform:
        translateY(-2px);

}


.map-cyber-canvas {

    height:
        125px;

    background-color:
        #0d1117;

    background-image:

        radial-gradient(
            rgba(255, 255, 255, 0.1)
            1px,
            transparent 1px
        ),

        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.02)
            1px,
            transparent 1px
        ),

        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.02)
            1px,
            transparent 1px
        );

    background-size:
        16px 16px,
        32px 32px,
        32px 32px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.map-road-glow {

    position:
        absolute;

    width:
        140%;

    height:
        18px;

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

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    transform:
        rotate(-8deg);

}


.radar-pin {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.radar-wave {

    position:
        absolute;

    width:
        44px;

    height:
        44px;

    border-radius:
        50%;

    border:
        1.5px solid var(--accent);

    animation:
        radarExpand 2s infinite ease-out;

}


.radar-core {

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    background:
        var(--accent);

    color:
        #090a0f;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 0 20px rgba(56, 189, 248, 0.6);

}


@keyframes radarExpand {

    0% {

        transform:
            scale(0.3);

        opacity:
            1;

    }

    100% {

        transform:
            scale(2.2);

        opacity:
            0;

    }

}


.neshan-badge {

    position:
        absolute;

    top:
        10px;

    right:
        12px;

    background:
        rgba(15, 23, 42, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    padding:
        3px 9px;

    border-radius:
        999px;

    font-size:
        0.65rem;

    font-weight:
        700;

    color:
        var(--accent);

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.map-footer {

    padding:
        0.85rem 1.1rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        rgba(18, 20, 29, 0.98);

}


.map-footer h2 {

    margin:
        0;

    font-size:
        0.84rem;

    font-weight:
        700;

}


.map-footer p {

    margin:
        1px 0 0;

    font-size:
        0.7rem;

    color:
        var(--text-muted);

}


.navigate-action {

    flex:
        0 0 auto;

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

    border:
        1px solid rgba(255, 255, 255, 0.1);

    color:
        var(--text-main);

    padding:
        6px 12px;

    border-radius:
        10px;

    font-size:
        0.74rem;

    font-weight:
        700;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}


/* =========================================================
   SERVICES
   ========================================================= */

.services-wrapper {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.55rem;

}


.section-label {

    margin:
        0 4px 0 0;

    font-size:
        0.72rem;

    font-weight:
        700;

    color:
        var(--text-muted);

    letter-spacing:
        0.05em;

}


#servicesContainer {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.55rem;

}


.service-card {

    background:
        var(--card-bg);

    border:
        1px solid var(--card-border);

    border-radius:
        var(--radius-md);

    overflow:
        hidden;

}


.service-card-header {

    width:
        100%;

    border:
        0;

    background:
        transparent;

    color:
        var(--text-main);

    padding:
        0.95rem 1.1rem;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        0.75rem;

    text-align:
        right;

}


.service-title-text {

    font-size:
        0.86rem;

    font-weight:
        700;

}


.service-tag {

    flex:
        0 0 auto;

    font-size:
        0.64rem;

    padding:
        2px 8px;

    border-radius:
        6px;

    background:
        rgba(56, 189, 248, 0.1);

    color:
        var(--accent);

    border:
        1px solid rgba(56, 189, 248, 0.2);

}


.service-body {

    display:
        grid;

    grid-template-rows:
        0fr;

    opacity:
        0;

    padding:
        0 1.1rem;

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    line-height:
        1.7;

    transition:
        grid-template-rows 0.3s var(--spring),
        opacity 0.2s ease,
        padding 0.3s var(--spring);

}


.service-body::before {

    content:
        "";

    min-height:
        0;

}


.service-card.open .service-body {

    grid-template-rows:
        1fr;

    opacity:
        1;

    padding:
        0 1.1rem 0.9rem;

}


.service-body-content {

    overflow:
        hidden;

}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

    position:
        fixed;

    right:
        50%;

    bottom:
        24px;

    transform:
        translate(50%, 100px);

    background:
        #ffffff;

    color:
        #090a0f;

    padding:
        9px 18px;

    border-radius:
        999px;

    font-size:
        0.78rem;

    font-weight:
        700;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.5);

    opacity:
        0;

    transition:
        transform 0.3s var(--spring),
        opacity 0.3s var(--spring);

    z-index:
        99;

    pointer-events:
        none;

    white-space:
        nowrap;

}


.toast.show {

    transform:
        translate(50%, 0);

    opacity:
        1;

}


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

footer {

    text-align:
        center;

    font-size:
        0.7rem;

    color:
        rgba(255, 255, 255, 0.25);

    margin-top:
        0.5rem;

}


footer p {

    margin:
        0;

}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   SMALL SCREENS
   ========================================================= */

@media (max-width: 360px) {

    body {

        padding:
            1rem 0.75rem 2rem;

    }

    .container {

        gap:
            0.8rem;

    }

    .messengers-grid {

        gap:
            0.35rem;

    }

    .messenger-btn {

        padding:
            0.7rem 0.1rem;

    }

    .map-footer {

        padding:
            0.75rem;

    }

    .map-footer p {

        font-size:
            0.65rem;

    }

}