/* Космическая неоновая визитка. Всё редактируется в contacts.json + в script.js (название/слоган) */

:root{
  --bg0:#050716;
  --bg1:#070a1f;
  --card:#0b1026cc;
  --stroke:#8bf7ff33;
  --text:#e9f1ff;
  --muted:#b8c4ffcc;

  --c1:#00e5ff;
  --c2:#ff3df5;
  --c3:#a78bfa;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 15%, #1b2a8a33, transparent 55%),
              radial-gradient(1000px 700px at 80% 30%, #a300ff22, transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:0; z-index:-1;
}
.bg__image{
  position:absolute; inset:-2%;
  background:
    radial-gradient(1200px 900px at 65% 40%, rgba(0,229,255,.12), transparent 55%),
    radial-gradient(900px 700px at 35% 55%, rgba(255,61,245,.10), transparent 60%),
    url("assets/astronaut.jpg") center/cover no-repeat;
  filter:saturate(1.15) contrast(1.05);
  transform: scale(1.02);
}
.bg__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 50% 40%, rgba(0,0,0,.30), rgba(0,0,0,.70)),
    linear-gradient(180deg, rgba(7,10,31,.20), rgba(5,7,22,.75));
  pointer-events:none;
}
.bg__noise{
  position:absolute; inset:0;
  background-image: url("assets/noise.png");
  opacity:.10;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.bg__stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(2px 2px at 55% 50%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,.35), transparent 60%);
  opacity:.55;
  animation: twinkle 6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes twinkle{
  0%,100%{ opacity:.50; }
  50%{ opacity:.75; }
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 18px;
}

.card{
  width:min(680px, 100%);
  background: linear-gradient(180deg, rgba(11,16,38,.80), rgba(11,16,38,.55));
  border: 1px solid rgba(139,247,255,.20);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 22px 18px 16px;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,229,255,.22), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,61,245,.20), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(167,139,250,.18), transparent 40%);
  filter: blur(10px);
  transform: rotate(12deg);
  pointer-events:none;
}

.header{ position:relative; }
.brand{
  display:flex;
  gap: 14px;
  align-items:center;
}
.brand__logo{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(139,247,255,.30);
  background: linear-gradient(135deg, rgba(0,229,255,.20), rgba(255,61,245,.14));
  display:grid; place-items:center;
  box-shadow: 0 10px 30px rgba(0,229,255,.10);
}
.brand__dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--c1));
  box-shadow: 0 0 12px rgba(0,229,255,.8), 0 0 24px rgba(0,229,255,.35);
}
.brand__text h1{
  margin:0;
  font-size: 20px;
  letter-spacing: .2px;
  font-weight: 800;
}
.brand__text p{
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}

.cta{
  position:relative;
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.btn{
  position:relative;
  width:100%;
  border:none;
  border-radius: 18px;
  padding: 16px 16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing:.2px;
  font-size: 16px;
  color: #061018;
  background: linear-gradient(135deg, rgba(0,229,255,.95), rgba(255,61,245,.95));
  box-shadow:
    0 18px 45px rgba(0,229,255,.18),
    0 18px 45px rgba(255,61,245,.14);
  transition: transform .12s ease, filter .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active{ transform: translateY(1px) scale(.998); }
.btn:focus-visible{
  outline: 2px solid rgba(0,229,255,.8);
  outline-offset: 2px;
}

.btn__glow{
  position:absolute; inset:-2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,229,255,.45), rgba(255,61,245,.35));
  filter: blur(14px);
  opacity:.55;
  z-index:-1;
}
.btn__icon{
  font-size: 18px;
  opacity:.75;
  transform: translateY(1px);
  transition: transform .2s ease;
}

.contacts{
  border: 1px solid rgba(139,247,255,.18);
  border-radius: 18px;
  background: rgba(6,10,26,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}

.contacts__inner{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 14px;
}

.linkBtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,247,255,.14);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.linkBtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(139,247,255,.26);
}
.linkBtn:active{ transform: translateY(1px); }
.linkBtn__left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.pill{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(139,247,255,.20);
  background: linear-gradient(135deg, rgba(0,229,255,.10), rgba(255,61,245,.10));
  display:grid; place-items:center;
  flex: 0 0 auto;
}
.pill svg{ width:18px; height:18px; opacity:.95; }
.linkBtn__label{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.linkBtn__hint{
  color: var(--muted);
  font-size: 12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chev{ opacity:.70; }

.hint{
  margin: 0;
  padding: 10px 14px 14px;
  color: var(--muted);
  font-size: 12.5px;
  border-top: 1px solid rgba(139,247,255,.10);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.hint__dot{
  width: 10px; height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--c3));
  box-shadow: 0 0 12px rgba(167,139,250,.55);
  flex: 0 0 auto;
}

.footer{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(139,247,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  position:relative;
}
.footer__left{ color: rgba(233,241,255,.80); font-size: 12.5px; }
.footer__right{ display:flex; align-items:center; gap: 10px; }
.miniLink{
  color: rgba(233,241,255,.92);
  text-decoration:none;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(139,247,255,.35);
}
.miniLink:hover{ border-bottom-color: rgba(0,229,255,.75); }
.sep{ opacity:.55; }

/* Адаптив */
@media (max-width:420px){
  .brand__text h1{ font-size: 18px; }
  .btn{ font-size: 15px; padding: 15px 14px; }
}