/* ==========================================================
   AISUBIO LAYOUT
   Version : 4.0 Production
   Part 1A
========================================================== */

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

.container{

    width:min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline:auto;

    position:relative;

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

}

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

main{

    position:relative;

    display:block;

    overflow-x:hidden;

    overflow-y:visible;

    isolation:isolate;

}

/* ==========================================================
   SECTION
========================================================== */

section{

    position:relative;

    padding-block:var(--section-space);

    overflow:hidden;

    scroll-margin-top:calc(
        var(--header-height) + 30px
    );

}

section>*{

    position:relative;

    z-index:2;

}

/* ==========================================================
   SECTION BACKGROUND
========================================================== */

section::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

}

/* ==========================================================
   SECTION HEADER
========================================================== */

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:32px;

    margin-bottom:64px;

}

.section-header>div:first-child{

    flex:1;

    min-width:280px;

}

/* ==========================================================
   HEADING
========================================================== */

.section-header h2{

    margin-top:18px;

    font-size:clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight:800;

    line-height:1.08;

    letter-spacing:-0.04em;

    color:var(--text-primary);

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.section-header p{

    margin-top:18px;

    max-width:680px;

    font-size:1.06rem;

    line-height:1.85;

    color:var(--text-secondary);

}

/* ==========================================================
   BADGE
========================================================== */

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:var(--color-primary-soft);

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.02em;

    border:1px solid
    rgba(37,99,235,.08);

    transition:
        background .25s ease,
        transform .25s ease;

}

.section-badge:hover{

    transform:translateY(-2px);

    background:
    rgba(37,99,235,.12);

}

.section-badge svg{

    flex-shrink:0;

}

/* ==========================================================
   OFFER COUNTER
========================================================== */

.offer-counter{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 22px;

    border-radius:18px;

    background:var(--bg-card);

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

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

    color:var(--text-secondary);

    font-weight:600;

}

.offer-counter strong{

    color:var(--color-primary);

    font-size:1.1rem;

}

/* ==========================================================
   SEARCH RESULT
========================================================== */

.search-result-count{

    margin-bottom:32px;

    color:var(--text-muted);

    font-size:.95rem;

}

/* ==========================================================
   HEADER
========================================================== */

.header{

    position:fixed;

    inset:0 0 auto;

    width:100%;

    height:var(--header-height);

    display:flex;

    align-items:center;

    z-index:var(--z-header);

    background:transparent;

    border-bottom:1px solid transparent;

    transition:
        height .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;

}

.header.scrolled{

    height:var(--header-height-scrolled);

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-color:var(--border-color);

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

}

/* ==========================================================
   BODY OFFSET
========================================================== */

body{

    padding-top:var(--header-height);

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:32px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:inline-flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

    text-decoration:none;

    user-select:none;

}

.logo-icon{

    width:54px;

    height:54px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:var(--gradient-hero);

    color:#fff;

    font-size:1.15rem;

    font-weight:800;

    letter-spacing:.05em;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.logo:hover .logo-icon{

    transform:
        translateY(-3px)
        rotate(-6deg)
        scale(1.05);

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

}

.logo-text{

    font-size:1.45rem;

    font-weight:800;

    letter-spacing:-.03em;

    color:var(--text-primary);

    transition:color .25s ease;

}

.logo:hover .logo-text{

    color:var(--color-primary);

}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.desktop-nav{

    flex:1;

    display:flex;

    justify-content:center;

}

.desktop-nav ul{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

    padding:0;

    list-style:none;

}

.desktop-nav a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding-inline:20px;

    border-radius:999px;

    color:var(--text-secondary);

    font-weight:600;

    text-decoration:none;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;

}

.desktop-nav a:hover{

    color:var(--color-primary);

    background:var(--color-primary-soft);

    transform:translateY(-2px);

}

.desktop-nav a.active{

    color:var(--color-primary);

    background:rgba(37,99,235,.08);

}

.desktop-nav a.active::after{

    content:"";

    position:absolute;

    left:20px;

    right:20px;

    bottom:8px;

    height:3px;

    border-radius:999px;

    background:var(--color-primary);

}

/* ==========================================================
   NAVBAR ACTIONS
========================================================== */

.navbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

