@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
/* TurboSwift site — shared visual foundations (dark space + liquid glass) */

/* ---- theme tokens (rgb triples so Tailwind /opacity works) ---- */
:root, [data-theme="dark"] {
  --bg: 1 8 40;
  --text: 239 244 255;
  --neon: 111 255 0;
}
[data-theme="light"] {
  --bg: 240 243 250;
  --text: 20 26 48;
  --neon: 47 166 0;
}

html, body { margin: 0; background: rgb(var(--bg)); }
body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgb(var(--text));
  min-height: 100vh;
}
::selection { background: rgb(var(--neon)); color: rgb(var(--bg)); }

/* Cyrillic-friendly near-matches for the Latin display fonts */
.font-grotesk-ru { font-family: 'Fjalla One', 'Oswald', sans-serif; font-weight: 400; letter-spacing: 0.005em; }
.font-condiment-ru { font-family: 'Pacifico', cursive; }

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.texture-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: url('./texture.png');
  background-size: 1200px 900px;
  background-repeat: repeat;
  background-position: center top;
  mix-blend-mode: lighten;
  opacity: 0.5;
}
[data-theme="light"] .texture-overlay { display: none; }
[data-theme="light"] [class*="mix-blend-exclusion"] { mix-blend-mode: normal; }
.agents-track .liquid-glass::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* clean stat surface (no glass border/blur — avoids hairline artifacts on small cards) */
.stat-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }
[data-theme="light"] .stat-box { background: rgba(20,30,70,0.045); border-color: rgba(20,30,70,0.10); }

/* form fields on glass */
.glass-input {
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  color: rgb(var(--text));
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.glass-input::placeholder { color: rgba(239,244,255,0.55); text-transform: none; }
.glass-input:focus {
  border-color: rgb(var(--neon));
  box-shadow: 0 0 0 3px rgb(var(--neon) / 0.2);
}

/* small pill chip/label — like glass but WITHOUT overflow clipping */
.glass-pill {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  position: relative;
  isolation: isolate;
}
.glass-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* department / role tag that sits over card imagery — reads cleanly on any theme */
.agent-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.09em;
  color: #f1f5ff;
  background: rgba(2, 10, 38, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.26);
  isolation: isolate;
  box-shadow: 0 6px 22px rgba(1, 8, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.agent-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  pointer-events: none;
}
.agent-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--neon));
  box-shadow: 0 0 8px rgb(var(--neon) / 0.9), 0 0 2px rgb(var(--neon));
  flex: 0 0 auto;
}

/* ============ LIGHT THEME surface overrides ============ */
[data-theme="light"] .liquid-glass {
  background: rgba(255,255,255,0.66);
  box-shadow: 0 10px 34px rgba(20,32,72,0.10), inset 0 1px 1px rgba(255,255,255,0.7);
}
[data-theme="light"] .liquid-glass::before {
  background: linear-gradient(180deg,
    rgba(20,30,70,0.18) 0%, rgba(20,30,70,0.05) 22%,
    rgba(20,30,70,0) 45%, rgba(20,30,70,0) 60%,
    rgba(20,30,70,0.05) 80%, rgba(20,30,70,0.16) 100%);
}
[data-theme="light"] .glass-pill { background: rgba(20,30,70,0.05); border-color: rgba(20,30,70,0.12); }
[data-theme="light"] .glass-input { background: rgba(20,30,70,0.03); border-color: rgba(20,30,70,0.16); }
[data-theme="light"] .glass-input::placeholder { color: rgba(20,26,48,0.45); }

/* ============ DARK THEME (default + nested over light) — keep LAST so a
   nested [data-theme="dark"] island inside a light page wins the cascade ============ */
[data-theme="dark"] .liquid-glass {
  background: rgba(255,255,255,0.01);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}
[data-theme="dark"] .liquid-glass::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
}
[data-theme="dark"] .glass-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
[data-theme="dark"] .glass-input { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.22); }
[data-theme="dark"] .glass-input::placeholder { color: rgba(239,244,255,0.55); }

/* CTA pills must never wrap their label (RU labels are longer) */
a[class*="rounded-[1rem]"], button[class*="rounded-[1rem]"],
a[class*="rounded-[10px]"], button[class*="rounded-[10px]"],
a[class*="rounded-[999px]"], button[class*="rounded-[999px]"] {
  white-space: nowrap;
}

/* ============ million-dollar micro-polish ============ */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid rgb(var(--neon) / 0.75); outline-offset: 3px; border-radius: 5px; }

/* custom branded scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--text) / 0.22) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--text) / 0.18); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--neon) / 0.55); background-clip: content-box; }

/* lazy videos fade in instead of popping */
video { transition: opacity .7s ease; }

