/*
  LOQER homepage - local dark-theme draft.
  Visual source of truth: docs/dark-theme-design-system.md
  This stylesheet is scoped to the standalone homepage draft.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Loqer Lato Regular';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  font-synthesis: none;
}

:root {
  --nd-page: #202126;
  --nd-canvas: #0f1014;
  --nd-surface: #191a20;
  --nd-surface-strong: #23242c;
  --nd-surface-hover: #2b2c35;
  --nd-surface-soft: #14151a;
  --nd-text: #f7f7f8;
  --nd-muted: #a7a7b0;
  --nd-faint: #777882;
  --nd-violet: #7657f5;
  --nd-violet-deep: #5c3ddb;
  --nd-violet-soft: #30265f;
  --nd-mint: #9bf3b6;
  --nd-mint-deep: #173a2a;
  --nd-amber: #f5c76d;
  --nd-coral: #ff8c7c;
  --nd-line: rgba(247, 247, 248, 0.09);
  --nd-line-soft: rgba(247, 247, 248, 0.06);

  --paper: var(--nd-page);
  --paper-2: var(--nd-surface);
  --card: var(--nd-surface-hover);
  --card-2: var(--nd-surface-strong);
  --ink: var(--nd-text);
  --ink-2: var(--nd-muted);
  --ink-3: var(--nd-faint);
  --ink-4: #60616b;
  --line: var(--nd-line-soft);
  --line-2: var(--nd-line);
  --red: var(--nd-violet);
  --red-ink: var(--nd-violet-deep);
  --red-soft: var(--nd-violet-soft);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Loqer Lato Regular', 'Lato', Arial, sans-serif;
  --radius: 16px;
  --radius-s: 10px;
  --radius-xs: 8px;
  --shadow-card: none;
  --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.24);
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background: var(--nd-page);
  color: var(--nd-text);
  font-family: var(--sans);
}

::selection {
  background: var(--nd-violet-deep);
  color: var(--nd-text);
}

:focus-visible {
  outline: 2px solid var(--nd-violet);
  outline-offset: 2px;
}

header.nav,
header.nav.scrolled {
  background: var(--nd-surface);
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.nav-links a:hover {
  color: var(--nd-text);
}

.lang-toggle {
  background: var(--nd-surface-strong);
  border-color: transparent;
}

.lang-toggle:hover {
  border-color: transparent;
  background: var(--nd-surface-hover);
}

.lang-toggle[data-current='ru'] [data-lang-option='ru'],
.lang-toggle[data-current='en'] [data-lang-option='en'] {
  background: var(--nd-violet-deep);
  color: var(--nd-text);
}

.btn {
  border-radius: 10px;
  transition-duration: 180ms;
}

.btn-primary {
  background: var(--nd-violet-deep);
  color: var(--nd-text);
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--nd-violet);
}

.btn-ghost {
  background: var(--nd-surface-strong);
  border-color: transparent;
  color: var(--nd-text);
}

.btn-ghost:hover {
  background: var(--nd-surface-hover);
  border-color: transparent;
}

.btn-app::before {
  display: none;
}

.btn-app .arr,
.btn-app:hover .arr {
  background: rgba(247, 247, 248, 0.12);
}

.phero {
  background: var(--nd-canvas);
}

.phero .actions .btn-ghost,
.phero .actions .btn-ghost:hover {
  background: rgba(35, 36, 44, 0.86);
  border-color: var(--nd-line);
  color: var(--nd-text);
  backdrop-filter: none;
}

.marq {
  background: var(--nd-surface);
  border-color: var(--nd-line-soft);
}

.intro-sec,
.sec,
footer {
  background-color: var(--nd-page);
}

.sec[style*='--paper-2'],
#audience,
#learn,
#interface {
  background: var(--nd-surface) !important;
}

.intro-sec {
  border-bottom-color: var(--nd-line-soft);
}

.sec-eyebrow,
.intro-point .num,
.step .no,
.feat-name .su,
.bi .cap .su,
.learn-card .su {
  color: var(--nd-violet);
}

.intro-points,
.intro-point,
.feat-list,
.feat-row,
.steps,
.step,
.faq-item,
.foot-top,
.spec-foot,
.tc-row {
  border-color: var(--nd-line-soft);
}

.spec-card,
.pass-card,
.equity-card,
.bi,
.fv-card,
.aud-card,
.price-card,
.learn-card,
.eq-stat,
.tcard.b1,
.study-notice {
  background: var(--nd-surface-strong);
  border-color: transparent;
  box-shadow: none;
}

.feat-row:hover,
.bi:hover,
.fv-card:hover,
.learn-card:hover {
  background: var(--nd-surface-hover);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.feat-thumb,
.feat-thumb:hover {
  background: var(--nd-surface-soft);
  box-shadow: none;
  transform: none;
}

.feat-thumb::after {
  box-shadow: inset 0 0 0 1px var(--nd-line-soft);
}

.feat-thumb:hover img {
  transform: scale(1.18);
}

.feat-thumb:hover img.thumb-fill-more {
  transform: scale(1.34);
}

.feature-visual-grid .fv-card::before {
  border-color: var(--nd-line-soft);
  opacity: 0.55;
}

.eq-card {
  background: var(--nd-surface-soft);
  border-color: var(--nd-line-soft);
  box-shadow: none;
}

.eq-card strong {
  color: var(--nd-mint);
}

.board-card.dark {
  background: #292a33;
}

.board-tags span,
.bp-tags span,
.feat-desc .tags span {
  background: var(--nd-surface-soft);
  border-color: transparent;
}

.rp-card,
.rp-card:nth-child(1),
.rp-card:nth-child(2),
.rp-card:nth-child(3) {
  background: var(--nd-surface-soft);
  border-color: var(--nd-line-soft);
  color: var(--nd-text);
  box-shadow: none;
}

.rp-card:nth-child(1) {
  background: #221d32;
}

.rp-card:nth-child(2) {
  background: #202d27;
}

.rp-card p {
  color: var(--nd-muted);
}

.node-face {
  background: var(--nd-surface-soft);
  border-color: var(--nd-line-soft);
  color: var(--nd-text);
}

.eq-stat {
  box-shadow: none;
}

.tcard.b2 {
  background: var(--nd-violet-soft);
  border-color: transparent;
}

.tcard.b3 {
  background: #202b3a;
  border-color: transparent;
}

.tc-badge,
.tag-current,
.tag-hot {
  background: var(--nd-violet-soft);
  border-color: transparent;
  color: var(--nd-text);
}

.aud-meter,
.eq-bar,
.es-bar {
  background: var(--nd-surface-soft);
}

.aud-meter i {
  background: var(--nd-violet);
}

.price-card.hot {
  background: var(--nd-surface-soft);
  color: var(--nd-text);
  border-color: transparent;
}

.price-card.hot .pu,
.price-card.hot .price-feats li {
  color: var(--nd-muted);
}

.price-card.hot .price-feats li::before,
.price-feats li::before {
  color: var(--nd-violet);
}

.faq-q {
  color: var(--nd-text);
}

.cta-band {
  background: var(--nd-surface);
  color: var(--nd-text);
  border-radius: 16px;
  box-shadow: none;
}

.cta-band p {
  color: var(--nd-muted);
}

.study-notice {
  border-radius: 12px;
}

.study-notice-badge {
  background: var(--nd-violet-deep);
  color: var(--nd-text);
}

.lq-cell.muted {
  background: var(--nd-surface-soft);
  color: var(--nd-faint);
}

.lq-cell.sel {
  box-shadow: inset 0 0 0 2px var(--nd-violet);
}

.lq-cell:hover,
.bi:hover .bi-mx,
.bi:hover .eq-stat,
.bi:hover .tcard.b2,
.bi:hover .tcard.b3,
.bi:hover .bp-chips .card-chip,
.fv-card:hover .node-face {
  transform: none;
}

.lq-tip {
  background: var(--nd-surface-strong);
  color: var(--nd-text);
  border: 1px solid var(--nd-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marq-track {
    animation: none;
  }
}


/* ===== Hero parallax layers ===== */
header.nav,
header.nav.scrolled {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(15, 16, 20, 0.74), rgba(15, 16, 20, 0));
  border-bottom-color: transparent;
  transition: background 180ms ease, border-color 180ms ease;
}

