/* =====================================================
   HOPE HEAVEN
   GLOBAL STYLES
===================================================== */

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

:root{

--primary:#5B21B6;
--primary-light:#7C3AED;
--primary-dark:#3B0764;

--text:#24124D;
--text-light:#66627A;

--background:#FCFCFD;
--section:#F7F8FC;

--white:#FFFFFF;

--border:#ECECF5;

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

--radius:24px;

}

/* ===========================
   RESET
=========================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/* ===========================
   GLOBAL
=========================== */

.container{

width:min(1200px,90%);

margin:auto;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

section{

padding:120px 0;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(18px);

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

transition:.35s;

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

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

.logo{

font-size:2rem;

font-weight:800;

color:var(--primary);

letter-spacing:-1px;

}

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

nav{

display:flex;

gap:36px;

}

nav a{

font-weight:600;

color:var(--text);

transition:.3s;

position:relative;

}

nav a:hover{

color:var(--primary);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

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

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:90px;

padding-top:180px;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:90px;

align-items:center;

}

.hero-tag{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:5px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:22px;

}

.hero h1{

font-size:clamp(4rem,8vw,6.6rem);

line-height:.92;

letter-spacing:-3px;

font-weight:800;

color:var(--text);

margin-bottom:28px;

}

.hero p{

font-size:1.15rem;

line-height:1.9;

color:var(--text-light);

max-width:560px;

margin-bottom:45px;

}

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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:999px;

font-weight:700;

transition:.35s;

cursor:pointer;

}

.btn-primary{

background:linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

color:white;

box-shadow:
0 18px 40px rgba(109,40,217,.30);

}   /* <-- ADD THIS */

.btn:hover,
.product-btn:hover{

transform:translateY(-6px);

box-shadow:
0 25px 50px rgba(91,33,182,.35);

}
 /* <-- ADD THIS */

.btn:hover,
.product-btn:hover{

transform:translateY(-6px);

box-shadow:
0 25px 50px rgba(91,33,182,.35);

}

.btn-secondary{

background:white;

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

color:var(--primary);

font-weight:700;

}

.btn-secondary:hover{

background:var(--primary);

color:white;

}

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




.hero-card{

background:#ffffff;

border-radius:32px;

padding:40px;

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

border:1px solid #ECECF5;

display:flex;

justify-content:center;

align-items:center;

min-height:500px;

position:relative;

overflow:hidden;

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

transition:.35s;

}

@keyframes floatCard{

0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}

}

.hero-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
#5B21B6,
#7C3AED
);

}

.hero-card::after{

content:"";

position:absolute;

width:250px;

height:250px;

right:-80px;

bottom:-80px;

border-radius:50%;

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


}

.mockup{

height:420px;

display:flex;

align-items:center;

justify-content:center;

border-radius:26px;

background:

linear-gradient(
135deg,
#F7F2FF,
#E8DBFF
);

}

.mockup-screen{

width:80%;

height:80%;

border-radius:22px;

background:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

box-shadow:
0 20px 40px rgba(109,40,217,.15);

}


.mockup-screen h3{

font-size:42px;

font-weight:800;

color:#5B21B6;

margin-bottom:18px;

line-height:1.1;
}
.mockup-screen p{

font-size:18px;

line-height:1.8;

color:#66627A;

}

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


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

.explore{

padding:140px 0;

}

.section-tag{

display:block;

text-align:center;

font-size:13px;

font-weight:700;

letter-spacing:5px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:18px;

}

.section-title{

text-align:center;

font-size:clamp(2.5rem,5vw,4rem);

font-weight:800;

color:var(--text);

margin-bottom:20px;

}

.section-text{

max-width:720px;

margin:0 auto 70px;

text-align:center;

font-size:1.1rem;

line-height:1.9;

color:var(--text-light);

}

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

.explore-grid{

display:grid;

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

gap:35px;

}

/* =====================================================
   CARDS
===================================================== */

.card{

background:white;

padding:45px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

}

.card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 70px rgba(109,40,217,.18);

}

.card-icon{

width:78px;

height:78px;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

margin-bottom:28px;

background:

linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

color:white;

}

.card h3{

font-size:1.8rem;

margin-bottom:18px;

color:var(--text);

}

.card p{

line-height:1.8;

color:var(--text-light);

margin-bottom:25px;

}

.card a{

font-weight:700;

color:var(--primary);

transition:.3s;

}