/* smooth cross-fade ONLY during a theme switch (class toggled by JS) */
html.theme-transition, html.theme-transition * {
  transition: background-color .45s ease, color .35s ease, border-color .45s ease, fill .35s ease, box-shadow .45s ease !important;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* ============ CTA micro-interactions (tactile press + sheen) ============ */
/* smooth base transition + arrow nudge for every pill CTA */
a[class*="rounded-[1rem]"], button[class*="rounded-[1rem]"] {
  transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease, color .2s ease, background-color .2s ease;
}
a[class*="rounded-[1rem]"] svg, button[class*="rounded-[1rem]"] svg {
  transition: transform .25s cubic-bezier(0.16,1,0.3,1);
}
a[class*="rounded-[1rem]"]:hover svg, button[class*="rounded-[1rem]"]:not(:disabled):hover svg {
  transform: translateX(3px);
}
/* tactile press — barely-there depth on click */
a[class*="rounded-[1rem]"]:active, button[class*="rounded-[1rem]"]:not(:disabled):active {
  transform: scale(0.97);
}

/* primary neon CTAs: soft idle glow → brighter on hover + light sheen sweep */
a.bg-neon[class*="rounded-[1rem]"], button.bg-neon[class*="rounded-[1rem]"] {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 18px rgb(var(--neon) / 0.22);
}
a.bg-neon[class*="rounded-[1rem]"]:hover, button.bg-neon[class*="rounded-[1rem]"]:not(:disabled):hover {
  box-shadow: 0 6px 34px rgb(var(--neon) / 0.5);
}
a.bg-neon[class*="rounded-[1rem]"]::after, button.bg-neon[class*="rounded-[1rem]"]::after {
  content: '';
  position: absolute;
  top: -12%; bottom: -12%; left: -75%; width: 48%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
a.bg-neon[class*="rounded-[1rem]"]:hover::after, button.bg-neon[class*="rounded-[1rem]"]:not(:disabled):hover::after {
  animation: ctaSheen .85s cubic-bezier(0.16,1,0.3,1);
}
@keyframes ctaSheen {
  0%   { left: -75%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}
/* disabled neon CTAs stay calm */
button.bg-neon[class*="rounded-[1rem]"]:disabled { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============ Footer (.ts-footer) — из footer-preview.html ============ */
.ts-footer {
  --fg: #eff4ff; --fg-2: rgba(239,244,255,.62); --fg-3: rgba(239,244,255,.42);
  --line: rgba(255,255,255,.10); --pill-bg: rgba(255,255,255,.06); --pill-bd: rgba(255,255,255,.16);
  --accent: #6fff00;
  background: #010828; border-top: 1px solid var(--line); color: var(--fg);
}
.ts-footer__inner { max-width: 1320px; margin: 0 auto; padding: 56px 40px 40px; }
.ts-footer__grid { display: grid; grid-template-columns: auto 1fr; gap: 40px 130px; align-items: start; }
.ts-footer__cols { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 32px; row-gap: 36px; }
.ts-brand__logo { display: inline-block; text-decoration: none; }
.ts-brand__name { display: block; font-family: 'Anton','Oswald',sans-serif; font-size: 23px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--fg); transition: color .15s; }
.ts-brand__logo:hover .ts-brand__name { color: var(--accent); }
.ts-brand__sub { display: block; margin-top: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--fg-3); }
.ts-brand__tag { margin: 18px 0 0; max-width: 230px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.65; color: var(--fg-2); }
.ts-social { display: flex; gap: 12px; margin-top: 22px; }
.ts-social a { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--fg); text-decoration: none; background: var(--pill-bg); border: 1px solid var(--pill-bd); transition: color .15s, border-color .15s; }
.ts-social a:hover { color: var(--accent); border-color: var(--accent); }
.ts-col__title { font-family: 'Anton','Oswald',sans-serif; font-size: 13px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); margin-top: -3px; margin-bottom: 15px; }
.ts-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ts-col__list a { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--fg-2); text-decoration: none; transition: color .15s; }
.ts-col__list a:hover { color: var(--accent); }
.ts-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.ts-footer__copy { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--fg-3); }
.ts-footer__cta { font-family: 'Anton','Oswald',sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.ts-footer__cta:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .ts-footer__grid { grid-template-columns: 1fr; }
  .ts-footer__cols { grid-template-columns: 1fr 1fr; justify-content: start; column-gap: 32px; }
}
@media (max-width: 520px) { .ts-footer__inner { padding: 44px 22px 32px; } }
/* light theme (сайт ставит <html data-theme="light">) */
html[data-theme="light"] .ts-footer {
  --fg: #141a30; --fg-2: rgba(20,26,48,.66); --fg-3: rgba(20,26,48,.45);
  --line: rgba(20,30,70,.12); --pill-bg: rgba(20,30,70,.05); --pill-bd: rgba(20,30,70,.14);
  --accent: #2fa600; background: #eef2fa;
}