:root{
  --bg1: #0f1b21;
  --bg2: #171d23;
  --card: rgba(16,22,27,0.7);
  --accent: #00f0ff;
  --muted: rgba(255,255,255,0.6);
  --glass: rgba(255,255,255,0.02);
  --glass-2: rgba(255,255,255,0.03);
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
  --radius: 14px;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#081017 0%, #15171b 100%);color:#e6eef6}
a{color:inherit;text-decoration:none}
.topbar{
  position:fixed;left:0;right:0;top:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.25));backdrop-filter: blur(4px);
  z-index:40;box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.brand a{color:var(--accent);font-weight:800;font-size:20px}
.nav a{margin-left:18px;color:#dfeaf4;opacity:0.8}
.nav a.active{opacity:1;font-weight:700}
main{padding-top:96px;padding-bottom:60px;min-height:calc(100vh - 160px)}

/* Hero */
.hero{max-width:1100px;margin:30px auto 40px;padding:80px 28px 40px;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:22px;box-shadow:var(--shadow)}
.neon{color:var(--accent);font-size:34px;text-shadow:0 6px 18px rgba(0,240,255,0.08), 0 0 18px rgba(0,240,255,0.06);margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 16px;font-weight:500}

/* Button */
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:linear-gradient(90deg,#6e6ef5,#a67cf7);color:white;font-weight:600;box-shadow:0 8px 18px rgba(100,80,180,0.16)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#dfeaf4}
.btn.big{padding:14px 26px;border-radius:12px;font-size:16px}
.centered{text-align:center}

/* Cards and content boxes */
.card{max-width:980px;margin:30px auto;padding:26px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.08));box-shadow: 0 10px 40px rgba(0,0,0,0.7)}
.large-card{padding:40px}
.profile-card{max-width:840px}
.order-card{max-width:680px}
.centered.card{display:block}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:18px}
.services-grid.big{grid-template-columns:repeat(4,1fr)}
.service{background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(255,255,255,0.01));padding:22px;border-radius:14px;box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.45);text-align:center}
.service h3{margin:0 0 6px;color:#edf4fb}
.price{color:var(--accent);font-weight:700;margin:0}

/* contact */
.contact-list{display:block;margin-top:18px}
.contact-item{background:rgba(255,255,255,0.03);padding:14px;border-radius:10px;margin-bottom:14px;color:var(--muted)}
.accent{color:var(--accent);font-weight:700;margin-right:6px}

/* form */
.form label{display:block;margin:12px 0;color:var(--muted);font-size:14px}
.form input[type="text"], .form input[type="email"], .form select, .form textarea, .form input[type="file"]{
  width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.45);color:#eaf6ff;font-size:14px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)
}

/* profile */
.profile-grid{display:flex;gap:20px;align-items:center}
.avatar{width:120px;height:120px;border-radius:16px;background:linear-gradient(180deg,#0f263a,#09202a);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;color:var(--accent)}
.profile-info h2{margin:0 0 6px}
.muted{color:var(--muted);font-size:14px}
.small-center{text-align:center;color:var(--muted);margin-top:10px}

/* footer and dmca badge */
.footer{padding:20px;text-align:center;opacity:0.9}
.dmca-badge{
  position:fixed;left:18px;bottom:18px;background:rgba(255,255,255,0.06);padding:6px 10px;border-radius:6px;font-size:12px;color:white;box-shadow:0 6px 18px rgba(0,0,0,0.45)
}

/* responsive */
@media (max-width:1000px){
  .services-grid, .services-grid.big{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .services-grid, .services-grid.big{grid-template-columns:1fr}
  .nav{display:none}
  .hero{padding:44px 18px}
  .card{margin:18px}
  .topbar{padding:0 14px}
}