@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

/* Use locally installed Qunterra if available, fall back to Montserrat */
@font-face {
  font-family: "Qunterra";
  src: local("Qunterra");
  font-display: swap;
}

/* Optional: use locally installed NFS Carbon style font if present */
@font-face {
  font-family: "NFS Carbon";
  src: local("NFS Carbon");
  font-display: swap;
}

:root {
  /* Force light color scheme on all devices */
  color-scheme: light;
  /* Brand palette: SYNTERRA blue + light surfaces */
  --brand-primary: #2a50a5;
  --brand-primary-soft: #4f7eea;
  --brand-primary-strong: #1f3d81;
  --brand-dark: #111827;

  /* Light UI: white background, dark text, blue accents */
  --bg-1: #ffffff;
  --bg-2: #f5f7ff;
  --text: #111111;
  --muted: #6b7280;
  --accent: var(--brand-primary);
  --accent-2: var(--brand-primary-soft);
  --accent-3: var(--brand-primary-strong);
  --accent-4: var(--brand-primary-soft);
  --accent-5: var(--brand-primary);
  --card: #ffffff;
  --border: rgba(148,163,184,.28);
  --radius: 16px;
  /* Text glow gradient: blue → cyan → light violet */
  --glow-1: #d5e3ff; /* very light blue */
  --glow-2: #a5c4ff; /* soft blue */
  --glow-3: #4f7eea; /* mid brand blue */
  --glow-4: #1f7af2; /* vivid blue */
  --glow-5: #38bdf8; /* cyan highlight */
  --glow-6: #7c3aed; /* rich violet */
  --glow-7: #a855f7; /* light violet */
  /* Breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  color: var(--text);
  font: 16px/1.6 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background-color: var(--bg-1);
  background-image:
    radial-gradient(140% 200% at 0 0, #f4f6ff 0, #ffffff 40%),
    radial-gradient(160% 220% at 100% 0, #eef3ff 0, #ffffff 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden; /* prevent accidental horizontal scroll on mobile */
}

@media (max-width: 768px) {
  body {
    /* Disable fixed background on mobile to improve performance */
    background-attachment: scroll;
  }
}

/* Fluid base typography for better responsiveness */
html { font-size: clamp(14px, 1.6vw, 16.5px) }
h1, h2, h3 {
  font-family: "Qunterra", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 700;
}
h1 { font-size: clamp(26px, 6vw, 42px) }
h2 { font-size: clamp(20px, 4.5vw, 30px) }
h3 { font-size: clamp(18px, 3.6vw, 24px) }
p, .muted { font-size: clamp(14px, 3.6vw, 16px) }
.lead { font-size: clamp(14px, 4.2vw, 18px) }

/* Subtle brand watermarks across background */
body::before {
  content: "";
  position: fixed; inset: -12vh -12vw; z-index: 0; pointer-events: none;
  background-repeat: repeat, repeat;
  background-size: 420px 260px, 360px 220px;
  background-position: 0 0, 120px 100px;
  mix-blend-mode: soft-light; opacity: .12; filter: saturate(105%);
  /* synterra.kz • Richman Group (layer 1, slightly larger) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='%2394a3b8' opacity='.06' font-family='Inter,Segoe UI,Arial,sans-serif' font-size='18' letter-spacing='.08em'%3E%3Ctext x='0' y='60' transform='rotate(-22 0 60)'%3Esynterra.kz%20%E2%80%A2%20Richman%20Group%3C/text%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='%2394a3b8' opacity='.05' font-family='Inter,Segoe UI,Arial,sans-serif' font-size='16' letter-spacing='.06em'%3E%3Ctext x='0' y='50' transform='rotate(-22 0 50)'%3ERichman%20Group%20%E2%80%A2%20synterra.kz%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* Lightweight mode for older / low-end devices:
   reduce fixed overlays, blurs and extra layers to improve scroll perf. */
html.low-end body::before {
  content: none;
}
html.low-end .wm,
html.low-end #wm-overlay {
  display: none !important;
}

/* Dynamic watermark overlay (floating + bouncing) */
.wm { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
.wm-item { position: absolute; color:#94a3b8; opacity:.07; text-transform: uppercase; letter-spacing:.18em; font-weight:700; white-space: nowrap; mix-blend-mode: soft-light; filter: blur(.15px) saturate(110%); }
@media (prefers-reduced-motion: reduce) { .wm { display:none } }

/* Disable static tiled watermarks when dynamic overlay is active */
body.wm-on::before { content: none !important }

/* ——— Общие элементы ——— */
img { max-width: 100%; height: auto; display: block }
footer { color: var(--muted); font-size: 14px; padding: 12px 0 24px }

@keyframes gradientShift {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

.container { max-width: min(1240px, 100% - 32px); margin: 0 auto; padding: clamp(16px, 2vw, 24px) }

/* Вертикальные разрывы между секциями внутри страницы */
.grid { display: grid; gap: clamp(24px, 5vw, 48px) }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,244,246,.96));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Safari/iOS needs vendor prefix for backdrop blur */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  backface-visibility: hidden;
  will-change: backdrop-filter;
}

/* In low-end mode avoid expensive backdrop blur while preserving layout */
html.low-end .glass,
html.low-end .navwrap,
html.low-end .modal .backdrop,
html.low-end #compare .card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.navwrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 16px; position: sticky; top: 16px; z-index: 20 }
.navwrap {
  position: sticky;
  background: #ffffff;
  border:1px solid rgba(148,163,184,.35);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: visible;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  backface-visibility: hidden;
  transform: translateZ(0);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.nav-title {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navwrap::after { content: ""; position:absolute; inset:-24px -32px; pointer-events:none; z-index:-1; 
  background:
    radial-gradient(260px 70px at 6% -8%, rgba(42,80,166,.10), transparent 60%),
    radial-gradient(260px 70px at 94% -8%, rgba(31,122,242,.10), transparent 60%);
  filter: blur(20px);
}
.navwrap.scrolled { /* Keep padding constant to avoid layout jank */ padding: 16px 16px; background: #ffffff; border-color: rgba(42,80,166,.55); box-shadow: 0 14px 34px rgba(15,23,42,.14) }

.nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:#ffffff; color:var(--brand-dark); cursor:pointer; transition: background .2s ease, border-color .2s ease }
/* Hamburger bars */
.nav-toggle .bar { display:block; width:22px; height:2px; border-radius:2px; background: currentColor; margin:4px 0; transition: transform .28s ease, opacity .24s ease }
/* Turn into X when open */
.navwrap[data-open="true"] .nav-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.navwrap[data-open="true"] .nav-toggle .bar:nth-child(2) { opacity: 0 }
.navwrap[data-open="true"] .nav-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* Mobile dropdown nav with smooth open/close */
.nav { display:flex; gap:8px; flex-direction:column; align-items:stretch; position:absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding:12px; border:1px solid var(--border); border-radius:12px; background: #ffffff;
  opacity: 0; transform: translateY(-6px) scale(.98); max-height: 0; overflow: hidden; pointer-events: none; visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, max-height .3s ease, visibility 0s linear .24s }
.nav a { position:relative; display:block; color: var(--text); text-decoration: none; padding: 11px 14px; border: 1px solid rgba(148,163,184,.26); border-radius: 10px; background: #f9fafb; transition: all .2s ease; font-size: clamp(14px, 1.2vw, 16px) }
.nav a:hover { border-color: rgba(42,80,166,.55); transform: translateY(-1px); background:#eef2ff }
.nav a.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; box-shadow: 0 0 30px rgba(42,80,166,.45) }
.nav a::after { content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); opacity:.0; transform: scaleX(.2); transform-origin:left; transition: transform .25s ease, opacity .25s ease, bottom .25s ease }
  .nav a:hover::after, .nav a.primary::after { opacity:1; transform: scaleX(1); bottom:5px }
  .navwrap[data-open="true"] .nav { opacity: 1; transform: none; max-height: 480px; pointer-events: auto; visibility: visible; transition-delay: 0s }

/* Desktop layout from 1090px */
/* Десктопная шапка уже с 768px */
@media (min-width: 768px) {
  .nav-toggle { display:none }
  .navwrap {
    padding: 14px 18px;
    gap: 18px;
  }
  .brand { flex-shrink: 0; }
  .nav {
    display:flex !important;
    position: static;
    flex-direction: row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:0;
    border:none;
    background: transparent;
    overflow: visible;
    opacity:1;
    transform:none;
    max-height:none;
    pointer-events:auto;
    visibility:visible;
    flex: 1 1 auto;
    min-width:0;
  }
  /* Горизонтальное меню + вертикальные языки */
  .nav-links {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    flex: 1 1 auto;
    flex-wrap:nowrap;
  }
  .nav-lang {
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:stretch;
  }
  .nav a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 40px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 12px;
    background:transparent;
    border:1px solid transparent;
    color:var(--text);
    text-align:center;
    line-height:1.25;
  }
  .nav a.primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-soft));
    border:none;
    color:#ffffff;
    box-shadow: 0 12px 26px rgba(42,80,166,.55);
  }
  .nav a.primary::after { display:none; }

  .nav a.lang {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 999px;
    background:transparent;
    border:1px solid rgba(148,163,184,.6);
  }
  .nav a.lang.active {
    background:#f3f4f6;
    color:var(--brand-dark);
    border-color: transparent;
    box-shadow: none;
  }
}


