/* Шрифты хранятся локально: без запросов к Google, только кириллица и латиница. */
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-tight-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-tight-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-tight-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-tight-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-tight-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-tight-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#ecebe6;
  --card:#fbfaf7;
  --ink:#16171a;
  --muted:#6c6e75;
  --line:rgba(22,23,26,.1);
  --accent:#2a4bff;
  --ok:#22b35e;
  /* Кромка картона: светлый блик по краю и тонкая контактная тень. */
  --edge:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 #fff,0 1px 2px rgba(20,20,30,.08),0 10px 24px -12px rgba(20,20,30,.18);
  --ground:rgba(30,30,50,.32);
  --emboss:0 1px 0 rgba(255,255,255,.9);
  --spring:cubic-bezier(.2,.9,.25,1.15);
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e0f12;
    --card:#1b1c21;
    --ink:#ececee;
    --muted:#9a9ca3;
    --line:rgba(255,255,255,.1);
    --accent:#7d93ff;
    --ok:#3ccf7a;
    --edge:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.5),0 10px 24px -12px rgba(0,0,0,.6);
    --ground:rgba(0,0,0,.7);
    --emboss:0 -1px 0 rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; overflow-x:clip; }
body{
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  /* Запасной фон для браузеров без color-mix(): иначе правило ниже отбрасывается целиком. */
  background:var(--bg);
  background:radial-gradient(1000px 640px at 50% 34%,color-mix(in srgb,var(--card) 70%,transparent),transparent 70%),var(--bg);
  color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* Переключатель языка: тихий, в углу, не спорит с визиткой. */
.lang{
  position:absolute; top:12px; right:12px; z-index:2;
  display:flex; gap:2px; padding:3px; border-radius:10px;
  border:1px solid var(--line);
}
.lang a{
  display:grid; place-items:center; min-width:36px; min-height:30px; padding:0 8px; border-radius:7px;
  font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--muted);
  transition:color .2s,background .2s;
}
.lang a[aria-current]{ color:var(--ink); background:var(--card); box-shadow:var(--edge); }

.page{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; padding:64px 16px 24px;
}

/* ---------- Визитка ---------- */
.scene{ position:relative; width:min(640px,100%); perspective:1400px; animation:arrive 1s var(--ease) both; }
@keyframes arrive{ from{ opacity:0; transform:translateY(30px) rotateX(18deg); } }

/* Тень на «столе»: уходит в сторону, противоположную наклону. */
.ground{
  position:absolute; left:7%; right:7%; bottom:-34px; height:70px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,var(--ground),transparent);
  filter:blur(12px);
  transform:translate(calc(var(--sx,0) * -22px),calc(var(--sy,0) * -8px));
  transition:transform .35s var(--ease);
}

/* Наклон за курсором и переворот — на разных слоях, у каждого своя скорость. */
.tilt{
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--ease);
}
.card{
  position:relative; aspect-ratio:1.7; cursor:pointer;
  /* iPhone: без серой вспышки при касании, без выделения текста и зума от двойного касания. */
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation;
  transform-style:preserve-3d; transition:transform .9s var(--spring);
}
.card.flipped{ transform:rotateY(180deg); }
/* Один раз приоткрывается, чтобы было понятно, что у визитки есть оборот. */
.card.peek{ animation:peek 1.2s var(--ease) 1.4s; }
@keyframes peek{ 45%{ transform:rotateY(-26deg); } }

.face{
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(22px,6.2%,40px);
  border-radius:18px; background:var(--card); box-shadow:var(--edge);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
/* WebKit (Safari и все браузеры на iPhone) прячет обратную сторону только у элемента
   с собственным 3D-преобразованием, поэтому у лицевой стороны явный rotateY(0). */
.front{ transform:rotateY(0deg); }
.back{ transform:rotateY(180deg); }
/* Страховка: невидимая сторона убирается, когда карточка встаёт ребром
   (через 110 мс по кривой --spring), и не может просветить ни в одном браузере. */
.front,.back{ transition:visibility 0s .11s; }
.back,.card.flipped .front{ visibility:hidden; }
.card.flipped .back{ visibility:visible; }
/* Фактура плотного картона и блик, который следует за курсором. */
.face::before,.face::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.face::before{
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.face::after{
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.55),transparent 55%);
  mix-blend-mode:soft-light; opacity:var(--go,0); transition:opacity .4s;
}
.face > *{ position:relative; z-index:1; }

