@charset "UTF-8";

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

html, body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    overflow-x: hidden;
}

/* Vazirmatn font faces - only commonly used weights */
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "خطایی رخ داده است."; }

/* ═══ FOCUS-ON-NAVIGATE PAGE HEADING ═══ */
/* Routes.razor uses <FocusOnNavigate Selector="h1" /> which programmatically focuses the
   page's <h1> (tabindex="-1") after each navigation/hydration. The browser then renders its
   default focus ring around the block-level h1, which looks like a black box/frame around
   the Hero heading. The h1 is only focused to announce the page title to screen readers, so
   the visible UA ring must be suppressed (same rule the stock Blazor template ships). */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* ═══ HERO GRADIENT ═══ */
.hero-gradient {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(147, 211, 253, 0.35) 0%, rgba(219, 238, 254, 0) 55%),
        radial-gradient(1000px 500px at 110% 15%, rgba(147, 211, 253, 0.25) 0%, rgba(219, 238, 254, 0) 55%),
        linear-gradient(180deg, #eaf5ff 0%, #f5faff 45%, #ffffff 100%);
}

/* ═══ SCROLL-REVEAL ANIMATION SYSTEM ═══ */
.anim-hidden {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.anim-hidden.anim-from-left {
    transform: translateX(48px);
}
.anim-hidden.anim-from-right {
    transform: translateX(-48px);
}
.anim-hidden.anim-scale {
    transform: scale(0.95);
}
.anim-hidden.anim-fade {
    transform: none;
}

.anim-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger children */
.anim-stagger > .anim-hidden:nth-child(1) { transition-delay: 0ms; }
.anim-stagger > .anim-hidden:nth-child(2) { transition-delay: 80ms; }
.anim-stagger > .anim-hidden:nth-child(3) { transition-delay: 160ms; }
.anim-stagger > .anim-hidden:nth-child(4) { transition-delay: 240ms; }
.anim-stagger > .anim-hidden:nth-child(5) { transition-delay: 320ms; }
.anim-stagger > .anim-hidden:nth-child(6) { transition-delay: 400ms; }
.anim-stagger > .anim-hidden:nth-child(7) { transition-delay: 480ms; }
.anim-stagger > .anim-hidden:nth-child(8) { transition-delay: 560ms; }

/* ═══ HERO ENTRANCE ANIMATIONS ═══ */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroScaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes heroFloatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}
@keyframes heroFloatAlt {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-14px); }
}
@keyframes heroPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes heroGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}
@keyframes heroGridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