/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none }
  .nav-toggle .bar { transition: none }
}

/* Language pills inside nav */
.nav a.lang { text-transform: uppercase; letter-spacing:.06em; padding: 6px 8px; font-size: 12px; line-height: 1; border-radius: 8px; background:transparent; border-color: rgba(148,163,184,.4); color: var(--muted) }
.nav a.lang:hover { border-color: rgba(42,80,166,.65); color: var(--text) }
.nav a.lang.active { background:var(--brand-primary); color:#ffffff; border-color: transparent; box-shadow: 0 0 0 1px rgba(42,80,166,.35) inset }
.nav a.lang::after { display:none }

/* Instagram pill under language switcher */
.nav-social {
  display: none;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .8s cubic-bezier(0.19, 1, 0.22, 1),
    transform .8s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity, transform;
}
.nav-instagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 500;
}
.nav-instagram img {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

@media (min-width: 768px) {
  .nav-social {
    display: flex;
    position: absolute;
    right: 26px;
    bottom: -18px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 10px 22px rgba(15,23,42,.18);
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 18;
  }
  .navwrap.scrolled .nav-social {
    box-shadow: 0 10px 26px rgba(15,23,42,.24);
  }
  .nav-social.nav-social--hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  /* Hide Instagram item inside main nav on desktop
     — desktop uses separate floating Instagram pill */
  .nav a.nav-instagram {
    display: none;
  }
}

/* Brand blue gradient phone numbers (premium effect) */
.phone-link {
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: .01em;
  /* Fallback solid color for browsers without clip-to-text */
  color: #9bb4ff !important; /* soft light brand blue */
  text-decoration: none;
  /* Animated blue→cyan gradient with subtle highlights */
  background-image: linear-gradient(120deg,
    #9bb4ff 0%,   /* soft brand blue */
    #4f7eea 25%,  /* mid-brand blue */
    #1f7af2 50%,  /* vivid blue */
    #38bdf8 75%,  /* cyan highlight */
    #9bb4ff 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(79, 70, 229, .32), 0 0 22px rgba(56, 189, 248, .24);
  animation: violet-shine 7s ease-in-out infinite;
}
.phone-link:hover { background-position: 100% 50%; filter: saturate(1.05) brightness(1.02); }
.phone-link:active { transform: translateY(1px); }
@keyframes violet-shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-link { animation: none; }
}

.brand { position: relative; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:14px; background:
  linear-gradient(180deg, #ffffff, #f3f6ff);
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.brand::after { content:""; position:absolute; inset:-6px -10px; pointer-events:none;
  background: radial-gradient(120px 40px at 25% 50%, rgba(42,80,166,.12), transparent 60%),
              radial-gradient(120px 40px at 60% 50%, rgba(31,122,242,.10), transparent 60%);
  filter: blur(18px); opacity:.9; border-radius:16px; }
.brand::before { content:""; position:absolute; top:-25%; left:-30%; width:28%; height:150%; pointer-events:none; border-radius:20px; 
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform: rotate(12deg) translateX(-140%);
  opacity: 0;
  will-change: transform, opacity;
  animation: none; display: none;
}
.brand { transition: transform .25s ease }
.navwrap.scrolled .brand { transform: scale(.96) }
@keyframes shine {
  0%   { transform: rotate(12deg) translateX(-160%); opacity: 0 }
  10%  { opacity: .15 }
  25%  { opacity: .75 }
  75%  { opacity: .75 }
  90%  { opacity: .15 }
  100% { transform: rotate(12deg) translateX(240%); opacity: 0 }
}
.brand img { height: 46px; width: auto; mix-blend-mode: normal !important; filter: none; }
/* Raw PNG brand images */
.brand .brand-icon, .brand .brand-word { filter: none !important; height: auto }
.brand .brand-icon { height: 80px; border-radius: 14px; box-shadow: 0 6px 18px rgba(15,23,42,.12) }
.brand .brand-word { height: 22px }
.brand .brand-label {
  font-family: "Qunterra", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing:.02em;
  background: linear-gradient(90deg, #ffffff, #d3e2ff, #9bb4ff, #4f7eea);
  -webkit-background-clip:text; background-clip:text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(42,80,166,.3));
}
@media (max-width: 768px) {
  .brand .brand-word { display:none }
  .nav-title { display:block }
}

/* Site footer */
.site-footer { margin-top: 28px; padding: 22px 16px; text-align: center; border:1px solid var(--border); border-radius: 16px; background:
  radial-gradient(120% 160% at 10% -20%, rgba(42,80,166,.24), transparent 60%),
  radial-gradient(120% 160% at 90% -20%, rgba(31,122,242,.2), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
  box-shadow: 0 18px 40px rgba(15,23,42,.06), 0 0 0 1px rgba(148,163,184,.16) inset;
}
.site-footer .divider { height:1px; background: linear-gradient(90deg, rgba(42,80,166,.8), rgba(31,122,242,.4), rgba(42,80,166,.8)); border-radius: 999px; margin: 0 auto 14px; width: min(680px, 92%) }
.site-footer .links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 10px 0 6px }
.site-footer .links a { position:relative; color:var(--text); text-decoration:none; padding:6px 10px; border-radius:10px; border:1px solid rgba(148,163,184,.35); background: #f9fafb; transition: all .2s ease }
.site-footer .links a:hover { border-color: rgba(42,80,166,.7); box-shadow: 0 0 0 1px rgba(42,80,166,.32) inset, 0 8px 18px rgba(15,23,42,.08) }
.site-footer .copy { color: var(--muted); font-size: 13px; margin-top: 6px }

/* Utility */
.pill { display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--text); background: #f3f6ff }
.glow-text { background: linear-gradient(90deg, var(--glow-1), var(--glow-2), var(--glow-3), var(--glow-4), var(--glow-5), var(--glow-6), var(--glow-7)); -webkit-background-clip:text; background-clip:text; color: transparent; filter: drop-shadow(0 0 14px rgba(96,165,250,.25)); background-size: 220% 100%; animation: textShift 10s ease-in-out infinite }
@keyframes textShift { 0%,100% { background-position: 0% } 50% { background-position: 100% } }

/* Buttons */
.cta { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 12px; border:1px solid var(--border); background: #ffffff; color:var(--text); text-decoration:none; cursor:pointer; font-weight:600; letter-spacing:.01em; font-size: clamp(12px, 1vw, 16px); box-shadow: 0 6px 16px rgba(15,23,42,.08); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; white-space: nowrap }
.btn:hover { transform: translateY(-1px); border-color: rgba(42,80,166,.7); box-shadow: 0 10px 22px rgba(31,122,242,.22) }
.btn:active { transform: translateY(0) }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,122,242,.55) }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none; box-shadow: 0 14px 32px rgba(31,122,242,.5), 0 0 0 1px rgba(255,255,255,.08) inset }
.btn.primary:hover { box-shadow: 0 18px 36px rgba(31,122,242,.65) }
.btn svg { width:1.05em; height:1.05em }

.contact-link {
  color: var(--brand-primary);
  font-weight: 700;
  text-decoration: none;
}
.contact-link:hover {
  text-decoration: underline;
}

/* ——— Партнёрская страница: hero и анимации ——— */
.partners-hero {
  position: relative;
  padding: 28px 24px;
  overflow: hidden;
}
.partners-hero .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .75;
}
.partners-hero .hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(230,236,248,.9), rgba(214,225,242,.98));
  z-index: 1;
}
.partners-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.partners-hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: #eef2ff;
  border:1px solid rgba(148,163,184,.6);
  color:var(--text);
  font-size:12px;
}
.partners-hero-badge span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-soft));
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.partners-hero-metrics {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}
.partners-metric {
  flex: 1 1 120px;
  min-width:120px;
  padding:10px 12px;
  border-radius:12px;
  background: linear-gradient(180deg, #ffffff, #f3f6ff);
  border:1px solid rgba(148,163,184,.45);
}
.partners-metric strong {
  display:block;
  font-size:18px;
}
.partners-metric span {
  display:block;
  font-size:12px;
  color:#9aa4b8;
}
.partners-hero-orbit {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

/* Центральный блок */
.partners-orbit-core {
  position: absolute;
  inset: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(135deg, var(--brand-primary-soft), var(--brand-primary));
  box-shadow: 0 22px 40px rgba(42,80,166,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* Орбита: крутится целиком */
.partners-orbit-ring {
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  border: 1px dashed rgba(148,163,184,.32);
  animation: partners-orbit 32s linear infinite;
}

/* Кружки на орбите (4 базовых: POS / Vision / Склад / ERP) */
.partners-orbit-dot {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  /* стиль как на старом макете: белые сферки с лёгкой тенью */
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(15,23,42,.12);
  text-align: center;
  overflow: hidden;
  /* переменная подсветки остаётся, но эффект минимальный */
  --orbit-lit: 0;
}

/* Позиции четырёх основных кружков */
.partners-orbit-dot-1 { top: -18px; left: 18%; }
.partners-orbit-dot-2 { right: -12px; top: 26%; }
.partners-orbit-dot-3 { bottom: -18px; left: 24%; }
.partners-orbit-dot-4 { left: -10px; top: 48%; }

/* Текст внутри кружка — контр-анимация, чтобы не переворачивался */
.partners-orbit-dot span {
  display: block;
  line-height: 1.1;
  animation: partners-orbit-reverse 32s linear infinite;
  transform-origin: center center;
  transition: opacity .35s ease, transform .35s ease;
  font-weight: 600;
  text-shadow:
    0 0 1px rgba(15,23,42,.7),
    0 0 calc(1px + 2px * var(--orbit-lit)) rgba(255,255,255,.78);
}

/* лёгкий эффект появления нового текста */
.partners-orbit-dot span.is-changing {
  opacity: 0;
  transform: scale(.85);
}

/* Вращение орбиты */
@keyframes partners-orbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Обратное вращение текста (чтобы оставался «ровно») */
@keyframes partners-orbit-reverse {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .partners-orbit-ring { animation: none; }
  .partners-orbit-dot span { animation: none; }
}

/* Дополнительные «чипы» бизнес-форм на орбите */
/* Дополнительные «чипы» бизнес-форм на орбите */
.partners-orbit-chip {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(15,23,42,.12);
  text-align: center;

  /* чип сидит центром в точке top/left, которые выставит JS */
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.partners-orbit-chip.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%); /* без scale, без rotate */
}

/* текст оставляем с контр-вращением, чтобы не переворачивался */
.partners-orbit-chip span {
  display: block;
  transform-origin: center center;
  animation: partners-orbit-reverse 32s linear infinite;
}
.partners-orbit-dot {
  z-index: 3;
}

.partners-orbit-chip {
  z-index: 2;
}

.partners-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
.partners-grid .card {
  align-items:flex-start;
  text-align:left;
  padding:18px 16px;
  position: relative;
  /* состояния анимации появления задаются только,
     когда включён data-animate на гриде (см. JS) */
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .6s ease,
    transform .6s ease,
    box-shadow .6s ease,
    border-color .6s ease,
    filter .6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.partners-grid[data-animate="true"] .card {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  filter: saturate(.98) brightness(.98);
}
.partners-grid[data-animate="true"] .card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
  border-color: rgba(148,163,184,.55);
}
.partners-grid .card strong {
  font-size:16px;
  margin-bottom:4px;
}
.partners-grid .card .muted {
  font-size:14px;
}

.partners-two-col {
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap:20px;
  align-items:center;
}
.partners-two-col--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
.partners-two-col--materials {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap:18px;
}
.partners-two-col .partners-image-wrap {
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.partners-hands-video {
  width:100%;
  max-width:520px;
  border-radius:18px;
  display:block;
  box-shadow:0 18px 40px rgba(15,23,42,.35);
}

@media (max-width: 960px) {
  .partners-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .partners-hero {
    /* Чуть больше отступ снизу, чтобы орбита
       и нижняя точка не упирались в границу блока
       на планшетах и мобильных устройствах */
    padding: 20px 16px 40px;
  }
  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .partners-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
  .partners-two-col .partners-image-wrap {
    display:none;
  }
}
@media (max-width: 640px) {
  .partners-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-grid[data-animate="true"] .card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
  .partner-income-card .partner-income-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Utilities (added) */
.nowrap { white-space: nowrap }
.hero .glow-text .nowrap { white-space: nowrap }
@media (max-width: 1400px) { .hero .glow-text .nowrap { white-space: normal } }
.icon { width: 1.15em; height: 1.15em; opacity:.9 }
.list-item.pro { border-color: rgba(34,197,94,.35) }
.list-item.pro:hover { border-color: rgba(34,197,94,.55); box-shadow: 0 0 0 1px rgba(34,197,94,.28) inset, 0 12px 28px rgba(34,197,94,.18) }
.list-item.con { border-color: rgba(239,68,68,.35) }
.list-item.con:hover { border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 1px rgba(239,68,68,.28) inset, 0 12px 28px rgba(239,68,68,.18) }

/* Lists */
.list-grid { display:grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
/* Элементы списка “Работает в любых форматах” по центру */
.list-item { padding: 12px 14px; border:1px solid var(--border); border-radius: 12px; background: #ffffff; transition: box-shadow .25s ease, border-color .25s ease, transform .06s ease; cursor: pointer; display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px }
a.list-item { color: var(--text); text-decoration: none; display:block }
.list-item:hover { border-color: rgba(42,80,166,.65); box-shadow: 0 0 0 1px rgba(42,80,166,.28) inset, 0 10px 22px rgba(31,122,242,.18) }
.list-item:active { transform: translateY(1px) }

/* Построчное появление текста в примере партнёрского дохода */
.partner-income-card .partner-income-line {
  display:block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .48s ease, transform .48s ease;
  transition-delay: calc(var(--line-index, 0) * 90ms);
}
.partner-income-card.is-visible .partner-income-line {
  opacity: 1;
  transform: translateY(0);
}

/* Pricing */
.pricing { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.price-card { padding: 18px; border-radius: 18px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1)) }
.price-card h3 { margin:8px 0 4px; font-size:24px }
.muted { color: var(--muted) }

.muted.contact-link {
  color: var(--brand-primary);
  font-weight: 700;
}

/* Form controls */
input, select, textarea { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.4); background: #ffffff; color: var(--text); width: 100% }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(31,122,242,.75); box-shadow: 0 0 0 3px rgba(31,122,242,.35) }

/* Motion & safe-area */
@media (prefers-reduced-motion: reduce) {
  .spin:after, body { animation: none }
  .btn:hover { transform: none }
  .parallax { display:none }
  .glass,
  .navwrap,
  .modal .backdrop,
  #compare .card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Modal (lightbox) */
.modal { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; z-index: 50 }
.modal.open { display:flex }
.modal .backdrop { position:absolute; inset:0; background: rgba(2,6,23,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
/* Bigger modal dialog for better visibility */
.modal .dialog { position:relative; width:min(98vw, 1600px); max-height: 95vh; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1)); border:1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: 0 40px 80px rgba(15,23,42,.25) }
/* Make images fit as large as possible without overflow */
.modal img { width:100%; height:auto; max-height: calc(94vh - 64px); object-fit: contain; border-radius: 10px; display:block }
/* Larger close button */
.modal .close { position:absolute; top:8px; right:10px; background:#ffffff; color:var(--text); border:1px solid var(--border); border-radius:10px; width:42px; height:42px; font-size:18px; cursor:pointer }
/* Larger pager controls */
.modal .pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px }
.modal .pager button { background:#ffffff; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:16px; cursor:pointer }
  .modal .pager span { color: var(--muted); font-size: 15px }

/* Parallax background layers (soft for light theme) */
.parallax { position: fixed; inset: -20vh -10vw; z-index: 0; pointer-events: none; }
.parallax .layer {
  position:absolute;
  border-radius: 50%;
  filter: blur(80px) saturate(115%);
  opacity:.13;
  transform: translate3d(var(--px, 0px), calc(var(--y, 0px) + var(--py, 0px)), 0);
}
.parallax .l1 { width: 70vw; height: 70vh; top: -10vh; left: -10vw; background: radial-gradient(closest-side, rgba(165,180,252,.5), transparent 65%); }
.parallax .l2 { width: 60vw; height: 60vh; top: 18vh; right: -8vw; background: radial-gradient(closest-side, rgba(96,165,250,.55), transparent 65%); }
.parallax .l3 { width: 52vw; height: 52vh; bottom: -12vh; left: 22vw; background: radial-gradient(closest-side, rgba(129,140,248,.45), transparent 65%); }

/* Webdev page: aurora-style, full-page parallax */
.page-webdev .parallax {
  inset: -28vh -15vw;
}
.page-webdev .parallax .layer {
  opacity: .22;
  filter: blur(90px) saturate(140%);
  mix-blend-mode: screen;
  animation: webdevParallaxGlow 32s ease-in-out infinite alternate;
  background-size: 160% 160%;
}
.page-webdev .parallax .l1 {
  background:
    radial-gradient(closest-side at 16% 24%, rgba(165,180,252,.65), transparent 70%),
    radial-gradient(closest-side at 82% 52%, rgba(96,165,250,.45), transparent 74%);
}
.page-webdev .parallax .l2 {
  background:
    radial-gradient(closest-side at 14% 68%, rgba(56,189,248,.5), transparent 72%),
    radial-gradient(closest-side at 86% 26%, rgba(59,130,246,.52), transparent 74%);
  animation-duration: 40s;
}
.page-webdev .parallax .l3 {
  background:
    radial-gradient(closest-side at 24% 12%, rgba(129,140,248,.55), transparent 74%),
    radial-gradient(closest-side at 72% 88%, rgba(244,114,182,.4), transparent 76%);
  animation-duration: 48s;
}

@keyframes webdevParallaxGlow {
  0% {
    opacity: .18;
    background-position: 0% 40%;
  }
  50% {
    opacity: .3;
    background-position: 50% 60%;
  }
  100% {
    opacity: .2;
    background-position: 100% 40%;
  }
}

/* Licensing block */
.licensing { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.lic-tier { position:relative; padding: 18px; border-radius: 18px; border:1px solid var(--border); background: radial-gradient(120% 140% at 0 0, rgba(42,80,166,.08), #ffffff) }
.lic-tier .title { font-weight: 600; letter-spacing:.02em }
.lic-tier .price { font-size: 28px; margin:8px 0 4px }
.lic-tier .note { color: var(--muted); font-size: 14px }
.lic-tier .ribbon {
  position:absolute;
  top:-10px;
  right:10px;
  padding:6px 12px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  font-size:12px;
  box-shadow: 0 8px 20px rgba(31,122,242,.5);
}
.lic-tier.highlight { box-shadow: 0 0 0 1px rgba(31,122,242,.55) inset, 0 18px 40px rgba(31,122,242,.35) }

.lic-tier .badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-weight: 700;
  color: var(--muted);
  background: rgba(148,163,184,.12);
  box-shadow: 0 0 14px rgba(129,140,248,.16);
  text-shadow: 0 0 8px rgba(129,140,248,.26);
}
.tier-start .badge { background: rgba(59,130,246,.08); color:#1d4ed8; }
.tier-business .badge { background: rgba(34,197,94,.08); color:#15803d; }
.tier-ai .badge { background: rgba(249,115,22,.08); color:#c2410c; }
.tier-vip .badge {
  background: linear-gradient(135deg, rgba(252,211,77,.22), rgba(245,158,11,.22));
  color: #92400e;
  box-shadow: 0 10px 24px rgba(245,158,11,.38);
  text-shadow: 0 0 8px rgba(253,224,71,.6);
  border: 1px solid rgba(245,158,11,.65);
}

.tariff-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 8px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
.tariff-list li {
  position: relative;
  padding-left: 18px;
  margin: 2px 0;
}
.tariff-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0.45em;
  font-size: 0.7em;
  color: var(--accent);
}
.tariff-list li.off {
  color: var(--muted);
}
.tariff-list li.off::before {
  content: "✕";
  color: #9ca3af;
}
.tariff-main {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}

.calc { padding: 18px; border-radius: 18px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1)) }
.calc .row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.calc label { color: var(--muted) }
.calc label[for="lic-plan"] {
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.calc select {
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 10px;
  border:1px solid rgba(148,163,184,.4);
  background:#ffffff;
  color:var(--text);
  display:block;
  margin: 4px auto 0;
  text-align: center;
  text-align-last: center;
}
.calc input[type=number] { max-width: 120px; text-align:center }
.calc .calc-count {
  display: inline-flex;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.4);
  overflow: hidden;
  background: #ffffff;
}
.calc .calc-count input[type=number] {
  max-width: 90px;
  border: 0;
  padding: 6px 8px;
  font: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.calc .calc-count-btn {
  width: 32px;
  border: 0;
  padding: 0;
  background: #f3f4f6;
  color: #111827;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.calc .calc-count-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.calc .calc-count-btn:hover {
  background: #e5e7eb;
}
.calc .total { font-size: clamp(20px, 3.5vw, 28px); margin-top: 8px }
.calc .formula { color: var(--muted); font-size: 14px }

.tariff-compare { margin-top: 22px }
.tariff-compare-title { font-size: 15px; color: var(--muted); margin: 0 0 6px }
.plan-table-wrap {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #f9fafb;
  overflow-x: auto;
}
.plan-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}
.plan-table thead th {
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.plan-table thead th:first-child {
  text-align: left;
}
.plan-table tbody th,
.plan-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid rgba(148,163,184,.35);
}
.plan-table tbody th {
  text-align: left;
  font-weight: 500;
}
.plan-table tbody td {
  text-align: center;
}
.plan-table tbody tr:nth-child(even) td,
.plan-table tbody tr:nth-child(even) th {
  background: rgba(248,250,252,.9);
}


/* Просмотрщик PDF: размеры iframe */
/* Bigger PDF viewer as well */
.modal.pdf .dialog { width:min(98vw, 1600px); max-height: 95vh }
.modal.pdf iframe { width: min(98vw, 1600px); height: calc(95vh - 48px); border:0; background:#ffffff }

/* ——— Центровка карточек и списков (по требованию) ——— */
/* Карточки как на втором скриншоте */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
/* Центровка CTA-кнопок внутри сеток карточек и растяжение на всю ширину */
.cards > .cta { grid-column: 1 / -1; justify-content: center }
.card {
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* контент от верха, чтобы заголовки стояли в один ряд */
  text-align:center;
}
.card > strong {
  font-size: clamp(16px, 1.8vw, 20px);
  display:block;
  min-height: 2.6em; /* фиксированная зона под заголовок, чтобы описания начинались на одной линии */
}
/* Support semantic headings inside cards */
.card > h3 {
  font-size: clamp(16px, 1.8vw, 20px);
  margin: 0;
  font-weight: 700;
  display:block;
  min-height: 2.6em;
}
details summary h3 { display: inline; font-size: inherit; font-weight: 700; margin: 0 }

/* Partner tiers: colored labels + inline heading */
.partner-tier { text-align: center }
.partner-tier .tier-head { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom: 6px }
.partner-tier .badge { padding:4px 10px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing:.08em; font-weight:700 }
.tier-start .badge { background: rgba(59,130,246,.10); color:#1d4ed8 }
.tier-business .badge { background: rgba(124,58,237,.10); color:#6d28d9 }
.tier-premium .badge { background: rgba(245,158,11,.12); color:#b45309 }
.partner-tier .muted { margin-top: 8px }

/* Partner levels row: align content to top so titles and descriptions start on one line */
.cards.partner-levels .card {
  justify-content: flex-start;
}

/* Partner levels: colored labels with soft glow + subtle gradient */
.partner-level-label {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}

.partner-level-label--start {
  color: #1D4ED8;
  text-shadow:
    0 0 1px rgba(37, 99, 235, 0.95),
    0 0 8px rgba(129, 140, 248, 0.60);
}

.partner-level-label--business {
  color: #059669;
  text-shadow:
    0 0 1px rgba(5, 150, 105, 0.95),
    0 0 8px rgba(110, 231, 183, 0.60);
}

.partner-level-label--premium {
  color: #7C3AED;
  text-shadow:
    0 0 1px rgba(124, 58, 237, 0.95),
    0 0 8px rgba(196, 181, 253, 0.60);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .partner-level-label--start {
    background-image: linear-gradient(120deg, #1E3A8A 0%, #2563EB 40%, #A5B4FC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .partner-level-label--business {
    background-image: linear-gradient(120deg, #065F46 0%, #059669 40%, #6EE7B7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .partner-level-label--premium {
    background-image: linear-gradient(120deg, #5B21B6 0%, #8B5CF6 40%, #E0E7FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Scroll reveal: трёхмерное «выкативание» уровней партнёрства из глубины */
.cards.partner-levels.partner-levels--reveal {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.partner-levels--reveal .card {
  opacity: 0;
  transform-origin: 50% 0%;
  transform: translate3d(0, 40px, -120px) rotateX(14deg) scale(.96);
  filter: blur(4px);
  box-shadow: 0 20px 40px rgba(15,23,42,.0);
  transition:
    opacity .65s cubic-bezier(.16, 1, .3, 1),
    transform .65s cubic-bezier(.16, 1, .3, 1),
    filter .5s ease-out,
    box-shadow .65s ease-out,
    border-color .65s ease-out,
    background .65s ease-out;
}
.partner-levels--reveal.is-visible .card {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  filter: blur(0);
  box-shadow: 0 18px 42px rgba(15,23,42,.16);
  background: radial-gradient(140% 210% at 50% 0, #f9fafb 0, #ffffff 52%, #e5edf9 100%);
  border-color: rgba(148,163,184,.6);
}
.partner-levels--reveal .card:nth-child(1) { transition-delay: .05s; }
.partner-levels--reveal .card:nth-child(2) { transition-delay: .16s; }
.partner-levels--reveal .card:nth-child(3) { transition-delay: .27s; }

/* Partner program "who it's for" cards: center-focused slide-in animation */
.cards.partner-who-cards .card {
  opacity: 0;
  transform: translate3d(0, 0, 0);
}
.cards.partner-who-cards.is-visible .card {
  animation-duration: .65s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: forwards;
}
.cards.partner-who-cards.is-visible .card:nth-child(2) {
  animation-name: partnerWhoInFromLeft;
  animation-delay: 0s;
}
.cards.partner-who-cards.is-visible .card:nth-child(3) {
  animation-name: partnerWhoInFromRight;
  animation-delay: 0s;
}
.cards.partner-who-cards.is-visible .card:nth-child(1) {
  animation-name: partnerWhoInFromLeft;
  animation-delay: .55s;
}
.cards.partner-who-cards.is-visible .card:nth-child(4) {
  animation-name: partnerWhoInFromRight;
  animation-delay: .55s;
}

@keyframes partnerWhoInFromLeft {
  from {
    opacity: 0;
    transform: translate3d(-40px, 0, 0) scale(.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes partnerWhoInFromRight {
  from {
    opacity: 0;
    transform: translate3d(40px, 0, 0) scale(.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-levels--reveal .card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
  .cards.partner-who-cards .card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Список форматов — элементы по центру */
.list-grid { display:grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.list-item { padding: 12px 14px; border:1px solid var(--border); border-radius: 12px; background: #ffffff; transition: box-shadow .25s ease, border-color .25s ease, transform .06s ease; cursor: pointer; display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px }
.list-item:hover { border-color: rgba(42,80,166,.65); box-shadow: 0 0 0 1px rgba(42,80,166,.28) inset, 0 10px 22px rgba(31,122,242,.18) }
.list-item:active { transform: translateY(1px) }

/* Заголовок блока и «кикер» по центру (добавьте класс .section-center на секцию) */
.section-center .kicker, .section-center h2, .section-center h3 { text-align:center; margin-left:auto; margin-right:auto }
/* Extra spacing between section title and content inside centered glass sections */
.section-center .kicker { display:block; margin-bottom: 20px }
/* Center descriptions and make them brighter */
.section-center p { text-align: center; margin-left: auto; margin-right: auto }
.section-center .muted { color: var(--text) }
/* Readable tiles inside centered sections (About page) */
/* About-page tiles: ideal, robust, vertical composition */
.section-center .list-grid {
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.section-center .list-grid .list-item {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 20px;
  min-height: 132px;
}
.section-center .list-grid .list-item strong {
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.25;
  font-weight: 800;
  color: #eef2ff;
  letter-spacing: .01em;
  background: linear-gradient(90deg, rgba(199,210,254,.95), rgba(34,211,238,.95));
  -webkit-background-clip: text; background-clip: text; color: transparent;
	  filter: drop-shadow(0 0 8px rgba(42,80,166,.26));
}
.section-center .list-grid .list-item .muted {
  color: var(--muted);
  line-height: 1.65;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
}

/* «Без конструкторов» — код‑редактор с орбитой */
.no-builder-section {
  position: relative;
  overflow: hidden;
}
.no-builder-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .75;
  z-index: 0;
  pointer-events: none;
}
.no-builder-section > .kicker,
.no-builder-section > .no-builder-editor {
  position: relative;
  z-index: 1;
}
.no-builder-section .kicker {
  margin-bottom: 18px;
}
.no-builder-editor {
  position: relative;
  margin: 0 auto;
  max-width: 880px;
  padding: 18px 20px 20px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15,23,42,.64), rgba(15,23,42,.38));
  border: 1px solid rgba(148,163,184,.6);
  color: #f9fafb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.7;
  box-shadow: 0 20px 40px rgba(15,23,42,.46);
  overflow: hidden;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.no-builder-editor::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(148,163,184,.0),
    rgba(79,126,234,.35),
    rgba(56,189,248,.45),
    rgba(79,126,234,.35),
    rgba(148,163,184,.0));
  background-size: 260% 260%;
  animation: noBuilderOrbit 18s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.no-builder-editor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(160px 120px at 0% 0%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(200px 140px at 100% 0%, rgba(129,140,248,.08), transparent 60%);
  opacity: .22;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes noBuilderOrbit {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.no-builder-editor-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  z-index: 1;
}
.no-builder-editor-dots {
  display: none;
}
.no-builder-editor-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #4b5563;
  box-shadow: 0 0 0 1px rgba(15,23,42,.85);
}
.no-builder-editor-dot--red { background: #f97373 }
.no-builder-editor-dot--amber { background: #facc15 }
.no-builder-editor-dot--green { background: #4ade80 }
.no-builder-editor-label {
  position: relative;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-primary-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 11px 4px 24px;
  border-radius: 999px;
  background: rgba(248,250,252,.96);
  border: 1px solid rgba(148,163,184,.45);
  box-shadow: 0 8px 18px rgba(148,163,184,.35);
}
.no-builder-editor-label::before {
  content: "›_";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: normal;
  color: var(--brand-primary);
}
.no-builder-editor-code {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 4px 0 0;
  background: none;
  color: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.no-builder-editor-code code {
  font: inherit;
}
.no-builder-editor-code .nb-line {
  display: block;
}
.no-builder-editor-code .nb-comment {
  color: rgba(209,213,219,.85);
}
.no-builder-editor-code .nb-keyword {
  color: #60a5fa;
  font-weight: 500;
}
.no-builder-editor-code .nb-operator {
  color: rgba(156,163,175,.9);
}
.no-builder-editor-code .nb-string {
  color: #e5e7eb;
}
.no-builder-editor-code .nb-highlight {
  color: #ffffff;
  font-weight: 600;
}
/* Анимация «печатания» — включается, когда редактор получает класс .no-builder-editor--animated */
.no-builder-editor--animated .no-builder-editor-code .nb-line {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.no-builder-editor--animated .no-builder-editor-code .nb-line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  right: 0;
  background: var(--brand-primary-soft);
  box-shadow: 0 0 6px rgba(79,126,234,.65);
  opacity: 0;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(1) {
  animation: nbType 1.6s steps(40, end) .2s forwards;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(2) {
  animation: nbType 1.8s steps(44, end) 1.9s forwards;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(3) {
  /* заметно сокращаем паузу перед третьей строкой */
  animation: nbType 2s steps(48, end) 3.9s forwards;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(4) {
  animation: nbType 2.2s steps(52, end) 6.1s forwards;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(5) {
  animation: nbType 2.4s steps(60, end) 8.5s forwards;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(6) {
  animation: nbType 2.4s steps(48, end) 11s forwards;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(1)::after {
  animation: nbCaret 1s steps(1, end) .8s infinite;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(2)::after {
  animation: nbCaret 1s steps(1, end) 2.4s infinite;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(3)::after {
  animation: nbCaret 1s steps(1, end) 4.4s infinite;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(4)::after {
  animation: nbCaret 1s steps(1, end) 6.8s infinite;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(5)::after {
  animation: nbCaret 1s steps(1, end) 9.2s infinite;
}
.no-builder-editor--animated .no-builder-editor-code .nb-line:nth-child(6)::after {
  animation: nbCaret 1s steps(1, end) 11.6s infinite;
}
@keyframes nbType {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes nbCaret {
  0%, 49% { opacity: 1 }
  50%, 100% { opacity: 0 }
}
@media (max-width: 640px) {
  .no-builder-editor {
    padding: 14px 14px 16px;
    border-radius: 16px;
    font-size: 14px;
  }
  .no-builder-editor-label {
    letter-spacing: .12em;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .no-builder-editor--animated .no-builder-editor-code .nb-line {
    opacity: 1 !important;
    clip-path: none !important;
    animation: none !important;
  }
  .no-builder-editor--animated .no-builder-editor-code .nb-line::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .no-builder-bg {
    display: none;
  }
}

/* «Как это работает» — каскадное появление шагов */
#partner-steps {
  position: relative;
  overflow: visible;
}
.steps-flow {
  position: relative;
  overflow: visible;
  isolation: isolate;
  perspective: 1200px;
}
.steps-flow .list-item {
  position: relative;
  border-radius: 16px;
  border-color: rgba(148,163,184,.4);
  background:
    radial-gradient(160% 220% at 50% -40%, #ffffff 0, #f9fafb 42%, #e5edf9 100%);
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
  opacity: 0;
  transform-origin: 50% 80%;
  transform: translate3d(0, 32px, -80px) rotateX(10deg) scale(.96);
  filter: blur(4px);
  transition:
    transform .7s cubic-bezier(.16, 1, .3, 1),
    box-shadow .7s cubic-bezier(.16, 1, .3, 1),
    border-color .5s ease-out,
    background .6s ease-out,
    opacity .45s ease-out,
    filter .45s ease-out;
}
.steps-flow .list-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    conic-gradient(
      from 140deg,
      rgba(56,189,248,.0) 0deg,
      rgba(56,189,248,.0) 40deg,
      rgba(56,189,248,.55) 80deg,
      rgba(129,140,248,.65) 120deg,
      rgba(56,189,248,.55) 170deg,
      rgba(56,189,248,.0) 220deg,
      rgba(56,189,248,.0) 360deg
    );
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  transform: translateX(-55%) scaleX(.45);
  transition: opacity .45s ease-out;
  z-index: -1;
}
.steps-flow .list-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140% 220% at 50% 0%, rgba(255,255,255,.96) 0, rgba(248,250,252,.96) 38%, rgba(241,245,249,.96) 100%);
  z-index: -1;
}
.steps-flow .list-item strong {
  background: linear-gradient(120deg, #38bdf8, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.steps-flow .list-item .muted {
  color: var(--muted);
}
.steps-flow.is-visible .list-item {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  filter: blur(0);
  box-shadow:
    0 16px 40px rgba(15,23,42,.24),
    0 0 0 1px rgba(148,163,184,.55);
}
.steps-flow.is-visible .list-item::before {
  opacity: 1;
  animation: steps-flow-flash 900ms cubic-bezier(.2, .8, .25, 1) both;
}
.steps-flow.is-visible .list-item:nth-child(1) { transition-delay: .05s; }
.steps-flow.is-visible .list-item:nth-child(1)::before { animation-delay: .05s; }
.steps-flow.is-visible .list-item:nth-child(2) { transition-delay: .12s; }
.steps-flow.is-visible .list-item:nth-child(2)::before { animation-delay: .12s; }
.steps-flow.is-visible .list-item:nth-child(3) { transition-delay: .19s; }
.steps-flow.is-visible .list-item:nth-child(3)::before { animation-delay: .19s; }
.steps-flow.is-visible .list-item:nth-child(4) { transition-delay: .26s; }
.steps-flow.is-visible .list-item:nth-child(4)::before { animation-delay: .26s; }
.steps-flow.is-visible .list-item:nth-child(5) { transition-delay: .33s; }
.steps-flow.is-visible .list-item:nth-child(5)::before { animation-delay: .33s; }
.steps-flow.is-visible .list-item:nth-child(6) { transition-delay: .40s; }
.steps-flow.is-visible .list-item:nth-child(6)::before { animation-delay: .40s; }

@keyframes steps-flow-flash {
  0% {
    opacity: 0;
    transform: translateX(-55%) scaleX(.45);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(55%) scaleX(.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-flow .list-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.14);
  }
  .steps-flow .list-item::before {
    animation: none !important;
  }
}

/* Webdev USP: робо-анимация карточек преимуществ */
#usp {
  position: relative;
  overflow: visible;
}
#usp .card {
  position: relative;
  transform-origin: 50% 50%;
}
#usp[data-animate="wow"] .card {
  opacity: 0;
  transform: translate3d(0, 28px, -40px) rotateX(10deg) scale(.9);
  filter: blur(2px) saturate(.85) brightness(.95);
}
#usp[data-animate="wow"] .card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(15,23,42,.0), rgba(56,189,248,.75), rgba(129,140,248,.8), rgba(15,23,42,.0));
  background-size: 210% 210%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
#usp[data-animate="wow"] .card.is-visible {
  animation: uspRobotReveal .7s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--usp-delay, 0ms);
}
#usp[data-animate="wow"] .card.is-visible::before {
  opacity: .9;
  animation: uspRobotGlare 1.2s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes uspRobotReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, -60px) rotateX(16deg) scale(.86);
    filter: blur(3px) saturate(.7) brightness(.9);
  }
  38% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) rotateX(-4deg) scale(1.02);
    filter: blur(.4px) saturate(1.05) brightness(1.02);
  }
  58% {
    transform: translate3d(0, 4px, 0) rotateX(2deg) scale(.995);
  }
  78% {
    transform: translate3d(0, -2px, 0) rotateX(-1deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: none;
  }
}

@keyframes uspRobotGlare {
  0% {
    opacity: 0;
    background-position: 130% -40%;
  }
  40% {
    opacity: .95;
    background-position: -40% 110%;
  }
  100% {
    opacity: 0;
    background-position: -80% 160%;
  }
}

/* Webdev "Что мы можем сделать?" — голографическая сетка */
#can-do {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
#can-do .list-item {
  position: relative;
  overflow: hidden;
  transform-origin: 50% 50%;
}
#can-do[data-animate="matrix"] .list-item {
  opacity: 0;
  transform: translate3d(calc(var(--can-do-dir, 0) * 30px), 24px, 0) scale(.9);
  filter: blur(3px) saturate(.85) brightness(.96);
  box-shadow: 0 0 0 0 rgba(15,23,42,.0);
  transition:
    opacity .45s ease-out,
    transform .6s cubic-bezier(.16, 1, .3, 1),
    filter .55s ease-out,
    box-shadow .6s ease-out,
    border-color .5s ease-out,
    background .6s ease-out,
    color .5s ease-out,
    text-shadow .5s ease-out;
  color: var(--can-do-color, var(--text));
  text-shadow: 0 0 0 rgba(56,189,248,.0);
}
#can-do[data-animate="matrix"] .list-item::before,
#can-do[data-animate="matrix"] .list-item::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
#can-do[data-animate="matrix"] .list-item::before {
  background:
    linear-gradient(120deg,
      rgba(56,189,248,.0),
      rgba(56,189,248,.85),
      rgba(129,140,248,.9),
      rgba(56,189,248,.0));
  background-size: 220% 220%;
  mix-blend-mode: screen;
  transform: translateX(-45%);
}
#can-do[data-animate="matrix"] .list-item::after {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(148,163,184,.0) 0,
      rgba(148,163,184,.22) 2px,
      rgba(148,163,184,.0) 4px
    );
  mix-blend-mode: soft-light;
}
#can-do[data-animate="matrix"] .list-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
  border-color: rgba(148,163,184,.7);
  background:
    radial-gradient(160% 220% at 50% 0, #f9fafb 0, #ffffff 52%, #e5edf9 100%);
  animation: canDoPop .72s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--can-do-delay, 0ms);
}
#can-do[data-animate="matrix"] .list-item.is-visible::before {
  opacity: 1;
  animation: canDoScan .9s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--can-do-delay, 0ms);
}
#can-do[data-animate="matrix"] .list-item.is-visible::after {
  opacity: .7;
  animation: canDoLines 1.3s ease-out forwards;
  animation-delay: calc(var(--can-do-delay, 0ms) + 80ms);
}

/* Живой отклик при ховере */
#can-do .list-item:hover {
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow:
    0 20px 46px rgba(15,23,42,.24),
    0 0 0 1px rgba(56,189,248,.45);
  border-color: rgba(56,189,248,.8);
}
#can-do .list-item:hover::before {
  opacity: 1;
}
#can-do .list-item:hover::after {
  opacity: .9;
}

@keyframes canDoPop {
  0% {
    transform: translate3d(0, 26px, 0) scale(.9);
  }
  40% {
    transform: translate3d(0, -6px, 0) scale(1.03);
  }
  65% {
    transform: translate3d(0, 2px, 0) scale(.99);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes canDoScan {
  0% {
    opacity: 0;
    background-position: 130% -20%;
    transform: translateX(-55%);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -30% 120%;
    transform: translateX(45%);
  }
}

@keyframes canDoLines {
  0% {
    opacity: .7;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #can-do[data-animate="matrix"] .list-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
  #can-do[data-animate="matrix"] .list-item::before,
  #can-do[data-animate="matrix"] .list-item::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Webdev "Как мы работаем?" — живой процесс шагов */
#work-steps {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
#work-steps .card {
  position: relative;
}
#work-steps[data-animate="flow"] .card {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.96);
  filter: blur(3px);
  box-shadow: 0 0 0 rgba(15,23,42,.0);
}
#work-steps[data-animate="flow"] .card.is-visible {
  animation: workStepsFlow 7.2s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: var(--work-steps-delay, 0ms);
}
#work-steps[data-animate="flow"] .card.is-visible:hover {
  animation-play-state: paused;
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow:
    0 22px 50px rgba(15,23,42,.30),
    0 0 0 1px rgba(56,189,248,.7);
}

@keyframes workStepsFlow {
  0% {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.96);
    filter: blur(3px);
    box-shadow: 0 0 0 rgba(15,23,42,.0);
  }
  10% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.02);
    filter: blur(.4px);
    box-shadow:
      0 22px 48px rgba(15,23,42,.30),
      0 0 0 1px rgba(148,163,184,.8);
  }
  24% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    box-shadow:
      0 14px 32px rgba(15,23,42,.22),
      0 0 0 1px rgba(148,163,184,.55);
  }
  60% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 10px 24px rgba(15,23,42,.18),
      0 0 0 1px rgba(148,163,184,.45);
  }
  74% {
    transform: translate3d(0, -3px, 0) scale(1.015);
    box-shadow:
      0 24px 54px rgba(15,23,42,.32),
      0 0 0 1px rgba(56,189,248,.65);
  }
  88% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 12px 28px rgba(15,23,42,.20),
      0 0 0 1px rgba(148,163,184,.55);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    box-shadow:
      0 10px 24px rgba(15,23,42,.18),
      0 0 0 1px rgba(148,163,184,.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  #work-steps[data-animate="flow"] .card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    box-shadow:
      0 10px 26px rgba(15,23,42,.18),
      0 0 0 1px rgba(148,163,184,.45);
  }
  #work-steps[data-animate="flow"] .card.is-visible {
    animation: none !important;
  }
}

/* Для блоков рисков и бизнес‑форм используем компактные «чипы» вместо вертикальных тайлов */
#risks .list-grid .list-item,
#business .list-grid .list-item {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 12px;
  min-height: 56px;
}
#business .list-grid a.list-item { display:flex }
@media (max-width: 640px) {
  .section-center .list-grid { grid-template-columns: 1fr }
  .section-center .list-grid .list-item { min-height: unset; padding: 14px 16px }
}
/* Compact layout for the SaaS vs SYNTERRA block */
#vs { padding: 16px !important }
#vs .cards { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
#vs .card { padding: 12px }
#vs .list-grid { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
#vs .list-grid .list-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;   /* vertical center */
  justify-content: center !important; /* horizontal center */
  gap: 0 !important;
  padding: 10px 12px !important;
  min-height: 48px !important; /* compact */
}
@media (max-width: 640px) {
  #vs { padding: 12px !important }
  #vs .list-grid .list-item { min-height: unset }
}
/* Warm highlight for key timing sentence: readable pill + pulse */
.hl-warm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  position: relative;
  background:
    radial-gradient(160% 220% at 0% 0%, rgba(251,191,36,.26), transparent 55%),
    radial-gradient(160% 220% at 100% 100%, rgba(251,146,60,.22), transparent 60%),
    #fffbeb;
  color: #7c2d12;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow:
    0 0 0 1px rgba(251,191,36,.55),
    0 10px 26px rgba(251,146,60,.35);
  text-shadow: none;
  transform-origin: 50% 50%;
  /* ~45 ударов в минуту: один цикл ≈ 1.33 c */
  animation: warmPulse 1.333s ease-out infinite;
}
.hl-warm::after {
  content: "";
  position: absolute;
  inset: -3px -6px;
  border-radius: inherit;
  border: 1px solid rgba(251,191,36,.5);
  box-shadow:
    0 0 0 0 rgba(251,191,36,.55),
    0 0 0 0 rgba(251,146,60,.4);
  opacity: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
@keyframes warmPulse {
  0%,
  40%,
  100% {
    box-shadow:
      0 0 0 1px rgba(251,191,36,.45),
      0 8px 20px rgba(251,146,60,.26);
    transform: translateY(0) scale(1);
  }
  /* первый сильный удар */
  12% {
    box-shadow:
      0 0 0 1px rgba(251,191,36,.8),
      0 18px 38px rgba(251,146,60,.5);
    transform: translateY(-1px) scale(1.08);
  }
  24% {
    box-shadow:
      0 0 0 1px rgba(251,191,36,.52),
      0 10px 24px rgba(251,146,60,.34);
    transform: translateY(0) scale(1);
  }
  /* второй, чуть мягче */
  32% {
    box-shadow:
      0 0 0 1px rgba(251,191,36,.7),
      0 14px 30px rgba(251,146,60,.42);
    transform: translateY(-.5px) scale(1.04);
  }
}
@keyframes warmRing {
  0% {
    opacity: 0;
    transform: scale(.8);
    box-shadow:
      0 0 0 0 rgba(251,191,36,.0),
      0 0 0 0 rgba(251,146,60,.0);
  }
  10% {
    opacity: .75;
    transform: scale(.95);
    box-shadow:
      0 0 0 0 rgba(251,191,36,.55),
      0 0 20px 4px rgba(251,146,60,.4);
  }
  26% {
    opacity: 0;
    transform: scale(1.16);
    box-shadow:
      0 0 0 4px rgba(251,191,36,.0),
      0 0 40px 10px rgba(251,146,60,.0);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
    box-shadow: none;
  }
}

/* WOW-reveal card for “Сроки и стоимость / Мерзім және құн” блок */
.timing-wow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.timing-wow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(140% 160% at 10% -10%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(140% 180% at 90% 120%, rgba(37,99,235,.26), transparent 64%);
  opacity: 0;
  transform: translateY(24px);
  filter: blur(24px);
  transition:
    opacity .9s cubic-bezier(.19, 1, .22, 1),
    transform .9s cubic-bezier(.19, 1, .22, 1),
    filter .9s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
}
.timing-wow .kicker,
.timing-wow p,
.timing-wow .cta {
  position: relative;
  z-index: 1;
}
.timing-wow[data-wow="ready"] {
  opacity: 0;
  transform: translateY(28px) scale(.96);
  filter: blur(1.2px);
  transform-origin: 50% 50%;
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1),
    filter .85s cubic-bezier(.16, 1, .3, 1);
}
.timing-wow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}
.timing-wow.is-visible::before {
  opacity: 1;
  transform: translateY(0);
  filter: blur(18px);
}
.timing-wow.is-visible .hl-warm::after {
  animation: warmRing 1.333s ease-out .1s infinite;
}
.timing-wow .btn.primary {
  position: relative;
  z-index: 2;
}
.timing-wow.is-visible .btn.primary {
  animation:
    timingBtnWave .9s cubic-bezier(.16, 1, .3, 1) .25s both,
    timingBtnBreath 3.4s ease-in-out 1.35s infinite;
}
@keyframes timingBtnWave {
  0% {
    transform: translateY(12px) scale(.95);
    box-shadow: 0 6px 18px rgba(31,122,242,.4);
  }
  45% {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 34px rgba(31,122,242,.65);
  }
  70% {
    transform: translateY(1px) scale(.99);
    box-shadow: 0 10px 24px rgba(31,122,242,.52);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 32px rgba(31,122,242,.5);
  }
}
@keyframes timingBtnBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 32px rgba(31,122,242,.5);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 18px 40px rgba(31,122,242,.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timing-wow::before,
  .timing-wow[data-wow="ready"],
  .timing-wow.is-visible,
  .timing-wow.is-visible .btn.primary,
  .hl-warm,
  .hl-warm::after {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ——— Блокирование печати и частичная защита от копирования ——— */
@media print { body { display:none !important } }
html.protect, html.protect body, html.protect * { -webkit-user-select:none; user-select:none }
/* Allow selecting inside form fields even when protected */
html.protect input,
html.protect textarea,
html.protect select,
html.protect [contenteditable="true"],
html.protect .allow-select { -webkit-user-select:text; user-select:text }
/* Reduce long-press save menu on iOS */
html.protect { -webkit-touch-callout: none }
/* Make media harder to drag-save */
img, svg, video { -webkit-user-drag: none; user-drag: none }

/* Дополнительная центровка ключевых блоков (герои, лицензирование, калькулятор) */
.hero { text-align: center }
.hero .cta { justify-content: center }

/* Hero: language highlight line under main title */
.page-webdev .hero-lang-highlight {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: "NFS Carbon", "Qunterra", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-size: clamp(16px, 2.1vw, 22px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
  gap: .35em;
  line-height: 1.3;
  padding: 3px 0;
  overflow: visible;
}

.page-webdev .hero-lang-highlight::after {
  content: "";
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: -20%;
  width: 36%;
  background: linear-gradient(115deg,
    rgba(37,99,235,0),
    rgba(56,189,248,.24),
    rgba(59,130,246,.45),
    rgba(56,189,248,.24),
    rgba(37,99,235,0)
  );
  opacity: .0;
  transform: translateX(-120%);
  pointer-events: none;
  mix-blend-mode: soft-light;
  border-radius: 999px;
  filter: blur(16px);
  animation: heroLangBeam 5s ease-in-out infinite;
}

.page-webdev .hero-lang-highlight .hero-lang-word {
  position: relative;
  display: inline-block;
  transform-origin: center bottom;
  text-shadow: 0 0 0 rgba(255,255,255,0);
  color: rgba(37,99,235,1);
  font-weight: 800;
  -webkit-text-stroke: 0.4px rgba(15,23,42,.35);
  animation: heroLangWordGlow 5s ease-in-out infinite;
}

/* sequential delays so языки загораются слева направо */
.page-webdev .hero-lang-highlight .hero-lang-word:nth-of-type(1) {
  animation-delay: 0s;
}
.page-webdev .hero-lang-highlight .hero-lang-word:nth-of-type(2) {
  animation-delay: .18s;
}
.page-webdev .hero-lang-highlight .hero-lang-word:nth-of-type(3) {
  animation-delay: .36s;
}

@keyframes heroLangBeam {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  8% {
    opacity: .35;
  }
  22% {
    transform: translateX(120%);
    opacity: .55;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes heroLangWordGlow {
  0%, 10% {
    text-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scale(1);
  }
  18%, 30% {
    text-shadow:
      0 0 6px rgba(255,255,255,.9),
      0 0 26px rgba(56,189,248,1),
      0 0 42px rgba(37,99,235,.9);
    transform: scale(1.05);
    color: rgba(59,130,246,1);
  }
  38% {
    text-shadow:
      0 0 4px rgba(255,255,255,.6),
      0 0 18px rgba(56,189,248,.7);
    transform: scale(1.03);
  }
  55% {
    text-shadow:
      0 0 2px rgba(248,250,252,.4),
      0 0 8px rgba(56,189,248,.4);
    transform: scale(1.01);
  }
  100% {
    text-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scale(1);
    color: rgba(37,99,235,1);
  }
}

/* Компактные заголовки и текст в героях */
.hero h1.glow-text { line-height: 1.12; letter-spacing: .01em; margin: 10px auto 8px }
.hero h2, .hero h3 { line-height: 1.2; margin: 8px auto 6px }
.hero .lead { line-height: 1.45; max-width: 980px; margin: 0 auto 8px; color:var(--muted) }

/* Call Center PRO: background video inside hero */
#callcenter.hero {
  position: relative;
  overflow: hidden;
}
#callcenter.hero .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .55;
}
#callcenter .hero-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 220% at 50% 0%, rgba(15,23,42,.4), rgba(15,23,42,.9));
  z-index: 1;
}
#callcenter.outline::before { z-index: 2; }
#callcenter.hero .hero-content {
  position: relative;
  z-index: 3;
  max-width: min(1100px, 100% - 48px);
  margin: 0 auto;
  padding: 16px 0 4px;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
#callcenter .lead {
  max-width: 860px;
  margin: 6px auto 12px;
  color: #f9fafb;
  font-size: clamp(15px, 1.4vw, 18px);
}
/* Call Center PRO: white text, dark cards over video */
#callcenter .pill {
  border-color: rgba(148,163,184,.65);
  background: rgba(15,23,42,.65);
  color: #e5e7eb;
}
#callcenter .card {
  background: rgba(15,23,42,.6);
  border-color: rgba(148,163,184,.65);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
#callcenter .card h3,
#callcenter .card .muted {
  color: #f9fafb;
}
#callcenter .card .muted {
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  #callcenter.hero .hero-video-bg {
    display: none;
  }
}

/* Vision PRO: background video + dark overlay */
#vision.hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
#vision.hero .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .55;
}
#vision .hero-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 220% at 50% 0%, rgba(15,23,42,.5), rgba(15,23,42,.92));
  z-index: 1;
}
#vision.hero .hero-content {
  position: relative;
  z-index: 2;
}
#vision .kicker,
#vision .lead,
#vision .muted {
  color: #f9fafb;
}
@media (prefers-reduced-motion: reduce) {
  #vision.hero .hero-video-bg {
    display: none;
  }
}

/* Webdev hero: background video */
#webdev-hero.hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
#webdev-hero.hero .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .6;
}
#webdev-hero .hero-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 220% at 50% 0%, rgba(15,23,42,.4), rgba(15,23,42,.9));
  z-index: 1;
}
#webdev-hero.hero .hero-content {
  position: relative;
  z-index: 2;
}
#webdev-hero .kicker,
#webdev-hero .lead,
#webdev-hero .hero-lang-highlight {
  color: #f9fafb;
}
@media (prefers-reduced-motion: reduce) {
  #webdev-hero.hero .hero-video-bg {
    display: none;
  }
}