/* ==========================================================
   ICON BUTTONS
========================================================== */

.theme-toggle,
.mobile-menu-btn{

    width:52px;

    height:52px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:var(--bg-card);

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

    color:var(--text-primary);

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

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.theme-toggle:hover,
.mobile-menu-btn:hover{

    transform:translateY(-3px);

    border-color:rgba(37,99,235,.18);

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

}

.theme-toggle:active,
.mobile-menu-btn:active{

    transform:scale(.96);

}

.theme-toggle:focus-visible,
.mobile-menu-btn:focus-visible{

    outline:3px solid rgba(37,99,235,.18);

    outline-offset:3px;

}

/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.mobile-menu-btn{

    display:none;

}

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

.hero-section{

    position:relative;

    overflow:hidden;

    padding-top:140px;

    padding-bottom:120px;

    background:
        radial-gradient(circle at top left,
        rgba(37,99,235,.08),
        transparent 40%),

        radial-gradient(circle at top right,
        rgba(124,58,237,.08),
        transparent 42%),

        linear-gradient(
        180deg,
        transparent,
        rgba(37,99,235,.02)
        ),

        var(--bg-body);

}

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

.hero-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-180px;

    border-radius:50%;

    background:rgba(37,99,235,.10);

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(124,58,237,.08);

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

}

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

.hero-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(360px,.9fr);

    align-items:center;

    gap:80px;

}

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

.hero-left{

    position:relative;

    z-index:2;

    max-width:680px;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:var(--bg-glass);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid
    rgba(37,99,235,.12);

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

    color:var(--color-primary);

    font-size:.92rem;

    font-weight:700;

}

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

.hero-left h1{

    margin-top:34px;

    font-size:clamp(
        3rem,
        7vw,
        5.3rem
    );

    font-weight:800;

    line-height:1.02;

    letter-spacing:-.05em;

    color:var(--text-primary);

}

.hero-left h1 span{

    display:block;

    background:var(--gradient-hero);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

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

.hero-left p{

    margin-top:28px;

    max-width:620px;

    font-size:1.08rem;

    line-height:1.85;

    color:var(--text-secondary);

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:46px;

}

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

.hero-stats{

    display:flex;

    flex-wrap:wrap;

    gap:36px;

    margin-top:52px;

}

.hero-stat{

    min-width:130px;

}

.hero-stat h3{

    font-size:2.2rem;

    font-weight:800;

    color:var(--color-primary);

    line-height:1;

}

.hero-stat p{

    margin-top:10px;

    font-size:.95rem;

    color:var(--text-muted);

}

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

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================================
   FLOATING SHAPES
========================================================== */

.hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.hero-shape.one{

    width:18px;

    height:18px;

    top:60px;

    right:30px;

    background:#2563eb;

    animation:floating 6s ease-in-out infinite;

}

.hero-shape.two{

    width:12px;

    height:12px;

    bottom:80px;

    left:10px;

    background:#7c3aed;

    animation:floating 5s ease-in-out infinite reverse;

}

.hero-shape.three{

    width:10px;

    height:10px;

    bottom:180px;

    right:40px;

    background:#06b6d4;

    animation:floating 4s ease-in-out infinite;

}

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

.hero-card{

    position:relative;

    width:100%;

    max-width:520px;

    padding:42px;

    border-radius:32px;

    overflow:hidden;

    isolation:isolate;

    background:var(--gradient-card);

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

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    will-change:transform;

    transform:translateZ(0);

}

.hero-card:hover{

    transform:
        translateY(-10px)
        translateZ(0);

    border-color:
        rgba(37,99,235,.16);

    box-shadow:
        var(--shadow-2xl);

}

/* ==========================================================
   HERO CARD GLOW
========================================================== */

.hero-card::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:
        rgba(37,99,235,.12);

    filter:blur(90px);

    pointer-events:none;

    z-index:0;

}

.hero-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    bottom:-120px;

    left:-100px;

    border-radius:50%;

    background:
        rgba(124,58,237,.10);

    filter:blur(90px);

    pointer-events:none;

    z-index:0;

}

.hero-card>*{

    position:relative;

    z-index:2;

}

/* ==========================================================
   REWARD BADGE
========================================================== */

