/* ============================================================
   mojaGradinka — app.css
   Component-based styles. The HTML carries only id/class hooks;
   every visual rule lives here.

   Contents:
     1. Fonts & tokens
     2. Base / reset
     3. Motion (entrance, scroll-linked, dots)
     4. Components: buttons, links
     5. Layout: nav, hero, intro, features, live, info, cta,
        slants, form, footer
     6. Decorations (leaves, footer tree/bears)
     7. Responsive (tablet + mobile) & reduced motion
   ============================================================ */

/* ---------- 1. Fonts ---------- */
/* Registered under its own family name (not 'Caveat') so it can never
   collide/be shadowed by a browser-cached or later-loaded stock Caveat
   face; the ?v=1.007 query string on every source URL forces cache
   invalidation on this and every future font update instead of
   silently reusing a stale cached file. WOFF listed first (smaller,
   what every modern browser will actually pick) with TTF as the
   fallback source. */
@font-face { font-family: 'Caveat MK Custom'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Caveat-MK-Custom-Regular.woff?v=1.007') format('woff'), url('assets/fonts/Caveat-MK-Custom-Regular.ttf?v=1.007') format('truetype'); }
@font-face { font-family: 'Caveat MK Custom'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Caveat-MK-Custom-Bold.woff?v=1.007') format('woff'), url('assets/fonts/Caveat-MK-Custom-Bold.ttf?v=1.007') format('truetype'); }

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --forest: #1F5137;
  --forest-deep: #153B29;
  --amber: #F27740;
  --amber-deep: #C25F33;
  --cream: #F8F6F1;
  --sand: #FBF0DC;
  --mist: #EEF3EF;
  --ink: #282828;
  --muted: #55605A;
  --line: #E2E9E4;
  --gold: #F0B93E;
  --sky: #71BDE9;
  --sky-tint: #E9F4FB;

  /* type families */
  --font-body: 'Manrope', Helvetica, Arial, sans-serif;
  --font-script: 'Caveat MK Custom', cursive;
  --font-serif: 'Literata', Georgia, serif;
  --font-round: 'Fredoka', 'Manrope', sans-serif;

  /* fluid type scale — mobile floor → desktop cap, so hierarchy holds on phones */
  --fs-display-xl: clamp(72px, 15vw, 118px);   /* "Ние" */
  --fs-display-lg: clamp(60px, 13vw, 100px);   /* "Дојди" */
  --fs-display-md: clamp(52px, 11vw, 72px);    /* "Сè" */
  --fs-hero-title: clamp(38px, 8.5vw, 55px);
  --fs-hero-sub:   clamp(16px, 3.6vw, 20px);
  --fs-h2:         clamp(26px, 5vw, 34px);
  --fs-form-title: clamp(23px, 4.6vw, 30px);
  --fs-lead:       clamp(21px, 3.4vw, 26px);
  --fs-tag:        clamp(17px, 2.4vw, 20px);
  --fs-body:       clamp(15px, 1.8vw, 16.5px);
  --fs-card-title: 16.5px;
  --fs-card-text:  13.8px;

  /* layout */
  --wrap: 1240px;
  --gutter: 24px;

  /* motion */
  --ease-soft: cubic-bezier(.22,.9,.32,1);
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--cream); overflow-x: hidden; }
img { max-width: 100%; }

/* overflow-x:hidden lives on html/body (the real scrolling element), NOT
   here — putting it on .mg-page (a non-scrolling ancestor deep in the
   tree) silently breaks position:sticky for every descendant, including
   the pin+slide section below (a well-known CSS pitfall: overflow-x on a
   non-scroller ancestor forces overflow-y:auto too, which changes what
   sticky elements stick relative to). */
.mg-page {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  position: relative;
}

a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--amber); }

/* Keyboard-focus visibility — mouse/touch users never see this (no
   :focus-visible match on click), keyboard users always get a clear ring.
   Forest passes contrast (~8.5:1) against the page's cream/white
   backgrounds, which is where almost every focusable element lives; the
   footer is the one dark-background exception, so it gets its own
   gold ring below (gold reads ~7:1 on the footer's forest-deep, but
   under 2:1 on cream/white — the wrong colour for everywhere else). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
  border-radius: 4px;
}
.mg-footer :focus-visible { outline-color: var(--gold); }

/* Skip-to-content link — invisible until keyboard-focused (standard
   pattern), so it never changes the normal visual state of any page */
.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 1000;
  background: var(--forest); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

/* shared max-width section wrapper */
.mg-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 96px var(--gutter) 0;
  position: relative;
  scroll-margin-top: 24px;
}

/* Lenis — vendored here instead of loading the separate lenis.css
   stylesheet from the CDN (it was only these 4 rules, saving a
   render-blocking request) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 3. Motion ---------- */
