/* 1rem = 10px макета; вся вёрстка масштабируется через размер шрифта html */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(13px, 0.6vw + 8px, 17px);
  background: #1d1d1d;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #fff;
  background: #1d1d1d;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Фон: пульсирующие эллипсы ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
  will-change: transform, opacity;
  animation:
    pulse var(--pd, 9s) ease-in-out var(--pl, 0s) infinite alternate,
    drift var(--dd, 15s) ease-in-out var(--pl, 0s) infinite alternate;
}

.b1 { /* бирюзово-синий центр */
  left: 50%; top: 48%;
  width: 50vmax; height: 50vmax;
  background: radial-gradient(closest-side, rgba(40, 136, 172, .75), rgba(40, 136, 172, 0));
  --pd: 4.5s; --dd: 9s;  --pl: -2s; --dx: 5vmax;   --dy: -2.5vmax;
}
.b2 { /* синий слева снизу */
  left: 38%; top: 60%;
  width: 50vmax; height: 50vmax;
  background: radial-gradient(closest-side, rgba(24, 96, 160, .7), rgba(24, 96, 160, 0));
  --pd: 5.5s; --dd: 11s; --pl: -4s; --dx: -4.5vmax; --dy: 3vmax;
}
.b3 { /* фиолетовый справа */
  left: 63%; top: 56%;
  width: 50vmax; height: 50vmax;
  background: radial-gradient(closest-side, rgba(112, 76, 204, .68), rgba(112, 76, 204, 0));
  --pd: 4s;   --dd: 8s;  --pl: -1s; --dx: 4vmax;   --dy: 4vmax;
}
.b4 { /* бирюзовый акцент сверху */
  left: 47%; top: 38%;
  width: 50vmax; height: 50vmax;
  background: radial-gradient(closest-side, rgba(34, 164, 174, .5), rgba(34, 164, 174, 0));
  --pd: 6s;   --dd: 10s; --pl: -5s; --dx: 5vmax;   --dy: 2.5vmax;
}

@keyframes pulse {
  from { scale: .88;  opacity: .5; }
  to   { scale: 1.25; opacity: 1; }
}

@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 2vmax), var(--dy, 2vmax)); }
}

/* ---------- Карточка ---------- */
.card {
  position: relative;
  z-index: 1;
  width: min(44.2rem, 100%);
  padding: 2.85rem 2.55rem 2.95rem 3.25rem;
  border: 1px solid #363636;
  border-radius: 3.5rem;
  background: rgba(16, 16, 16, .2);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  overflow: hidden;
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .4rem 1rem;
}

.name {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
}

.sub {
  margin: .2rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.37;
  color: rgba(255, 255, 255, .5);
}

.contacts {
  margin: 1.4rem 0 0 auto;
  text-align: right;
}

.contacts-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.37;
}

.tg {
  display: inline-block;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.37;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .49);
  text-decoration-thickness: 4%;
  text-underline-offset: .15em;
  transition: text-shadow .3s ease, text-decoration-color .3s ease;
}

.tg:hover,
.tg:focus-visible {
  text-decoration-color: rgba(255, 255, 255, .95);
  text-shadow: 0 0 .9rem rgba(160, 212, 255, .75);
  outline: none;
}

.section { margin-top: .9rem; }

.section h2 {
  margin: 0 0 .2rem;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.37;
}

.exp-section { margin-top: .9rem; }

/* ---------- Плашки ---------- */
.plate {
  border: 1px solid rgba(182, 182, 182, .22);
  border-radius: 1rem;
  padding: .6rem .8rem;
  background: rgba(212, 212, 212, .04);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.plate:hover,
.plate.is-active,
.plate:focus-visible {
  background: rgba(220, 235, 255, .09);
  border-color: rgba(200, 225, 255, .6);
  box-shadow: 0 0 1.4rem rgba(140, 200, 255, .22), inset 0 0 .9rem rgba(255, 255, 255, .05);
}

.about { display: flex; flex-direction: column; gap: .5rem; }
.about p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.21; }
.about-1 { min-height: 4.2rem; }
.about-2 { min-height: 6.4rem; }

.exp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .6rem;
}

.exp-item {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-image: linear-gradient(75deg, rgba(63, 63, 63, .1), rgba(102, 102, 102, .1));
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.37;
  white-space: nowrap;
}

.info-icon {
  flex: none;
  color: rgba(255, 255, 255, .38);
  transition: color .3s ease;
}

.exp-item:hover .info-icon,
.exp-item.is-active .info-icon,
.exp-item:focus-visible .info-icon {
  color: rgba(200, 230, 255, .95);
}

.period {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}

/* ---------- Попап с описанием ---------- */
.tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: max-content;
  max-width: min(22rem, calc(100vw - 16px));
  padding: .8rem 1rem;
  border: 1px solid rgba(200, 225, 255, .28);
  border-radius: 1.2rem;
  background: rgba(16, 16, 16, .2);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  box-shadow: 0 0 2rem rgba(120, 180, 255, .18), 0 1rem 2.5rem rgba(0, 0, 0, .45);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .85);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  translate: 0 .4rem;
  transition: opacity .2s ease, translate .2s ease, visibility 0s linear .2s;
}

.tip.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.tip strong {
  display: block;
  margin-bottom: .2rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  color: #fff;
}

/* ---------- Появление при открытии ---------- */
.js .bg,
.js .card,
.js .reveal { opacity: 0; }

.js.loaded .bg { animation: fade 1.8s ease both; }
.js.loaded .card { animation: card-in 1s var(--ease-out) both; }
.js.loaded .reveal {
  animation: rise .9s var(--ease-out) calc(.35s + var(--i, 0) * .08s) both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes card-in {
  from { opacity: 0; scale: .96; translate: 0 1rem; }
  to   { opacity: 1; scale: 1;   translate: 0 0; }
}

@keyframes rise {
  from { opacity: 0; translate: 0 1.4rem; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;      filter: none; }
}

/* ---------- Мобильные ---------- */
@media (max-width: 560px) {
  body { padding: 12px; }
  .card { padding: 2.4rem 2rem 2.6rem; border-radius: 2.8rem; }
  .exp { grid-template-columns: 1fr; }
  .about-1, .about-2 { min-height: 0; }
}

/* ---------- Без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .js .bg, .js .card, .js .reveal { opacity: 1; }
  .js.loaded .bg, .js.loaded .card, .js.loaded .reveal { animation: none; }
  .plate, .tg, .tip, .info-icon { transition: none; }
}