/* Home page hero: background video */
#home-hero.hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
#home-hero.hero .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .75;
}
#home-hero .hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(15,23,42,.35), rgba(15,23,42,.78));
  z-index: 1;
}
#home-hero.outline::before {
  z-index: 2;
}
#home-hero.hero .hero-content {
  position: relative;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  #home-hero.hero .hero-video-bg {
    display: none;
  }
}

/* Gradient outline block with flowing border */
.outline { position: relative; border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f3f6ff); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(15,23,42,.08), 0 0 0 1px rgba(42,80,166,.12) inset; overflow: hidden }
.outline::before { content:""; position:absolute; inset:0; padding:1px; border-radius: inherit; pointer-events:none;
  background: linear-gradient(135deg, rgba(42,80,166,.95), rgba(31,122,242,.95), rgba(56,189,248,.9), rgba(42,80,166,.95));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: outlineFlow 10s linear infinite; }
@keyframes outlineFlow { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
.hero.outline { padding: clamp(18px, 3vw, 26px) }
.hero.spin h1.glow-text { font-size: clamp(28px, 6.8vw, 56px) }
.licensing, .calc { text-align: center }
.lic-tier { text-align: center; display: flex; flex-direction: column; align-items: center }
.calc .row { justify-content: center }

/* Compare block: background video */
#compare.compare-video {
  position: relative;
  overflow: hidden;
}
#compare .compare-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .82;
}
#compare .compare-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(15,23,42,.18), rgba(15,23,42,.5));
  z-index: 1;
}
#compare .compare-content {
  position: relative;
  z-index: 3;
}
#compare .card {
  background: rgba(255,255,255,.32);
  border-color: rgba(148,163,184,.55);
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
  position: relative;
  z-index: 4;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) {
  #compare .compare-video-bg {
    display: none;
  }
}