.reward-badge{

    position:absolute;

    top:24px;

    left:24px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:999px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.45);

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

    font-size:.9rem;

    font-weight:700;

    color:var(--text-primary);

}

/* ==========================================================
   GIFT BOX
========================================================== */

.gift-box{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:70px;

}

.gift-box img{

    width:100%;

    max-width:330px;

    object-fit:contain;

    animation:floating 5s ease-in-out infinite;

    transition:
        transform .5s ease,
        filter .5s ease;

    will-change:transform;

}

.hero-card:hover .gift-box img{

    transform:
        scale(1.05);

    filter:
        drop-shadow(
            0 28px 40px
            rgba(37,99,235,.18)
        );

}

/* ==========================================================
   GIFT RING
========================================================== */

.gift-box::before{

    content:"";

    position:absolute;

    width:290px;

    height:290px;

    border-radius:50%;

    border:2px dashed
        rgba(37,99,235,.10);

    animation:
        spin 40s linear infinite;

    pointer-events:none;

}

/* ==========================================================
   COUNTDOWN CARD
========================================================== */

.countdown-card{

    margin-top:46px;

    padding:24px;

    border-radius:22px;

    background:var(--bg-glass);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid
        rgba(37,99,235,.08);

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

}

.countdown-title{

    margin-bottom:16px;

    text-align:center;

    font-size:.95rem;

    font-weight:600;

    color:var(--text-secondary);

}

/* ==========================================================
   COUNTDOWN
========================================================== */

.countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:2rem;

    font-weight:800;

    letter-spacing:.06em;

    color:var(--color-primary);

}

.countdown span{

    min-width:52px;

    display:grid;

    place-items:center;

    padding:8px;

    border-radius:14px;

    background:rgba(37,99,235,.06);

}

.countdown-separator{

    opacity:.45;

}

/* ==========================================================
   SEARCH SECTION
========================================================== */

.search-section{

    position:relative;

    margin-top:-55px;

    padding-top:0;

    z-index:20;

}

/* ==========================================================
   SEARCH WRAPPER
========================================================== */

.search-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        220px
        220px;

    gap:20px;

    align-items:center;

    padding:28px;

    border-radius:30px;

    background:var(--bg-glass);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid
        rgba(255,255,255,.35);

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.search-wrapper:hover{

    transform:translateY(-3px);

    box-shadow:
        0 32px 80px
        rgba(15,23,42,.12);

}

/* ==========================================================
   SEARCH BOX
========================================================== */

.search-box{

    position:relative;

    width:100%;

}

/* ==========================================================
   SEARCH ICON
========================================================== */

.search-box::before{

    content:"";

    position:absolute;

    left:22px;

    top:50%;

    width:20px;

    height:20px;

    transform:translateY(-50%);

    opacity:.55;

    background:
        url("../icons/search.svg")
        center/contain
        no-repeat;

    pointer-events:none;

}

/* ==========================================================
   SEARCH INPUT
========================================================== */

.search-box input{

    width:100%;

    height:66px;

    padding-left:60px;

    padding-right:160px;

    border-radius:18px;

    background:var(--bg-card);

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

    color:var(--text-primary);

    font-size:1rem;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.search-box input::placeholder{

    color:var(--text-muted);

}

.search-box input:hover{

    border-color:
        rgba(37,99,235,.18);

}

.search-box input:focus{

    border-color:
        var(--border-focus);

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.12);

}

/* ==========================================================
   SEARCH BUTTON
========================================================== */

.search-box button{

    position:absolute;

    top:8px;

    right:8px;

    height:50px;

    padding:0 26px;

    border:none;

    border-radius:14px;

    background:var(--gradient-hero);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;

}

.search-box button:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

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

}

.search-box button:active{

    transform:translateY(0);

}

/* ==========================================================
   FILTERS
========================================================== */

.search-wrapper select{

    width:100%;

    height:66px;

    padding:0 18px;

    border-radius:18px;

    background:var(--bg-card);

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

    color:var(--text-primary);

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.search-wrapper select:hover{

    border-color:
        rgba(37,99,235,.18);

}

.search-wrapper select:focus{

    border-color:
        var(--border-focus);

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.10);

}

/* ==========================================================
   OFFER SECTION
========================================================== */

.offers-section{

    position:relative;

    padding-top:110px;

}

