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

.hero{

    position:relative;

    overflow:hidden;

    min-height:90vh;

    display:flex;

    align-items:center;

    padding:var(--space-3xl) 0;

    background:
        linear-gradient(
            135deg,
            var(--background) 0%,
            hsl(45 80% 96%) 50%,
            hsl(183 40% 94%) 100%
        );

}

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

.hero__background{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.hero__pattern{

    position:absolute;

    inset:0;

    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(212,175,55,.035) 0px,
            rgba(212,175,55,.035) 2px,
            transparent 2px,
            transparent 34px
        );

    opacity:1;

}

.hero__blur{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

}

.hero__blur--large{

    width:420px;

    height:420px;

    right:60px;

    top:120px;

    background:rgba(0,110,100,.08);

}

.hero__circle{

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.20);

    right:160px;

    top:180px;

}

.hero__diamond{

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(212,175,55,.10);

    transform:rotate(45deg);

    right:220px;

    top:340px;

}

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

.hero__grid{

    position:relative;

    z-index:2;

    display:grid;

    align-items:center;

    gap:5rem;

}

@media(min-width:1024px){

.hero__grid{

    grid-template-columns:1fr 1fr;

}

}

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

.hero__content{

    max-width:620px;

}

.hero__title{

    margin-top:18px;

    margin-bottom:24px;

    font-size:clamp(3.5rem,7vw,6rem);

    line-height:.95;

    font-weight:600;

    letter-spacing:-2px;

}

.hero__title span{

    display:block;

    color:var(--primary);

}

.hero__description{

    max-width:540px;

    font-size:1.2rem;

    line-height:1.8;

    color:var(--muted-foreground);

}

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

.hero__buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:48px;

}

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

.hero__stats{

    display:flex;

    gap:56px;

    margin-top:56px;

    padding-top:36px;

    border-top:2px solid var(--border);

}

.hero__stat strong{

    display:block;

    font-size:2rem;

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

}

.hero__stat span{

    color:var(--muted-foreground);

}

/* ==========================================================
   VISUAL
   ========================================================== */

.hero__visual{

    position:relative;

    display:none;

    min-height:620px;

}

@media(min-width:1024px){

.hero__visual{

    display:block;

}

}

.hero-card{

     position:absolute;

    width:280px;

    height:380px;

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

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

    transition:.35s ease;

}

.hero-card:hover{

    transform:translateY(-8px);

}

.hero-card--left{

      left:70px;

    top:10px;

    transform:rotate(-6deg);

    background:var(--surface);

}

.hero-card--right{

    left:185px;

    top:115px;

    transform:rotate(4deg);

    background:var(--primary);

    color:var(--primary-foreground);

}

.hero-card__content{

    position:absolute;

    left:20px;

    right:20px;

    bottom:20px;

    padding:20px;

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

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

    backdrop-filter:blur(10px);

}

.hero-card--right .hero-card__content{

    background:rgba(0,0,0,.18);

}

.hero-card h3{

    margin-top:10px;

    font-size:1.5rem;

}

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

@media(max-width:1023px){

.hero{

    min-height:auto;

    padding-top:72px;

    padding-bottom:96px;

}

.hero__title{

    font-size:clamp(2.6rem,10vw,4rem);

}

.hero__stats{

    gap:2rem;

}

}

@media(max-width:767px){

.hero{

    text-align:center;

}

.hero__content{

    max-width:640px;

}

.hero__buttons{

    justify-content:center;

}

.hero__stats{

    justify-content:center;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.hero-card{

animation:heroFloat 7s ease-in-out infinite;

}

.hero-card--right{

animation-delay:1.5s;

}

}