header.nav.hero-passed,
header.nav.scrolled.hero-passed {
  background: rgba(25, 26, 32, 0.96);
  border-bottom-color: var(--nd-line-soft);
}

header.nav .nav-links a {
  color: rgba(247, 247, 248, 0.78);
}

header.nav .nav-links a:hover {
  color: var(--nd-text);
}

header.nav .btn-tg {
  background: rgba(35, 36, 44, 0.72);
}

.phero {
  height: 100svh;
  min-height: 680px;
  max-height: none;
  isolation: isolate;
  overflow: hidden;
}

.phero-visuals {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.phero .poster {
  --hero-image-scale: 1.16;
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: #000;
  transform: translate3d(0, var(--layer-y, 0px), 0) scale(var(--hero-image-scale));
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.phero .poster-base {
  z-index: 1;
  filter: brightness(0.58) contrast(1.08) saturate(0.72);
}

.phero-word {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: 100%;
  color: rgba(247, 247, 248, 0.13);
  font-family: var(--sans);
  font-size: clamp(112px, 19vw, 330px);
  font-weight: 700;
  letter-spacing: -0.085em;
  line-height: 0.8;
  text-align: center;
  white-space: nowrap;
  transform: translate3d(-51%, calc(-50% + var(--layer-y, 0px)), 0);
  -webkit-text-stroke: 1px rgba(247, 247, 248, 0.14);
  will-change: transform;
  pointer-events: none;
}

.phero .poster-subject {
  z-index: 3;
  filter: brightness(1.02) contrast(1.12) saturate(0.94);
  -webkit-mask-image: radial-gradient(ellipse 34% 68% at 52% 55%, #000 0 63%, rgba(0, 0, 0, 0.92) 71%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 68% at 52% 55%, #000 0 63%, rgba(0, 0, 0, 0.92) 71%, transparent 100%);
}

.phero .scrim {
  z-index: 4;
  height: 38%;
  background: linear-gradient(to top, rgba(15, 16, 20, 0.92), rgba(15, 16, 20, 0.22) 55%, transparent);
}

.phero .scrim.top {
  z-index: 4;
  height: 24%;
  background: linear-gradient(to bottom, rgba(15, 16, 20, 0.72), transparent);
}

.phero-fade {
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, var(--nd-surface));
  pointer-events: none;
}

.phero .meta {
  z-index: 7;
}

.phero .meta.tl,
.phero .meta.tr {
  top: 92px;
}

.phero .actions {
  z-index: 7;
  bottom: clamp(36px, 6vh, 72px);
}

@media (max-width: 1100px) {
  .phero {
    height: 100svh;
    min-height: 640px;
  }

  .phero .poster {
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: contain;
  }

  .phero-word {
    font-size: clamp(96px, 20vw, 218px);
  }
}

@media (max-width: 720px) {
  header.nav .brand img {
    height: 42px;
    max-width: 152px;
  }

  .phero {
    min-height: 620px;
  }

  .phero .poster {
    --hero-image-scale: 1.08;
    object-fit: cover;
    object-position: 52% 54%;
  }

  .phero-word {
    top: 47%;
    font-size: clamp(82px, 25vw, 176px);
  }

  .phero .meta.tl {
    top: 82px;
    left: 22px;
  }

  .phero .actions {
    bottom: 30px;
  }
}

@media (max-width: 560px) {
  .phero {
    height: 100svh;
    min-height: 620px;
  }

  .phero .actions {
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phero .poster,
  .phero-word {
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  .phero-word {
    transform: translate3d(-51%, -50%, 0);
  }
}


/* ===== Hero black canvas correction ===== */
header.nav,
header.nav.scrolled {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.phero,
.phero-visuals {
  background: #000;
}

.phero .scrim {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.22) 55%, transparent);
}

.phero .scrim.top {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent);
}

.phero-fade {
  background: linear-gradient(to bottom, transparent, #000);
}

/* Static hero: fade the actual artwork edges, not its letterboxed image box. */
.phero-visuals { container-type: size; }
.hero-artwork {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  /* Match the approved 2181×1901 composition: artwork is about 51% of
     the hero height, regardless of how wide the desktop window becomes. */
  width: min(100cqw, 115cqh);
  aspect-ratio: 3840 / 1708;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 70%, rgba(0,0,0,.82) 80%, rgba(0,0,0,.3) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 70%, rgba(0,0,0,.82) 80%, rgba(0,0,0,.3) 92%, transparent 100%);
}
.phero .hero-artwork .poster {
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  background: transparent;
  transform: none;
  will-change: auto;
  /* A small black-point adjustment clips the source's near-black grain,
     while the side mask merges its background into the pure-black canvas. */
  filter: contrast(1.05) brightness(.976);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,.8) 76%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,.8) 76%, transparent 94%);
}
.phero .hero-artwork .hero-shirt-softness {
  z-index: 2;
  filter: contrast(1.05) brightness(.976) blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 65%, rgba(0,0,0,.2) 76%, #000 94%);
  mask-image: linear-gradient(to bottom, transparent 65%, rgba(0,0,0,.2) 76%, #000 94%);
}
.hero-artwork::after {
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  background:linear-gradient(to right,#000 0%,#000 23%,transparent 41%,transparent 59%,#000 77%,#000 100%);
  pointer-events:none;
}

/* ===== Interface squeeze carousel ===== */
.interface-squeeze {
  --sq-duration: 900ms;
  --sq-ease: cubic-bezier(.16, 1, .3, 1);
  margin-top: clamp(38px, 5vw, 68px);
}

.sq-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sq-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-2);
}

