/* ============================================================================
   INSULA — page shell + dark-theme overrides for scroll-world's scrub engine.

   The engine wraps its own defaults in `@layer sw`, so every unlayered rule in this
   file wins over them regardless of load order — no !important, no specificity games.
   That matters here because the engine ships a LIGHT theme: white chips, a cream
   primary button with white text (invisible on dark), white route labels. Each of
   those is re-pointed below.
   ========================================================================== */

/* ---- brand tokens -------------------------------------------------------- */
:root, .sw-root {
  --sw-bg:        #07040E;   /* measured off the rendered scenes, not the prompt value */
  --sw-ink:       #F2EDE6;   /* cream — primary text */
  --sw-ink-soft:  #9A93A8;
  --sw-accent:    #FF5C4D;   /* coral; each section overrides this at runtime */

  --coral:  #FF5C4D;
  --violet: #7B5CFF;
  --mint:   #35E0A1;
  --amber:  #FFB547;
  --ink-2:  #120D1C;         /* raised surface, tuned violet to sit on the scene bg */
  --hair:   rgba(242,237,230,.12);

  --sw-font-display: "Inter Tight", "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --sw-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sw-bg); color: var(--sw-ink); font-family: var(--sw-font-body); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- engine overrides ---------------------------------------------------- */

/* Proof chips: the engine's default is a near-white pill — unreadable here. */
.sw-copy__tags li {
  color: var(--sw-ink);
  background: color-mix(in srgb, var(--sw-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 42%, transparent);
  backdrop-filter: blur(6px);
}
/* Default primary is cream-on-white. Accent fill + dark label instead. */
.sw-btn--primary { background: var(--sw-accent); color: #0B0D12; }
.sw-btn--ghost   { color: var(--sw-ink); border-color: color-mix(in srgb, var(--sw-ink) 34%, transparent); }
.sw-btn--ghost:hover { border-color: var(--sw-accent); color: var(--sw-accent); }
/* Route rail hover labels: white glass → ink glass. */
.sw-route__label {
  color: var(--sw-ink);
  background: color-mix(in srgb, var(--ink-2) 86%, transparent);
  border-color: color-mix(in srgb, var(--sw-accent) 34%, transparent);
}
/* The scrub progress bar must stay visible above our own header. */
.sw-scrollbar { z-index: 90; }
/* The engine's built-in topbar is unused (nav:false, no brand/cta) — collapse it so it
   can't eat pointer events over our header. */
.sw-topbar { display: none; }

/* The hero headline is a full sentence, not a 3-word title — cap it so it can't
   swallow the viewport on a wide monitor. */
.sw-copy__title { font-size: clamp(1.9rem, 3.3vw, 2.9rem); letter-spacing: -0.02em; }
.sw-copy { width: min(46vw, 540px); }

/* Upstream quirk: the engine's own stylesheet centres the copy with
   `.sw-copy{top:50%;transform:translateY(-50%)}`, but read() then writes an INLINE
   `transform: translateY(Xvh)` every frame for the parallax drift — which overwrites
   that -50% and leaves the block hanging DOWN from the middle of the viewport. With
   the skill's example copy (3-6 word titles) it never shows; with a full-sentence
   headline the CTA falls below the fold.
   `translate` is a separate CSS property that composes with `transform` instead of
   being clobbered by it, so this restores the centring AND keeps the drift. Desktop
   only — on phones the engine deliberately bottom-anchors the copy instead. */
@media (min-width: 861px) {
  .sw-copy { translate: 0 -50%; }
}
.sw-hint { letter-spacing: .1em; }

/* Route rail + scroll hint belong to the world only — hide them once the static
   sections take over (toggled from site.js). */
body.past-world .sw-route,
body.past-world .sw-hint { opacity: 0; pointer-events: none; transition: opacity .35s; }

/* ---- header -------------------------------------------------------------- */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: flex; align-items: center; gap: 24px;
  padding: clamp(14px, 2vw, 22px) var(--pad);
  transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
body.scrolled .hd {
  background: color-mix(in srgb, var(--sw-bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hair);
}
.hd__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sw-ink); }
.hd__mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(145deg, var(--coral), var(--violet));
  box-shadow: 0 0 22px color-mix(in srgb, var(--coral) 55%, transparent);
}
.hd__name { font-family: var(--sw-font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .1em; }
.hd__nav { display: flex; gap: 4px; margin-left: auto; }
.hd__nav a {
  color: var(--sw-ink-soft); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: 9px 15px; border-radius: 999px; transition: color .2s, background .2s;
}
.hd__nav a:hover { color: var(--sw-ink); background: rgba(242,237,230,.07); }
.hd__cta {
  text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
  color: #0B0D12; background: var(--sw-ink); padding: 11px 22px; border-radius: 999px;
  transition: transform .2s, box-shadow .2s;
}
.hd__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.hd__burger { display: none; }

/* ---- static sections below the fixed video stage ------------------------- */
/* Own stacking context + opaque background, or the fixed clips show through. */
.below { position: relative; z-index: 70; background: var(--sw-bg); }
.below::before {                      /* soft handoff out of the world */
  content: ""; position: absolute; left: 0; right: 0; top: -120px; height: 120px;
  background: linear-gradient(180deg, transparent, var(--sw-bg));
  pointer-events: none;
}

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--pad); }
.kicker {
  font-family: var(--sw-font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sw-accent); margin: 0 0 14px;
}
.h2 {
  font-family: var(--sw-font-display); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 40px;
}