.row{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.small{ font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--muted); }
.status{ display:inline-flex; align-items:center; gap:9px; }
.status i{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent); }
  70%,100%{ box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 0%,transparent); }
}
/* Главное на визитке — обещание заказчику, имя ниже как подпись. */
h1{
  max-width:13em;
  font-size:clamp(28px,5.4vw,44px); font-weight:600; line-height:1.06; letter-spacing:-.032em;
  text-wrap:balance; text-shadow:var(--emboss);
}
.role{ margin-top:14px; font-size:clamp(15px,2.3vw,18px); color:var(--muted); letter-spacing:-.005em; text-wrap:balance; }
.nowrap{ white-space:nowrap; }
.sign{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
/* Кликабельная зона не меньше 32×32, а отрицательный отступ сохраняет визуальное положение. */
.flip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:32px; min-height:32px; padding:8px; margin:-8px;
  font:500 12px/1 var(--mono); color:var(--accent);
}
.flip span{ display:inline-block; font-size:15px; transition:transform .4s var(--ease); }

.links{ margin:0; padding:0; list-style:none; }
.links a{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:clamp(16px,2.6vw,19px); font-weight:500; letter-spacing:-.01em;
  transition:color .2s,padding .3s var(--ease);
}
.links li:first-child a{ border-top:1px solid var(--line); }
.links span{ font:400 12.5px var(--mono); color:var(--muted); transition:color .2s; }

.hint{ font:400 12px/1 var(--mono); color:var(--muted); transition:opacity .5s; }
.hint.off{ opacity:0; }

/* ---------- Под визиткой ---------- */
.about{
  width:min(640px,100%); display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center;
}
.about > *{ animation:rise .8s var(--ease) both; }
.about > :nth-child(1){ animation-delay:.35s; }
.about > :nth-child(2){ animation-delay:.5s; }
.about > :nth-child(3){ animation-delay:.65s; }
.about > :nth-child(4){ animation-delay:.8s; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } }
.label{ margin:12px 0 -6px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.spheres{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:36em; margin:0; padding:0; list-style:none; }
.spheres li{
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; line-height:1.2; white-space:nowrap; color:var(--muted);
  background:color-mix(in srgb,var(--card) 55%,transparent);
}
.btn{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 28px;
  border-radius:999px; background:var(--ink); color:var(--bg);
  font-size:15px; font-weight:600;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.btn span{ transition:transform .3s var(--ease); }

.foot{ padding:24px 16px 28px; text-align:center; font:400 12px var(--mono); color:var(--muted); }

/* Hover только там, где есть мышь: на iPhone :hover «залипает» после касания. */
@media (hover:hover){
  .lang a:hover{ color:var(--ink); }
  .flip:hover span{ transform:rotate(180deg); }
  .links a:hover{ color:var(--accent); padding-left:6px; }
  .links a:hover span{ color:var(--accent); }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.45); }
  .btn:hover span{ transform:translateX(4px); }
}

/* Телефон: визитка вертикальная, главная фраза — в нижней трети, как на настоящих вертикальных карточках. */
@media (max-width:520px){
  .page{ padding-top:56px; gap:20px; }
  /* Высота подобрана так, чтобы кнопка помещалась на первый экран iPhone даже с панелями Chrome (~680 пт). */
  .card{ aspect-ratio:.92; }
  .front .pitch{ margin-top:auto; margin-bottom:26px; }
  /* На самых узких экранах кегль уменьшается, чтобы заголовок шёл в 3 строки, а не в 4. */
  .front h1{ font-size:clamp(28px,9.4vw,34px); }
  .spheres li{ font-size:13px; padding:5px 11px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
}