/*==========================================================
    ALPHA PRODUCT HERO
    Neuray Design System
    (این فایل به variables.css و responsive.css نیاز داره —
     حتماً قبل از این فایل، لینک بشن)
==========================================================*/


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

.alpha-hero{

    /* فاصله از هدر */
    padding-top: calc(var(--header-height) + var(--space-header-gap));
    padding-bottom: var(--space-2xl);

    padding-inline: var(--space-inline);

    /* ارتفاع */
    min-height: calc(100svh - var(--header-height));

    direction:rtl;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:
            radial-gradient(circle at 20% 20%,rgba(var(--accent-rgb),.08),transparent 35%),
            radial-gradient(circle at 80% 30%,rgba(var(--primary-rgb),.08),transparent 40%),
            var(--background);

}


.alpha-hero-background{

    position:absolute;

    inset:0;

    z-index:0;

}


.alpha-hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}


.alpha-hero-glow-1{

    width:420px;

    height:420px;

    background:rgba(var(--accent-rgb),.12);

    top:-120px;

    right:-80px;

}


.alpha-hero-glow-2{

    width:350px;

    height:350px;

    background:rgba(var(--secondary-rgb),.08);

    bottom:-120px;

    left:-60px;

}


.alpha-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:80px;

    align-items:center;

}


/*======================================
            CONTENT
======================================*/

.alpha-hero-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:var(--surface);

    color:var(--primary);

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

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

    font-size:.9rem;

    margin-bottom:22px;

}


.alpha-hero-content h1{

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

    font-size:var(--hero-title-size-s);

    font-weight:var(--title-weight);

    line-height:1.18;

    color:var(--text);

    letter-spacing:-1px;

    margin-bottom:25px;

}


.alpha-hero-subtitle{

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

    font-size:var(--hero-desc-size);

    font-weight:var(--body-weight);

    line-height:2;

    color:var(--text-light);

    max-width:576px;

}

.alpha-hero-subtitle a{

    font-family: var(font-body);

    font-weight: var(--font-weight-strong);

    color:var(--primary);

}


.alpha-hero-features{

    display:flex;

    flex-wrap:nowrap;

    gap:14px;

    margin-top:35px;

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

    font-size:calc(var(--font-size-tag)/1.2);

}


.feature-chip{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 14px;

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

    background:var(--surface);

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

    color:var(--text);

    transition:var(--transition);

}


.feature-chip:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}


.feature-chip i{

    color:var(--primary);

}


.alpha-hero-buttons{

    display:flex;

    gap:18px;

    margin-top:42px;

}


/*======================================
            BUTTONS
            (دقیقاً مطابق hero.css — چون این فایل
            جدا از hero.css لود می‌شه، این بخش کپی شده.
            پیشنهاد می‌شه در آینده به یک فایل مشترک
            buttons.css منتقل بشه تا تکراری نباشه)
======================================*/


/*======================================
            IMAGE
======================================*/

.alpha-hero-image{

    display:flex;

    justify-content:center;

}


.image-card{

    width:100%;

    max-width:576px;

    aspect-ratio:1;

    background:linear-gradient(180deg,var(--surface),var(--background));

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

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

    box-shadow:var(--shadow-lg);

    position:relative;

    overflow:hidden;

}


.image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*======================================
            RESPONSIVE
======================================*/

@media(max-width:992px){

.alpha-hero-grid{

grid-template-columns:1fr;

gap:50px;

}

.alpha-hero-content{

text-align:center;

}

.alpha-hero-subtitle{

margin:auto;

}

.alpha-hero-features{

justify-content:center;

}

.alpha-hero-buttons{

justify-content:center;

}

.alpha-hero-image{

order:-1;

}

}


@media(max-width:768px){

.alpha-hero{

padding-top:120px;
padding-bottom:80px;

}

.alpha-hero-content h1{

font-size:2.5rem;

}

.image-card{

max-width:380px;

}

}


@media(max-width:576px){

.alpha-hero-features{

flex-direction:column;

}

.alpha-hero-buttons{

flex-direction:column;

}

}