* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --yellow: #FFC226;
  --black: #111111;
  --gray: #9a9a9a;
  --line: rgba(17, 17, 17, 0.12);
  --edge: 64px; /* единая сетка отступов, как в шаблоне Презентатора */
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #fff;
  color: var(--black);
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  text-transform: uppercase;
}

::selection { background: var(--yellow); color: var(--black); }

#deckRoot { position: relative; width: 100%; height: 100%; }

/* ---- каждый слайд — полноэкранный, накрывает предыдущий ---- */
.slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: #fff; color: var(--black);
  z-index: 1;
}
.slide.yellow { background: var(--yellow); }

/* ---- контентная зона слайда: единая сетка отступов со всех сторон ---- */
.slide-pad {
  position: absolute;
  top: var(--edge); right: var(--edge); bottom: var(--edge); left: var(--edge);
  display: flex; align-items: center; justify-content: center;
}

/* ---- ФИКСИРОВАННАЯ ОБВЯЗКА (не листается) ---- */
.chrome-logo {
  position: fixed; top: 40px; left: var(--edge); z-index: 2000;
}
.chrome-logo img { height: 11px; opacity: .85; display: block; }
.chrome-pagenum {
  position: fixed; top: 40px; right: var(--edge); z-index: 2000;
  font-size: 13px; letter-spacing: .26em; font-family: 'Roboto Mono', monospace;
  opacity: .5;
}
.progress-rail {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--line); z-index: 2000;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--black);
  transition: width 0.4s ease;
}
.slide-nav {
  position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; gap: 10px;
}
.slide-nav .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: background .3s ease;
}
.slide-nav .dot.active { background: var(--black); }
/* когда слайд жёлтый — обвязка должна быть видна на жёлтом фоне тоже (чёрный держится) */

/* ================= HERO / COVER (жёлтая, как обложка шаблона) ================= */
.cover-slide { text-align: center; }
.cover-title {
  font-size: clamp(30px, 3.6vw, 48px); font-weight: 400;
  letter-spacing: .1em; line-height: 1.6; max-width: 1000px; margin: 0 auto;
}

/* ================= INTRO TEXT ================= */
.intro-slide { text-align: center; }
.intro-slide p {
  font-size: clamp(20px, 2.4vw, 32px); letter-spacing: .05em; line-height: 1.7;
  max-width: 1100px;
}

/* ================= DIVIDER (жёлтые перебивки) ================= */
.div-slide { text-align: center; width: 100%; }
.div-num {
  font-size: 18px; letter-spacing: .2em; margin-bottom: 22px;
  opacity: .4;
}
.div-name {
  font-size: clamp(26px, 3vw, 40px); letter-spacing: .14em;
  max-width: 1100px; line-height: 1.5; margin: 0 auto;
}

/* ================= АРХЕТИПЫ ================= */
.archetype-slide { width: 100%; align-items: flex-end; }
.archetype-grid { display: grid; grid-template-columns: 220px 1fr; gap: 60px; width: 100%; }
.archetype-pct { font-size: 32px; letter-spacing: .04em; }
.archetype-pct .pct-sign { color: var(--gray); }
.archetype-label { margin-top: 12px; font-size: 13px; letter-spacing: .18em; color: var(--gray); }
.archetype-body h3 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 400; letter-spacing: .08em; }
.archetype-tag { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .16em; color: var(--gray); }
.archetype-text {
  margin-top: 24px; font-size: 14px; letter-spacing: .03em; line-height: 2;
  text-transform: none; max-width: 620px; color: #333;
}
.archetype-avoid { margin-top: 18px; font-size: 11px; letter-spacing: .07em; color: var(--gray); }

