* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

body {
    background: #02030a;   /* much darker */
    color: white;
}
.nav-links a i {
    margin-right: 8px;
}
/* Animated Gradient Background */
.bg-animation {
    position: fixed;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 25% 30%, #5a00ff15, transparent 40%),
        radial-gradient(circle at 80% 70%, #0011ff10, transparent 50%);
    z-index: -1;
}

@keyframes moveBg {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 8%;
    background: #030712;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;

}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
}

.logo-circle {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #9d00ff, #4a00ff);
    border-radius: 50%;
}

.nav-links {
    display: none;
    gap: 30px;
}

.nav-links a {
    color: #bbb;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: #9d00ff;
}

.nav-icons i {
    margin-left: 20px;
    cursor: pointer;
    font-size: 18px;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background: #050814;
    padding-top: 80px;
    transition: 0.4s;
}

.sidebar a {
    display: block;
    padding: 15px 30px;
    color: #bbb;
    text-decoration: none;
}

.sidebar a:hover {
    background: #11163a;
    color: #9d00ff;
}

.sidebar.active {
    right: 0;
}

/* HERO */
.hero {
    padding: 140px 8% 60px;
    max-width: 600px;
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero p {
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* BUTTONS */
.buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 26px;
    border-radius: 60px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}


.btn span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.primary {
    background: linear-gradient(135deg, #6e00ff, #a000ff);
    color: white;
}

.primary span {
    background: #f1f1f1;
    color: black;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary:hover {
    box-shadow: 0 0 30px #7b00ff88;
    transform: translateY(-2px);
}

/* SECONDARY (Create Account) */
.secondary {
    border: 1px solid #2a2f45;
    color: white;
    background: transparent;
}

.secondary span {
    background: linear-gradient(135deg, #6e00ff, #a000ff);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.secondary:hover {
    border-color: #7b00ff;
    box-shadow: 0 0 20px #7b00ff55;
}
/* FEATURES */
.features p {
    color: #aaa;
    margin-bottom: 15px;
}

.features i {
    color: #8a00ff;
    margin-right: 10px;
}
* stats */
.stats{
text-align:center;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:30px;
margin-top:30px;
}

.stat{
background:rgba(255,255,255,0.03);
padding:30px;
border-radius:18px;
border:1px solid rgba(255,255,255,0.05);
}

.stat h2{
font-size:36px;
color:#a855f7;
}

/* tools */
.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
margin-top:40px;
}

.tool{
padding:30px;
border-radius:20px;
background:#0e0c1a;
border:1px solid rgba(255,255,255,0.05);
transition:.3s;
}

.tool:hover{
transform:translateY(-6px);
border-color:#a855f7;
}

.tool-icon{
font-size:32px;
margin-bottom:15px;
}

/* badge */
.badge{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(90deg,#c026ff,#7c3aed);
padding:6px 16px;
border-radius:30px;
font-size:12px;
font-weight:600;
}

/* price */
.price{
font-size:38px;
font-weight:800;
margin:18px 0;
color:#fff;
}


/* SECTION */
.pricing-section {
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

/* HEADER */
.pricing-header {
  text-align: center;
  margin-bottom: 60px;
}

.pricing-header h2 {
  font-size: 36px;
  font-weight: 800;
}
.pricing-header p {
  color: #b9b9d4;
  margin-top: 10px;
  font-size: 18px;
}

/* GRID */
.pricing-grid {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 40px;
}

/* GLASS CARD */
.price-card {
  position: relative;
  padding: 45px 30px;
  border-radius: 28px;
background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(166, 77, 255, 0.35);

  box-shadow:
    0 0 40px rgba(166, 77, 255, 0.25),
    inset 0 0 30px rgba(166, 77, 255, 0.08);

  transition: 0.35s ease;
}

.price-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 0 60px rgba(166, 77, 255, 0.45),
    inset 0 0 40px rgba(166, 77, 255, 0.12);
}
/* BADGE */
.badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #c026ff, #7c5cff);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(192, 38, 255, 0.6);
}
.pricing-section::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(168,85,247,0.35), transparent);
top: -200px;
left: -200px;
filter: blur(120px);
z-index: -1;
}
/* TITLE */
.price-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
/* PRICE */
.price {
  text-align: center;
  font-size: 56px;
  font-weight: 900;
  margin: 20px 0;
}

.price span {
  font-size: 18px;
  opacity: 0.7;
  margin-left: 6px;
}

/* FEATURES */
.price-features {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}
.price-features li {
  margin-bottom: 12px;
  color: #cfcfe7;
  font-size: 16px;
}
@media (max-width:768px){

.{
background:rgba(255,255,255,.05);
border-color:#a855f7;
}

/* store cards more professional */
.store-grid div{
position:relative;
overflow:hidden;
}

.store-grid div::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(168,85,247,.15),transparent);
opacity:0;
transition:.4s;
}

