/* ckp74.ru: temporary page. Palette and rules: docs/superpowers/specs, section 9. */
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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 {
  --brand: #13388c;
  --brand-deep: #0b2566;
  --accent: #c5531d;
  --cta: #ff8a1f;
  --cta-hover: #ff9a3d;
  --cta-ink: #1c0d00;
  --cta-glow: rgb(255 122 13 / 0.45);
  --ink: #0f1b33;
  --muted: #4a5670;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --line: #e4e8f0;
  --footer: #1f2a3d;
  --tile: #e8eefb;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 12px;
  --r-lg: 20px;
  --shadow-btn: 0 1px 2px rgb(15 27 51 / 0.1), 0 6px 12px -6px rgb(15 27 51 / 0.28);
  --shadow-card: 0 1px 2px rgb(15 27 51 / 0.05), 0 14px 32px -14px rgb(15 27 51 / 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--font); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: block; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 6px; }

/* Buttons: KittyBox (project 3L) proportions. 48px, 12px radius, soft shadow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--r);
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-btn);
}
.btn--cta { background: var(--cta); color: var(--cta-ink); box-shadow: 0 8px 20px -6px var(--cta-glow); }
.btn--cta:hover { background: var(--cta-hover); box-shadow: 0 12px 26px -6px var(--cta-glow); }
.btn--cta:active { transform: translateY(1px) scale(0.99); box-shadow: 0 4px 10px -4px var(--cta-glow); }
.btn--light { background: #fff; color: var(--brand); }
.btn--light:hover { background: #f0f4fb; }
.btn--quiet { background: #eff1f4; color: var(--ink); }
.btn--quiet:hover { background: #e7eaee; }
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 18px; }

/* Header: solid brand blue, logo text white. */
.header { background: var(--brand); color: #fff; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 88px; }
.brand { --logo-size: 60px; display: inline-flex; align-items: center; gap: calc(var(--logo-size) * 0.15); color: #fff; text-decoration: none; }
.brand__mark { width: var(--logo-size); height: var(--logo-size); flex: none; }
.brand__mark img { display: block; width: 100%; height: 100%; }
/* Owner rule: the text block is 70-75% of the mark height. Three lines at 24% of the mark size, line-height 1. */
.brand__text { font-size: calc(var(--logo-size) * 0.24); line-height: 1; font-weight: 600; text-align: left; letter-spacing: 0.01em; }
.brand--sm { --logo-size: 52px; }
.header__tools { display: flex; align-items: center; gap: 20px; }
.header__phone { display: none; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #fff; text-decoration: none; }
@media (min-width: 720px) { .header__phone { display: inline-flex; } }

/* Hero: gradient, circuit traces, one frosted pill and one frosted disc. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(55% 75% at 76% 42%, rgb(255 255 255 / 0.12), transparent 62%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/pcb-pattern.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.5), #000 55%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.5), #000 55%);
}
.hero__inner { display: grid; gap: 44px; align-items: center; padding-block: 56px 72px; min-height: calc(100dvh - 88px); }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.2fr 0.8fr; padding-block: 72px; } }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.status {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 15px; color: #fff;
  background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 28px -14px rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.75rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; max-width: 30ch; color: rgb(255 255 255 / 0.9); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hero__visual { display: grid; place-items: center; }
.hero__disc {
  display: grid; place-items: center; width: min(78vw, 360px); aspect-ratio: 1; border-radius: 50%;
  background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 40px 90px -40px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.hero__disc img { width: 66%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.35)); }
.hourglass { display: grid; place-items: center; width: 66%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55); }
.hourglass .icon { width: 52%; height: 52%; color: var(--cta); }
.hero__photo { width: 100%; max-width: 560px; height: auto; display: block; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .status, .hero__disc { background: rgb(11 37 102 / 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .status, .hero__disc { background: rgb(11 37 102 / 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 899px) { .hero__visual { order: -1; } .hero__disc { width: min(52vw, 220px); } }

/* Stub page: the blue fills the whole screen height, also under overscroll and on tall screens. */
html.stub, html.stub body { background: var(--brand-deep); }
html.stub body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
html.stub main { flex: 1; display: flex; flex-direction: column; }
html.stub .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; }
html.stub .hero__inner { min-height: 0; width: min(1160px, 100% - 40px); }

/* Sections. */
.section { padding: 80px 0; }
.section h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.about { display: grid; gap: 36px; }
@media (min-width: 900px) { .about { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } }
.about__text { display: grid; gap: 14px; }
.about__text p { color: var(--muted); max-width: 38ch; }
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.service { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.service__icon { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--r); background: var(--tile); color: var(--brand); font-size: 28px; }

.process { background: var(--surface); border-block: 1px solid var(--line); }
.process h2 { margin-bottom: 48px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; counter-reset: step; position: relative; }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 20px; align-items: start; }
.step__n { grid-row: 1 / span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 28px; box-shadow: var(--shadow-btn); position: relative; z-index: 1; }
.step h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; align-self: end; }
.step p { color: var(--muted); max-width: 34ch; }
.steps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--line); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .step__n { grid-row: auto; }
  .step h3 { align-self: start; }
  .steps::before { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px; }
}

/* Footer. */
.footer { background: var(--brand-deep); color: #e8edf7; padding: 40px 0; }  /* owner rule: logo on dark blue, no plate */
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer__note { color: #b9c6e6; font-size: 15px; }
.footer a { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }

/* Modal: opaque surface, backdrop dims the page. */
.modal { border: 0; border-radius: 24px; padding: 0; background: var(--surface); color: var(--ink); width: min(92vw, 460px); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5); }
.modal::backdrop { background: rgb(11 37 102 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__body { padding: 28px; }
.modal__title { margin: 0 0 18px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.015em; }
.modal__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.modal__item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); }
.modal__label { color: var(--muted); }
.modal__link { white-space: nowrap; color: var(--brand); font-weight: 700; text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .hero__copy > *, .hero__visual { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero__visual { animation-delay: 0.2s; }
  .modal[open] { animation: rise 0.3s ease both; }
  /* Hourglass: turns 180 degrees every 5 seconds (0.8 s turn, then hold). */
  .hourglass .icon { animation: flip 10s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  @keyframes flip {
    0% { transform: rotate(0deg); }
    8% { transform: rotate(180deg); }
    50% { transform: rotate(180deg); }
    58% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}