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

.gf-hero{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    min-height: 85vh;
    padding: 80px 30px;
    overflow: hidden;
}

.gf-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(212,175,55,.12), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(212,175,55,.08), transparent 40%);
    z-index:0;
}

.gf-hero-content,
.gf-hero-visual{

position:relative;
z-index:2;

}

.gf-hero-content{

flex:0 0 48%;

}

.gf-hero-visual{

flex:0 0 52%;

display:flex;

justify-content:center;

align-items:flex-end;

}

/* Badge */

.gf-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    background:#fff8e6;
    border:1px solid rgba(212,175,55,.25);
    border-radius:999px;
    color:#8a6a00;
    font-size:14px;
    font-weight:600;
    margin-bottom:28px;
}

/* Heading */

.gf-title{
    font-size:64px;
    line-height:1.08;
    font-weight:800;
    color:#111;
    margin-bottom:28px;
    letter-spacing:-2px;
}

.gf-title span{
    color:var(--color-primary);
}

/* Description */

.gf-description{
    font-size:19px;
    color:var(--color-text);
    max-width:560px;
    margin-bottom:40px;
    line-height:1.9;
}



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

.gf-buttons{
    display:flex;
    gap:18px;
    margin:45px 0;
    flex-wrap:wrap;
}

.gf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 38px;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    transition:.35s ease;
}

.gf-btn.primary{
    position:relative;
    overflow:hidden;
    background:#D4AF37;
    color:#fff;
    box-shadow:0 15px 40px rgba(212,175,55,.35);
}

.gf-btn.primary:hover{
    transform:translateY(-4px);
}

.gf-btn.secondary{
    border:2px solid #D4AF37;
    color:#111;
    background:#fff;
}

.gf-btn.secondary:hover{

background:#111;

color:#fff;

border-color:#111;

}

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

.gf-stats{

    display:flex;

    gap:18px;

    margin-top:40px;

}

.gf-stat{

    flex:1;

    background:#fff;

    border:1px solid rgba(212,175,55,.18);

    border-radius:18px;

    padding:22px;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    cursor:pointer;

}

.gf-stat strong{

    display:block;

    font-size:46px;

    color:#D4AF37;

    margin-bottom:6px;

}

.gf-stat span{

    color:#666;

    font-size:15px;

}



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

.gf-hero-visual{

position:relative;

width:100%;

height:760px;

}

/* Gold Glow */

.gf-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(212,175,55,.35),
        rgba(212,175,55,.10),
        transparent 70%);

    filter:blur(25px);

    bottom:120px;

    z-index:1;

}

/* ==========================================
   GOLD STROKE
========================================== */

.gf-stroke{

    position:absolute;

    width:480px;

    height:480px;

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

    border-radius:52% 48% 65% 35% / 45% 60% 40% 55%;

    transform:rotate(-18deg);

    z-index:2;

    opacity:.9;

    animation:strokeRotate 22s linear infinite;

}

.gf-stroke::before{

    content:"";

    position:absolute;

    inset:35px;

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

    border-radius:inherit;

}

.gf-stroke::after{

    content:"";

    position:absolute;

    inset:70px;

    border:1px solid rgba(212,175,55,.05);

    border-radius:inherit;

}

@keyframes strokeRotate{

0%{

transform:rotate(-18deg);

}

100%{

transform:rotate(342deg);

}

}

/* Model */

.gf-model{

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

    position:relative;

    z-index:3;

    max-height:760px;

    width:auto;

    object-fit:contain;

    filter:drop-shadow(0 40px 60px rgba(0,0,0,.18));

    transition:.5s ease;

}

.gf-model:hover{

    transform:translateY(-10px);

}

/* Floating Badges */

.gf-floating{

    position:absolute;

    background:#fff;

    padding:14px 22px;

    border-radius:999px;

    font-weight:600;

    font-size:15px;

    box-shadow:0 20px 50px rgba(0,0,0,.10);

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

    z-index:5;

}

.badge-1{

    top:140px;

    left:20px;

}

.badge-2{

    top:330px;

    right:20px;

}

.badge-3{

    bottom:170px;

    left:60px;

}


/* ==========================================================
   GLORE HERO PREMIUM ENHANCEMENTS
   Paste below existing hero.css
========================================================== */

/* Premium Background */

