/* ==========================================================================
   Вработиме — landing page
   Дизајн систем според спецификација v2.0
   ========================================================================== */

/* ---------- 1. Токени ---------- */
:root{
  /* Бренд */
  --indigo:#3730C4;
  --indigo-600:#2F29A8;
  --indigo-300:#A79FE8;
  --indigo-tint:#ECEBFA;

  /* Неутрални */
  --ink:#0E1116;
  --ink-60:#5B6068;
  --paper:#F7F6F3;
  --surface:#FFFFFF;
  --border:#E6E5E0;
  --coral:#FF6B4A;

  /* Семантички (само статуси) */
  --s-open:#2D7FF9;
  --s-urgent:#F5A524;
  --s-ok:#0E9F6E;
  --s-bad:#E5484D;
  --s-done:#8A8F98;

  /* Радиуси */
  --r-card:16px;
  --r-btn:10px;
  --r-pill:999px;

  /* Сенки */
  --sh-1:0 1px 2px rgba(14,17,22,.04), 0 2px 8px rgba(14,17,22,.04);
  --sh-2:0 2px 6px rgba(14,17,22,.05), 0 12px 32px rgba(14,17,22,.07);
  --sh-3:0 8px 24px rgba(14,17,22,.08), 0 32px 64px rgba(14,17,22,.10);
  --sh-brand:0 12px 32px rgba(55,48,196,.22);

  /* Типографија */
  --f-head:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --wrap:1180px;
  --nav-h:72px;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--f-head); font-weight:600; margin:0; line-height:1.25; letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input{font:inherit}
:focus-visible{outline:3px solid var(--indigo); outline-offset:3px; border-radius:4px}
::selection{background:var(--indigo); color:#fff}
.tnum{font-variant-numeric:tabular-nums}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--indigo); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-btn) 0;
}
.skip-link:focus{left:0}

