*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  background:#fff;
  color:#000;
  overflow-y:auto;
  overflow-x:hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}

.isHidden{ display:none !important; }

/* ====== MANUAL SHIFTS (двигай только цифры) ====== */
:root{
  --introShift: 75px;        /* ✅ НЕ ТРОГАЙ */

  --menuAcaShift: 65px;       /* ✅ A.C.A в меню */
  --menuDateShift: 7px;      /* ✅ дата под A.C.A */

  --timeBlockShift: -44px;     /* ✅ цифры таймера */
  --timeCloseShift: -44px;     /* ✅ кнопка CLOSE под таймером */

  --footShift: 0px;          /* ✅ нижний текст */
}

/* ================= INTRO ================= */
#intro{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#fff;
  z-index:999;
}
.introCenter{
  width: min(1200px, 92vw);
  height: 60vh;
  display:grid;
  place-items:center;
}
.introWord{
  opacity:0;
  transition: opacity 2.6s ease;
  user-select:none;
  text-align:center;
}
.introWord.isShow{ opacity:1; }

.wideIntro{
  display:inline-block;
  transform-origin:50% 50%;
  transform: translateX(var(--introShift)) scaleX(1.55) scaleY(0.45);
  letter-spacing: 0.90em;
  font-size: clamp(56px, 7vw, 120px);
  text-transform: uppercase;
}

/* ================= APP ================= */
.app{
  min-height: 100vh;
  display:grid;
  place-items:center;
}
.screen{
  width: min(1200px, 92vw);
  min-height: 122vh;
  display:grid;
  grid-template-rows: 1fr auto;
  justify-items:center;
  align-items:center;
  padding: 6vh 0;
}
.content{
  width: 100%;
  display:grid;
  place-items:center;
}

/* ================= BLOCK ================= */
.block{
  width: 720px;
  max-width: 92vw;
  display:grid;
  justify-items:center;
  align-items:center;
  gap: 26px;
  text-align:center;
}

/* ================= MENU A.C.A + DATE (отдельно двигаются) ================= */
.wideLogo{
  display:inline-block;
  transform-origin:50% 50%;
  transform: translateX(var(--menuAcaShift)) scaleX(1.55) scaleY(0.45);
  letter-spacing: 0.90em;
  font-size: clamp(44px, 5.4vw, 96px);
  text-transform: uppercase;
}

/* дата чуть меньше (как ты просил, чтобы "влезала") */
.dateLine{
  display:inline-block;
  transform-origin:50% 50%;
  transform: translateX(var(--menuDateShift)) scaleX(1.25) scaleY(0.70);
  letter-spacing: 0.82em;
  font-size: 18px;
  opacity: .98;
  text-transform: uppercase;
}