.gf-hero{

    background:
        radial-gradient(circle at 78% 35%,
        rgba(212,175,55,.14),
        transparent 30%),

        radial-gradient(circle at 12% 18%,
        rgba(212,175,55,.06),
        transparent 22%),

        linear-gradient(
        180deg,
        #ffffff 0%,
        #fffdf9 45%,
        #fff8ef 100%);

}

/* Animated Gold Glow */

.gf-glow{

    width:620px;
    height:620px;

    background:
    radial-gradient(circle,

    rgba(212,175,55,.45) 0%,

    rgba(212,175,55,.18) 30%,

    rgba(212,175,55,.08) 55%,

    transparent 75%);

    filter:blur(45px);

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

}

@keyframes gfGlow{

0%{

transform:scale(1);

opacity:.65;

}

50%{

transform:scale(1.08);

opacity:1;

}

100%{

transform:scale(1);

opacity:.65;

}

}

/* Luxury Badge */

.gf-badge{

    backdrop-filter:blur(12px);

    background:rgba(255,248,230,.82);

    box-shadow:

    0 18px 35px rgba(212,175,55,.08);

}

/* Premium Heading */

.gf-title{

    font-size:70px;

    line-height:1.02;

    font-weight:900;

    letter-spacing:-3px;

}

/* Premium Buttons */

.gf-btn{

    position:relative;

    overflow:hidden;

    transition:.35s ease;

}

.gf-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent);

transition:.7s;

}

.gf-btn:hover::before{

left:160%;

}

.gf-btn.primary:hover{

transform:translateY(-6px);

box-shadow:

0 28px 60px rgba(212,175,55,.35);

}

.gf-btn.secondary:hover{

transform:translateY(-6px);

}

/* Stats */

.gf-stat{

transition:.35s;

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

backdrop-filter:blur(14px);

}

.gf-stat:hover{

transform:translateY(-8px);

box-shadow:

0 30px 70px rgba(0,0,0,.10);

}

/* Model */

.gf-model{

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

}

.gf-model:hover{

transform:

translateY(-12px)

scale(1.02);

}

@keyframes gfModelFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* Floating Cards */

.gf-floating{

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

backdrop-filter:blur(18px);

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

box-shadow:

0 20px 60px rgba(0,0,0,.10);

transition:.35s;

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

}

.badge-2{

animation-delay:.6s;

}

.badge-3{

animation-delay:1.2s;

}

.gf-floating:hover{

transform:translateY(-8px);

box-shadow:

0 30px 70px rgba(0,0,0,.15);

}

@keyframes gfFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/* Slightly Better Image */

.gf-model{

filter:

drop-shadow(0 35px 60px rgba(0,0,0,.20));

}



.gf-hero::after{

content:"";

position:absolute;

width:380px;

height:380px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.10),

transparent 70%);

filter:blur(60px);

pointer-events:none;

left:50%;

top:50%;

transform:translate(-50%,-50%);

opacity:.8;

animation:heroLight 8s ease-in-out infinite;

}

@keyframes heroLight{

0%{

transform:

translate(-50%,-50%)

scale(1);

}

50%{

transform:

translate(-50%,-50%)

scale(1.15);

}

100%{

transform:

translate(-50%,-50%)

scale(1);

}

}



.gf-btn:active{

transform:scale(.96);

}



.gf-hero::after{

content:"";

position:absolute;

right:-150px;

top:50%;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.08),

transparent 70%);

filter:blur(50px);

transform:translateY(-50%);

pointer-events:none;

z-index:0;

}



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

.gf-title{

    animation:heroTitle .9s ease forwards;

}

.gf-title span{

    display:inline-block;

    position:relative;

    animation:goldFloat 3s ease-in-out infinite;

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes goldFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}



/*==============================
RINGS
==============================*/

.gf-ring{

position:absolute;

border:1px solid rgba(212,175,55,.18);

border-radius:50%;

animation:ringRotate 18s linear infinite;

}

.ring1{

width:320px;

height:320px;

}

.ring2{

width:420px;

height:420px;

animation-duration:26s;

}

.ring3{

width:540px;

height:540px;

animation-duration:36s;

}

@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



.gf-particles{

position:absolute;

width:100%;

height:100%;

pointer-events:none;

}

.gf-particles span{

position:absolute;

width:7px;

height:7px;

background:#D4AF37;

border-radius:50%;

opacity:.5;

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

}

.gf-particles span:nth-child(1){

top:20%;

left:40%;

}

.gf-particles span:nth-child(2){

top:70%;

left:30%;

}

.gf-particles span:nth-child(3){

top:35%;

right:25%;

}

.gf-particles span:nth-child(4){

bottom:20%;

right:35%;

}

.gf-particles span:nth-child(5){

top:55%;

left:65%;

}

.gf-particles span:nth-child(6){

top:15%;

right:15%;

}

@keyframes particleFloat{

0%{

transform:translateY(0);

opacity:.2;

}

50%{

transform:translateY(-18px);

opacity:1;

}

100%{

transform:translateY(0);

opacity:.2;

}

}



