/* ============================================================
   Akdeniz — секции ниже Hero.
   Каждая появляется своей производственной механикой.
   ============================================================ */

:root{
  --card:#0a2135;
  --hair:rgba(143,178,198,.13);
  --mono:"Cascadia Code",Consolas,"SF Mono",monospace;

  /* стекло: полупрозрачная плита, блик сверху, мягкое свечение снизу */
  --glass:
    linear-gradient(150deg, rgba(234,246,251,.09), rgba(234,246,251,0) 42%),
    linear-gradient(158deg, rgba(22,60,88,.5), rgba(7,27,44,.42));
  --glass-edge:
    inset 0 1px 0 rgba(234,246,251,.07),
    inset 0 -30px 44px -34px rgba(53,224,200,.16);
  --glass-drop:0 14px 38px rgba(2,10,18,.45);
}

.section{ border-top:1px solid var(--hair); }
/* под Hero линии быть не должно — там фон переходит сам */
.hero + .section{ border-top:0; }
.section__head{ max-width:60ch; margin-bottom:clamp(28px,4vh,46px); }
.section__title{ margin:0 0 12px; }
.section__lead{ font-size:clamp(16px,1.6vw,18.5px); line-height:1.65; color:#c3d8e4; }

/* ---------- Сцена ---------- */
.stage{
  position:relative;
  border:1px solid var(--hair);
  border-radius:18px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(8,36,58,.9) 0%, transparent 70%), rgba(5,22,37,.82);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  padding:clamp(22px,3.4vw,40px);
  overflow:hidden;
}

/* ---------- Значок повтора ---------- */
.restage{
  /* z-index выше летящей карточки (120) — иначе она проходит поверх кнопки */
  position:absolute; top:12px; right:12px; z-index:200;
  width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(143,178,198,.28); border-radius:50%;
  background:rgba(4,18,30,.72);
  color:var(--foam-dim); cursor:pointer;
  opacity:.42;
  transition:opacity .25s, color .25s, background .25s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.restage svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.stage:hover .restage{ opacity:.85; }
.restage:hover,
.restage:focus-visible{ opacity:1; color:var(--accent); }
.restage.spin svg{ animation:restage-spin .55s var(--ease-out); }
@keyframes restage-spin{ from{ transform:rotate(0); } to{ transform:rotate(-360deg); } }

/* на тач-устройствах наведения нет — значок видно всегда */
@media (hover:none){ .restage{ opacity:.7; } }

/* ---------- Карточки ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.card{
  position:relative;
  padding:24px 22px 20px;
  border:0;
  border-radius:16px;
  background:var(--glass);
}
.card h3{ margin:16px 0 8px; font-size:18px; letter-spacing:-.02em; }
.cards--4 .card h3{ margin-top:0; }
.card p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:var(--foam-dim); }
.card > span{ font-size:12px; color:var(--accent); }
.card > span + a{ margin-left:14px; }
.card a{ font-size:13px; color:var(--accent); text-decoration:none; }
.card a:hover{ text-decoration:underline; }



/* ---------- Стекло ---------- */
.card,.steps li,.gains li{
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:var(--glass-edge), var(--glass-drop);
}

/* ============================================================
   Процесс — провод прошивает шаги
   ============================================================ */
.stage--wire .steps{ position:relative; padding-top:40px; }

/* трек, по которому пойдёт импульс */
.stage--wire .steps::before{
  content:""; position:absolute; left:0; right:0; top:14px; height:1px;
  background:var(--hair);
}
/* сам провод — раскатывается слева направо */
.stage--wire .steps::after{
  content:""; position:absolute; left:0; right:0; top:13px; height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent-dk),var(--accent));
  box-shadow:0 0 14px rgba(53,224,200,.55);
  transform:scaleX(0); transform-origin:0 50%;
}
.run.stage--wire .steps::after{ animation:wire-run 2.6s linear forwards; }
@keyframes wire-run{ to{ transform:scaleX(1); } }

/* узел на проводе — загорается, когда импульс дошёл */
.node{
  position:absolute; left:22px; top:-29px; z-index:2;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--hair); background:var(--deep);
}
.run.stage--wire .node{ animation:node-on .5s var(--ease-out) forwards; }
@keyframes node-on{
  0%  { background:var(--deep);  border-color:var(--hair);   box-shadow:0 0 0 0 rgba(53,224,200,.55); }
  55% { background:var(--accent);border-color:var(--accent); box-shadow:0 0 0 9px rgba(53,224,200,0); }
  100%{ background:var(--accent);border-color:var(--accent); box-shadow:0 0 11px rgba(53,224,200,.7); }
}

.js .stage--wire .steps li{ opacity:0; }
.run.stage--wire .steps li{ animation:wire-pop .55s var(--ease-out) forwards; }
@keyframes wire-pop{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}

