/* ============================================================
   BULBVPN landing — "База знаний" (Knowledge base) stylesheet
   Self-contained: @font-face + reset + shared nav/footer rules copied
   verbatim from pricing.css so this page does NOT depend on pricing.css
   or main.css. Below the shared block live the knowledge-page-specific
   rules (hero notch panel, illustration frame, heading/paragraph).

   Layout model mirrors pricing.html: three fixed-width absolute
   "canvases" (one per Figma artboard) toggled by the SAME media
   queries pricing.css uses, so each breakpoint reproduces its own
   artboard 1:1.
     desktop canvas  1660 x 1764   shown >= 1394px
     tablet  canvas  1133 x 1520   shown 813px..1393px
     phone   canvas   493-wide fluid (aspect 493:1036)  shown <= 812px
   ============================================================ */

/* ---------- self-hosted fonts (copied from pricing.css) ---------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* ---------- reset (copied from pricing.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-page);
  color: var(--c-text-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; border: 0; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--c-purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- canvas ---------- */
.canvas {
  position: relative;
  margin: 0 auto;
  background: var(--c-page);
  overflow: hidden;          /* clip artboard bleed exactly like the Figma frame */
}
.bp-d { width: 1660px; height: 1764px; }
.bp-t { width: 1133px; height: 1520px; }
/* phone canvas is FLUID: caps at the 493px artboard width and scales down to
   ~360px. Height is definite via aspect-ratio so the absolutely-positioned
   children have a box to resolve against (design frame 493 x 1036). */
.bp-p {
  width: 100%;
  max-width: 493px;
  aspect-ratio: 493 / 1036;
  container-type: inline-size;
  --u: calc(100cqw / 493);      /* one Figma design pixel, fluid */
}

/* breakpoint switching — identical boundaries to the home/pricing pages:
   midpoints between the three target widths (493 / 1133 / 1660). */
.bp-d, .bp-t, .bp-p { display: none; }

/* scale-to-fit: fixed artboard fills the viewport width at any size. */
.fit { display: none; width: 100%; overflow: hidden; container-type: inline-size; }
@media (min-width: 1394px) {
  .fit-d { display: block; aspect-ratio: 1660 / 1764; }
  .fit-d > .bp-d { margin: 0; transform-origin: top left; transform: scale(calc(100cqw / 1660px)); }
}
@media (min-width: 813px) and (max-width: 1393px) {
  .fit-t { display: block; aspect-ratio: 1133 / 1520; }
  .fit-t > .bp-t { margin: 0; transform-origin: top left; transform: scale(calc(100cqw / 1133px)); }
}
@media (min-width: 1394px) { .bp-d { display: block; } }
@media (min-width: 813px) and (max-width: 1393px) { .bp-t { display: block; } }
@media (max-width: 812px) { .bp-p { display: block; } }

/* ---------- primitives ---------- */
.abs { position: absolute; }
.nowrap { white-space: nowrap; }
.lm { display: contents; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: 10px 16px; z-index: 99;
  font-family: var(--font-body);
}
.skip-link:focus { left: 8px; top: 8px; }

/* typography roles */
.dm    { font-family: var(--font-heading); font-variation-settings: "opsz" 14; line-height: normal; }
.dm-m  { font-weight: var(--w-medium); }
.dm-b  { font-weight: var(--w-bold); }
.dm-eb { font-weight: var(--w-extrabold); }
.dm-bl { font-weight: var(--w-black); }
.dm-th { font-weight: 200; }
.inter { font-family: var(--font-body); font-weight: var(--w-regular); line-height: normal; }

.c-w { color: var(--c-text-light); }
.c-b { color: var(--c-text-dark); }
.ls6 { letter-spacing: 0.6px; }
.ls-pill { letter-spacing: var(--ls-pill); }

/* Baseline match (same technique as the home/pricing pages): the Figma source
   renders these absolutely-positioned text nodes with more leading above the
   cap height than the browser's line-height:normal (Cyrillic falls through
   to a taller-ascent fallback), so flowing text sits ~0.35em too high. Nudge
   it down. Scoped to desktop/tablet .dm/.inter flowing text; opt out the
   Latin logo wordmark and the whole phone artboard (which sets its own
   offsets). */