/* ================= BUTTONS ================= */
.actionBtn{
  width: 320px;
  height: 56px;
  border: 1px solid #000;
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background .18s ease, color .18s ease;
}
.actionBtn span{
  display:inline-block;
  transform-origin:50% 50%;
  transform: scaleX(1.16) scaleY(0.88);
  letter-spacing: 0.40em;
  font-size: 13px;
  text-transform: uppercase;
}
.actionBtn:hover{ background:#000; color:#fff; }

.linkBtn{
  width: 360px;
  height: 62px;
  border: 1px solid #000;
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#000;
  transition: background .18s ease, color .18s ease;
}
.linkBtn span{
  display:inline-block;
  transform-origin:50% 50%;
  transform: scaleX(1.18) scaleY(0.90);
  letter-spacing: 0.40em;
  font-size: 13px;
  text-transform: uppercase;
}
.linkBtn:hover{ background:#000; color:#fff; }

/* ================= BIO TEXT ================= */
.bioText{
  display:inline-block;
  transform-origin:50% 50%;
  transform: scaleX(1.10) scaleY(0.88);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.10em;
  opacity: .94;
}

/* ================= TIME (ВАЖНО: всегда в одну линию) ================= */
.timeBig{
  display:flex;
  flex-direction: row;
  justify-content:center;
  align-items:baseline;
  gap: 2.6rem;
  white-space: nowrap;
  font-size: clamp(60px, 7.6vw, 110px);
  transform-origin:50% 50%;
  transform: translateX(var(--timeBlockShift)) scaleX(1.42) scaleY(0.50);
  text-transform: uppercase;
}
.timePart{
  display:flex;
  flex-direction: row;
  align-items:baseline;
  gap: .25rem;
}
.timeLbl{
  font-size: .42em;
  letter-spacing: .22em;
  opacity: .92;
}

/* CLOSE под временем — отдельно */
.timeClose{
  transform: translateX(var(--timeCloseShift));
}

/* ================= FOOTER (низ отдельно) ================= */
.foot{
  width:100%;
  display:grid;
  justify-items:center;
  gap: 6px;
  padding: 18px 0 6px;
  margin-top: 18px;
}
.footLine{
  font-size:12px;
  opacity:.7;
  text-transform:lowercase;
  transform-origin:50% 50%;
  transform: translateX(var(--footShift)) translateY(14px) scaleX(1.18) scaleY(0.95);
  letter-spacing: 0.28em;
}
.footNote{
  font-size:12px;
  opacity:.45;
  text-align:center;
  transform-origin:50% 50%;
  transform: translateX(var(--footShift)) translateY(14px) scaleX(1.08) scaleY(0.95);
  letter-spacing: 0.14em;
}

/* mobile */
@media (max-width: 720px){
  .block{ width: 92vw; }
  .actionBtn{ width: min(320px, 88vw); }
  .linkBtn{ width: min(360px, 90vw); }
  .timeBig{ gap: 1.8rem; }

}/* ================= MOBILE FIX (PHONE ONLY) ================= */
@media (max-width: 720px){

  /* A.C.A — убираем ручные сдвиги и уменьшаем */
  .wideLogo{
    transform: scaleX(1.25) scaleY(0.55);
    letter-spacing: 0.6em;
    font-size: 42px;
  }

  /* дата — по центру и компактно */
  .dateLine{
    transform: scaleX(1.05) scaleY(0.8);
    letter-spacing: 0.4em;
    font-size: 14px;
  }

  /* кнопки — нормальный размер */
  .actionBtn,
  .linkBtn{
    width: 90vw;
    max-width: 320px;
    height: 52px;
  }

  .actionBtn span,
  .linkBtn span{
    letter-spacing: 0.25em;
    font-size: 12px;
  }

  /* таймер — ЧИТАЕМЫЙ и ВЛЕЗАЕТ */
  .timeBig{
    transform: scaleX(1) scaleY(1);
    font-size: 36px;
    gap: 1rem;
    white-space: nowrap;
  }

  .timeLbl{
    font-size: 0.45em;
  }

  /* CLOSE — по центру */
  .timeClose{
    transform: none;
  }

  /* BIO текст — чтобы не вылазил */
  .bioText{
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    transform: none;
  }

  /* футер — аккуратно */
  .footLine,
  .footNote{
    transform: none;
    letter-spacing: 0.15em;
    font-size: 11px;
    text-align: center;
  }
}
/* ================= MOBILE FINAL FIX (PHONE ONLY) ================= */
@media (max-width: 520px){

  /* A.C.A — делаем КРУПНЕЕ, как на рефе, без сдвигов */
  .wideLogo{
    transform: scaleX(1.45) scaleY(0.55);
    letter-spacing: 0.75em;
    font-size: 54px;
  }

  /* Дата — тоже крупнее и ровно */
  .dateLine{
    transform: scaleX(1.15) scaleY(0.85);
    letter-spacing: 0.55em;
    font-size: 16px;
  }

  /* Кнопки — аккуратные, не доминируют */
  .actionBtn{
    width: 90vw;
    max-width: 340px;
    height: 52px;
  }

  .actionBtn span{
    font-size: 12px;
    letter-spacing: 0.28em;
  }

  /* ===== ТАЙМЕР — ПРИПЛЮСНУТЫЙ, ЧИТАЕМЫЙ ===== */
  .timeBig{
    transform: scaleX(1.25) scaleY(0.75);
    font-size: 42px;
    gap: 1.2rem;
  }

  .timeLbl{
    font-size: 0.5em;
    letter-spacing: 0.2em;
  }

  /* CLOSE под таймером — ровно */
  .timeClose{
    transform: none;
  }

  /* ===== FOOTER — НЕ ПРИПЛЮСНУТЫЙ ===== */
  .footLine{
    transform: none;
    font-size: 12px;
    letter-spacing: 0.22em;
  }

  .footNote{
    transform: none;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}/* ================= MOBILE OVERRIDES (PHONE ONLY) v2 ================= */
@media (max-width: 720px){

  /* на телефоне убираем ручные сдвиги (ПК не меняется) */
  :root{
    --introShift: 0px;
    --menuAcaShift: 50px;
    --menuDateShift: 0px;
    --timeBlockShift: 0px;
    --timeCloseShift: 0px;
    --footShift: 0px;
  }

  /* чтобы не было "огромной высоты" и всё было по центру */
  .screen{
    min-height: 100vh;
    padding: 5vh 0;
  }

  /* ===== INTRO: сплюснуть и чтобы ВЛЕЗАЛО ===== */
  .wideIntro{
    transform: translateX(12) scaleX(1.18) scaleY(0.38);
    letter-spacing: 0.55em;
    font-size: clamp(46px, 13vw, 74px);
  }

  /* ===== MENU A.C.A: сплюснуть и чуть крупнее ===== */
  .wideLogo{
    transform: translateX(40) scaleX(1.18) scaleY(0.38);
    letter-spacing: 0.55em;
    font-size: clamp(44px, 12vw, 74px);
  }

  /* ===== DATE: чуть крупнее и компактнее ===== */
  .dateLine{
    transform: translateX(0) scaleX(1.10) scaleY(0.78);
    letter-spacing: 0.42em;
    font-size: 16px;
  }

  /* ===== TIME: НЕ растягивать, а СПЛЮСНУТЬ и чтобы влазило ===== */
  .timeBig{
    transform: translateX(0) scaleX(1.10) scaleY(0.55);
    font-size: clamp(44px, 12vw, 72px);
    gap: 1.2rem;
  }

  .timeLbl{
    font-size: .50em;
    letter-spacing: .18em;
  }

  .timeClose{
    transform: translateX(0);
  }

  /* ===== кнопки: убрать “синий” на телефоне (особенно ссылки) ===== */
  .actionBtn, .linkBtn{
    color:#000;
    -webkit-tap-highlight-color: transparent;
  }
  .linkBtn:visited,
  .linkBtn:active,
  .linkBtn:focus{
    color:#000;
  }
  .actionBtn span,
  .linkBtn span{
    color: inherit;
  }

  /* ===== FOOTER: чтобы НЕ был растянутый/приплюснутый ===== */
  .footLine{
    transform: translateX(0) translateY(10px) scaleX(1) scaleY(1);
    letter-spacing: 0.18em;
  }
  .footNote{
    transform: translateX(0) translateY(10px) scaleX(1) scaleY(1);
    letter-spacing: 0.10em;
  }/* ========== MOBILE ONLY FIX ========== */
@media (max-width: 720px){

  :root{
    /* центрируем A.C.A и интро ТОЛЬКО НА ТЕЛЕФОНЕ */
    --introShift: 0px;
    --menuAcaShift: 0px;
    --menuDateShift: 0px;
  }/* ===================== MOBILE FINAL FIX (PHONE ONLY) ===================== */
@media (max-width: 720px){

  /* 1) На телефоне убираем все ручные translateX-сдвиги (они ломают центровку) */
  :root{
    --introShift: 0px;
    --menuAcaShift: 0px;
    --menuDateShift: 0px;
    --timeBlockShift: 0px;
    --timeCloseShift: 0px;
    --footShift: 0px;
  }

  /* 2) На всякий случай режем всё, что может “вылезать” по бокам */
  .content,
  .block,
  .screen{
    overflow-x: hidden;
  }

  /* 3) INTRO A.C.A — по центру, “сплюснуто” и ВЛАЗИТ */
  .wideIntro{
    transform: translateX(0) scaleX(1.25) scaleY(0.45);
    letter-spacing: 0.55em;
    font-size: clamp(44px, 14vw, 78px);
  }

  /* 4) Меню A.C.A — по центру, “сплюснуто”, без уезда влево/вправо */
  .wideLogo{
    transform: translateX(0) scaleX(1.25) scaleY(0.45);
    letter-spacing: 0.55em;
    font-size: clamp(44px, 13vw, 78px);
  }

  /* 5) Дата — СДЕЛАТЬ “СПЛЮСНУТОЙ” и ЧУТЬ БОЛЬШЕ (как референс) */
  .dateLine{
    transform: translateX(0) scaleX(1.30) scaleY(0.60);
    letter-spacing: 0.55em;
    font-size: 18px;
  }

  /* 6) Все кнопки одинаковые (и в SOCIAL тоже) + убираем “синюю ссылку” */
  .actionBtn,
  .linkBtn{
    width: min(420px, 90vw);
    height: 58px;
  }
  .linkBtn,
  .linkBtn:visited,
  .linkBtn span{
    color:#000;
  }
  .actionBtn span,
  .linkBtn span{
    letter-spacing: 0.35em;
    font-size: 13px;
  }

  /* 7) Таймер — “сплюснутый”, влезает, по центру. CLOSE тоже по центру */
  .timeBig{
    transform: translateX(0) scaleX(1.18) scaleY(0.50);
    font-size: clamp(44px, 11vw, 74px);
    gap: 1.2rem;
  }
  .timeClose{
    transform: translateX(0);
  }

  /* 8) Биография — чтобы не было ощущения “кривой” верстки по бокам */
  .bioText{
    transform: scaleX(1.00) scaleY(1.00);
    letter-spacing: 0.06em;
    font-size: 16px;
    line-height: 1.75;
    max-width: 90vw;
  }

  /* 9) Низ (footer) — ровно, без лишних “сплющиваний” */
  .footLine{
    transform: translateX(0) translateY(14px) scaleX(1.00) scaleY(1.00);
    letter-spacing: 0.20em;
  }
  .footNote{
    transform: translateX(0) translateY(14px) scaleX(1.00) scaleY(1.00);
    letter-spacing: 0.10em;
  }
}/* ================== PHONE FINAL FIX v2 (append at very end) ================== */
@media (max-width: 720px){

  /* 1) на телефоне убираем десктопные "сдвиги" */
  :root{
    --introShift: 0px;
    --menuAcaShift: 0px;
    --menuDateShift: 0px;
    --timeBlockShift: 0px;
    --timeCloseShift: 0px;
    --footShift: 0px;
  }

  /* 2) INTRO A.C.A — чтобы НЕ обрезалось и было по центру */
  .wideIntro{
    transform: translateX(0) scaleX(1.25) scaleY(0.45);
    letter-spacing: 0.55em;
    font-size: clamp(46px, 14vw, 72px);
  }

  /* 3) MENU A.C.A — по центру и без “ухода” */
  .wideLogo{
    transform: translateX(0) scaleX(1.25) scaleY(0.45);
    letter-spacing: 0.55em;
    font-size: clamp(40px, 12vw, 66px);
  }

  /* 4) DATE — сплюснутая и чуть крупнее/красивее */
  .dateLine{
    transform: translateX(0) scaleX(1.18) scaleY(0.72);
    letter-spacing: 0.62em;
    font-size: 16px;
  }

  /* 5) TIMER — чтобы влезали ВСЕ значения (включая секунды) */
  .timeBig{
    gap: 1.1rem;
    font-size: clamp(34px, 9.5vw, 56px);
    transform: translateX(0) scaleX(1.18) scaleY(0.52);
  }
  .timeLbl{
    font-size: .38em;
    letter-spacing: .18em;
  }

  /* 6) Кнопки — одинаковый размер, чтобы CLOSE не был больше */
  .actionBtn,
  .linkBtn{
    width: min(360px, 88vw);
    height: 56px;
  }
  .actionBtn span,
  .linkBtn span{
    font-size: 13px;
    letter-spacing: 0.32em;
    transform: scaleX(1.12) scaleY(0.90);
    color: inherit;
  }

  /* CLOSE под таймером — без сдвига */
  .timeClose{ transform: translateX(0); }

  /* 7) Низ — чуть “сплюснуть” красиво */
  .footLine{
    transform: translateX(0) translateY(10px) scaleX(1.12) scaleY(0.95);
  }
  .footNote{
    transform: translateX(0) translateY(10px) scaleX(1.06) scaleY(0.95);
  }

  /* 8) BIO — чтобы не вылазило и смотрелось ровно */
  .bioText{
    transform: scaleX(1.00) scaleY(0.92);
    font-size: 16px;
  }

  /* 9) На айфоне “hover” иногда залипает (делает кнопку чёрной) — выключаем */
  @media (hover: none){
    .actionBtn:hover,
    .linkBtn:hover{
      background:#fff;
      color:#000;
    }
  }
}/* ===== PHONE: ONLY MOVE A.C.A (no resize) ===== */
@media (max-width: 720px){

  /* A.C.A в интро — сдвиг по X (вправо = плюс, влево = минус) */
  .wideIntro{
    transform: translateX(17px) scaleX(1.25) scaleY(0.45);
  }

  /* A.C.A в меню — сдвиг по X (вправо = плюс, влево = минус) */
  .wideLogo{
    transform: translateX(15px) scaleX(1.45) scaleY(0.45);
  }
}