/* =========================================================================
   Synapse — global styles
   Design tokens sourced from design-system/ai-automation-agency/MASTER.md
   (generated via the ui-ux-pro-max skill). Dark-mode-only OLED theme.

   Fonts are self-hosted (assets/fonts/, OFL-licensed) rather than pulled
   from Google Fonts — this site works fully offline / behind restrictive
   network policies, with no runtime CDN dependency. Gloock and Inter were
   the design system's exact recommendation; Gloock/Work Sans/JetBrains
   Mono are the closest OFL fonts bundled locally as a substitute for the
   Inter body font.
   ========================================================================= */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/Gloock-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #0f172a;
  --color-on-primary: #ffffff;
  --color-secondary: #1e293b;
  --color-accent: #16a34a;
  --color-accent-hover: #15803d;
  --color-background: #020617;
  --color-foreground: #f8fafc;
  --color-muted: #1a1e2f;
  --color-border: #334155;
  --color-destructive: #dc2626;
  --color-warning: #f59e0b;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
}

* {
  scrollbar-color: var(--color-border) var(--color-background);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: "Work Sans", system-ui, sans-serif;
}

h1, h2, h3, h4, .font-display {
  font-family: "Gloock", Georgia, serif;
}

code, .font-mono {
  font-family: "JetBrains Mono", monospace;
}

/* Respect reduced-motion preference site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus ring for keyboard nav (never removed) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Subtle glow used sparingly on hero headline / accent numerals */
.text-glow {
  text-shadow: 0 0 24px rgba(22, 163, 74, 0.35);
}

/* =========================================================================
   Link-style CTAs ("Подробнее →", "Написать нам →", etc.)
   ---------------------------------------------------------------------
   Previously these just borrowed the body font at text-sm/font-semibold
   with a plain hover:underline — indistinguishable from a copy-editing
   mistake once the stray default <a> underline (see tailwind-lite.css)
   made everything look "underlined" the same way. JetBrains Mono is
   already the site's "system status" voice (terminal mockup); reusing it
   here marks these specifically as actionable/navigational text, with a
   permanent low-opacity rule instead of a hover-only underline so the
   affordance reads before the pointer ever arrives.
   ========================================================================= */
.link-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(22, 163, 74, 0.35);
  padding-bottom: 0.15rem;
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.link-cta:hover {
  border-color: var(--color-accent);
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .link-cta:hover {
    transform: none;
  }
}

/* =========================================================================
   Process flow infographic ("Как мы работаем") — a connecting line
   threading through numbered nodes reads the 4 steps as one pipeline
   instead of 4 unrelated cards, which is what they actually are: each
   step's output is the next step's input.
   ========================================================================= */
.process-flow {
  position: relative;
}

.process-flow__line {
  display: none;
  position: absolute;
  top: 1.5rem; /* vertical center of the 3rem node below */
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(22, 163, 74, 0.12),
    rgba(22, 163, 74, 0.65) 12%,
    rgba(22, 163, 74, 0.65) 88%,
    rgba(22, 163, 74, 0.12)
  );
}

@media (min-width: 1024px) {
  .process-flow__line {
    display: block;
  }
}

.process-flow__step {
  position: relative;
}

.process-flow__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid rgba(22, 163, 74, 0.55);
  background: var(--color-background);
  color: var(--color-accent);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 1rem;
}

/* =========================================================================
   Comparison infographic ("Что меняется для команды") — illustrative
   paired bars, not a chart of measured data (see the disclaimer under
   the section). Bar length is the only encoding; color reinforces which
   side is "before" vs "after".
   ========================================================================= */
.compare-bar-track {
  height: 1.75rem;
  border-radius: 0.4rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.compare-bar {
  height: 100%;
  border-radius: 0.35rem;
  transition: width 700ms ease;
}

.compare-bar--before {
  background: rgba(51, 65, 85, 0.75);
}

.compare-bar--after {
  background: linear-gradient(90deg, var(--color-accent), #22c55e);
  box-shadow: 0 0 14px rgba(22, 163, 74, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .compare-bar {
    transition: none;
  }
}

/* Terminal-style card used in the hero mockup */
.terminal-window {
  background: linear-gradient(180deg, #0b1220 0%, #020617 100%);
  border: 1px solid var(--color-border);
}

.terminal-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
}

/* Reveal-on-scroll: starts hidden only when JS has confirmed IntersectionObserver
   support (see main.js) and the user allows motion; otherwise stays visible. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Mobile nav panel */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
}

#mobile-menu.open {
  max-height: 28rem;
}

/* FAQ accordion */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-item[open] .faq-answer,
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-toggle-icon {
  transition: transform 200ms ease;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(180deg);
}

/* =========================================================================
   3D synapse network — hero visual
   ---------------------------------------------------------------------
   A genuine CSS 3D scene (perspective + preserve-3d + rotateX/Y), not an
   image or a WebGL/Three.js embed — this environment has no CDN access
   to load a 3D library, so the geometry is real: 10 nodes + 16 edges,
   laid out on a Fibonacci sphere and pre-computed (see the repo's build
   notes) into exact translate3d/rotateZ/rotateY/scaleX transforms baked
   as inline styles on each element. The whole group spins as one rigid
   body via .synapse3d__scene's animation, so the math only had to be
   solved once, not per frame.
   ========================================================================= */
.synapse3d {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  perspective: 900px;
}

/* Smaller variant used as a recurring accent on services/about/contact —
   each instance also sets --spin-duration / --spin-direction inline so
   the three don't spin in lockstep with each other or the hero's. */
.synapse3d--sm {
  max-width: 200px;
}

.synapse3d::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.22), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