/* ---------- 3. Layout helpers ---------- */
.container{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.container--narrow{max-width:780px}

.section{padding:104px 0; position:relative}
.section--tight{padding:72px 0}
.section--alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section--dark{background:var(--ink); color:#fff}

.section__head{max-width:720px; margin-bottom:56px}
.section__head--light .section__lead{color:rgba(255,255,255,.68)}
.section__lead{margin-top:16px; font-size:18px; line-height:1.65; color:var(--ink-60)}

.h2{font-size:clamp(28px,3.6vw,42px); line-height:1.18; margin-top:18px}
.section--dark .h2{color:#fff}

.tag{
  display:inline-block; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--indigo); background:var(--indigo-tint);
  padding:6px 12px; border-radius:var(--r-pill);
}
.tag--muted{color:var(--ink-60); background:var(--border)}
.tag--light{color:#fff; background:rgba(255,255,255,.14)}

/* ---------- 4. Копчиња ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:12px 20px; border-radius:var(--r-btn);
  min-height:48px; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
}
.btn--sm{min-height:40px; padding:8px 16px; font-size:14px}
.btn--lg{padding:16px 28px; font-size:16px; min-height:56px}
.btn--block{width:100%}

.btn--primary{background:var(--indigo); color:#fff; box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--indigo-600); transform:translateY(-2px); box-shadow:0 16px 40px rgba(55,48,196,.3)}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{background:var(--surface); color:var(--ink); border:1px solid var(--border); box-shadow:var(--sh-1)}
.btn--ghost:hover{border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px)}

.btn--light{background:#fff; color:var(--ink)}
.btn--light:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.28)}

.linkbtn{color:var(--indigo); font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--indigo-600)}

.iconbtn{
  width:44px; height:44px; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--border); display:grid; place-items:center; box-shadow:var(--sh-1);
  transition:all .18s var(--ease);
}
.iconbtn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.iconbtn:hover{border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px)}
.iconbtn:disabled{opacity:.35; cursor:default; transform:none}

/* ---------- 5. Навигација ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(247,246,243,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.nav.is-stuck{border-bottom-color:var(--border); box-shadow:0 4px 24px rgba(14,17,22,.05)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}

.brand{display:inline-flex; align-items:center; gap:10px}
.brand__mark{border-radius:9px; box-shadow:0 2px 8px rgba(55,48,196,.28)}
.brand__name{font-family:var(--f-head); font-weight:700; font-size:19px; letter-spacing:-.02em}

.nav__links{display:flex; align-items:center; gap:4px}
.nav__links > a:not(.btn){
  padding:10px 14px; font-size:15px; font-weight:500; color:var(--ink-60);
  border-radius:var(--r-btn); transition:color .18s, background .18s;
}
.nav__links > a:not(.btn):hover{color:var(--ink); background:rgba(14,17,22,.04)}
.nav__cta{margin-left:8px}

.nav__toggle{display:none; width:44px; height:44px; border-radius:10px; padding:11px 10px}
.nav__toggle span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.nav__toggle span + span{margin-top:5px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__progress{height:2px; width:0; background:linear-gradient(90deg,var(--indigo),var(--indigo-300)); transition:width .1s linear}

/* ---------- 6. Hero ---------- */
.hero{position:relative; padding:calc(var(--nav-h) + 72px) 0 88px; overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.blob--1{width:620px; height:620px; background:radial-gradient(circle,#C9C5F5,transparent 68%); top:-220px; right:-160px}
.blob--2{width:520px; height:520px; background:radial-gradient(circle,#FFD9CE,transparent 68%); bottom:-200px; left:-180px; opacity:.42}
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  opacity:.5;
}

.hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--indigo);
  background:var(--surface); border:1px solid var(--indigo-tint);
  padding:7px 14px; border-radius:var(--r-pill); box-shadow:var(--sh-1);
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--s-ok); position:relative}
.eyebrow .dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--s-ok); opacity:.5; animation:ping 2s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}

.hero__title{
  font-size:clamp(38px,5.6vw,66px); font-weight:700; line-height:1.06;
  letter-spacing:-.03em; margin:22px 0 0;
}
.hero__title .hl{position:relative; color:var(--indigo); white-space:nowrap}
.hero__title .hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.24em;
  background:var(--indigo-tint); border-radius:4px; z-index:-1;
  transform:scaleX(0); transform-origin:left; animation:swipe .8s .5s var(--ease) forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}

.hero__lead{margin-top:22px; font-size:19px; line-height:1.62; color:var(--ink-60); max-width:52ch}
.hero__lead em{font-style:normal; font-weight:600; color:var(--ink)}

.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

.hero__chips{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:32px}
.hero__chips li{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink-60)}
.hero__chips svg{width:16px; height:16px; fill:none; stroke:var(--s-ok); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* Phone */
.hero__device{position:relative; display:flex; justify-content:center; perspective:1400px}
.phone-glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(55,48,196,.28),transparent 70%); filter:blur(50px); z-index:0;
}
.phone{
  position:relative; z-index:1; width:300px; height:610px;
  background:linear-gradient(160deg,#22242B,#0E1116); border-radius:44px; padding:11px;
  box-shadow:var(--sh-3), 0 0 0 2px rgba(255,255,255,.06) inset;
  transform:rotateY(-11deg) rotateX(4deg) rotate(1.5deg);
  transition:transform .6s var(--ease);
  animation:floaty 7s ease-in-out infinite;
}
.phone:hover{transform:rotateY(-4deg) rotateX(1deg) rotate(0deg)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -14px}}
.phone__notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:110px; height:26px; background:#0E1116; border-radius:0 0 16px 16px; z-index:3;
}
.phone__screen{
  position:relative; height:100%; border-radius:34px; overflow:hidden;
  background:var(--paper); display:flex; flex-direction:column;
}
.shot-img{display:none}
.shot-img.is-loaded{display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:4}

/* Мокап во телефон */
.mock{display:flex; flex-direction:column; height:100%; font-size:12px}
.mock__top{display:flex; align-items:flex-start; justify-content:space-between; padding:44px 18px 12px}
.mock__hello{font-family:var(--f-head); font-weight:600; font-size:15px}
.mock__sub{font-size:11px; color:var(--ink-60); margin-top:2px}
.mock__bell{position:relative; width:32px; height:32px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center}
.mock__bell svg{width:15px; height:15px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.mock__bell i{position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--coral); border:1.5px solid var(--surface)}

