/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Poppins:wght@300;400;500;600;700&display=swap');
html{

scroll-behavior:smooth;

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

body{

    background:#090909;
    color:white;

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}

a{

    text-decoration:none;

}
 
.bg-glow{

    position:fixed;

    width:100%;

    height:100%;

    background:
    radial-gradient(circle at top,#222,#090909);

    z-index:-10;

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

.navbar{

    width:100%;

    position:fixed;

    top:0;

    left:0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 8%;

    backdrop-filter:blur(18px);

    background:rgba(10,10,10,.35);

    border-bottom:1px solid rgba(255,255,255,.06);

    z-index:999;

}
.navbar.scrolled{

background:rgba(8,8,8,.78);

backdrop-filter:blur(28px);

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

box-shadow:0 8px 30px rgba(0,0,0,.35);

transition:.35s;

}
.logo{

    font-family:'Cinzel',serif;

    font-size:30px;

    font-weight:700;

    color:#D4AF37;

    letter-spacing:4px;

    cursor:pointer;

}

.navbar nav{

    display:flex;

    gap:35px;

}
@media (max-width:768px){

.navbar{

padding:18px 20px;

}

.logo{

font-size:22px;

letter-spacing:2px;

}
.logo:hover{

color:#FFD86B;

text-shadow:0 0 18px rgba(212,175,55,.55);

transition:.35s;

}
.navbar nav{

display:none;

}

}
.navbar nav a{

    color:#ffffff;

    font-size:15px;

    font-weight:500;

    transition:.35s;

}

.navbar nav a:hover{

    color:#D4AF37;

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

.hero{

    min-height:100vh;

    display:flex;
overflow:hidden;
    position:relative;
    justify-content:center;

    align-items:center;
flex-direction:column;
    text-align:center;

    padding:120px 8% 20px;
background:
radial-gradient(circle at top right,
rgba(109,40,217,.18) 0%,
transparent 30%),

radial-gradient(circle at bottom left,
rgba(15,23,42,.45) 0%,
transparent 40%),

linear-gradient(135deg,
#0B0B0B 0%,
#111111 45%,
#0F172A 100%);
}

.hero-content{

    max-width:560px;
position:relative;
z-index:2;
    margin-bottom:50px;
}

.premium-tag{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

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

backdrop-filter:blur(12px);

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

border-radius:50px;

color:#E8C878;

font-size:13px;

font-weight:600;

letter-spacing:.8px;

box-shadow:0 8px 25px rgba(212,175,55,.10);

margin-bottom:28px;

}
.premium-tag:hover{

transform:scale(1.05);

box-shadow:0 0 20px rgba(212,175,55,.25);

transition:.35s;

cursor:default;

}
.hero h1{

font-family:'Cinzel',serif;

font-size:58px;

font-weight:700;

line-height:1.08;

letter-spacing:1px;

margin-bottom:22px;

color:#F5F5F2;

text-shadow:0 0 18px rgba(255,255,255,.08);

}
.hero h1{

animation:fadeUp 1s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}
.hero h1 span{

display:block;

margin-top:10px;

background:linear-gradient(
90deg,
#D4AF37,
#E8C878,
#F5F5F2);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:0 0 22px rgba(212,175,55,.35);

}
.hero p{

font-size:18px;

line-height:1.8;

color:rgba(245,245,242,.82);

max-width:500px;

margin-bottom:35px;

}
.hero-line{

width:140px;

height:2px;

margin:30px 0;

background:linear-gradient(

90deg,

#D4AF37,

#E8C878,

transparent);

border-radius:20px;

}
.hero-buttons{

display:flex;

gap:18px;

align-items:center;

flex-wrap:wrap;

margin-top:38px;

}

.btn-primary,
.btn-secondary{

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;
letter-spacing:.5px;
}

.btn-primary{

padding:16px 34px;

background:linear-gradient(135deg,#D4AF37,#E8C878);

color:#111;
cursor:pointer;
border:none;

border-radius:50px;

font-size:15px;

font-weight:600;

letter-spacing:.4px;

box-shadow:0 10px 30px rgba(212,175,55,.25);

transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

}
.btn-primary{

box-shadow:0 0 25px rgba(212,175,55,.35);

}

.btn-primary:hover{

box-shadow:0 0 45px rgba(212,175,55,.6);

}
.btn-secondary{

padding:16px 34px;

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

backdrop-filter:blur(12px);

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

color:#F5F5F2;
cursor:pointer;
border-radius:50px;

font-size:15px;

font-weight:600;

letter-spacing:.4px;

transition:.35s;

}

.btn-secondary:hover{

    background:#D4AF37;

    color:#111;
box-shadow:0 0 35px rgba(212,175,55,.35);
transform:translateY(-4px);
}
/* =========================
   LUXURY GLOW
========================= */

.hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

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

    filter:blur(40px);

    top:50%;

    left:50%;

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

    z-index:-1;
pointer-events:none;
}
@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-content{

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

}
/*==============================
Floating Luxury Lights
===============================*/

.gold-circle{

position:absolute;

top:-120px;

right:-80px;

width:420px;

height:420px;

background:radial-gradient(circle,
rgba(212,175,55,.28) 0%,
rgba(232,200,120,.10) 35%,
transparent 75%);

filter:blur(35px);

border-radius:50%;

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

}

.gold-circle2{

position:absolute;

bottom:-120px;

left:-100px;

width:320px;

height:320px;

background:radial-gradient(circle,
rgba(109,40,217,.20) 0%,
transparent 70%);

filter:blur(40px);

border-radius:50%;

animation:floatGlow2 10s ease-in-out infinite;

}

@keyframes move1{

50%{

transform:translateY(80px);

}

}

@keyframes move2{

50%{

transform:translateY(-80px);

}

}
/*==========================
Hero Background Effects
==========================*/

.hero{

    position:relative;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    z-index:-1;
pointer-events:none;
}

.gold-circle{

    position:absolute;

    width:450px;

    height:450px;

    background:#D4AF37;

    border-radius:50%;

    filter:blur(180px);

    opacity:.14;

    left:-120px;

    top:100px;

    animation:floatGlow1 10s ease-in-out infinite;

}

.gold-circle2{

    position:absolute;

    width:350px;

    height:350px;

    background:#D4AF37;

    border-radius:50%;

    filter:blur(160px);

    opacity:.10;

    right:-100px;

    bottom:80px;

    animation:floatGlow2 12s ease-in-out infinite;

}

.grid-lines{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

    background-size:60px 60px;

    mask-image:radial-gradient(circle at center, black 45%, transparent 95%);

}

@keyframes floatGlow1{

    50%{

        transform:translateY(80px);

    }

}

@keyframes floatGlow2{

    50%{

        transform:translateY(-80px);

    }

}
/*==========================
Scroll Indicator
==========================*/

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:28px;

    height:48px;

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

    border-radius:30px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:8px;

}

.scroll-indicator span{

    width:6px;

    height:6px;

    background:#D4AF37;

    border-radius:50%;

    animation:scrollMove 1.8s infinite;

}

@keyframes scrollMove{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}
/*==============================
COLLECTION
===============================*/

.collection{

position:relative;

padding:120px 8%;

background:linear-gradient(
180deg,
#0B0B0B 0%,
#10131A 50%,
#0B0B0B 100%);

overflow:hidden;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:#D4AF37;

    letter-spacing:3px;

    font-size:13px;

}

.section-title h2{

    font-size:48px;

font-family:'Cinzel',serif;

font-weight:700;

line-height:1.2;

color:#F5F5F2;

margin-bottom:18px;

}

.section-title p{

    font-size:17px;

line-height:1.8;

color:rgba(245,245,242,.75);

max-width:650px;

margin:auto;

}

.collection-grid{

    display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:35px;

margin-top:70px;
}
/*==============================
PRODUCT CARD
==============================*/

.product-card{

position:relative;

isolation:isolate;

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

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

backdrop-filter:blur(18px);

border-radius:28px;

padding:30px;

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

overflow:hidden;

cursor:pointer;

min-height:560px;

box-shadow:0 15px 40px rgba(0,0,0,.35);
will-change:transform;
}
.product-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border-radius:28px;

padding:1px;

background:linear-gradient(
135deg,
rgba(212,175,55,.35),
transparent,
rgba(212,175,55,.18)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

opacity:.35;

transition:.35s;

}
.product-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

transform:skewX(-25deg);

transition:.8s;

pointer-events:none;

}
.product-card:hover{

transform:translateY(-12px) scale(1.02);

border-color:#D4AF37;

box-shadow:
0 25px 60px rgba(0,0,0,.45),
0 0 35px rgba(212,175,55,.20),
0 0 80px rgba(212,175,55,.08);
}

.product-card:hover::before{

left:160%;

}
.phone-preview{

transform:rotate(-3deg) scale(1.03);
font-size:72px;

margin:15px 0 18px;
}
.product-badge{

display:inline-flex;

align-items:center;

gap:6px;

background:linear-gradient(
135deg,
#D4AF37,
#F0D878);

color:#111;

padding:8px 18px;

border-radius:30px;

font-size:12px;

font-weight:700;

letter-spacing:.8px;

margin-bottom:25px;

text-transform:uppercase;

box-shadow:0 8px 25px rgba(212,175,55,.28);

}
.product-card:hover .product-badge{

transform:scale(1.06);

box-shadow:0 0 30px rgba(212,175,55,.45);

transition:.35s;

}
.phone-preview{
width:165px;

height:320px;

margin:20px auto;

display:flex;

justify-content:center;

align-items:center;

font-size:68px;

background:linear-gradient(
145deg,
#1A1A1A,
#090909);

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

border-radius:42px;

box-shadow:
0 0 35px rgba(212,175,55,.12),
0 18px 45px rgba(0,0,0,.35),
inset 0 0 20px rgba(255,255,255,.03);

overflow:hidden;

position:relative;

transition:.45s;

}
.phone-preview::before{

content:"";

position:absolute;

top:12px;

left:50%;

transform:translateX(-50%);

width:72px;

height:7px;

background:#242424;

border-radius:30px;

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

}
    .phone-preview:hover{

transform:translateY(-8px) scale(1.04);

box-shadow:
0 0 45px rgba(212,175,55,.22),
0 25px 55px rgba(0,0,0,.45);

    }
.product-card h3{

font-family:'Cinzel',serif;

font-size:28px;

font-weight:700;

color:#F5F5F2;

margin:18px 0 12px;

letter-spacing:.5px;

transition:.35s;

}
.product-card:hover h3{

color:#D4AF37;

transition:.35s;

}
.product-card p{

color:#CFCFCF;

font-size:15px;

line-height:1.9;

font-weight:300;

margin-bottom:22px;

transition:.35s;

}
.product-card:hover p{

color:#F5F5F2;

}
.product-buttons{

    display:flex;

    gap:15px;
align-items:center;
}

.demo-btn,

.order-btn{

    flex:1;

    text-align:center;

    padding:12px 10px;
font-size:14px;
    letter-spacing:.4px;
    border-radius:10px;

    font-weight:600;

    transition:.35s;

}

.demo-btn{

background:linear-gradient(
135deg,
#D4AF37,
#F0D878);

color:#111;

font-weight:700;

letter-spacing:.5px;

border:none;

border-radius:12px;

box-shadow:
0 10px 28px rgba(212,175,55,.25);

transition:.4s ease;

}
.demo-btn:hover{

transform:translateY(-4px) scale(1.03);

background:linear-gradient(
135deg,
#E8C878,
#FFD86B);

box-shadow:
0 18px 40px rgba(212,175,55,.35),
0 0 35px rgba(212,175,55,.25);

}
.order-btn{

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

background:linear-gradient(
135deg,
rgba(212,175,55,.12),
rgba(212,175,55,.04));

color:#F5F5F2;

box-shadow:0 10px 30px rgba(212,175,55,.18);

letter-spacing:.5px;

font-weight:600;

backdrop-filter:blur(10px);

}
.order-btn:hover{

background:linear-gradient(
135deg,
#D4AF37,
#F0D878);

color:#111;

transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(212,175,55,.35),
0 0 35px rgba(212,175,55,.28);

}
.demo-btn:hover{

background:#f2c94c;

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(212,175,55,.25);

}
/*==============================
COMING SOON
==============================*/

.coming-soon{

    opacity:.75;

}

.coming-soon .phone-preview{

    filter:grayscale(100%);

}

.coming-soon .order-btn{

    background:#222;

    color:#888;

    border:1px solid #444;

    cursor:not-allowed;

}
/*==============================
Luxury Divider
==============================*/

.lux-divider{

    padding:20px 8% 60px;

}

.divider-line{

    width:100%;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(212,175,55,.8),
        transparent
    );

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

@media (max-width:768px){

.hero{
    padding:90px 20px 60px;
    text-align:center;
}

.hero h1{
    font-size:42px;
    line-height:1.1;
}

.hero p{
    font-size:16px;
    line-height:1.8;
    max-width:100%;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-buttons a{
    width:100%;
    text-align:center;
}

.btn-primary,
.btn-secondary{
    padding:18px;
    font-size:16px;
}

.collection{
    padding:70px 20px;
}

.collection-grid{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.product-card{
    width:100%;
    border-radius:22px;
    padding:24px;
}

.phone-preview{
    height:260px;
}

.section-title h2{
    font-size:34px;
}

.section-title p{
    font-size:15px;
}

}
/*==============================
WHY GIFTEVER
==============================*/

.features{

padding:120px 8%;

position:relative;

overflow:hidden;

background:linear-gradient(
180deg,
#0B0B0B 0%,
#111827 50%,
#0B0B0B 100%);

}
.features::before{

content:"";

position:absolute;

top:-180px;

right:-150px;

width:500px;

height:500px;

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

filter:blur(120px);

z-index:0;

pointer-events:none;

}
    .features::after{

content:"";

position:absolute;

bottom:-180px;

left:-150px;

width:450px;

height:450px;

background:radial-gradient(circle,
rgba(109,40,217,.10),
transparent 70%);

filter:blur(120px);

z-index:0;

pointer-events:none;

    }
.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:32px;

margin-top:50px;

}

.feature-card{

position:relative;

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

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

border-radius:28px;

padding:34px 28px;

text-align:center;

backdrop-filter:blur(16px);

overflow:hidden;

transition:.45s ease;

box-shadow:0 15px 40px rgba(0,0,0,.30);

}
.feature-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent);

transform:skewX(-25deg);

transition:.8s;

pointer-events:none;

}
    .feature-card:hover::before{

left:150%;

    }
.feature-card:hover{

transform:translateY(-12px) scale(1.03);

border-color:#D4AF37;

box-shadow:
0 18px 45px rgba(0,0,0,.35),
0 0 28px rgba(212,175,55,.18);

}
.feature-card:hover .feature-icon{

transform:translateY(-6px) scale(1.08) rotate(8deg);

background:linear-gradient(
135deg,
#D4AF37,
#F0D878);

color:#111;

box-shadow:
0 0 40px rgba(212,175,55,.45);

}
.feature-icon{

width:88px;

height:88px;

margin:0 auto 24px;

display:flex;

justify-content:center;

align-items:center;

font-size:36px;

background:linear-gradient(
135deg,
rgba(212,175,55,.18),
rgba(212,175,55,.06));

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

border-radius:50%;

box-shadow:
0 0 25px rgba(212,175,55,.15),
inset 0 0 18px rgba(255,255,255,.03);

transition:.4s ease;

}

.feature-card h3{

font-family:'Cinzel',serif;

font-size:24px;

font-weight:700;

color:#F5F5F2;

margin-bottom:14px;

letter-spacing:.5px;

transition:.35s;

}

.feature-card:hover h3{

color:#D4AF37;

}

.feature-card p{

font-size:15px;

line-height:1.9;

color:rgba(245,245,242,.78);

font-weight:300;

transition:.35s;

}
.feature-card:hover p{

color:#FFFFFF;

}
.fade-up{

opacity:0;

transform:translateY(70px);

transition:

opacity .9s ease,

transform .9s cubic-bezier(.22,.61,.36,1);

will-change:opacity,transform;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}
/*==============================
HERO PHONE
==============================*/

.hero-phone{
position:relative;
display:flex;

justify-content:center;

align-items:center;

margin-top:20px;
animation:heroPhoneFloat 5s ease-in-out infinite;
}

.hero-phone-frame{

width:290px;

height:590px;

border-radius:38px;

padding:12px;

background:linear-gradient(145deg,#2A2A2A,#0B0B0B);

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

box-shadow:

0 25px 60px rgba(0,0,0,.55),

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

position:relative;

overflow:hidden;

transition:.5s ease;
}
.hero-phone-frame::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:skewX(-20deg);

transition:1s;

}
.hero-phone:hover .hero-phone-frame::before{

left:160%;

}
.hero-phone-frame:hover{

transform:scale(1.03);

box-shadow:

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

inset 0 0 18px rgba(255,255,255,.05);

    }
.hero-phone-screen{

width:100%;

height:100%;

border-radius:28px;

background:linear-gradient(180deg,#101010,#0B0B0B);

display:flex;

justify-content:center;

align-items:center;

color:#D4AF37;

font-size:15px;

letter-spacing:1px;
position:relative;

overflow:hidden;
}
.hero-phone-screen span{

position:relative;

z-index:2;

font-weight:600;

letter-spacing:1px;

}
.hero-phone-screen::before{

content:"";

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:radial-gradient(

circle,

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

transparent 70%
pointer-events:none;
);

animation:screenGlow 6s linear infinite;

}
@keyframes heroPhoneFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}
@keyframes screenGlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}
/*==============================
PHONE PREVIEW PLACEHOLDER
==============================*/

.phone-preview-content{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
}
.preview-header{

width:70%;

height:12px;

margin:0 auto 20px;

border-radius:30px;

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

}

.preview-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    margin: 0;
    background: #000;
}

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

box-shadow:
inset 0 0 20px rgba(212,175,55,.08);
}

.preview-text{

width:80%;

height:10px;

margin:0 auto 16px;

border-radius:30px;

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

}

.preview-button{

transition:.35s;

}

.preview-button:hover{

transform:scale(1.05);

box-shadow:0 0 30px rgba(212,175,55,.45);

}
/*==============================
PRICE
==============================*/

.product-price{

font-family:'Cinzel',serif;

font-size:36px;

font-weight:700;

background:linear-gradient(
135deg,
#D4AF37,
#FFE08A,
#D4AF37);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin:12px 0 8px;

letter-spacing:1px;

text-shadow:0 0 18px rgba(212,175,55,.28);

}
.delivery-time{

font-size:13px;

font-weight:500;

color:#CFCFCF;

margin-bottom:22px;

letter-spacing:.6px;

display:flex;

justify-content:center;

align-items:center;

gap:6px;

}
.product-card:hover .product-price{

filter:drop-shadow(0 0 10px rgba(212,175,55,.45));

transition:.35s;

}
/*==============================
LAUNCH OFFER
==============================*/

.offer-tag{

display:inline-flex;

align-items:center;

justify-content:center;

gap:6px;

margin:16px 0;

padding:10px 18px;

background:linear-gradient(
135deg,
rgba(212,175,55,.18),
rgba(212,175,55,.08));

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

border-radius:50px;

color:#FFD86B;

font-size:12px;

font-weight:700;

letter-spacing:.6px;

box-shadow:0 8px 25px rgba(212,175,55,.15);

backdrop-filter:blur(10px);

transition:.35s;

}
    .offer-tag:hover{

transform:scale(1.05);

box-shadow:
0 0 30px rgba(212,175,55,.30);

border-color:#D4AF37;

    }
/*==============================
OFFER STRIP
==============================*/

.offer-strip{

padding:18px 20px;

text-align:center;

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

border-top:1px solid rgba(212,175,55,.15);

border-bottom:1px solid rgba(212,175,55,.15);

}

.offer-strip p{

font-size:15px;

color:#f2f2f2;

letter-spacing:.4px;

}

.offer-strip strong{

color:#FFD86B;

}

.offer-strip span{

color:#D4AF37;

font-weight:700;

}
/*==============================
PHONE TOP
==============================*/

.preview-top{
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.preview-camera{

width:10px;

height:10px;

border-radius:50%;

background:#2b2b2b;

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

}

.preview-speaker{

width:60px;

height:6px;

border-radius:30px;

background:#242424;

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

}
/*==============================
PHONE TEXT STYLE
==============================*/

.preview-header{

display:flex;

justify-content:center;

align-items:center;

font-size:16px;

font-weight:700;

font-family:'Cinzel',serif;

color:#D4AF37;

}

.preview-text{

display:flex;

justify-content:center;

align-items:center;

font-size:11px;

color:#d5d5d5;

text-align:center;

padding:0 8px;

}

.preview-button{

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:600;

color:#111;

}
/*==============================
MINI BANNER
==============================*/

.mini-banner{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

border-radius:18px;

background:

linear-gradient(

135deg,

#1b1b1b,

#111,

#242424

);

border:1px solid rgba(212,175,55,.15);
box-shadow:inset 0 0 25px rgba(212,175,55,.08);
   position:relative;
    overflow:hidden;
}
.mini-banner::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:50%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:skewX(-25deg);

animation:bannerShine 4s linear infinite;

}
.mini-banner span{

font-family:'Cinzel',serif;

font-size:15px;

color:#D4AF37;

letter-spacing:1px;

text-align:center;

}
@keyframes bannerShine{

0%{

left:-120%;

}

100%{

left:170%;

}

    }
.features::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:70%;

height:1px;

background:linear-gradient(

to right,

transparent,

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

transparent

);

}
/*==============================
TESTIMONIALS
==============================*/

.testimonials{

padding:120px 8%;

position:relative;

overflow:hidden;

background:linear-gradient(
180deg,
#0B0B0B 0%,
#0F172A 50%,
#0B0B0B 100%);

}
.testimonials::before{

content:"";

position:absolute;
top:-180px;
left:-180px;    
width:500px;

height:500px;

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

border-radius:50%;

filter:blur(120px);

opacity:.08;

left:-150px;

bottom:-120px;
pointer-events:none;
z-index:-0;

}
.testimonials::after{

content:"";

position:absolute;

right:-120px;

top:-80px;

width:260px;

height:260px;

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

border-radius:50%;

filter:blur(120px);

z-index:-1;

}
.testimonial-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:32px;

margin-top:70px;

position:relative;

z-index:2;

}

.testimonial-card{

position:relative;

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

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

border-radius:28px;

padding:34px 28px;

backdrop-filter:blur(16px);

overflow:hidden;

transition:.45s ease;

box-shadow:0 15px 40px rgba(0,0,0,.30);

}
.testimonial-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent);

transform:skewX(-25deg);

transition:.8s;

pointer-events:none;

}
.testimonial-card:hover::before{

left:150%;

}
.testimonial-card:hover{

transform:translateY(-12px) scale(1.02);

border-color:#D4AF37;

box-shadow:
0 25px 60px rgba(0,0,0,.45),
0 0 35px rgba(212,175,55,.20);

}

.stars{

font-size:22px;

letter-spacing:4px;

color:#FFD86B;

margin-bottom:20px;

text-shadow:0 0 18px rgba(212,175,55,.35);

transition:.35s;

}
.testimonial-card:hover .stars{

transform:scale(1.08);

text-shadow:0 0 30px rgba(212,175,55,.55);

}
.testimonial-card p{

font-size:16px;

line-height:1.9;

color:rgba(245,245,242,.82);

font-weight:300;

font-style:italic;

transition:.35s;

}

.testimonial-card h4{

margin-top:22px;

font-family:'Cinzel',serif;

font-size:18px;

font-weight:700;

color:#D4AF37;

letter-spacing:.6px;

transition:.35s;

}
.testimonial-card:hover h4{

color:#FFD86B;

text-shadow:0 0 18px rgba(212,175,55,.35);

}
/*==============================
FAQ SECTION
==============================*/

.faq{

padding:120px 8%;

position:relative;

overflow:hidden;

background:linear-gradient(
180deg,
#0B0B0B 0%,
#111827 50%,
#0B0B0B 100%);

}

.faq::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:480px;

height:480px;

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

filter:blur(120px);

pointer-events:none;

z-index:0;

}

.faq-box{

position:relative;

z-index:2;

max-width:900px;

margin:60px auto 0;

display:flex;

flex-direction:column;

gap:22px;

}
.faq-item{

position:relative;

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

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

border-radius:24px;

padding:28px 30px;

backdrop-filter:blur(16px);

overflow:hidden;

transition:.4s ease;

box-shadow:0 15px 40px rgba(0,0,0,.28);

}
.faq-item::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent);

transform:skewX(-25deg);

transition:.8s;

pointer-events:none;

}
.faq-item:hover{

transform:translateY(-8px);

border-color:#D4AF37;

box-shadow:
0 25px 60px rgba(0,0,0,.40),
0 0 30px rgba(212,175,55,.18);

}

.faq-item:hover::before{

left:150%;

}
.faq-item h3{

font-family:'Cinzel',serif;

font-size:22px;

font-weight:700;

color:#F5F5F2;

margin-bottom:14px;

letter-spacing:.4px;

transition:.35s;

}

.faq-item:hover h3{

color:#D4AF37;

text-shadow:0 0 18px rgba(212,175,55,.25);

}

.faq-item p{

font-size:15px;

line-height:1.9;

color:rgba(245,245,242,.78);

font-weight:300;

}
.faq-item:hover h3{

color:#D4AF37;

text-shadow:0 0 18px rgba(212,175,55,.25);

}
.faq-item p{

font-size:15px;

line-height:1.9;

color:rgba(245,245,242,.78);

font-weight:300;

}
/*==============================
FOOTER
==============================*/

.footer{

position:relative;

padding:90px 8% 45px;

text-align:center;

background:linear-gradient(
180deg,
#080808 0%,
#0F172A 100%);

border-top:1px solid rgba(212,175,55,.12);

overflow:hidden;

}
.footer::before{

content:"";

position:absolute;

top:-180px;

left:50%;

transform:translateX(-50%);

width:520px;

height:520px;

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

filter:blur(130px);

pointer-events:none;

z-index:0;

}
.footer>*{

position:relative;

z-index:2;

}
.footer-logo{

font-family:'Cinzel',serif;

font-size:38px;

font-weight:700;

letter-spacing:5px;

color:#D4AF37;

margin-bottom:18px;

text-shadow:0 0 20px rgba(212,175,55,.25);

transition:.35s;

}
.footer-logo:hover{

color:#FFD86B;

text-shadow:0 0 35px rgba(212,175,55,.50);

}
.footer-tagline{

max-width:650px;

margin:0 auto 35px;

font-size:16px;

line-height:1.9;

color:rgba(245,245,242,.75);

font-weight:300;

}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

gap:35px;

flex-wrap:wrap;

margin-bottom:35px;

}
.footer-links a{

color:rgba(245,245,242,.82);

font-size:15px;

font-weight:500;

letter-spacing:.5px;

transition:.35s ease;

position:relative;

}
.footer-links a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#D4AF37;

transition:.35s ease;

}

.footer-links a:hover{

color:#D4AF37;

}

.footer-links a:hover::after{

width:100%;

}
.footer-links a:hover{

color:#D4AF37;

}

.footer-copy{

padding-top:28px;

border-top:1px solid rgba(212,175,55,.10);

font-size:14px;

color:rgba(245,245,242,.55);

letter-spacing:.5px;

line-height:1.8;

}
.footer-copy span{

color:#D4AF37;

font-weight:600;

}
/*==============================
PROMO POPUP
==============================*/

.promo-popup{

position:fixed;

inset:0;

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

backdrop-filter:blur(8px);

display:none;

justify-content:center;

align-items:center;

padding:20px;

z-index:9999;

}

.promo-box{

width:100%;

max-width:420px;

background:#111;

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

border-radius:24px;

padding:30px;

text-align:center;

box-shadow:0 0 40px rgba(212,175,55,.18);

}

.promo-box h2{

font-family:'Cinzel',serif;

color:#D4AF37;

margin-bottom:12px;

}

.promo-box p{

color:#cfcfcf;

margin-bottom:22px;

line-height:1.7;

}

.promo-box input{

width:100%;

padding:14px;

border-radius:12px;

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

background:#1a1a1a;

color:#fff;

outline:none;

margin-bottom:18px;

}

.promo-box button{

width:100%;

padding:14px;

margin-top:12px;

border:none;

border-radius:50px;

background:#D4AF37;

color:#111;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.promo-box button:hover{

transform:translateY(-2px);

box-shadow:0 0 25px rgba(212,175,55,.35);

}

#promoResult{

margin-top:15px;

font-weight:600;

color:#D4AF37;

}
.close-popup{

float:right;

font-size:28px;

color:#D4AF37;

cursor:pointer;

transition:.3s;

}

.close-popup:hover{

transform:scale(1.15);

color:#FFD86B;

}
.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(212,175,55,.35);

}

.btn-secondary:hover{

transform:translateY(-4px);

border-color:#D4AF37;

box-shadow:0 12px 30px rgba(212,175,55,.20);

}
@keyframes floatGlow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

}