.offers-section::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:700px;

    height:700px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(37,99,235,.05);

    filter:blur(120px);

    pointer-events:none;

}

/* ==========================================================
   OFFER SLIDER
========================================================== */

.offer-slider{

    position:relative;

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:340px;

    gap:28px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    padding:8px 4px 18px;

    scrollbar-width:none;

}

.offer-slider::-webkit-scrollbar{

    display:none;

}

/* ==========================================================
   SLIDER ITEM
========================================================== */

.offer-slider>.offer-card{

    scroll-snap-align:start;

}

/* ==========================================================
   SECTION NAVIGATION
========================================================== */

.section-navigation{

    display:flex;

    align-items:center;

    gap:14px;

}

/* ==========================================================
   SLIDER BUTTON
========================================================== */

.slider-button{

    width:56px;

    height:56px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:var(--bg-card);

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

    color:var(--text-primary);

    cursor:pointer;

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

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.slider-button:hover{

    transform:translateY(-3px);

    background:var(--gradient-hero);

    color:#fff;

    border-color:transparent;

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

}

.slider-button:active{

    transform:scale(.95);

}

.slider-button:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* ==========================================================
   OFFER GRID
========================================================== */

.offers-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(320px,1fr)
        );

    gap:32px;

    align-items:stretch;

}

/* ==========================================================
   GRID CARD
========================================================== */

.offers-grid>.offer-card{

    width:100%;

    min-height:100%;

}

/* ==========================================================
   OFFER WRAPPER FIX
========================================================== */

.offer-slider,
.offers-grid{

    align-items:stretch;

}

/* ==========================================================
   LOADING SKELETON
========================================================== */

.skeleton-card{

    overflow:hidden;

    border-radius:30px;

    background:var(--bg-card);

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

}

.skeleton{

    position:relative;

    overflow:hidden;

    background:#e5e7eb;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

    animation:skeleton-loading 1.4s infinite;

}

.skeleton-image{

    width:100%;

    aspect-ratio:16/10;

}

.skeleton-title{

    width:70%;

    height:24px;

    margin:24px;

    border-radius:8px;

}

.skeleton-text{

    width:88%;

    height:14px;

    margin:0 24px 14px;

    border-radius:6px;

}

.skeleton-price{

    width:120px;

    height:28px;

    margin:20px 24px 30px;

    border-radius:8px;

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state{

    grid-column:1/-1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    padding:90px 30px;

    text-align:center;

}

.empty-state svg{

    opacity:.45;

}

.empty-state h3{

    font-size:1.5rem;

    font-weight:800;

    color:var(--text-primary);

}

.empty-state p{

    max-width:420px;

    color:var(--text-secondary);

    line-height:1.8;

}

/* ==========================================================
   SKELETON ANIMATION
========================================================== */

@keyframes skeleton-loading{

    to{

        transform:translateX(100%);

    }

}

/* ==========================================================
   OFFER CARD
========================================================== */

.offer-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:30px;

    background:var(--gradient-card);

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

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

    isolation:isolate;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.offer-card:hover{

    transform:translateY(-10px);

    border-color:rgba(37,99,235,.20);

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

}

/* ==========================================================
   SHINE EFFECT
========================================================== */

.offer-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.08) 42%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,.08) 58%,
        transparent 100%
    );

    transform:translateX(-160%);

    transition:transform .9s ease;

    pointer-events:none;

    z-index:3;

}

.offer-card:hover::before{

    transform:translateX(160%);

}

/* ==========================================================
   DECORATION
========================================================== */

.offer-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(37,99,235,.05);

    filter:blur(70px);

    pointer-events:none;

}

.offer-card>*{

    position:relative;

    z-index:2;

}

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

.offer-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

    background:var(--color-primary-soft);

}

.offer-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .7s ease,
        filter .7s ease;

}

.offer-card:hover .offer-image img{

    transform:scale(1.08);

    filter:saturate(1.05);

}

.offer-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(15,23,42,.22),
        transparent 45%
    );

    opacity:0;

    transition:opacity .35s ease;

}

.offer-card:hover .offer-image::after{

    opacity:1;

}

/* ==========================================================
   FEATURED BADGE
========================================================== */

