/* ============================================================
     PREP GUIDE — how to hand off a project
     Reuses dark.css tokens, nav, cursor, loader, footer.
     ============================================================ */

  /* hide translatable text until the language is applied (prevents EN→RU flash) */
  html:not(.i18n-ready) [data-i18n],
  html:not(.i18n-ready) [data-i18n-html] { visibility: hidden; }

  /* ---------- ATMOSPHERE (photo backdrop) ---------- */
  html { background: var(--bg); }
  body { background: transparent; }
  .atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .atmo-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; filter: saturate(0.92) contrast(1.02); transition: opacity 1.8s ease; }
  .atmo-slide.is-on { opacity: 0.16; }
  .atmosphere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(from var(--bg) r g b / 0.92) 0%, rgb(from var(--bg) r g b / 0.78) 30%, rgb(from var(--bg) r g b / 0.74) 60%, rgb(from var(--bg) r g b / 0.95) 100%); }

  .wrap { max-width: none; margin: 0; padding: 0 var(--pad-x); }
  a:hover { color: var(--ink); }

  /* ---------- BACK LINK ---------- */
  .backbar { padding: 122px var(--pad-x) 0; }
  .backbar .wrap { padding: 0; }
  .back { position: relative; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; transition: color .35s ease; }
  .back .bk-txt { position: relative; }
  .back .bk-txt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--easing); }
  .back:hover .bk-txt::after { transform: scaleX(1); }
  .back .ar { display: inline-flex; align-items: center; color: var(--red); transition: transform .4s var(--easing); }
  .back .ar svg { width: 18px; height: 18px; display: block; }
  .back:hover { color: var(--ink); }
  .back:hover .ar { transform: translateX(-5px); }

  /* ---------- HERO ---------- */
  .hero { padding: 30px var(--pad-x) 0; }
  .hero .wrap { padding: 0; }
  .hero .eyebrow { display: flex; align-items: baseline; gap: 12px; color: var(--ink); margin-bottom: 22px; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
  .hero .eyebrow .ey-cat { color: var(--red); }
  .hero .eyebrow .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); align-self: center; }
  .hero .eyebrow .ey-sub { color: var(--ink); }
  .hero h1 { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: clamp(46px, 6.6vw, 108px); line-height: 0.92; letter-spacing: -0.05em; color: var(--ink); }
  .hero h1 .row { display: block; overflow: hidden; padding: 0.04em 0 0.16em; }
  .hero h1 .row > span { display: inline-block; transform: translateY(110%); will-change: transform; }
  .hero h1 .dot { color: var(--red); }
  .hero .lede { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 680px; margin-top: 24px; }
  .hero .lede b { color: var(--ink); font-weight: 500; }

  /* ---------- SECTION SCAFFOLD ---------- */
  .section { padding: 96px var(--pad-x) 0; }
  .hero + .section { padding-top: 48px; }
  .section .wrap { padding: 0; }
  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; }
  .sec-head .num { color: var(--red); font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; }
  .sec-head .htxt { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
  .sec-head .hchip { background: var(--red); color: #fff; border-radius: 999px; padding: 3px 10px; font-family: 'Rubik', sans-serif; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; align-self: center; }
  .sec-head .rule { flex: 1; height: 1px; background: var(--line); align-self: center; }

  /* ---------- OVERVIEW CARDS ---------- */
  .ovgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ovc { background: rgb(from var(--bg-2) r g b / 0.45); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 9px; position: relative; transition: background-color .35s ease; }
  .ovc:hover { background: var(--bg-2); }
  .ov-top { display: flex; align-items: center; gap: 10px; }
  .ov-num { color: var(--red); }
  .ov-tag { background: var(--red); color: #fff; border-radius: 999px; padding: 3px 10px; font-family: 'Rubik', sans-serif; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
  .ov-t { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; color: var(--ink); }
  .ov-s { color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 320px; }
  .ov-ar { position: absolute; right: 24px; top: 24px; display: inline-flex; align-items: center; color: var(--fg-dim); transition: color .35s ease; }
  .ov-ar svg { width: 18px; height: 18px; display: block; transition: transform .4s var(--easing); }
  .ovc:hover .ov-ar { color: var(--red); }
  .ovc:hover .ov-ar svg { transform: translateY(5px); }

  /* ---------- LEAD + STEPS ---------- */
  .s-lead { color: var(--ink-soft); font-size: 16.5px; line-height: 1.62; max-width: 780px; }
  .steps { margin-top: 10px; border-bottom: 1px solid var(--line); }
  .step { display: grid; grid-template-columns: 110px 1fr; gap: 30px; padding: 38px 0; border-top: 1px solid var(--line); }
  .step:first-child { margin-top: 30px; }
  .step-num { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
  .step-num .dot { color: var(--red); }
  .step-t { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
  .step-b { color: var(--ink-soft); font-size: 15px; line-height: 1.62; max-width: 820px; }
  .step-b + .step-b { margin-top: 12px; }
  .step-b b, .blist b { color: var(--ink); font-weight: 600; }

  .kbd { font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 12.5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; white-space: nowrap; color: var(--ink); }

  .blist { margin-top: 14px; max-width: 860px; list-style: none; display: flex; flex-direction: column; }
  .blist li { display: block; position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); font-size: 15px; line-height: 1.58; }
  .blist li:last-child { border-bottom: none; }
  .blist li::before { content: "—"; position: absolute; left: 0; color: var(--red); font-weight: 600; }

  /* ---------- PANELS ---------- */
  .panel { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: rgb(from var(--bg-2) r g b / 0.6); max-width: 860px; }
  .panel-k { display: block; margin-bottom: 10px; color: var(--red); }
  .panel p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
  .panel p b { color: var(--ink); font-weight: 600; }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; max-width: 1020px; }
  .duo .panel { margin-top: 0; max-width: none; }

  /* ---------- PACKAGE GRID ---------- */
  .pkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; max-width: 920px; }
  .pk { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; gap: 14px; background: rgb(from var(--bg-2) r g b / 0.45); }
  .pk-n { color: var(--red); padding-top: 3px; }
  .pk-t { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 5px; }
  .pk-s { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
  .pk-link { color: var(--ink-soft); border-bottom: 1px solid rgb(from var(--ink-soft) r g b / 0.45); padding-bottom: 1px; transition: border-color .3s ease; }
  .pk-link:hover { color: var(--ink-soft); border-color: var(--red); }

  /* ---------- SUB LABEL ---------- */
  .sub-k { margin: 32px 0 4px; color: var(--red); display: flex; align-items: baseline; gap: 10px; }
  .sub-k::before { content: "—"; color: var(--red); }

  /* ---------- REQUIREMENTS GRID ---------- */
  .reqs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .req { background: rgb(from var(--bg-2) r g b / 0.45); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; }
  .req-n { color: var(--red); }
  .req-n.req-ar svg { width: 15px; height: 15px; display: block; }
  .req-t { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); margin: 10px 0 8px; }
  .req-b { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
  .req-b b { color: var(--ink); font-weight: 600; }
  .tree { margin-top: 14px; font-size: 12px; line-height: 2; color: var(--ink-soft); text-transform: none; letter-spacing: 0.04em; }
  .tree .root { color: var(--fg-dim); }

  /* ---------- FOOTER (sits straight after the requirements grid) ---------- */
  footer.site-footer { margin-top: 110px; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1000px) {
    .duo { grid-template-columns: 1fr; max-width: 860px; }
  }
  @media (max-width: 900px) {
    .ovgrid { grid-template-columns: 1fr; }
    .ov-s { max-width: none; }
  }
  @media (max-width: 760px) {
    .backbar { padding-top: 100px; }
    .hero { padding-top: 26px; }
    .step { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
    .step-num { font-size: 28px; }
    .pkgrid { grid-template-columns: 1fr; }
    .reqs { grid-template-columns: 1fr; }
    .kbd { white-space: normal; }
  }