@keyframes floatGlow2{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(20px);

}

                     }
.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(212,175,55,.40);

}

.btn-secondary:hover{

transform:translateY(-4px);

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

border-color:#D4AF37;

box-shadow:0 18px 40px rgba(212,175,55,.18);

                }
.hero-phone-frame:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:

0 35px 80px rgba(0,0,0,.65),

0 0 45px rgba(212,175,55,.30);

}
.hero-phone::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(circle,

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

rgba(109,40,217,.14) 45%,

transparent 75%);

filter:blur(40px);

z-index:-1;

animation:heroAura 8s ease-in-out infinite;
pointer-events:none;
}

@keyframes heroAura{

0%,100%{

transform:scale(1);

opacity:.9;

}

50%{

transform:scale(1.08);

opacity:1;

}

}
.hero-phone-screen::after{

content:"";

position:absolute;

top:-20%;

left:-60%;

width:40%;

height:140%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.10),

transparent);

transform:rotate(25deg);

animation:screenShine 5s linear infinite;
pointer-events:none;
}

@keyframes screenShine{

0%{

left:-60%;

}

100%{

left:140%;

}

}
.hero-content{

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

}

@keyframes heroFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

    }
.product-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent);

transform:skewX(-25deg);

transition:.8s;

}
@media (max-width:768px){

.footer{

padding:70px 20px 35px;

}

.footer-logo{

font-size:30px;

letter-spacing:3px;

}

.footer-links{

gap:20px;

}

.footer-tagline{

font-size:15px;

}

.footer-copy{

font-size:13px;

}

}
/*==============================
PREMIUM ANIMATIONS
==============================*/

