/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/b4aee2c6c033.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/3774b678a66b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/d239a9455d8c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/9b4e8e0aac86.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/1771837459fc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/521e24d1741e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/1dc044f4824f.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-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/b4aee2c6c033.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/3774b678a66b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/d239a9455d8c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/9b4e8e0aac86.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/1771837459fc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/521e24d1741e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/1dc044f4824f.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-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/b4aee2c6c033.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/3774b678a66b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/d239a9455d8c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/9b4e8e0aac86.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/1771837459fc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/521e24d1741e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/1dc044f4824f.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-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/b4aee2c6c033.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/3774b678a66b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/d239a9455d8c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/9b4e8e0aac86.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/1771837459fc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/521e24d1741e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/1dc044f4824f.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;
}


/* ============================================================
   NST — новая главная. Apple-inspired система.
   ============================================================ */

:root {
  --bg:        #ffffff;
  --bg-alt:    #f5f5f7;   /* фирменный off-white Apple */
  --bg-deep:   #06080d;   /* почти чёрный для ПО-секции */
  --ink:       #1d1d1f;
  --ink-2:     #6e6e73;
  --ink-3:     #86868b;
  --hairline:  #d2d2d7;
  --accent:    #0066cc;
  --accent-2:  #0a84ff;
  --accent-press: #004fa3;

  --radius:    22px;
  --radius-lg: 30px;

  --maxw:      1180px;
  --maxw-text: 720px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(0,102,204,.18); }

a { color: var(--accent); text-decoration: none; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 22px; }

section { position: relative; }

.section-pad { padding: clamp(80px, 11vw, 150px) 0; }