.mock__filters{display:flex; gap:6px; padding:4px 18px 12px; overflow:hidden}
.mock__filters .chip{font-size:10.5px; padding:5px 10px; min-height:0}

.mock__list{flex:1; padding:0 18px; display:flex; flex-direction:column; gap:9px; overflow:hidden}
.mock__tabs{
  display:flex; justify-content:space-around; padding:10px 0 20px;
  background:var(--surface); border-top:1px solid var(--border);
}
.mock__tab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; color:var(--ink-60)}
.mock__tab svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.mock__tab.is-on{color:var(--indigo); font-weight:600}

/* Floating notes */
.float-note{
  position:absolute; z-index:2; display:flex; gap:10px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:12px 14px; box-shadow:var(--sh-2); width:216px;
  animation:floaty 6s ease-in-out infinite;
}
.float-note strong{font-size:13px; font-family:var(--f-head)}
.float-note p{font-size:11.5px; color:var(--ink-60); margin-top:2px; line-height:1.4}
.float-note__ico{font-size:17px; line-height:1}
.float-note--1{top:5%; left:-8%; animation-delay:.4s}
.float-note--2{bottom:13%; right:-9%; animation-delay:1.6s}

/* Stats */
.stats{
  position:relative; z-index:1; margin-top:80px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;
}
.stat{background:var(--surface); padding:26px 22px; text-align:center}
.stat__num{display:block; font-family:var(--f-head); font-weight:700; font-size:34px; color:var(--indigo); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat__lbl{display:block; margin-top:4px; font-size:13.5px; color:var(--ink-60); line-height:1.4}

/* ---------- 7. Split (проблем/решение) ---------- */
.split{display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch}
.split__side{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:32px; box-shadow:var(--sh-1)}
.split__side--good{border-color:var(--indigo-tint); box-shadow:var(--sh-2); position:relative; overflow:hidden}
.split__side--good::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--indigo),var(--indigo-300))}
.split__title{font-size:21px; margin:16px 0 20px}
.split__arrow{display:grid; place-items:center; color:var(--ink-60); opacity:.4}
.split__arrow svg{width:32px; height:32px}

.list li{position:relative; padding-left:30px; margin-bottom:12px; font-size:15.5px; color:var(--ink-60); line-height:1.55}
.list li:last-child{margin-bottom:0}
.list--lg li{font-size:16px; margin-bottom:14px; color:var(--ink-60)}
.list--check li::before, .list--minus li::before{
  position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.list--check li::before{content:'✓'; background:rgba(14,159,110,.12); color:var(--s-ok)}
.list--minus li::before{content:'×'; background:rgba(229,72,77,.1); color:var(--s-bad)}

/* ---------- 8. Табови + чекори ---------- */
.tabs__bar{
  position:relative; display:inline-flex; gap:4px; padding:5px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill);
  margin-bottom:40px; box-shadow:var(--sh-1);
}
.tabs__btn{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  color:var(--ink-60); transition:color .25s; min-height:48px;
}
.tabs__btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tabs__btn.is-active{color:#fff}
.tabs__ink{
  position:absolute; top:5px; left:5px; height:calc(100% - 10px);
  background:var(--indigo); border-radius:var(--r-pill); z-index:0;
  transition:transform .38s var(--ease), width .38s var(--ease);
}

.tabs__panel{animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:s}
.step{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:28px 24px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.step:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--indigo-tint)}
.step__n{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--indigo-tint); color:var(--indigo);
  font-family:var(--f-head); font-weight:700; font-size:17px; margin-bottom:16px;
}
.step h4{font-size:17px; margin-bottom:8px}
.step p{font-size:14.5px; color:var(--ink-60); line-height:1.55}
.step:not(:last-child)::after{
  content:''; position:absolute; top:48px; right:-16px; width:8px; height:8px;
  border-top:2px solid var(--border); border-right:2px solid var(--border); transform:rotate(45deg);
}

