/* =============================================================
   Кассиопея — landing styles
   Layout breakpoint: 768px (mobile ≤ 768, desktop ≥ 769).
   ============================================================= */

@font-face {
  font-family: 'Futura PT';
  src: url('assets/fonts/futura-pt_book.woff2') format('woff2'),
       url('assets/fonts/futura-pt_book.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:           #0f1729;
  --bg-blur:      rgba(15, 23, 41, 0.72);
  --fg:           #f2e2cc;
  --muted:        #aac4d1;
  --accent:       #da541b;
  --content-w:    760px;
  --font-display: 'Prosto One', system-ui, sans-serif;
  --font-text:    'Futura PT', 'Futura', system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow is set to hidden globally in the app-like layout below */
}

a   { color: inherit; text-decoration: none; }
img,
svg { display: block; max-width: 100%; }
p   { margin: 0; }

/* Visually hidden but accessible to screen readers and search crawlers */
.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;
}

/* =============================================================
   Top navigation (desktop)
   ============================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 24px;
}

.nav__mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
.nav__mark:hover { color: var(--accent); transform: rotate(45deg); }
.nav__star { width: 100%; height: 100%; fill: currentColor; }

.nav__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.nav__menu a {
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}
.nav__menu a:hover           { color: var(--fg); }
.nav__menu a.is-active       { color: var(--accent); }

/* =============================================================
   App-like section switching (all viewports)
   The page has no scroll; only the active hero/section is visible.
   Sections that exceed the viewport scroll internally.
   ============================================================= */

html, body { height: 100%; overflow: hidden; }
main { position: fixed; inset: 0; overflow: hidden; }

.hero, .section {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the native scrollbar so it doesn't appear/disappear during the
     rubber-band tug (which would shift centred content sideways). Wheel
     and touch still scroll the long sections normally. */
  scrollbar-width: none;            /* Firefox */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.hero::-webkit-scrollbar,
.section::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.hero.is-active,
.section.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* =============================================================
   Hero
   ============================================================= */

.hero {
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Square stage that holds both the animation canvas and the SVG logo.
   The canvas keeps its 960×960 native resolution; CSS scales it so it
   tiles identically to the SVG overlay on every viewport. */
.hero__stage {
  position: relative;
  width: min(100vh, 960px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hero__logo {
  /* Sized to match the proportions of the source animation: 42% of the
     stage width gives the same footprint as the orange motion artwork
     in the mp4 (≈ 403/960). */
  position: relative;
  z-index: 1;
  width: 42%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(170, 196, 209, 0.18));
}

/* =============================================================
   Sections
   ============================================================= */

.section {
  /* Position is already set by the app-like rule above (.hero, .section). */
  padding: 140px 24px;
}

.section__inner {
  max-width: var(--content-w);
  margin: 0 auto;
}

.section__title {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 4.48px;
  text-align: center;
  text-transform: lowercase;
}

.prose p { font-size: 20px; line-height: 24px; letter-spacing: 0.3px; }
.prose p + p { margin-top: 24px; }

/* Решения — multi-card list */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.card { display: flex; gap: 10px; align-items: flex-start; }
.card__plus {
  flex: 0 0 20px;
  width: 20px;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}
.card__body { flex: 1 1 auto; min-width: 0; }
.card__heading {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 2.88px;
  text-transform: uppercase;
}
.card__body p { font-size: 20px; line-height: 24px; letter-spacing: 0.3px; }

/* Исследования и разработка — subsections with bullets */
.subsection { margin-top: 40px; }
.subsection__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 2.88px;
  text-transform: uppercase;
}

.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bullets li { display: flex; gap: 10px; align-items: flex-start; }
.bullets li > span {
  flex: 0 0 20px;
  width: 20px;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}
.bullets li > p {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.3px;
}

/* Контакты */
.section--contacts { padding-bottom: 200px; }

.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  text-align: center;
}
.contacts__title    { margin: 0; }
.contacts__tagline {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 2.88px;
}
.contacts__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.3px;
}
.contacts__group { display: flex; flex-direction: column; }

/* =============================================================
   Footer
   ============================================================= */

/* Footer is always pinned to viewport bottom with a translucent blur
   backdrop, so long-section text scrolling behind it reads as a soft
   wash instead of overlapping the © + signature. */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px 20px;
  opacity: 0.85;
  pointer-events: none;
  background: var(--bg-blur);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.footer * { pointer-events: auto; }
.footer__copy { font-size: 16px; line-height: 20px; letter-spacing: 0.4px; }
.footer__mark { width: 124px; height: 6.8px; flex: 0 0 auto; opacity: 0.9; }

