/* ===================================
GOOGLE FONT
=================================== */

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

html{
scroll-behavior:smooth;
}

body{

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

background:#081423;

color:#fff;

overflow-x:hidden;

line-height:1.7;

}

.container{

width:90%;

max-width:1300px;

margin:auto;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

transition:.4s;

background:rgba(8,20,35,.75);

backdrop-filter:blur(20px);

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

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:60px;

}

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav a{

text-decoration:none;

color:#fff;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#ffb100;

}

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

.btn-primary{

display:inline-block;

padding:18px 42px;

border-radius:60px;

background:linear-gradient(135deg,#ffb100,#ff6500);

font-weight:700;

color:#fff;

text-decoration:none;

box-shadow:0 15px 40px rgba(255,136,0,.35);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 25px 50px rgba(255,136,0,.45);

}

.btn-secondary{

display:inline-block;

padding:18px 42px;

border-radius:60px;

border:2px solid rgba(255,255,255,.25);

text-decoration:none;

color:#fff;

backdrop-filter:blur(20px);

margin-left:18px;

transition:.35s;

}

.btn-secondary:hover{

background:#fff;

color:#081423;

}

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

.hero{

padding:170px 0 100px;

position:relative;

overflow:hidden;

background:

radial-gradient(circle at top right,#0d5eff55,transparent 40%),

radial-gradient(circle at bottom left,#ff7b0035,transparent 35%),

#081423;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

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

.rating{

display:inline-block;

padding:10px 22px;

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

border-radius:40px;

margin-bottom:30px;

font-size:15px;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

display:block;

color:#ffb100;

}

.hero p{

font-size:20px;

opacity:.88;

max-width:620px;

margin-bottom:45px;

}

.hero-buttons{

margin-bottom:45px;

}

/* ===================================
FEATURES
=================================== */

.feature-grid{

display:grid;

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

gap:22px;

}

.feature-card{

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

backdrop-filter:blur(20px);

padding:22px;

border-radius:20px;

display:flex;

align-items:center;

gap:15px;

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

transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

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

}

.feature-card img{

width:30px;

}

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

.hero-right{

position:relative;

text-align:center;

}

.glow{

position:absolute;

width:520px;

height:520px;

background:#0d6efd;

filter:blur(140px);

opacity:.35;

border-radius:50%;

left:50%;

top:50%;

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

}

.hero-product{

position:relative;

width:520px;

max-width:100%;

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

filter:drop-shadow(0 35px 60px rgba(0,0,0,.45));

}

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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

/* ======================================
   PREMIUM HERO BACKGROUND
====================================== */

.hero{
    position:relative;
    overflow:hidden;
}

/* Top Blue Glow */

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:radial-gradient(circle,#1b65ff55,transparent 70%);

top:-250px;

right:-180px;

filter:blur(80px);

z-index:0;

}

/* Bottom Orange Glow */

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

background:radial-gradient(circle,#ff8a0050,transparent 70%);

bottom:-180px;

left:-120px;

filter:blur(90px);

z-index:0;

}

.hero-shape{

position:absolute;

border-radius:50%;

filter:blur(2px);

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

opacity:.25;

}

.shape1{

width:90px;

height:90px;

background:#2f7cff;

top:18%;

left:6%;

}

.shape2{

width:55px;

height:55px;

background:#ff9a00;

top:70%;

right:12%;

}

.shape3{

width:30px;

height:30px;

background:#ffffff;

top:30%;

right:30%;

opacity:.15;

}

@keyframes floatShape{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

}
.hero-stats{

display:flex;

gap:40px;

margin:45px 0;

}

.hero-stats h3{

font-size:34px;

color:#ffb100;

margin-bottom:8px;

}

.hero-stats p{

font-size:15px;

opacity:.75;

}
.feature-card{

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

backdrop-filter:blur(20px);

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

border-radius:20px;

padding:22px;

transition:.35s;

box-shadow:

0 12px 35px rgba(0,0,0,.25);

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 60px rgba(0,0,0,.45);

border-color:#ffb100;

}
.hero-product{

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

filter:

drop-shadow(0 35px 70px rgba(0,0,0,.45));

transition:.4s;

}

.hero-product:hover{

transform:scale(1.03);

}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}