.store-grid div:hover::before{
opacity:1;
}

/* step cards glow */
.step{
transition:.3s;
}

.step:hover{
transform:translateY(-6px);
border-color:#a855f7;
box-shadow:0 10px 40px rgba(168,85,247,.25);
}

/* featured release upgrade */
.release-card{
transition:.35s;
position:relative;
}

.release-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 15px 50px rgba(168,85,247,.25);
}

/* image shine animation */
.release-card::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:60%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
transform:skewX(-25deg);
}

.release-card:hover::after{
animation:shine 1.2s;
}

@keyframes shine{
100%{
left:160%;
}
}

/* CTA section glow boost */
.cta{
box-shadow:
0 0 80px rgba(168,85,247,.15),
inset 0 0 40px rgba(168,85,247,.08);
}

/* navbar professional blur */
.nav{
position:fixed;
top:0;
width:100%;
z-index:1000;

background: linear-gradient(to right, #050814, #0a0f25);
backdrop-filter: blur(16px);

border-bottom: 1px solid rgba(255,255,255,0.04);
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* smoother page feel */
section{
animation:fadeUp .6s ease both;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
.hero-buttons{
flex-direction:column;
align-items:center;
}
.btn-primary,
.btn-secondary{
width:100%;
max-width:260px;
text-align:center;
}

section{
padding:70px 18px;
}

.pricing-grid{
gap:25px;
}

.price{
font-size:44px;
}

.store-grid{
grid-template-columns:repeat(2,1fr);
}
.featured-grid{
grid-template-columns:repeat(2,1fr);
}

}
.nav a,
.nav i,
.nav-links a {
    color: #e5e7eb;
}

.nav-links a:hover {
    color: #a855f7;
}
/* BUTTON */
.price-btn {
  display: block;
  text-align: center;
  padding: 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: white;

  background: linear-gradient(90deg, #c026ff, #7c5cff);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);

  transition: 0.3s;
}

/* background glow */
.background-glow{
position:fixed;
inset:0;
z-index:-1;
background:
radial-gradient(circle at 20% 10%, #6d28d9, transparent 40%),
radial-gradient(circle at 80% 0%, #c026ff, transparent 40%);
filter:blur(120px);
opacity:.35;
}

/* NAV */
.nav{
position:fixed;
top:0;
width:100%;
z-index:999;

background:#050814;   /* solid dark */
border-bottom:1px solid rgba(255,255,255,0.05);
box-shadow:0 10px 30px rgba(0,0,0,.6);
}


.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.05),
rgba(40,0,80,0.35),
rgba(10,0,30,0.8)
);
}
  
}
.hero::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at center, rgba(168,85,247,.15), transparent 60%);
pointer-events:none;
}

.hero-content{
position:relative;
max-width:800px;
}

.hero h1{
font-size:clamp(38px,6vw,64px);
font-weight:800;
margin-bottom:20px;
}

.hero p{
color:#cfcfe6;
font-size:17px;
margin-bottom:30px;
}

/* buttons */
.hero-buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
margin-top:20px;
}

.btn-primary{
background:linear-gradient(90deg,#c026ff,#7c3aed);
padding:18px 85px;
border-radius:50px;
text-decoration:none;
color:white;
font-weight:600;
box-shadow:0 10px 40px rgba(192,38,255,.4);
}

.btn-secondary{
border:1px solid rgba(255,255,255,.3);
padding:18px 80px;
border-radius:50px;
text-decoration:none;
color:white;
}

/* sections */
section{
padding:90px 22px;
max-width:1100px;
margin:auto;
}

/* stores */
.store-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:18px;
margin-top:30px;
}

.store-grid div{
padding:20px;
text-align:center;
border-radius:16px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.05);
transition:.2s;
}

.store-grid div:hover{
transform:translateY(-4px);
border-color:#a855f7;
}

/* steps */
.steps{
display:grid;
gap:20px;
margin-top:30px;
}

.step{
padding:26px;
border-radius:18px;
background:linear-gradient(180deg,#140f24,#0a0816);
border:1px solid rgba(255,255,255,0.05);
}

.step span{
font-size:28px;
color:#22c55e;
font-weight:700;
}

/* featured */
.featured-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
margin-top:30px;
}