.card a:hover{

letter-spacing:1px;

}

/* =====================================================
   FEATURED PRODUCTS
===================================================== */

.featured-products{

padding:140px 0;

}

.product-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}

.product-card{

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 70px rgba(109,40,217,.18);

}

.product-image{

height:240px;

display:flex;

justify-content:center;

align-items:center;

font-size:70px;

background:

linear-gradient(
135deg,
#EEE8FF,
#DDD0FF
);

}

.product-info{

padding:30px;

}

.product-info h3{

font-size:1.5rem;

margin-bottom:12px;

color:var(--text);

}

.product-info p{

line-height:1.8;

color:var(--text-light);

margin-bottom:20px;

}

.price{

display:block;

font-size:1.7rem;

font-weight:800;

color:var(--primary);

margin-bottom:25px;

}

.product-btn{

display:block;

text-align:center;

padding:16px;

border-radius:999px;

background:linear-gradient(
135deg,
#5B21B6,
#7C3AED
);

color:white;

font-weight:700;

transition:.3s;

box-shadow:
0 18px 40px rgba(91,33,182,.28);

}

.product-btn:hover{

transform:translateY(-4px);

box-shadow:
0 28px 55px rgba(91,33,182,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:
0 28px 55px rgba(91,33,182,.35);

}

/* =====================================================
   MISSION
===================================================== */

.mission{

padding:140px 0;

background:

linear-gradient(
180deg,
#FFFFFF,
#F8F4FF
);

position:relative;

overflow:hidden;

}

.mission::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

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

top:-280px;

right:-250px;

}

.mission-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:35px;

margin-top:70px;

}

.mission-card{

background:white;

padding:40px;

border-radius:30px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.mission-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:

linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

}

.mission-card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 70px rgba(109,40,217,.18);

}

.mission-card h3{

font-size:1.6rem;

margin-bottom:18px;

color:var(--text);

}

.mission-card p{

line-height:1.9;

color:var(--text-light);

}

/* =====================================================
   STORY
===================================================== */

.story{

padding:150px 0;

}

.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.story-content h2{

font-size:clamp(2.8rem,5vw,4rem);

margin-bottom:25px;

color:var(--text);

}

.story-content p{

font-size:1.08rem;

line-height:2;

color:var(--text-light);

margin-bottom:40px;

}

.story-card{

background:white;

padding:55px;

border-radius:32px;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

.story-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:

linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

}

.story-card h3{

font-size:1.8rem;

color:var(--primary);

margin-bottom:18px;

}

.story-card p{

line-height:1.9;

color:var(--text-light);

margin-bottom:25px;

}

.story-card hr{

margin:30px 0;

border:none;

height:1px;

background:#ECE8FF;

}
/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter{

padding:150px 0;

background:
linear-gradient(
180deg,
#F8F3FF,
#FFFFFF
);

}

.newsletter-form{

max-width:700px;

margin:60px auto 0;

display:flex;

gap:18px;

}

.newsletter-form input{

flex:1;

padding:18px 24px;

font-size:16px;

border:none;

outline:none;

border-radius:999px;

background:white;

box-shadow:var(--shadow);

}

.newsletter-form button{

border:none;

}

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

footer{

background:#2F1B69;

color:white;

padding:90px 0 35px;

}

.footer-grid{

display:grid;

grid-template-columns:

2fr
1fr
1fr
1fr;

gap:45px;

}

.footer-grid h2{

font-size:2.2rem;

margin-bottom:15px;

}

.footer-grid p{

line-height:1.8;

opacity:.9;

}

.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links h4{

margin-bottom:12px;

font-size:1.15rem;

}

.footer-links a{

color:white;

opacity:.85;

transition:.3s;

}

.footer-links a:hover{

opacity:1;

padding-left:6px;

}

.copyright{

margin-top:60px;

padding-top:30px;

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

text-align:center;

opacity:.7;

}

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

@media(max-width:1000px){

.hero-grid,
.story-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero{

padding-top:150px;

}

.hero-buttons{

justify-content:center;

}

.hero p{

margin-left:auto;

margin-right:auto;

}

.story-card{

margin-top:20px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

nav{

display:none;

}

.hero h1{

line-height:1;

}

.section-title{

font-size:2.6rem;

}

.explore-grid,
.mission-grid,
.product-grid{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-links{

align-items:center;

}

}