/* импульс идёт слева направо — шаги встают в том же темпе */
.run.stage--wire .steps li:nth-child(1),
.run.stage--wire .steps li:nth-child(1) .node{ animation-delay:.14s; }
.run.stage--wire .steps li:nth-child(2),
.run.stage--wire .steps li:nth-child(2) .node{ animation-delay:.78s; }
.run.stage--wire .steps li:nth-child(3),
.run.stage--wire .steps li:nth-child(3) .node{ animation-delay:1.42s; }
.run.stage--wire .steps li:nth-child(4),
.run.stage--wire .steps li:nth-child(4) .node{ animation-delay:2.06s; }

/* ============================================================
   Процесс — из кода в интерфейс
   ============================================================ */
.code{
  position:absolute; inset:clamp(22px,3.4vw,40px);
  margin:0; overflow:hidden;
  font-family:var(--mono); font-size:13px; line-height:1.75;
  color:#7fd6c4; white-space:pre; pointer-events:none;
}
.code .t{ color:#4aa8d8; }
.code .a{ color:#a99bdd; }
.code .s{ color:#e8c07d; }
.caret{
  display:inline-block; width:7px; height:15px; vertical-align:-2px;
  background:var(--accent); animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin:0; padding:0; list-style:none; counter-reset:s;
}
.steps li{
  position:relative;
  padding:22px 20px 20px;
  border:0; border-radius:16px; background:var(--glass);
}
.steps b{ font-size:12px; color:var(--accent); letter-spacing:.08em; }
.steps h3{ margin:10px 0 8px; font-size:17px; letter-spacing:-.02em; }
.steps p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--foam-dim); }
.steps__short{ display:none; }   /* короткий вариант живёт только на телефоне */

.js .stage--code .payload .card{ opacity:0; }
.stage--code.compiled .code{ animation:code-out .6s var(--ease-out) forwards; }
.stage--code.compiled .card{ animation:compile .9s var(--ease-out) forwards; }
.stage--code.compiled .card:nth-child(1){ animation-delay:.3s; }
.stage--code.compiled .card:nth-child(2){ animation-delay:.75s; }
.stage--code.compiled .card:nth-child(3){ animation-delay:1.2s; }

@keyframes code-out{ to{ opacity:0; filter:blur(6px); } }
@keyframes compile{
  from{ opacity:0; transform:translateY(18px) scale(.955); filter:blur(6px); }
  to  { opacity:1; transform:translateY(0)    scale(1);    filter:blur(0); }
}

/* ============================================================
   Портфолио — развёрнутые кейсы, скриншоты наводятся на резкость
   ============================================================ */
.case{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(20px,3vw,44px); align-items:center;
  padding-bottom:clamp(36px,5vh,62px);
  margin-bottom:clamp(36px,5vh,62px);
  border-bottom:1px solid var(--hair);
}
/* у последнего кейса линия и отступ ни к чему – под ним пусто */
.case:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.case--flip{ grid-template-columns:.85fr 1fr; }
.case--flip .case__shots{ order:2; }

/* --- слоты под скриншоты --- */
.case__shots{ display:grid; gap:14px; }
.case__shots--phone{ justify-items:center; }
.case__shot{
  display:block; text-decoration:none;
  position:relative; aspect-ratio:2/1;
  border:1px solid var(--hair); border-radius:12px; overflow:hidden;
  background:
    linear-gradient(0deg,rgba(4,18,30,.5),rgba(4,18,30,.5)),
    radial-gradient(80% 60% at 20% 15%, #2ad0bb 0%, transparent 55%),
    radial-gradient(70% 70% at 85% 80%, #1d6ea8 0%, transparent 60%),
    #0a2a41;
}
.case--flip .case__shot{ background:
    linear-gradient(0deg,rgba(4,18,30,.5),rgba(4,18,30,.5)),
    radial-gradient(75% 65% at 80% 20%, #7ad6a0 0%, transparent 55%),
    radial-gradient(70% 70% at 15% 85%, #2f8fd0 0%, transparent 60%), #0a2a41; }
.case__shot--phone{ aspect-ratio:7/10; width:100%; max-width:360px; }
.case__shot img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.case__shot:hover img{ transform:scale(1.03); }
.case__shot:hover{ border-color:rgba(53,224,200,.45); }
/* подпись видна, пока внутрь не вставили <img> */
.case__shot::after{
  content:attr(data-slot);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:10px; text-align:center;
  font-family:var(--mono); font-size:12px; color:rgba(234,246,251,.75);
  background:rgba(3,14,24,.45);
  border-radius:11px;
}
.case__shot:has(img)::after{ content:none; }

/* --- текст кейса --- */
.case__top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.case__num{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--accent); }
.case__tag{ font-size:13.5px; color:#a9c6d6; }
.case__body h3{ margin:0 0 12px; font-size:clamp(24px,2.9vw,34px); letter-spacing:-.025em; }
.case__lead{ margin:0 0 22px; font-size:16.5px; line-height:1.68; color:#d0e2ed; max-width:52ch; }

.case__facts{ margin:0 0 20px; }
.case__facts > div{ display:flex; gap:14px; padding:9px 0; border-top:1px solid var(--hair); }
.case__facts dt{ flex:0 0 78px; font-size:12.5px; color:var(--accent); padding-top:1px; }
.case__facts dd{ margin:0; font-size:14px; line-height:1.55; color:var(--foam-dim); }

.case__metrics{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,38px);
  margin:0 0 20px; padding:0; list-style:none;
}
/* подпись переносится внутри своей колонки, а не ломает ряд */
.case__metrics li{ display:flex; flex-direction:column; gap:3px; max-width:22ch; }
.case__metrics b{ font-size:24px; letter-spacing:-.02em; }
.case__metrics span{ font-size:13.5px; color:#a9c6d6; }

.case__links{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.case__link{
  font-size:15px; color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(53,224,200,.3); padding-bottom:2px;
  transition:border-color .25s;
}
.case__link:hover{ border-color:var(--accent); }
.case__links .case__link--main{
  padding:11px 20px; border-radius:100px; border-bottom:0;
  background:var(--accent); color:#03202b; font-weight:600;
  transition:background .25s;
}
.case__links .case__link--main:hover{ background:#5cf0da; }

/* --- появление: скриншоты наводятся на резкость --- */
.js .stage--blur .case__shot{ filter:blur(16px) saturate(.6); transform:scale(1.06); }
.js .stage--blur .case__body{ opacity:0; }
.run.stage--blur .case__shot{ animation:sharpen .85s var(--ease-out) forwards; }
.run.stage--blur .case--flip .case__shot{ animation-delay:.16s; }
.run.stage--blur .case__body{ animation:rise-in .5s var(--ease-out) .45s forwards; }
.run.stage--blur .case--flip .case__body{ animation-delay:.6s; }

@keyframes sharpen{
  from{ filter:blur(16px) saturate(.6); transform:scale(1.06); }
  to  { filter:blur(0)    saturate(1);  transform:scale(1); }
}
@keyframes rise-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ============================================================
   Поддержка — git-diff
   ============================================================ */
.diff{
  position:absolute; inset:clamp(22px,3.4vw,40px);
  font-family:var(--mono); font-size:13px;
}
.diff__row{
  display:flex; gap:12px; align-items:center;
  padding:6px 12px; border-radius:6px; margin-bottom:4px;
}
.diff__row b{ width:10px; opacity:.75; }
.diff__row--del{ background:rgba(224,71,71,.12); color:#f0a0a0; }
.diff__row--add{ background:rgba(53,224,200,.1); color:#8ce8d7; }

.gains{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin:0; padding:0; list-style:none;
}
.gains li{
  position:relative;
  padding:24px 20px;
  border:0; border-radius:16px; background:var(--glass);
  display:flex; flex-direction:column; gap:6px;
}
.gains b{ font-size:clamp(19px,2.3vw,26px); letter-spacing:-.03em; line-height:1.15; }
.gains span{ font-size:13px; color:var(--foam-dim); line-height:1.4; }

.js .stage--diff .gains{ opacity:0; }
.js .stage--diff .diff__row--add{ opacity:0; }
.run.stage--diff .diff__row--del{ animation:diff-out .5s var(--ease-out) .55s forwards; }
.run.stage--diff .diff__row--add{ animation:diff-in .45s var(--ease-out) forwards; }
.run.stage--diff .diff__row--add:nth-child(3){ animation-delay:.8s; }
.run.stage--diff .diff__row--add:nth-child(4){ animation-delay:.92s; }
.run.stage--diff .diff__row--add:nth-child(5){ animation-delay:1.04s; }
.run.stage--diff .diff{ animation:code-out .45s var(--ease-out) 1.7s forwards; }
.run.stage--diff .gains{ animation:compile .55s var(--ease-out) 1.85s forwards; }

@keyframes diff-out{ to{ opacity:0; transform:translateX(-24px); } }
@keyframes diff-in{
  from{ opacity:0; transform:translateX(-16px); }
  to  { opacity:1; transform:translateX(0); }
}

/* ============================================================
   Контакты — терминал деплоя
   ============================================================ */
/* терминал живёт в потоке: после деплоя в него можно печатать */
.term{
  position:relative;
  border:1px solid var(--hair); border-radius:12px;
  background:#020d16; overflow:hidden; font-family:var(--mono);
}
.term__bar{
  display:flex; align-items:center; gap:7px;
  padding:9px 14px; border-bottom:1px solid var(--hair); background:#061927;
}
.term__bar i{ width:9px; height:9px; border-radius:50%; background:#1d3d55; }
.term__bar span{ margin-left:8px; font-size:11.5px; color:var(--foam-dim); }
.term__body{
  margin:0; padding:14px 16px;
  font-size:13px; line-height:1.8; color:#7fd6c4; white-space:pre;
  max-height:230px; overflow-y:auto;   /* ответы команд не должны рвать вёрстку */
}
.term__body .ok{ color:var(--accent); }
.term__body .dim{ color:#5a7f96; }
.term__body .err{ color:#f0a0a0; }
.term__body .you{ color:var(--foam); }

/* строка ввода — появляется, когда деплой закончился */
.term__prompt{
  display:none; align-items:center; gap:9px;
  padding:0 16px 14px; font-size:13px; cursor:text;
}
.stage--term.deployed .term__prompt{ display:flex; }
.term__ps{ color:#5a7f96; white-space:nowrap; }
.term__input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--foam); font:inherit; caret-color:var(--accent);
}

.contact{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:16px; align-items:center; }
.contact__row{
  display:flex; flex-direction:column; gap:6px;
  padding:20px; border:1px solid var(--hair); border-radius:14px;
  background:var(--card); text-decoration:none; color:var(--foam);
  transition:border-color .25s;
}
.contact__row:hover{ border-color:var(--accent); }
.contact__row span{ font-size:12px; color:var(--foam-dim); }
.contact__row b{ font-size:16px; letter-spacing:-.01em; }
.contact__cta{ white-space:nowrap; }

/* контакты видны всегда — они не должны зависеть от того, доиграла ли анимация */
.stage--term .contact{ margin-top:18px; }

/* ---------- Подвал ---------- */
.foot{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:36px clamp(20px,5vw,64px) 48px var(--pad-l);
  max-width:1400px; margin:0 auto;
  border-top:1px solid var(--hair);
  font-size:13.5px; color:var(--foam-dim);
}
.foot a{ color:var(--accent); text-decoration:none; }
.foot__legal{ display:flex; flex-direction:column; gap:6px; max-width:62ch; }
.foot__req{ color:#6d8ea3; }
.foot__note{ font-size:12.5px; color:#5a7f96; line-height:1.5; }
.foot__links{ display:flex; gap:20px; align-items:flex-start; }

/* ---------- Мобильные ---------- */
@media (max-width:900px){
  .cards,.cards--4,.steps,.gains,.contact{ grid-template-columns:1fr; }
  /* провод горизонтальный — в одну колонку он теряет смысл */
  .stage--wire .steps{ padding-top:0; }
  .stage--wire .steps::before,
  .stage--wire .steps::after,
  .node{ display:none; }
  .case{ grid-template-columns:1fr; }
  .case--flip .case__shots{ order:0; }
  .case--flip{ grid-template-columns:1fr; }
  .case__shot--phone{ max-width:300px; }
  .cards--4,.gains{ grid-template-columns:repeat(2,1fr); }
  .code,.diff,.term{ position:relative; inset:auto; }
  .stage--code .steps,
  .stage--diff .gains,
  .stage--term .contact{ margin-top:18px; }
  .contact__cta{ text-align:center; justify-content:center; }
}

/* ---------- Уважаем настройки движения ---------- */
@media (prefers-reduced-motion:reduce){
  /* всё, что обычно проявляется анимацией, показываем сразу */
  .js .stage .payload,
  .js .stage .gains,
  .js .stage .contact,
  .js .stage--code .card,
  .js .stage--wire .steps li,
  .js .stage--blur .case__body{ opacity:1 !important; }
  .js .stage--blur .case__shot{ filter:none; transform:none; }
  .stage--wire .steps::after,
  .stage--wire .node,
  .stage--wire .steps li{ animation:none !important; }
  .stage--wire .steps::after{ transform:scaleX(1); }
  .stage--wire .node{ background:var(--accent); border-color:var(--accent); }
  /* а служебные слои механик не нужны вовсе */
  .code,.diff,.term{ display:none; }
}

/* строка-заявление в карточке кейса */
.case__claim{
  position:relative;
  margin:0 0 12px; padding-left:14px;
  font-size:14.5px; line-height:1.45; font-weight:600;
  color:var(--foam);
}
.case__claim::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), rgba(53,224,200,0));
}

/* ---------- Телефон: пальцу нужна площадь ---------- */
@media (max-width:900px){
  /* ссылки-строки в подвале и кейсах били меньше 32 px по высоте */
  .foot__links a{ display:inline-block; padding:9px 0; }
  .case__link{ display:inline-block; padding:7px 0; }
  .case__claim{ font-size:15px; }
  .nav__logo{ padding:6px 0; }
  /* мелкий служебный шрифт поднимаем до читаемого */
  .svc__num,.case__num{ font-size:12px; }
}