/* ============ 04 EMAIL (тёмный почтовый клиент) ============ */
.mail {
  position: relative;
  background: #0d0d13;
  color: var(--text);
  padding: 4.5rem 5vw 5rem;
  border-top: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}

.mail::before {
  content: '';
  position: absolute;
  width: 44vw; height: 44vw;
  bottom: -20vw; right: -12vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,110,255,.1) 0%, transparent 65%);
  pointer-events: none;
}

/* шапка блока */
.mail__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 1rem;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 3.5rem;
}

.mail__head span:first-child { color: #9d94ff; font-weight: 700; }
.mail__meta { margin-left: auto; opacity: .5; }

.mail__title {
  position: relative;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 20ch;
  margin-bottom: 1.4rem;
}

.mail__title em {
  font-style: normal;
  color: #9d94ff;
}

.mail__sub {
  max-width: 50ch;
  font-size: .9rem;
  line-height: 1.75;
  color: rgba(232,232,236,.65);
  margin-bottom: 3.5rem;
}

/* сетка: факты + клиент */
.mail__layout {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3.5rem;
  align-items: start;
}

.mail__left { min-width: 0; }

.mail__facts { display: flex; flex-direction: column; gap: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }

.mail-fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1.1rem;
  padding: 1.15rem .3rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.mail-fact__check {
  grid-row: span 2;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #9d94ff;
  color: #9d94ff;
  font-size: .8rem;
}

.mail-fact__name { font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.mail-fact__desc { font-size: .76rem; line-height: 1.6; color: rgba(232,232,236,.55); }

/* заметка о зонах ответственности */
.mail__note {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px dashed rgba(157,148,255,.5);
  border-radius: 12px;
  font-size: .74rem;
  line-height: 1.7;
  color: rgba(232,232,236,.7);
}

.mail__note::before {
  content: 'i ';
  color: #9d94ff;
  font-weight: 700;
}

/* окно почтового клиента */
.mail-client {
  position: sticky;
  top: 4rem;
  background: #15151d;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

.mail-client__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1rem;
  background: #1b1b26;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .72rem;
  color: rgba(232,232,236,.6);
}

.mail-client__dot { width: 9px; height: 9px; border-radius: 50%; background: #2e2e3c; }
.mail-client__dot:first-child { background: #9d94ff; }
.mail-client__folder { margin-left: .8rem; letter-spacing: .1em; }
.mail-client__new {
  margin-left: auto;
  background: #9d94ff;
  color: #0d0d13;
  font-weight: 700;
  border-radius: 99px;
  padding: .3rem .9rem;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* мета-строки письма */
.mail-meta { border-bottom: 1px solid rgba(255,255,255,.1); }

.mail-meta__row {
  display: flex;
  gap: 1rem;
  padding: .55rem 1.2rem;
  font-size: .74rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}

.mail-meta__row:last-child { border-bottom: none; }
.mail-meta__key { color: rgba(232,232,236,.45); min-width: 3.2rem; }
.mail-meta__val b { color: #9d94ff; font-weight: 700; }

/* тело письма — светлое */
.mail-letter {
  background: #f6f5f1;
  color: #1c1c22;
  margin: 1.2rem;
  border-radius: 10px;
  padding: 1.8rem 1.6rem;
  font-family: var(--mono);
}

.mail-letter__pre {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(28,28,34,.45);
  margin-bottom: 1.2rem;
}

.mail-letter__hero {
  border-radius: 8px;
  background: linear-gradient(130deg, #1c1c22 0%, #2a2a3e 70%, #3a3a58 100%);
  color: #f6f5f1;
  padding: 1.6rem 1.4rem;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
}

.mail-letter__hero::after {
  content: '@';
  position: absolute;
  right: -8px; bottom: -28px;
  font-size: 6rem;
  color: rgba(157,148,255,.35);
  font-weight: 700;
}

.mail-letter__hero-title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.25;
  text-transform: uppercase;
  max-width: 22ch;
  position: relative;
}

.mail-letter__hero-accent { color: #b0a8ff; }

.mail-letter__text {
  font-size: .76rem;
  line-height: 1.75;
  color: rgba(28,28,34,.75);
  margin-bottom: 1.2rem;
  max-width: 46ch;
}

.mail-letter__btn {
  display: inline-block;
  background: #1c1c22;
  color: #f6f5f1;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: .8rem 1.7rem;
  transition: background .25s, transform .25s;
}

.mail-letter__btn:hover { background: #9d94ff; color: #0d0d13; transform: translateY(-2px); }

.mail-letter__foot {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(28,28,34,.15);
  font-size: .6rem;
  color: rgba(28,28,34,.45);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* адаптив */
@media (max-width: 960px) {
  .mail__layout { grid-template-columns: 1fr; }
  .mail-client { position: static; }
}


/* ============ КАРУСЕЛЬ ПИСЕМ ============ */
.mail-slider {
  position: sticky;
  top: 4rem;
  background: #15151d;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

.mail-slider__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1rem;
  background: #1b1b26;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .72rem;
  color: rgba(232,232,236,.6);
}

.mail-slider__dot-deco { width: 9px; height: 9px; border-radius: 50%; background: #2e2e3c; }
.mail-slider__dot-deco:first-child { background: #9d94ff; }
.mail-slider__folder { margin-left: .8rem; letter-spacing: .1em; }

.mail-slider__new {
  margin-left: auto;
  background: #9d94ff;
  color: #0d0d13;
  font-weight: 700;
  border-radius: 99px;
  padding: .3rem .9rem;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mail-slider__viewport { overflow: hidden; }

.mail-slider__track {
  display: flex;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}

.mslide { flex: 0 0 100%; padding: 1.2rem; }

/* --- каркас письма --- */
.ml {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 400px;
  border-radius: 12px;
  padding: 1.5rem 1.4rem 1.1rem;
  overflow: hidden;
  font-family: var(--mono);
}

.ml__tag {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
}

.ml__subject { font-weight: 700; font-size: .92rem; }

.ml__hero {
  border-radius: 10px;
  padding: 1.5rem 1.3rem;
  position: relative;
  overflow: hidden;
}

.ml__hero-title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  text-transform: uppercase;
  position: relative;
}

.ml__text { font-size: .76rem; line-height: 1.7; opacity: .8; max-width: 44ch; }

.ml__btn {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: .75rem 1.6rem;
  margin-top: auto;
  cursor: default;
  transition: transform .25s;
}

.ml:hover .ml__btn { transform: translateY(-2px); }

.ml__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .8rem;
  border-top: 1px solid currentColor;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .45;
}

/* --- 1 · воздушное --- */
.ml--soft {
  background: linear-gradient(150deg, #fdf6f1 0%, #f7edf4 55%, #eef2fa 100%);
  color: #6d4a55;
}

.ml__blobs, .ml__blobs::before, .ml__blobs::after {
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
}

.ml__blobs {
  width: 150px; height: 150px;
  top: -40px; right: -30px;
  background: rgba(244, 183, 196, .5);
  animation: float 9s ease-in-out infinite;
}

.ml__blobs::before {
  content: '';
  width: 110px; height: 110px;
  top: 110px; left: -100px;
  background: rgba(183, 205, 244, .45);
  animation: float 12s ease-in-out infinite reverse;
}

.ml__blobs::after {
  content: '';
  width: 80px; height: 80px;
  top: 160px; left: -20px;
  background: rgba(250, 222, 190, .5);
}

.ml--soft .ml__hero { background: linear-gradient(130deg, #f7dbe2, #e3d9f2); }
.ml--soft .ml__hero-title { color: #a4576a; }
.ml--soft .ml__btn { background: #a4576a; color: #fdf6f1; }
.ml--soft .ml__hero { border-radius: 20px; }

/* --- 2 · строгое --- */
.ml--strict { background: #ffffff; color: #14141a; }
.ml--strict .ml__hero { background: var(--ink); color: var(--light); border-radius: 4px; }
.ml--strict .ml__hero-title { color: var(--accent); }
.ml--strict .ml__btn { background: var(--ink); color: var(--light); border-radius: 4px; }
.ml--strict .ml__foot { border-top-style: dashed; }

/* --- 3 · тёмное --- */
.ml--dark {
  background: #101017;
  color: #e8e8ec;
  border: 1px solid rgba(255,255,255,.12);
}

.ml--dark .ml__hero { background: linear-gradient(130deg, #1c1c26, #26263a); }
.ml--dark .ml__hero-title { color: var(--accent); text-shadow: 0 0 20px rgba(184,255,60,.3); }
.ml--dark .ml__btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.ml--dark .ml__foot { color: #58ffa5; }

/* --- 4 · промо --- */
.ml--promo {
  background: linear-gradient(140deg, #ff8a00 0%, #ff5f6d 100%);
  color: #fff;
}

.ml--promo .ml__hero { background: rgba(0,0,0,.28); border-radius: 16px; }
.ml--promo .ml__btn { background: #fff; color: #e14e3a; }
.ml--promo .ml__foot { opacity: .6; }

/* --- навигация --- */
.mail-slider__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  background: #1b1b26;
}

.mail-slider__btn {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: var(--text);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}

.mail-slider__btn:hover {
  border-color: #9d94ff;
  color: #9d94ff;
  background: rgba(157,148,255,.08);
}

.mail-slider__dots {
  margin: 0 auto;
  display: flex;
  gap: .55rem;
}

.mail-slider__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: background .25s, transform .25s;
}

.mail-slider__dot.is-active {
  background: #9d94ff;
  transform: scale(1.35);
}

/* адаптив карусели */
@media (max-width: 960px) {
  .mail-slider { position: static; }
  .ml { min-height: 360px; }
}