@font-face {
    font-family: 'IRANYekanXVF';
    src: url('../fonts/IRANYekanXVF.woff') format('woff-variations'),
        /* will be the standard and works in Safari now */ url('../fonts/IRANYekanXVF.woff') format('woff');
    /* for the other supporting browsers */
    font-display: fallback;
    font-variation-settings: "dots" 2;


}







 :root {
     --primary: #dd0000;
     --secondary: #000000;
     --accent: #ffce00;
 }
body { font-family: 'IRANYekanXVF'; }
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.scale-hover:hover { transform: scale(1.06); transition: transform 0.4s ease; }
.hero-bg {
    position: relative;
    background: url("../images/landing.webp")  no-repeat center center !important;
}
.hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}
.glass {
    background: rgba(30,29,29,0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.dark .glass {
    background: rgba(17,24,39,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.flag-stripe { height: 4px; background: linear-gradient(to left, #000000 33%, #dd0000 33% 66%, #ffce00 66%); }
.gif-container {
    width: 100%;
    max-width: 400px;
    margin: 2rem auto;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.step-card {
    min-width: 280px;
    scroll-snap-align: start;
}
@media (max-width: 768px) {
    .steps-container {
        grid-template-columns: repeat(4, minmax(280px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 1rem;
        scrollbar-width: none; /* Firefox */
    }
    .steps-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .step-card:nth-child(2) {
        opacity: 0.6; /* کارت دوم کمی کم‌رنگ‌تر تا کاربر بفهمه اسکرول داره */
        transform: scale(0.95);
    }
    .steps-hint {
        display: block;
        text-align: center;
        margin-top: 1rem;
        color: #666;
        font-size: 0.7rem;
    }
}
/* فونت‌سایزهای responsive با clamp - Mobile-First */
h1 {
    font-size: clamp(2rem, 8vw, 3.5rem); /* موبایل: ~2rem، دسکتاپ: تا 3.5rem */
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.8rem, 7vw, 3rem);
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.3;
}

.text-6xl { font-size: 1.8rem; }
.text-5xl { font-size: 1.7rem; }
.text-4xl { font-size: 1.6rem; }
.text-3xl { font-size: 1.5rem }
.text-2xl { font-size: 1.3rem ; }
.text-xl  { font-size: clamp(1.125rem, 4vw, 1.5rem); }
.text-lg  { font-size: clamp(1rem, 3.5vw, 1.25rem); }

/* برای موبایل‌های خیلی کوچک (زیر 360px) */
@media (max-width: 360px) {
    h1 { font-size: clamp(1.75rem, 10vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 8vw, 2.25rem); }
    .text-6xl { font-size: clamp(2rem, 9vw, 2.75rem); }
    .text-5xl { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}

/* برای دسکتاپ بزرگ (بالای 1440px) */
@media (min-width: 1440px) {
    h1 { font-size: 4rem; }
    h2 { font-size: 3.25rem; }
    .text-6xl { font-size: 4rem; }
    .text-5xl { font-size: 3.25rem; }
}