.gf-scroll{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

margin-top:30px;

font-size:14px;

color:#666;

animation:scrollBounce 2s infinite;

}

.gf-scroll{

cursor:pointer;

}

.gf-scroll::before{

content:"↓";

font-size:24px;

color:#D4AF37;

}

@keyframes scrollBounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

100%{

transform:translateY(0);

}

}



.gf-btn.primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transform:skewX(-25deg);

animation:buttonShine 4s infinite;

}

@keyframes buttonShine{

0%{

left:-120%;

}

100%{

left:180%;

}

}



.badge-2{

animation-delay:1s;

}

.badge-3{

animation-delay:2s;

}

@keyframes badgeFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}



@keyframes modelFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



/* ==========================
   Glow Animation
========================== */

.gf-glow{

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

}

@keyframes glowPulse{

0%{

transform:scale(1);
opacity:.75;

}

50%{

transform:scale(1.08);
opacity:1;

}

100%{

transform:scale(1);
opacity:.75;

}

}



/* ==========================================
   HERO ENTRANCE ANIMATION
========================================== */

.gf-badge,
.gf-title,
.gf-description,
.gf-buttons,
.gf-stats,
.gf-model,
.gf-floating{

    opacity:0;

}

/* Badge */

.gf-badge{

    animation:fadeUp .8s ease forwards;
    animation-delay:.15s;

}

/* Heading */

.gf-title{

    animation:fadeUp .9s ease forwards;
    animation-delay:.35s;

}

/* Description */

.gf-description{

    animation:fadeUp .9s ease forwards;
    animation-delay:.55s;

}

/* Buttons */

.gf-buttons{

    animation:fadeUp .9s ease forwards;
    animation-delay:.75s;

}

/* Stats */

.gf-stats{

    animation:fadeUp 1s ease forwards;
    animation-delay:.95s;

}

/* Model */

.gf-model{

    animation:modelReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:.45s;

}

/* Floating Cards */

.badge-1{

    animation:fadeRight .8s ease forwards;
    animation-delay:1s;

}

.badge-2{

    animation:fadeRight .8s ease forwards;
    animation-delay:1.2s;

}

.badge-3{

    animation:fadeRight .8s ease forwards;
    animation-delay:1.4s;

}

/* ---------------- */

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(35px);

}

to{

opacity:1;
transform:translateY(0);

}

}

@keyframes fadeRight{

from{

opacity:0;
transform:translateX(40px);

}

to{

opacity:1;
transform:translateX(0);

}

}

@keyframes modelReveal{

from{

opacity:0;
transform:translateY(70px) scale(.92);

}

to{

opacity:1;
transform:translateY(0) scale(1);

}

}



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

@media (max-width:767px){

/* HERO */

.gf-hero{

display:grid;

grid-template-columns:52% 48%;

align-items:center;

gap:20px;

padding:30px 18px;

min-height:100vh;

}

/* LEFT */

.gf-hero-left,
.gf-hero-content{

width:100%;

}

/* RIGHT */

.gf-hero-right{

width:100%;

display:flex;

justify-content:center;

align-items:center;

}

/* BADGE */

.gf-badge{

    display:inline-flex;

    font-size:13px;

    padding:10px 18px;

    margin-bottom:18px;

}

/* TITLE */

.gf-title{

    font-size:52px;

    line-height:1.05;

    letter-spacing:-1px;

    margin-bottom:18px;

}

/* DESCRIPTION */

.gf-description{

    max-width:100%;

    font-size:17px;

    line-height:1.8;

    margin:0 auto 22px;

}

/* BUTTONS */

.gf-buttons{

    display:flex;

    flex-direction:row;

    justify-content:center;

    gap:14px;

    margin:25px 0;

}

.gf-btn{

    width:auto;

    min-width:160px;

    padding:16px 24px;

}

/* IMAGE */

.gf-hero-visual{

height:420px;

}

.gf-model{

max-height:430px;

}

.gf-model{

    max-height:470px;

}

.gf-glow{

    width:360px;

    height:360px;

}

.gf-stroke{

    display:none;

}

/* BADGES */

.gf-floating{

    font-size:13px;

    padding:10px 18px;

}

.badge-1{

    top:40px;
    left:10px;

}

.badge-2{

    top:190px;
    right:10px;

}

.badge-3{

    bottom:45px;
    left:50%;
    transform:translateX(-50%);

}

/* STATS */

.gf-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

}

.gf-stat{

    padding:16px 10px;

    border-radius:16px;

}

.gf-stat strong{

    font-size:30px;

}

.gf-stat span{

    font-size:13px;

    line-height:1.4;

}

}