/* Desktop nav (>768px) also gets the blur backdrop for the same reason. */
@media (min-width: 769px) {
  .nav {
    background: var(--bg-blur);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* =============================================================
   Mobile (viewport ≤ 768px)
   Same app-like section switching as desktop. The desktop nav is
   hidden; a bordered burger-button + overlay menu take over.
   ============================================================= */

.mnav, .mmenu { display: none; }

@media (max-width: 768px) {
  body { font-size: 17px; line-height: 21px; letter-spacing: 0.255px; }

  .nav { display: none; }

  /* ---- Top bar: compact 45×45 burger on hero, full bar on inner sections ---- */
  .mnav {
    position: fixed;
    top: 20px;
    right: 22px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--muted);
    border-radius: 3px;
    background: var(--bg);
    color: var(--muted);
    font: 12px/15px var(--font-text);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: left 0.25s ease, width 0.25s ease, padding 0.25s ease;
  }
  .mnav:hover, .mnav:focus-visible {
    color: var(--fg);
    border-color: var(--fg);
    outline: none;
  }
  .mnav__label {
    flex: 1 1 0;
    overflow: hidden;
    max-width: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease, max-width 0.25s ease;
  }
  .mnav__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
  }
  .mnav__icon-svg { width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1; }
  .mnav__icon-svg--chev { width: 12px; height: 7px; display: none; }

  /* Expanded bar (shown once user has scrolled past the hero) */
  .mnav.is-section {
    left: 22px;
    right: 22px;
    width: auto;
    padding: 0 24px;
    gap: 10px;
    justify-content: space-between;
  }
  .mnav.is-section .mnav__label                  { opacity: 1; max-width: 100%; }
  .mnav.is-section .mnav__icon-svg--burger       { display: none; }
  .mnav.is-section .mnav__icon-svg--chev         { display: inline; }

  /* ---- Overlay menu (rendered via [hidden] toggle from JS) ---- */
  .mmenu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    background: rgba(15, 23, 41, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: mmenu-fade 0.15s ease-out;
  }
  .mmenu[hidden] { display: none; }

  .mmenu__panel {
    position: absolute;
    top: 20px;
    left: 22px;
    right: 22px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 30px 45px;
    background: var(--bg);
    border: 1px solid var(--muted);
    border-radius: 3px;
  }
  .mmenu__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mmenu__star {
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: var(--accent);
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .mmenu__star:hover { color: var(--fg); transform: rotate(45deg); }
  .mmenu__star svg   { width: 100%; height: 100%; fill: currentColor; }
  .mmenu__close {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
  }
  .mmenu__close svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
  }
  .mmenu__close:hover { color: var(--fg); }
  .mmenu__list { display: flex; flex-direction: column; gap: 30px; }
  .mmenu__list a {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mmenu__list a:hover,
  .mmenu__list a.is-active { color: var(--accent); }

  @keyframes mmenu-fade { from { opacity: 0; } to { opacity: 1; } }

  /* ---- Hero ---- */
  .hero {
    /* Override desktop's centered grid: the mobile design pushes the
       stage down from the top so the burger button has room above it. */
    display: block;
    padding-top: 180px;
  }
  .hero__stage { width: 100%; }
  .hero__logo  { width: 42%; }

  /* ---- Sections (full-width content with 22px gutters) ---- */
  .section { padding: 120px 22px 60px; }
  .section__inner { max-width: none; width: 100%; }

  .section__title {
    margin: 0 0 45px;
    font-size: 21px;
    line-height: 25px;
    letter-spacing: 3.57px;
  }

  .prose p { font-size: 17px; line-height: 21px; letter-spacing: 0.255px; }
  .prose p + p { margin-top: 21px; }

  .cards { gap: 45px; }
  .card__plus { font-size: 20px; line-height: 24px; }
  .card__heading {
    margin: 0 0 15px;
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 2.72px;
  }
  .card__body p { font-size: 17px; line-height: 21px; letter-spacing: 0.255px; }

  .subsection { margin-top: 45px; }
  .subsection__title {
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 2.72px;
  }
  .bullets li > span { font-size: 20px; line-height: 24px; }
  .bullets li > p    { font-size: 17px; line-height: 21px; letter-spacing: 0.255px; }

  .section--contacts { padding-bottom: 100px; }
  .contacts         { gap: 60px; }
  .contacts__tagline { font-size: 17px; line-height: 23px; letter-spacing: 2.72px; }
  .contacts__details { font-size: 17px; line-height: 21px; letter-spacing: 0.255px; }
}

/* =============================================================
   Rubber-band scroll feedback
   When the user tries to scroll past the edge of a section, the
   inner content gets a small damped translation, then bounces
   back. At the moment of the bounce we briefly glow the nav so
   the user's eye is drawn to it as the way to switch sections.
   ============================================================= */

.section__inner,
.hero__stage {
  will-change: transform;
}

/* Pulse the menu labels themselves (not the whole bar) — a soft text
   glow on each link briefly draws the eye to where navigation lives.
   The peak is held from 20% → 55% of the animation so it reads as a
   sustained shimmer rather than a flash that's gone before you blink. */
.nav.is-bumped  .nav__menu a       { animation: link-bump 0.95s ease-out; }
.mnav.is-bumped .mnav__label,
.mnav.is-bumped .mnav__icon-svg    { animation: link-bump 0.95s ease-out; }
/* The mobile nav also has the bordered button itself glow — without
   this the burger icon alone (14×12 px) is too small for the drop
   shadow to register, especially on hero where the label is hidden. */
.mnav.is-bumped                    { animation: mnav-button-bump 0.95s ease-out; }

@keyframes link-bump {
  0%   { text-shadow: 0 0 0 rgba(218, 84, 27, 0); filter: none; }
  20%  {
    text-shadow: 0 0 6px rgba(218, 84, 27, 1);
    filter: drop-shadow(0 0 4px rgba(218, 84, 27, 1));
  }
  55%  {
    text-shadow: 0 0 6px rgba(218, 84, 27, 1);
    filter: drop-shadow(0 0 4px rgba(218, 84, 27, 1));
  }
  100% { text-shadow: 0 0 0 rgba(218, 84, 27, 0); filter: none; }
}

@keyframes mnav-button-bump {
  0%, 100% {
    border-color: var(--muted);
    box-shadow: 0 0 0 0 rgba(218, 84, 27, 0);
  }
  20%, 55% {
    border-color: var(--accent);
    box-shadow: 0 0 10px 1px rgba(218, 84, 27, 0.85);
  }
}

/* Reduced motion: drop the canvas animation, fall back to a static glow */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__canvas { display: none; }
  .hero { background: radial-gradient(ellipse at center, #1a2542 0%, #0f1729 70%); }
  .section__inner, .hero__stage { will-change: auto; }
}