.hero-enter-1 { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.hero-enter-2 { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.hero-enter-3 { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.hero-enter-4 { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.hero-enter-5 { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.hero-enter-6 { animation: heroScaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }
.hero-enter-7 { animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.hero-enter-8 { animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }

.hero-float { animation: heroFloat 6s ease-in-out infinite; }
.hero-float-slow { animation: heroFloatSlow 8s ease-in-out infinite; }
.hero-float-alt { animation: heroFloatAlt 5s ease-in-out infinite; }
.hero-float-delay { animation: heroFloat 7s ease-in-out 1s infinite; }
.hero-pulse { animation: heroPulse 3s ease-in-out infinite; }
.hero-glow { animation: heroGlow 4s ease-in-out infinite; }

/* ═══ DASHBOARD MOCKUP GRID ═══ */
.hero-grid-bg {
    background-image:
        linear-gradient(rgba(37, 128, 235, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 128, 235, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    animation: heroGridMove 20s linear infinite;
}

/* ═══ PREMIUM CARD STYLES ═══ */
.card-premium {
    background: white;
    border: 1px solid rgba(219, 238, 254, 0.8);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-premium:hover {
    border-color: rgba(147, 211, 253, 0.6);
    box-shadow: 0 12px 40px -12px rgba(37, 128, 235, 0.15);
    transform: translateY(-3px);
}

/* ═══ GLASS CARD ═══ */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ═══ GRADIENT BORDER ═══ */
.gradient-border {
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #3b9cf6, #2580eb, #1d6ad8);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gradient-border:hover::before {
    opacity: 1;
}

/* ═══ SECTION SEPARATORS ═══ */
.section-wave {
    position: relative;
}
.section-wave::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: inherit;
    clip-path: ellipse(55% 100% at 50% 0%);
}

/* ═══ FAQ ACCORDION ═══ */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-content.faq-open {
    grid-template-rows: 1fr;
}
.faq-content > div {
    overflow: hidden;
}

/* ═══ NAVBAR SCROLL STATE ═══ */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 1px 12px rgba(37, 128, 235, 0.06);
    border-bottom-color: rgba(219, 238, 254, 0.4) !important;
}

/* ═══ MOBILE MENU ═══ */
.mobile-menu-enter {
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mobile-menu-exit {
    animation: slideUp 0.2s ease-in both;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-12px); }
}

/* ═══ MOBILE NAVBAR CHECKBOX TOGGLE (Blazor SSR pattern) ═══ */
/* Hamburger icon toggle: show/hide based on checkbox state */
.hamburger-open { display: block; }
.hamburger-close { display: none; }

/* When checkbox is checked (menu open) — swap hamburger ↔ X */
#mobile-menu-toggle:checked ~ #main-navbar .hamburger-open { display: none; }
#mobile-menu-toggle:checked ~ #main-navbar .hamburger-close { display: block; }

/* Mobile menu drawer — hidden by default */
.mobile-menu-drawer {
    position: relative;
    z-index: 50;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
}

/* When checkbox is checked — show the drawer */
#mobile-menu-toggle:checked ~ #main-navbar .mobile-menu-drawer {
    max-height: 80vh;
    opacity: 1;
    pointer-events: auto;
}

/* Mobile menu backdrop — hidden by default */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

/* When checkbox is checked — show backdrop */
#mobile-menu-toggle:checked ~ #main-navbar .mobile-menu-backdrop {
    display: block;
}

/* Mobile menu link styles */
.mobile-menu-link {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #4b5563;
    font-weight: 500;
    border-radius: 0.75rem;
    transition: all 0.2s;
}
.mobile-menu-link:hover {
    color: #2580eb;
    background: rgba(239, 248, 255, 0.5);
}

/* Desktop: hide hamburger, ensure nav is always visible */
@media (min-width: 1024px) {
    .hamburger-open, .hamburger-close { display: none !important; }
    .mobile-menu-backdrop { display: none !important; }
    .mobile-menu-drawer {
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
}

/* ═══ PRICING BILLING-PERIOD TOGGLE (CSS-only, works in pure SSR) ═══ */
.pricing-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Inactive tab styling (default) */
.pricing-tab-inactive { color: #6b7280; }
.pricing-tab-inactive:hover { color: #2580eb; }

/* Active tab — gradient pill */
#billing-monthly:checked ~ .pricing-tabs label[for="billing-monthly"],
#billing-sixmonth:checked ~ .pricing-tabs label[for="billing-sixmonth"] {
    background: linear-gradient(to left, #2580eb, #3b9cf6);
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(59, 156, 246, 0.3),
                0 16px 40px -12px rgba(37, 128, 235, 0.3);
}

/* Keyboard focus on the (visually hidden) radio → highlight the label */
#billing-monthly:focus-visible ~ .pricing-tabs label[for="billing-monthly"],
#billing-sixmonth:focus-visible ~ .pricing-tabs label[for="billing-sixmonth"] {
    outline: 2px solid #3b9cf6;
    outline-offset: 2px;
}

/* Pricing visibility — default shows monthly, hides six-month */
.pricing-grid .pricing-sixmonth-price { display: none; }

/* Six-month selected → swap visibility */
#billing-sixmonth:checked ~ .pricing-grid .pricing-monthly-price { display: none; }
#billing-sixmonth:checked ~ .pricing-grid .pricing-sixmonth-price { display: flex; }

/* ═══ COUNTER ANIMATION ═══ */
@keyframes countUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.count-animate {
    animation: countUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ═══ WORKFLOW LINE ═══ */
@keyframes lineGrow {
    from { height: 0; }
    to { height: 100%; }
}
.workflow-line-animate {
    animation: lineGrow 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ═══ GLORY GLOW ═══ */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(59, 156, 246, 0.15); }
    50% { box-shadow: 0 0 60px rgba(59, 156, 246, 0.25); }
}
.glow-pulse {
    animation: glowPulse 4s ease-in-out infinite;
}

/* ═══ PRICING BADGE ═══ */
@keyframes badgeShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.badge-shine {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: badgeShine 3s ease-in-out infinite;
}

/* ═══ CURSOR INDICATOR ═══ */
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.cursor-blink {
    animation: cursorBlink 1.2s ease-in-out infinite;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    .anim-hidden { transition: none; opacity: 1; transform: none; }
    .hero-enter-1, .hero-enter-2, .hero-enter-3, .hero-enter-4,
    .hero-enter-5, .hero-enter-6, .hero-enter-7, .hero-enter-8 { animation: none; opacity: 1; }
    .hero-float, .hero-float-slow, .hero-float-alt, .hero-float-delay,
    .hero-pulse, .hero-glow { animation: none; }
    .hero-grid-bg { animation: none; }
    .faq-content { transition: none; }
    .badge-shine { animation: none; }
    .glow-pulse { animation: none; }
    .count-animate { animation: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══ SMOOTH SCROLL ═══ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ═══ UTILITY ═══ */
.text-gradient-primary {
    background: linear-gradient(135deg, #2580eb 0%, #3b9cf6 50%, #60b9fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-emerald {
    background: linear-gradient(135deg, #059669 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 639px) {
    .hero-gradient {
        min-height: auto !important;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .hero-gradient .relative.max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ═══ CLS: Reserve space for animated elements ═══ */
.hero-enter-2 {
    min-height: 2.8em;
}
.hero-enter-3 {
    min-height: 3.5em;
}
.hero-enter-6 {
    min-height: 200px;
}
.hero-enter-7 {
    min-height: 50px;
}
.hero-enter-8 {
    min-height: 50px;
}
.text-gradient-primary {
    display: inline-block;
}
.feature-card {
    min-height: 180px;
}