.synapse3d__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: synapse-spin var(--spin-duration, 30s) linear infinite var(--spin-direction, normal);
}

@keyframes synapse-spin {
  from { transform: rotateX(-16deg) rotateY(0deg); }
  to   { transform: rotateX(-16deg) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .synapse3d__scene {
    animation: none;
    transform: rotateX(-16deg) rotateY(28deg);
  }
}

.synapse3d__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #86efac, #16a34a 60%, #0f5132 100%);
  box-shadow: 0 0 10px 2px rgba(22, 163, 74, 0.65), 0 0 22px 6px rgba(22, 163, 74, 0.22);
}

.synapse3d__node--core {
  width: 17px;
  height: 17px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #86efac 55%, #16a34a 100%);
  box-shadow: 0 0 16px 4px rgba(22, 163, 74, 0.85), 0 0 44px 12px rgba(22, 163, 74, 0.32);
}

.synapse3d__edge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 1.5px;
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(134, 239, 172, 0.9), rgba(22, 163, 74, 0.12));
}

/* =========================================================================
   3D tilt-on-hover cards — cursor-driven perspective tilt for a tactile,
   premium feel on the feature/value/team cards. JS (main.js) sets
   --tilt-x / --tilt-y custom properties from pointer position; this is
   the CSS side that turns them into a 3D rotation. Falls back to a flat
   card with no transform if JS never runs (progressive enhancement).
   ========================================================================= */
.tilt-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 500ms ease, box-shadow 300ms ease;
  will-change: transform;
}

.tilt-card:hover,
.tilt-card:focus-within {
  box-shadow: 0 18px 40px -12px rgba(22, 163, 74, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .tilt-card {
    transform: none !important;
    transition: none;
  }
}

/* =========================================================================
   3D processor chip — hero visual
   ---------------------------------------------------------------------
   A second real CSS 3D object built the same way as .synapse3d above:
   six flat faces assembled into a thin die (wide top/bottom, narrow side
   walls), not an image or a WebGL/Three.js embed. It hovers within a
   limited rotateX/rotateY arc rather than spinning a full 360° — a flat
   rectangular die goes edge-on and shows its blank underside for a good
   third of any full rotation, which reads as a rendering bug rather than
   a premium object, so the motion stays a gentle tilt that always keeps
   the die's face (grid, pins, core) in view.
   ========================================================================= */
.chip3d {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  perspective: 900px;
  --chip-size: 320px;
  --chip-depth: 22px;
}

.chip3d::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.25), transparent 68%);
  filter: blur(22px);
  pointer-events: none;
  z-index: -1;
}

.chip3d__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: chip-hover 12s ease-in-out infinite;
}