.steps__note{
  display:flex; gap:12px; align-items:flex-start; margin-top:28px; padding:18px 22px;
  background:var(--indigo-tint); border-radius:var(--r-card); font-size:15px; color:var(--indigo-600); line-height:1.55;
}
.steps__note svg{width:20px; height:20px; flex:none; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- 9. Ситни компоненти (chip / jobcard / badge) — користени во hero мокапот ---------- */
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 15px; border-radius:var(--r-pill); font-size:13.5px; font-weight:500;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-60);
  transition:all .18s var(--ease); white-space:nowrap;
}
button.chip{min-height:40px}
button.chip:hover{border-color:var(--indigo); color:var(--indigo)}
.chip--on{background:var(--indigo); border-color:var(--indigo); color:#fff; font-weight:600}
button.chip--on:hover{background:var(--indigo-600); color:#fff}

.jobcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:18px; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  animation:fadeUp .38s var(--ease) both;
}
.jobcard:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--indigo-tint)}
.jobcard__head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px}
.jobcard h4{font-size:16.5px; margin-bottom:5px}
.jobcard > p{font-size:13.5px; color:var(--ink-60)}
.jobcard__pay{font-family:var(--f-head); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}
.jobcard__meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-60)}
.jobcard--sm{padding:12px; border-radius:12px}
.jobcard--sm h4{font-size:12.5px; margin-bottom:2px}
.jobcard--sm > p{font-size:10.5px}
.jobcard--sm .jobcard__head{margin-bottom:7px}
.jobcard--sm .jobcard__pay{font-size:11.5px}
.jobcard--sm .jobcard__meta{margin-top:8px; padding-top:7px; font-size:9.5px; gap:4px}

.badge{
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 9px; border-radius:var(--r-pill);
}
.badge--open{background:rgba(45,127,249,.12); color:var(--s-open)}
.badge--urgent{background:rgba(245,165,36,.16); color:#9A6407}
.badge--ok{background:rgba(14,159,110,.12); color:var(--s-ok)}

/* ---------- 10. Картички ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:30px 26px; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(55,48,196,.07), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--indigo-tint)}
.card:hover::before{opacity:1}
.card__ico{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; margin-bottom:18px}
.card__ico svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.card__ico--indigo{background:var(--indigo-tint); color:var(--indigo)}
.card__ico--green{background:rgba(14,159,110,.12); color:var(--s-ok)}
.card__ico--blue{background:rgba(45,127,249,.12); color:var(--s-open)}
.card__ico--coral{background:rgba(255,107,74,.13); color:var(--coral)}
.card h3{font-size:18px; margin-bottom:10px}
.card p{font-size:15px; color:var(--ink-60); line-height:1.6}

/* ---------- 11. За фирми (темна) ---------- */
.section--dark{overflow:hidden}
.section--dark::before{
  content:''; position:absolute; top:-160px; right:-120px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle,rgba(55,48,196,.55),transparent 68%); filter:blur(70px);
}
.section--dark .container{position:relative; z-index:1}

