/* Base */
:root{
  --bg1:#0f1020; --bg2:#182642; --card:#0f1424cc; --accent:#7c5cff; --accent2:#00d4ff;
  --text:#e6e8ee; --muted:#9aa4b2; --success:#16c79a; --ring:#9f8cff55;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text);
  background: radial-gradient(1200px 600px at 10% 10%, #1c2750 0%, transparent 60%),
              radial-gradient(1000px 500px at 90% 20%, #142038 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}

@keyframes floaty{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(10px,-14px,0) scale(1.03) }
  100%{ transform:translate3d(0,0,0) scale(1) }
}

@keyframes floaty2{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(-14px,10px,0) scale(1.04) }
  100%{ transform:translate3d(0,0,0) scale(1) }
}

/* Background orbs */
.bg::before,.bg::after{
  content:""; position:fixed; inset:auto; width:28rem; height:28rem; filter:blur(80px); z-index:0;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 60%);
  animation: floaty 9s ease-in-out infinite;
}
.bg::after{ right:-6rem; bottom:-6rem; background: radial-gradient(circle at 70% 70%, var(--accent2) 0%, transparent 60%); animation: floaty2 11s ease-in-out infinite }

.container{ position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:72px 24px 40px }
.header{ text-align:center; margin-bottom:34px }
.header h1{ margin:0 0 10px; font-size:clamp(26px,4vw,44px) }
.header p{ margin:0; color:var(--muted) }

.section{ margin-top:22px }
.section + .section{ margin-top:20px }

.hero{
  padding:28px;
}

.card{
  backdrop-filter:saturate(140%) blur(14px); background:var(--card); border:1px solid #ffffff14; border-radius:18px;
  padding:22px; box-shadow:0 10px 30px #0008, inset 0 1px 0 #ffffff18;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 40px #0009, inset 0 1px 0 #ffffff18;
  border-color:#ffffff22;
}

.field-group{ margin-bottom:14px }
.field-group label{ display:block; margin-bottom:8px; color:var(--muted); font-weight:600 }
.field{ display:flex; gap:10px; align-items:center }
.field input{ flex:1; padding:14px 14px; border-radius:12px; border:1px solid #ffffff1a; background:#0b1222; color:var(--text);
  outline:none; box-shadow: inset 0 0 0 1px transparent; transition:box-shadow .2s, border-color .2s }
.field input:focus{ border-color:var(--ring); box-shadow:0 0 0 6px var(--ring) }

.actions{ display:flex; gap:8px }
.btn{ appearance:none; border:none; border-radius:12px; padding:12px 14px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  color:#fff; background:#2b3247; transition:transform .12s ease, background .2s, box-shadow .2s, filter .2s }
.btn:hover{ transform:translateY(-2px); filter:saturate(1.1) }
.btn:active{ transform:translateY(-1px) scale(.99) }
.btn.primary:hover{ box-shadow:0 10px 26px #0008 }
.btn.success:hover{ box-shadow:0 10px 26px #0008 }
.btn.primary{ background:linear-gradient(135deg, var(--accent), #5a8fff) }
.btn.ghost{ background:#1b2238 }
.btn.success{ background:linear-gradient(135deg, var(--success), #22e1b9) }

.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none }

hr{ border:none; height:1px; background:#ffffff14; margin:16px 0 }

.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px }
@media (max-width: 820px){ .grid-2{ grid-template-columns:1fr } }

.options{ display:flex; flex-direction:column; gap:12px; padding:10px 12px; border:1px solid #ffffff12; border-radius:14px; background:#0b1222aa }
.option{ display:flex; flex-direction:column; gap:8px }
.option.cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; align-items:center }
.option label{ display:flex; gap:8px; align-items:center; color:#cbd5e1 }

.save{ display:flex; justify-content:flex-end; margin-top:10px }
.footer{ text-align:center; margin-top:16px; color:var(--muted); font-size:14px }

/* Pricing */
.pricing{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px }
.price-card{ border:1px solid #ffffff12; background:#0b1222aa; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.price-title{ font-weight:700 }
.price-cost{ color:#cbd5e1; margin-top:-4px }
.price-btn{ width:100%; justify-content:center }
@media (max-width: 820px){ .pricing{ grid-template-columns:1fr } }

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .bg::before,.bg::after{ animation:none !important }
  .card,.btn,.reveal{ transition:none !important }
  .reveal{ opacity:1 !important; transform:none !important }
}

/* Mobile */
@media (max-width: 820px){
  .container{ padding:44px 16px 28px }
  .hero{ padding:18px }
  .header{ margin-bottom:22px }
  .header h1{ font-size:clamp(24px,7vw,36px) }
}

@media (max-width: 520px){
  .container{ padding:36px 14px 22px }
  .card{ padding:16px }
  .price-card{ padding:14px }
  .btn{ width:100%; padding:13px 14px }
  .actions{ width:100% }
  .header-actions{ width:100% }
  .header-actions .btn{ width:100% }
  .pricing{ gap:10px }
  hr{ margin:14px 0 }
}

@media (max-width: 420px){
  .bg::before,.bg::after{ width:20rem; height:20rem; filter:blur(70px) }
  .section{ margin-top:16px }
  .section + .section{ margin-top:14px }
}

/* Touch devices: не дёргать карточки/кнопки */
@media (hover: none){
  .card:hover{ transform:none }
  .btn:hover{ transform:none }
}