:root{
  --bg0:#07010f;
  --text:#F7F2FF;
  --muted: rgba(247,242,255,.78);
  --violet:#B066FF;
  --violet2:#7C2BFF;
  --line: rgba(231,214,255,.22);
  --shadow: 0 22px 80px rgba(0,0,0,.55);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg0);
  min-height:100vh;
}
/* cosmic bg across whole site */
body::before{
  content:"";
  position:fixed; inset:0;
  background: url("../assets/cosmic-bg.png") center/cover no-repeat;
  filter: saturate(1.08) contrast(1.05);
  z-index:-3;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(900px 520px at 55% 15%, rgba(176,102,255,.28), transparent 62%),
    radial-gradient(900px 600px at 20% 70%, rgba(124,43,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.68));
  z-index:-2;
}
.container{width:min(1120px, 92vw); margin: 0 auto;}

a{color:inherit;text-decoration:none}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.45rem;
  border-radius: 12px;
  border:1px solid rgba(231,214,255,.22);
  background: linear-gradient(180deg, rgba(176,102,255,.28), rgba(11,5,18,.28));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  font-weight: 900;
  letter-spacing: .2px;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(176,102,255,.95), rgba(124,43,255,.92));
  border-color: rgba(255,255,255,.22);
}
.btn:hover{transform: translateY(-1px); transition: .15s ease}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  background: rgba(8,2,14,.55);
  border-bottom: 1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding: .85rem 0; gap:1rem}
.nav .links{display:flex; gap:1.4rem; align-items:center; font-weight: 850; opacity:.95}
.nav .links a{padding:.4rem .5rem; border-radius: 10px; border:1px solid transparent}
.nav .links a:hover{border-color: rgba(231,214,255,.18); background: rgba(11,5,18,.25)}
.nav .right{display:flex; gap:.65rem; align-items:center}
.lang{display:flex; border:1px solid rgba(231,214,255,.18); border-radius: 12px; overflow:hidden}
.lang button{background:transparent;border:0;color:var(--text);padding:.45rem .7rem;font-weight:950;cursor:pointer;opacity:.8}
.lang button.active{background: rgba(176,102,255,.20); opacity:1}

.hero{
  position: relative;
  padding: 2.6rem 0 1.2rem;
}
.hero .hero-bg{
  border-radius: 28px;
  overflow:hidden;
  border:1px solid rgba(231,214,255,.22);
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.20);
}
.hero .hero-top{
  position: relative;
  background: url("../assets/hero-wide.jpg") center/cover no-repeat;
  min-height: 520px;
}
.hero .hero-top::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.62));
}
.hero .hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding: 2rem 1.2rem;
}
.hero h1{
  margin: 0 0 .55rem;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  letter-spacing: -1px;
  text-shadow: 0 20px 80px rgba(0,0,0,.65);
}
.hero .kicker{
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  font-weight: 950;
  opacity: .98;
}
.hero .line{
  margin-top: .65rem;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: .9rem;
  opacity:.88;
}
.hero .cta{margin-top: 1.25rem; display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center}

.services-bar{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:.8rem;
  padding: 1.1rem 1.1rem 1.25rem;
  background: rgba(8,2,14,.45);
  border-top: 1px solid rgba(231,214,255,.14);
}
.service-item{display:flex; gap:.55rem; align-items:center; justify-content:center; font-weight: 950; opacity:.95}
.service-item img{width:42px;height:42px}
.service-item span{font-size:.95rem}

.section{padding: 2.2rem 0 0}
.section-title{text-align:center;}
.section-title h2{margin:0; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing:-.6px}
.section-title p{margin:.35rem 0 0; color: var(--muted)}
.divider{
  width:min(720px, 86vw);
  height:1px;
  margin: 1.2rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(176,102,255,.75), transparent);
  opacity:.9;
}

.pricing-grid{
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.card{
  border-radius: 20px;
  border: 1px solid rgba(231,214,255,.22);
  background: linear-gradient(180deg, rgba(11,5,18,.62), rgba(11,5,18,.32));
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  overflow:hidden;
}
.card .head{
  padding: 1.2rem 1.2rem .5rem;
  text-align:center;
  font-weight: 950;
  font-size: 1.35rem;
}
.card .price{
  text-align:center;
  font-weight: 950;
  padding: .2rem 1.2rem 1rem;
}
.card .price .num{font-size: 3.1rem; letter-spacing:-1px}
.card .price .per{opacity:.85; font-weight:900}
.card ul{list-style:none; padding: 0 1.35rem 1.2rem; margin:0; color: var(--muted); font-weight: 800}
.card li{margin:.55rem 0; display:flex; gap:.55rem; align-items:center}
.card li::before{content:"✓"; color: rgba(176,102,255,.95); font-weight: 950}
.card .action{padding: 0 1.2rem 1.35rem; display:flex; justify-content:center}
.card.featured{border-color: rgba(176,102,255,.65); box-shadow: 0 26px 100px rgba(176,102,255,.18), 0 18px 80px rgba(0,0,0,.45)}

.why-grid{
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.why-card{padding: 1.2rem}
.why-card .t{display:flex; gap:.7rem; align-items:center; font-weight: 950; font-size:1.25rem}
.why-card .t img{width:44px;height:44px}
.why-card p{margin:.65rem 0 0; color: var(--muted); font-weight: 750; line-height:1.55}

.contact-grid{
  margin-top: 1.4rem;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.1rem;
}
.field{display:grid; gap:.35rem; margin-bottom:.75rem}
label{font-weight: 900; opacity:.95}
input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(231,214,255,.20);
  background: rgba(8,2,14,.40);
  color: var(--text);
  padding: .85rem .9rem;
  outline:none;
}
textarea{min-height: 120px; resize: vertical}
.footer{padding: 2rem 0 2.2rem; border-top: 1px solid rgba(231,214,255,.14); margin-top: 2.2rem; color: rgba(247,242,255,.75)}

@media (max-width: 980px){
  .nav .links{display:none}
  .services-bar{grid-template-columns: repeat(3, 1fr)}
  .pricing-grid{grid-template-columns: 1fr}
  .why-grid{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .hero .hero-top{min-height: 460px}
}