/* RESET */
:root {
    --dark-bg: #000;
    --light-bg: #f8faff;
    --dark-text: #e0a3ff;
    --light-text: #333;
    --glass-bg-dark: rgba(255, 255, 255, 0.05);
    --glass-bg-strong-dark: rgba(255, 255, 255, 0.1);
    --glass-bg-light: rgba(255, 255, 255, 0.7);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
    --glass-border-strong-dark: rgba(255, 255, 255, 0.2);
    --glass-border-light: rgba(200, 200, 255, 0.08);
    --glass-shadow-dark: rgba(0, 0, 0, 0.3);
    --glass-shadow-light: rgba(180, 180, 220, 0.13);
    --gradient-bg-dark: radial-gradient(circle at 15% 85%, rgba(75, 0, 130, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(139, 37, 99, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 45% 60%, rgba(128, 0, 128, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 70% 40%, rgba(34, 139, 34, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #2d1b3d 50%, #000000 100%);
    --gradient-bg-light: radial-gradient(circle at 15% 85%, rgba(173, 216, 230, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(255, 218, 185, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 45% 60%, rgba(255, 255, 224, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 70% 40%, rgba(152, 251, 152, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, #f7faff 0%, #e9f3fb 50%, #f8faff 100%);
    --gradient-hero-dark: linear-gradient(135deg, #e0a3ff 0%, #ff69b4 30%, #9370db 60%, #e0a3ff 100%);
    --gradient-hero-light: none;
    --gradient-cta-dark: linear-gradient(135deg, #e0a3ff, #ff69b4);
    --gradient-cta-light: linear-gradient(135deg, #bfeaff, #ffecec);
    --gradient-nav-active-dark: linear-gradient(135deg, rgba(224, 163, 255, 0.15), rgba(255, 105, 180, 0.1));
    --gradient-nav-active-light: linear-gradient(135deg, rgba(200, 200, 255, 0.1), rgba(255, 218, 185, 0.1));
    --gradient-timeline: linear-gradient(180deg, #e0a3ff, #ff69b4, #9370db);
    --gradient-section-title: linear-gradient(90deg, #00ffff, #ff0080);
    --accent-purple: #e0a3ff;
    --accent-pink: #ff69b4;
    --accent-green: #00ffff;
    --accent-blue: #9370db;
    --timeline-dot-gradient: linear-gradient(135deg, #ff69b4, #e0a3ff);
    --timeline-dot-border: rgba(255, 255, 255, 0.2);
    --hex-gradient-odd: linear-gradient(135deg, rgba(0, 255, 255, 0.12), rgba(255, 0, 128, 0.12));
    --hex-gradient-even: linear-gradient(135deg, rgba(255, 0, 128, 0.12), rgba(128, 0, 255, 0.12));
    --hex-border-odd: rgba(0, 255, 255, 0.3);
    --hex-border-even: rgba(255, 0, 128, 0.3);
    --feature-row-bg-light: linear-gradient(135deg, rgba(200, 200, 255, 0.06), rgba(255, 218, 185, 0.04));
    --footer-bg-dark: rgba(0, 0, 0, 0.5);
    --footer-bg-light: rgba(238, 245, 252, 0.8);
    --footer-border-dark: rgba(224, 163, 255, 0.2);
    --footer-border-light: rgba(180, 180, 220, 0.15);
    --footer-text-dark: #888;
    --footer-text-light: #444;
    --color-grey: #cccccc;
    --color-grey-darker: #d1d1d1;
    --color-grey-label: #999;
    --color-footer-design: #666;
    --color-feature-title: #ffffff;
    --color-hex-title: #ffffff;
    --color-hex-desc: #e0e0e0;
    --color-timeline-year-light: #0077ee;
    --color-timeline-year-dark: #e0a3ff;
    --color-hero-stat-number-light: #22aaff;
    --color-hero-stat-number-dark: #e0a3ff;
    --color-nav-link-light: #173060;
    --color-nav-link-dark: #ffffff;
    --color-cta-btn-light: #373757;
    --color-cta-btn-dark: #000;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,Segoe UI,Roboto;
}

body{

background:var(--gradient-bg-dark);
color:var(--color-grey);
min-height:100vh;
line-height:1.6;


}

/* NAVBAR */

/* NAVBAR */

.navbar{

position:sticky;
top:0;
z-index:999;

backdrop-filter:blur(14px);
background:var(--glass-bg-dark);
border-bottom:1px solid var(--glass-border-dark);

}

.nav-container{

max-width:1200px;
margin:auto;

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

padding:16px 20px;

}

/* LOGO */

.logo a{

font-size:22px;
font-weight:700;
text-decoration:none;

background:var(--gradient-hero-dark);
-webkit-background-clip:text;
color:transparent;

}

/* MENU */

.nav-menu{

display:flex;
gap:30px;

}

.nav-menu a{

text-decoration:none;
color:var(--color-nav-link-dark);

font-weight:500;
font-size:15px;

padding:8px 14px;
border-radius:8px;

transition:all .25s;

}

.nav-menu a:hover{

background:var(--gradient-nav-active-dark);
color:var(--accent-purple);

}

/* HAMBURGER */

.hamburger{

display:none;
flex-direction:column;
gap:5px;
cursor:pointer;

}

.hamburger span{

width:24px;
height:2px;
background:white;

}

/* MOBILE */

@media (max-width:768px){

.nav-menu{

position:absolute;
top:70px;
left:0;

width:100%;

background:var(--dark-bg);

flex-direction:column;
align-items:center;

padding:20px 0;

gap:20px;

display:none;

}

.nav-menu.active{

display:flex;

}

.hamburger{

display:flex;

}

}


/* HERO */

.hero{

text-align:center;
padding:100px 20px;

}

.hero h1{

font-size:42px;
margin-bottom:20px;
background:var(--gradient-hero-dark);
-webkit-background-clip:text;
color:transparent;

}

.hero p{

max-width:700px;
margin:auto;
margin-bottom:40px;

}

/* TOOL BOX */

.tool-box{

display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;

}

.tool-box input{

width:400px;
padding:14px;
border-radius:8px;
border:1px solid var(--glass-border-strong-dark);
background:var(--glass-bg-dark);
color:white;

}

.tool-box button{

padding:14px 28px;
border:none;
border-radius:8px;
background:var(--gradient-cta-dark);
color:white;
cursor:pointer;
font-weight:600;

}

.tool-box button:hover{

opacity:.9;

}

/* SPINNER */

.spinner{

display:none;
margin:20px auto;
width:50px;
height:50px;
border:6px solid rgba(255,255,255,.2);
border-top:6px solid var(--accent-purple);
border-radius:50%;
animation:spin 1s linear infinite;

}

@keyframes spin{

0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}

}

/* RESULTS */

.seo-results{

padding:80px 20px;
max-width:1000px;
margin:auto;

}

#score{

font-size:30px;
margin-bottom:20px;
color:var(--accent-green);

}

table{

width:100%;
border-collapse:collapse;
margin-top:20px;
background:var(--glass-bg-dark);
backdrop-filter:blur(8px);
border-radius:10px;
overflow:hidden;

}

td{

padding:14px;
border-bottom:1px solid var(--glass-border-dark);

}
.good{
color:#00d084;
font-weight:600;
}

.bad{
color:#ff4d4f;
font-weight:600;
}

.warn{
color:#ffa500;
font-weight:600;
}

/* DETAILS */

#details{

margin-top:40px;
background:var(--glass-bg-dark);
padding:25px;
border-radius:10px;
border:1px solid var(--glass-border-dark);

}

#details p{

margin-bottom:8px;

}

/* SUGGESTIONS */

#suggestions{

margin-top:40px;
background:var(--glass-bg-dark);
padding:25px;
border-radius:10px;
border:1px solid var(--glass-border-dark);

}

#suggestions ul{

padding-left:20px;

}

/* CONTENT SECTIONS */

section{

max-width:1100px;
margin:auto;
padding:80px 20px;

}

section h2{

font-size:30px;
margin-bottom:20px;
background:var(--gradient-section-title);
-webkit-background-clip:text;
color:transparent;

}

section p{

margin-bottom:15px;

}

ul{

margin-left:20px;
margin-top:10px;

}

li{

margin-bottom:8px;

}

/* FAQ */

.faq h3{

margin-top:25px;
color:var(--accent-purple);

}

/* FOOTER */

footer{

text-align:center;
padding:30px;
background:var(--footer-bg-dark);
border-top:1px solid var(--footer-border-dark);
margin-top:60px;

}

footer p{

color:var(--footer-text-dark);

}

/* RESPONSIVE */

@media(max-width:768px){

.hero h1{
font-size:32px;
}

.tool-box{
flex-direction:column;
align-items:center;
}

.tool-box input{
width:100%;
max-width:350px;
}

}


.seo-services{

padding:100px 20px;
text-align:center;

}

.services-container{

max-width:1100px;
margin:auto;

}

.services-intro{

max-width:700px;
margin:20px auto 50px;

}

.services-grid{

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

}

.service-card{

padding:30px;
border-radius:14px;

background:var(--glass-bg-dark);
border:1px solid var(--glass-border-dark);

transition:.3s;

}

.service-card:hover{

transform:translateY(-6px);
border-color:var(--accent-purple);

}

.service-card h3{

margin-bottom:10px;
color:var(--accent-purple);

}

.service-btn{

display:inline-block;
margin-top:15px;
padding:10px 18px;

border-radius:8px;
text-decoration:none;

background:var(--gradient-cta-dark);
color:white;

}

/* CTA BOX */

.cta-box{

margin-top:60px;
padding:40px;

border-radius:14px;

background:var(--glass-bg-strong-dark);
border:1px solid var(--glass-border-dark);

}

.cta-button{

display:inline-block;
margin-top:20px;
padding:14px 28px;

border-radius:10px;
text-decoration:none;

background:var(--gradient-cta-dark);
color:white;

font-weight:600;

}


/* popup */
/* SEO POPUP */

.seo-popup{

position:fixed;
bottom:30px;
right:30px;

width:320px;

background:var(--glass-bg-dark);
border:1px solid var(--glass-border-dark);
border-radius:14px;

backdrop-filter:blur(10px);

box-shadow:0 10px 40px rgba(0,0,0,.4);

padding:25px;

z-index:999;

display:none;

animation:popupFade .4s ease;

}

@keyframes popupFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.seo-popup-box h3{

margin-bottom:10px;
color:var(--accent-purple);

}

.popup-btn{

display:inline-block;
margin-top:15px;

padding:12px 20px;

background:var(--gradient-cta-dark);

border-radius:8px;
color:white;
text-decoration:none;

}

.popup-close{

position:absolute;
top:10px;
right:10px;

background:none;
border:none;

color:white;
font-size:18px;
cursor:pointer;

}