.feature-rows{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:rgba(255,255,255,.08); border-radius:var(--r-card); overflow:hidden}
.frow{display:flex; gap:18px; padding:30px 28px; background:var(--ink); transition:background .25s}
.frow:hover{background:#171A21}
.frow__n{font-family:var(--f-head); font-weight:700; font-size:14px; color:var(--indigo-300); flex:none; padding-top:3px; font-variant-numeric:tabular-nums}
.frow h3{font-size:18px; color:#fff; margin-bottom:8px}
.frow p{font-size:15px; color:rgba(255,255,255,.62); line-height:1.6}

.cta-inline{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  margin-top:36px; padding:28px 32px; border-radius:var(--r-card);
  background:linear-gradient(120deg,var(--indigo),#5B52E0);
}
.cta-inline p{font-family:var(--f-head); font-weight:600; font-size:19px; color:#fff}

/* ---------- 12. Категории ---------- */
.marquee{overflow:hidden; padding:8px 0 44px; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex; gap:12px; width:max-content; animation:scroll 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee__track span{
  padding:10px 20px; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--border); font-size:14.5px; font-weight:500; color:var(--ink-60); white-space:nowrap;
}

.catgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cat{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:26px; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cat:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.cat__ico{font-size:30px; display:block; margin-bottom:14px}
.cat h4{font-size:17px; margin-bottom:7px}
.cat p{font-size:14px; color:var(--ink-60); line-height:1.55}

/* ---------- 13. Доверба ---------- */
.trust{display:grid; grid-template-columns:1.25fr .85fr; gap:40px; align-items:start}
.trust__list{display:grid; gap:14px}
.trustitem{display:flex; gap:16px; padding:20px; background:var(--paper); border:1px solid var(--border); border-radius:var(--r-card); transition:border-color .22s, transform .22s var(--ease)}
.trustitem:hover{border-color:var(--indigo-tint); transform:translateX(4px)}
.trustitem__ico{display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:var(--indigo-tint); color:var(--indigo)}
.trustitem__ico svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.trustitem h4{font-size:16.5px; margin-bottom:5px}
.trustitem p{font-size:14.5px; color:var(--ink-60); line-height:1.55}

.profilecard{position:sticky; top:calc(var(--nav-h) + 24px); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px; box-shadow:var(--sh-2)}
.profilecard__head{display:flex; align-items:center; gap:14px}
.avatar{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,var(--indigo),#6E63E8); color:#fff;
  font-family:var(--f-head); font-weight:700; font-size:19px;
}
.profilecard__head h4{font-size:18px}
.profilecard__sub{font-size:13.5px; color:var(--ink-60); margin-top:2px}
.profilecard__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center}
.profilecard__stats strong{display:block; font-family:var(--f-head); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums}
.profilecard__stats span{font-size:11.5px; color:var(--ink-60); line-height:1.3; display:block; margin-top:2px}
.profilecard__badges{display:flex; flex-wrap:wrap; gap:8px}
.pill{font-size:12px; font-weight:500; padding:6px 12px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--border); color:var(--ink-60)}
.pill--green{background:rgba(14,159,110,.1); border-color:transparent; color:var(--s-ok); font-weight:600}
.pill--indigo{background:var(--indigo-tint); border-color:transparent; color:var(--indigo); font-weight:600}
.profilecard__note{margin-top:20px; padding:16px; border-radius:12px; background:var(--paper); font-size:13.5px; color:var(--ink-60); line-height:1.55}
.profilecard__note strong{color:var(--ink)}

/* ---------- 14. Timeline ---------- */
.tl{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.tl::before{content:''; position:absolute; top:11px; left:8%; right:8%; height:2px; background:var(--border)}
.tl__item{position:relative; padding:0 16px; text-align:center}
.tl__dot{
  position:relative; z-index:1; display:block; width:24px; height:24px; margin:0 auto 18px;
  border-radius:50%; background:var(--surface); border:3px solid var(--c,var(--indigo));
  box-shadow:0 0 0 5px var(--paper);
}
.tl__dot::after{content:''; position:absolute; inset:4px; border-radius:50%; background:var(--c,var(--indigo))}
.tl__item h4{font-size:16.5px; margin-bottom:6px}
.tl__item p{font-size:14px; color:var(--ink-60); line-height:1.5}
.timeline__note{margin-top:36px; text-align:center; font-size:14.5px; color:var(--ink-60); padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card)}

/* ---------- 15. Нотификации ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.notestack{display:grid; gap:12px; position:relative}
.note{
  display:block; background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:16px; padding:14px 16px; box-shadow:var(--sh-2);
  transition:transform .3s var(--ease), opacity .3s;
}
.note.is-active{transform:scale(1.03) translateX(-6px); border-color:var(--indigo-tint); box-shadow:var(--sh-3)}
.note__app{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-60); margin-bottom:6px}
.note__app img{border-radius:6px}
.note p{font-size:14px; line-height:1.5; color:var(--ink-60)}
.note p strong{color:var(--ink); font-weight:600}
.two-col__visual{position:relative}
.two-col__visual::before{
  content:''; position:absolute; inset:-40px -20px; border-radius:40px;
  background:radial-gradient(circle at 60% 40%, rgba(55,48,196,.12), transparent 65%); z-index:-1;
}

/* ---------- 16. Галерија со скриншоти ---------- */
.gallery{position:relative}
.gallery__rail{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 24px; scrollbar-width:none; -ms-overflow-style:none;
}
.gallery__rail::-webkit-scrollbar{display:none}
.shot{margin:0; flex:0 0 252px; scroll-snap-align:center}
.shot__frame{
  position:relative; aspect-ratio:9/19.5; border-radius:32px; overflow:hidden;
  background:linear-gradient(160deg,#22242B,#0E1116); padding:9px;
  box-shadow:var(--sh-2); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.shot:hover .shot__frame{transform:translateY(-8px); box-shadow:var(--sh-3)}
.shot__ph{
  height:100%; border-radius:24px; background:var(--paper);
  border:2px dashed var(--border); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px;
}
.shot__ph span{
  font-family:var(--f-head); font-weight:700; font-size:26px; color:var(--indigo);
  background:var(--indigo-tint); width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
}
.shot__ph p{font-size:14px; font-weight:600; line-height:1.35}
.shot__ph code{font-size:11px; color:var(--ink-60); background:var(--surface); border:1px solid var(--border); padding:4px 8px; border-radius:6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.shot .shot-img.is-loaded{border-radius:24px}
.shot figcaption{margin-top:16px; font-family:var(--f-head); font-weight:600; font-size:15px; text-align:center}
.shot figcaption span{display:block; font-family:var(--f-body); font-weight:400; font-size:13px; color:var(--ink-60); margin-top:3px}

.gallery__nav{display:flex; justify-content:center; gap:10px; margin-top:8px}

/* ---------- 17. FAQ ---------- */
.faq{display:grid; gap:10px}
.faq__item{background:var(--paper); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; transition:border-color .22s, box-shadow .22s}
.faq__item[open]{border-color:var(--indigo-tint); box-shadow:var(--sh-1); background:var(--surface)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; cursor:pointer; font-family:var(--f-head); font-weight:600; font-size:16.5px;
  list-style:none; min-height:56px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:''; flex:none; width:11px; height:11px;
  border-right:2.2px solid var(--ink-60); border-bottom:2.2px solid var(--ink-60);
  transform:rotate(45deg) translateY(-3px); transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg) translateY(-3px); border-color:var(--indigo)}
.faq__item summary:hover{color:var(--indigo)}
.faq__body{padding:0 24px 22px; font-size:15.5px; color:var(--ink-60); line-height:1.65; animation:fadeUp .3s var(--ease)}

/* ---------- 18. CTA — преземи ја апликацијата ---------- */
.cta{padding-bottom:120px}
.ctabox{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:48px; box-shadow:var(--sh-2); overflow:hidden; text-align:center}
.ctabox > *{position:relative}
.ctabox .ctabox__bg{position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:520px; height:320px; background:radial-gradient(ellipse,rgba(55,48,196,.16),transparent 68%); filter:blur(30px)}
.ctabox__lead{margin-top:14px; font-size:17px; color:var(--ink-60); max-width:52ch; margin-inline:auto}

.store-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px}

/* ---------- 19. Footer ---------- */
.footer{background:var(--ink); color:rgba(255,255,255,.62); padding:72px 0 32px; font-size:14.5px}
.footer__top{display:grid; grid-template-columns:1.15fr 2fr; gap:56px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1)}
.brand--footer{color:#fff; margin-bottom:16px}
.brand--footer img{border-radius:10px}
.footer__brand p{max-width:42ch; line-height:1.6}
.stores{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.storebadge{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-btn); color:#fff;
  width:200px; flex:none;
}
.storebadge.is-soon{opacity:.7}
.storebadge svg{width:22px; height:22px; flex:none}
.storebadge span{display:flex; flex-direction:column; font-family:var(--f-head); font-weight:600; font-size:14px; line-height:1.2}
.storebadge small{font-family:var(--f-body); font-weight:400; font-size:10.5px; opacity:.7; letter-spacing:.02em}
.storebadge--solid{background:var(--ink); border-color:var(--ink); color:#fff}
.storebadge--solid:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}

.footer__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.footer__cols h5{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:14px; font-family:var(--f-body); font-weight:600}
.footer__cols a{display:block; padding:5px 0; transition:color .18s}
.footer__cols a:hover{color:#fff}

.footer__legal{padding-top:28px}
.footer__disclaimer{font-size:13px; line-height:1.6; color:rgba(255,255,255,.45); max-width:88ch}
.footer__bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.45)}

/* ---------- 20. FAB (мобилен CTA) ---------- */
.fab{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  display:none; align-items:center; justify-content:center; min-height:52px;
  background:var(--indigo); color:#fff; font-weight:600; border-radius:var(--r-btn);
  box-shadow:var(--sh-brand); transform:translateY(calc(100% + 24px)); transition:transform .35s var(--ease);
}
.fab.is-on{transform:translateY(0)}

/* ---------- 21. Reveal анимации ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}

/* ---------- 22. Responsive ---------- */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr; gap:56px}
  .hero__copy{max-width:640px}
  .hero__device{order:2}
  .float-note--1{left:0}
  .float-note--2{right:0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2)::after{display:none}
  .cards,.catgrid,.feed__grid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:1fr}
  .profilecard{position:static; max-width:440px}
  .two-col{grid-template-columns:1fr; gap:40px}
  .footer__top{grid-template-columns:1fr; gap:40px}
}

