/*
  Всі базові кольори та розміри зібрані тут, щоб майбутня зміна теми не вимагала
  пошуку однакових значень по всьому файлу. Напівпрозорі поверхні залишають тло
  видимим, але не перетворюють інтерфейс на надмірний glassmorphism.
*/
:root {
  color-scheme: dark;
  --color-background: #0b1020;
  --color-surface: rgba(255, 255, 255, 0.055);
  --color-surface-strong: rgba(18, 26, 48, 0.9);
  --color-border: rgba(255, 255, 255, 0.11);
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
  --color-accent: #8b5cf6;
  --color-accent-bright: #a78bfa;
  --color-cyan: #22d3ee;
  --color-success: #34d399;
  --color-shadow: rgba(0, 0, 0, 0.28);
  --color-grid: rgba(255, 255, 255, 0.025);
  --header-background: rgba(11, 16, 32, 0.72);
  --focus-color: #22d3ee;
  --color-action: #ddd6fe;
  --color-index: #64748b;
  --color-footer: #64748b;
  --color-heading-highlight: #fff;
  --container-width: 1180px;
  --radius-large: 28px;
  --radius-medium: 20px;
}

[data-theme="light"] {
  color-scheme: light;
  --color-background: #f3f6fc;
  --color-surface: rgba(255, 255, 255, 0.72);
  --color-surface-strong: rgba(255, 255, 255, 0.94);
  --color-border: rgba(35, 50, 79, 0.16);
  --color-text: #111a2e;
  --color-muted: #53627a;
  --color-accent: #7651e7;
  --color-accent-bright: #6941d8;
  --color-cyan: #087e99;
  --color-success: #07845e;
  --color-shadow: rgba(38, 48, 79, 0.16);
  --color-grid: rgba(38, 57, 91, 0.06);
  --header-background: rgba(248, 250, 255, 0.82);
  --focus-color: #5b38d1;
  --color-action: #5932c5;
  --color-index: #60708a;
  --color-footer: #60708a;
  --color-heading-highlight: #17213a;
}

/* border-box запобігає виходу елементів за ширину екрана через padding або border. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-background);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.15), transparent 44rem),
    var(--color-background);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* Тонка сітка додає глибини без окремого зображення та додаткового HTTP-запиту. */
body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2 {
  margin: 0;
}

/* Blur-елементи рухаються дуже повільно та не реагують на дії користувача. */
.ambient-background {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-background__orb {
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.14;
  animation: ambient-drift 22s ease-in-out infinite alternate;
}

.ambient-background__orb--violet {
  top: 8%;
  left: -14rem;
  background: var(--color-accent);
}

.ambient-background__orb--cyan {
  right: -16rem;
  bottom: 5%;
  background: var(--color-cyan);
  animation-delay: -9s;
}

@keyframes ambient-drift {
  to { transform: translate3d(3rem, 2rem, 0) scale(1.08); }
}

/* flex: 1 на main притискає footer донизу на сторінках із невеликою кількістю вмісту. */
.page-shell {
  display: flex;
  width: min(100%, calc(var(--container-width) + 48px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 22px 24px 0;
  flex-direction: column;
}

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--header-background);
  box-shadow: 0 16px 50px var(--color-shadow);
  backdrop-filter: blur(18px);
  animation: reveal-down 650ms ease both;
}

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.9), rgba(34, 211, 238, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px rgba(139, 92, 246, 0.25);
  color: #fff;
}

.brand__name { font-size: 1.05rem; }

.site-header__tagline {
  color: var(--color-muted);
  font-size: 0.86rem;
}

.site-header__controls { display: flex; min-width: 0; align-items: center; justify-self: end; gap: 8px; }
.control-field select {
  min-height: 44px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-strong);
  color: var(--color-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}
.auth-email { max-width: 150px; overflow: hidden; color: var(--color-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.login-button {
  display: inline-flex;
  min-width: 112px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 8px;
  border: 1px solid rgba(167, 139, 250, 0.36);
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.13);
  color: var(--color-action);
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.login-button svg,
.service-card__action svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.login-button:hover {
  border-color: rgba(167, 139, 250, 0.7);
  background: rgba(139, 92, 246, 0.22);
  transform: translateY(-1px);
}

.main-content {
  display: flex;
  flex: 1;
  align-items: center;
  padding: clamp(60px, 10vh, 112px) 0;
}

.services { width: 100%; }

.services__heading {
  max-width: 700px;
  margin-bottom: clamp(30px, 5vw, 52px);
  animation: reveal-up 700ms 100ms ease both;
}

.services__eyebrow {
  margin-bottom: 16px;
  color: var(--color-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

h1 > span:last-child {
  background: linear-gradient(100deg, var(--color-heading-highlight) 15%, var(--color-accent-bright) 62%, var(--color-cyan));
  background-clip: text;
  color: transparent;
}

.services__description {
  max-width: 560px;
  margin-top: 22px;
  color: var(--color-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  grid-template-rows: repeat(2, minmax(188px, auto));
  gap: 16px;
}

.service-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  flex-direction: column;
}

.service-card--featured {
  grid-row: 1 / 3;
  min-height: 392px;
  padding: clamp(24px, 4vw, 38px);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.15), transparent 48%),
    var(--color-surface-strong);
  box-shadow: 0 30px 80px var(--color-shadow);
  transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
  transform-style: preserve-3d;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 160ms ease;
  /* Окрема анімація змінює лише прозорість і тому не конфліктує з JS tilt-ефектом. */
  animation: reveal-featured 700ms 180ms ease both;
}

.service-card--featured::before {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(167, 139, 250, 0.65), transparent 38%, rgba(34, 211, 238, 0.42));
  content: "";
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.service-card--featured:hover {
  border-color: rgba(167, 139, 250, 0.34);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34), 0 0 44px rgba(139, 92, 246, 0.08);
}

.service-card__glow {
  position: absolute;
  top: var(--glow-y, 50%);
  left: var(--glow-x, 50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.15), transparent 68%);
  opacity: var(--glow-opacity, 0);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease;
}

.service-card__topline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-card__index {
  color: var(--color-index);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
}

.status {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status--active {
  border-color: rgba(52, 211, 153, 0.24);
  background: rgba(52, 211, 153, 0.08);
  color: var(--color-success);
}

.status--active > span[aria-hidden="true"] {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 10px var(--color-success);
}

.service-card__symbol {
  position: absolute;
  top: 30%;
  right: 8%;
  color: rgba(167, 139, 250, 0.12);
  transform: rotate(8deg);
}

.service-card__symbol svg {
  width: clamp(110px, 15vw, 168px);
  fill: currentColor;
}

.service-card__content {
  position: relative;
  display: block;
  max-width: 510px;
  margin-top: auto;
}

.service-card__title {
  display: block;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.service-card__description {
  display: block;
  max-width: 470px;
  margin-top: 13px;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.service-card__action {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  color: var(--color-action);
  font-size: 0.82rem;
  font-weight: 750;
}

.service-card__action svg { transition: transform 180ms ease; }
.service-card--featured:hover .service-card__action svg { transform: translateX(4px); }

.service-card--upcoming {
  min-height: 188px;
  padding: 22px 24px;
  cursor: default;
  animation: reveal-up 700ms 260ms ease both;
}

.service-card--upcoming:nth-child(3) { animation-delay: 340ms; }

.service-card--upcoming .service-card__content { margin-top: auto; }
.service-card--upcoming .service-card__title { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.service-card--upcoming .service-card__description { margin-top: 8px; font-size: 0.84rem; }

.service-card__progress {
  display: block;
  height: 2px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.service-card__progress span {
  display: block;
  width: 28%;
  height: 100%;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.7), rgba(34, 211, 238, 0.5));
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--color-border);
  color: var(--color-footer);
  font-size: 0.78rem;
}

/* Чіткий контур показує позицію клавіатурного фокуса на кожному активному елементі. */
.brand:focus-visible,
.login-button:focus-visible,
.service-card--featured:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 4px;
}
.control-field select:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }

@keyframes reveal-down {
  from { opacity: 0; transform: translateY(-12px); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes reveal-featured {
  from { opacity: 0; }
}

/* На планшеті асиметрія зберігається, але активна картка отримує більше висоти. */
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(230px, 1fr);
  }

  .site-header { grid-template-columns: 1fr 1fr; }
  .site-header__tagline { display: none; }
}

/* На телефоні картки стають однією колонкою, а всі дотикові елементи мають висоту від 46px. */
@media (max-width: 640px) {
  .page-shell { padding: 12px 14px 0; }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 8px;
    border-radius: 18px;
  }

  .brand__mark { width: 36px; height: 36px; }
  .brand__name { display: none; }
  .site-header__controls { gap: 5px; }
  .control-field select { width: 58px; padding: 0 5px; font-size: 0.7rem; }
  .control-field:nth-child(2) select { width: 84px; }
  .auth-email { display: none; }
  .login-button { min-width: 88px; padding: 0 8px; }
  .main-content { padding: 54px 0 64px; }
  .services__heading { margin-bottom: 28px; }
  .services__eyebrow { margin-bottom: 12px; }
  .services__description { margin-top: 17px; }

  .services-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .service-card--featured {
    grid-row: auto;
    min-height: 350px;
    padding: 24px;
  }

  .service-card--upcoming { min-height: 178px; }

  .service-card__symbol {
    top: 28%;
    right: 7%;
  }

  .site-footer {
    align-items: flex-start;
    padding-bottom: 22px;
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .page-shell { padding-inline: 8px; }
  .site-header { padding-inline: 6px; }
  .login-button svg { display: none; }
}

/*
  Користувачі, які вимкнули анімації в системі, отримують статичну сторінку:
  без рухомого тла, reveal-переходів, tilt і плавних трансформацій.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .service-card--featured { transform: none !important; }
}