/* ============================================================
   BULBVPN landing — main stylesheet
   Layout model: three fixed-width absolute "canvases" (one per
   Figma artboard) that are toggled by media queries so each
   breakpoint reproduces its own artboard 1:1.
     desktop canvas  1654 x 5807   shown >= 1134px
     tablet  canvas  1133 x 4734   shown 494px..1133px
     phone   canvas   493 x 5279   shown <= 493px
   Per-node coordinates (left/top/width/height/font-size) are kept
   inline in index.html as a direct transcription of the Figma
   absolute layout; this file owns the shared component styling,
   the typography roles and the breakpoint switching.
   ============================================================ */

/* ---------- self-hosted fonts ---------- */
/* DM Sans — variable (Latin + Latin-ext only on Google Fonts; no Cyrillic) */
@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;
}
/* Inter — body + Cyrillic companion for headings */
@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;
}
/* Cyrillic + Cyrillic-ext are VARIABLE (weight 100..900). DM Sans ships NO
   Cyrillic glyphs on Google Fonts (verified: only latin + latin-ext subsets
   exist), so RU headings render through DM Sans's Cyrillic companion — Inter.
   Loading the variable masters means those headings hit their real
   bold/extrabold/black weights instead of being faux-bolded from a 400 master. */
@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 ---------- */
*, *::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; }

/* visible keyboard focus */
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: 1654px; height: 5807px; }
.bp-t { width: 1133px; height: 4734px; }
/* phone canvas is now FLUID (see PHONE / MOBILE section below): it caps at the
   493px artboard width and scales down to ~360px; height is content-driven. */
.bp-p {
  width: 100%;
  max-width: 493px;
  height: auto;
  container-type: inline-size;
  --u: calc(100cqw / 493);      /* one Figma design pixel, fluid */
}

/* breakpoint switching — boundaries sit at the midpoints between the three
   target widths (493 / 1133 / 1654) so each renders robustly even if the
   capture engine is off by a pixel. */
.bp-d, .bp-t, .bp-p { display: none; }
@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; }
/* semantic landmarks that must not create a box (absolute children
   resolve against the .canvas, not the landmark) */
.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); }
.inter { font-family: var(--font-body); font-weight: var(--w-regular); line-height: normal; }
.inter-b { font-family: var(--font-body); font-weight: 700; line-height: normal; }

.c-w { color: var(--c-text-light); }
.c-b { color: var(--c-text-dark); }
.sub-track { letter-spacing: var(--ls-sub); }

/* Baseline match: the Figma source renders these absolutely-positioned text
   nodes with more leading above the cap height than the browser's
   line-height:normal does (Cyrillic falls through to a taller-ascent fallback
   in the source), so flowing text sits ~0.35em too high. Nudge it down to land
   on the reference baselines. Scoped to .dm/.inter flowing text only — the
   flex-centred nav pills and buy/login buttons are NOT affected. */
.dm, .inter { transform: translateY(0.35em); }
/* The "Bulb" header wordmark is Latin DM Sans (not the taller Inter-Cyrillic
   fallback the nudge above compensates for) and is meant to sit vertically
   centred in its logo pill via its own top offset, exactly like the Figma
   source (top:32px, leading:normal, no transform). Opt it out of the baseline
   nudge so it doesn't drop ~0.35em below the pill centre. Placed after the rule
   above so it wins at equal specificity. */
.logo-text { transform: translateY(0); }

/* cards */
.card-black { background: var(--c-black); }
.card-ink   { background: var(--c-ink); }
.uc-card {                       /* use-case card */
  background: var(--c-black);
  border: 1px solid var(--c-purple);
}
.r-card { border-radius: var(--r-card); }
.r-md   { border-radius: var(--r-card-md); }
.r-sm   { border-radius: var(--r-card-sm); }

/* nav pill + buttons */
.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;
}

