/* ========================================

Boztik Creative Toolkit Website
Version 1.0

======================================== */

*{

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

}

html{

scroll-behavior:smooth;

}

body{

background:#090909;

font-family:Arial,Helvetica,sans-serif;

color:white;

overflow-x:hidden;

position:relative;

}


/*==========================
BACKGROUND GLOW
==========================*/

.background-glow{

position:fixed;

border-radius:50%;

filter:blur(120px);

z-index:-1;

opacity:.20;

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

}

.glow1{

width:500px;

height:500px;

background:#65ff3d;

top:-150px;

left:-150px;

}

.glow2{

width:600px;

height:600px;

background:#00ff95;

bottom:-250px;

right:-250px;

animation-delay:3s;

}

.glow3{

width:350px;

height:350px;

background:#8cff3f;

top:40%;

left:60%;

animation-delay:6s;

}

@keyframes floatGlow{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-40px);

}

100%{

transform:translateY(0px);

}

}


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

.navbar{

width:90%;

max-width:1300px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:30px 0;

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

font-size:22px;

font-weight:bold;

color:#8cff3f;

}

.logo-area img{

width:55px;

filter:drop-shadow(0 0 15px rgba(140,255,63,.5));

}

.nav-links{

display:flex;

gap:35px;

}

.nav-links a{

color:white;

text-decoration:none;

font-size:16px;

transition:.35s;

}

.nav-links a:hover{

color:#8cff3f;

}


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

.hero{

width:90%;

max-width:1200px;

margin:auto;

padding:90px 0;

text-align:center;

}

.hero-logo{

width:180px;

margin-bottom:35px;

animation:pulse 5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

filter:drop-shadow(0 0 15px rgba(140,255,63,.35));

}

50%{

transform:scale(1.04);

filter:drop-shadow(0 0 35px rgba(140,255,63,.8));

}

100%{

transform:scale(1);

filter:drop-shadow(0 0 15px rgba(140,255,63,.35));

}

}

.hero h1{

font-size:64px;

line-height:1.1;

margin-bottom:25px;

}

.hero p{

max-width:760px;

margin:auto;

font-size:22px;

line-height:1.8;

color:#cfcfcf;

}

.hero-buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.primary-button{

background:#8cff3f;

padding:18px 36px;

border-radius:50px;

color:#111;

font-weight:bold;

text-decoration:none;

transition:.35s;

box-shadow:0 0 25px rgba(140,255,63,.35);

}

.primary-button:hover{

transform:translateY(-5px);

box-shadow:0 0 40px rgba(140,255,63,.7);

}

.secondary-button{

border:2px solid #8cff3f;

padding:18px 36px;

border-radius:50px;

text-decoration:none;

color:#8cff3f;

font-weight:bold;

transition:.35s;

}

.secondary-button:hover{

background:#8cff3f;

color:#111;

}
/*=========================================
HERO STATS
=========================================*/

.hero-stats{

width:90%;

max-width:1200px;

margin:40px auto 100px auto;

display:grid;

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

gap:30px;

}

.stat-card{

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

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

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

border-radius:28px;

padding:35px;

transition:.35s;

position:relative;

overflow:hidden;

}

.stat-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

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

transition:.8s;

}

.stat-card:hover::before{

left:100%;

}

.stat-card:hover{

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

box-shadow:
0 20px 45px rgba(0,0,0,.45),
0 0 35px rgba(140,255,63,.18);

}

.stat-card h2{

color:#8cff3f;

margin-bottom:18px;

font-size:28px;

}

.stat-card p{

line-height:1.8;

color:#d7d7d7;

}


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

.features{

width:90%;

max-width:1300px;

margin:auto;

padding:80px 0;

}

.section-title{

text-align:center;

font-size:52px;

margin-bottom:20px;

color:white;

}

.section-subtitle{

text-align:center;

font-size:20px;

color:#aaaaaa;

max-width:850px;

margin:auto auto 70px auto;

line-height:1.8;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

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

backdrop-filter:blur(16px);

-webkit-backdrop-filter:blur(16px);

border-radius:28px;

padding:40px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.feature-card:hover{

transform:translateY(-10px);

border-color:rgba(140,255,63,.35);

box-shadow:

0 25px 50px rgba(0,0,0,.45),

0 0 45px rgba(140,255,63,.18);

}

.feature-icon{

font-size:55px;

margin-bottom:25px;

}

.feature-card h3{

font-size:28px;

margin-bottom:20px;

color:#8cff3f;

}

.feature-card p{

line-height:1.9;

color:#d2d2d2;

}


/*=========================================
DEPTH EFFECT
=========================================*/

.features:hover .feature-card{

opacity:.45;

filter:blur(2px);

transform:scale(.98);

}

.features .feature-card:hover{

opacity:1;

filter:blur(0);

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

z-index:10;

}

.hero-stats:hover .stat-card{

opacity:.45;

filter:blur(2px);

}

.hero-stats .stat-card:hover{

opacity:1;

filter:none;

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

z-index:10;

}
/*=========================================
CREATOR SECTION
=========================================*/

.creator-section{

width:90%;

max-width:1200px;

margin:120px auto;

}

.creator-card{

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

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border-radius:35px;

padding:70px;

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

text-align:center;

transition:.35s;

}

.creator-card:hover{

transform:translateY(-8px);

box-shadow:
0 30px 60px rgba(0,0,0,.45),
0 0 40px rgba(140,255,63,.20);

}

.creator-card h2{

font-size:48px;

color:#8cff3f;

margin-bottom:30px;

}

.creator-card p{

font-size:20px;

line-height:2;

color:#d8d8d8;

margin-bottom:25px;

}

.creator-highlights{

display:grid;

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

gap:20px;

margin-top:45px;

}

.creator-highlights div{

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

padding:25px;

border-radius:22px;

font-weight:bold;

transition:.35s;

}

.creator-highlights div:hover{

background:#8cff3f;

color:#111;

transform:translateY(-5px);

}


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

section{

position:relative;

z-index:2;

}


/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#101010;

}