/* stats */
.stats { padding: clamp(72px, 11vw, 130px) 0 clamp(48px, 7vw, 80px); --sw-accent: var(--violet); }
.stats__lead { font-family: var(--sw-font-display); font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.3rem); letter-spacing: -.02em; margin: 0 0 48px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; background: var(--hair); border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; }
.stat { background: var(--sw-bg); padding: clamp(24px, 3vw, 38px); }
.stat dt { font-family: var(--sw-font-display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1; letter-spacing: -.03em;
           background: linear-gradient(140deg, var(--sw-ink), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat dd { margin: 12px 0 0; color: var(--sw-ink-soft); font-size: .95rem; line-height: 1.45; }

/* approach */
.approach { padding: clamp(64px, 9vw, 110px) 0; --sw-accent: var(--coral); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.card {
  position: relative; padding: clamp(24px, 3vw, 36px); border-radius: 20px;
  background: var(--ink-2); border: 1px solid var(--hair); overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.card::after {                         /* a thin screen-glow edge, the world's motif */
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--coral), transparent 70%); opacity: .7;
}
.card:hover { border-color: color-mix(in srgb, var(--coral) 40%, transparent); transform: translateY(-3px); }
.card h3 { font-family: var(--sw-font-display); font-weight: 700; font-size: 1.14rem; margin: 0 0 10px; letter-spacing: -.01em; }
.card p  { margin: 0; color: var(--sw-ink-soft); line-height: 1.6; }

/* process */
.process { padding: clamp(64px, 9vw, 110px) 0; --sw-accent: var(--mint); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--hair); }
.step__n { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; letter-spacing: .1em; color: var(--mint); }
.step h3 { font-family: var(--sw-font-display); font-weight: 700; font-size: 1.16rem; margin: 12px 0 8px; }
.step p  { margin: 0; color: var(--sw-ink-soft); line-height: 1.6; font-size: .96rem; }

/* cta */
.cta { padding: clamp(64px, 9vw, 110px) 0; --sw-accent: var(--amber); }
.cta__inner {
  display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: clamp(32px, 5vw, 60px); border-radius: 28px;
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 60%), var(--ink-2);
  border: 1px solid var(--hair);
}
.cta .h2 { margin-bottom: 16px; }
.cta__text { margin: 0; color: var(--sw-ink-soft); line-height: 1.6; max-width: 46ch; }
.cta__actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.btn { text-decoration: none; font-weight: 600; font-size: .98rem; padding: 15px 30px; border-radius: 999px; transition: transform .2s, box-shadow .2s; }
.btn--primary { background: var(--sw-ink); color: #0B0D12; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.cta__mail { color: var(--sw-ink-soft); text-decoration: none; font-size: .95rem; border-bottom: 1px solid var(--hair); }
.cta__mail:hover { color: var(--sw-ink); }

/* footer */
.ft { padding: clamp(48px, 6vw, 80px) 0 32px; border-top: 1px solid var(--hair); }
.ft__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ft__col h4 { font-family: var(--sw-font-display); font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sw-ink-soft); margin: 0 0 16px; }
.ft__col p { margin: 0 0 8px; line-height: 1.55; }
.ft__col a { color: var(--sw-ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.ft__col a:hover { color: var(--coral); }
.muted { color: var(--sw-ink-soft); font-size: .92rem; }
.ft__bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(36px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--hair);
  color: var(--sw-ink-soft); font-size: .88rem;
}
.ft__bottom a { color: var(--sw-ink-soft); text-decoration: none; border-bottom: 1px solid var(--hair); }
.ft__bottom a:hover { color: var(--sw-ink); }
.ft__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* modal (requisites) */
.modal {
  padding: 0; border: 0; background: transparent;
  max-width: min(720px, calc(100vw - 32px)); width: 100%;
  color: var(--sw-ink);
}
.modal::backdrop {
  background: rgba(7, 4, 14, .72);
  backdrop-filter: blur(8px);
}
.modal__panel {
  background: var(--ink-2); border: 1px solid var(--hair); border-radius: 20px;
  padding: clamp(22px, 3vw, 32px); max-height: min(86vh, 720px); overflow: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px;
}
.modal__title {
  font-family: var(--sw-font-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -.01em; margin: 0;
}
.modal__close {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--hair);
  background: transparent; color: var(--sw-ink); font-size: 1.4rem; line-height: 1;
  cursor: pointer; flex-shrink: 0;
}
.modal__close:hover { border-color: color-mix(in srgb, var(--coral) 50%, transparent); color: var(--coral); }
.reqs__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin: 0;
}
.reqs__grid > div { margin: 0; }
.reqs__grid dt {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sw-ink-soft); margin: 0 0 6px; font-weight: 600;
}
.reqs__grid dd { margin: 0; line-height: 1.5; font-size: .95rem; word-break: break-word; }
.reqs__span { grid-column: 1 / -1; }