/* "50+" stat gradient text */
.grad-stat {
  background: var(--grad-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- neon ambient backdrop ----------
   The brand look: vibrant diagonal neon streaks (chatgpt-bg.png) bleeding
   around the dark cards, darkened by a 65% black veil exactly as the Figma
   "Mask group" nodes do (img object-cover + rgba(0,0,0,.65) overlay). These
   sit BEHIND the solid-black cards; neon shows through the gaps / margins.
   Bands are confined to the hero / use-case / footer regions so the white
   "3 преимущества" and "50+ карта" sections stay white. */
.maskimg {
  background-image: linear-gradient(var(--overlay-65), var(--overlay-65)),
                    url("../assets/chatgpt-bg.png");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* per-band crops give each neon band a distinct slice of the streak art
   (legacy rectangular approximation — still used by the tablet/phone canvases) */
.neon-hero   { background-position: center 18%, center 18%; }
.neon-mid    { background-position: center 42%, center 42%; }
.neon-bottom { background-position: center 82%, center 82%; }

/* ---------- neon mask GROUPS (desktop, faithful) ----------
   Faithful reproduction of the Figma "Mask group" nodes: the chatgpt-bg photo
   (object-cover) + a 65% black veil, clipped by a rotated rounded-card alpha
   mask (mask-shape-*.svg) and rotated/centred inside a flex wrapper exactly as
   the Figma export does. The neon colour comes from the photo's own streaks
   showing through the card-shaped mask where the solid cards don't cover it. */
.neon-wrap { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: visible; }
.neon-rot  { flex: none; }
.neon-box  {
  position: relative;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;       mask-mode: alpha;
}
.neon-box > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; max-width: none;
}
.neon-box > .veil { position: absolute; inset: 0; background: var(--overlay-65); }
/* Tablet neon masks inlined as data-URIs: this engine does not rasterize
   external-file SVG masks (renders them as an empty/zero-alpha mask, hiding
   the whole neon-box), so the tablet canvas references the same mask-shape
   silhouettes through self-contained data-URIs. Scoped to .bp-t; the desktop
   canvas keeps its own inline url(assets/*.svg) references untouched. */
.bp-t .neon-box.nm12 { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221500%22%20height%3D%22842%22%20viewBox%3D%220%200%201500%20842%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M574%200C585.598%203.09244e-06%20595%209.40202%20595%2021C595%2039.9093%20610.329%2055.2383%20629.238%2055.2383H1458C1481.2%2055.2383%201500%2074.0423%201500%2097.2383V806.997L1499.99%20807.004C1500%20807.169%201500%20807.334%201500%20807.5C1500%20826.554%201484.55%20842%201465.5%20842H1177.5C1158.45%20842%201143%20826.554%201143%20807.5C1143%20807.256%201142.83%20807.052%201142.6%20807.009C1139.94%20788.901%201124.35%20775%201105.5%20775H394.5C375.655%20775%20360.057%20788.901%20357.4%20807.009C357.171%20807.053%20357%20807.257%20357%20807.5C357%20826.554%20341.554%20842%20322.5%20842H34.5C15.4462%20842%200%20826.554%200%20807.5C0%20807.334%200.00445804%20807.169%200.00683594%20807.004L0%20806.997V97.2383C0%2074.0423%2018.804%2055.2383%2042%2055.2383H352.762C371.671%2055.2383%20387%2039.9093%20387%2021C387%209.40203%20396.402%200%20408%200H574Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221500%22%20height%3D%22842%22%20viewBox%3D%220%200%201500%20842%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M574%200C585.598%203.09244e-06%20595%209.40202%20595%2021C595%2039.9093%20610.329%2055.2383%20629.238%2055.2383H1458C1481.2%2055.2383%201500%2074.0423%201500%2097.2383V806.997L1499.99%20807.004C1500%20807.169%201500%20807.334%201500%20807.5C1500%20826.554%201484.55%20842%201465.5%20842H1177.5C1158.45%20842%201143%20826.554%201143%20807.5C1143%20807.256%201142.83%20807.052%201142.6%20807.009C1139.94%20788.901%201124.35%20775%201105.5%20775H394.5C375.655%20775%20360.057%20788.901%20357.4%20807.009C357.171%20807.053%20357%20807.257%20357%20807.5C357%20826.554%20341.554%20842%20322.5%20842H34.5C15.4462%20842%200%20826.554%200%20807.5C0%20807.334%200.00445804%20807.169%200.00683594%20807.004L0%20806.997V97.2383C0%2074.0423%2018.804%2055.2383%2042%2055.2383H352.762C371.671%2055.2383%20387%2039.9093%20387%2021C387%209.40203%20396.402%200%20408%200H574Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); }
.bp-t .neon-box.nm15 { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221500%22%20height%3D%222457%22%20viewBox%3D%220%200%201500%202457%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1090.99%200C1106.22%200%201118.61%2012.153%201118.99%2027.29L1119.01%2028.7354C1119.39%2043.8724%201131.78%2056.0254%201147.01%2056.0254H1458C1481.2%2056.0254%201500%2074.8294%201500%2098.0254V2421.02C1500%202421.02%201500%202421.03%201499.99%202421.03C1499.99%202421.03%201499.99%202421.03%201499.99%202421.03C1499.99%202421.36%201500%202421.68%201500%202422.01C1500%202441.33%201484.33%202457%201465.01%202457H1177.99C1158.67%202457%201143%202441.33%201143%202422.01C1143%202421.93%201142.99%202421.86%201142.97%202421.79C1142.99%202421.36%201143%202420.93%201143%202420.5C1143%202399.79%201126.21%202383%201105.5%202383H394.5C373.789%202383%20357%202399.79%20357%202420.5C357%202420.93%20357.01%202421.36%20357.024%202421.79C357.009%202421.86%20357%202421.93%20357%202422.01C357%202441.33%20341.334%202457%20322.009%202457H34.9912C15.6662%202457%200.00015463%202441.33%200%202422.01C0%202421.68%200.00576317%202421.36%200.0146484%202421.03L0%202421.02V98.0254C0%2074.8294%2018.804%2056.0254%2042%2056.0254H358.987C374.217%2056.0254%20386.608%2043.8724%20386.991%2028.7354L387.009%2027.29C387.392%2012.153%20399.783%200%20415.013%200H1090.99Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221500%22%20height%3D%222457%22%20viewBox%3D%220%200%201500%202457%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1090.99%200C1106.22%200%201118.61%2012.153%201118.99%2027.29L1119.01%2028.7354C1119.39%2043.8724%201131.78%2056.0254%201147.01%2056.0254H1458C1481.2%2056.0254%201500%2074.8294%201500%2098.0254V2421.02C1500%202421.02%201500%202421.03%201499.99%202421.03C1499.99%202421.03%201499.99%202421.03%201499.99%202421.03C1499.99%202421.36%201500%202421.68%201500%202422.01C1500%202441.33%201484.33%202457%201465.01%202457H1177.99C1158.67%202457%201143%202441.33%201143%202422.01C1143%202421.93%201142.99%202421.86%201142.97%202421.79C1142.99%202421.36%201143%202420.93%201143%202420.5C1143%202399.79%201126.21%202383%201105.5%202383H394.5C373.789%202383%20357%202399.79%20357%202420.5C357%202420.93%20357.01%202421.36%20357.024%202421.79C357.009%202421.86%20357%202421.93%20357%202422.01C357%202441.33%20341.334%202457%20322.009%202457H34.9912C15.6662%202457%200.00015463%202441.33%200%202422.01C0%202421.68%200.00576317%202421.36%200.0146484%202421.03L0%202421.02V98.0254C0%2074.8294%2018.804%2056.0254%2042%2056.0254H358.987C374.217%2056.0254%20386.608%2043.8724%20386.991%2028.7354L387.009%2027.29C387.392%2012.153%20399.783%200%20415.013%200H1090.99Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); }