.section-title{

transition:all .8s ease;

}

.section-title:hover h2{

color:#FFD86B;

transition:.35s;

    }
/*==============================
FOOTER UPGRADE
==============================*/

.footer{

position:relative;

overflow:hidden;

background:linear-gradient(
180deg,
#090909,
#0F172A);

padding:80px 8% 35px;

border-top:1px solid rgba(212,175,55,.15);

}

.footer::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:320px;

height:320px;

background:#D4AF37;

border-radius:50%;

filter:blur(170px);

opacity:.08;

z-index:0;

    }
.footer-content{

position:relative;

z-index:2;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:45px;

}

.footer h3{

font-family:'Cinzel',serif;

font-size:24px;

color:#D4AF37;

margin-bottom:18px;

letter-spacing:.5px;

}

.footer p,

.footer a{

color:rgba(245,245,242,.75);

font-size:15px;

line-height:1.9;

text-decoration:none;

transition:.35s;

}

.footer a:hover{

color:#FFD86B;

padding-left:6px;

    }
.footer-bottom{

position:relative;

z-index:2;

margin-top:55px;

padding-top:25px;

border-top:1px solid rgba(212,175,55,.12);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom p{

font-size:14px;

color:rgba(245,245,242,.6);

}

.footer-social{

display:flex;

gap:15px;

}

.footer-social a{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

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

transition:.35s;

}

.footer-social a:hover{

background:#D4AF37;

color:#111;

transform:translateY(-4px);

box-shadow:0 0 25px rgba(212,175,55,.35);

}
/*==============================
TESTIMONIALS
==============================*/

.testimonials{

position:relative;

padding:120px 8%;

background:linear-gradient(
180deg,
#0B0B0B,
#111827,
#0B0B0B);

overflow:hidden;

}

.testimonials::before{

content:"";

position:absolute;

top:-180px;

left:-180px;

width:420px;

height:420px;

background:#D4AF37;

border-radius:50%;

filter:blur(180px);

opacity:.08;

z-index:0;

    }
.testimonial-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-top:60px;

}

.testimonial-card{

position:relative;

padding:32px;

border-radius:28px;

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

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

backdrop-filter:blur(18px);

overflow:hidden;

transition:.45s ease;

box-shadow:0 15px 40px rgba(0,0,0,.30);

}
.testimonial-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent);

