/* === BASE STYLES === */:root{
  --bg:#0a0612;
  --bg2:#150a24;
  --fg:#f4eefc;
  --muted:#a89bc4;
  --c1:#4b1d9e;
  --c2:#ff3ec9;
  --c3:#b27cff;
  --acc:#ffd84d;
  --card:#1a0f2e;
  --card2:#22143d;
  --bord:rgba(178,124,255,.18);
  --sp1:1rem;
  --sp2:2rem;
  --sp3:4rem;
  --rad:18px;
  --rad-lg:28px;
  --shadow:0 30px 60px -20px rgba(255,62,201,.35), 0 10px 30px -10px rgba(75,29,158,.5);
  --shadow-soft:0 20px 40px -15px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100vw}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--fg);
  background:var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 0%,rgba(255,62,201,.18) 0%,transparent 45%),
    radial-gradient(ellipse at 90% 30%,rgba(75,29,158,.35) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 100%,rgba(178,124,255,.15) 0%,transparent 50%);
  background-attachment:fixed;
}
h1,h2,h3,h4{
  font-family:'Syne',sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 1rem;
  color:var(--fg);
}
h1{font-size:clamp(2.4rem,6vw,4.5rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.8vw,3rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.45rem)}
p{margin:0 0 1.1rem;color:#d6cce8}
a{color:var(--c2);text-decoration:none;transition:color .25s}
a:hover{color:var(--acc)}
ul,ol{padding-left:1.2rem}
li{margin-bottom:.55rem;color:#d6cce8}

.cta-button,.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 2rem;
  font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.02em;text-transform:uppercase;
  color:#0a0612;
  background:linear-gradient(135deg,var(--acc) 0%,#ffb347 100%);
  border:none;border-radius:999px;
  box-shadow:0 15px 35px -10px rgba(255,216,77,.5), inset 0 0 0 2px rgba(255,255,255,.2);
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.cta-button:hover,.btn-cta:hover{
  transform:translateY(-3px) scale(1.02);
  color:#0a0612;
  box-shadow:0 25px 50px -10px rgba(255,216,77,.7), inset 0 0 0 2px rgba(255,255,255,.3);
}
.cta-button::after{content:"→";transition:transform .3s}
.cta-button:hover::after{transform:translateX(4px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 1.8rem;
  font-family:'Syne',sans-serif;font-weight:600;
  color:var(--fg);
  background:transparent;
  border:1.5px solid var(--c3);border-radius:999px;
  transition:all .3s;
}
.btn-ghost:hover{background:var(--c3);color:#0a0612}

.info-card,.accordion-item,.highlight-box{
  padding:2rem;
  background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--bord);border-radius:var(--rad-lg);
  box-shadow:var(--shadow-soft);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;
}
.info-card:hover,.highlight-box:hover{
  transform:translateY(-6px);
  border-color:var(--c2);
  box-shadow:0 30px 60px -20px rgba(255,62,201,.4);
}
.highlight-box{
  background:linear-gradient(135deg,rgba(255,62,201,.12) 0%,rgba(75,29,158,.25) 100%);
  border:1px solid rgba(255,62,201,.3);
}

.checklist{list-style:none;padding-left:0}
.checklist li{
  position:relative;
  padding-left:2rem;margin-bottom:.8rem;
}
.checklist li::before{
  content:"";
  position:absolute;left:0;top:.5em;
  width:1.2rem;height:1.2rem;
  background:linear-gradient(135deg,var(--c2),var(--c3));
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,62,201,.15);
}
.checklist li::after{
  content:"";
  position:absolute;left:.4rem;top:.85em;
  width:.4rem;height:.2rem;
  border-left:2px solid #0a0612;border-bottom:2px solid #0a0612;
  transform:rotate(-45deg);
}

.feature-list{list-style:none;padding-left:0}
.feature-list li{
  padding:1rem 1.2rem;margin-bottom:.7rem;
  background:rgba(178,124,255,.06);
  border-left:3px solid var(--c2);border-radius:8px;
  transition:transform .3s,background .3s;
}
.feature-list li:hover{transform:translateX(6px);background:rgba(255,62,201,.1)}

.numbered-list{
  list-style:none;padding-left:0;counter-reset:n;
}
.numbered-list li{
  position:relative;
  padding:1rem 1rem 1rem 4rem;margin-bottom:.8rem;
  background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--bord);border-radius:14px;
  counter-increment:n;
}
.numbered-list li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute;left:1rem;top:50%;
  display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;
  font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;
  color:#0a0612;
  background:linear-gradient(135deg,var(--acc),#ffb347);border-radius:50%;
  transform:translateY(-50%);
}

.content-image{margin:2rem 0;padding:0}
.content-image img{
  display:block;
  width:100%;max-width:100%;height:auto;
  border-radius:var(--rad-lg);
  box-shadow:var(--shadow);
}

section{padding:5rem 0;position:relative}
section .container{position:relative;z-index:2}

.eyebrow{
  display:inline-block;
  padding:.4rem 1rem;margin-bottom:1.2rem;
  font-family:'Syne',sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);
  background:rgba(255,216,77,.08);
  border:1px solid rgba(255,216,77,.3);border-radius:999px;
}

/* === LAYOUT STYLES === */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,6,18,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bord);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;
}
.logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.4rem;
  letter-spacing:-.02em;
  color:var(--fg);
  text-decoration:none;
  background:linear-gradient(135deg,var(--c2),var(--acc));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--bord);border-radius:10px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:22px;height:2px;
  background:var(--fg);
  transition:transform .3s,opacity .3s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.main-nav .nav-list{
  display:flex;align-items:center;gap:2rem;
  margin:0;padding:0;list-style:none;
}
.main-nav a{
  font-family:'Syne',sans-serif;font-weight:600;font-size:.95rem;
  color:var(--fg);text-decoration:none;
  position:relative;
}
.main-nav a::after{
  content:"";
  position:absolute;left:0;bottom:-6px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--c2),var(--acc));
  transition:width .3s;
}
.main-nav a:hover{color:var(--fg)}
.main-nav a:hover::after{width:100%}

