/*=========================================
ROOT VARIABLES
=========================================*/
:root{

--primary:#6C63FF;
--secondary:#00C2FF;
--dark:#111827;
--dark2:#1F2937;
--light:#F8FAFC;
--white:#fff;
--text:#4B5563;
--border:#E5E7EB;
--success:#10B981;

--radius:18px;
--radius-sm:12px;

--shadow:0 10px 30px rgba(0,0,0,.08);
--shadow-lg:0 20px 60px rgba(0,0,0,.12);

--transition:.35s ease;

--max-width:1200px;

}

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

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:var(--light);
color:var(--text);
line-height:1.8;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;

}

/*=========================================
CONTAINER
=========================================*/

.container{

width:92%;
max-width:var(--max-width);
margin:auto;

}

/*=========================================
HEADINGS
=========================================*/

h1,h2,h3,h4{

color:var(--dark);
font-weight:700;
line-height:1.3;

}

h1{

font-size:3.2rem;

}

h2{

font-size:2.4rem;
margin-bottom:15px;

}

h3{

font-size:1.35rem;
margin-bottom:12px;

}

p{

margin-bottom:18px;

}

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

section{

padding:90px 0;

}

.section-title{

text-align:center;
max-width:850px;
margin:auto auto 60px;

}

.section-title span{

display:inline-block;
padding:8px 18px;
background:rgba(108,99,255,.12);
color:var(--primary);
font-weight:600;
border-radius:50px;
margin-bottom:18px;

}

.section-title p{

font-size:1.05rem;

}

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

.btn-primary,
.btn-secondary{

display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
border-radius:50px;
font-weight:700;
transition:.35s;
cursor:pointer;

}

.btn-primary{

background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
box-shadow:0 12px 35px rgba(108,99,255,.28);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

background:#fff;
color:var(--dark);
border:2px solid var(--border);

}

.btn-secondary:hover{

background:var(--primary);
color:#fff;
border-color:var(--primary);

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
background:rgba(255,255,255,.92);
backdrop-filter:blur(18px);
z-index:999;
box-shadow:0 3px 20px rgba(0,0,0,.05);

}

nav{

height:80px;
display:flex;
align-items:center;
justify-content:space-between;

}

.logo{

font-size:1.8rem;
font-weight:800;
color:var(--primary);

}

nav ul{

display:flex;
gap:28px;

}

nav ul li a{

font-weight:600;
color:var(--dark);

}

nav ul li a:hover,
nav ul li a.active{

color:var(--primary);

}

/*=========================================
MENU BUTTON
=========================================*/

.menu-toggle{

display:none;
background:none;
border:none;
font-size:2rem;
cursor:pointer;
color:var(--primary);

}

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

.feature-card,
.safety-card,
.method-card,
.app-card,
.fact-card,
.stat-card,
.guide-card,
.faq-item{

background:#fff;
border-radius:var(--radius);
padding:30px;
box-shadow:var(--shadow);
transition:.35s;

}

.feature-card:hover,
.safety-card:hover,
.method-card:hover,
.app-card:hover,
.fact-card:hover,
.stat-card:hover,
.guide-card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-lg);

}

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

.features-grid,
.safety-grid,
.methods-grid,
.apps-grid,
.guides-grid,
.facts-grid,
.stats-grid{

display:grid;
gap:30px;

}

.features-grid{

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

}

.safety-grid{

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

}

.methods-grid{

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

}

.apps-grid{

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

}

.guides-grid{

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

}

.facts-grid{

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

}

.stats-grid{

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

margin-bottom:60px;

}

/*=========================================
ICONS
=========================================*/

.feature-icon,
.safety-icon,
.method-icon,
.fact-icon{

width:70px;
height:70px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
margin-bottom:20px;

}

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

