/* ============================================================
   Модификация - одноэкранник выбора точки входа
   Палитра, шрифт и карточки-способы взяты из основного лендинга
   (d:\Code\goodiets-landing\styles.css), чтобы страницы читались
   как одна семья.
   ============================================================ */

@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --lilac:#9184F6;
  --lilac-deep:#7C63D6;
  --pink:#F05BC4;
  --ink:#464646;
  --ink-strong:#2A2A2A;
  --muted:#6B6B6B;
  --line:#ECECEC;
  --bg-soft:#FAFAFF;

  --grad-brand:linear-gradient(135deg,#F05BC4 0%,#9A8CFF 100%);
  --grad-card:linear-gradient(135deg,#F05BC4 0%,#9A8CFF 58%,#8F7CFF 100%);
  --grad-btn:linear-gradient(90deg,#F05BC4 0%,#8F7CFF 100%);

  --shadow:0 8px 32px rgba(145,132,246,.12);
  --shadow-xl:0 30px 70px rgba(145,132,246,.26);
  --r:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;background:var(--bg-soft);color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;
  display:flex;flex-direction:column;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Фон ---------- */
.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora__b{position:absolute;display:block;border-radius:50%;filter:blur(70px);will-change:transform}
.aurora__b--1{width:46vw;height:46vw;max-width:560px;max-height:560px;left:-16vw;top:-16vw;background:radial-gradient(circle,#F05BC4,transparent 68%);opacity:.24;animation:drift1 22s ease-in-out infinite}
.aurora__b--2{width:40vw;height:40vw;max-width:520px;max-height:520px;left:6vw;bottom:-22vw;background:radial-gradient(circle,#9A8CFF,transparent 68%);opacity:.24;animation:drift2 26s ease-in-out infinite}
.aurora__b--3{width:36vw;height:36vw;max-width:440px;max-height:440px;left:40vw;top:4vw;background:radial-gradient(circle,#C9FFA3,transparent 66%);opacity:.3;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,8%,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8%,-6%,0) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-10%,0) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.aurora__b{animation:none}}

/* ---------- Каркас ---------- */
.tap{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;
  /* safe center: если содержимое выше экрана, ведёт себя как flex-start,
     иначе верх страницы уезжает за край и его не прокрутить */
  justify-content:center;justify-content:safe center;
  gap:10px;padding:62px 20px 8px;
}
.card{
  position:relative;width:100%;max-width:470px;
  background:#fff;border-radius:var(--r);
  padding:0 26px 18px;
  box-shadow:var(--shadow-xl);
  text-align:center;
}

/* ---------- Фото на градиентной плашке ----------
   Плашка живёт внутри карточки и торчит из неё сверху, фото пары
   выходит за верхний край плашки - тот же приём, что в мобильном
   первом экране основного лендинга. */
.art{
  height:176px;margin:0 -6px 0;border-radius:0 0 26px 26px;
  background:var(--grad-card);
  box-shadow:0 18px 38px rgba(145,132,246,.3);
}
.photo{
  position:absolute;left:50%;top:-57px;transform:translateX(-50%);
  width:186px;z-index:2;pointer-events:none;
}
.photo img{width:100%;filter:drop-shadow(0 18px 34px rgba(87,61,255,.22))}

/* ---------- Текст ---------- */
.over{
  margin:14px 0 0;font-size:clamp(15px,3.6vw,18px);font-weight:500;
  color:var(--lilac);text-transform:uppercase;letter-spacing:.02em;
}
.h1{
  margin:2px auto 12px;width:fit-content;max-width:100%;
  font-size:clamp(32px,8.4vw,44px);font-weight:900;line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- Три способа ---------- */
.ways{display:grid;gap:12px;text-align:left}
.way{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:18px;
  background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.way:hover,.way:focus-visible{transform:translateY(-3px);border-color:rgba(145,132,246,.5);box-shadow:var(--shadow)}
.way:active{transform:translateY(-1px)}
.way__ic{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center}
.way__ic svg{width:24px;height:24px;fill:#fff}
.way__ic--max{background:linear-gradient(135deg,#471AFF,#9500FF)}
.way__ic--tg{background:linear-gradient(135deg,#2AABEE,#229ED9)}
.way__ic--web{background:var(--grad-btn)}
.way__b{flex:1;min-width:0;display:block}
.way__b b{display:block;font-size:16.5px;font-weight:800;color:var(--ink-strong)}
.way__b span{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.way__go{flex:none}
.way__go svg{width:18px;height:18px;fill:none;stroke:var(--lilac);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Способ без рабочей ссылки не притворяется кликабельным. */
.way--soon{opacity:.55;pointer-events:none}
.way--soon .way__b b::after{content:' - скоро';font-weight:600;color:var(--muted)}


/* ---------- Подвал ---------- */
.foot{width:100%;max-width:470px;text-align:center}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:6px}
.foot__nav a{font-size:12.5px;color:var(--lilac-deep);border-bottom:1px solid transparent}
.foot__nav a:hover{border-bottom-color:currentColor}
/* без прозрачности: с ней мелкий шрифт не дотягивал до контраста AA */
.foot__legal{margin:0;font-size:11.5px;line-height:1.5;color:#5A5A5A}

/* ---------- Узкие экраны ---------- */
@media (max-width:400px){
  .card{padding:0 18px 24px}
  .art{height:162px}
  .photo{top:-52px;width:170px}
  .way{padding:12px 14px;gap:12px}
  .way__ic{width:42px;height:42px;border-radius:14px}
  .way__b b{font-size:15.5px}
  .way__b span{font-size:12.5px}
}
/* Невысокие экраны: подбираем блоки, чтобы экран остался одним.
   Фото 620x775, поэтому его высота = ширина * 1.25, а смещение подобрано
   так, чтобы низ фото совпал с низом плашки. */
@media (max-height:900px){
  .tap{gap:8px;padding:52px 20px 8px}
  .art{height:142px}
  .photo{top:-48px;width:152px}
  .over{margin-top:10px;font-size:14px}
  .h1{font-size:clamp(28px,7.6vw,38px);margin-bottom:8px}
  .lead{font-size:14px;margin-bottom:14px}
  .way{padding:11px 14px}
  .way__b b{font-size:15.5px}
  .way__b span{font-size:12.5px}
  .foot__nav{margin-bottom:4px}
}

/* Совсем низкие экраны сжимать дальше некуда - прижимаем к верху и
   разрешаем прокрутку (запасной вариант для браузеров без safe center). */
@media (max-height:780px){
  .tap{justify-content:flex-start}
}
.foot__legal a{color:inherit;text-decoration:underline}

/* Узкий и невысокий экран одновременно: строк текста больше, а места меньше.
   Ужимаем только типографику, композицию не трогаем. */
@media (max-width:400px) and (max-height:900px){
  .lead{font-size:13.5px;line-height:1.4;margin-bottom:14px}
  .way{padding:10px 13px;gap:11px}
  .way__ic{width:40px;height:40px;border-radius:13px}
  .way__b b{font-size:15px}
  .way__b span{font-size:12px;line-height:1.3}
  .foot__nav a{font-size:12px}
  .foot__legal{font-size:11px}
}