/* ---------- type ---------- */
.eyebrow {
  font-size: clamp(15px, 2.4vw, 21px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.eyebrow.muted { color: var(--ink-2); }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.05; font-weight: 600; }

.display {
  font-size: clamp(40px, 7.4vw, 88px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.h2 {
  font-size: clamp(32px, 5.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
.h3 {
  font-size: clamp(23px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.lede {
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 400;
  line-height: 1.38;
  color: var(--ink-2);
  letter-spacing: -0.012em;
}
.body {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--ink-2);
  line-height: 1.5;
}
.center { text-align: center; }
.balance { text-wrap: balance; }

/* gradient text accent (sparingly) */
.grad {
  background: linear-gradient(110deg, #0a84ff 0%, #0066cc 55%, #2a47e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- chevron text links ---------- */
.clink {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.clink svg { width: .7em; height: .7em; margin-top: 2px; transition: transform .35s var(--ease); }
.clink:hover { text-decoration: underline; text-underline-offset: 3px; }
.clink:hover svg { transform: translateX(3px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 12px 23px;
  border-radius: 980px;
  border: none;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-press); }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid transparent; }
.btn-ghost:hover { background: rgba(0,102,204,.08); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #e8e8ed; }
.btn:active { transform: scale(.97); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 52px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.scrolled {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display:inline-block; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-fb { display: none; align-items: center; gap: 8px; }
.brand--fb .brand-fb { display: inline-flex; }
.foot-logo { height: 30px; width: auto; display: block; }
.foot-brand-fb { display: none; }
.foot-brand--fb .foot-brand-fb { display: inline; }
.nav-links { display: flex; gap: clamp(18px, 2.6vw, 34px); align-items: center; }
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  opacity: .85;
  transition: opacity .2s;
  letter-spacing: -0.01em;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-size: 14px; font-weight: 500;
  background: var(--accent); color: #fff;
  padding: 7px 16px; border-radius: 980px;
  transition: background .25s;
}
.nav-cta:hover { background: var(--accent-press); }
.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: clamp(96px, 12vw, 150px) 0 0;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, #eef4ff 0%, #ffffff 55%);
}

/* ---- cream hero: text on matching bg, full-bleed photo, buttons overlap ---- */
.hero.hero--cream {
  padding: 0;
  text-align: center;
  background: #eeede8;
}
.hero--cream .hero-copy {
  padding: clamp(92px, 11vw, 132px) 22px 0;
}
.hero--cream .hero-title { color: #1d1d1f; }
.hero--cream .hero-title .hl { color: var(--accent); }
.hero--cream .hero-sub { color: #6b6862; }
.hero--cream .eyebrow { color: var(--accent); }
.hero--cream .hero-actions {
  margin-top: 26px;
  gap: 14px;
  position: relative;
  z-index: 3;
  margin-bottom: clamp(-36px, -3vw, -26px);
}
.btn-cream { background: #fff; color: var(--ink); }
.btn-cream:hover { background: #e6e2da; }
.hero-photo-wrap { width: 100%; overflow: hidden; }
.hero-photo-full {
  width: 100%;
  aspect-ratio: 1920 / 953;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
  will-change: transform, opacity;
}
.hero-photo-full.in { opacity: 1; transform: scale(1); }
@media (max-width: 700px) {
  .hero-photo-full { aspect-ratio: 1 / 1; background-position: center; }
}
.hero-title {
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 20ch;
  margin: 6px auto 0;
}
.hero-title .hl { color: var(--accent); }
.hero-sub {
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 42ch;
  margin: 16px auto 0;
  letter-spacing: -0.012em;
}
.hero .hero-actions { margin-top: 24px; gap: 14px; }
.hero .hero-visual { margin-top: clamp(4px, 1.4vw, 20px); }
.hero-box {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  aspect-ratio: 1150 / 634;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (max-width: 700px) { .hero-box { max-width: 100%; } }

/* scale section map banner */
.scale-map {
  width: 100%;
  aspect-ratio: 16 / 8.4;
  min-height: 300px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: clamp(42px, 5vw, 64px);
  overflow: hidden;
}
@media (max-width: 700px) { .scale-map { aspect-ratio: 1800 / 1005; min-height: 0; background-size: contain; background-color: #0d1114; } }
.hero .display { margin: 0 auto; max-width: 14ch; }
.hero .lede { margin: 22px auto 0; max-width: 30ch; }
.hero-actions {
  margin-top: 26px;
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
}
.hero-visual {
  margin-top: clamp(40px, 6vw, 70px);
  width: 100%;
  max-width: none;
  margin-left: 0; margin-right: 0;
  padding: 0;
}
.hero-banner {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 320px;
  max-height: 78vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 700px) { .hero-banner { aspect-ratio: 4 / 3.4; } }

/* ---------- photo panels (art-directed placeholders) ---------- */
.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #dfe9fb 0%, #c9d9f6 45%, #aec4ef 100%);
  isolation: isolate;
}
.photo::before {
  /* fine grid + grain to read as a real photographic plate */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 46px 46px;
  mix-blend-mode: overlay;
  opacity: .5;
  z-index: 0;
}
.photo .cap {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 2;
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(20,30,60,.62);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 7px;
}
.photo .glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 60% at 70% 25%, rgba(255,255,255,.7), transparent 70%);
  pointer-events: none;
}
/* tonal variants */
.photo--a { background: linear-gradient(135deg, #e7eefc 0%, #c4d6f7 50%, #9fbef0 100%); }
.photo--b { background: linear-gradient(135deg, #eaf3ff 0%, #cfe3fb 50%, #a9cdf3 100%); }
.photo--c { background: linear-gradient(140deg, #dde7fb 0%, #b9cef3 55%, #93b3ec 100%); }
.photo--dark { background: linear-gradient(150deg, #1a2336 0%, #0e1830 55%, #081024 100%); }
.photo--dark .cap { color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); }
.photo--dark::before { opacity: .25; }

.hero-photo { aspect-ratio: 16 / 8.4; }

/* ============================================================
   AUDIENCES (bento)
   ============================================================ */
.aud-head { text-align: center; margin-bottom: clamp(34px, 5vw, 58px); }
.aud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.aud-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 36px 32px 0;
  text-align: center;
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.aud-card:hover { transform: translateY(-6px); }
.aud-card .tag { font-size: 16px; color: var(--ink-3); font-weight: 500; margin-bottom: 8px; }
.aud-card h3 { margin: 0 auto; max-width: 16ch; }
.aud-card .photo { margin-top: 28px; aspect-ratio: 5/3.4; border-radius: 0; }
.aud-card .photo { border-top-left-radius: 16px; border-top-right-radius: 16px; }
@media (max-width: 820px) { .aud-grid { grid-template-columns: 1fr; } }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  background: var(--bg-alt);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat .num {
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #0a84ff, #0050b5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lab { margin-top: 12px; font-size: 16px; color: var(--ink-2); line-height: 1.4; }
.stat .lab b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }

/* ============================================================
   CLIENTS / logo wall
   ============================================================ */
.clients { text-align: center; }
.logo-wall {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.logo-chip {
  height: 92px;
  border-radius: 18px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 19px;
  color: var(--ink-3);
  overflow: hidden;
  transition: color .3s, background .3s, transform .3s var(--ease);
}
.logo-chip img {
  max-width: 64%;
  max-height: 42%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: .42;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.logo-chip:hover img { filter: none; opacity: 1; }
.logo-chip svg.brand-mark {
  width: auto; height: auto;
  max-width: 66%; max-height: 48%;
  filter: grayscale(1) brightness(0);
  opacity: .42;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.logo-chip:hover svg.brand-mark { filter: none; opacity: 1; }
.chip-fb { display: none; }
.logo-chip.chip--fb { color: var(--ink-3); }
.logo-chip.chip--fb .chip-fb { display: inline; }
.logo-chip:hover { background: #ececf0; transform: translateY(-3px); }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   SERVICES carousel
   ============================================================ */
.svc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
}
.svc-nav { display: flex; gap: 10px; }
.arrow-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--bg-alt); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, opacity .25s, transform .2s;
}
.arrow-btn:hover { background: #e3e3e8; }
.arrow-btn:active { transform: scale(.92); }
.arrow-btn:disabled { opacity: .35; cursor: default; }
.arrow-btn svg { width: 17px; height: 17px; }

.svc-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 22px 26px;
  margin: 0 -22px;
  scrollbar-width: none;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(290px, 38vw, 430px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  display: flex; flex-direction: column;
  min-height: 520px;
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -28px rgba(20,40,90,.35); }
.svc-card .photo {
  aspect-ratio: 16/11; border-radius: 0; flex: 0 0 auto;
}
.svc-card .svc-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.svc-card .svc-eyebrow { font-size: 13px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.svc-card h3 { margin: 8px 0 10px; }
.svc-card p { font-size: 16px; color: var(--ink-2); line-height: 1.45; }
.svc-card .clink { margin-top: auto; padding-top: 18px; font-size: 17px; }

/* ============================================================
   PRINCIPLES
   ============================================================ */
.prin-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin-top: clamp(38px, 5vw, 60px);
}
.prin-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 34px 32px;
  transition: transform .45s var(--ease), border-color .45s;
}
.prin-card:hover { transform: translateY(-5px); border-color: #b9b9c0; }
.prin-card .idx {
  font-size: 14px; font-weight: 600; color: var(--accent);
  font-family: "SF Mono", ui-monospace, monospace; letter-spacing: .05em;
}
.prin-card h3 { margin: 14px 0 10px; font-size: 24px; }
.prin-card p { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 720px) { .prin-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PROCESS (steps)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(36px,5vw,56px); }
.step .ring {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 19px;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  margin-bottom: 18px;
}
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2,1fr); gap: 36px 18px; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   SOFTWARE (dark)
   ============================================================ */
.software {
  background: var(--bg-deep);
  color: #f5f5f7;
  border-radius: 0;
  overflow: hidden;
}
.software .eyebrow { color: var(--accent-2); }
.software .h2 { color: #fff; }
.software .lede { color: #a1a1a6; }
.sw-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.sw-feats { margin-top: 28px; display: grid; gap: 16px; }
.sw-feat { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; color: #d6d6db; }
.sw-feat .ck {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10,132,255,.16); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.sw-feat .ck svg { width: 12px; height: 12px; }
.sw-visual .photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
.software .btn { margin-top: 30px; }
@media (max-width: 860px) { .sw-grid { grid-template-columns: 1fr; } .sw-visual { order: -1; } }

/* ============================================================
   CTA band
   ============================================================ */
.cta {
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, #eef4ff 0%, #ffffff 60%);
}
.cta .h2 { max-width: 18ch; margin: 0 auto; }
.cta .body { max-width: 44ch; margin: 18px auto 0; font-size: 19px; }
.cta .btn { margin-top: 30px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-alt); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.footer .wrap { padding-top: 48px; padding-bottom: 40px; }
.foot-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px;
  padding-bottom: 34px; border-bottom: 1px solid var(--hairline);
}
.foot-brand { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.foot-col h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.foot-col a, .foot-col p { display: block; color: var(--ink-2); margin-bottom: 9px; }
.foot-col a:hover { color: var(--accent); }
.foot-phone { font-size: 17px; color: var(--ink) !important; font-weight: 500; }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 22px; color: var(--ink-3);
}
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .foot-top { grid-template-columns: 1fr; } }

/* ============================================================
   FACTS strip (under stats)
   ============================================================ */
.facts {
  margin-top: clamp(48px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.fact {
  padding: 26px 22px 4px;
  border-right: 1px solid var(--hairline);
}
.fact:last-child { border-right: none; }
.fact .k {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.fact .v { margin-top: 10px; font-size: clamp(16px,1.6vw,18px); color: var(--ink); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2,1fr); } .fact { border-right: none; border-bottom: 1px solid var(--hairline); } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

/* ============================================================
   WHY federal brands choose NST
   ============================================================ */
.why { background: var(--bg-alt); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(38px,5vw,58px); }
.why-item { background: var(--bg-alt); padding: 34px 30px 38px; transition: background .4s var(--ease); }
.why-item:hover { background: #fff; }
.why-item .wi {
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(0,102,204,.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.why-item .wi svg { width: 22px; height: 22px; }
.why-item h3 { font-size: 22px; margin-bottom: 9px; letter-spacing: -0.02em; }
.why-item p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SOFTWARE showcase (Apple product style, dark)
   ============================================================ */
.sw-hero { text-align: center; max-width: 22ch; margin: 0 auto; }
.sw-sub { text-align: center; max-width: 46ch; margin: 18px auto 0; }
.phones {
  margin-top: clamp(46px, 6vw, 78px);
  display: flex; gap: clamp(20px, 3vw, 44px);
  justify-content: center; align-items: flex-start;
  flex-wrap: wrap;
}
.phone-col { display: flex; flex-direction: column; align-items: center; width: clamp(210px, 23vw, 268px); }
.phone {
  width: 100%; aspect-ratio: 1 / 2.04;
  background: #0a0a0e; border-radius: 38px;
  padding: 9px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06) inset;
  position: relative;
  transition: transform .6s var(--ease);
}
.phone-col:hover .phone { transform: translateY(-10px); }
.phone::before { content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:78px; height:20px; background:#0a0a0e; border-radius:12px; z-index:5; }
.phone-screen { position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden; background:#f5f5f7; }
.ps-top { height: 48px; background: var(--accent); display:flex; align-items:flex-end; padding: 0 16px 9px; }
.ps-top .ps-title { color:#fff; font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.ps-body { padding: 14px; display:flex; flex-direction:column; gap:9px; }
/* task list screen */
.ps-task { background:#fff; border-radius:12px; padding:11px 12px; display:flex; gap:10px; align-items:center; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.ps-task .cbx { width:18px; height:18px; border-radius:6px; border:1.5px solid var(--accent); flex:0 0 18px; }
.ps-task.done .cbx { background:var(--accent); border-color:var(--accent); }
.ps-task .tt { height:7px; background:#e3e3ea; border-radius:4px; }
.ps-task .tt.l1 { width:78%; } .ps-task .tt.l2 { width:55%; }
.ps-task .tcol { display:flex; flex-direction:column; gap:6px; flex:1; }
.ps-task .tt.s { width:40%; background:#ededf2; height:6px; }
/* map screen */
.ps-map { position:absolute; inset:48px 0 0; background:
  linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px),
  #eef1f6;
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.ps-route { position:absolute; inset:0; }
.ps-pin { position:absolute; width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--accent); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.ps-pin::after { content:""; position:absolute; inset:5px; background:#fff; border-radius:50%; }
/* photo report screen */
.ps-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ps-ph { aspect-ratio:1; border-radius:9px; background-size:cover; background-position:center; }
.ps-badge { position:absolute; bottom:14px; left:14px; right:14px; background:rgba(10,10,14,.82); color:#fff; backdrop-filter:blur(8px); border-radius:11px; padding:9px 12px; font-size:11px; display:flex; align-items:center; gap:7px; }
.ps-badge .gd { width:14px; height:14px; color:#4ea1ff; flex:0 0 14px; }
.phone-cap { margin-top: 22px; text-align:center; }
.phone-cap .pc-t { color:#fff; font-size:19px; font-weight:600; letter-spacing:-0.02em; }
.phone-cap .pc-d { color:#a1a1a6; font-size:14.5px; margin-top:5px; line-height:1.45; max-width:24ch; }
.sw-foot { text-align:center; margin-top: clamp(40px,5vw,64px); }
.sw-foot .btn { margin: 0 auto; }

/* ============================================================
   CASES
   ============================================================ */
.case-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(38px, 5vw, 60px) 0;
  border-top: 1px solid var(--hairline);
}
.case-row:nth-child(even) .case-media { order: 2; }
.case-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background-size: cover; background-position: center; background-repeat:no-repeat; }
.case-name { display:flex; align-items:center; gap:12px; }
.case-name .cn { font-size: clamp(24px,2.8vw,32px); font-weight:700; letter-spacing:-0.03em; color: var(--ink); }
.case-name .cy { font-size: 13px; font-family:"SF Mono",ui-monospace,monospace; color: var(--ink-3); letter-spacing:.03em; padding:4px 10px; border:1px solid var(--hairline); border-radius:980px; }
.case-metric { font-size: clamp(40px,5vw,64px); font-weight:600; letter-spacing:-0.04em; line-height:1; margin: 18px 0 6px;
  background: linear-gradient(180deg,#0a84ff,#0050b5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.case-metric-lab { font-size: 17px; color: var(--ink-2); }
.case-desc { font-size: clamp(16px,1.6vw,18px); color: var(--ink-2); line-height:1.5; margin-top: 16px; max-width: 40ch; }
.case-chips { display:flex; gap:10px; flex-wrap:wrap; margin-top: 22px; }
.case-chip { font-size:14px; color:var(--ink); background:var(--bg-alt); border-radius:980px; padding:8px 15px; font-weight:500; }
@media (max-width: 800px) { .case-row { grid-template-columns: 1fr; gap:26px; } .case-row:nth-child(even) .case-media { order:0; } }

/* ---- audiences: equal-height copy so photos bottom-align ---- */
.aud-card { display: flex; flex-direction: column; }
.aud-copy { flex: 1 1 auto; display: flex; flex-direction: column; }
.aud-card .tag { margin-bottom: 8px; }
.aud-card h3 { margin: 0 auto; max-width: 18ch; }
.aud-card .photo { margin-top: 26px; }

/* ---- case brand logo panels ---- */
.case-logo {
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.case-logo .wm { line-height: 1; }
.case-logo .sub {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600;
}
.cl-magnit { background: #e2231a; }
.cl-magnit .wm { color: #fff; font-size: clamp(42px,5.4vw,68px); font-weight: 800; letter-spacing: -0.03em; }
.cl-magnit .wm i { color: #ffd400; font-style: normal; }
.cl-magnit .sub { color: rgba(255,255,255,.78); }
.cl-bacardi { background: #0a0a0c; }
.cl-bacardi .wm { color: #fff; font-size: clamp(34px,4.4vw,54px); font-weight: 700; letter-spacing: .14em; }
.cl-bacardi .bat { width: 46px; height: 46px; color: #d2161e; margin-bottom: 2px; }
.cl-bacardi .sub { color: #d2161e; }
.cl-ricco { background: radial-gradient(120% 120% at 30% 20%, #1c3b2a 0%, #0d2117 70%); }
.cl-ricco .wm { color: #e7c486; font-size: clamp(36px,4.6vw,56px); font-weight: 600; font-style: italic; font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.cl-ricco .sub { color: rgba(231,196,134,.66); font-family: var(--font); }

/* ---- realistic app screens ---- */
.phone-screen.app { background: #f2f2f5; display: flex; flex-direction: column; }
.ps-status { height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: 11px; font-weight: 700; color: #1d1d1f; background: #fff; }
.ps-status .sig { display: flex; gap: 3px; align-items: flex-end; }
.ps-status .sig i { width: 4px; border-radius: 1px; background: #1d1d1f; display: inline-block; }
.ps-status .sig i:nth-child(1){height:5px} .ps-status .sig i:nth-child(2){height:7px} .ps-status .sig i:nth-child(3){height:9px} .ps-status .sig i:nth-child(4){height:11px}
.ps-status .bat { width: 18px; height: 9px; border: 1.4px solid #1d1d1f; border-radius: 2.5px; position: relative; }
.ps-status .bat::after { content:""; position:absolute; left:1.4px; top:1.4px; bottom:1.4px; right:5px; background:#1d1d1f; border-radius:1px; }
.ps-nav { background: #fff; padding: 4px 16px 14px; border-bottom: 1px solid #ececf0; }
.ps-nav .ps-h { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f; display: block; }
.ps-nav .ps-sub { font-size: 12px; color: #8a8a8f; margin-top: 2px; display: block; }
.ps-list { flex: 1; overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ps-row { background: #fff; border-radius: 13px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ps-ck { width: 19px; height: 19px; border-radius: 6px; border: 1.6px solid #c4c4cc; flex: 0 0 19px; position: relative; }
.ps-ck.done { background: var(--accent); border-color: var(--accent); }
.ps-ck.done::after { content:""; position:absolute; left:5.5px; top:2.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ps-rc { flex: 1; min-width: 0; }
.ps-rt { font-size: 12.5px; font-weight: 600; color: #1d1d1f; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-rs { font-size: 11px; color: #9a9aa0; margin-top: 2px; display: block; }
.ps-pill { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 980px; flex: 0 0 auto; }
.ps-pill.done { background: rgba(31,138,91,.12); color: #1f8a5b; }
.ps-pill.work { background: rgba(0,102,204,.12); color: var(--accent); }
.ps-pill.wait { background: #efefef; color: #8a8a8f; }
.ps-tab { height: 44px; flex: 0 0 44px; background: #fff; border-top: 1px solid #ececf0; display: flex; align-items: center; justify-content: space-around; }
.ps-tab .ti { width: 21px; height: 21px; color: #c4c4cc; }
.ps-tab .ti.on { color: var(--accent); }
.ps-map.app2 { position: absolute; inset: 26px 0 0; }
.ps-nav-float { position: absolute; top: 36px; left: 12px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: 12px; padding: 8px 12px; z-index: 4; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ps-nav-float .ps-h { font-size: 14px; font-weight: 700; color:#1d1d1f; display:block; }
.ps-nav-float .ps-sub { font-size: 11px; color:#8a8a8f; display:block; margin-top:1px; }
.ps-visit { position: absolute; bottom: 14px; left: 12px; right: 12px; background: #fff; border-radius: 14px; padding: 12px 13px; z-index: 4; box-shadow: 0 10px 26px rgba(0,0,0,.18); display: flex; align-items: center; gap: 11px; }
.ps-visit .vp { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,102,204,.12); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ps-visit .vp svg { width: 18px; height: 18px; }
.ps-visit .vc { flex: 1; min-width: 0; }
.ps-visit .vt { font-size: 12.5px; font-weight: 700; color: #1d1d1f; display: block; }
.ps-visit .vs { font-size: 11px; color: #9a9aa0; display: block; margin-top: 2px; }
.ps-visit .vgo { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 7px 11px; border-radius: 980px; flex: 0 0 auto; }
.ps-rep { flex: 1; display: flex; flex-direction: column; }
.ps-rep .ps-grid { padding: 10px; gap: 7px; }
.ps-rep .ps-ph { aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; }

/* ============================================================
   print-safe additions reuse below
   ============================================================ */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.photo.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;}
.photo.has-img::before{display:none;}
.photo.has-img .glow,.photo.has-img .cap{display:none;}

/* ===== Russia dotted map ===== */
.rus { background: linear-gradient(180deg,#fbfcfd 0%, #f3f5f8 55%, #eceff4 100%); text-align:center; overflow:hidden; }
.rus-eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:14px; }
.rus-stats { display:flex; justify-content:center; align-items:stretch; max-width:760px; margin:clamp(34px,4.4vw,52px) auto 0; }
.rus-stat { flex:1; padding:4px clamp(14px,3vw,30px); }
.rus-stat + .rus-stat { border-left:1px solid var(--hairline); }
.rus-stat .n { font-size:clamp(40px,5.4vw,66px); font-weight:600; letter-spacing:-0.045em; line-height:1; color:var(--accent); }
.rus-stat .l { margin-top:9px; font-size:clamp(13px,1.4vw,15px); color:var(--ink-2); letter-spacing:-0.01em; }
.rus-map-wrap { width:100vw; margin-left:calc(50% - 50vw); margin-top:clamp(8px,2vw,26px); }
canvas.rus-map { display:block; width:100%; height:auto; max-width:1760px; margin:0 auto; }
.rus-cap { margin-top:clamp(10px,2vw,26px); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); line-height:1.8; }
@media (max-width:560px){ .rus-stat .l{font-size:12px;} .rus-cap{font-size:11px;} }

/* ===== правки адаптива (деплой nst.crtweb.ru) ===== */
/* карусель направлений: первая карточка встаёт по линии заголовка, а не прилипает к краю */
.svc-track { scroll-padding-inline: 22px; }
/* карусель не вылезает за правый край экрана (иначе iOS Safari уменьшает всю страницу) */
@media (max-width: 1200px) { .wrap[style*="padding-right:0"] > .svc-track { margin-right: 0; } }
/* цифры 590 / 5 000+ / 7 000+ помещаются в узкий экран */
@media (max-width: 560px) {
  .rus-stat { padding: 4px 8px; }
  .rus-stat .n { font-size: clamp(28px, 8.4vw, 40px); }
}
/* макеты телефонов на планшете и мобильном — полной ширины, чтобы текст в карточках не ломался */
@media (max-width: 1000px) { .phone-col { width: min(268px, 78vw); } }

/* ===== редизайн: живая карта ===== */
.rus { background: radial-gradient(85% 55% at 50% 42%, #142650 0%, #0a1431 48%, #050914 100%); color: #fff; }
.rus .h2 { color: #fff; }
.rus .lede { color: #a9b4cb; }
.rus .rus-eyebrow { color: #7fb2ff; }
.rus-stat + .rus-stat { border-left-color: rgba(255,255,255,.12); }
.rus-stat .n { background: linear-gradient(180deg, #ffffff 10%, #8db6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rus-stat .l { color: #8e99b2; }
.rus-cap { color: #6e7a96; }
.rus-map3d { position: relative; width: 100%; max-width: 1760px; margin: 0 auto; aspect-ratio: 16 / 7; user-select: none; -webkit-user-select: none; }
.rus-map3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.map3d-on .rus-map3d { background: none; }
.map-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map-label { position: absolute; left: 0; top: 0; translate: -50% -100%; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 10px 5px; border-radius: 999px; background: rgba(6,12,30,.55); border: 1px solid rgba(140,180,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; will-change: transform; }
.map-label b { font-size: 12px; font-weight: 600; color: #e8f0ff; letter-spacing: .01em; }
.map-label span { font-size: 10px; color: #ffd38a; letter-spacing: .06em; text-transform: uppercase; }
.map-label--hq { border-color: rgba(255,205,130,.5); background: rgba(30,20,6,.5); border-radius: 12px; }
.map-tip { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 16px); pointer-events: none; opacity: 0; transition: opacity .15s ease;
  padding: 7px 12px; border-radius: 10px; background: #fff; color: #10172a; font-size: 13px; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; }
.map-tip.on { opacity: 1; }
.map-tip b { font-weight: 600; }
.map-tip span { font-size: 11px; color: #5b6478; }
.map-hint { display: none; text-align: center; font-size: 12px; color: #7f8aa6; margin: 2px 0 10px; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: clamp(4px,1vw,12px) auto 0; padding: 0 22px; font-size: 13px; color: #9aa6c0; }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-hq { background: #ffd38a; box-shadow: 0 0 10px #ffb84d; }
.lg-hub { background: #fff; box-shadow: 0 0 10px #7fb2ff; }
.lg-city { background: #6f9cf0; }
@media (max-width: 700px) {
  .rus-map3d { aspect-ratio: 1 / 0.82; }
  .map-hint { display: block; }
  .map-label b { font-size: 11px; }
  .map-legend { font-size: 12px; gap: 8px 16px; }
}

/* ===== редизайн: экраны приложения NSTeamReports ===== */
.phones--app { position: relative; perspective: 1800px; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.phones--app .phone-col { width: 268px; }
.phones--app .phone { aspect-ratio: auto; height: 548px; }
.ap { height: 100%; overflow: hidden; }
.ap > * { flex-shrink: 0; }
.ap > .ap-tasks { flex: 1 1 auto; min-height: 0; }
.phones--app .phone {
  border-radius: 46px; padding: 10px;
  background: linear-gradient(150deg, #4a4b50 0%, #1c1c20 30%, #2b2c31 70%, #4b4c52 100%);
  box-shadow: 0 60px 110px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 0 3.5px #0b0b0d inset, 0 0 60px -10px rgba(40,110,255,.18);
  transform-style: preserve-3d; transition: transform .9s var(--ease);
}
.phones--app .phone::before { top: 19px; width: 76px; height: 22px; background: #000; border-radius: 14px; z-index: 30; }
.phones--app .phone::after { content: ""; position: absolute; right: -3px; top: 120px; width: 3px; height: 62px; border-radius: 0 3px 3px 0; background: linear-gradient(#55565c, #2a2a2f); }
.phones--app .phone-screen { border-radius: 36px; }
.phones--app .phone-col:nth-child(4) .phone { transform: rotateY(14deg) rotateZ(-1deg) translateZ(-30px); }
.phones--app .phone-col:nth-child(6) .phone { transform: rotateY(-14deg) rotateZ(1deg) translateZ(-30px); }
.phones--app .phone-col--main .phone { transform: translateY(-18px) scale(1.06); }
.phones--app .phone-col:hover .phone { transform: translateY(-14px) rotateY(0) scale(1.03); }
.phones--app .phone-col--main:hover .phone { transform: translateY(-26px) scale(1.08); }

.ap { background: #f3f4f7; font-family: Inter, -apple-system, sans-serif; color: #12141a; display: flex; flex-direction: column; text-align: left; }
.ap svg { display: block; }
.ap-status { height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0 28px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; position: relative; z-index: 5; }
.ap-si { display: flex; align-items: center; gap: 5px; }
.ap-si svg { height: 10px; width: auto; fill: currentColor; }
.ap-bat { width: 21px; height: 10px; border: 1.3px solid currentColor; border-radius: 3px; position: relative; opacity: .9; display: inline-block; }
.ap-bat > i { position: absolute; left: 1.4px; top: 1.4px; bottom: 1.4px; width: 70%; background: currentColor; border-radius: 1.2px; }
.ap-bat::after { content: ""; position: absolute; right: -3.5px; top: 2.5px; width: 1.6px; height: 3.2px; background: currentColor; border-radius: 0 1px 1px 0; opacity: .6; }
.ap-home { position: absolute; bottom: 7px; left: 50%; width: 92px; height: 4px; margin-left: -46px; border-radius: 3px; background: #12141a; z-index: 20; }
.ap-home--light { background: rgba(255,255,255,.85); }

/* --- экран 1: задачи */
.ap-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 10px; }
.ap-hello { display: flex; align-items: center; gap: 9px; }
.ap-hello small { display: block; font-size: 10.5px; color: #8b8f99; }
.ap-hello b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.ap-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b8cff, #0047b3); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #cfe0ff; }
.ap-bell { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; position: relative; color: #3a3f4b; box-shadow: 0 2px 6px rgba(20,30,60,.06); }
.ap-bell svg { width: 17px; height: 17px; }
.ap-bell i { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; border: 1.5px solid #fff; }
.ap-prog { margin: 0 12px; padding: 12px 13px; border-radius: 18px; display: flex; align-items: center; gap: 11px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #3b82ff 0%, #0057d9 55%, #003f9e 100%); box-shadow: 0 12px 24px -12px rgba(0,80,200,.7); }
.ap-ring { position: relative; width: 50px; height: 50px; flex: 0 0 50px; }
.ap-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ap-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ap-ring .bg { stroke: rgba(255,255,255,.22); }
.ap-ring .fg { stroke: #fff; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
.phone-col.in .ap-ring .fg { stroke-dashoffset: 41.9; }
.ap-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; opacity: .85; }
.ap-ring > span b { font-size: 15px; font-weight: 700; opacity: 1; }
.ap-ring > span { grid-auto-flow: column; align-content: center; justify-content: center; gap: 0; }
.ap-prog-t b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.ap-prog-t span { display: block; font-size: 10.5px; opacity: .8; margin-top: 2px; }
.ap-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin-top: 8px; overflow: hidden; }
.ap-bar i { display: block; height: 100%; width: 67%; border-radius: 3px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ease) .5s; }
.phone-col.in .ap-bar i { transform: scaleX(1); }
.ap-seg { display: flex; gap: 5px; margin: 11px 12px 8px; overflow: hidden; }
.ap-seg span { font-size: 10px; font-weight: 600; padding: 5px 8px; border-radius: 999px; background: #fff; color: #6b7080; white-space: nowrap; }
.ap-seg span.on { background: #12141a; color: #fff; }
.ap-tasks { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 0 12px; overflow: hidden; }
.ap-task { display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 15px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(20,30,60,.04); }
.ap-task.done { opacity: .62; }
.ap-task.live { box-shadow: 0 0 0 1.5px #0066cc, 0 8px 18px -10px rgba(0,102,204,.6); }
.ap-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: -.02em; }
.ap-tc { flex: 1; min-width: 0; }
.ap-tc b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.ap-tc span { display: block; font-size: 10px; color: #8b8f99; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tc em { display: inline-block; font-style: normal; font-size: 9.5px; font-weight: 600; color: #4a5160; background: #f1f2f6; border-radius: 5px; padding: 2px 5px; margin-top: 4px; }
.ap-st { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; }
.ap-st.ok { width: 22px; height: 22px; border-radius: 50%; background: #e7f6ee; color: #17935a; display: grid; place-items: center; }
.ap-st.ok svg { width: 14px; height: 14px; }
.ap-st.work { color: #0066cc; display: flex; align-items: center; gap: 4px; }
.ap-st.work i { width: 7px; height: 7px; border-radius: 50%; background: #0a84ff; animation: apPulse 1.6s ease-out infinite; }
.ap-st.time { color: #8b8f99; font-weight: 600; }
.ap-tabbar { display: flex; justify-content: space-around; padding: 8px 6px 22px; background: rgba(255,255,255,.92); border-top: 1px solid #e9eaef; margin-top: 8px; }
.ap-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9px; font-weight: 600; color: #a3a7b1; }
.ap-tabbar span.on { color: #0066cc; }
.ap-tabbar svg { width: 21px; height: 21px; }

/* --- экран 2: карта */
.ap--map { background: #eeede6; }
.ap-mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-status--float { position: absolute; top: 0; left: 0; right: 0; }
.ap-route-done { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 2.2s var(--ease) .5s; }
.phone-col.in .ap-route-done { stroke-dashoffset: 0; }
.ap-pulse { transform-box: fill-box; transform-origin: center; animation: apRing 2s ease-out infinite; }
.ap-pulse--me { animation-duration: 2.4s; }
.ap-topcard { position: absolute; top: 50px; left: 11px; right: 11px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 16px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 20px -10px rgba(20,30,60,.35); z-index: 4; }
.ap-topcard-ic { width: 30px; height: 30px; border-radius: 9px; background: #e8f0ff; color: #0066cc; display: grid; place-items: center; flex: 0 0 30px; }
.ap-topcard-ic svg { width: 18px; height: 18px; }
.ap-topcard b { display: block; font-size: 12.5px; font-weight: 700; }
.ap-topcard small { display: block; font-size: 10px; color: #7d828d; }
.ap-topcard-n { margin-left: auto; font-size: 11px; font-weight: 700; color: #0066cc; background: #e8f0ff; padding: 4px 7px; border-radius: 8px; }
.ap-mapbtns { position: absolute; right: 11px; top: 112px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.ap-mapbtns span { width: 30px; height: 30px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: #3a3f4b; box-shadow: 0 4px 10px -4px rgba(20,30,60,.3); }
.ap-mapbtns span:last-child { color: #0a84ff; }
.ap-mapbtns svg { width: 15px; height: 15px; }
.ap-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 8px 14px 26px; box-shadow: 0 -10px 30px -12px rgba(20,30,60,.35); z-index: 4; }
.ap-grab { display: block; width: 34px; height: 4px; border-radius: 3px; background: #dcdde3; margin: 0 auto 10px; }
.ap-sheet-h { display: flex; align-items: center; gap: 10px; }
.ap-sheet-h b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.ap-sheet-h small { display: block; font-size: 10.5px; color: #7d828d; margin-top: 1px; }
.ap-chips { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.ap-chips span { font-size: 10px; font-weight: 600; color: #3a3f4b; background: #f1f2f6; padding: 4px 7px; border-radius: 7px; }
.ap-geo { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: 11px; background: #e9f7ef; color: #11744a; font-size: 10.5px; font-weight: 600; }
.ap-geo-ic { width: 18px; height: 18px; border-radius: 50%; background: #17935a; color: #fff; display: grid; place-items: center; flex: 0 0 18px; }
.ap-geo-ic svg { width: 12px; height: 12px; }
.ap-btn { display: block; margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; padding: 11px; border-radius: 14px; background: linear-gradient(180deg, #1a7cf0, #0062d1); box-shadow: 0 8px 16px -8px rgba(0,98,209,.8); }

/* --- экран 3: фотоотчёт */
.ap--dark { background: #0b0f1a; color: #fff; }
.ap-status--dark { color: #fff; }
.ap-rhead { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 8px; }
.ap-rhead b { font-size: 14px; font-weight: 700; }
.ap-back { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.ap-back svg { width: 8px; height: 13px; }
.ap-count { font-size: 10.5px; font-weight: 600; color: #9aa3b8; background: rgba(255,255,255,.08); padding: 4px 8px; border-radius: 8px; }
.ap-shot { position: relative; margin: 0 10px; height: 188px; border-radius: 18px; overflow: hidden; }
.ap-shot-img { position: absolute; inset: 0; background-size: cover; background-position: 40% center; transform: scale(1.04); }
.ap-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(4,8,20,.85) 100%); }
.ap-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #5ab0ff, transparent); box-shadow: 0 0 14px 3px rgba(90,176,255,.55); z-index: 3; animation: apScan 3.2s ease-in-out infinite; }
.ap-box { position: absolute; z-index: 2; border: 1.6px solid #3ddc84; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); opacity: 0; transform: scale(.9); animation: apBox 6.4s ease-out infinite; }
.ap-box:nth-of-type(2) { animation-delay: .5s; } .ap-box:nth-of-type(3) { animation-delay: 1s; } .ap-box:nth-of-type(4) { animation-delay: 1.5s; }
.ap-box em { position: absolute; left: -1.6px; top: -16px; font-style: normal; font-size: 8.5px; font-weight: 700; color: #06210f; background: #3ddc84; padding: 2px 5px; border-radius: 4px 4px 4px 0; white-space: nowrap; }
.ap-box--warn { border-color: #ffb020; } .ap-box--warn em { background: #ffb020; color: #2a1800; }
.ap-stamp { position: absolute; left: 9px; bottom: 9px; z-index: 3; display: flex; flex-direction: column; gap: 1px; }
.ap-stamp code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; color: rgba(255,255,255,.92); letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ap-shield { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 8.5px; font-weight: 700; color: #0b1530; background: #7fd4ff; padding: 2px 6px 2px 3px; border-radius: 5px; margin-bottom: 3px; }
.ap-shield svg { width: 11px; height: 11px; color: #0b1530; }
.ap-shield svg path:first-child { fill: #fff; }
.ap-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 10px 0; }
.ap-metrics span { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 8px 8px 9px; }
.ap-metrics b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ap-metrics small { display: block; font-size: 8.5px; color: #96a0b5; margin-top: 1px; white-space: nowrap; }
.ap-metrics i { display: block; height: 3px; border-radius: 2px; margin-top: 6px; background: linear-gradient(90deg, #3ddc84 var(--w), rgba(255,255,255,.1) var(--w)); }
.ap-check { margin: 9px 12px 0; display: flex; flex-direction: column; gap: 5px; }
.ap-check span { font-size: 10.5px; color: #d6dbe6; display: flex; align-items: center; gap: 7px; }
.ap-check span::before { content: ""; width: 13px; height: 13px; border-radius: 50%; flex: 0 0 13px; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2306210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.ap-check span.half::before { background: conic-gradient(#ffb020 0 66%, rgba(255,255,255,.15) 0); }
.ap-thumbs { display: flex; gap: 6px; margin: 10px 12px 0; }
.ap-thumbs i { width: 38px; height: 38px; border-radius: 9px; background-size: cover; background-position: center; opacity: .75; }
.ap-thumbs i.on { opacity: 1; box-shadow: 0 0 0 2px #0b0f1a, 0 0 0 3.5px #5ab0ff; }
.ap-thumbs i.add { display: grid; place-items: center; font-style: normal; font-size: 18px; color: #9aa3b8; border: 1.5px dashed rgba(255,255,255,.25); background: none; opacity: 1; }
.ap--dark .ap-btn { margin: auto 12px 26px; }

/* --- плавающие плашки вокруг телефонов */
.ap-chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; border-radius: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); animation: apFloat 6s ease-in-out infinite; pointer-events: none; }
.ap-chip b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.ap-chip small { display: block; font-size: 11px; color: rgba(255,255,255,.62); }
.ap-chip-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.ap-chip-ic svg { width: 16px; height: 16px; }
.ap-chip-ic.ok { background: #1fbf72; color: #fff; }
.ap-chip-ic.geo { background: #0a84ff; color: #fff; }
.ap-chip-ic.up { background: #ffb020; color: #2a1800; }
.ap-chip--1 { left: calc(50% - 612px); bottom: 34%; }
.ap-chip--2 { left: calc(50% - 480px); top: -34px; animation-delay: -2s; }
.ap-chip--3 { right: calc(50% - 612px); top: 30%; animation-delay: -4s; }

@keyframes apPulse { 0% { box-shadow: 0 0 0 0 rgba(10,132,255,.6); } 100% { box-shadow: 0 0 0 7px rgba(10,132,255,0); } }
@keyframes apRing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes apScan { 0%, 100% { top: 4%; } 50% { top: 92%; } }
@keyframes apBox { 0% { opacity: 0; transform: scale(.88); } 10%, 82% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
@keyframes apFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 1180px) { .ap-chip { display: none; } }
@media (max-width: 1000px) {
  .phones--app .phone-col:nth-child(n) .phone { transform: none; }
}
@media (max-width: 860px) {
  .phones--app { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: -22px; margin-right: -22px; padding: 30px 22px 10px; scroll-padding-inline: 22px; gap: 18px; perspective: none; }
  .phones--app::-webkit-scrollbar { display: none; }
  .phones--app .phone-col { flex: 0 0 min(268px, 74vw); width: min(268px, 74vw); scroll-snap-align: center; }
  .phones--app .phone-col:first-of-type { margin-left: calc((100% - min(268px, 74vw)) / 2 - 22px); }
  .phones--app .phone-col:last-of-type { margin-right: calc((100% - min(268px, 74vw)) / 2 - 22px); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-scan, .ap-chip, .ap-pulse, .ap-st.work i { animation: none; }
  .ap-box { animation: none; opacity: 1; transform: none; }
}

/* ===== редизайн: 3D-иконки «Почему NST» и 3D-картинки карточек ===== */
.why-item .wi--3d { width: 92px; height: 92px; background: none; border-radius: 0; margin: -10px 0 12px -10px; }
.why-item .wi--3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(40,60,110,.14)); transition: transform .6s var(--ease); }
.why-item:hover .wi--3d img { transform: translateY(-6px) rotate(-4deg) scale(1.05); }
.photo--3d { background-color: #ecebe6; }
.svc-card .photo--3d, .aud-card .photo--3d { transition: transform .8s var(--ease); }

/* ============================================================
   NST v3 — многостраничная версия по «Корректировкам ТЗ»
   Принцип: типографика, цифры, карта и интерфейс вместо декоративных картинок.
   ============================================================ */
:root { --ink-strong: #111114; }
html { scroll-padding-top: 72px; }
.reveal.d4 { transition-delay: .32s; }

.kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.kicker--light { color: #7fb2ff; }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .h2 { color: var(--ink-strong); }
.clink i { font-style: normal; transition: transform .35s var(--ease); display: inline-block; margin-left: 4px; }
.clink:hover i { transform: translateX(4px); }

/* ---------- header: глобальная навигация ---------- */
.nav { height: 60px; }
.nav .wrap { gap: 24px; }
.nav-links { gap: clamp(16px, 2.2vw, 30px); }
.nav-links > a, .nav-dd-btn { font-size: 14.5px; color: var(--ink); opacity: .86; transition: opacity .2s; }
.nav-links > a:hover, .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { opacity: 1; }
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 8px 0; font-family: inherit; letter-spacing: -0.01em; cursor: pointer; }
.nav-dd-btn svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.nav-dd-panel { position: absolute; top: calc(100% + 10px); left: -18px; width: 340px; padding: 8px; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 60px -24px rgba(20,30,60,.35), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.nav-dd-panel--sm { width: 280px; }
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel, .nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-dd:hover .nav-dd-btn svg, .nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-panel a { display: block; padding: 11px 14px; border-radius: 12px; transition: background .2s; }
.nav-dd-panel a:hover { background: var(--bg-alt); }
.nav-dd-panel b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.nav-dd-panel span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-cta { white-space: nowrap; }
.nav-burger { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: 12px; }
.nav-burger span { display: block; width: 20px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
.mnav-open .nav-burger span:first-child { transform: translateY(3.8px) rotate(45deg); }
.mnav-open .nav-burger span:last-child { transform: translateY(-3.8px) rotate(-45deg); }
.mnav { position: fixed; inset: 60px 0 0; z-index: 99; background: #fff; overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s; -webkit-overflow-scrolling: touch; }
.mnav-open .mnav { opacity: 1; visibility: visible; transition-delay: 0s; }
.mnav-open, .mnav-open body { overflow: hidden; }
.mnav-open .nav { background: #fff; border-bottom-color: rgba(0,0,0,.08); }
.mnav-in { padding: 18px 22px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.mnav-h { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 6px; }
.mnav-h:first-child { margin-top: 4px; }
.mnav a:not(.btn) { font-size: 21px; font-weight: 500; color: var(--ink); padding: 8px 0; letter-spacing: -0.02em; }
.mnav .mnav-phone { color: var(--accent); }
.mnav-cta { margin-top: 24px; align-self: stretch; }
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 480px) { .nav-cta { font-size: 13px; padding: 7px 13px; } }

/* ---------- hero ---------- */
.hero--cream .hero-copy { padding-top: clamp(84px, 10vw, 120px); }
.hero-sub { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ---------- клиенты: спокойная статичная полоса ---------- */
.clients-v3 { padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px); }
.clients-v3 .h2 { font-size: clamp(26px, 3.6vw, 40px); }
.clients-v3 .logo-wall { margin-top: 34px; gap: 12px; }
.clients-v3 .logo-chip { height: 84px; }
.clients-v3 .logo-chip:hover { transform: none; }

/* ---------- опыт ---------- */
.exp { background: var(--bg-alt); }
.exp-h { max-width: 17ch; color: var(--ink-strong); }
.exp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(44px, 6vw, 80px); border-top: 1px solid var(--hairline); }
.exp-stat { padding: clamp(24px, 3vw, 36px) clamp(0px, 2vw, 28px) 0 0; }
.exp-stat + .exp-stat { padding-left: clamp(18px, 3vw, 40px); border-left: 1px solid var(--hairline); }
.exp-n { font-size: clamp(48px, 7.4vw, 104px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink-strong); }
.exp-l { margin-top: 14px; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); position: relative; padding-top: 14px; }
.exp-l::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: var(--accent); }
@media (max-width: 760px) {
  .exp-stats { grid-template-columns: 1fr; }
  .exp-stat, .exp-stat + .exp-stat { padding: 26px 0 22px; border-left: 0; border-bottom: 1px solid var(--hairline); }
  .exp-stat:last-child { border-bottom: 0; }
}

/* ---------- карта ---------- */
.rus .kicker { margin-bottom: 0; }
.rus-stats--2 { max-width: 560px; }
.rus .rus-stat .n { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.map-legend [data-level="city"].off { display: none; }
.rus-map-wrap { margin-top: clamp(8px, 2vw, 20px); }

/* ---------- направления: editorial-строки ---------- */
.svc3-list { border-top: 1px solid var(--hairline); }
.svc3-row { display: grid; grid-template-columns: 72px minmax(0, 1.05fr) minmax(0, 1.3fr) auto; align-items: baseline; gap: 12px clamp(18px, 3vw, 40px);
  padding: clamp(26px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--hairline); color: var(--ink); position: relative; transition: background .4s var(--ease); }
a.svc3-row::before { content: ""; position: absolute; inset: 0 -22px; background: var(--bg-alt); border-radius: 18px; opacity: 0; transition: opacity .35s var(--ease); z-index: -1; }
a.svc3-row:hover::before { opacity: 1; }
.svc3-row { z-index: 0; }
.svc3-n { font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.svc3-t { font-size: clamp(26px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink-strong); }
.svc3-d { font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.5; max-width: 46ch; }
.svc3-go { font-size: 16px; color: var(--accent); white-space: nowrap; }
.svc3-go i { font-style: normal; display: inline-block; transition: transform .35s var(--ease); }
a.svc3-row:hover .svc3-go i { transform: translateX(6px); }
.svc3-list--static .svc3-row { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr); }
.svc3-list--compact .svc3-row { grid-template-columns: 72px 1fr auto; padding: 22px 0; }
.svc3-list--compact .svc3-t { font-size: clamp(22px, 2.6vw, 30px); }
.svc3-tech { margin-top: 26px; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 18px; background: #0b1020; color: #c9d2e6; font-size: 16px; line-height: 1.45; transition: background .3s; }
.svc3-tech:hover { background: #121a33; }
.svc3-tech b { color: #fff; font-weight: 600; }
.svc3-tech-k { flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7fb2ff; padding-right: 16px; border-right: 1px solid rgba(255,255,255,.14); }
.svc3-tech i { margin-left: auto; font-style: normal; color: #7fb2ff; font-size: 20px; transition: transform .35s var(--ease); }
.svc3-tech:hover i { transform: translateX(5px); }
@media (max-width: 860px) {
  .svc3-row, .svc3-list--static .svc3-row { grid-template-columns: 48px 1fr; }
  .svc3-d { grid-column: 2; }
  .svc3-go { grid-column: 2; }
  .svc3-list--compact .svc3-row { grid-template-columns: 48px 1fr; }
  .svc3-list--compact .svc3-go { grid-column: 2; }
  a.svc3-row::before { inset: 0 -12px; }
  .svc3-tech { flex-wrap: wrap; gap: 10px; }
  .svc3-tech-k { border-right: 0; padding-right: 0; width: 100%; }
}

/* ---------- аудитории: типографические сегменты ---------- */
.aud3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.aud3-grid--2 { grid-template-columns: repeat(2, 1fr); }
.aud3-item { border-top: 2px solid var(--ink-strong); padding-top: 22px; }
.aud3-item h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink-strong); }
.aud3-item p { margin-top: 14px; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.5; max-width: 34ch; }
@media (max-width: 860px) {
  .aud3-grid, .aud3-grid--2 { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- почему NST: три опоры ---------- */
.pillars { background: var(--bg-alt); }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.pillar { border-top: 1px solid var(--hairline); padding-top: 22px; }
.pillar-n { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.pillar h3 { margin-top: 12px; font-size: clamp(40px, 5.6vw, 76px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink-strong); }
.pillar p { margin-top: 18px; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.5; max-width: 32ch; }
.pillars-sub { margin-top: clamp(40px, 5vw, 64px); font-size: clamp(15px, 1.6vw, 19px); color: var(--ink); }
.pillars-sub i { font-style: normal; color: var(--accent); margin: 0 .5em; }
@media (max-width: 860px) { .pillars-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- NSTeamReports: две роли, без декоративных плашек ---------- */
.sw-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: clamp(34px, 4vw, 52px) auto 0; }
.sw-role { padding: 22px 24px 24px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); text-align: left; }
.sw-role-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7fb2ff; }
.sw-role h3 { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.sw-role p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: #a9b1c4; }
.phones--app .phone-col:nth-child(n) .phone { transform: none; }
.phones--app .phone-col:hover .phone { transform: translateY(-6px); }
.phones--app .phone-col--main .phone, .phones--app .phone-col--main:hover .phone { transform: none; }
.phones--app .pc-t { font-size: 17px; }
@media (max-width: 760px) { .sw-roles { grid-template-columns: 1fr; } }

/* ---------- кейсы ---------- */
.case3 .case-dl { margin-top: 20px; display: grid; gap: 14px; }
.case3 .case-dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.case3 dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.case3 dd { font-size: clamp(15px, 1.5vw, 17px); color: var(--ink); line-height: 1.5; }
.case-res { margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--bg-alt); display: flex; flex-direction: column; gap: 6px; }
.case-res-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.case-res-v { font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink-strong); line-height: 1.35; }
.case-res-v b { font-weight: 700; font-size: 1.25em; letter-spacing: -0.03em; }
@media (max-width: 560px) { .case3 .case-dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- процесс: 5 этапов ---------- */
.proc { background: var(--bg-alt); }
.proc-list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--hairline); }
.proc-list li { padding: 26px clamp(10px, 1.6vw, 22px) 0 0; }
.proc-list li + li { padding-left: clamp(14px, 1.6vw, 22px); border-left: 1px solid var(--hairline); }
.proc-n { font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.04em; color: var(--ink-strong); line-height: 1; }
.proc-list h3 { margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-strong); }
.proc-list p { margin-top: 6px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 960px) {
  .proc-list { grid-template-columns: 1fr; }
  .proc-list li, .proc-list li + li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
  .proc-n { grid-row: span 2; font-size: 26px; padding-top: 2px; }
  .proc-list h3 { margin-top: 0; }
}

/* ---------- финальный CTA ---------- */
.cta3 { text-align: center; }
.cta3 .h2 { color: var(--ink-strong); max-width: 18ch; margin: 0 auto; }
.cta3-text { max-width: 44ch; margin: 18px auto 0; font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-2); line-height: 1.5; }
.cta3-actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
.cta3-contacts { display: inline-flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.cta3-contacts a { color: var(--ink); font-size: 17px; }
.cta3-contacts a:hover { color: var(--accent); }

/* ---------- footer ---------- */
.foot-top--v3 { grid-template-columns: 1.5fr 1.2fr 1fr 1fr 1.3fr; }
.foot-col--brand p { margin-top: 14px; max-width: 26ch; }
.foot-legal { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.foot-legal a { color: var(--ink-3); }
.foot-legal a:hover { color: var(--accent); }
@media (max-width: 960px) { .foot-top--v3 { grid-template-columns: 1fr 1fr; } .foot-col--brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-top--v3 { grid-template-columns: 1fr; } }

/* ---------- внутренние страницы ---------- */
.ph { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 64px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: clamp(28px, 4vw, 48px); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs--dark, .crumbs--dark a { color: #8e99b2; justify-content: center; }
.ph-h { font-size: clamp(42px, 7vw, 92px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink-strong); max-width: 14ch; }
.ph-lede { margin-top: 24px; font-size: clamp(18px, 2.2vw, 26px); color: var(--ink-2); line-height: 1.4; max-width: 38ch; }
.ph-actions { margin-top: 32px; }
.ph--stub { min-height: 50vh; }
.inc { background: var(--bg-alt); }
.inc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.inc-list { list-style: none; border-top: 1px solid var(--hairline); }
.inc-list li { padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-strong); }
.ctl { padding: clamp(40px, 5vw, 64px) 0 0; }
.others { padding-top: clamp(56px, 7vw, 96px); }
.others .sec-head { margin-bottom: 18px; }
.prod-hero { padding-top: clamp(48px, 7vw, 96px); }
.prod-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.software .prod-actions .btn { margin-top: 0; }
.btn-light-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.btn-light-ghost:hover { background: rgba(255,255,255,.14); }
.prod-note { margin-top: 28px; font-size: 15px; color: var(--ink-2); }
.geo3-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--hairline); padding-top: 26px; margin-bottom: 28px; }
.geo3-stat b { display: block; font-size: clamp(44px, 5.6vw, 76px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink-strong); }
.geo3-stat span { display: block; margin-top: 10px; color: var(--ink-2); }
.geo3-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.geo3-hubs p:last-child { font-size: clamp(16px, 1.7vw, 20px); color: var(--ink); line-height: 1.6; }
@media (max-width: 860px) { .geo3-grid { grid-template-columns: 1fr 1fr; } .geo3-hubs { grid-column: 1 / -1; } }
.contacts3 { padding-bottom: clamp(80px, 10vw, 140px); }
.ct3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); border-top: 2px solid var(--ink-strong); padding-top: 26px; }
.ct3-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.ct3-v { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.025em; color: var(--ink-strong); line-height: 1.3; margin-bottom: 6px; }
a.ct3-v:hover { color: var(--accent); }
.ct3-v--addr { font-size: clamp(19px, 2vw, 24px); }
.ct3-btn { margin-top: 16px; }
.ct3-svc { margin-top: clamp(48px, 6vw, 80px); }
.ct3-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ct3-links a { padding: 10px 16px; border-radius: 999px; background: var(--bg-alt); color: var(--ink); font-size: 15px; transition: background .2s; }
.ct3-links a:hover { background: #e8e8ed; }
@media (max-width: 860px) { .ct3-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- карта: подписи и проявление ---------- */
.rus-map3d canvas { opacity: 0; transition: opacity 1.6s ease; }
.rus-map3d.map-on canvas { opacity: 1; }
.map-label { transition: opacity .5s ease; }
.map-label--hub { translate: 0 -50%; padding: 3px 9px 4px; background: rgba(6,12,30,.6); }
.map-label--hub b { font-weight: 500; color: #dfe8fb; }
.map-label--hq { border-radius: 999px; flex-direction: row; gap: 7px; align-items: baseline; }
@media (prefers-reduced-motion: reduce) { .rus-map3d canvas { opacity: 1; transition: none; } }
@media (max-width: 700px) {
  .map-label--hq span { display: none; }
  .map-label--hq { padding: 2px 8px 3px; }
  .map-label--hq b, .map-label--hub b { font-size: 10.5px; }
}

/* ============================================================
   Иконки и иллюстрации в стиле Apple (Refero: «gallery vitrine in morning fog»)
   Иконки — монолиния 1.5 в духе SF Symbols, второй слой 40%. Иллюстрации — предметный рендер на светлой дымке.
   ============================================================ */
.btn-primary { background: #0071e3; }
.btn-primary:hover { background: #0062c4; }
.nav-cta { background: #0071e3; }
.ico { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico-s { opacity: .4; }

/* направления: иконка у названия + миниатюра-рендер */
.svc3-ico { display: inline-block; width: .82em; height: .82em; margin-right: .36em; vertical-align: -0.08em; color: var(--ink-strong); font-style: normal; }
.svc3-ico .ico { stroke-width: 1.35; }
.svc3-list--vis .svc3-row { grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1.2fr) 200px; align-items: center; }
.svc3-list--vis .svc3-go { grid-column: 3; grid-row: 2; margin-top: -4px; }
.svc3-list--vis .svc3-d { align-self: end; }
.svc3-list--vis .svc3-n, .svc3-list--vis .svc3-t { align-self: center; grid-row: span 2; }
.svc3-thumb { grid-column: 4; grid-row: 1 / span 2; display: block; width: 200px; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; }
.svc3-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
a.svc3-row:hover .svc3-thumb img { transform: scale(1.05); }
@media (max-width: 860px) {
  .svc3-list--vis .svc3-row { grid-template-columns: 48px 1fr; align-items: start; }
  .svc3-list--vis .svc3-n, .svc3-list--vis .svc3-t { grid-row: auto; }
  .svc3-list--vis .svc3-d, .svc3-list--vis .svc3-go { grid-column: 2; grid-row: auto; margin-top: 0; }
  .svc3-thumb { grid-column: 2; grid-row: auto; width: 100%; max-width: 360px; margin-top: 6px; }
}

/* аудитории, опоры, процесс */
.aud3-ico, .pillar-ico, .proc-ico { display: block; color: var(--ink-strong); }
.aud3-ico { width: 40px; height: 40px; margin-bottom: 18px; }
.pillar-ico { width: 48px; height: 48px; margin: 22px 0 -4px; }
.pillar-ico .ico { stroke-width: 1.3; }
.proc-ico { width: 30px; height: 30px; margin-top: 18px; }
.proc-list .proc-ico + h3 { margin-top: 12px; }
@media (max-width: 960px) {
  .proc-ico { display: none; }
}

/* NSTeamReports — иконки на тёмном экране и в списке возможностей */
.software .svc3-ico, .software .aud3-ico { color: #fff; }

/* страница услуги: предметный рендер на дымке */
.ph-kicker { display: flex; align-items: center; gap: 10px; }
.ph-kicker .ico { width: 22px; height: 22px; color: var(--accent); }
.ph-visual { display: flex; justify-content: center; overflow: hidden; }
.ph-visual img { width: min(1200px, 100%); height: auto; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.ph-visual img.reveal { transform: translateY(18px) scale(.985); }
.ph-visual img.reveal.in { transform: none; }
/* направления на главной: иконка — отдельной строкой над названием (как в фиче-гридах Apple) */
.svc3-list--vis .svc3-row { grid-template-columns: 56px minmax(0, 1.25fr) minmax(0, 1fr) 200px; }
.svc3-list--vis .svc3-t { font-size: clamp(26px, 2.9vw, 40px); }
.svc3-list--vis .svc3-ico { display: block; width: 30px; height: 30px; margin: 0 0 14px; }
.svc3-list--vis .svc3-ico .ico { stroke-width: 1.5; }
@media (max-width: 860px) {
  .svc3-list--vis .svc3-row { grid-template-columns: 48px 1fr; }
  .svc3-list--vis .svc3-ico { width: 26px; height: 26px; margin-bottom: 10px; }
}

/* ============================================================
   Итерация 4: «Направления» 01–05 и страница «Мерчандайзинг»
   ============================================================ */
/* 05 NSTeamReports — внутри общей структуры, но чуть иначе */
.svc3-row--tech::before { opacity: 1 !important; background: #f2f6fc !important; }
a.svc3-row--tech:hover::before { background: #e9f1fb !important; }
.svc3-row--tech .svc3-n { color: var(--ink-strong); }
.svc3-tag { display: block; width: max-content; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.svc3-list--compact .svc3-row--tech .svc3-tag { margin-bottom: 6px; }

.sec-lede { margin-top: 20px; max-width: 44ch; font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-2); line-height: 1.45; }
.crumbs--center { justify-content: center; }
.kicker.center, .kicker--light.center { text-align: center; }

/* hero мерчандайзинга: чистый типографический экран */
.mh { text-align: center; padding: clamp(64px, 10vw, 140px) 0 clamp(56px, 8vw, 110px); }
.mh-h { font-size: clamp(44px, 7.6vw, 104px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; color: var(--ink-strong); max-width: 13ch; margin: 0 auto; }
.mh-lede { margin: 28px auto 0; max-width: 40ch; font-size: clamp(18px, 2.1vw, 25px); color: var(--ink-2); line-height: 1.42; }
.mh-cta { margin-top: 36px; }

/* clean-retail visual: раскрывается по ширине при скролле */
.mv { --p: 0; }
.mv-frame { width: 100%; overflow: hidden; clip-path: inset(0 calc((1 - var(--p)) * 7vw) round calc((1 - var(--p)) * 30px)); }
.mv-frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; transform: scale(calc(1.06 - var(--p) * .06)); transform-origin: center; }
@media (max-width: 700px) {
  .mv-frame { clip-path: inset(0 calc((1 - var(--p)) * 16px) round calc((1 - var(--p)) * 20px)); }
  .mv-frame img { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .mv-frame { clip-path: none; } .mv-frame img { transform: none; } }

/* форматы работы: типографическая сетка 2×2 */
.fmt { background: var(--bg-alt); }
.fmt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 4vw, 56px) clamp(32px, 6vw, 96px); }
.fmt-item { border-top: 1px solid var(--hairline); padding-top: 22px; }
.fmt-item h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink-strong); }
.fmt-item p { margin-top: 12px; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.5; max-width: 40ch; }
@media (max-width: 760px) { .fmt-grid { grid-template-columns: 1fr; gap: 30px; } }

/* география: текст + крупная смысловая фраза */
.geo4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.geo4-text p { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); line-height: 1.55; }
.geo4-text p + p { margin-top: 16px; }
.geo4-phrase { margin-top: clamp(56px, 8vw, 120px); font-size: clamp(40px, 6.6vw, 96px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; color: var(--ink-strong); }
.geo4-phrase span { display: block; }
.geo4-phrase span:last-child { color: var(--accent); }
@media (max-width: 860px) { .geo4-grid { grid-template-columns: 1fr; } }

/* NSTeamReports на странице услуги: три шага */
.sw3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); max-width: 1000px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: left; }
.sw3-item { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.sw3-n { font-size: 13px; font-weight: 600; color: #7fb2ff; letter-spacing: .04em; }
.sw3-item h3 { margin-top: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.sw3-item p { margin-top: 8px; font-size: 15.5px; color: #a9b1c4; line-height: 1.5; }
@media (max-width: 760px) { .sw3 { grid-template-columns: 1fr; } }

/* запуск проекта: вертикальная последовательность 01–06 */
.launch { list-style: none; border-top: 1px solid var(--hairline); }
.launch li { display: grid; grid-template-columns: 120px 1fr; gap: 0 clamp(16px, 3vw, 40px); padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--hairline); }
.launch-n { font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink-strong); }
.launch h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink-strong); }
.launch p { margin-top: 8px; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
@media (max-width: 700px) { .launch li { grid-template-columns: 52px 1fr; padding: 18px 0; } .launch-n { font-size: 24px; padding-top: 2px; } }

/* опыт / кейс */
.mcase { background: var(--bg-alt); }
.mcase-card { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 5vw, 80px); border-top: 2px solid var(--ink-strong); padding-top: 28px; }
.mcase-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mcase-name { margin-top: 10px; font-size: clamp(44px, 6vw, 84px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ink-strong); }
.mcase-sub { margin-top: 10px; color: var(--ink-2); font-size: 17px; }
.mcase-dl { margin-top: 0; display: grid; gap: 14px; }
.mcase-dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.mcase-dl > div:first-child { border-top: 0; padding-top: 0; }
.mcase-dl dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.mcase-dl dd { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink); line-height: 1.5; }
@media (max-width: 860px) { .mcase-card { grid-template-columns: 1fr; } .mcase-dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* FAQ: функциональный аккордеон, весь текст в HTML */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font-size: clamp(18px, 1.9vw, 23px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(45deg); transition: transform .35s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-list details p { padding: 0 44px 26px 0; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.55; max-width: 60ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.faq .sec-head .h2 { font-size: clamp(30px, 3.4vw, 46px); }
.map-label--hq { translate: -50% 0; }