.release-card{
background:#0d0c18;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.05);
}

.release-card img{
width:100%;
height:180px;
object-fit:cover;
}

.release-card h4{
padding:10px 14px 0;
}

.release-card p{
padding:0 14px 14px;
color:#aaa;
}

/* CTA */
.cta{
text-align:center;
background:linear-gradient(120deg,#1e0b35,#0c0618);
border-radius:24px;
}
.footer {
background: linear-gradient(180deg, #0b0b14 0%, #050509 100%);
padding: 80px 20px 30px;
color: #d1d5db;
position: relative;
overflow: hidden;
}

/* subtle glow background */
.footer::before {
content: "";
position: absolute;
top: -150px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(168,85,247,0.25), transparent 70%);
filter: blur(120px);
opacity: 0.6;
z-index: 0;
}

.footer-grid {
position: relative;
z-index: 1;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 50px;
}

/* Brand Section */
.footer-brand h3 {
font-size: 24px;
font-weight: 800;
background: linear-gradient(90deg, #a855f7, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
}

.footer-brand p {
color: #9ca3af;
line-height: 1.6;
}

/* Headings */
.footer h4 {
color: #ffffff;
font-size: 16px;
margin-bottom: 15px;
font-weight: 600;
}

/* Links */
.footer a {
display: block;
text-decoration: none;
color: #9ca3af;
margin-bottom: 10px;
transition: all 0.3s ease;
font-size: 14px;
}

.footer a:hover {
color: #a855f7;
transform: translateX(4px);
}

/* Divider */
.footer-bottom {
margin-top: 60px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: center;
font-size: 14px;
color: #6b7280;
}

/* Mobile spacing */
@media (max-width: 600px) {
.footer {
padding: 60px 20px 25px;
}

.footer-grid {
gap: 35px;
}
}

/* mobile fix */
@media (max-width:768px){

.hero{
height:85vh;
}

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

}

/* ===== FAQ SECTION FOR HOMEPAGE ===== */

.faq-hero{
width:100%;
text-align:center;
padding:80px 20px 40px;
margin-top:40px;
}

.faq-hero h1{
font-size:40px;
font-weight:700;
background:linear-gradient(90deg,#8b5cf6,#a855f7,#6366f1);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:10px;
}

.faq-hero p{
max-width:650px;
margin:auto;
opacity:0.85;
line-height:1.7;
font-size:16px;
}

/* CATEGORY BUTTONS */

.faq-categories{
margin-top:30px;
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
}

.faq-categories button{
padding:12px 22px;
border-radius:30px;
border:1px solid #7c3aed;
background:rgba(255,255,255,0.02);
color:#a78bfa;
cursor:pointer;
font-size:14px;
transition:0.3s;
backdrop-filter:blur(8px);
}

.faq-categories button:hover{
background:#7c3aed;
color:white;
box-shadow:0 0 18px rgba(124,58,237,0.6);
}

.faq-categories button.active{
background:#7c3aed;
color:white;
box-shadow:0 0 20px rgba(124,58,237,0.7);
}

/* FAQ MAIN CONTAINER */

.faq-container{
width:100%;
max-width:800px;
margin:auto;
padding:10px 20px 80px;
}

/* FAQ CARD */

.faq-item{
background:rgba(18,18,40,0.55);
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
margin-bottom:14px;
overflow:hidden;
transition:0.3s;
backdrop-filter:blur(12px);
}

.faq-item:hover{
border-color:#7c3aed;
box-shadow:0 0 18px rgba(124,58,237,0.25);
}

/* QUESTION */

.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 22px;
cursor:pointer;
font-weight:500;
font-size:16px;
}

.faq-question span{
color:#f1f5f9;
}

/* ICON */

.icon{
font-size:22px;
color:#a78bfa;
transition:0.25s;
}

/* ANSWER */

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.45s ease;
padding:0 22px;
}

.faq-answer span{
display:block;
padding-bottom:20px;
color:#cbd5e1;
line-height:1.7;
font-size:15px;
}

/* OPEN STATE */

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

/* MOBILE */

@media (max-width:768px){

.faq-hero{
padding:60px 20px 30px;
}

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

.faq-question{
font-size:15px;
}

}

/* SMALL MOBILE */

@media (max-width:480px){

.faq-categories{
gap:8px;
}

.faq-categories button{
padding:10px 16px;
font-size:13px;
}

    }