/* Compact layout for the mitigation section */
#mitigate { padding: 14px !important }
#mitigate h2 { font-size: clamp(18px, 2.4vw, 24px); margin: 6px 0 8px }
#mitigate .cards { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
#mitigate .card { padding: 12px; border-radius: 14px }
#mitigate .card strong { font-size: clamp(14px, 1.2vw, 17px); display:inline-flex; align-items:center; gap:8px }
#mitigate .card .muted { font-size: 13.5px; line-height: 1.4 }
#mitigate .icon { width: 1em; height: 1em; opacity:.85 }
/* Hero: slogan, question, and description card */
.hero.spin h1.slogan { font-size: clamp(24px, 3.2vw, 36px) }
.hero .slogan {
  line-height: 1.18; letter-spacing:.01em; margin: 10px auto 14px; text-transform: none;
  font-weight: 800;
  background: linear-gradient(90deg, var(--glow-2), var(--glow-4), var(--glow-6));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%; animation: textShift 12s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(34,211,238,.25));
}
.hero .question { margin: 6px 0 14px }
.pill.luminous { border-color: rgba(42,80,166,.7); background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.72)); box-shadow: 0 10px 26px rgba(31,122,242,.4), 0 0 0 1px rgba(31,122,242,.26) inset; font-weight: 700; letter-spacing:.02em }
.pill.luminous { color:#ffffff }
.desc-card {
  position: relative; overflow: hidden;
  margin: 12px auto 16px; max-width: 1100px;
  padding: clamp(16px, 3.2vw, 26px);
  border-radius: 20px; border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(243,246,255,.6)),
    radial-gradient(1200px 220px at 50% -10%, rgba(42,80,166,.12), transparent 70%),
    radial-gradient(1200px 220px at 50% 110%, rgba(56,189,248,.09), transparent 70%);
  box-shadow:
    0 18px 42px rgba(15,23,42,.06),
    0 0 36px rgba(31,122,242,.12) inset,
    0 0 0 1px rgba(31,122,242,.12) inset;
}
.desc-card::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(600px 120px at 12% 0%, rgba(42,80,166,.18), transparent 70%),
    radial-gradient(600px 120px at 88% 100%, rgba(56,189,248,.12), transparent 70%);
  mix-blend-mode: screen; opacity: .5;
}
.desc-card p {
  margin: 10px auto; max-width: 1000px;
  color: var(--text); line-height: 1.7;
  text-shadow: none;
}
.desc-card p:last-child { font-weight: 600 }
.desc-card,
.desc-card .longtext {
  color: var(--text);
}
.hero .longtext { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; letter-spacing:.01em; margin:0 auto; max-width: 760px }
/* Slogan – допускаем переносы везде */
.hero .slogan {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: normal;
}