/* payment row opacity */
.pay { opacity: 0.64; }

/* footer column links */
.fcol p { line-height: normal; }
.fcol a { display: inline-block; }

/* object-fit helpers for framed images */
.cover { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }

/* phone hamburger bars */
.menu-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--grad-menu);
}

/* ============================================================
   PHONE / MOBILE  (Figma node 835:470 "Phone" — 493 x 3905)
   REPLACES the old phone artboard. Built FLUID 1:1: the whole
   layout is expressed in a single design-pixel unit
        --u = canvas-width / 493   (= 1 Figma px)
   driven by container-query units, so it reproduces the 493px
   artboard exactly, scales cleanly down to ~360px and caps /
   centres at 493px above. Single column, no JS, self-hosted
   fonts only. Only the phone breakpoint (<=812px) renders this;
   the desktop and tablet artboards above are untouched.
   ============================================================ */
.bp-p img { max-width: none; }
.bp-p .dm-th { font-weight: 200; }   /* DM Sans Thin / ExtraLight roles */
/* The mobile artboard is absolutely positioned to exact Figma tops, so it must
   NOT inherit the desktop/tablet flowing-text baseline nudge (.dm,.inter
   translateY). Opt every mobile node out; this layout sets its own offsets. */
.bp-p .dm, .bp-p .inter { transform: none; }