@media (max-width:860px){
  :root{--nav-h:64px}
  .section{padding:76px 0}
  .nav__toggle{display:block}
  .nav__links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:16px 20px 24px; box-shadow:var(--sh-2);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s var(--ease);
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav__links > a:not(.btn){padding:14px 12px; font-size:16px}
  .nav__cta{margin:10px 0 0}

  .split{grid-template-columns:1fr; gap:16px}
  .split__arrow{transform:rotate(90deg); padding:4px 0}
  .feature-rows{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr; gap:22px; text-align:left}
  .tl::before{top:0; bottom:0; left:11px; right:auto; width:2px; height:auto}
  .tl__item{display:grid; grid-template-columns:24px 1fr; gap:16px; text-align:left; padding:0}
  .tl__dot{margin:0}
  .tl__item h4{grid-column:2; margin-bottom:4px}
  .tl__item p{grid-column:2}
  .fab{display:flex}
  .cta{padding-bottom:100px}
}

@media (max-width:680px){
  .container{padding:0 18px}
  .section{padding:64px 0}
  .section__head{margin-bottom:36px}
  .stats{grid-template-columns:repeat(2,1fr); margin-top:56px}
  .cards,.catgrid,.feed__grid,.steps{grid-template-columns:1fr}
  .step::after{display:none}
  .feed{padding:20px; border-radius:18px}
  .filtergroup--switch{margin-left:0}
  .form__row{grid-template-columns:1fr}
  .ctabox{padding:32px 22px; border-radius:20px}
  .footer__cols{grid-template-columns:1fr 1fr}
  .hero__title .hl{white-space:normal}
  .float-note{display:none}
  .phone{width:270px; height:552px}
  .cta-inline{padding:24px; text-align:center; justify-content:center}
  .tabs__bar{display:flex; width:100%; border-radius:16px}
  .tabs__btn{flex:1; justify-content:center; padding:12px 10px; font-size:14px}
  .tabs__ink{border-radius:12px}
}

/* ---------- 23. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .hero__title .hl::after{transform:scaleX(1)}
}

/* ---------- 24. Print ---------- */
@media print{
  .nav,.fab,.gallery__nav,.marquee{display:none}
  body{background:#fff}
  .reveal{opacity:1; transform:none}
}