/* Внутренние страницы сайта (вход, версии) в стиле главной: светло-серый фон, белые плиты с торцом
   и тенью, шрифт Wix Madefor, оранжевый только акцентом. Классы те же, что в старом site.css. */
@import url('fonts/fonts.css?v=5');

:root {
  --red: #ff5a00;
  --red-btn: #ff5a00;
  --red-dark: #d94a00;
  --orange: #ff5a00;
  --green: #1f9d55;
  --blue: #2f6feb;
  --ink: #1b1b21;
  --ink-2: #4a4b55;
  --ink-3: #7b7c88;
  --night: #ececef;
  --night-2: #e4e4e9;
  --plum: #e4e4e9;
  --wine: #c9c9d2;
  --dawn: #ff5a00;
  --morning: #ececef;
  --glass: #ffffff;
  --text: #1b1b21;
  --text-2: #4a4b55;
  --line-night: rgba(27, 27, 33, 0.1);
  --line-day: rgba(27, 27, 33, 0.08);
  --f-display: 'Wix Madefor Display', 'Wix Madefor Text', system-ui, sans-serif;
  --f-text: 'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Wix Madefor Text', system-ui, sans-serif;
  --duration-stagger: 40ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.22, 1, 0.36, 1);
  --blur-small: 0px;
  --blur-medium: 0px;
  --gutter: clamp(16px, 3vw, 44px);
  --rail: clamp(0px, 9vw, 132px);
  --r: 14px;
  --edge: #d2d2da;
  --plate: inset 0 1px 0 #fff, 0 6px 0 0 var(--edge), 0 30px 44px -22px rgba(60, 66, 95, 0.34);
  --shadow-window: var(--plate);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--night); color: var(--text); font: 400 17px/1.55 var(--f-text); letter-spacing: -0.01em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
::selection { background: var(--orange); color: #fff; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
.tnum { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ночное небо, звёзды и город старого дизайна не нужны */
.sky, .stars, .city-wrap, .city, .tip { display: none !important; }

/* Шапка */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 var(--gutter); background: rgba(236, 236, 239, 0.92); }
.top.scrolled, .top.light.scrolled { background: rgba(236, 236, 239, 0.96); box-shadow: 0 1px 0 var(--line-night); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 17px/1 var(--f-text); letter-spacing: -0.02em; color: var(--ink); }
.brand img { width: 26px; height: 26px; }
.clock { font: 500 13px/1 var(--f-text); color: var(--ink-2); display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; background: #fff; border: 0; }
.clock i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
@keyframes blink { 50% { opacity: 0.35; } }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top nav a.link, .top.light nav a.link { text-decoration: none; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; font-size: 15px; transition: background var(--duration-quick); }
.top nav a.link:hover { color: var(--ink); background: rgba(27, 27, 33, 0.06); }

/* Кнопки: основная оранжевая, вторая светло-серая */
.btn { --bg: var(--orange); --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--bg); color: var(--fg); font: 600 16px/1 var(--f-text); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; box-shadow: none; transition: background var(--duration-quick); }
.btn:hover { background: #e95200; transform: none; box-shadow: none; }
.btn:active { transform: scale(0.99); }
.btn .arr { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.btn:hover .arr { transform: translateX(2px); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn.ghost { --bg: #e1e1e7; --fg: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: #d7d7de; box-shadow: none; }
.btn.ink { --bg: var(--orange); box-shadow: none; }
.btn.ink:hover { background: #e95200; }
.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }

/* Типографика */
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.045em; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(38px, 6vw, 96px); line-height: 0.92; }
h2 { font-size: clamp(32px, 4.4vw, 68px); line-height: 0.96; }
h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; }
p { margin: 0; }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.ex { font: 500 13px/1 var(--f-text); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.ex::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* Разделы по времени */
.hour { position: relative; padding: clamp(70px, 10vh, 130px) var(--gutter); display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 48px); }
.hour > .t { position: sticky; top: 88px; align-self: start; font: 700 18px/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 10px; }
.hour > .t::after { display: none; }
.hour > .body { min-width: 0; }
.hour .head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(32px, 5vh, 56px); }

/* Окна-демо стали белыми плитами с торцом и тенью */
.win { background: linear-gradient(160deg, #ffffff 0%, #f7f7f9 60%, #f1f1f5 100%); color: var(--ink); border-radius: var(--r); box-shadow: var(--plate); overflow: hidden; }
.win .bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-day); font-size: 13.5px; color: var(--ink-3); }
.win .bar .dots { display: none; }
.win .bar .ex { margin-left: auto; color: var(--ink-3); }
.win .bar .ex::before { background: var(--orange); }

/* Статусы в журнале: спокойные плашки, оранжевый только у «отправлено» */
.st { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--f-text); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.st.found { background: #ededf1; color: #5f606b; }
.st.sent { background: #fff0e6; color: #c24a00; }
.st.reply { background: #ededf1; color: var(--ink); }
.st.meet { background: #e7f6ee; color: #17794a; }
.st.no { background: #ededf1; color: #8a8b96; }
.flap { display: inline-flex; }
.flap span { display: inline-block; transform-origin: 50% 60%; }
.flap span.flip { animation: flip 260ms var(--ease-smooth-out) both; }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Подвал */
.foot { padding: 40px var(--gutter) 48px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; color: var(--ink-3); font-size: 14px; background: none; border-top: 1px solid var(--line-night); }
.foot .brand { color: var(--ink); }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .sp { margin-left: auto; }

/* Появление */
.js .rise { opacity: 0; transform: translateY(var(--rise, 16px)); }
.js .rise.in { opacity: 1; transform: none; transition: opacity var(--duration-very-slow) ease-in-out, transform 700ms var(--ease-smooth-out); transition-delay: var(--d, 0ms); }

/* 3D-предмет из главной, парит рядом с заголовком */
.obj { width: clamp(150px, 16vw, 250px); filter: drop-shadow(0 26px 24px rgba(60, 66, 95, 0.28)); animation: bob 8s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -10px; rotate: 3deg; } }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .clock { display: none; }
  .top { gap: 10px; height: 58px; }
  .top nav a.link { padding: 8px 9px; font-size: 14px; }
  .hour { grid-template-columns: minmax(0, 1fr); }
  .hour > .t { position: static; margin-bottom: 14px; padding: 0; }
}
@media (max-width: 560px) {
  .brand { white-space: nowrap; font-size: 15px; }
  .top nav a#switch { display: none; }
  .top nav .btn.small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .rise { opacity: 1; transform: none; }
}