.header-inner .cta-button{padding:.7rem 1.4rem;font-size:.85rem}

.site-footer{
  padding:3rem 0 2rem;
  background:#06030c;
  border-top:1px solid var(--bord);
}
.footer-nav ul{
  display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;
  margin:0 0 1.5rem;padding:0;
  list-style:none;
}
.footer-nav a{color:var(--muted);font-weight:500}
.footer-nav a:hover{color:var(--acc)}
.copyright{
  text-align:center;
  font-size:.9rem;color:var(--muted);
  margin:0;
}

@media (max-width:991px){
  .hamburger{display:flex}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    max-height:0;overflow:hidden;
    background:rgba(10,6,18,.98);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--bord);
    transition:max-height .4s ease;
  }
  .main-nav.open{max-height:400px}
  .main-nav .nav-list{
    flex-direction:column;align-items:flex-start;gap:0;
    padding:1rem 1.2rem;
  }
  .main-nav .nav-list li{width:100%;padding:.9rem 0;border-bottom:1px solid var(--bord)}
  .header-inner .cta-button{padding:.6rem 1rem;font-size:.75rem;max-width:200px}
}
@media (max-width:520px){
  .header-inner{gap:.5rem}
  .header-inner .cta-button{padding:.55rem .9rem;font-size:.7rem}
  .logo{font-size:1.15rem}
}

@media (max-width:991px){
  .hamburger{display:flex}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    max-height:0;overflow:hidden;
    background:rgba(10,6,18,.98);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--bord);
    transition:max-height .4s ease;
  }
  .main-nav.open{max-height:400px}
  .main-nav .nav-list{
    flex-direction:column;align-items:flex-start;gap:0;
    padding:1rem 1.2rem;
  }
  .main-nav .nav-list li{width:100%;padding:.9rem 0;border-bottom:1px solid var(--bord)}
  .header-inner .cta-button{padding:.6rem 1rem;font-size:.75rem;max-width:200px}
}

@media (max-width:520px){
  .header-inner{gap:.5rem}
  .header-inner .cta-button{padding:.55rem .9rem;font-size:.7rem}
  .logo{font-size:1.15rem}
}