::-webkit-scrollbar-thumb{

background:#8cff3f;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#72e834;

}


/*=========================================
TEXT SELECTION
=========================================*/

::selection{

background:#8cff3f;

color:#111;

}


/*=========================================
FOCUS STATES
=========================================*/

a:focus,
button:focus{

outline:2px solid #8cff3f;

outline-offset:4px;

}


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

@media(max-width:1100px){

.hero h1{

font-size:50px;

}

.feature-grid{

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

}

.hero-stats{

grid-template-columns:1fr;

}

.creator-highlights{

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

}

}


@media(max-width:768px){

.navbar{

flex-direction:column;

gap:25px;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding:70px 0;

}

.hero-logo{

width:140px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-button,
.secondary-button{

width:280px;

text-align:center;

}

.feature-grid{

grid-template-columns:1fr;

}

.creator-card{

padding:40px;

}

.creator-card h2{

font-size:36px;

}

.creator-card p{

font-size:18px;

}

.creator-highlights{

grid-template-columns:1fr;

}

.section-title{

font-size:40px;

}

.section-subtitle{

font-size:18px;

}

}


/*=========================================
SMOOTH FADE-IN
=========================================*/

.hero,
.hero-stats,
.features,
.creator-section{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*=========================================
SUPPORT SECTION
=========================================*/

.support-section{

width:90%;

max-width:1200px;

margin:120px auto;

}

.support-card{

background:linear-gradient(
145deg,
rgba(28,28,28,.95),
rgba(15,15,15,.98)
);

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

border-radius:35px;

padding:70px;

text-align:center;

overflow:hidden;

position:relative;

transition:.4s;

}

.support-card::before{

content:"";

position:absolute;

top:-150px;

right:-150px;

width:300px;

height:300px;

background:#8cff3f22;

border-radius:50%;

filter:blur(80px);

}

.support-card:hover{

transform:translateY(-10px);

box-shadow:

0 35px 70px rgba(0,0,0,.45),

0 0 45px rgba(140,255,63,.25);

}

.support-card img{

width:90px;

margin-bottom:25px;

filter:drop-shadow(0 0 20px rgba(140,255,63,.4));

}

.support-card h2{

font-size:42px;

margin-bottom:20px;

color:#8cff3f;

}

.support-card p{

font-size:20px;

line-height:1.9;

max-width:700px;

margin:auto;

color:#d7d7d7;

}

.support-button{

display:inline-block;

margin-top:45px;

padding:20px 45px;

background:#8cff3f;

border-radius:60px;

font-size:20px;

font-weight:bold;

text-decoration:none;

color:#111;

transition:.35s;

box-shadow:0 0 25px rgba(140,255,63,.35);

}

.support-button:hover{

transform:translateY(-5px);

box-shadow:0 0 45px rgba(140,255,63,.7);

}



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

footer{

margin-top:120px;

padding:60px 20px;

text-align:center;

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

}

.footer-logo{

width:70px;

margin-bottom:20px;

opacity:.9;

}

footer h3{

color:#8cff3f;

font-size:30px;

margin-bottom:15px;

}

footer p{

color:#999;

line-height:1.8;

margin-bottom:20px;

}

.footer-links{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin-bottom:30px;

}

.footer-links a{

color:#cfcfcf;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#8cff3f;

}

.copyright{

font-size:14px;

color:#666;

}



/*=========================================
GLOBAL DEPTH SYSTEM
=========================================*/

body:hover section{

transition:.35s;

}

body:hover .feature-card,
body:hover .stat-card,
body:hover .creator-card,
body:hover .support-card{

opacity:.55;

filter:blur(2px);

transform:scale(.98);

}

.feature-card:hover,
.stat-card:hover,
.creator-card:hover,
.support-card:hover{

opacity:1 !important;

filter:none !important;

transform:

translateY(-8px)

scale(1.04);

z-index:999;

}



/*=========================================
MOUSE GLOW
=========================================*/

.feature-card::after,
.stat-card::after,
.creator-card::after,
.support-card::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

border-radius:inherit;

background:radial-gradient(circle at center,
rgba(140,255,63,.08),
transparent 70%);

opacity:0;

transition:.35s;

}

.feature-card:hover::after,
.stat-card:hover::after,
.creator-card:hover::after,
.support-card:hover::after{

opacity:1;

}