/* ---- cookie notice ------------------------------------------------------- */
/* The markup is built in site.js, not in HTML: index.html and both legal pages already
   load this stylesheet and that script, so one source beats pasting the same block into
   three files and watching them drift.
   Desktop lays it out as a single low row rather than a corner card. A card tall enough
   to hold this sentence (~170px) reaches up into the bottom of the hero copy column and
   covers the "Получить предложение" button on any viewport shorter than ~900px; one row
   is a third of that height and clears it. Phones stack it — see the media query. */
.cookie {
  position: fixed; z-index: 95;
  left: var(--pad); right: var(--pad); bottom: clamp(16px, 2.4vh, 24px);
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px);
  padding: 14px 20px;
  /* Opaque, not the glass used elsewhere on the page. This bar has to stay legible over
     three different backgrounds — the scrubbed video, the hero's own buttons on a phone,
     and running body text on the legal pages — and at 92% the text behind it ghosted
     through on all of them. Skipping backdrop-filter also spares a viewport-wide
     compositing pass on the page that is already busy decoding video. */
  background: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .32s, transform .32s;
}
.cookie.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cookie__text { margin: 0; flex: 1; font-size: .86rem; line-height: 1.5; color: var(--sw-ink-soft); }
.cookie__text a { color: var(--sw-ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.cookie__text a:hover { color: var(--coral); border-bottom-color: var(--coral); }
.cookie__btn {
  flex-shrink: 0;
  font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
  color: #0B0D12; background: var(--sw-ink); border: 0;
  padding: 11px 22px; border-radius: 999px;
  transition: transform .2s, box-shadow .2s;
}
.cookie__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
/* site.js publishes the notice height as --cookie-h; lift the scroll hint clear of it so
   the two don't stack on a narrow desktop window. The hero copy is deliberately NOT
   shifted: on short viewports (iPhone SE, an 870x650 desktop window) a lift big enough
   to clear this notice pushes the copy up under the fixed header, which is a worse bug
   than a dismissible notice briefly overlapping the hero button — and that button is
   repeated in the header and the footer, so nothing becomes unreachable. */
body.cookie-up .sw-hint { bottom: calc(26px + var(--cookie-h, 0px) + 14px); }
@media (prefers-reduced-motion: reduce) {
  .cookie { transition: none; transform: none; }
}

/* legal document pages */
.page-legal .hd { background: color-mix(in srgb, var(--sw-bg) 78%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--hair); }
.legal { padding: clamp(100px, 14vw, 140px) 0 clamp(64px, 9vw, 100px); }
.legal__wrap { max-width: 760px; }
.legal h1 {
  font-family: var(--sw-font-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 28px;
}
.legal h2 {
  font-family: var(--sw-font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em; margin: 36px 0 14px;
}
.legal p, .legal li { color: var(--sw-ink-soft); line-height: 1.65; font-size: .96rem; }
.legal p { margin: 0 0 14px; }
.legal ol, .legal ul { margin: 0 0 16px; padding-left: 1.35em; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--sw-ink); }
.legal__meta { color: var(--sw-ink-soft); font-size: .88rem; margin: 0 0 32px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); }
.legal__nav a { color: var(--sw-ink-soft); text-decoration: none; border-bottom: 1px solid var(--hair); font-size: .92rem; }
.legal__nav a:hover { color: var(--sw-ink); }
.legal table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .9rem;
}
.legal th, .legal td {
  border: 1px solid var(--hair); padding: 12px 14px; text-align: left; vertical-align: top;
  color: var(--sw-ink-soft); line-height: 1.5;
}
.legal th { color: var(--sw-ink); font-weight: 600; background: var(--ink-2); width: 28%; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .reqs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* On phones the engine anchors copy to the bottom; keep our width rule from fighting it. */
  .sw-copy { width: auto; }

  /* The engine's phone type scale assumes a 3-6 word title and no hero CTA. This brief
     has a full-sentence headline, a 4-line body, 3 chips AND two buttons in the same
     block — at the default sizes it grows tall enough to collide with the scroll hint.
     Tighten the whole stack rather than cutting copy. */
  .sw-copy__num     { font-size: .68rem; }
  .sw-copy__eyebrow { font-size: .68rem; letter-spacing: .12em; margin-top: 12px; }
  .sw-copy__title   { font-size: clamp(1.45rem, 5.4vw, 1.9rem); margin-top: 8px; line-height: 1.1; }
  .sw-copy__body    { margin-top: 12px; font-size: .94rem; line-height: 1.45; }
  .sw-copy__tags    { margin-top: 14px; gap: 6px; }
  .sw-copy__tags li { font-size: .74rem; padding: 6px 11px; }
  .sw-copy__cta     { margin-top: 16px; gap: 8px; }
  .sw-btn           { padding: 13px 20px; font-size: .88rem; }
  /* With a CTA in the hero there is no room left for the hint, and "scroll" needs no
     teaching on a touch device. */
  .sw-hint { display: none; }

  /* Phones stack the row and keep the type tight — this sentence is ~150 characters, and
     every saved line is hero it stops covering while the notice is up. */
  .cookie {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    flex-direction: column; align-items: stretch;
    padding: 14px 16px; gap: 10px;
  }
  .cookie__text { font-size: .8rem; line-height: 1.45; }
  .cookie__btn { padding: 13px 22px; }

  .hd { gap: 12px; }
  .hd__nav { position: fixed; inset: 0 0 auto 0; top: 100%; flex-direction: column; gap: 0;
             padding: 12px var(--pad) 22px; background: color-mix(in srgb, var(--sw-bg) 96%, transparent);
             backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair);
             transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; }
  body.menu-open .hd__nav { opacity: 1; transform: translateY(0); pointer-events: auto; }
  body.menu-open .hd { background: color-mix(in srgb, var(--sw-bg) 96%, transparent); backdrop-filter: blur(14px); }
  .hd__nav a { padding: 14px 4px; font-size: 1.02rem; border-radius: 0; }
  .hd__cta { margin-left: auto; padding: 10px 16px; font-size: .84rem; }
  .hd__burger {
    display: block; width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 12px;
    background: transparent; cursor: pointer; position: relative;
  }
  .hd__burger::before, .hd__burger::after {
    content: ""; position: absolute; left: 50%; width: 16px; height: 1.5px; background: var(--sw-ink);
    transform: translateX(-50%); transition: transform .22s, top .22s;
  }
  .hd__burger::before { top: 15px; } .hd__burger::after { top: 22px; }
  body.menu-open .hd__burger::before { top: 19px; transform: translateX(-50%) rotate(45deg); }
  body.menu-open .hd__burger::after  { top: 19px; transform: translateX(-50%) rotate(-45deg); }
}
/* Short phones (SE-class, and any phone in landscape): the hero stack still doesn't fit
   between the header and the safe area. Drop the proof chips — every number in them is
   repeated in full in the #about stats band — and tighten the type once more. */
@media (max-width: 860px) and (max-height: 640px) {
  .sw-copy__tags  { display: none; }
  .sw-copy__title { font-size: clamp(1.25rem, 4.8vw, 1.6rem); }
  .sw-copy__body  { font-size: .88rem; margin-top: 10px; }
  .sw-copy__num   { display: none; }
  .sw-copy__cta   { margin-top: 14px; }
}

@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}