.sq-counter strong {
  color: var(--nd-violet);
  font-size: 16px;
  font-weight: 500;
}

.sq-arrows {
  display: flex;
  gap: 8px;
}

.sq-arrows button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: #23242c;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.sq-arrows button:hover {
  background: var(--nd-violet);
  border-color: var(--nd-violet);
  transform: translateY(-2px);
}

.sq-arrows button:focus-visible,
.sq-slide:focus-visible {
  outline: 2px solid var(--nd-violet);
  outline-offset: 3px;
}

.sq-arrows svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sq-stage {
  position: relative;
  width: 100%;
  height: clamp(410px, 48vw, 620px);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.sq-stage:active { cursor: grabbing; }

.sq-slide {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #0d0e12;
  color: #fff;
  isolation: isolate;
  visibility: hidden;
  opacity: 0;
  transform: translateX(22px) scale(.985);
  pointer-events: none;
  transition:
    opacity .42s ease,
    transform .75s var(--sq-ease),
    visibility 0s linear .75s;
}

.sq-slide.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  border-color: rgba(124, 92, 255, .42);
  transition-delay: 0s;
}

.sq-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(89, 68, 180, .12), transparent 52%),
    #0c0d10;
}

.sq-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 9, .82), transparent 24%);
  pointer-events: none;
}