.bp-d .dm, .bp-d .inter,
.bp-t .dm, .bp-t .inter { transform: translateY(0.35em); }
.logo-text { transform: translateY(0); }
.bp-p .dm, .bp-p .inter { transform: none; }

/* cards / helpers */
.card-ink   { background: var(--c-ink); }
.cover   { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }
.p-ico   { object-fit: contain; }

/* Header/nav sits ABOVE the hero art. In Figma the nav pills are z-ordered on
   top of the hero card; in DOM order the hero <img> comes after the header
   and would otherwise paint over the active "БАЗА ЗНАНИЙ" pill (which sits
   on the card's black connector tab). Lift every header element above the
   content layer. */
header .abs, header img { z-index: 20; }

/* nav pill + buttons (same vocabulary as the home/pricing pages) */
.pill {
  background: var(--c-black);
  color: var(--c-text-light);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: var(--w-extrabold);
  font-variation-settings: "opsz" 14;
  font-size: 14px;
  letter-spacing: var(--ls-pill);
  display: flex; align-items: center; justify-content: center;
  line-height: normal;
}
.btn-buy {
  background: var(--c-ink);
  color: var(--c-text-light);
  border-radius: var(--r-btn);
  display: flex; align-items: center; justify-content: center;
}
.btn-login {
  background: transparent;
  color: var(--c-text-dark);
  border: 1px solid var(--c-black);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
}
.btn-buy span, .btn-login span {
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-variation-settings: "opsz" 14;
}

/* ---------- footer (copied verbatim from pricing.css — shared component) ---------- */
.p-neon {
  position: absolute;
  overflow: hidden;
  border-radius: 42px;
  background: var(--c-black);
}
.p-neon > img { width: 100%; height: 100%; object-fit: cover; }
.p-neon > .veil { position: absolute; inset: 0; background: var(--overlay-65); }

.pay { opacity: 0.64; }
.fcol p { line-height: normal; }
.fcol a { display: inline-block; }

/* phone hamburger bars */
.p-menu span { display: block; background: var(--grad-menu); border-radius: 2px; }
.bp-p .p-menu { background: none; border: 0; padding: 0; cursor: pointer; }

/* ============================================================
   KNOWLEDGE-PAGE-SPECIFIC RULES
   ============================================================ */

/* Hero notch panel: the black rounded panel + its top nav-connector tab +
   bottom heading cutout come from a single Figma "Subtract" vector shape
   (matching the technique pricing.html uses for its own hero card), so it is
   placed as one plain <img> (fill defaults to black via the SVG's own
   var(--fill-0, black)). */
.kb-hero-shape { display: block; }

/* Illustration frame: the "open book + neon icons" artwork is a single
   already-flattened/pre-cropped PNG (baked black background) — just cover
   the frame. */
.kb-illus { position: absolute; overflow: hidden; }
.kb-illus > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   PHONE / MOBILE  (Figma node 858:748 "Phone База знаний" — 493 x 1036)
   Fluid 1:1: every coordinate is expressed in the design-pixel unit
        --u = canvas-width / 493
   via inline custom props on .pp nodes:
        --l left, --t top, --w width, --h height, --fs font-size
   ============================================================ */
.bp-p img { max-width: none; }
.bp-p .pp {
  position: absolute;
  left: calc(var(--l, 0) * var(--u));
  top:  calc(var(--t, 0) * var(--u));
  font-size: calc(var(--fs, 16) * var(--u));
}
.bp-p .pp-b {
  width:  calc(var(--w, 0) * var(--u));
  height: calc(var(--h, 0) * var(--u));
}
.bp-p .p-neon       { border-radius: calc(25 * var(--u)); }
.bp-p .ls6           { letter-spacing: calc(0.6 * var(--u)); }
.bp-p .p-menu span  { height: calc(4 * var(--u)); width: calc(37 * var(--u)); border-radius: calc(2 * var(--u)); }
.bp-p .p-menu span + span { margin-top: calc(4 * var(--u)); }