@media (max-width: 640px){
  .hero .slogan {
    font-size: clamp(20px, 8.5vw, 34px);
  }
}

/* Mobile-first tuning: compact spacing and visuals */
@media (max-width: 768px) {
  /* На планшетах/мобилках сохраняем внутренние отступы,
     но учитываем их в max-width, чтобы контейнер не вылезал
     за края экрана и не создавал горизонтальный скролл */
  .container {
    padding: 12px;
    width: 100%;
    max-width: 100%;
  }
  /* Основной контентный грид превращаем в обычную колонку,
     чтобы секции гарантированно занимали всю ширину экрана */
  .grid {
    display: block;
  }
  .grid > * {
    width: 100%;
    max-width: 100%;
  }
  .navwrap { top: 10px; padding: 10px 12px; border-radius: 14px }
  .nav { left: 12px; right: 12px; padding: 10px }
  .nav a { padding: 9px 12px; font-size: 14px }
  .brand .brand-icon { height: 64px }
  .btn { padding: 8px 12px; font-size: 14px; border-radius: 10px }
  .grid, .cards, .list-grid, .licensing, .pricing { gap: 12px }
  .card, .calc, .lic-tier, .desc-card, #mitigate .card { padding: 12px }
  .hero.outline { padding: 14px }
  .hero .lead { font-size: 15px }
  .site-footer { padding: 16px 12px; border-radius: 14px }
  .site-footer .links { gap: 8px }
  .parallax { display: none }
  /* Главная страница и другие секции: на ширине до 768px всё в одну колонку,
     чтобы ничего не выходило за пределы экрана */
  .cards { grid-template-columns: 1fr !important }
  .list-grid { grid-template-columns: 1fr !important }
  #business .list-grid,
  #risks .list-grid,
  #usp,
  #can-do,
  #work-steps,
  .licensing { grid-template-columns: 1fr !important }
  /* Герой на главной: текстовый блок не шире контейнера */
  .home-hero .desc-card,
  .home-hero .longtext { max-width: 100% }
  /* Дополнительно уменьшаем заголовок и отступы в hero,
     чтобы он выглядел как мобильный блок */
  .home-hero .slogan {
    font-size: clamp(20px, 6vw, 26px) !important;
  }
  .home-hero.hero.outline {
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  .navwrap { top: 8px }
  .brand .brand-icon { height: 52px }
  .btn { font-size: 13.5px }
  .hero.spin h1.glow-text { font-size: clamp(22px, 8.5vw, 34px) }
  .hero.spin h1.slogan { font-size: clamp(18px, 7.2vw, 28px) }
  /* Ensure hero titles shrink even if inline font-size set */
  .hero h1.glow-text { font-size: clamp(22px, 7.2vw, 28px) !important }
  /* Tighten grids to single column on small phones */
  .cards { grid-template-columns: 1fr !important }
  .list-grid { grid-template-columns: 1fr !important }
  #usp, #can-do, #work-steps { grid-template-columns: 1fr !important }
  #business .list-grid, #risks .list-grid { grid-template-columns: 1fr !important }
  /* Slightly smaller base text for compact view */
  h1 { font-size: clamp(22px, 7.2vw, 28px) }
  h2 { font-size: clamp(18px, 5.6vw, 22px) }
  p, .muted { font-size: clamp(13.5px, 3.8vw, 15px) }
}

/* Collapse multi-column form grids on small screens */
@media (max-width: 640px) {
  form .cards { grid-template-columns: 1fr !important }
  /* Normalize large inline paddings/margins for mobile */
  [style*="padding:20px"] { padding: 12px !important }
  [style*="padding:24px"] { padding: 14px !important }
  [style*="margin-top:20px"] { margin-top: 12px !important }
}

/* Safe-area support on devices with notches */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 768px) {
    .container {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
  }
}

/* iOS Safari: disable heavy background blur layers (parallax) */
@supports (-webkit-touch-callout: none) {
  .parallax { display: none !important }
}

.home-hero .slogan {
  white-space: normal !important;
  text-wrap: balance;
}