/* Google Fonts subsets: cyrillic + latin only. Unbounded 600 and 700 share one file per subset. */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(/assets/fonts/unbounded-cyr.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(/assets/fonts/unbounded-lat.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; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/onest-cyr.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/onest-lat.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; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* type is set in rem (16px root): a visitor's larger browser font size scales the text; the px values stay the same at the default */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* glass.js puts its page canvas in #gl-wrap, absolute at the document top (no positioned ancestor). Keep html and
   body unpositioned and unshifted; if one ever is, glass.js measures the offset (wrapTop) and draws against it. */
body {
  min-height: 100vh;
  background: var(--base);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; overflow-wrap: break-word; }
h1 { font-size: clamp(1.625rem, 4.2vw, 2.625rem); }
h2 { font-size: clamp(1.375rem, 2.4vw, 2rem); }
h3 { font-size: 1.25rem; }
p { max-width: 52ch; } /* ch is the width of «0»; Onest Cyrillic is narrower, so 52ch holds about 66-70 letters */
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; }
.container { width: min(1160px, 100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)); margin-inline: auto; }
.section { padding-block: clamp(56px, 8vw, 112px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ================= homepage sections =================
   Sections stay transparent: WebGL glass cards need a clear path down to the canvas (no solid section backgrounds). */
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { margin-top: 14px; font-size: 1.1875rem; color: var(--text-soft); }
.section-more { margin-top: 24px; }
.hero, .facts, .projects, .services, .prices, .steps-section, .call { text-shadow: 0 1px 12px rgba(2, 1, 4, .7); } /* text over the ribbon strands */
.projects, .services, .prices, .steps-section, .call { padding-block: clamp(44px, 5.5vw, 76px); }
.call { padding-bottom: 0; } /* the footer brings its own top margin */

/* ---------- hero (approved proto/hero-APPROVED-ribbon.html) ---------- */
/* minmax(0, 1fr): an auto track grew to the min-content of «автоматизации,» and pushed the hero past a 320 px screen */
.hero-stage { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 24px max(4vw, env(safe-area-inset-right)) 24px max(4vw, env(safe-area-inset-left)); }
.hero {
  width: min(860px, 92vw); min-height: 420px; border-radius: 48px; padding: 52px 64px;
  display: flex; flex-direction: column; justify-content: center; transform: translateY(6%);
}
.hero h1 { font-size: clamp(1.625rem, 4.2vw, 2.625rem); line-height: 1.12; margin-bottom: 16px; }
.hero p { font-size: 1.25rem; line-height: 1.5; color: rgba(235, 245, 255, .9); margin-bottom: 28px; max-width: 540px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .link-more { display: none; } /* phones only: secondary glass gives way to a text link (spec §7 Йерархия) */
/* the number on the first screen at every size (an older owner reads on the desktop and dials from the mobile) */
/* the number and the phone hours on one line (desktop) or stacked and centred (phones) */
.hero .hero-phone { margin: 14px 0 0; max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.hero .hero-hours { font-size: 1.0625rem; color: rgba(235, 245, 255, .9); }
.hero-phone a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 2.75rem; color: #fff; text-decoration: none; outline: none;
  font: 700 1.375rem/1.1 var(--font-head); letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 0 18px rgba(0, 224, 255, .35), 0 1px 12px rgba(2, 1, 4, .7); transition: color .25s, text-shadow .25s, translate .25s;
}
.hero-phone svg { flex: none; color: var(--cyan-bright); }
.hero-phone a:is(:hover, :focus-visible) { color: var(--cyan-bright); text-shadow: 0 4px 14px rgba(0, 224, 255, .55); translate: 0 -1px; }

/* ---------- AI-quotable fact line ---------- */
.facts { padding-block: clamp(40px, 6vw, 72px) 0; }
.fact-line { font: 600 clamp(1.25rem, 2vw, 1.625rem)/1.45 var(--font-text); max-width: 46ch; color: #eaf4ff; }
.facts p + p { margin-top: 18px; color: var(--text-soft); font-size: 1.125rem; }

/* ---------- projects: frosted cards with a screenshot ---------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { position: relative; border-radius: 28px; padding: 14px 14px 18px; display: flex; flex-direction: column; text-shadow: none; }
/* the whole card opens the project (people tap the picture); still one link, one Tab stop */
.project-card .link-more::before { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.project-card img { width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; border-radius: 16px; background: #0b1220; }
.project-card h3 { margin: 20px 10px 4px; }
.project-kind { margin: 0 10px 10px; font-size: 1rem; font-weight: 600; color: var(--cyan-bright); }
.project-card p:not(.project-kind) { margin: 0 10px 12px; color: #dbe6f5; }
.project-card .link-more { margin: auto 10px 0; align-self: flex-start; }

/* ---------- services: before / after ---------- */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-card { border-radius: 32px; padding: clamp(26px, 3.2vw, 40px); display: flex; flex-direction: column; text-shadow: none; }
.service-card > p { margin-top: 12px; color: #dbe6f5; }
.ba { margin: 22px 0 18px; display: grid; gap: 16px; }
.ba li { padding-left: 16px; border-left: 2px solid rgba(0, 112, 255, .55); color: #dbe6f5; }
.ba-before, .ba-after { display: block; max-width: none; }
.ba-after { margin-top: 4px; }
.ba-tag { display: inline-block; margin-right: 4px; font-weight: 600; color: #9fb0c8; }
.ba-tag.is-after { color: var(--cyan-bright); }
.service-card .link-more { margin-top: auto; align-self: flex-start; }

/* ---------- prices ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.price-tile { border-radius: 28px; padding: 28px 24px; text-shadow: none; }
.price-tile h3 { font-size: 1.125rem; min-height: 2.3em; }
.price { margin: 12px 0 10px; font: 700 2.125rem/1.1 var(--font-head); color: #fff; }
.price span { font: 500 1.0625rem var(--font-text); color: var(--cyan-bright); margin-right: 4px; }
.price .price-deal { font: 700 1.5rem/1.2 var(--font-head); color: #fff; margin: 0; white-space: nowrap; } /* «по уговорка»: the price by agreement */
.price-tile p:not(.price) { color: #dbe6f5; }
/* ЗЕТ чл. 4(2): one sentence on tax under the tiles, no number in it */
.vat-note { margin-top: 24px; font-weight: 600; color: #eaf4ff; }
.vat-note + .prices-note { margin-top: 8px; }
.prices-note { margin-top: 28px; color: var(--text-soft); }

/* ---------- 4 steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps li { position: relative; }
/* step numbers: a glass ball (WebGL kind 5, see shaders.js sphere()) resting in a neumorphic base (owner 2026-11-10).
   The base is solid #0b1220 with a hole exactly under the ball, so the canvas shows through it and the ball refracts
   the ribbon; its outer shadow sits on a separate layer (a mask would clip it). The base never lies under the ball. */
.step-n {
  --s: 68px; --ring: 10px;
  position: relative; isolation: isolate; display: grid; place-items: center; margin-bottom: 18px;
  width: calc(var(--s) + 2 * var(--ring)); height: calc(var(--s) + 2 * var(--ring)); border-radius: 50%;
}
.step-n::before, .step-n::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none; }
.step-n::after { box-shadow: -5px -6px 12px var(--neu-light), 6px 8px 16px var(--neu-dark); }   /* raised from the page */
.step-n::before {
  background-color: var(--neu);
  background-image:
    radial-gradient(circle 9px at 76% 81%, rgba(0, 224, 255, .20), rgba(0, 224, 255, 0)),          /* caustic on the base */
    radial-gradient(circle at calc(50% + 1.5px) calc(50% + 2.5px), rgba(0, 0, 0, .72) calc(var(--s) / 2),
                    rgba(0, 0, 0, 0) calc(var(--s) / 2 + 7px)),                                    /* the ball's contact shadow */
    linear-gradient(145deg, #101b31, var(--neu) 55%, #080d18);
  box-shadow: inset 1px 1px 1px rgba(46, 86, 150, .30);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--s) / 2 + .5px), #000 calc(var(--s) / 2 + 1.25px));
  mask: radial-gradient(circle at 50% 50%, transparent calc(var(--s) / 2 + .5px), #000 calc(var(--s) / 2 + 1.25px));
}
.sphere {
  display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  font: 700 1.5rem/1 var(--font-head); color: var(--cyan-bright); padding-top: .06em;   /* Unbounded sits a hair high */
  text-shadow: 0 0 6px rgba(0, 224, 255, .55), 0 0 16px rgba(0, 224, 255, .30);
}
/* no WebGL (or no slot for it): a CSS ball. Specular dot upper left, caustic lower right, a dark smoky body. No blur. */
html:not(.gl-on) .sphere, .sphere[data-glass-css] {
  background:
    radial-gradient(circle at 34% 21%, rgba(225, 247, 255, .95) 0, rgba(190, 238, 255, .5) 3.5%, rgba(143, 233, 255, 0) 11%),
    radial-gradient(ellipse 34% 22% at 30% 22%, rgba(143, 233, 255, .16), rgba(143, 233, 255, 0)),
    radial-gradient(circle at 63% 84%, rgba(0, 224, 255, .42) 0, rgba(0, 224, 255, 0) 24%),
    radial-gradient(circle at 42% 36%, rgba(28, 92, 190, .62) 0, rgba(8, 38, 96, .82) 42%, rgba(3, 12, 34, .96) 76%, #01050f 100%);
  box-shadow: inset 1px 2px 2px rgba(143, 233, 255, .28), inset -3px -5px 9px rgba(0, 0, 0, .55);
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: #dbe6f5; }

/* ---------- closing call panel ---------- */
.call-panel { border-radius: 40px; padding: clamp(32px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; text-shadow: none; }
.call-panel > p { margin-top: 14px; color: #dbe6f5; font-size: 1.1875rem; }
/* a block-level tap target, 55 px tall on phones: the 10 px of padding come out of the margin, so the panel keeps its layout */
.call-number {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 10px 8px;
  margin: 12px 0 14px; font: 700 clamp(1.75rem, 8.2vw, 3.5rem)/1.1 var(--font-head); color: #fff; text-decoration: none;
  letter-spacing: .02em; white-space: nowrap; text-shadow: 0 0 22px rgba(0, 224, 255, .35);
}
.call-number:is(:hover, :focus-visible) { color: var(--cyan-bright); outline: none; }
.call-panel .call-hours { margin: -6px 0 22px; font-size: 1.0625rem; color: #dbe6f5; }
.call-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.call-panel .call-note { margin-top: 18px; font-size: 1.0625rem; color: var(--text-soft); }

/* ---------- tablet / phone ---------- */
@media (max-width: 1023px) {
  .project-grid { grid-template-columns: 1fr 1fr; }
  .price-grid, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .project-grid, .service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* the hero sits low, clear of the sticky call button (62px + 16px from the bottom) */
  /* the header (8px + 60px) sits in flow above the stage, so the stage fills the rest of the first screen */
  .hero-stage { min-height: calc(100svh - 68px); align-items: end; padding: 16px 8px calc(100px + env(safe-area-inset-bottom)); }
  .hero { width: 100%; min-height: 0; border-radius: 34px; padding: 34px 24px 26px; transform: none; }
  .hero p { font-size: 1.0625rem; margin-bottom: 22px; }
  .hero .ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .hero-phone { margin-top: 8px; align-self: center; flex-direction: column; text-align: center; }
  .hero .btn-glass { display: none; }
  .hero .link-more { display: inline-flex; align-self: center; }
  .price-grid, .steps { grid-template-columns: 1fr; }
  .step-n { --s: 56px; --ring: 8px; }
  .sphere { font-size: 1.3125rem; }
  .price-tile h3 { min-height: 0; }
  .call-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .call-panel { border-radius: 30px; padding: 32px 20px; }
}
/* the longest hero word, «автоматизации,», is 11.65 em wide: at 26px it did not fit the 296 px a 360 px phone leaves
   (it hung into the padding), and on 320-359 px screens (Android display size Large/Largest) it pushed the page sideways */
@media (max-width: 640px) { .hero h1 { font-size: min(1.625rem, 7vw); } }
@media (max-width: 359px) { .hero { padding-inline: 20px; } }