.sq-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: saturate(1) contrast(1.02);
  pointer-events: none;
}

.sq-slide.is-active .sq-media img {
  transform: translate(-50%, -50%);
}

.sq-label {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 17px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease .32s, transform .45s var(--sq-ease) .25s;
}

.sq-slide.is-active .sq-label {
  opacity: 1;
  transform: translateY(0);
}

.sq-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  min-height: 142px;
  margin-top: 24px;
}

.sq-copy-item {
  grid-area: 1 / 1;
  align-self: start;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .55s var(--sq-ease);
}

.sq-copy-item.is-active {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition-delay: .18s;
}

.sq-copy-item p {
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nd-violet);
}

.sq-copy-item h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 400;
  letter-spacing: -.035em;
}

.sq-copy-item span {
  display: block;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 820px) {
  .sq-stage { height: clamp(330px, 70vw, 510px); }
  .sq-copy { min-height: 156px; }
}

@media (max-width: 560px) {
  .interface-squeeze { margin-top: 30px; }
  .sq-stage { height: clamp(300px, 92vw, 430px); }
  .sq-slide { border-radius: 9px; }
  .sq-label { left: 12px; bottom: 12px; }
  .sq-copy { margin-top: 19px; min-height: 176px; }
}

/* Portrait framing reserves space for the header and CTA, with the same
   black edge masks and soft shirt transition as the desktop composition. */
@media (max-width: 900px) and (orientation: portrait) {
  .phero .hero-artwork {
    top:48%;
    width:min(166.37cqh, calc((100cqh - 210px) * 2.24824));
    transform:translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sq-slide,
  .sq-media img,
  .sq-label,
  .sq-copy-item { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}