[data-anim] { opacity: 0; }
[data-anim].in-view { animation-duration: 0.9s; animation-fill-mode: both; animation-timing-function: var(--ease-soft); }
[data-anim="fade-up"].in-view { animation-name: dcFadeUp; }
[data-anim="fade-down"].in-view { animation-name: dcFadeDown; }
[data-anim="zoom-in"].in-view { animation-name: dcZoomIn; }
@keyframes dcFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes dcFadeDown { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes dcZoomIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes dcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.dc-pulse { animation: dcPulse 2.4s ease-in-out infinite; }

[data-parallax] { will-change: transform; transform-box: fill-box; transform-origin: center; }
[data-scrolldrop], [data-scrollslide] { will-change: transform; }

/* Floating dots */
.mg-dots {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1400px;
  pointer-events: none;
  z-index: 11;
}
.mg-dot { position: absolute; }
.dc-dot-el {
  display: block;
  position: relative;
  border-radius: 50%;
  will-change: transform;
  filter: blur(0.3px);
  box-shadow: 0 6px 16px rgba(31,81,55,0.10), inset 0 0 8px rgba(255,255,255,0.35);
  opacity: 0.9;
  animation: dcFloat 7s ease-in-out infinite;
}
.dc-dot-el::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%);
}
@keyframes dcFloat {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(4px, -9px) scale(1.03); }
  50%  { transform: translate(-3px, -15px) scale(0.99); }
  75%  { transform: translate(-5px, -7px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}
/* per-dot placement + look */
.mg-dot--1 { left: 8%;  top: 140px; }
.mg-dot--2 { left: 3%;  top: 340px; }
.mg-dot--3 { left: 22%; top: 480px; }
.mg-dot--4 { left: 88%; top: 260px; }
.mg-dot--5 { left: 27%; top: 60px; }
.mg-dot--6 { left: 68%; top: 380px; }
.mg-dot--7 { left: 93%; top: 20px; }
.mg-dot--1 .dc-dot-el { width: 14px; height: 14px; background: #6ECD92; animation-delay: 0s;   animation-duration: 6.5s; }
.mg-dot--2 .dc-dot-el { width: 12px; height: 12px; background: #78A7C2; animation-delay: 1.2s; animation-duration: 7.5s; }
.mg-dot--3 .dc-dot-el { width: 14px; height: 14px; background: #FA7B7A; animation-delay: 2.1s; animation-duration: 6.8s; }
.mg-dot--4 .dc-dot-el { width: 14px; height: 14px; background: #CB9CFF; animation-delay: 3s;   animation-duration: 7.2s; }
.mg-dot--5 .dc-dot-el { width: 34px; height: 34px; background: #FFDFC0; animation-delay: .6s;  animation-duration: 8.4s; }
.mg-dot--6 .dc-dot-el { width: 34px; height: 34px; background: #9ACCF4; animation-delay: 1.8s; animation-duration: 9s; }
.mg-dot--7 .dc-dot-el { width: 34px; height: 34px; background: #F3DBFF; animation-delay: 2.6s; animation-duration: 8.8s; }

/* ---------- 4. Components: buttons ---------- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform .28s var(--ease-soft), box-shadow .28s var(--ease-soft),
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* will-change only while a transform is actually about to run — every
   .btn on the page (nav CTA, form submit, pricing cards, ...) doesn't
   need its own persistent compositor layer just sitting idle */
.btn:hover, .btn:focus-visible { will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--amber); color: #fff; font-size: 15.5px; padding: 15px 30px; }
.btn--primary:hover { background: var(--amber-deep); color: #fff; box-shadow: 0 12px 26px rgba(242,119,64,0.38); }

.btn--secondary { background: #fff; color: var(--forest); border: 2px solid var(--line); font-size: 15.5px; padding: 13px 28px; }
.btn--secondary:hover { border-color: var(--forest); color: var(--forest); box-shadow: 0 10px 22px rgba(31,81,55,0.14); }

.btn--sm { font-size: 14px; padding: 12px 24px; }

/* links */
.nav-link { position: relative; font-size: 14.5px; font-weight: 700; color: var(--forest); transition: color .2s ease; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: currentColor; transition: width .25s var(--ease-soft);
}
.nav-link:hover { color: var(--amber); }
.nav-link:hover::after { width: 100%; }

.text-link { display: inline-block; font-size: 14px; font-weight: 700; color: var(--amber); transition: color .2s ease, transform .2s ease; }
.text-link:hover { color: var(--amber-deep); transform: translateX(2px); }

.mg-inline-link { color: var(--forest); font-weight: 700; }
.mg-inline-link:hover { color: var(--amber); }

.footer-link { display: inline-block; color: rgba(255,255,255,0.82); font-size: 14px; transition: color .2s ease, transform .2s ease; }
.footer-link:hover { color: var(--gold); transform: translateX(3px); }

.mg-accent { font-family: var(--font-round); font-weight: 600; color: var(--amber); }

/* ---------- 5. Nav ---------- */
.mg-nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 30;
}
.mg-nav__logo { height: 26px; display: block; }
.mg-nav__links { display: flex; align-items: center; gap: 30px; }

/* ---------- Hero ---------- */
.mg-hero-section {
  max-width: var(--wrap);
  margin: 8px auto 0;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 10;
}
.mg-hero {
  position: relative;
  height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 4px;
}
.mg-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-hero__fade { position: absolute; top: 0; bottom: 0; width: 18%; pointer-events: none; }
.mg-hero__fade--left  { left: 0;  background: linear-gradient(to right, var(--cream) 0%, rgba(248,246,241,0) 100%); }
.mg-hero__fade--right { right: 0; background: linear-gradient(to left,  var(--cream) 0%, rgba(248,246,241,0) 100%); }
.mg-hero__fade--top    { bottom: auto; left: 0; right: 0; width: auto; height: 120px; background: linear-gradient(to bottom, var(--cream) 0%, rgba(248,246,241,0) 100%); }
.mg-hero__fade--bottom { top: auto; left: 0; right: 0; width: auto; height: 140px; background: linear-gradient(to top, var(--cream) 0%, rgba(248,246,241,0) 100%); }

.mg-hero__badge {
  position: relative;
  width: 720px;
  max-width: 96%;
  aspect-ratio: 1 / 1;
  background-image: url('assets/center-circle.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 20px 60px 0;
}
/* now the page's H1 — reset the browser's default h1 margin so the
   visual layout stays identical to when this was a plain div */
.mg-hero__title { margin: 0; font-family: var(--font-script); font-feature-settings: normal; font-variant-ligatures: normal; font-size: var(--fs-hero-title); font-weight: 700; color: var(--forest); line-height: 1.05; }
/* now a <span> nested inside the H1 (was a sibling div) — display:block
   keeps the exact same "own line, 8px below" look */
.mg-hero__sub { display: block; margin-top: 8px; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-hero-sub); font-weight: 500; color: var(--forest); }
/* top/left are free fine-tune handles for the mece only — negative top = up,
   positive top = down; negative left = left, positive left = right.
   left: -4px corrects the fact that the bear+board artwork inside
   mece-skirol.png isn't centered in its own canvas (it sits ~2.3% right
   of center), so this re-centers the character on the CTA button below it */
.mg-hero__mece { position: relative; top: -17px; left: -6px; margin-top: 34px; width: 185px; }
.mg-hero__mece img { display: block; width: 100%; height: auto; margin: 0 auto; }
/* CTA lifted above everything so it can never tuck under the next section —
   size/padding come from .btn--sm (same class the nav's "Закажи демо" uses),
   so the two buttons always look identical */
.mg-hero__cta { position: relative; top: -38px; z-index: 20; margin-top: 38px; }
/* Mobile-only scroll cue (two down-chevrons) that replaces the CTA button
   below the mece on narrow screens — hidden here by default (desktop/
   tablet keep the "Дознај зошто" button); the ≤640px block below is what
   actually shows it. Transparent/borderless per spec, sized to a full
   44x44 touch target even though the visible icon is smaller/lighter
   than the button it replaces. */
.mg-hero__scroll-cue {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin: 6px auto 0;
  background: none; border: none; padding: 0;
  color: var(--amber);
  cursor: pointer;
  z-index: 20;
}
@keyframes mgScrollCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.mg-hero__scroll-cue svg { animation: mgScrollCue 1.8s ease-in-out infinite; }

/* ---------- Intro (Ние) ---------- */
.mg-intro__text { margin: 16px 0 0; font-size: var(--fs-body); line-height: 1.7; color: var(--muted); max-width: 56ch; }
/* Brand mark accent: the "G" in "mojaGradinka" matches the amber used
   elsewhere for the brand mark (nav/footer logo, hint text) — desktop and mobile alike */
.mg-intro__brand-g { color: var(--amber); }

/* ---------- Features (Сè) ---------- */
.mg-features { margin-top: -3px; padding-bottom: 100px; overflow: hidden; }
.mg-features__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* two-column head used only by the "Сè" section itself — "Зошто
   mojaGradinka?" / "Безбедност" reuse the plain .mg-features__head above */
.mg-features__head--se { justify-content: space-between; align-items: flex-start; gap: 32px; }
.mg-features__intro { max-width: 600px; }
.mg-features__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); margin-bottom: 10px; }
.mg-features__heading { margin: 0; line-height: 1.15; }
.mg-features__heading-script {
  font-family: var(--font-script); font-feature-settings: normal; font-variant-ligatures: normal; font-weight: 700; font-size: clamp(30px, 5vw, 42px); color: var(--forest);
  /* text-underline-offset in em (not the old fixed 8px) so the gap
     below descenders scales with font-size instead of staying flat —
     a flat px offset was fine at mobile's 30px floor (where this
     clamp() bottoms out) but proportionally too small once the same
     clamp() grows toward its 42px desktop ceiling, letting the line
     clip into descenders like "д"/"р". 0.267em matches 8px at exactly
     the 30px mobile size (8/30), so mobile is pixel-identical to
     before and every larger size now gets a proportionally bigger gap. */
  text-decoration: underline; text-decoration-color: #FEC21B; text-decoration-thickness: 5px; text-underline-offset: 0.267em;
}
.mg-features__heading-sub { display: block; margin-top: 6px; font-family: var(--font-round); font-weight: 700; font-size: clamp(20px, 3.6vw, 27px); color: var(--ink); }
.mg-features__lead { margin: 16px 0 0; max-width: 52ch; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.mg-features__lead strong { color: var(--ink); font-weight: 700; }

/* Градинки / Родители slider — pill tabs (top-right) switch which tile
   group is showing; a horizontal slide track does the actual
   transition. No prev/next arrows any more — each group already shows
   all six of its tiles at once, so there was nothing left to page
   through; the pill tabs (and touch swipe on the track) are the only
   way to switch groups now. */
.mg-features__slider { margin-top: 44px; }
/* right-hand column of the head row: the hint text/arrow sits at the
   top (level with the heading), the pill tabs just below — right
   where the arrow points, and small enough not to dominate the row */
.mg-features__head-side { flex: 1; display: flex; flex-direction: column; }
.mg-features__hint {
  margin: 35px auto 0; max-width: 220px;
  font-family: var(--font-script); font-feature-settings: normal; font-variant-ligatures: normal; font-style: italic; font-size: 21px; color: var(--amber);
  text-align: center; line-height: 1.3;
}
.mg-features__hint-arrow { display: block; margin: 4px auto 0; color: var(--amber); }
.mg-features__tabs { display: flex; gap: 6px; justify-content: center; margin-top: 10px; transform: translateX(170px); }
.mg-features__tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: var(--mist); color: var(--muted);
  font-family: inherit; font-weight: 700; font-size: 12.5px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mg-features__tab svg { flex: none; }
.mg-features__tab:hover { color: var(--forest); }
.mg-features__tab.is-active { background: var(--forest); color: #fff; box-shadow: 0 8px 18px rgba(31,81,55,0.28); }

/* the overflow:hidden that clips the sliding track lives on this inner
   -clip wrapper now, not -viewport itself */
.mg-features__slider-viewport { position: relative; }
.mg-features__slider-clip { overflow: hidden; border-radius: 22px; }
/* touch-action:pan-y — lets the browser keep handling vertical page
   scroll natively (no jank/delay from us), while leaving horizontal
   gestures free for the swipe handler in app.js to read via touchmove/
   pointermove without the browser also trying to pan/scroll on them */
.mg-features__slider-track { display: flex; transition: transform .5s var(--ease-soft); touch-action: pan-y; }
.mg-features__slider-track > .mg-tiles { flex: 0 0 100%; width: 100%; margin-top: 0; }

/* Prev/next group switcher — brush-stroke arrows (cropped from
   assets/strelki.png into their own transparent-background files).
   .mg-section maxes out at var(--wrap) (1240px) with only 24px of its
   own side padding beyond that, so there's no free margin next to the
   tile grid to put an overlay arrow in without it sitting on top of a
   tile's own coloured shape/text at any width below roughly 1440px —
   confirmed empirically (the previous absolute-overlay version
   clipped straight through "Паметни финансии"'s text and crowded
   "Безбедност и заштита"'s icon). Below that, the two buttons instead
   sit in a plain row under the whole grid — .mg-features__slider-nav-
   row is a normal flex row in the default (mobile-first) rules; the
   buttons themselves are position:static there, so nothing needs
   duplicating, just re-pointed by the wide-viewport override below.
   Only once the viewport is wide enough that .mg-section itself has
   real margin outside its own max-width (>=1440px gives >=100px per
   side) does .mg-features__slider-nav-row switch to display:contents
   (removing its own box so its children escape to be positioned by
   .mg-features__slider-viewport, position:relative, instead) and the
   buttons become absolutely positioned just outside the grid's own
   edge — never overlapping a tile at any width. */
.mg-features__slider-nav-row { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 20px; }
.mg-features__slider-nav {
  padding: 18px 14px; border: none; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0.85;
  transition: transform .2s ease, opacity .2s ease;
}
.mg-features__slider-nav img { display: block; width: 22px; height: auto; }
.mg-features__slider-nav:hover, .mg-features__slider-nav:focus-visible { opacity: 1; }
.mg-features__slider-nav--prev:hover { transform: translateX(-3px); }
.mg-features__slider-nav--next:hover { transform: translateX(3px); }

@media (min-width: 1440px) {
  /* .mg-features itself carries overflow:hidden (unrelated to this —
     it's the section's own general clip). It doesn't distinguish
     between children, so it was silently clipping the arrows the
     instant they moved outside the grid's own box, however they were
     positioned. Safe to open up only here: nothing else in the
     section is positioned to rely on being clipped at its edge (the
     leaf decoration sits well inside, at a fixed inset) — checked via
     full-page screenshots before/after, no regressions. */
  .mg-features { overflow: visible; }
  .mg-features__slider-nav-row { display: contents; }
  .mg-features__slider-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  }
  .mg-features__slider-nav--prev { left: -64px; }
  .mg-features__slider-nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
  .mg-features__slider-nav--next { right: -64px; }
  .mg-features__slider-nav--next:hover { transform: translateY(-50%) translateX(3px); }
}

/* bottom decorative row — small leaf tucked bottom-left, handwritten-style
   closing line centered next to it */
.mg-features__note {
  margin: 44px 0 0; text-align: center;
  font-family: var(--font-script); font-feature-settings: normal; font-variant-ligatures: normal; font-style: italic; font-size: 21px; line-height: 1.4;
  color: var(--muted);
}
.mg-features__note span { color: var(--amber); }
.mg-features__leaf { position: absolute; left: 380px; top: 80px; width: 60px; height: auto; opacity: 0.85; pointer-events: none; transform: rotate(12deg); }

.mg-grid { display: grid; gap: 18px; }
.mg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Ние's trust row: calm/clean by design — no shared card or divided
   bar behind the four items at all, just each item's own icon sat on
   a small soft organic blob (same restrained-tint approach as Сè's
   tiles below, for visual continuity with the playful illustrations),
   title and description sitting directly on the section's own plain
   background. Text is centered under the icon (not beside it) since
   there's no card edge to align a left-reading row against. */
.mg-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; text-align: center; }
.mg-trust-item__icon { position: relative; width: 104px; height: 104px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.mg-trust-item__icon::before { content: ""; position: absolute; inset: 9%; z-index: 0; }
.mg-trust-item__icon img { position: relative; z-index: 1; display: block; width: 88%; height: auto; object-fit: contain; }
.mg-trust-item h3 { margin: 0; font-family: var(--font-round); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--forest); }
.mg-trust-item p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
/* 4 items, 4 restrained palette tints — one each, no repeats needed */
.mg-trust-item:nth-child(1) .mg-trust-item__icon::before { background: rgba(254,194,27,.24); border-radius: 63% 37% 54% 46% / 43% 65% 35% 57%; }
.mg-trust-item:nth-child(2) .mg-trust-item__icon::before { background: rgba(113,189,233,.26); border-radius: 45% 55% 60% 40% / 55% 40% 60% 45%; }
.mg-trust-item:nth-child(3) .mg-trust-item__icon::before { background: rgba(242,119,64,.18); border-radius: 58% 42% 40% 60% / 46% 54% 46% 54%; }
.mg-trust-item:nth-child(4) .mg-trust-item__icon::before { background: rgba(31,81,55,.15); border-radius: 40% 60% 55% 45% / 60% 35% 65% 40%; }

/* Сè's tile grid ("Варијанта 3" reference — compact asymmetric tiles,
   each its own softly-tinted, irregularly-shaped panel with a large
   icon that's part of the composition rather than centered decor).
   Six tiles per group (2 across x 3 rows on desktop).
   The coloured shape behind each tile is a real SVG path now (an
   .mg-tile__shape first-child, absolutely positioned behind the icon/
   text via z-index:-1), not border-radius — border-radius can only
   round a rectangle's corners, it can't bow or slant an edge, and the
   reference's tiles have genuinely curved, non-parallel top/bottom
   edges and slanted inner edges along the gap. Each path is its own
   hand-drawn silhouette (viewBox 0 0 100 100, preserveAspectRatio=
   "none" so it stretches to fill whatever height the tile's real text
   ends up needing, instead of a fixed-aspect image that could crop or
   leave gaps). Every one of the 6 grid positions gets its OWN colour +
   shape + icon side (not a repeating formula): 4 palette tints (gold/
   sky/peach/mint, the 4th a pale tint of --forest) cycle so no colour
   repeats in the same column, and only 2 of the 6 keep icon-left —
   the rest mirror to icon-right (row-reverse; text itself always
   stays left-aligned) — an asymmetric, not alternating, split like
   the reference. */
.mg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; margin-top: 44px; }
.mg-tile { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 24px; overflow: visible; }
.mg-tile__shape { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
/* Tiles 2/4/6 (icon-right, text starts at the tile's own left padding
   edge): the shape's left edge was landing too close to where the
   title/description actually start, so it read as barely backed by
   colour. Stretching the shape's own box 20px further left (right
   edge left untouched, via preserveAspectRatio="none" on the svg
   inside) — not moving the text/padding/grid at all — pushes the
   whole brush-stroke silhouette left with it, same path just wider,
   so the organic contour is preserved rather than replaced with a
   straight extension. */
.mg-tile:nth-child(2) .mg-tile__shape,
.mg-tile:nth-child(4) .mg-tile__shape,
.mg-tile:nth-child(6) .mg-tile__shape { left: -20px; width: calc(100% + 20px); }
.mg-tile__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 128px; }
.mg-tile__icon img { display: block; width: 100%; height: auto; object-fit: contain; }
.mg-tile__body { min-width: 0; }
.mg-tile__body h3 { margin: 0; font-family: var(--font-round); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--forest); }
.mg-tile__body p { margin: 8px 0 0; font-size: 13.8px; line-height: 1.55; color: var(--muted); }

/* 1: gold, icon-left, icon nudged up/left so it slightly overhangs the
   shape's own top-left corner */
.mg-tile:nth-child(1) .mg-tile__icon { margin: -16px 0 -10px -12px; }
/* 2: sky, icon-right, overhangs the top-right corner */
.mg-tile:nth-child(2) { flex-direction: row-reverse; }
.mg-tile:nth-child(2) .mg-tile__icon { margin: -14px -14px -10px 0; }
/* 3: peach, icon-right, overhangs the bottom-right corner */
.mg-tile:nth-child(3) { flex-direction: row-reverse; }
.mg-tile:nth-child(3) .mg-tile__icon { margin: -8px -12px -16px 0; }
/* 4: mint (pale --forest tint), icon-right, overhangs the top-right corner */
.mg-tile:nth-child(4) { flex-direction: row-reverse; }
.mg-tile:nth-child(4) .mg-tile__icon { margin: -16px -12px -8px 0; }
/* 5: sky, icon-left this time (only repeat colour, but shape + icon
   side both differ from tile 2, and it isn't in the same column) */
.mg-tile:nth-child(5) .mg-tile__icon { margin: -10px 0 -14px -14px; }
/* 6: peach, icon-right, overhangs the bottom-right corner */
.mg-tile:nth-child(6) { flex-direction: row-reverse; }
.mg-tile:nth-child(6) .mg-tile__icon { margin: -12px -10px -10px 0; }

/* ---------- Live (Во живо) ---------- */
/* no card look here anymore — it sits directly on .mg-scenes__frame's own
   mist background now, so all three scroll-scenes read as one flat colour */
/* padding:0 (not the old 0 40px 56px) — #dojdi has no equivalent wrapper
   at all and sits straight on .mg-section's own gutter, so the extra
   40px/56px here was pure leftover inset "Дојди" never had, making
   this section's content narrower and left-shifted relative to it at
   every width, not just mobile (the ≤640px block below already zeroed
   the *horizontal* padding for exactly this reason — this closes the
   same gap at desktop/tablet too). */
.mg-live__card { position: relative; padding: 0; overflow: hidden; }
/* no margin-bottom here — .mg-live__promo-text's own 18px margin-top
   provides the gap, matching the ~16px gap the other two scenes use */
.mg-live__title { margin: 0; font-size: var(--fs-h2); font-weight: 700; color: var(--forest); }
/* mirrors .mg-cta__row / .mg-cta__col exactly, so "Мобилна апликација"
   and "Дојди" read as the same layout — same gap, same column sizing,
   heading inside the text column instead of centered above the row */
.mg-live__row { position: relative; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
/* ~58/42 split (content/phone) once both columns have room to breathe
   (1024px+) — inside the requested 55-60% / 40-45% range. flex-grow
   ratio (1.4 : 1, paired with .mg-cta__media's flex-grow:1 below)
   rather than percentage flex-basis on purpose: percentage flex-basis
   combined with flex-wrap here was wrapping to a single column way
   earlier than it needed to (confirmed at 768px — .mg-cta__media's own
   340px min-width floor plus a 58%-basis text column summed to more
   than the row's available width, even though 360px+340px clearly
   still fits) — flex-basis:0% sidesteps that entirely, matches
   .mg-cta__media's own flex-basis below exactly, so "Мобилна
   апликација" and "Дојди" size their two columns identically */
.mg-live__promo { flex: 1.4 1 0%; min-width: 300px; }
.mg-live__promo-text { margin: 18px 0 0; font-size: var(--fs-body); line-height: 1.7; color: var(--muted); max-width: 46ch; }
.mg-live__promo-features { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.mg-live__promo-feature { display: flex; align-items: flex-start; gap: 14px; }
.mg-live__promo-icon { flex: none; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.mg-live__promo-icon--green { background: var(--forest); box-shadow: 0 8px 18px rgba(31,81,55,0.28); }
.mg-live__promo-icon--amber { background: var(--amber); box-shadow: 0 8px 18px rgba(242,119,64,0.28); }
.mg-live__promo-icon--sand { background: var(--sand); }
/* 3D icon PNGs (Мобилна апликација / Дојди rows) — same icon set as the
   feature cards; no colored background square needed, the art carries
   its own colour, so just fit it inside the existing 42px slot */
.mg-live__promo-icon--img { background: none; box-shadow: none; object-fit: contain; }
.mg-live__promo-feature-title { font-size: 15.5px; font-weight: 700; color: var(--forest); }
.mg-live__promo-feature-text { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.mg-live__promo-badges { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.mg-live__promo-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
}
/* real iPhone mockup PNGs (assets/phone-mockup-*.png) — fixed height so
   both scenes' phones line up at exactly the same size/position */
.mg-scene-phone { display: block; height: 560px; width: auto; max-width: 100%; }

/* ---------- Pricing (Понуди) ---------- */
/* Full-bleed soft-blue section background — breaks up the long run of
   near-identical cream/mist sections above it. .mg-pricing is itself
   the max-width-constrained box (it carries .mg-section directly, no
   separate inner wrapper like the form section has), so a plain
   background here would only colour the centered 1240px column, not
   the full viewport width; the ::before pseudo fakes full-bleed
   instead — 100vw wide, centered via left:50%/translateX(-50%), pinned
   to this element's own top/bottom (not the viewport's), sat behind
   the real content with z-index:-1. isolation:isolate gives
   .mg-pricing its own stacking context so that negative z-index only
   sinks the pseudo below THIS section's children, not below unrelated
   content elsewhere on the page. */
/* padding-bottom absorbs the gap the slant below used to get from its
   own margin-top: that margin sat OUTSIDE .mg-pricing's box, so once
   this section had its own background it left a mismatched sliver of
   plain page colour showing through between the two. Moving the same
   88px in here instead keeps the identical visual gap but inside the
   coloured box, so the sky-tint now runs unbroken into the slant. */
.mg-pricing { isolation: isolate; padding-bottom: 88px; }
.mg-pricing::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); background: var(--sky-tint); z-index: -1;
}
.mg-pricing__grid { margin-top: 35px; align-items: stretch; }
.mg-pricing-plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.mg-pricing-plan:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(31,81,55,0.12); }
/* same light background as "Закажи демо" (var(--mist)) instead of a solid
   dark fill — text stays the normal dark colors (no more white-on-dark
   overrides needed), border keeps it visually marked as the featured plan */
.mg-pricing-plan--featured { background: var(--mist); border-color: var(--forest); transform: scale(1.03); }
.mg-pricing-plan--featured:hover { transform: scale(1.03) translateY(-6px); box-shadow: 0 22px 46px rgba(31,81,55,0.14); }
.mg-pricing-plan__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-size: 13px; font-weight: 700; padding: 7px 18px; border-radius: 999px;
  white-space: nowrap;
}
.mg-pricing-plan__name { text-align: center; font-size: 28px; font-weight: 800; color: var(--forest); }
.mg-pricing-plan__desc { margin-top: 6px; text-align: center; font-size: 15px; color: var(--muted); }
.mg-pricing-plan__features { list-style: none; margin: 30px 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.mg-pricing-plan__features li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink); }
.mg-pricing-plan__features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--forest); font-weight: 700; }
/* margin-top:auto (not a fixed 28px) pins the button flush to the
   card's bottom regardless of how many feature lines precede it —
   redundant with .mg-pricing-plan__features's own flex:1 above in the
   common case (that already consumes the leftover space), but this is
   what actually guarantees every card's CTA lands at the same Y once
   cards get short enough (landscape mobile) that flex:1 alone leaves
   less obviously-equal spacing to work with */
.mg-pricing-plan__cta { margin-top: auto; width: 100%; text-align: center; transform: translateY(10px); }
/* .btn:hover/:active below set an absolute translateY that would
   otherwise fully replace this button's own +10px offset (same
   specificity, .btn's rule just loses by source order) — jumping
   from +10px to -2px on hover looked like the button leaping up far
   more than every other button on the page. Composing the same -2px
   hover lift / 0 active-press on top of the +10px baseline instead
   keeps the motion identical in size to every other .btn, just
   anchored 10px lower. */
.mg-pricing-plan__cta:hover { transform: translateY(8px); }
.mg-pricing-plan__cta:active { transform: translateY(10px); }
/* pagination dots only exist for the mobile swipe carousel (below) —
   hidden by default so desktop/tablet never see them */
.mg-pricing__dots { display: none; }
/* first-visit swipe hint — same story as the dots, mobile-carousel-only */
.mg-pricing__swipe-hint { display: none; }
.mg-pricing__footnote { margin-top: 32px; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- CTA (Дојди) ---------- */
/* align-items:center vertically centers the text column against the
   taller phone mockup (was flex-start, which top-aligned both — per
   "Мобилна апликација" request, both scenes now center instead) */
.mg-cta__row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.mg-cta__col { flex: 1.4 1 0%; min-width: 300px; }
.mg-cta__title { margin: 0; font-size: var(--fs-h2); font-weight: 700; color: var(--forest); }
.mg-cta__text { margin: 16px 0 0; font-size: var(--fs-body); line-height: 1.7; color: var(--muted); max-width: 48ch; }
.mg-cta__features { margin-top: 26px; }
/* ~42% (pairs with .mg-live__promo/.mg-cta__col's 58% above) */
.mg-cta__media { flex: 1 1 0%; min-width: 340px; display: flex; align-items: center; justify-content: center; }

/* ---------- Slants ---------- */
.mg-slant { position: relative; }
.mg-slant svg { display: block; width: 100%; height: 40px; }
/* background matches Понуди's new sky-tint (not the mist wedge drawn on
   top of it) — the area above the diagonal wedge sits directly under
   Понуди's own bottom edge, so it needs to read as a continuation of
   that section's colour, not fall back to see-through/cream */
.mg-slant--to-form { background: var(--sky-tint); }
/* pre-fills the seam with the footer's own colour so a sub-pixel rounding
   gap in the SVG (visible as a hairline in some browsers) never shows the
   lighter mist background peeking through underneath it */
.mg-slant--to-footer { background: var(--forest-deep); }

/* ---------- Form ---------- */
.mg-form-section { background: var(--mist); }
.mg-form-section__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 100px;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.mg-form__title { margin: 0; font-size: var(--fs-form-title); font-weight: 800; color: var(--forest); text-align: center; }
.mg-form__sub { margin: 12px 0 0; font-size: 15.5px; color: var(--muted); text-align: center; }
.mg-form {
  margin-top: 28px; width: 100%; max-width: 460px;
  background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
/* min-width:0 overrides the flex default of min-width:auto, which was
   letting the <input>'s own browser-default intrinsic width act as a
   floor — inside .mg-form__row that floor was wider than an even 50/50
   split minus the 14px gap, so "Број на деца" was overflowing past the
   form's right edge instead of shrinking to fit beside "Телефон" */
.mg-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mg-field__label { font-size: 13px; font-weight: 700; color: var(--forest); }
.mg-input {
  height: 46px; font-family: inherit; font-size: 15px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line); color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mg-input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(31,81,55,0.12); }
.mg-select { background: #fff; }
.mg-form__row { display: flex; gap: 14px; }
/* honeypot — off-screen, not display:none, so simple bots that only check
   visibility:hidden/display:none still fall for it */
.mg-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mg-form__privacy { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mg-form__privacy a { color: var(--forest); font-weight: 600; }
.mg-form__submit { margin-top: 6px; font-size: 16px; padding: 15px 24px; }
.mg-form__submit[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
/* helper: same quiet, small-print style .mg-form__privacy already used —
   sits right under the button so it still reads as "one unit" with it */
.mg-form__helper { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mg-form__fallback { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mg-form__fallback a { color: var(--forest); font-weight: 600; }
.mg-form__copy {
  display: inline-block; margin-left: 2px; padding: 2px 9px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--forest);
  background: var(--mist); border: none; border-radius: 999px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.mg-form__copy:hover { background: var(--forest); color: #fff; }

/* ---------- Footer ---------- */
.mg-footer { background: var(--forest-deep); }
.mg-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); color: #fff; }
.mg-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 8px; }
.mg-footer__col { display: flex; flex-direction: column; gap: 14px; }
.mg-footer__heading { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
/* Instagram: icon + handle in the same link, own hover colour (the
   brand's yellow, not the shared --gold footer-link hover) — no
   gradient, just a plain colour swap like every other footer link */
.mg-footer__instagram { display: inline-flex; align-items: center; gap: 7px; }
.mg-footer__instagram:hover { color: #FEC21B; }
.mg-footer__bottom {
  margin-top: 40px; padding: 24px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.mg-footer__logo { height: 22px; display: block; opacity: 0.9; }
.mg-footer__copy { font-size: 13px; color: rgba(255,255,255,0.45); }

/* ---------- 6. Decorations ---------- */
.mg-leaf { position: absolute; height: auto; pointer-events: none; }
.mg-leaf--nie   { left: -20px; top: 24px;  width: 75px;  opacity: 0.7; }
.mg-leaf--form  { right: 280px; top: 30px; width: 65px;  opacity: 0.8; }

.mg-footer-deco { position: absolute; height: auto; z-index: 2; }
.mg-footer-deco--tree  { left: 20%; bottom: 10px; margin-left: -220px; width: 200px; }
.mg-footer-deco--bears { left: 25%; bottom: 21px; margin-left: -10px;  width: 75px; border-radius: 14px; }

/* ---------- Scroll scenes: Мобилна апликација → Дојди → Веб апликација ----------
   .mg-scenes__frame is pinned by GSAP itself (position:fixed under the
   hood, with an auto-inserted spacer for scroll room — see the script at
   the bottom of the page) while each scene (.mg-section inside it) slides
   in X. Same background as the page itself. Below 961px, ScrollTrigger's
   matchMedia() never creates the pin — the tablet/mobile override further
   down makes the scenes stack and scroll normally, one after another. */
/* mist — the same tone the "Мобилна апликација" card already uses —
   full-bleed across the whole frame so all three scenes share one
   consistent backdrop, edge to edge */
.mg-scenes__frame { position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--mist); }
.mg-scenes__frame > .mg-section { position: absolute; inset: 0; width: 100%; height: 100%; overflow-y: auto; }
/* lives on the frame itself (not inside any sliding scene), so it never
   moves — same spot throughout the whole scroll sequence */
.mg-scenes__watermark {
  position: absolute; left: 64px; bottom: 64px; width: 220px; height: auto;
  opacity: 0.12; pointer-events: none; z-index: 0;
}

/* ---------- Laptop mockup (Веб апликација) ---------- */
/* mirrors .mg-cta__title / .mg-cta__text — left-aligned, inside
   .mg-cta__col, same as "Мобилна апликација" and "Дојди" */
.mg-webapp__title { margin: 0; font-size: var(--fs-h2); font-weight: 700; color: var(--forest); }
.mg-webapp__text { margin: 16px 0 0; max-width: 48ch; font-size: var(--fs-body); line-height: 1.7; color: var(--muted); }
/* left edge lines up with the heading/text above it (no auto-centering) */
.mg-laptop { max-width: 780px; margin: 40px 0 0; }
.mg-laptop__bar {
  height: 28px; background: #2b2f33; border-radius: 12px 12px 0 0;
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
}
.mg-laptop__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.mg-laptop__screen { position: relative; background: #000; overflow: hidden; aspect-ratio: 3004 / 1434; }
.mg-laptop__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mg-laptop__base { height: 14px; background: linear-gradient(#3a3f45, #24272b); border-radius: 0 0 8px 8px; margin: 0 -16px; box-shadow: 0 6px 14px rgba(0,0,0,0.2); }

/* ============================================================
   7. Responsive
   ============================================================ */

/* Tablet */
@media (max-width: 960px) {
  /* no GSAP pin below 961px — scenes just stack and scroll normally */
  .mg-scenes__frame { height: auto; }
  .mg-scenes__frame > .mg-section { position: relative; inset: auto; overflow-y: visible; }
  .mg-grid--3, .mg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 columns (not the old 2, from when there were 4) keeps them
     evenly spaced now that ПРАВНО is hidden — 3 already fits fine at
     this width since 4 used to fit here before */
  .mg-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .mg-hero { height: 520px; }

  /* Мобилна апликација / Дојди: still two columns here (they only stack
     at ≤640px, below), just with less room to spare — tighten the gap
     so the two-column layout doesn't get cramped before it needs to */
  .mg-live__row, .mg-cta__row { gap: 20px; }

  /* the desktop rightward nudge (translateX) was overflowing/clipping
     the Родители tab off the right edge once the head row wraps to
     full width below 961px — drop it so the pair stays centered and
     fully reachable */
  .mg-features__tabs { transform: none; flex-wrap: wrap; row-gap: 8px; }

  /* pull mid-canvas leaves back toward the edges so they stop colliding with text */
  .mg-leaf--form  { right: 24px; }

  /* Ние trust row: 2x2 instead of 4-in-a-row — no dividers to manage
     any more, just a plain reflow */
  .mg-trust { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }

  /* .mg-tiles stays 2-across through tablet — each tile already has
     its own icon+text row, so it keeps plenty of breathing room down
     to 641px; it only drops to a single column at the ≤640px mobile
     breakpoint below. Icon shrinks with it (and its bleed margins
     scale down to match) so it doesn't crowd the now-narrower text
     column. */
  .mg-tile { padding: 20px 20px; }
  .mg-tile__icon { width: 96px; }
  .mg-tile:nth-child(1) .mg-tile__icon { margin: -10px 0 -6px -8px; }
  .mg-tile:nth-child(2) .mg-tile__icon { margin: -9px -9px -6px 0; }
  .mg-tile:nth-child(3) .mg-tile__icon { margin: -5px -8px -10px 0; }
  .mg-tile:nth-child(4) .mg-tile__icon { margin: -10px -8px -5px 0; }
  .mg-tile:nth-child(5) .mg-tile__icon { margin: -6px 0 -9px -9px; }
  .mg-tile:nth-child(6) .mg-tile__icon { margin: -8px -6px -6px 0; }
}

/* Mobile */
@media (max-width: 640px) {
  .mg-section { padding-top: 60px; }

  /* Nav: links/CTA hidden entirely on mobile (not just visually — display:none
     so they take no space), logo re-centered since it's now the only child */
  .mg-nav { justify-content: center; padding: 18px; }
  .mg-nav__links { display: none; }

  /* Hero fills the first mobile viewport. The logo lives in <header>,
     a sibling of <section id="hero"> (not inside it) — 62px is that
     header's fixed mobile height (18px+18px padding + 26px logo,
     width-independent), so hero-section's min-height plus the header
     above it always sums to exactly 100svh. svh (not vh) so mobile
     browser chrome — the address bar showing/hiding — doesn't leave a
     sliver of "Ние" peeking in or a gap under the fold. flex + flex:1
     on .mg-hero (instead of a fixed height like the old 440px) is what
     actually lets the hero fill that min-height on tall phones instead
     of stopping short and leaving dead space before "Ние". */
  .mg-hero-section { min-height: calc(100svh - 62px); display: flex; }
  .mg-hero { flex: 1 1 auto; height: auto; align-items: center; }
  .mg-hero__badge { padding: 16px 24px 0; background-image: url('assets/center-circle-full.svg'); }
  /* lifted up (relative to the badge's own bottom-anchored internal
     flow — see .mg-hero__mece below) so it sits over the brighter top
     portion of the photo (helped along by .mg-hero__fade--top's
     existing cream wash) instead of the busier furniture area lower
     down. The lift is svh-based clamp()'d rather than a fixed px: on
     the shortest supported phone (320x568) the hero is already taller
     than the old fixed 440px used to be, so a flat -115px still clears
     .mg-hero's overflow:hidden top edge there, but on a tall phone
     (430x932) badge now floats vertically centered with far more room
     above it — clamp() lets the lift grow with that extra room instead
     of leaving the same small fixed gap on every height.
     font-size: its own smaller clamp() than the shared desktop
     --fs-hero-title so two short stacked words stay comfortable at
     320-375px; line2 forced onto its own line via display:block
     (line1 stays inline so desktop's "Спокојно детство" is untouched) */
  .mg-hero__title { position: relative; top: clamp(-115px, -18svh, -70px); font-size: clamp(34px, 9.5vw, 42px); }
  .mg-hero__title-line2 { display: block; }
  /* mece + scroll-cue nudged down together by the same amount (visual
     top offset, not margin — margin has no effect here since the whole
     cluster is bottom-anchored via .mg-hero__badge's justify-content:
     flex-end, so only a matching position:relative offset on both
     actually moves them while keeping their gap to each other fixed) */
  .mg-hero__mece { width: 55%; margin-top: 22px; top: 10px; left: -3px; }
  /* "Дознај зошто" is replaced by the scroll-cue chevrons below the mece
     on mobile — tablet/desktop keep the button (set again above 640px) */
  .mg-hero__cta { display: none; }
  .mg-hero__scroll-cue { display: flex; position: relative; top: 4px; }

  /* Feature + info to single column */
  .mg-grid--3, .mg-grid--4 { grid-template-columns: 1fr; }

  /* Ние trust row: single column on the narrowest phones */
  .mg-trust { grid-template-columns: 1fr; row-gap: 32px; }
  .mg-trust-item__icon { width: 88px; height: 88px; }

  /* Сè tile grid: one tile per row, no horizontal scroll — each tile
     keeps its own icon+text row (not stacked), just full-width now.
     Icon side and bleed margin are forced to ONE consistent rule for
     every tile here (icon always left, same size, same bleed) instead
     of carrying over the desktop/tablet per-column left/right
     alternation — that asymmetry only reads as intentional across a
     2-column grid; in a single mobile column it just looked random
     (icon left on some cards, right on others). The tiles 2/4/6 shape
     left-extension (added so the shape backs the text on the 2-column
     layouts, where it stretches into the column gap) is reset to the
     plain full-width inset here too: at 1 column it had nothing but
     the page's own ~24px gutter to extend into, leaving only ~4px of
     margin before the true viewport edge — too fragile, and exactly
     what read as the shape "running out of the visible width" on a
     real phone. Once every icon is left-aligned, tiles 2/4/6 no
     longer need the extension anyway — their text now starts on the
     right, nowhere near the shape's left edge. */
  .mg-tiles { grid-template-columns: 1fr; gap: 14px; }
  .mg-tile, .mg-tile:nth-child(2), .mg-tile:nth-child(3), .mg-tile:nth-child(4), .mg-tile:nth-child(6) { flex-direction: row; padding: 18px; gap: 14px; }
  .mg-tile__icon { width: 76px; }
  /* every position needs its own nth-child-qualified selector here —
     a bare .mg-tile__icon can't out-specificity the base/tablet
     per-position margin rules it's meant to replace, even though it
     comes later in the file */
  .mg-tile:nth-child(1) .mg-tile__icon, .mg-tile:nth-child(2) .mg-tile__icon, .mg-tile:nth-child(3) .mg-tile__icon,
  .mg-tile:nth-child(4) .mg-tile__icon, .mg-tile:nth-child(5) .mg-tile__icon, .mg-tile:nth-child(6) .mg-tile__icon {
    margin: -6px 0 -4px -6px;
  }
  .mg-tile:nth-child(2) .mg-tile__shape, .mg-tile:nth-child(4) .mg-tile__shape, .mg-tile:nth-child(6) .mg-tile__shape {
    left: 0; width: 100%;
  }

  /* Сè: switch block re-centers under the intro text, hint line dropped
     to cut clutter (it's a decorative flourish, not information) */
  .mg-features__intro { max-width: 100%; }
  .mg-features__hint { display: none; }
  .mg-features__leaf { display: none; }
  /* Понуди: vertical stack -> horizontal scroll-snap carousel. Native
     scrolling does the actual swipe (no touch handlers needed — this
     also means normal vertical page scroll is never at risk of being
     intercepted, since we're not touching touchstart/move at all).
     Full-bleed: negative side margins cancel .mg-section's own 24px
     gutter so the track spans the true viewport width — card/padding
     below are sized in vw for exactly that reason: a % would resolve
     against the track's own (already-padded) content box and compound
     with the padding instead of giving a clean 86% of the viewport,
     and if the track weren't full-bleed a 320px phone's 24px gutters
     alone would already eat most of the 14% this needs for peeking. */
  .mg-pricing__grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 4px 6.5vw 4px;
    margin-top: 24px;
  }
  /* card = 87vw, track padding = 6.5vw each side: centering an 87vw
     card in a 100vw (full-bleed) track leaves exactly (100-87)/2 =
     6.5vw visible on each side — 6.5vw is ~20.8-28px across 320-430px,
     inside the requested 20-28px range at every required test width.
     min-width:0 overrides the flex item default of min-width:auto —
     without it the card refuses to shrink below its own text content's
     min-content width (long feature lines like "Целосна администрација
     и присуство"), ignoring the flex-basis entirely and staying at a
     fixed ~293px on every viewport instead of scaling with it.
     transform:none on the featured card (below) keeps its box the same
     size as its neighbors so this centering math isn't thrown off by a
     transform that visually overflows its own box. */
  .mg-pricing-plan { flex: 0 0 87vw; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .mg-pricing-plan--featured, .mg-pricing-plan--featured:hover { transform: none; }
  /* scroll-snap-type:none while the JS nudge animation is running — a
     snap point would otherwise fight the tiny scrollLeft tween below
     (the browser trying to snap straight back mid-animation) */
  .mg-pricing__grid.mg-pricing__grid--hint-active { scroll-snap-type: none; }
  /* fade+collapse (not just opacity) so dismissing it doesn't leave a
     dead gap between the carousel and the dots below */
  .mg-pricing__swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 14px; max-height: 20px; overflow: hidden;
    font-size: 12px; color: var(--muted);
    opacity: 1; transition: opacity .4s ease, max-height .4s ease, margin-top .4s ease;
  }
  .mg-pricing__swipe-hint svg { flex: none; color: var(--muted); }
  .mg-pricing__swipe-hint.is-dismissed { opacity: 0; max-height: 0; margin-top: 0; }
  .mg-pricing__dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; }
  .mg-pricing__dot {
    width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
  }
  .mg-pricing__dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--line);
    transition: background-color .2s ease, transform .2s ease;
  }
  .mg-pricing__dot.is-active::before { background: var(--amber); transform: scale(1.3); }
  /* 3 items no longer split evenly into 2 columns (2+1 orphan) — stack
     vertically instead, consistent spacing via the existing gap */
  .mg-footer__cols { grid-template-columns: 1fr; }

  /* Live: stack, same order/behaviour/alignment as Дојди — text first
     (left-aligned, same as .mg-cta__row/.mg-cta__col), phone below.
     Previously this section centered its text and stacked its feature
     rows into icon-above-text columns while Дојди's identical
     .mg-live__promo-feature rows stayed left-aligned — the two
     sections read inconsistently on mobile even though their desktop
     layouts are meant to mirror each other exactly.
     Left/right padding is 0 here (not 20px like it used to be) — this
     card is the ONLY one of the two sections with its own wrapper div;
     .mg-cta__row (Дојди) has no such wrapper and sits directly on
     .mg-section's own gutter, so any horizontal padding added here was
     pure extra inset .mg-cta__row never had, making this section's
     content measurably narrower and left-shifted relative to Дојди's. */
  .mg-live__card { padding: 44px 0; }
  .mg-live__row { flex-direction: column; }
  .mg-live__promo { min-width: 0; width: 100%; max-width: 100%; }
  .mg-scene-phone { height: 400px; margin: 0 auto; }

  /* Дојди: row stacks (text, then phone below) instead of both trying
     to fit side by side — with flex-basis:0% from the shared flex:1
     rule, the row was shrinking .mg-cta__media down to a sliver and
     stretching/distorting the phone image instead of ever wrapping */
  .mg-cta__row { flex-direction: column; }
  .mg-cta__col { width: 100%; min-width: 0; }

  /* CTA + Live: phone mockup centered beneath the copy */
  .mg-cta__media { min-width: 0; width: 100%; margin-top: 12px; }

  /* Form row stacks */
  .mg-form__row { flex-direction: column; }

  /* Decorative leaves → small, tucked into safe corners, never over text */
  .mg-leaf { opacity: 0.5 !important; }
  .mg-leaf--nie   { left: auto; right: 6px;  top: 6px;  width: 42px; }
  .mg-leaf--form  { right: 10px; top: 10px;  width: 40px; }

  /* Big dots off on small screens to calm the field */
  .mg-dot--lg { display: none; }
  /* keep small dots inside the viewport */
  .mg-dot--4 { left: 82%; }
  .mg-dot--7 { left: 86%; }

  /* Footer tree/bears scaled down and re-anchored so they sit neatly on the slant */
  .mg-footer-deco--tree  { left: 8px; margin-left: 0; width: 118px; bottom: 8px; }
  .mg-footer-deco--bears { left: 96px; margin-left: 0; width: 50px; bottom: 16px; }
}

/* very small phones — protect the largest display type from overflow */
@media (max-width: 380px) {
  .mg-footer__cols { grid-template-columns: 1fr; }
}

/* Понуди in phone landscape: neither the ≤960px tablet rule (2 columns
   — wraps "Премиум" onto its own row) nor the ≤640px portrait carousel
   rule (single scrolling column) is right here — a landscape phone is
   short and wide, so three compact columns in one row fit better than
   either. This is placed after both of those blocks specifically so it
   wins the cascade and can reset every carousel-mode property back to
   a plain grid, for the width range where both could otherwise match
   (e.g. 568x320 is ≤640px *and* landscape). Sizing uses clamp() tied
   to vw so cards compact further at the narrowest landscape width
   (568px) than at the widest (932px) instead of one fixed size for
   the whole range. */
@media (max-width: 960px) and (orientation: landscape) {
  .mg-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1.4vw, 14px);
    align-items: stretch;
    /* reset the portrait carousel's full-bleed scroll-track setup */
    overflow-x: visible;
    scroll-snap-type: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  .mg-pricing-plan {
    flex: none;
    min-width: 0;
    scroll-snap-align: none;
    padding: clamp(10px, 2.4vw, 18px) clamp(8px, 1.6vw, 14px);
  }
  /* keep the featured card's own background/border (its emphasis),
     just without the scale(1.03) — at this size a transform that
     visually overflows the card's own box is what would actually
     cause it to clip against its cramped neighbors */
  .mg-pricing-plan--featured, .mg-pricing-plan--featured:hover { transform: none; }
  .mg-pricing-plan__badge { font-size: clamp(9px, 1.3vw, 11px); padding: 4px 10px; top: -10px; }
  .mg-pricing-plan__name { font-size: clamp(12px, 2.4vw, 17px); }
  .mg-pricing-plan__desc { margin-top: 3px; font-size: clamp(8.5px, 1.4vw, 10.5px); }
  .mg-pricing-plan__features { margin-top: clamp(6px, 1.6vw, 12px); gap: clamp(4px, 1vw, 9px); }
  .mg-pricing-plan__features li { padding-left: 16px; font-size: clamp(8.5px, 1.4vw, 11px); line-height: 1.35; }
  .mg-pricing-plan__features li::before { font-size: clamp(8.5px, 1.4vw, 11px); }
  .mg-pricing-plan__cta { margin-top: clamp(6px, 1.6vw, 12px); font-size: clamp(9px, 1.3vw, 12px); padding: clamp(6px, 1.4vw, 11px) 6px; }
  /* .btn--secondary (Основен/Премиум) carries a real 2px border that
     .btn--primary (Професионален) doesn't — with no explicit height on
     either, that border adds 4px (2 sides) to the secondary buttons'
     own box that the primary one doesn't get, so despite identical
     text/padding/margin-top:auto the three CTA tops landed 4px apart.
     A matching transparent border on the primary button equalizes the
     box model without changing its visible color. */
  .mg-pricing-plan__cta.btn--primary { border: 2px solid transparent; }
  /* pagination dots exist for the single-card portrait carousel — not
     needed when all three packages are already visible at once */
  .mg-pricing__dots { display: none; }
  .mg-pricing__swipe-hint { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dc-dot-el, .dc-pulse { animation: none !important; }
  [data-anim] { opacity: 1 !important; }
  .mg-hero__scroll-cue svg { animation: none !important; }
  * { scroll-behavior: auto !important; }
  /* tabs/arrows/swipe all still switch panels via the same goTo() in
     app.js — only the animated slide itself is skipped here, so the
     panel just appears at its new position instead of sliding into it */
  .mg-features__slider-track { transition: none !important; }
  .mg-pricing__dot::before { transition: none !important; }

  /* js/app.js skips the GSAP pin+slide entirely under reduced motion, so
     the three scroll-scenes need the same non-pinned, stacked fallback
     layout the sub-961px responsive view uses below — otherwise, with no
     JS setting their x-offsets, the panels would just sit on top of each
     other (all position:absolute; inset:0) and Дојди/Веб апликација would
     be permanently hidden behind Мобилна апликација. */
  .mg-scenes__frame { height: auto; }
  .mg-scenes__frame > .mg-section { position: relative; inset: auto; overflow-y: visible; }
}