@media (max-width: 800px) {
  .archetype-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ================= NAME: about (картинка сверху на всю ширину, текст снизу) ================= */
.name-about-slide {
  width: 100%; align-self: stretch; height: 100%;
  display: flex; flex-direction: column; gap: 40px;
}
.name-about-visual {
  flex: 1 1 auto; min-height: 0;
  background: #f4f3f0; border: 1px solid var(--line);
}
.name-about-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.name-about-bottom { flex: 0 0 auto; }
.name-about-title {
  font-size: clamp(28px, 3.2vw, 42px); font-weight: 400; letter-spacing: .1em;
  line-height: 1.3;
}
.name-about-archetype { margin-top: 14px; font-size: 12px; letter-spacing: .2em; color: var(--gray); }
.name-about-desc {
  margin-top: 18px; font-size: 14px; letter-spacing: .03em; line-height: 1.9;
  text-transform: none; color: #333; max-width: 900px;
}

/* ================= NAME: 3 картинки сверху, подпись-текст под каждой ================= */
.name-why-slide { width: 100%; align-items: flex-start; flex-direction: column; justify-content: center; }
.name-why-head { margin-bottom: 56px; }
.name-why-eyebrow { font-size: 12px; letter-spacing: .2em; color: var(--gray); }
.name-why-title { margin-top: 14px; font-size: clamp(28px, 3vw, 40px); letter-spacing: .09em; }
.name-why-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; }
.name-why-col { display: flex; flex-direction: column; }
.name-img { position: relative; height: 340px; background: #f4f3f0; border: 1px solid var(--line); }
.name-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.name-img .name-img-label {
  position: absolute; left: 0; bottom: 0; background: #fff;
  padding: 10px 18px 10px 14px; font-size: 12px; letter-spacing: .1em;
}
.name-why-item {
  margin-top: 24px; font-size: 13px; letter-spacing: .03em; line-height: 1.85;
  text-transform: none; color: #333;
}
.name-why-item .num { display: block; font-size: 12px; letter-spacing: .1em; color: var(--black); margin-bottom: 10px; text-transform: uppercase; }

@media (max-width: 900px) {
  .name-why-cols { grid-template-columns: 1fr; }
  .name-img { height: 200px; }
}

/* ================= PARUS PROJECT ================= */
.parus-slide { width: 100%; align-self: stretch; height: 100%; }
.parus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; width: 100%; height: 100%; align-items: stretch; }
.parus-media { height: 100%; border: 1px solid var(--line); overflow: hidden; }
.parus-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parus-content { display: flex; flex-direction: column; justify-content: center; }
.parus-eyebrow { font-size: 12px; letter-spacing: .2em; color: var(--gray); }
.parus-title { margin-top: 18px; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: .1em; line-height: 1.4; }
.parus-text {
  margin-top: 24px; font-size: 14px; letter-spacing: .03em; line-height: 1.95;
  text-transform: none; max-width: 480px; color: #333;
}

@media (max-width: 900px) { .parus-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ================= LONGLIST ================= */
.longlist-slide { width: 100%; flex-direction: column; align-items: flex-start; }
.longlist-head { margin-bottom: 48px; }
.longlist-eyebrow { font-size: 12px; letter-spacing: .2em; color: var(--gray); }
.longlist-title { margin-top: 14px; font-size: clamp(28px, 3vw, 40px); letter-spacing: .09em; }
.longlist-grid {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
}
.longlist-item {
  background: #fff; padding: 28px 26px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.longlist-item h4 { font-size: 18px; font-weight: 400; letter-spacing: .07em; }
.longlist-item .ll-archetype { font-size: 10px; letter-spacing: .13em; color: var(--gray); margin-top: 8px; }
.longlist-item p {
  font-size: 12px; letter-spacing: .02em; line-height: 1.75; color: #555;
  margin-top: 16px; text-transform: none;
}

@media (max-width: 900px) { .longlist-grid { grid-template-columns: 1fr; } }

/* ================= SUMMARY (итог шорт-листа: все имена + номер + мини-описание) ================= */
.summary-slide { width: 100%; flex-direction: column; align-items: flex-start; }
.summary-head { margin-bottom: 48px; }
.summary-grid { width: 100%; display: flex; flex-direction: column; }
.summary-item {
  width: 100%; display: grid; grid-template-columns: 90px 1fr; gap: 40px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.summary-grid .summary-item:last-child { border-bottom: 1px solid var(--line); }
.summary-num { font-size: 20px; letter-spacing: .05em; color: var(--gray); }
.summary-body h4 { font-size: 20px; font-weight: 400; letter-spacing: .08em; }
.summary-body p { margin-top: 8px; font-size: 12px; letter-spacing: .03em; color: var(--gray); text-transform: none; }

/* ================= OUTRO (только лого + сайт, жёлтый, без обвязки) ================= */
.outro-slide { text-align: center; }
.outro-logo { width: 260px; margin: 0 auto; display: block; }
.outro-site { margin-top: 34px; font-size: 15px; letter-spacing: .22em; }