@keyframes chip-hover {
  0%, 100% { transform: rotateX(-20deg) rotateY(-20deg); }
  50%      { transform: rotateX(-27deg) rotateY(20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chip3d__scene {
    animation: none;
    transform: rotateX(-22deg) rotateY(-10deg);
  }
}

.chip3d__cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.chip3d__face {
  position: absolute;
  background: linear-gradient(145deg, #111a2e, #0a1120);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Top face carries all the detail: circuit grid, glowing core, pins,
   and the sheen sweep — it is the only face the visitor really reads. */
.chip3d__face--top {
  inset: 0;
  transform: translateZ(calc(var(--chip-depth) / 2));
  background:
    radial-gradient(circle at 50% 50%, rgba(22, 163, 74, 0.1), transparent 60%),
    repeating-linear-gradient(0deg, rgba(22, 163, 74, 0.14) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(22, 163, 74, 0.14) 0 1px, transparent 1px 28px),
    linear-gradient(145deg, #101a2d, #060b16);
}

.chip3d__face--bottom {
  inset: 0;
  transform: rotateX(180deg) translateZ(calc(var(--chip-depth) / 2));
}

.chip3d__face--front,
.chip3d__face--back {
  left: 0;
  right: 0;
  top: 50%;
  height: var(--chip-depth);
  margin-top: calc(var(--chip-depth) / -2);
}

.chip3d__face--front { transform: rotateX(-90deg) translateZ(calc(var(--chip-size) / 2)); }
.chip3d__face--back { transform: rotateX(90deg) translateZ(calc(var(--chip-size) / 2)); }

.chip3d__face--left,
.chip3d__face--right {
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--chip-depth);
  margin-left: calc(var(--chip-depth) / -2);
}

.chip3d__face--left { transform: rotateY(90deg) translateZ(calc(var(--chip-size) / 2)); }
.chip3d__face--right { transform: rotateY(-90deg) translateZ(calc(var(--chip-size) / 2)); }

.chip3d__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  transform: translate3d(-50%, -50%, calc(var(--chip-depth) / 2 + 1px));
  border-radius: 4px;
  background: radial-gradient(circle at 35% 30%, #86efac, #16a34a 60%, #0f5132 100%);
  box-shadow: 0 0 14px 3px rgba(22, 163, 74, 0.55), 0 0 30px 10px rgba(22, 163, 74, 0.18);
  animation: chip-pulse 2.6s ease-in-out infinite;
}

@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 14px 3px rgba(22, 163, 74, 0.55), 0 0 30px 10px rgba(22, 163, 74, 0.18); }
  50%      { box-shadow: 0 0 22px 6px rgba(22, 163, 74, 0.9), 0 0 48px 16px rgba(22, 163, 74, 0.32); }
}

/* Pins are a repeating background tick pattern along each edge, not 24
   individually positioned elements — much cheaper and just as convincing
   at this scale. */
.chip3d__pins {
  position: absolute;
  pointer-events: none;
}

.chip3d__pins--top,
.chip3d__pins--bottom {
  left: 10%;
  right: 10%;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, rgba(203, 213, 225, 0.85) 0 3px, transparent 3px 16px);
}

.chip3d__pins--top { top: -5px; }
.chip3d__pins--bottom { bottom: -5px; }

.chip3d__pins--left,
.chip3d__pins--right {
  top: 10%;
  bottom: 10%;
  width: 5px;
  background-image: repeating-linear-gradient(180deg, rgba(203, 213, 225, 0.85) 0 3px, transparent 3px 16px);
}

.chip3d__pins--left { left: -5px; }
.chip3d__pins--right { right: -5px; }

.chip3d__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(134, 239, 172, 0.28) 50%, transparent 60%);
  background-size: 300% 300%;
  animation: chip-sheen 6s linear infinite;
}

@keyframes chip-sheen {
  0%   { background-position: 100% 0%; }
  100% { background-position: 0% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .chip3d__core { animation: none; }
  .chip3d__sheen { animation: none; opacity: 0.5; }
}

/* =========================================================================
   Closing statement — quote card
   ---------------------------------------------------------------------
   Replaces an earlier "extruded" text-shadow-stack treatment (a stack of
   1px-offset shadows simulating embossed 3D type) with a glass card and
   genuine 3D depth: it reuses .tilt-card's pointer-tracked rotateX/Y
   (the same interaction already on the feature/value cards elsewhere on
   the site, so this isn't a one-off effect) and gives the oversized
   quotation mark and the text their own translateZ offsets, so tilting
   the card under the cursor produces real parallax between the layers
   instead of a static drop-shadow standing in for depth. A slow,
   independent float on the outer wrapper keeps it faintly alive even
   when no pointer is nearby.
   ========================================================================= */
.quote-float {
  animation: quote-bob 7s ease-in-out infinite;
}

@keyframes quote-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-float {
    animation: none;
  }
}

.quote-card {
  position: relative;
  transform-style: preserve-3d;
  padding: 3rem 2.5rem;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(248, 250, 252, 0.05), rgba(248, 250, 252, 0.015));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.quote-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 20%, rgba(22, 163, 74, 0.18), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.quote-card__mark {
  display: block;
  font-family: "Gloock", Georgia, serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.4;
  transform: translateZ(40px);
}

.quote-card__text {
  margin-top: 0.5rem;
  font-family: "Gloock", Georgia, serif;
  font-size: 1.375rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.92);
  transform: translateZ(20px);
}

@media (min-width: 768px) {
  .quote-card__text {
    font-size: 1.75rem;
  }
}

.quote-card__highlight {
  background: linear-gradient(90deg, #86efac, var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================================
   Copy-to-clipboard toast — confirms the Email button/links actually did
   something, since they no longer navigate anywhere (see main.js). Built
   and inserted by JS on first use; this just styles it.
   ========================================================================= */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 100;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-accent);
  color: var(--color-on-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  border-radius: 9999px;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.copy-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .copy-toast {
    transition: opacity 1ms linear;
  }
}