:root {

    --bg:#050816;
    --surface:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.12);

    --text:#f8fafc;
    --muted:#94a3b8;

    --primary:#3b82f6;
    --secondary:#8b5cf6;
    --accent:#06b6d4;

    --radius:24px;

}



body.light {

    --bg:#f8fafc;
    --surface:rgba(255,255,255,.75);
    --border:rgba(15,23,42,.12);

    --text:#0f172a;
    --muted:#475569;

}




* {

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

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--text);

    transition:.4s;

    overflow-x:hidden;

}



a {

    text-decoration:none;

    color:inherit;

}



/* BACKGROUND */


.background {

    position:fixed;

    inset:0;

    z-index:-1;

    overflow:hidden;

}



.glow {

    position:absolute;

    width:500px;

    height:500px;

    filter:blur(120px);

    border-radius:50%;

    opacity:.4;

}



.glow-1 {

    background:#2563eb;

    top:-200px;

    left:-150px;

}



.glow-2 {

    background:#9333ea;

    bottom:-200px;

    right:-150px;

}





/* NAVBAR */


.navbar {


    width:min(1200px,90%);

    margin:30px auto;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:18px 30px;


    background:var(--surface);


    backdrop-filter:blur(20px);


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


    border-radius:60px;

}



.logo {

    font-family:"Space Grotesk";

    font-size:26px;

    font-weight:700;

}



.logo span {

    color:var(--accent);

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:var(--muted);

    transition:.3s;

}



nav a:hover {

    color:var(--text);

}



#theme-toggle {

    background:none;

    border:0;

    font-size:22px;

    cursor:pointer;

}





/* HERO */


.hero {

    min-height:85vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 20px;

}



.hero-box {

    max-width:900px;

}



.badge {

    display:inline-block;

    padding:10px 20px;


    border-radius:50px;


    background:var(--surface);


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


    color:var(--accent);


    margin-bottom:30px;

}



h1 {


    font-family:"Space Grotesk";


    font-size:clamp(50px,8vw,95px);


    line-height:1;


    background:linear-gradient(
    90deg,
    #fff,
    #60a5fa,
    #c084fc
    );


    -webkit-background-clip:text;

    color:transparent;

}



.hero-box p {


    max-width:700px;

    margin:35px auto;


    font-size:20px;


    line-height:1.8;


    color:var(--muted);

}




.hero-actions {

    display:flex;

    justify-content:center;

    gap:20px;

}





/* BUTTON */


.btn {


    padding:15px 30px;


    border-radius:50px;


    font-weight:600;


    display:inline-block;


    transition:.3s;

}



.btn:hover {

    transform:translateY(-5px);

}



.primary {


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


    color:white;


    box-shadow:
    0 15px 40px rgba(59,130,246,.35);

}



.secondary {


    background:var(--surface);


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

}





/* SECTION */


section {


    width:min(1200px,90%);

    margin:120px auto;

}



h2 {


    text-align:center;


    font-family:"Space Grotesk";


    font-size:45px;


    margin-bottom:50px;

}





/* PRODUCT AREA */


#products-container {


    display:flex;

    justify-content:center;

}



.gumroad-card {


    width:100%;

    max-width:500px;


    padding:40px;


    text-align:center;


    background:var(--surface);


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


    border-radius:var(--radius);


    backdrop-filter:blur(20px);


}



.gumroad-card h3 {

    font-size:28px;

    margin-bottom:15px;

}



.gumroad-card p {

    color:var(--muted);

    line-height:1.7;

    margin-bottom:30px;

}





/* FEATURES */


.features {


    display:grid;


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


    gap:30px;

}



.feature-card {


    padding:35px;


    text-align:center;


    background:var(--surface);


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


    border-radius:var(--radius);


}



.feature-card span {

    font-size:40px;

}



.feature-card p {

    color:var(--muted);

    margin-top:15px;

}





/* NEWSLETTER */


form {


    max-width:500px;


    margin:auto;


    display:flex;


    gap:10px;

}



input {


    flex:1;


    padding:15px 20px;


    border-radius:50px;


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


    background:var(--surface);


    color:var(--text);

}





/* FOOTER */


footer {


    text-align:center;


    padding:50px;


    color:var(--muted);

}





@media(max-width:800px){


nav {

display:none;

}



.features {

grid-template-columns:1fr;

}



.hero-actions,
form {

flex-direction:column;

}



}
/* =====================================
   V5 MOTION EFFECTS
===================================== */


.glow-1 {

animation:
floatGlow 12s infinite alternate;

}



.glow-2 {

animation:
floatGlow 15s infinite alternate-reverse;

}



@keyframes floatGlow {


from {

transform:
translate(0,0);

}


to {

transform:
translate(120px,80px);

}


}




.feature-card,
.gumroad-card {


transition:
transform .35s ease,
border .35s ease;


}



.feature-card:hover,
.gumroad-card:hover {


transform:
translateY(-10px);


border-color:
rgba(6,182,212,.5);


}