/* ---------- HERO ---------- */
.m-hero { position: relative; height: calc(518 * var(--u)); }
.m-hero__card {
  position: absolute;
  left: calc(16 * var(--u)); top: calc(15 * var(--u));
  width: calc(461 * var(--u)); height: calc(503 * var(--u));
  overflow: hidden; background: #000;
  -webkit-mask: url("../assets/m-hero-frame-mask.png") center / 100% 100% no-repeat;
          mask: url("../assets/m-hero-frame-mask.png") center / 100% 100% no-repeat;
}
.m-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.m-hero__logo {
  position: absolute; left: calc(52 * var(--u)); top: calc(36 * var(--u));
  width: calc(56 * var(--u)); height: calc(72 * var(--u)); object-fit: contain;
}
.m-hero__brand { position: absolute; left: calc(53 * var(--u)); top: calc(108 * var(--u)); font-size: calc(24 * var(--u)); }
.m-menu {
  position: absolute; left: calc(420 * var(--u)); top: calc(37 * var(--u));
  width: calc(37 * var(--u)); height: calc(20 * var(--u));
  background: none; border: 0; padding: 0; cursor: pointer;
}
.m-menu span {
  position: absolute; left: 0; width: calc(37 * var(--u)); height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u)); background: var(--grad-menu);
}
.m-menu span:nth-child(1) { top: 0; }
.m-menu span:nth-child(2) { top: calc(8 * var(--u)); }
.m-menu span:nth-child(3) { top: calc(16 * var(--u)); }
.m-cta {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(386 * var(--u)); width: calc(212 * var(--u)); height: calc(60 * var(--u));
  background: #84ff00; color: #000; border-radius: calc(30 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--w-extrabold);
  font-variation-settings: "opsz" 14; font-size: calc(22 * var(--u));
  letter-spacing: calc(1 * var(--u));
  border: calc(2 * var(--u)) solid rgba(255,255,255,.55);
  box-shadow:
    0 0 calc(14 * var(--u)) rgba(132,255,0,.55),
    0 0 calc(24 * var(--u)) rgba(236,9,248,.40),
    0 0 calc(34 * var(--u)) rgba(81,220,255,.32),
    0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35);
}

/* ---------- PLANS / "ВЫБЕРИ ПЛАН" ---------- */
.m-plans { position: relative; padding: calc(35 * var(--u)) 0 calc(34 * var(--u)); }
/* title now lives inside the hero, seated in the card's bottom tab-notch */
.m-plans__title {
  position: absolute; left: 0; right: 0; top: calc(478 * var(--u)); z-index: 2;
  text-align: center; font-size: calc(24 * var(--u));
}