@media(max-width:991px){

h1{

font-size:2.6rem;

}

h2{

font-size:2rem;

}

nav ul{

position:fixed;
top:80px;
right:-100%;
width:280px;
height:calc(100vh - 80px);
background:#fff;
flex-direction:column;
padding:40px;
box-shadow:-10px 0 40px rgba(0,0,0,.08);
transition:.35s;

}

nav ul.active{

right:0;

}

.menu-toggle{

display:block;

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

.container{

width:94%;

}

h1{

font-size:2.1rem;

}

h2{

font-size:1.8rem;

}

.btn-primary,
.btn-secondary{

width:100%;
margin-bottom:12px;

}

.section-title{

margin-bottom:45px;

}

}

@media(max-width:480px){

.logo{

font-size:1.5rem;

}

h1{

font-size:1.8rem;

}

h2{

font-size:1.55rem;

}

.feature-card,
.safety-card,
.method-card,
.app-card,
.fact-card,
.stat-card,
.guide-card,
.faq-item{

padding:22px;

}

}

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

.hero{

padding:170px 0 110px;
background:
linear-gradient(135deg,#f9fbff 0%,#eef5ff 100%);
overflow:hidden;

}

.hero-container{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;

}

.hero-badge{

display:inline-flex;
align-items:center;
padding:10px 22px;
border-radius:50px;
background:rgba(108,99,255,.12);
color:var(--primary);
font-weight:600;
margin-bottom:25px;

}

.hero h1{

font-size:3.6rem;
font-weight:800;
margin-bottom:20px;

}

.hero-text{

font-size:1.12rem;
max-width:620px;
margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:18px;
margin-bottom:45px;
flex-wrap:wrap;

}

.hero-stats{

display:flex;
gap:25px;
flex-wrap:wrap;

}

.stat-box{

background:#fff;
padding:22px;
border-radius:18px;
box-shadow:var(--shadow);
min-width:160px;
text-align:center;
transition:.35s;

}

.stat-box:hover{

transform:translateY(-8px);

}

.stat-box h3{

font-size:2rem;
color:var(--primary);
margin-bottom:6px;

}

.stat-box p{

margin:0;
font-size:.95rem;

}

.hero-image{

position:relative;

}

.hero-image img{

width:100%;
border-radius:28px;
box-shadow:0 30px 70px rgba(0,0,0,.12);
animation:heroFloat 5s ease-in-out infinite;

}

.hero-image::before{

content:"";
position:absolute;
width:280px;
height:280px;
background:linear-gradient(135deg,#6C63FF,#00C2FF);
border-radius:50%;
filter:blur(80px);
opacity:.18;
top:-40px;
right:-50px;
z-index:-1;

}

@keyframes heroFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

/*==================================================
ABOUT SECTION
==================================================*/

.about-section{

background:#fff;

}

.about-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;

}

.about-content h3{

margin-top:35px;
margin-bottom:15px;
color:var(--dark);

}

.about-content p{

margin-bottom:20px;

}

.feature-list{

display:grid;
grid-template-columns:repeat(2,minmax(200px,1fr));
gap:15px;
margin-top:30px;

}

.feature-list li{

padding:16px 18px;
background:#f7f8fb;
border-left:5px solid var(--primary);
border-radius:12px;
font-weight:500;

}

.about-image img{

border-radius:22px;
box-shadow:var(--shadow-lg);

}

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

.features-section{

background:#f7f9fc;

}

.feature-card{

text-align:center;

}

.feature-card .feature-icon{

margin:0 auto 20px;

}

.feature-card h3{

margin-bottom:12px;

}

.feature-card p{

margin:0;

}

/*==================================================
SAFETY SECTION
==================================================*/

.safety-section{

background:#fff;

}

.safety-card{

position:relative;

}

.safety-card::before{

content:"";
position:absolute;
left:0;
top:0;
width:5px;
height:100%;
background:linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:10px 0 0 10px;

}

.safety-card .safety-icon{

margin-bottom:18px;

}

.safety-note{

margin-top:60px;
background:linear-gradient(135deg,#6C63FF,#00C2FF);
color:#fff;
padding:45px;
border-radius:20px;
box-shadow:var(--shadow-lg);

}

.safety-note h3{

color:#fff;
margin-bottom:20px;

}

.safety-note ul{

display:grid;
grid-template-columns:repeat(2,minmax(250px,1fr));
gap:16px;

}

.safety-note li{

background:rgba(255,255,255,.12);
padding:14px 18px;
border-radius:10px;

}

/*==================================================
COMMON IMAGE EFFECT
==================================================*/

.about-image,
.hero-image{

position:relative;

}

.about-image img,
.hero-image img{

transition:.5s;

}

.about-image img:hover,
.hero-image img:hover{

transform:scale(1.03);

}

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

.feature-card,
.safety-card,
.stat-box,
.about-image,
.hero-content{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

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

@media(max-width:1100px){

.hero-container,
.about-grid{

grid-template-columns:1fr;
text-align:center;

}

.hero-text{

margin:auto auto 35px;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

.feature-list{

grid-template-columns:1fr 1fr;

}

.hero-image{

order:-1;

}

}

@media(max-width:768px){

.hero{

padding:140px 0 80px;

}

.hero h1{

font-size:2.4rem;

}

.hero-text{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

justify-content:center;

}

.stat-box{

width:100%;

}

.feature-list{

grid-template-columns:1fr;

}

.safety-note{

padding:30px;

}

.safety-note ul{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.hero{

padding:120px 0 70px;

}

.hero h1{

font-size:2rem;

}

.hero-badge{

font-size:.85rem;

}

.hero-stats{

gap:15px;

}

.stat-box{

padding:18px;

}

.about-grid{

gap:40px;

}

}

/*==================================================
CHAT METHODS
==================================================*/

.chat-methods{
background:#f8fbff;
}

.method-card{
position:relative;
overflow:hidden;
}

.method-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,var(--primary),var(--secondary));
}

.method-card .method-icon{
margin-bottom:20px;
}

.method-card h3{
margin-bottom:15px;
}

.guide-box{
margin-top:60px;
padding:45px;
background:#fff;
border-radius:20px;
box-shadow:var(--shadow);
border-left:6px solid var(--primary);
}

/*==================================================
APPS
==================================================*/

.apps-section{
background:#fff;
}

.app-card{
display:flex;
flex-direction:column;
height:100%;
}

.app-card h3{
margin-bottom:18px;
color:var(--dark);
}

.app-card ul{
margin:20px 0;
}

.app-card ul li{
padding:8px 0;
border-bottom:1px solid #eee;
}

.app-card ul li:last-child{
border:none;
}

.read-more{
display:inline-block;
margin-top:auto;
padding:12px 22px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
border-radius:50px;
font-weight:600;
}

.read-more:hover{
transform:translateY(-3px);
}

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

.benefits-content{
background:#f8f9fb;
}

.content-wrapper{
max-width:900px;
margin:auto;
}

.content-wrapper h3{
margin-top:40px;
margin-bottom:18px;
font-size:1.6rem;
}

.highlight-box{
margin:50px 0;
padding:40px;
background:#fff;
border-radius:20px;
box-shadow:var(--shadow);
}

.highlight-box ul{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:16px;
margin-top:20px;
}

.highlight-box li{
background:#f5f7ff;
padding:16px;
border-radius:12px;
}

/*==================================================
STATISTICS
==================================================*/

.stats-section{
background:#fff;
}

.stat-card{
text-align:center;
}

.stat-card h3{
font-size:3rem;
color:var(--primary);
margin-bottom:12px;
}

.fact-card{
text-align:center;
}

.fact-icon{
margin:0 auto 20px;
}

.info-box{
margin-top:60px;
padding:40px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
border-radius:20px;
text-align:center;
}

.info-box h3{
color:#fff;
margin-bottom:18px;
}

/*==================================================
FAQ
==================================================*/

.faq-section{
background:#f8fbff;
}

.faq-container{
max-width:900px;
margin:auto;
}

.faq-item{
margin-bottom:20px;
padding:0;
overflow:hidden;
}

.faq-question{

width:100%;
padding:24px 30px;
border:none;
background:#fff;
cursor:pointer;
font-size:1.05rem;
font-weight:600;
text-align:left;
display:flex;
justify-content:space-between;
align-items:center;

}

.faq-question::after{

content:"+";
font-size:1.6rem;
color:var(--primary);

}

.faq-item.active .faq-question::after{

content:"−";

}

.faq-answer{

max-height:0;
overflow:hidden;
transition:.35s ease;

}

.faq-item.active .faq-answer{

max-height:500px;

}

.faq-answer p{

padding:0 30px 25px;
margin:0;

}

/*==================================================
GUIDES
==================================================*/

.guides-section{
background:#fff;
}

.guide-card{
text-align:center;
display:flex;
flex-direction:column;
height:100%;
}

.guide-card h3{
margin-bottom:15px;
}

.guide-card p{
margin-bottom:25px;
}

.guide-card a{
margin-top:auto;
display:inline-block;
padding:12px 20px;
background:#f5f7ff;
border-radius:50px;
font-weight:600;
color:var(--primary);
}

.guide-card:hover a{
background:var(--primary);
color:#fff;
}

/*==================================================
CONTACT
==================================================*/

.contact-section{
background:#f8fbff;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.contact-card{
background:#fff;
padding:35px;
border-radius:20px;
box-shadow:var(--shadow);
}

.contact-form input,
.contact-form textarea{

width:100%;
padding:16px;
margin-bottom:18px;
border:1px solid #ddd;
border-radius:12px;
font-family:inherit;

}

.contact-form textarea{
height:180px;
resize:vertical;
}

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

footer{

background:var(--dark);
color:#ddd;
padding:70px 0 30px;

}

.footer-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;

}

.footer-grid h3{

color:#fff;
margin-bottom:20px;

}

.footer-grid a{

color:#ccc;

}

.footer-grid a:hover{

color:#fff;

}

.footer-bottom{

margin-top:60px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.1);
text-align:center;
font-size:.95rem;

}

/*==================================================
UTILITY
==================================================*/

.text-center{
text-align:center;
}

.mt-40{
margin-top:40px;
}

.mt-60{
margin-top:60px;
}

.mb-40{
margin-bottom:40px;
}

.mb-60{
margin-bottom:60px;
}

.shadow{
box-shadow:var(--shadow);
}

.rounded{
border-radius:20px;
}

/*==================================================
BACK TO TOP
==================================================*/

.back-top{

position:fixed;
right:25px;
bottom:25px;
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
border-radius:50%;
box-shadow:var(--shadow-lg);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:999;

}

.back-top.show{

opacity:1;
visibility:visible;

}

.back-top:hover{

transform:translateY(-5px);

}

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

.feature-card,
.method-card,
.app-card,
.guide-card,
.fact-card,
.stat-card{

transition:.35s;

}

.feature-card:hover,
.method-card:hover,
.app-card:hover,
.guide-card:hover,
.fact-card:hover,
.stat-card:hover{

transform:translateY(-10px);

}

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

@media(max-width:991px){

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.guide-box,
.highlight-box,
.info-box{

padding:30px;

}

.content-wrapper h3{

font-size:1.4rem;

}

.faq-question{

padding:20px;

}

.faq-answer p{

padding:0 20px 20px;

}

}

@media(max-width:480px){

.stat-card h3{

font-size:2.3rem;

}

.read-more{

width:100%;
text-align:center;

}

.back-top{

width:48px;
height:48px;

}

}

.faq-item{
    background:#fff;
    border-radius:15px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.faq-question{
    width:100%;
    border:0;
    outline:0;
    background:#fff;
    cursor:pointer;
    padding:20px;
    text-align:left;
    font-size:18px;
    font-weight:600;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.faq-question::after{
    content:"+";
    font-size:26px;
    color:#6C63FF;
    transition:.3s;
}

.faq-item.active .faq-question::after{
    content:"−";
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-answer p{
    padding:0 20px 20px;
}

.faq-item.active .faq-answer{
    max-height:1000px;
}

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

.footer{

background:#111827;
color:#d1d5db;
padding:80px 0 30px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;

margin-bottom:60px;

}

.footer h2,
.footer h3{

color:#fff;
margin-bottom:20px;

}

.footer p{

line-height:1.8;

}

.footer ul{

list-style:none;

}

.footer li{

margin-bottom:12px;

}

.footer a{

color:#cbd5e1;
text-decoration:none;
transition:.3s;

}

.footer a:hover{

color:#6C63FF;
padding-left:5px;

}

.social-links{

display:flex;
gap:15px;
margin-top:25px;

}

.social-links a{

width:46px;
height:46px;

display:flex;
align-items:center;
justify-content:center;

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

border-radius:50%;

font-size:22px;

transition:.3s;

}

.social-links a:hover{

background:#6C63FF;

transform:translateY(-6px);

}

.footer-bottom{

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

padding-top:25px;

display:flex;
justify-content:space-between;
align-items:center;

gap:20px;

flex-wrap:wrap;

font-size:14px;

}

.footer-bottom p{

margin:0;

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;
text-align:center;

}

.social-links{

justify-content:center;

}

.footer-bottom{

justify-content:center;
text-align:center;

}

}