transform:skewX(-25deg);

transition:.8s;

pointer-events:none;

}

.testimonial-card:hover::before{

left:160%;

}

.testimonial-card:hover{

transform:translateY(-12px) scale(1.02);

border-color:#D4AF37;

box-shadow:
0 22px 55px rgba(0,0,0,.40),
0 0 35px rgba(212,175,55,.18);

    }
.testimonial-avatar{

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

background:linear-gradient(135deg,#D4AF37,#F0D878);

color:#111;

font-size:28px;

font-weight:700;

box-shadow:0 0 25px rgba(212,175,55,.30);

}

.testimonial-stars{

color:#D4AF37;

font-size:18px;

letter-spacing:3px;

margin-bottom:18px;

}

.testimonial-text{

font-size:15px;

line-height:1.9;

color:rgba(245,245,242,.82);

font-style:italic;

margin-bottom:22px;

}

.testimonial-name{

font-family:'Cinzel',serif;

font-size:20px;

color:#F5F5F2;

margin-bottom:4px;

}

.testimonial-role{

font-size:13px;

color:rgba(245,245,242,.55);

letter-spacing:.5px;

}
.testimonial-card:hover .testimonial-avatar{

transform:scale(1.08) rotate(6deg);

box-shadow:
0 0 40px rgba(212,175,55,.45);

transition:.35s;

}

.testimonial-card:hover .testimonial-name{

color:#D4AF37;

transition:.35s;

}

.testimonial-card:hover .testimonial-text{

color:#FFFFFF;

}

.testimonial-card:hover .testimonial-stars{

text-shadow:0 0 15px rgba(212,175,55,.55);

}

.testimonial-card{

will-change:transform;
 
}
/* ==========================
   Hero Live Demo Video
========================== */

.hero-demo-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}