.m-card { position: relative; margin: 0 auto calc(34 * var(--u)); border-radius: calc(42 * var(--u)); }
.m-card--best { width: calc(365 * var(--u)); height: calc(295 * var(--u)); margin-top: calc(22 * var(--u)); }
.m-card--dark { width: calc(333 * var(--u)); height: calc(265 * var(--u)); }
.m-card__bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.m-card--best { border: calc(8 * var(--u)) solid #84ff00; box-shadow: 0 0 calc(20 * var(--u)) rgba(132,255,0,.45); }
.m-card--best .m-card__bg { background: #000; }
.m-card--dark .m-card__bg { background: #000; }
.m-card__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* best card: let the magenta burst dominate over a dark base (green now reads as
   the frame, not a wash); dark cards: dim the burst to the reference's restraint */
.m-card--best .m-card__bg img { opacity: .9; }
.m-card--dark .m-card__bg img { opacity: .55; }

.m-badge {
  position: absolute; left: calc(96 * var(--u)); top: calc(-15 * var(--u));
  width: calc(190 * var(--u)); height: calc(35 * var(--u));
  background: url("../assets/m-best-badge.svg") center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  padding-left: calc(10 * var(--u)); color: #000; font-size: calc(18 * var(--u));
}
.m-card__title { position: absolute; font-size: calc(28 * var(--u)); line-height: 1; }
.m-card__price { position: absolute; font-size: calc(88 * var(--u)); line-height: 1; }
.m-card__sub   { position: absolute; font-size: calc(16 * var(--u)); }
.m-card--best .m-card__title { left: calc(50 * var(--u)); top: calc(56 * var(--u)); }
.m-card--best .m-card__price { left: calc(50 * var(--u)); top: calc(100 * var(--u)); }
.m-card--best .m-card__sub   { left: calc(293 * var(--u)); top: calc(150 * var(--u)); }
.m-card--dark .m-card__title { left: calc(36 * var(--u)); top: calc(40 * var(--u)); }
.m-card--dark .m-card__price { left: calc(36 * var(--u)); top: calc(84 * var(--u)); }
.m-card--dark .m-card__sub   { left: calc(150 * var(--u)); top: calc(134 * var(--u)); }
.m-card__buy {
  position: absolute; right: calc(10 * var(--u)); bottom: calc(14 * var(--u));
  width: calc(176 * var(--u)); height: calc(58 * var(--u));
  border-radius: calc(23 * var(--u)); background: #000;
  display: flex; align-items: center; justify-content: center; font-size: calc(18 * var(--u));
}
.m-card--best .m-card__buy { border: calc(3 * var(--u)) solid #84ff00; }

/* payment row + note under plans */
.m-pay-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: calc(14 * var(--u)); padding: 0 calc(40 * var(--u)); margin-top: calc(6 * var(--u));
}
.m-pay-row img { height: calc(22 * var(--u)); width: auto; object-fit: contain; opacity: .4; }
.m-pay-note {
  font-size: calc(20 * var(--u)); color: #000; opacity: .5;
  padding-left: calc(45 * var(--u)); margin-top: calc(20 * var(--u)); font-weight: 200;
}

/* ---------- FEATURES / "В ВАШЕЙ ПОДПИСКЕ" ---------- */
.m-features {
  position: relative; overflow: hidden; margin-top: calc(40 * var(--u));
  padding: calc(58 * var(--u)) 0 calc(70 * var(--u)); border-radius: calc(40 * var(--u)); background: #000;
}
.m-features__bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--overlay-65), var(--overlay-65)), url("../assets/m-neon-bg.png");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.m-features__title { position: relative; text-align: center; font-size: calc(24 * var(--u)); margin-bottom: calc(34 * var(--u)); }

.m-feat { position: relative; width: calc(412 * var(--u)); margin: 0 auto calc(20 * var(--u)); border-radius: calc(42 * var(--u)); overflow: hidden; }
.m-feat--pink  { background: #000; border: calc(2 * var(--u)) solid #ec09f8; height: calc(233 * var(--u)); }
.m-feat--unl   { background: url("../assets/m-unlimited-card.svg") center / 100% 100% no-repeat; height: calc(272 * var(--u)); }
.m-feat--union { background: url("../assets/m-install-union.svg")  center / 100% 100% no-repeat; height: calc(165 * var(--u)); }
.m-feat--tap   { height: calc(241 * var(--u)); }

/* security card */
.m-feat__title { position: absolute; left: calc(31 * var(--u)); top: calc(26 * var(--u)); line-height: 1.02; }
.m-feat__title .m-t1 { display: block; font-size: calc(40 * var(--u)); }
.m-feat__title .m-t2 { display: block; font-size: calc(27 * var(--u)); }
.m-feat__sub {
  position: absolute; left: calc(31 * var(--u)); top: calc(120 * var(--u)); width: calc(227 * var(--u));
  font-size: calc(16 * var(--u)); letter-spacing: calc(.48 * var(--u)); font-weight: 200; line-height: 1.25;
}
.m-ico { position: absolute; background-repeat: no-repeat; }
.m-ico--shield {
  left: calc(273 * var(--u)); top: calc(110 * var(--u)); width: calc(123 * var(--u)); height: calc(104 * var(--u));
  background-image: url("../assets/m-security-traffic.png"); background-size: 300% auto; background-position: 0% 50%;
}
/* unlimited card */
.m-ico--inf {
  left: calc(11 * var(--u)); top: calc(78 * var(--u)); width: calc(170 * var(--u)); height: calc(100 * var(--u));
  background-image: url("../assets/m-security-traffic.png"); background-size: 250% auto; background-position: 84% 50%;
}
.m-feat__title2 {
  position: absolute; right: calc(27 * var(--u)); top: calc(28 * var(--u)); width: calc(300 * var(--u));
  text-align: right; font-size: calc(28 * var(--u)); line-height: 1.05;
}
.m-feat__sub2 {
  position: absolute; right: calc(27 * var(--u)); top: calc(108 * var(--u)); width: calc(255 * var(--u));
  text-align: right; font-size: calc(16 * var(--u)); letter-spacing: calc(.48 * var(--u)); font-weight: 200; line-height: 1.25;
}
/* install card */
.m-install__title { position: absolute; left: 0; right: 0; top: calc(14 * var(--u)); text-align: center; font-size: calc(24 * var(--u)); }
.m-install__row {
  position: absolute; left: 0; right: 0; top: calc(56 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
}
.m-os {
  width: calc(64 * var(--u)); height: calc(85 * var(--u));
  background-image: url("../assets/m-install-icons-src.png"); background-repeat: no-repeat; background-size: 400% 200%;
}
.m-os--win  { background-position: 0% 0%; }
.m-os--andr { background-position: 33.333% 0%; }
.m-os--ios  { background-position: 66.666% 0%; }
.m-os--tv   { background-position: 66.666% 100%; }
.m-os--mac  { background-position: 100% 0%; }
/* one-tap card */
.m-tap__title { position: absolute; left: 0; right: 0; top: calc(20 * var(--u)); text-align: center; font-size: calc(24 * var(--u)); line-height: 1.2; }
.m-tap__icon { position: absolute; left: 50%; transform: translateX(-50%); top: calc(84 * var(--u)); width: calc(160 * var(--u)); height: calc(136 * var(--u)); object-fit: contain; }

/* ---------- WHY / "Почему Bulb VPN?" ---------- */
.m-why { position: relative; background: var(--c-page); padding: calc(40 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u)) calc(39 * var(--u)); }
.m-why__title { font-size: calc(24 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.m-why__p { color: #000; margin-bottom: calc(20 * var(--u)); }
.m-why__h { font-family: var(--font-heading); font-weight: var(--w-regular); font-variation-settings: "opsz" 14; font-size: calc(24 * var(--u)); }
.m-why__b { font-family: var(--font-heading); font-weight: 200; font-variation-settings: "opsz" 14; font-size: calc(20 * var(--u)); line-height: 1.3; }
.m-why__img { width: calc(445 * var(--u)); height: auto; display: block; margin: calc(8 * var(--u)) auto calc(14 * var(--u)); }

/* ---------- FOOTER (Figma 854 "END") ---------- */
.m-footer { position: relative; background: var(--c-page); padding: calc(20 * var(--u)) 0 calc(60 * var(--u)); }
.m-foot-card { background: #000; border-radius: calc(25 * var(--u)); margin: 0 auto; }
.m-foot-info { position: relative; width: calc(433 * var(--u)); height: calc(190 * var(--u)); }
.m-fcol { position: absolute; top: calc(13 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
.m-fcol--1 { left: calc(39 * var(--u)); }
.m-fcol--2 { left: calc(268 * var(--u)); }
.m-fh--res { margin-top: calc(15 * var(--u)); }
.m-foot-os { position: relative; width: calc(433 * var(--u)); height: calc(182 * var(--u)); margin-top: calc(20 * var(--u)); }
.m-os-row { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: calc(58 * var(--u)); }
.m-os-row--1 { top: calc(14 * var(--u)); }
.m-os-row--2 { top: calc(77 * var(--u)); }
.m-foot-os .m-os-row img { height: calc(49 * var(--u)); width: auto; object-fit: contain; }
/* payment row seated at the bottom of the (dark) OS card, exactly like the
   reference — the light/grey -sm glyphs read clearly against the black card */
.m-foot-pay {
  position: absolute; left: 0; right: 0; bottom: calc(18 * var(--u));
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: calc(10 * var(--u)); opacity: .85;
}
.m-foot-pay img { height: calc(13 * var(--u)); width: auto; object-fit: contain; }