.offer-badge{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 16px;

    border-radius:999px;

    background:var(--gradient-hero);

    color:#fff;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.03em;

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

    z-index:5;

}

/* ==========================================================
   FAVORITE BUTTON
========================================================== */

.favorite-btn{

    position:absolute;

    top:18px;

    right:18px;

    width:46px;

    height:46px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.40);

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

    cursor:pointer;

    transition:
        transform .25s,
        background .25s,
        color .25s;

}

.favorite-btn:hover{

    transform:scale(1.08);

}

.favorite-btn.active{

    background:var(--color-danger-soft);

    color:var(--color-danger);

}

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

.offer-content{

    display:flex;

    flex-direction:column;

    flex:1;

    gap:18px;

    padding:28px;

}

/* ==========================================================
   CATEGORY
========================================================== */

.offer-category{

    display:inline-flex;

    width:max-content;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(37,99,235,.08);

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:700;

}

/* ==========================================================
   TITLE
========================================================== */

.offer-title{

    font-size:1.35rem;

    font-weight:800;

    line-height:1.35;

    color:var(--text-primary);

    transition:color .25s ease;

}

.offer-card:hover .offer-title{

    color:var(--color-primary);

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.offer-description{

    flex:1;

    color:var(--text-secondary);

    font-size:.96rem;

    line-height:1.8;

}

/* ==========================================================
   REWARD BOX
========================================================== */

.offer-reward{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-radius:18px;

    background:rgba(37,99,235,.05);

    border:1px solid rgba(37,99,235,.08);

}

.reward-label{

    display:block;

    font-size:.82rem;

    color:var(--text-muted);

    font-weight:600;

}

.reward-value{

    font-size:1.55rem;

    font-weight:800;

    color:var(--color-success);

    transition:transform .25s ease;

}

.offer-card:hover .reward-value{

    transform:scale(1.05);

}

/* ==========================================================
   OFFER META
========================================================== */

.offer-meta{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px;

}

.offer-meta-item{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:14px;

    border-radius:14px;

    background:rgba(37,99,235,.04);

    border:1px solid rgba(37,99,235,.08);

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;

}

.offer-card:hover .offer-meta-item{

    transform:translateY(-2px);

    background:rgba(37,99,235,.06);

    border-color:rgba(37,99,235,.12);

}

.offer-meta-item strong{

    font-size:.76rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    color:var(--text-muted);

}

.offer-meta-item span{

    font-size:.93rem;

    font-weight:600;

    color:var(--text-primary);

    line-height:1.5;

}

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

.offer-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:auto;

    padding-top:8px;

}

/* ==========================================================
   USERS
========================================================== */

.offer-users{

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

    font-size:.92rem;

    font-weight:600;

    color:var(--text-muted);

}

/* ==========================================================
   ACTION BUTTON
========================================================== */

.offer-action{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:140px;

    height:52px;

    padding:0 26px;

    border:none;

    border-radius:16px;

    background:var(--gradient-hero);

    color:#fff;

    font-size:.95rem;

    font-weight:700;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;

}

.offer-action:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

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

}

.offer-action:active{

    transform:scale(.98);

}

/* ==========================================================
   BUTTON SHINE
========================================================== */

.offer-action::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.40),

        transparent

    );

    transform:translateX(-130%);

    transition:transform .8s ease;

}

.offer-action:hover::before{

    transform:translateX(130%);

}

/* ==========================================================
   MICRO ANIMATIONS
========================================================== */

.offer-card:hover .offer-category{

    background:rgba(37,99,235,.14);

}

.offer-card:hover .reward-value{

    transform:scale(1.05);

}

.offer-card:hover .offer-users{

    color:var(--color-primary);

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.offer-action:focus-visible,

.favorite-btn:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:3px;

}

.offer-card:focus-within{

    border-color:rgba(37,99,235,.20);

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

}

/* ==========================================================
   LAST ELEMENT SPACING
========================================================== */

.offer-content>*:last-child{

    margin-bottom:0;

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.offer-card,

.offer-image img,

.offer-action,

.favorite-btn{

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

    transform:translateZ(0);

}

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

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

    .offer-card,

    .offer-image img,

    .offer-action,

    .favorite-btn{

        transition:none !important;

        animation:none !important;

    }

}