/* Prevent automatic font scaling from mobile phone settings */
    html, body, * {
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* --- 1. LOCAL FONT SETUP --- */
    @font-face {
        font-family: 'Vazir';
        src: url('Vazir.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    :root {
        --bg-color: #fdfbf7;
        --brand-yellow: #e4a025;
        --brand-dark: #b87d18;
        --brand-light: rgba(255, 234, 186, 0.5);
        --text-dark: #222222;
        --text-muted: #666666;
        --card-bg: rgba(255, 255, 255, 0.5);
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent; 
        font-family: 'Vazir', 'Segoe UI', Tahoma, sans-serif;
    }

    body, html {
        background-color: var(--bg-color);
        color: var(--text-dark);
        overflow-x: hidden;
        min-height: 100vh;
        
        /* Animated dotted background */
        background-image: radial-gradient(rgba(228, 160, 37, 0.3) 1.5px, transparent 1.5px);
        background-size: 30px 30px;
        animation: panBackground 15s linear infinite;
    }

    @keyframes panBackground {
        from { background-position: 0 0; }
        to { background-position: 60px 60px; }
    }

    .container {
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* --- 2. HEADER WITH BRAND-LIGHT BACKGROUND --- */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-left: 15px;
        padding-right: 15px;
    }

    .nav-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background-color: var(--card-bg);
        border: 3px solid var(--brand-yellow);
        border-radius: 20px;
        box-shadow: 0 5px 0 var(--brand-yellow);
        padding: 12.5px;
        margin-top: 10px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .nav-brand {
        display: flex;
        align-items: center;
        text-decoration: none;
        gap: 10px;
    }

    .nav-brand img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .nav-brand span {
        font-size: 12.5px;
        font-weight: 900;
        color: var(--brand-dark);
    }

    .nav-menu {
        display: flex;
        align-items: center;
        list-style: none;
        gap: 8px;
    }

    .nav-item {
        position: relative;
    }

    .nav-link {
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 700;
        font-size: 14.5px;
        padding: 8px 16px;
        border-radius: 14px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }

    .nav-link:hover {
        color: var(--brand-dark);
        background-color: rgba(255, 255, 255, 0.4);
    }

    /* Dropdown */
    .dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        min-width: 175px;
        list-style: none;
        animation: fadeIn 0.5s ease;
        background-color: var(--card-bg);
        border: 3px solid var(--brand-yellow);
        border-radius: 20px;
        box-shadow: 0 5px 0 var(--brand-yellow);
        padding: 12.5px;
        max-width: 390px;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    .nav-item:hover .dropdown-menu {
        display: block;
    }

    .dropdown-menu li a {
        display: block;
        padding: 9px 18px;
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 700;
        font-size: 13.5px;
        transition: background 0.2s, color 0.2s;
    }

    .dropdown-menu li a:hover {
        background-color: #fffaf0;
        color: var(--brand-yellow);
    }

    .nav-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 22px;
        color: var(--brand-dark);
        cursor: pointer;
    }

    /* --- 3. BANNER / HERO --- */
    .banner_section {
        padding: clamp(25px, 4vh, 40px) 0 0 0;
        text-align: center;
    }

    /* --- EDGE-TO-EDGE VIBRANT GLOWING LOGO --- */
    .logo-wrapper {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        padding: 0; /* Edge-to-edge (no gap/margin from logo) */
        margin-bottom: 25px;
        margin-top: 25px;
        z-index: 1;
        animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, premiumFloat 5s ease-in-out infinite 0.5s;
    }

    /* Large & Intense Ambient Glow */
    .logo-wrapper:before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: linear-gradient(45deg, #ff1b6b, #e4a025, #ffd778, #00e5ff, #ff1b6b);
        background-size: 300% 300%;
        z-index: -1;
        border-radius: 50px;
        filter: blur(20px);
        -webkit-filter: blur(20px);
        opacity: 0.95;
        animation: glowingBorder 5s linear infinite;
    }

    /* Sharp Edge-to-Edge Animated Border */
    .logo-wrapper:after {
        content: "";
        position: absolute;
        background: linear-gradient(45deg, #ff1b6b, #e4a025, #ffd778, #00e5ff, #ff1b6b);
        background-size: 300% 300%;
        z-index: 0;
        border-radius: 50px;
        animation: glowingBorder 5s linear infinite;
    }

    .logo-img {
        width: 200px;
        height: 200px;
        object-fit: contain;
        border-radius: 50px;
        display: block;
        position: relative;
        z-index: 1; /* Sits flush edge-to-edge over the border */
    }

    @keyframes glowingBorder {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    @keyframes premiumFloat {
        0%, 100% {
            transform: translateY(0px);
            box-shadow: 0 10px 22px rgba(228, 160, 37, 0.22);
        }
        50% {
            transform: translateY(-8px);
            box-shadow: 0 20px 30px rgba(228, 160, 37, 0.32);
        }
    }

    .animate-charcter {
        background-image: linear-gradient(
            -225deg,
            var(--brand-dark) 0%,
            var(--brand-yellow) 35%,
            var(--brand-light) 50%,
            var(--brand-yellow) 65%,
            var(--brand-dark) 100%
        );
        background-size: 200% auto;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 2.5s linear infinite;
        display: inline-block;
        font-size: clamp(25px, 5vh, 35px);
        font-weight: 900;
        filter: drop-shadow(0 2px 6px rgba(228, 160, 37, 0.25));
        margin-bottom: 10px;
    }

    @keyframes textclip {
        to { background-position: 200% center; }
    }

    .description-card {
        max-width: 400px;
        padding-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
        border-top: 1px solid rgba(228, 160, 37, 0.25);
        border-bottom: 1px solid rgba(228, 160, 37, 0.25);
        background: linear-gradient(90deg, transparent, rgba(228,160,37,0.04), transparent);
    }

    p.description {
        font-size: clamp(12.5px, 1.8vh, 14px);
        font-weight: 700;
        color: var(--text-muted);
        line-height: 1.8;
        text-align: justify;
        -moz-text-align-last: center;
        text-align-last: center;
        margin-bottom: 12px;
    }

    /* 3 Market Buttons in Description */
    .market-buttons-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .market-btn {
        flex: 1;
        max-width: 75px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--card-bg);
        border: 1.5px solid var(--brand-yellow);
        border-radius: 16px;
        padding: 8px 6px;
        text-decoration: none;
        box-shadow: 0 2.5px 0 var(--brand-yellow);
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    .market-btn:hover, .market-btn:active {
        transform: translateY(5px);
        box-shadow: 0 0px 0 var(--brand-yellow);
        background-color: var(--brand-light);
    }

    .market-img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        margin-bottom: 4px;
        transition: transform 0.2s ease;
    }

    .market-btn:hover .market-img {
        transform: scale(1.15);
    }

    .market-btn span {
        font-size: 11px;
        font-weight: 800;
        color: var(--text-dark);
    }

    /* --- UNIFIED 3D SEGMENTED FILTER BAR --- */
    .filter-tabs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--card-bg);
        border: 3px solid var(--brand-yellow);
        border-radius: 20px;
        box-shadow: 0 5px 0 var(--brand-yellow);
        padding: 5px;
        max-width: 400px;
        margin: 24px auto 14px auto;
        gap: 4px;
    }

    .tab-btn {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-muted);
        font-weight: 800;
        font-size: clamp(12.5px, 1.7vh, 14.5px);
        padding: 9px 8px;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center;
    }

    .tab-btn:hover {
        color: var(--brand-dark);
        background-color: var(--brand-light);
    }

    .tab-btn.active {
        background-color: var(--brand-yellow);
        color: #ffffff;
        font-weight: 900;
        box-shadow: 0 2px 8px rgba(228, 160, 37, 0.35);
    }

    /* --- 5. 3D BTN-LINKS --- */
    .links-wrapper {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .field-section {
        display: none;
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .field-section.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .links-container {
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 2vh, 15px);
        width: 100%;
    }

    .btn-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--card-bg);
        border: 3px solid var(--brand-yellow);
        border-radius: 20px;
        padding: clamp(10px, 2vh, 14px) 18px;
        text-decoration: none;
        color: var(--text-dark);
        font-weight: 700;
        font-size: clamp(14px, 2vh, 16px);
        box-shadow: 0 6px 0 var(--brand-yellow);
        transform: translateY(0);
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    .btn-link:active, .btn-link:hover {
        transform: translateY(5px) !important;
        box-shadow: 0 0px 0 var(--brand-yellow) !important;
        background-color: var(--brand-light) !important;
    }

    .btn-link.disabled {
        border-color: #ccc !important;
        box-shadow: 0 6px 0 #bbb !important;
        background-color: #fafafa !important;
        cursor: not-allowed;
    }

    .btn-link.disabled:hover, .btn-link.disabled:active {
        transform: none !important;
        box-shadow: 0 6px 0 #bbb !important;
        background-color: #fafafa;
    }

    .btn-icon-img {
        width: clamp(32px, 4.5vh, 40px);
        height: clamp(32px, 4.5vh, 40px);
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .btn-link:hover .btn-icon-img {
        transform: scale(1.25) rotate(-5deg);
    }

    .btn-text {
        flex-grow: 1;
        text-align: right;
        padding-right: 15px;
        display: flex;
        flex-direction: column;
    }

    .btn-text span:first-child {
        font-weight: 900;
        font-size: clamp(14.5px, 2.1vh, 16.5px);
        color: var(--text-dark);
    }

    .btn-subtext {
        font-size: clamp(10.5px, 1.6vh, 12px);
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 3px;
        letter-spacing: 0.2px;
    }

    .footer-text {
        margin-top: auto;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 10px;
        font-size: clamp(9.5px, 1.6vh, 11.5px);
        color: var(--text-muted);
        letter-spacing: 1px;
        opacity: 0;
        animation: fadeIn 1s ease forwards 1s;
    }

    /* --- 6. FOOTER WITH BRAND-LIGHT BACKGROUND & 3D CERTS --- */
    footer {
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr;
        gap: 25px;
        align-items: center;
        justify-content: space-between;
        align-items: center;
        background-color: var(--card-bg);
        border: 3px solid var(--brand-yellow);
        border-radius: 20px;
        box-shadow: 0 5px 0 var(--brand-yellow);
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 15px;
        padding-right: 15px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-about {
        text-align: center;
    }

    .footer-logo {
        width: 75px;
        height: 75px;
        border-radius: 18px;
        box-shadow: 0 4px 12px rgba(184, 125, 24, 0.25);
        margin-bottom: 10px;
    }

    .social-links {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
    }

    .social-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: var(--card-bg);
        border: 1.5px solid var(--brand-yellow);
        box-shadow: 0 2.5px 0 var(--brand-yellow);
        transition: all 0.1s ease;
        text-decoration: none;
    }

    .social-btn:hover {
        transform: translateY(3px);
        box-shadow: 0 0px 0 var(--brand-yellow);
        background-color: var(--brand-light);
    }

    .footer-links h4 {
        font-weight: 900;
        color: var(--brand-dark);
        margin-bottom: 12px;
        font-size: 15px;
    }

    .footer-links ul {
        list-style: none;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    .footer-links a {
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 700;
        font-size: 13.5px;
        transition: color 0.2s;
    }

    .footer-links a:hover {
        color: var(--brand-dark);
    }

    /* --- ENLARGED & CENTERED 3D CERTS --- */
    .footer-certs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        max-width: 330px; /* Increased width to accommodate larger buttons */
        margin: 0 auto;
        justify-content: center;
        align-items: center;
    }

    .cert-3d-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--card-bg);
        border: 1.5px solid var(--brand-yellow);
        border-radius: 20px;
        padding: 10px;
        min-height: 75px; /* Larger touch area */
        box-shadow: 0 2.5px 0 var(--brand-yellow);
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

    .cert-3d-btn:hover, .cert-3d-btn:active {
        transform: translateY(5px);
        box-shadow: 0 0px 0 var(--brand-yellow);
        background-color: var(--brand-light);
    }

    .cert-3d-btn img {
        width: 55px;  /* Enlarged logo */
        height: 55px; /* Enlarged logo */
        object-fit: contain;
        transition: transform 0.2s ease;
    }

    .cert-3d-btn:hover img {
        transform: scale(1.08);
    }

    .bottom_footer {
        border-top: 1px solid rgba(184, 125, 24, 0.25);
        padding: 16px 0;
        margin-top: 25px;
        text-align: center;
        font-size: 11.5px;
        color: var(--brand-dark);
        font-weight: 700;
    }

    /* --- RESPONSIVENESS --- */
    @media (max-width: 820px) {
        .nav-toggle {
            display: block !important;
        }

        .nav-menu {
            display: none;
            width: 100%;
            flex-direction: column;
            margin-top: 10px;
            gap: 5px;
            animation: fadeIn 0.25s ease;
        }

        .nav-menu.open {
            display: flex;
        }

        .dropdown-menu {
            position: static;
            box-shadow: none;
            border: 1px dashed var(--brand-yellow);
            margin-top: 6px;
            width: 100%;
        }

        .footer-grid {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 22px;
        }
    }

    /* --- LARGE SCREENS (DESKTOPS & LAPTOPS) --- */
    @media (min-width: 900px) {
        /* 1. Centered Description with Margin Space from Logo */
        .hero-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            text-align: center;
            margin-bottom: 20px;
        }

        .hero-info {
            text-align: center;
            margin-right: 100px; /* Space from the logo */
        }

        .description-card {
            margin: 0 auto;
            max-width: 550px;
            margin-top: 50px;
            margin-bottom: 50px;
            text-align: center;
        }

        p.description {
            text-align: center;
            -moz-text-align-last: center;
            text-align-last: center;
        }

        .market-buttons-container {
            justify-content: center;
        }

        /* 2. App Buttons: 3 Items per Row with Max-Width of 250px */
        .links-wrapper {
            max-width: 800px;
            margin: 0 auto;
        }

        .links-container {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 250px)); /* Exactly 3 columns */
            justify-content: center; /* Centers the 3 columns */
            gap: 16px;
        }

        .btn-link {
            max-width: 250px;
            width: 100%;
            padding: 12px 14px;
        }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- ENTRANCE ANIMATIONS --- */
    .banner_section, .banner_section .description-card {
        opacity: 0;
        animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
    }

    .filter-tabs-container {
        opacity: 0;
        animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
    }

    /* Staggered Entrance for App Buttons */
    .btn-link {
        opacity: 0;
        transform: translateY(30px);
    }
    .btn-link:nth-child(1) { animation: slideUpBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards; }
    .btn-link:nth-child(2) { animation: slideUpBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; }
    .btn-link:nth-child(3) { animation: slideUpBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; }
    .btn-link:nth-child(4) { animation: slideUpBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards; }

    footer {
        opacity: 0;
        animation: fadeIn 0.8s ease 0.8s forwards;
    }

    /* --- ANIMATION KEYFRAMES --- */
    @keyframes popIn {
        0% { opacity: 0; transform: scale(0.5); }
        100% { opacity: 1; transform: scale(1); }
    }

    @keyframes slideUp {
        0% { opacity: 0; transform: translateY(25px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideUpBounce {
        0% { opacity: 0; transform: translateY(35px); box-shadow: 0 0px 0 var(--brand-yellow); }
        100% { opacity: 1; transform: translateY(0); box-shadow: 0 6px 0 var(--brand-yellow); }
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }