/* ==========================================================================
   FerzX landing — implementation of "FerzX Landing.dc.html"
   Tokens below are taken verbatim from the design's STYLE TILE artboard.
   ========================================================================== */

:root {
  /* Colour — style tile */
  --violet:        #7C5CFF;
  --violet-dark:   #6742E8;
  --ink:           #111114;
  --secondary:     #6B6B76;
  --alt-bg:        #F6F6F8;
  --cta-tint:      #F4F1FF;
  --page-bg:       #FFFFFF;
  --border:        #E9E9EE;
  --footer-bg:     #141416;

  /* Colour — supporting values used across the artboards */
  --mock-rail:     #17171B;
  --mock-dot:      #3A3A42;
  --placeholder:   #9A9AA3;
  --footer-muted:  #8A8A93;
  --footer-link:   #C9C9D2;
  --footer-rule:   #26262A;
  --disabled-bg:   #F0F0F3;
  --disabled-fg:   #B4B4BC;
  --lang-sep:      #D8D8DE;

  /* Radius */
  --r-btn:   8px;
  --r-sm:   10px;
  --r-card: 14px;
  --r-pill: 999px;

  /* Shadow */
  --sh-card:  0 2px 12px rgba(17, 17, 20, 0.04);
  --sh-form:  0 4px 20px rgba(17, 17, 20, 0.05);
  --sh-mock-sm: 0 10px 30px rgba(17, 17, 20, 0.08);
  --sh-mock:  0 30px 60px rgba(17, 17, 20, 0.10);

  /* Layout */
  --shell-max: 1440px;
  --gutter: 64px;
  --hero-measure: 520px;   /* RU artboard widens this to 540px, see below */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dark); }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--violet);
  color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; color: #fff; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------- reveal on scroll */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@keyframes floatMock {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ------------------------------------------------------------- typography */

.h-hero {
  font-size: clamp(1.875rem, 1.15rem + 2.7vw, 3rem);   /* 30 → 48 */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The RU artboard sets the headline two steps smaller (44/1.18 vs 48/1.15)
   because Russian runs longer at the same measure. */
html[lang="ru"] {
  --hero-measure: 540px;
}
html[lang="ru"] .h-hero {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);  /* 28 → 44 */
  line-height: 1.18;
}

.h-section {
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.125rem); /* 26 → 34 */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h-card {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);   /* 16 → 17 */
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.body-lg {
  font-size: clamp(0.96875rem, 0.92rem + 0.2vw, 1.0625rem); /* 15.5 → 17 */
  line-height: 1.6;
  color: var(--secondary);
}

.proof {
  font-size: clamp(0.78125rem, 0.76rem + 0.1vw, 0.8125rem); /* 12.5 → 13 */
  color: var(--secondary);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-dark); color: #fff; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-sm { font-size: 14px; padding: 10px 20px; }
.btn-block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  cursor: not-allowed;
  transform: none;
}

.link-quiet {
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary);
  transition: color 0.2s ease;
}
.link-quiet:hover { color: var(--ink); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid var(--violet);
  color: var(--violet);
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet);
  flex: none;
}

.pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--violet);
  background: var(--cta-tint);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Lockup = symbol + wordmark. The symbol is the padded logo variant; it is
   square, so it is sized off the wordmark's cap height rather than given a
   fixed px size, and stays aligned when the header shrinks on mobile. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: none;
}
.logo:hover { color: var(--ink); }

/* Source is 512x471 (the mark is wider than it is tall), so height is the
   controlled dimension and width follows — setting both would squash it. */
.logo-mark {
  height: 1.35em;
  width: auto;
  flex: none;
  display: block;
}

/* The mark's gradient runs light-violet → deep purple; the dark end loses
   contrast on the #141416 footer, so lift it slightly there. Replace this
   with a dedicated light variant if one exists. */
.site-footer .logo-mark { filter: brightness(1.18) saturate(1.05); }

@media (max-width: 720px) {
  .logo { gap: 8px; }
}
.logo-ink { color: var(--ink); }
.logo-invert { color: #fff; }
.logo-accent { color: var(--violet); }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
.nav-desktop a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-desktop a:hover { color: var(--violet); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

.lang-switch { display: flex; align-items: center; gap: 6px; }
.lang-sep { color: var(--lang-sep); }
.lang-btn {
  background: none;
  border: 0;
  padding: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-current="true"] { color: var(--ink); }

/* burger + mobile menu */
.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  padding: 8px 0 8px 8px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* `display:flex` would otherwise beat the [hidden] attribute's display:none. */
.mobile-menu[hidden] { display: none; }

.mobile-menu {
  border-top: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--page-bg);
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 0;
}
.mobile-menu nav a:hover { color: var(--violet); }

/* ------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "copy mock"
    "cta  mock";
  align-content: center;
  column-gap: 40px;
  row-gap: 28px;
  padding-block: 112px;
  overflow: hidden;
}

.hero-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--hero-measure);
  align-self: end;
}

.hero-cta {
  grid-area: cta;
  display: flex;
  flex-direction: column;
  max-width: var(--hero-measure);
  align-self: start;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.hero-mock { grid-area: mock; position: relative; width: 120%; align-self: center; }

.mock {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-mock);
  overflow: hidden;
  background: #fff;
  animation: floatMock 6s ease-in-out infinite;
}

.mock-rail {
  width: 64px;
  flex: none;
  background: var(--mock-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}
.mock-rail-item {
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--mock-dot);
}
.mock-rail-item.is-active {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--violet);
}

.mock-body {
  flex: 1;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mock-topbar { display: flex; justify-content: space-between; align-items: center; }
.mock-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.mock-bar { width: 80px; height: 8px; border-radius: 4px; background: var(--disabled-bg); }

.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-stat {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  min-width: 0;
}
.mock-stat-label {
  display: block;
  font-size: 11px;
  color: var(--secondary);
  margin-bottom: 6px;
}
.mock-stat-value { display: block; font-size: 20px; font-weight: 600; color: var(--ink); }

.mock-chart {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 14px 6px;
  height: 120px;
}
.mock-chart svg { height: 100%; }

.mock-row {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mock-row-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mock-handle { font-size: 12px; font-weight: 600; color: var(--ink); }
.mock-quote {
  font-size: 11px;
  color: var(--secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- problem */

.problem { background: var(--alt-bg); }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-block: 80px;
}
.problem-item { display: flex; flex-direction: column; gap: 14px; }
.problem-item .icon { color: var(--ink); }
.problem-item p {
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  line-height: 1.6;
  color: var(--secondary);
}

/* ------------------------------------------------------------------ about */

.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  padding-block: 112px;
}
.about-copy { display: flex; flex-direction: column; gap: 24px; }
.about-copy p {
  font-size: clamp(0.90625rem, 0.87rem + 0.2vw, 1rem);
  line-height: 1.7;
  color: var(--secondary);
}

.about-facts {
  background: var(--alt-bg);
  border-radius: var(--r-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: fit-content;
}
.fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(0.84375rem, 0.82rem + 0.1vw, 0.875rem);
}
.fact dt { color: var(--secondary); }
.fact dd { color: var(--ink); font-weight: 600; text-align: right; }

/* -------------------------------------------------------------- final CTA */

.cta { background: var(--cta-tint); }
.cta-inner {
  padding-block: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.cta-head { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.cta-head .h-section { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); } /* 24 → 30 */
.cta-head p {
  font-size: clamp(0.90625rem, 0.87rem + 0.2vw, 1rem);
  line-height: 1.6;
  color: var(--secondary);
}

.apply-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 8px;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 820px;
  box-shadow: var(--sh-form);
}
.field { flex: 1; min-width: 0; display: flex; }
.field + .field { border-left: 1px solid var(--border); }

.apply-form input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  border-radius: var(--r-btn);
}
.apply-form input::placeholder { color: var(--placeholder); }
.apply-form input:focus { outline: none; }
.apply-form input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: -2px;
}
.apply-form input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--violet);
  border-radius: var(--r-btn);
}
.apply-form .btn { padding: 12px 24px; font-size: 14px; }

/* Honeypot — positioned off-screen rather than display:none, which some
   spam bots deliberately skip. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary);
  min-height: 1.5em;
  max-width: 820px;
}
.form-status[data-tone="error"] { color: var(--violet-dark); font-weight: 500; }
.form-status[data-tone="ok"] { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------------- footer */

.site-footer {
  background: var(--footer-bg);
  padding-block: 64px 40px;
  color: var(--footer-link);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .logo { font-size: 20px; }
.footer-brand p { font-size: 13px; color: var(--footer-muted); }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-head {
  font-size: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  font-weight: 600;
  color: var(--footer-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-col a {
  font-size: 14px;
  color: var(--footer-link);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: #fff; }

.footer-base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-base p { font-size: clamp(0.78125rem, 0.76rem + 0.1vw, 0.8125rem); color: var(--footer-muted); }
.footer-contact a { color: var(--footer-muted); }
.footer-contact a:hover { color: #fff; }

/* ============================== responsive ============================== */

@media (max-width: 1180px) {
  :root { --gutter: 40px; }
  .nav-desktop { gap: 24px; }
  .header-inner { gap: 24px; }
  .hero-mock { width: 100%; }
}

@media (max-width: 980px) {
  .nav-desktop, .nav-login { display: none; }
  .burger { display: flex; }
  .header-inner { gap: 16px; }
  .header-actions { margin-left: auto; }

  /* Mobile artboard order: copy → product mock → CTA + proof. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "mock" "cta";
    padding-block: 56px 64px;
    row-gap: 24px;
    column-gap: 0;
  }
  .hero-copy { max-width: none; gap: 20px; align-self: auto; }
  .hero-cta { max-width: none; align-self: auto; }
  .hero-actions { gap: 16px; }

  .about { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; }
  .problem-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .header-inner { height: 60px; }
  .logo { font-size: 19px; }
  .lang-btn { font-size: 12px; }
  .header-actions .btn { display: none; }

  /* Mobile artboard drops the third stat, the topbar and the comment row. */
  .mock-stats { grid-template-columns: 1fr 1fr; }
  .mock-stat-3, .mock-topbar, .mock-row { display: none; }
  .mock-rail { width: 36px; gap: 12px; padding: 14px 0; }
  .mock-rail-item { width: 10px; height: 10px; border-radius: 3px; }
  .mock-rail-item.is-active { width: 12px; height: 12px; }
  .mock-rail-hide-sm { display: none; }
  .mock-body { padding: 14px; gap: 10px; }
  .mock { box-shadow: var(--sh-mock-sm); }
  .mock-stat { padding: 8px; border-radius: 8px; }
  .mock-stat-label { font-size: 9px; margin-bottom: 4px; }
  .mock-stat-value { font-size: 15px; }
  .mock-chart { height: 60px; padding: 8px; border-radius: 8px; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; padding: 14px; }

  .about-facts { padding: 24px; gap: 16px; }

  .cta-inner { padding-block: 48px; gap: 24px; }

  /* Stacked, individually-bordered fields — matches the mobile artboard. */
  .apply-form { flex-direction: column; padding: 16px; gap: 10px; }
  .field { border: 1px solid var(--border); border-radius: var(--r-btn); }
  .field + .field { border-left: 1px solid var(--border); }
  .apply-form input { padding: 12px 14px; }
  .apply-form .btn { width: 100%; padding: 13px; }

  .site-footer { padding-block: 48px 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-base { margin-top: 32px; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --------------------------------------------------------- reduced motion */

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

/* ---------------------------------------------------------------- to-print */

@media print {
  .site-header, .skip-link, .apply-form, .burger { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}