:root {
  --bg:#060614;
  --txt:#f5f3ff;
  --muted:#aaa7be;
  --line:#9d88ff30;
  --p:#8951ff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:radial-gradient(ellipse 75% 38% at 50% 0,#19155f,#080820 45%,var(--bg));
  color:var(--txt);
  font:16px Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
.wrap {
  width:min(1200px,calc(100% - 42px));
  margin:auto
}
.top {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:sticky;
  top:0;
  z-index:5;
  background:#07071ad9;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  padding:0 max(21px,calc((100% - 1200px)/2))
}
.brand {
  display:flex;
  gap:9px;
  align-items:center
}
.brand i {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,#aa71ff,#3125da);
  box-shadow:0 0 22px #7c4eff9e;
  font-style:normal
}
.brand b {
  font-size:15px
}
.brand small {
  display:block;
  font-size:10px;
  color:#a19db6;
  font-weight:normal;
  margin-top:2px
}
.top nav {
  display:flex;
  gap:15px
}
.top nav a {
  font-size:13px;
  color:#c8c4d9
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:12px 18px;
  border:0;
  border-radius:10px;
  background:linear-gradient(100deg,#7432fa,#ad54ff,#2c82ff);
  color:white;
  font-weight:bold;
  font-size:14px;
  box-shadow:0 10px 30px #6137e466
}
.btn:hover {
  transform:translateY(-2px)
}
section {
  padding-bottom:115px
}
.hero {
  min-height:650px;
  padding-top:55px;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center
}
.kicker {
  display:block;
  color:#ad78ff;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:bold;
  margin-bottom:14px
}
h1 {
  font-size:clamp(43px,5vw,67px);
  line-height:.98;
  letter-spacing:-.06em;
  margin:0 0 20px
}
em {
  font-style:normal;
  background:linear-gradient(100deg,#b375ff,#278aff);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}
.hero p,.heading p {
  max-width:540px;
  color:var(--muted);
  line-height:1.55
}
.actions {
  display:flex;
  gap:12px;
  margin-top:25px
}
.ghost {
  background:#15143cb8;
  border:1px solid #aa94ff88;
  box-shadow:none
}
.trust {
  display:flex;
  gap:18px;
  margin-top:22px;
  color:#c5c1d5;
  font-size:13px
}
.trust span:before {
  content:'✦';
  color:#ae82ff;
  margin-right:6px
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:43px
}
.stats b {
  display:block;
  color:#be79ff;
  font-size:22px
}
.stats small {
  font-size:11px;
  color:#a4a1b9
}
.art {
  height:510px;
  position:relative
}
.art img {
  position:absolute;
  right:-7%;
  width:115%;
  height:100%;
  object-fit:cover;
  border-radius:40px;
  filter:drop-shadow(0 18px 30px #0009);
  mask-image:radial-gradient(ellipse 70% 80% at 56% 50%,#000 53%,transparent 82%)
}
.float {
  position:absolute;
  padding:12px;
  border:1px solid #a48bff99;
  border-radius:12px;
  background:#121247d9;
  box-shadow:0 14px 36px #0008;
  backdrop-filter:blur(12px);
  animation:float 5s ease-in-out infinite alternate
}
.code {
  top:13%;
  left:2%;
  font:11px/1.6 monospace;
  color:#c9c1ff
}
.online {
  top:17%;
  right:0;
  color:#62eaa7;
  font-size:12px
}
.online b {
  color:white
}
.list {
  right:3%;
  bottom:12%;
  line-height:1.8;
  color:#d0b7ff;
  font-size:13px
}
@keyframes float {
  to {
    transform:translateY(-12px)
  }
}
.heading {
  max-width:620px;
  margin-bottom:34px
}
.heading h2 {
  font-size:clamp(32px,4vw,47px);
  line-height:1.05;
  letter-spacing:-.05em;
  margin:0
}
.grid3,.prices,.portfolio,.reviews {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.card {
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(120deg,#12123ce8,#0b0c23bb);
  padding:17px
}
.card:hover {
  border-color:#936bff;
  transform:translateY(-4px)
}
.card h3 {
  font-size:14px;
  margin:8px 0
}
.card p,.project p {
  color:#9b98af;
  font-size:12px;
  line-height:1.4
}
.services {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.service {
  min-height:390px;
  padding:34px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#1c0c52ee,#060d2cdd)
}
.service.host {
  background:linear-gradient(135deg,#063665e8,#060d2cdd)
}
.service h3 {
  font-size:31px;
  line-height:1.05;
  margin:0 0 14px
}
.service p {
  max-width:310px;
  color:#ada9c3;
  line-height:1.5;
  font-size:14px
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:22px 0
}
.tags span {
  font-size:11px;
  padding:6px 8px;
  border:1px solid #b49eff44;
  border-radius:6px;
  background:#9875ff19
}
.service ul,.prices ul {
  padding:0;
  list-style:none;
  color:#d1d5e6;
  font-size:13px;
  line-height:2
}
.service li:before,.prices li:before {
  content:'✓';
  color:#5beaaf;
  margin-right:8px
}
.process {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px
}
.process article {
  border-top:1px solid #815dff;
  padding-top:17px
}
.process i {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#18135f;
  border:1px solid #8760ff;
  color:#cdbdff;
  font-style:normal
}
.process h3 {
  font-size:15px;
  margin:15px 0 6px
}
.process p {
  font-size:12px;
  color:#9b98af;
  line-height:1.4
}
.prices article {
  position:relative;
  padding:27px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#0d0d2bb8
}
.prices .popular {
  border-color:#9561ff;
  background:linear-gradient(150deg,#35177acc,#080d2ddd);
  box-shadow:0 18px 40px #4d23cc55
}
.popular label {
  position:absolute;
  top:-12px;
  left:24px;
  background:linear-gradient(90deg,#7f3dff,#b75cff);
  border-radius:8px;
  padding:5px 9px;
  font-size:10px
}
.prices h3 {
  font-size:19px;
  margin:0
}
.prices p {
  font-size:13px;
  color:#aaa6be
}
.prices strong {
  font-size:30px
}
.outline {
  display:block;
  padding:11px;
  text-align:center;
  border:1px solid #b399ff88;
  border-radius:9px
}
.dashboard {
  padding:18px;
  border:1px solid #8b6eff77;
  border-radius:20px;
  background:linear-gradient(120deg,#12103ddd,#04091ddd)
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.metrics article,.chart,.bots {
  padding:13px;
  border:1px solid #9c89ff22;
  border-radius:9px;
  background:#080a2399
}
.metrics small {
  display:block;
  color:#a09db5;
  font-size:11px
}
.metrics b {
  display:block;
  font-size:23px;
  margin:5px 0
}
.metrics em {
  font-size:11px;
  color:#67e8a4
}
.chart {
  height:180px;
  margin-top:12px;
  background:repeating-linear-gradient(0deg,transparent 0 33px,#a99aff12 34px)
}
.line {
  height:116px;
  margin-top:15px;
  background:linear-gradient(167deg,transparent 48%,#9968ff 49% 51%,transparent 52%),linear-gradient(155deg,transparent 47%,#6d4cff 48% 50%,transparent 51%);
  filter:drop-shadow(0 0 5px #734fff)
}
.bots {
  margin-top:12px
}
.bots div {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #9c89ff22;
  color:#a9a6bd;
  font-size:12px
}
.bots em {
  font-style:normal;
  color:#62eaa7
}
.cap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.cap article {
  padding:16px;
  border:1px solid #927eff38;
  border-radius:11px;
  background:#0d0d2bb8;
  font-size:13px;
  font-weight:bold
}
.cap article:before {
  content:'✦';
  color:#ad89ff;
  margin-right:8px
}
.project {
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0b0c27b8
}
.mock {
  height:158px;
  padding:16px;
  border-radius:9px;
  background:radial-gradient(circle at 20% 20%,#7b4cde,transparent 20%),linear-gradient(135deg,#162052,#0d1030)
}
.project:nth-child(2) .mock {
  background:radial-gradient(circle at 20% 20%,#1d85ef,transparent 20%),linear-gradient(135deg,#162052,#0d1030)
}
.project:nth-child(3) .mock {
  background:radial-gradient(circle at 20% 20%,#c448c4,transparent 20%),linear-gradient(135deg,#162052,#0d1030)
}
.mock b {
  font-size:25px
}
.project h3 {
  font-size:16px;
  margin:13px 0 5px
}
.reviews article {
  padding:20px;
  border:1px solid #9984ff2e;
  border-radius:13px;
  background:#0c0c25bb
}
.reviews small {
  color:#aaa7bd;
  font-size:11px
}
.reviews em {
  float:right;
  color:#f5c85e;
  font-size:11px
}
.reviews p {
  color:#c3bfd1;
  font-size:13px;
  line-height:1.5
}
.faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px
}
.faq-list {
  border-top:1px solid var(--line)
}
.faq-item {
  border-bottom:1px solid var(--line)
}
.faq-item button {
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  background:none;
  border:0;
  color:var(--txt);
  font-weight:bold;
  text-align:left
}
.faq-item p {
  display:none;
  color:#b1aec3;
  line-height:1.5;
  font-size:14px
}
.faq-item.active p {
  display:block
}
.contact {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  padding:50px;
  margin-bottom:90px;
  border:1px solid #8f72ff77;
  border-radius:22px;
  background:radial-gradient(circle at 85% 30%,#3d69ff47,transparent 30%),linear-gradient(115deg,#291367,#11194c)
}
.contact h2 {
  font-size:40px;
  line-height:1.06;
  margin:0
}
.contact p {
  color:#c0bcd2;
  line-height:1.5
}
.contact form {
  display:grid;
  gap:12px;
  padding:20px;
  border:1px solid #b9a4ff44;
  border-radius:13px;
  background:#05071e99
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.contact label {
  font-size:11px;
  color:#c3bed2;
  display:grid;
  gap:6px
}
.contact input,.contact select,.contact textarea {
  width:100%;
  padding:10px;
  border:1px solid #b1a3ff38;
  border-radius:7px;
  background:#121338dd;
  color:white
}
.contact textarea {
  height:75px;
  resize:vertical
}
.note {
  display:none;
  padding:10px;
  background:#3de18b19;
  color:#8cf3be;
  font-size:12px
}
footer {
  border-top:1px solid #9b87ff33;
  padding:30px 0;
  color:#89869b;
  font-size:11px
}
.foot {
  display:flex;
  justify-content:space-between
}
@media(max-width:850px) {
  .top nav {
    display:none
  }
  .hero,.contact,.faq {
    grid-template-columns:1fr
  }
  .art {
    height:410px
  }
  .grid3,.cap {
    grid-template-columns:repeat(2,1fr)
  }
  .services {
    grid-template-columns:1fr
  }
  .process {
    grid-template-columns:repeat(2,1fr)
  }
  .portfolio,.reviews {
    grid-template-columns:1fr
  }
  .contact {
    gap:25px
  }
}
@media(max-width:520px) {
  .wrap {
    width:calc(100% - 28px)
  }
  .top {
    padding:0 15px
  }
  .brand small {
    display:none
  }
  .hero {
    min-height:auto
  }
  .actions,.trust {
    flex-direction:column
  }
  .stats {
    grid-template-columns:repeat(2,1fr)
  }
  .art {
    height:320px
  }
  .float {
    transform:scale(.8)
  }
  .code {
    transform-origin:left top
  }
  .online {
    transform-origin:right top;
    right:-8px
  }
  .list {
    transform-origin:right bottom
  }
  .grid3,.cap,.process,.prices {
    grid-template-columns:1fr
  }
  .metrics {
    grid-template-columns:repeat(2,1fr)
  }
  .form-row {
    grid-template-columns:1fr
  }
  .contact {
    padding:26px 18px
  }
  .contact h2 {
    font-size:33px
  }
  .foot {
    flex-direction:column;
    gap:15px
  }
}