/* ─── FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=Barlow+Condensed:wght@300;400;500;600;700;800&display=swap');

/* ─── TOKENS ─── */
:root {
  --bg:    #0a0a0a;
  --bg2:   #111;
  --bg3:   #161616;
  --fg:    #ffffff;
  --fg2:   #ffffff;
  --fg3:   #ffffff;
  --line:  rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.15);
  --acc:   #d4ff4e;
  --acc2:  #b8e030;
  --r:     14px;
  --head:  'Bebas Neue', sans-serif;
  --body:  'Barlow', sans-serif;
  --cond:  'Barlow Condensed', sans-serif;
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
a { color: inherit; text-decoration: none }
button { font-family: inherit; cursor: none }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px }
::selection { background: rgba(244,196,48,.95); color: #111 }

html, body, p, span, div, a, li, label, input, textarea, select, option, button, h1, h2, h3, h4, h5, h6, strong, small { color: #fff; }
input, textarea, select, option { color: #fff; }

.osbox i, .bcico i, .iico i, .bmxico i {
  font-size: 1.15em;
  line-height: 1;
}

/* ─── CURSOR ─── */
#cur, #dot {
  position: fixed; pointer-events: none;
  z-index: 9999; border-radius: 50%;
  transform: translate(-50%, -50%);
}
#cur {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,.35);
  transition: width .3s, height .3s, border-color .3s, background .3s;
}
#dot { width: 5px; height: 5px; background: #fff }
body.hov #cur { width: 54px; height: 54px; border-color: rgba(255,255,255,.6) }

/* ─── LOADER ─── */
#ldr {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 7000;
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 2.5rem;
  /* transition задаётся из JS динамически */
}

#lnum {
  font-family: var(--head);
  font-size: clamp(9rem, 24vw, 22rem);
  line-height: .9; color: #fff;
  letter-spacing: .02em; align-self: flex-end;
}
#ltag {
  font-family: var(--cond);
  font-size: .75rem; letter-spacing: .2em;
  text-transform: uppercase; color: #fff;
  position: absolute; top: 2.5rem; left: 2.5rem;
}
#lbar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0; background: transparent;
  transition: width .06s linear;
}

#ldr { animation: klAutoHide 0.01s linear 4.2s forwards; }
@keyframes klAutoHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ─── PROMO ─── */
#promo {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 600; background: transparent;
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; padding: .65rem 2.5rem;
  transform: translateY(-100%);
  /* transition задаётся из JS */
  cursor: none;
}
#promo.show { transform: translateY(0) }
.p-txt {
  font-family: var(--cond);
  font-size: .8rem; letter-spacing: .15em;
  text-transform: uppercase; color: #fff; font-weight: 700;
}
.p-price {
  font-family: var(--head);
  font-size: 1.2rem; color: #fff; letter-spacing: .04em;
}
.p-btn {
  font-family: var(--cond);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .3rem .9rem;
  border-radius: 50px; font-weight: 700; border: none;
  transition: background .2s; cursor: none;
}
.p-btn:hover { background: #111 }
.p-close {
  position: absolute; right: 1.5rem;
  background: none; border: none; color: #fff;
  opacity: .5; font-size: 1.1rem; line-height: 1;
  width: 24px; height: 24px; display: flex;
  align-items: center; justify-content: center; cursor: none;
}
.p-close:hover { opacity: 1 }

/* ─── NAV ─── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500; display: flex;
  align-items: center; justify-content: space-between;
  padding: 1.5rem 2.5rem;
  transition: top .35s cubic-bezier(.16,1,.3,1);
}
#nav.pp { top: 38px }

.nlogo {
  font-family: var(--head);
  font-size: 1.5rem; letter-spacing: .06em;
  color: #fff;
  opacity: 0; animation: fi .6s .1s ease both;
}
.nlinks { display: flex; gap: 2rem }
.nlinks a {
  font-family: var(--cond);
  font-size: .78rem; letter-spacing: .12em; font-weight: 600;
  text-transform: uppercase; color: #fff;
  position: relative; transition: color .2s;
  opacity: 0; animation: fi .5s ease both;
}
.nlinks a::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px; background: #fff;
  transition: width .3s;
}
.nlinks a:nth-child(1){animation-delay:.15s}
.nlinks a:nth-child(2){animation-delay:.2s}
.nlinks a:nth-child(3){animation-delay:.25s}
.nlinks a:nth-child(4){animation-delay:.3s}
.nlinks a:nth-child(5){animation-delay:.35s}
.nlinks a:hover { color: #fff }
.nlinks a:hover::after { width: 100% }

.ncta {
  font-family: var(--cond);
  font-size: .78rem; letter-spacing: .1em; font-weight: 700;
  text-transform: uppercase; background: transparent;
  color: #fff; padding: .5rem 1.3rem; border-radius: 50px;
  transition: all .25s;
  opacity: 0; animation: fi .5s .4s ease both;
}
.ncta:hover { background: #fff; transform: translateY(-1px) }

.nmenu {
  display: none;
  font-family: var(--cond); font-size: .78rem;
  letter-spacing: .1em; font-weight: 700; text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,.2);
  padding: .45rem 1.1rem; border-radius: 50px;
  color: #fff; background: none;
  transition: all .2s;
  opacity: 0; animation: fi .5s .2s ease both;
}
.nmenu:hover { background: #fff; color: #fff; border-color: #fff }

/* ─── FULLMENU ─── */
#fm {
  position: fixed; inset: 0; background: var(--bg2);
  z-index: 400; display: flex; flex-direction: column;
  justify-content: space-between; padding: 6rem 2.5rem 2.5rem;
  clip-path: circle(0% at calc(100% - 70px) 44px);
  transition: clip-path .9s cubic-bezier(.76,0,.24,1);
  pointer-events: none;
}
#fm.open { clip-path: circle(170% at calc(100% - 70px) 44px); pointer-events: all }
.fmlinks { display: flex; flex-direction: column; gap: .1rem }
.fmlink {
  font-family: var(--head);
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: .04em; color: #fff; display: inline-block;
  overflow: hidden; transition: color .2s;
}
.fmlink span { display: block; transition: transform .5s cubic-bezier(.16,1,.3,1) }
.fmlink:hover { color: var(--acc) }
.fmlink:hover span { transform: translateX(2rem) }
.fmbot {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--line); padding-top: 1.8rem;
}
.fmsoc { display: flex; gap: 1.5rem }
.fmsoc a {
  font-family: var(--cond);
  font-size: .78rem; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: #fff; transition: color .2s;
}
.fmsoc a:hover { color: #fff }
.fmcopy { font-family: var(--cond); font-size: .7rem; color: #fff }

/* ─── HERO ─── */
#hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: space-between; padding: 0 2.5rem 2.5rem;
  padding-top: calc(1.5rem * 2 + 1.5rem + 2.5rem + 38px);
}
.htags { display: flex; justify-content: space-between; margin-bottom: 1rem }
.hpill {
  font-family: var(--cond);
  font-size: .72rem; letter-spacing: .14em; font-weight: 600;
  text-transform: uppercase; color: #fff;
  border: 1px solid var(--line); padding: .35rem .9rem; border-radius: 50px;
  opacity: 0; animation: fu .7s ease both;
}
.hpill:first-child { animation-delay: .5s }
.hpill:last-child  { animation-delay: .6s }

.htitle {
  font-family: var(--head);
  font-size: clamp(5.5rem, 14vw, 17rem);
  line-height: .9; letter-spacing: .03em;
  overflow: hidden; padding: .3rem 0;
}
.hl {
  display: block; color: #fff;
  opacity: 0; transform: translateY(105%);
  animation: su 1.1s cubic-bezier(.16,1,.3,1) both;
}
.hl:nth-child(1) { animation-delay: .35s }
.hl:nth-child(2) { animation-delay: .48s; padding-left: 6vw; color: #333 }

.hbot {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: flex-end; gap: 2rem;
  border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2rem;
}
.hdesc {
  font-family: var(--body);
  font-size: 1rem; color: #fff; line-height: 1.7;
  font-weight: 400; max-width: 260px;
  opacity: 0; animation: fi .7s .8s ease both;
}
.hdesc strong { color: #fff; font-weight: 700 }
.hdesc .acc   { color: var(--acc); font-weight: 700 }

.hscroll { display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: 0; animation: fi .7s .9s ease both }
.hsline  { width: 1px; height: 46px; background: var(--line); position: relative; overflow: hidden }
.hsline::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--fg3); animation: sl 2s ease infinite }
@keyframes sl { 0% { top: -100% } 100% { top: 100% } }
.hstxt { font-family: var(--cond); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: #333 }
.hidx { font-family: var(--head); font-size: 5rem; color: rgba(255,255,255,.04); line-height: 1; opacity: 0; animation: fi .7s 1s ease both }

/* ─── KEYFRAMES ─── */
@keyframes fi { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes fu { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes su { from { opacity: 0; transform: translateY(105%) } to { opacity: 1; transform: none } }

/* ─── MARQUEE ─── */
.mstrip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .9rem 0; background: var(--bg) }
.minner { display: flex; width: max-content; animation: mr 25s linear infinite }
.minner:hover { animation-play-state: paused }
@keyframes mr { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.mw { font-family: var(--head); font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: .06em; color: #2a2a2a; padding: 0 1.5rem; white-space: nowrap }
.ms { color: rgba(255,255,255,.05) }

/* ─── SECTIONS ─── */
.sec { padding: 7rem 2.5rem; border-top: 1px solid var(--line); overflow: hidden }
.shd { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 4.5rem }
.sidx { font-family: var(--cond); font-size: .85rem; letter-spacing: .1em; color: #333 }
.sttl { font-family: var(--head); font-size: clamp(1.2rem, 2.5vw, 2rem); letter-spacing: .05em; color: #333 }

/* ─── OFFER ─── */
#offer { background: var(--bg2); padding: 7rem 2.5rem; border-top: 1px solid var(--line) }
.olayout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center }

.obadge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; color: #fff;
  font-family: var(--cond);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: .4rem 1rem; border-radius: 50px; margin-bottom: 2rem;
}
.ottl {
  font-family: var(--head);
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  line-height: .92; letter-spacing: .02em;
  margin-bottom: 1.5rem; color: #fff;
}
.ottl span { color: var(--acc) }
.odesc { font-size: 1rem; color: #fff; line-height: 1.75; max-width: 400px; margin-bottom: 2.5rem; font-weight: 400 }
.olist { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 2.5rem }
.oli  { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; color: #fff; font-weight: 400 }
.ock  { color: var(--acc); font-size: 1rem; flex-shrink: 0; margin-top: 1px; font-weight: 700 }

.oprw { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem }
.opold {
  font-family: var(--head);
  font-size: 1.8rem; color: #fff; text-decoration: line-through; letter-spacing: .03em;
}
.opnew {
  font-family: var(--head);
  font-size: clamp(3.5rem, 6vw, 5.5rem); color: var(--acc);
  letter-spacing: .02em; line-height: 1;
}
.opcta {
  display: inline-flex; align-items: center; gap: .75rem;
  background: transparent; color: #fff;
  font-family: var(--cond);
  font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 2rem; border-radius: 50px; border: none;
  transition: all .3s; cursor: none;
}
.opcta:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212,255,78,.25) }

.ocard {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden;
}
.ocard-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem }
.ocardtag { font-family: var(--cond); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #333 }
.otimer { font-family: var(--head); font-size: 2rem; color: var(--acc); letter-spacing: .04em }
.osteps { display: flex; flex-direction: column; gap: 1.4rem }
.ostep { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line) }
.ostep:last-child { border-bottom: none; padding-bottom: 0 }
.osnum { font-family: var(--head); font-size: 1.1rem; color: #fff; min-width: 30px; letter-spacing: .04em }
.osbox {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(212,255,78,.06); border: 1px solid rgba(212,255,78,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .9rem;
}
.osttl { font-family: var(--body); font-size: .9rem; font-weight: 600; color: #fff; margin-bottom: .2rem }
.osdsc { font-size: .8rem; color: #fff; line-height: 1.5 }
.obgt { position: absolute; bottom: -1.5rem; right: -1rem; font-family: var(--head); font-size: 11rem; color: transparent; -webkit-text-stroke: 1px rgba(212,255,78,.05); line-height: 1; pointer-events: none; letter-spacing: .02em }

/* ─── WORK LIST ─── */
.wctr {
  font-family: var(--cond);
  font-size: .78rem; letter-spacing: .1em; color: #fff;
  margin-bottom: 3.5rem; display: flex; gap: .5rem; align-items: center;
  text-transform: uppercase;
}
.wcur { color: #fff; font-weight: 700 }

.wi {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 200px 28px;
  align-items: center; gap: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative; overflow: hidden; cursor: none;
}
.wi:last-child { border-bottom: 1px solid rgba(255,255,255,.05) }
.wi::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.015);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.76,0,.24,1);
}
.wi:hover::before { transform: scaleX(1) }

.wi-n { font-family: var(--head); font-size: 1rem; letter-spacing: .05em; color: #2a2a2a; transition: color .3s }
.wi:hover .wi-n { color: #555 }

.wi-t {
  font-family: var(--head);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: .04em; color: #fff;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.wi:hover .wi-t { transform: translateX(12px) }

.wi-d { font-size: .85rem; color: #555; line-height: 1.6; font-weight: 400; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s }
.wi:hover .wi-d { opacity: 1; transform: none }

.wi-tags { display: flex; flex-wrap: wrap; gap: .3rem }
.wi-tag {
  font-family: var(--cond);
  font-size: .65rem; letter-spacing: .08em; font-weight: 600; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.08); padding: .2rem .6rem;
  border-radius: 50px; color: #fff; transition: border-color .25s, color .25s;
}
.wi:hover .wi-tag { border-color: rgba(212,255,78,.4); color: var(--acc) }

.wi-arr { color: #fff; transition: transform .35s, color .25s; display: flex; align-items: center; font-size: 1.1rem }
.wi:hover .wi-arr { color: #fff; transform: translate(5px,-5px) }

/* ─── BOTS ─── */
#bots { background: var(--bg2) }
.bgrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem }
.brollw { overflow: hidden; height: clamp(3.5rem, 7vw, 6.5rem); margin-bottom: 2.5rem }
.brollt { display: flex; flex-direction: column; transition: transform .85s cubic-bezier(.16,1,.3,1) }
.bword { font-family: var(--head); font-size: clamp(2.5rem, 6vw, 6rem); letter-spacing: .04em; color: #fff; line-height: 1.1; display: block; flex-shrink: 0 }
.bcta {
  font-family: var(--cond); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; display: inline-flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: 2.5rem;
  transition: color .2s, border-color .2s; cursor: none;
}
.bcta::after { content: '↗'; transition: transform .3s }
.bcta:hover { color: #fff; border-color: var(--line2) }
.bcta:hover::after { transform: translate(4px,-4px) }
.bchars { display: flex; gap: 1rem }
.bchar { font-family: var(--head); font-size: clamp(5rem, 8.5vw, 7.5rem); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); letter-spacing: .02em; line-height: 1 }
.bcards { display: flex; flex-direction: column; gap: 1.2rem }
.bcard { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; transition: border-color .3s, transform .35s cubic-bezier(.16,1,.3,1); cursor: none }
.bcard:hover { border-color: var(--line2); transform: translateY(-4px) }
.bcard.tg { background: rgba(212,255,78,.02); border-color: rgba(212,255,78,.12) }
.bcard.tg:hover { border-color: rgba(212,255,78,.3) }
.bchead { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem }
.bcico { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem }
.bcard.tg .bcico { background: rgba(212,255,78,.06); border-color: rgba(212,255,78,.15) }
.bcname { font-family: var(--head); font-size: 1.8rem; letter-spacing: .04em; color: #fff }
.bcdesc { font-size: .88rem; color: #fff; line-height: 1.7; margin-bottom: 1rem }
.bfeats { list-style: none; display: flex; flex-direction: column; gap: .28rem }
.bfeats li { font-size: .82rem; color: #444; display: flex; align-items: center; gap: .5rem }
.bck { color: #444; font-weight: 700 }
.blbl { text-align: right; font-family: var(--cond); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-top: .6rem }

/* ─── INTEGRATIONS ─── */
.igrid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
.irow { display: grid; grid-template-columns: 40px 1fr 32px; align-items: center; gap: 1.2rem; padding: 1.6rem 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; cursor: none }
.irow:nth-child(2n) { border-right: none }
.irow:nth-last-child(-n+2) { border-bottom: none }
.irow:hover { background: rgba(255,255,255,.02) }
.irow:hover .iname { transform: translateX(5px) }
.iico { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .9rem }
.iname { font-family: var(--head); font-size: 1.15rem; letter-spacing: .04em; color: #fff; transition: transform .3s ease }
.idesc { font-size: .75rem; color: #444; line-height: 1.5 }
.inum { font-family: var(--head); font-size: 1.2rem; letter-spacing: .03em; color: rgba(255,255,255,.06); text-align: right }

/* ─── ABOUT ─── */
.agrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6rem }
.astat { margin-bottom: 2.5rem }
.asn { font-family: var(--head); font-size: clamp(5rem, 10vw, 9rem); letter-spacing: .02em; line-height: 1; display: block; color: #fff }
.asl { font-family: var(--cond); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #444; margin-top: .15rem }
.atxt { font-size: .95rem; color: #fff; line-height: 1.85; margin-bottom: 1.3rem }
.astlbl { font-family: var(--cond); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #2a2a2a; display: block; margin-bottom: .8rem; margin-top: 2.5rem }
.atags { display: flex; flex-wrap: wrap; gap: .4rem }
.atag { font-family: var(--cond); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.08); padding: .28rem .75rem; border-radius: 50px; color: #444; transition: border-color .2s, color .2s }
.atag:hover { border-color: rgba(255,255,255,.2); color: var(--fg2) }

/* ─── CONTACT ─── */
.cgrid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6rem }
.cleft { position: sticky; top: 6rem }
.cemail { font-family: var(--head); font-size: clamp(2.5rem, 5.5vw, 5rem); letter-spacing: .04em; line-height: .95; display: block; border-bottom: 1px solid var(--line); padding-bottom: 2rem; margin-bottom: 2rem; transition: color .25s; color: #fff }
.cemail:hover { color: var(--fg2) }
.cirow { display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.05) }
.cil { font-family: var(--cond); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #2a2a2a }
.cir { font-family: var(--body); font-size: .85rem; color: #fff; transition: color .2s }
a.cir:hover { color: #fff }

.bmx { display: flex; align-items: center; gap: .9rem; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.4rem; margin-bottom: 2rem; transition: all .3s; cursor: none }
.bmx:hover { border-color: var(--line2); background: rgba(255,255,255,.02) }
.bmxico { width: 36px; height: 36px; border-radius: 9px; background: rgba(212,255,78,.06); border: 1px solid rgba(212,255,78,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem }
.bmxttl { font-family: var(--body); font-weight: 600; font-size: .9rem; color: #fff }
.bmxsub { font-size: .75rem; color: #333 }
.bmxarr { margin-left: auto; color: #fff; font-size: 1rem; transition: transform .3s, color .2s }
.bmx:hover .bmxarr { transform: translate(3px,-3px); color: var(--fg2) }

.cform { display: flex; flex-direction: column; gap: 1.4rem }
.crow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem }
.cfield { display: flex; flex-direction: column; gap: .4rem }
.clbl { font-family: var(--cond); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #333 }
.cinp { background: transparent; border: none; border-bottom: 1.5px solid rgba(255,255,255,.1); color: #fff; font-family: var(--body); font-size: .92rem; padding: .7rem 0; outline: none; transition: border-color .2s; appearance: none; width: 100%; font-weight: 400 }
.cinp:focus { border-bottom-color: rgba(255,255,255,.35) }
.cinp::placeholder { color: #2a2a2a }
.cinp option { background: #111; color: #fff }
optgroup { color: #555; font-style: normal }
.cta { min-height: 80px; resize: none }
.csub { display: flex; align-items: center; justify-content: space-between; background: var(--acc); color: #111; border: none; border-radius: 10px; padding: 1.1rem 1.8rem; font-family: var(--cond); font-size: .9rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: .4rem; transition: background .25s, transform .2s; cursor: none }
.csub:hover { background: transparent; transform: translateY(-2px) }
.csub .sarr { font-size: 1.1rem; transition: transform .3s }
.csub:hover .sarr { transform: translate(4px,-4px) }

/* ─── FOOTER ─── */
footer { border-top: 1px solid var(--line) }
.fmq { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.05); padding: .8rem 0 }
.fmqi { display: flex; width: max-content; animation: mr 35s linear infinite }
.fmqw { font-family: var(--head); font-size: .95rem; letter-spacing: .05em; color: #1a1a1a; padding: 0 1.5rem; white-space: nowrap }
.fbody { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 3rem; padding: 4rem 2.5rem }
.flogo { font-family: var(--head); font-size: 2.5rem; letter-spacing: .06em; color: #fff; margin-bottom: 1.2rem }
.fcopy { font-family: var(--cond); font-size: .72rem; color: #fff; line-height: 1.7; letter-spacing: .04em }
.fcols { display: flex; gap: 4rem }
.fcol { display: flex; flex-direction: column; gap: .6rem }
.fcolt { font-family: var(--cond); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .3rem }
.fcol a { font-family: var(--body); font-size: .85rem; color: #fff; transition: color .2s }
.fcol a:hover { color: #fff }
.fright { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem }
.fright a { font-family: var(--body); font-size: .85rem; color: #fff; transition: color .2s }
.fright a:hover { color: #fff }
.fpow { text-align: center; padding: 1rem 2.5rem; border-top: 1px solid rgba(255,255,255,.05); font-family: var(--cond); font-size: .7rem; color: #1a1a1a; letter-spacing: .06em }
.fpow a { color: rgba(255,255,255,.18); font-style: italic; transition: color .2s }
.fpow a:hover { color: #fff }

/* ─── TOAST ─── */
#toasts { position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 8000; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; pointer-events: none }
.ti { background: #111; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .9rem 1.4rem; font-size: .85rem; color: #fff; pointer-events: all; min-width: 250px; animation: fu .4s ease both }
.ti.ok  { border-left: 2.5px solid rgba(212,255,78,.7) }
.ti.err { border-left: 2.5px solid rgba(220,50,50,.7) }
.ti strong { display: block; color: #fff; font-weight: 600; margin-bottom: .12rem }

/* ─── MOBILE NAV ─── */
#mobnav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(10,10,10,.97); backdrop-filter: blur(20px); border-top: 1px solid var(--line); z-index: 480; justify-content: space-around; align-items: center; padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom)) }
.mni { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .4rem .6rem; color: #2a2a2a; transition: color .2s; flex: 1 }
.mni span { font-family: var(--cond); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase }
.mni svg { width: 18px; height: 18px }
.mni.on,.mni:hover { color: #fff }
.mni.cta { color: rgba(212,255,78,.4) !important }
.mni.cta.on,.mni.cta:hover { color: var(--acc) !important }

/* ─── REVEAL ─── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1) }
.rv.in { opacity: 1; transform: none }

/* ─── RESPONSIVE ─── */
@media (max-width: 1060px) {
  .wi { grid-template-columns: 50px 1fr 170px 24px }
  .wi-d { display: none }
  .bgrid,.agrid,.cgrid,.olayout { grid-template-columns: 1fr; gap: 3.5rem }
  .cleft { position: static }
}
@media (max-width: 860px) {
  #nav .nlinks,.ncta { display: none }
  .nmenu { display: block }
  .sec,.offer-layout { padding-left: 1.5rem; padding-right: 1.5rem }
  #hero { padding-left: 1.5rem; padding-right: 1.5rem }
  .hbot { grid-template-columns: 1fr auto }
  .hidx { display: none }
  .hpill:last-child { display: none }
  .igrid { grid-template-columns: 1fr }
  .irow:nth-child(2n) { border-right: 1px solid var(--line) }
  .irow:nth-last-child(-n+2) { border-bottom: 1px solid var(--line) }
  .irow:last-child { border-bottom: none }
  .fbody { display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem 1.5rem }
  .fcols { gap: 2rem }
  .fright { align-items: flex-start }
  #mobnav { display: flex }
  body { padding-bottom: 64px }
  .crow { grid-template-columns: 1fr }
  .wi { grid-template-columns: 40px 1fr 24px; gap: 1rem }
  .wi-tags { display: none }
}
@media (max-width: 560px) {
  .htitle { font-size: clamp(4.5rem, 19vw, 8rem) }
  .bchar { font-size: 5rem }
  .asn { font-size: clamp(4rem, 15vw, 6rem) }
}


/* ─── VISUAL PATCH ─── */
:root{
  --green:#f4c430;
  --green2:#d8a91a;
  --green3:rgba(244,196,48,.18);
  --panel:rgba(10,10,10,.52);
  --panel-strong:rgba(10,10,10,.72);
  --card-alt:rgba(244,196,48,.05);
  --card-alt-border:rgba(244,196,48,.18);
}
html, body { background: #080808; }

/* glass panels */
#promo,
#nav,
#mobnav,
footer {
  background: var(--panel);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
#promo { 
  background: rgba(62,48,10,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 35px rgba(0,0,0,.24);
}
#nav {
  background: rgba(8,8,8,.35);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
#nav.scrolled {
  background: var(--panel-strong);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
#mobnav {
  background: rgba(8,8,8,.62);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
footer {
  position: relative;
  background: rgba(8,8,8,.62);
  border-top: 1px solid rgba(255,255,255,.08);
}
footer::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(244,196,48,.04), rgba(255,255,255,0));
  pointer-events:none;
}

/* green actions */
.p-btn,
.ncta,
.opcta,
.csub,
.mni.cta {
  background: linear-gradient(180deg, var(--green), var(--green2));
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(244,196,48,.28);
  border: 1px solid rgba(255,255,255,.08);
}
.p-btn:hover,
.ncta:hover,
.opcta:hover,
.csub:hover,
.mni.cta:hover {
  background: linear-gradient(180deg, #ffd65a, #d8a91a);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(244,196,48,.34);
}
.ncta:hover { transform: translateY(-1px); }
.p-close { color:#fff; opacity:.8; }

.p-txt,.p-price,.ncta,.p-btn,.opcta,.csub,.mni.cta span { color:#fff !important; }

/* section highlighting */
#offer,
#bots,
#integrations,
#contact {
  background:
    linear-gradient(180deg, rgba(244,196,48,.035), rgba(244,196,48,0) 20%),
    var(--bg2);
}
#work,
#about {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 16%),
    #0c0c0c;
}
.shd {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(244,196,48,.14);
}
.sidx, .sttl, .ocardtag, .hstxt, .mw, .wi-n, .wi-d, .fcolt, .bfeats li, .bck {
  color:#e8d28a !important;
}

/* buttons and links */
.nlinks a::after,
.fcol a::after,
.bcta,
.cemail,
.fpoph,
.cln {
  border-color: rgba(244,196,48,.28);
}
.acc,.ottl span,.opnew,.otimer,.ock,.wcur,.mni.on,.bcta:hover,.fcol a:hover,.fright a:hover,.cemail:hover,.fpow a {
  color: var(--green) !important;
}
.hpill,
.obadge,
.wi-tag,
.cchip,
.bmxt,
.bmeta,
.itag {
  border-color: rgba(244,196,48,.24) !important;
  background: rgba(244,196,48,.06) !important;
  color: #fff1bc !important;
}

/* services / cards alt color */
.wi {
  border-top: 1px solid rgba(244,196,48,.10);
}
.wi:last-child { border-bottom: 1px solid rgba(244,196,48,.10); }
.wi::before {
  background: linear-gradient(90deg, rgba(244,196,48,.12), rgba(244,196,48,.04));
}
.wi:hover {
  background: rgba(244,196,48,.035);
}
.bcard,
.ocard,
.ccard,
.bmx {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005));
  border-color: rgba(244,196,48,.16);
}
.bcard.tg,
.ocard,
.bmx {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.16);
}
.bcico, .iico, .bmxico, .osbox {
  background: rgba(244,196,48,.10) !important;
  border-color: rgba(244,196,48,.24) !important;
  color: #f4c430 !important;
}

/* form controls */
.cinp {
  border-bottom-color: rgba(244,196,48,.24) !important;
}
.cinp:focus {
  border-bottom-color: var(--green) !important;
}
.csub[disabled] { opacity: .75; }

/* mobile nav active */
.mni.on {
  color: var(--green) !important;
}
.mni.on svg,
.mni.cta svg { color: currentColor; }

/* stronger white text */
.hdesc,.bcdesc,.osdsc,.odesc,.fcopy,.fpow,.fright a,.fcol a,.clbl,.cdesc,.iname,.idesc,.bmtxt,.ctxt,.oli,.osttl {
  color:#fff !important;
}


/* ═══════════════════════════════════════
   PATCH v3 — cookie, form success, hero offer block, mobile nav, discount popup
   ═══════════════════════════════════════ */

/* ── COOKIE BANNER ── */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9200;
  width: min(380px, calc(100vw - 32px));
  background: linear-gradient(160deg, rgba(20,18,10,.98) 0%, rgba(10,10,10,.98) 100%);
  border: 1px solid rgba(244,196,48,.22);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .38s ease;
  pointer-events: none;
}
.cookie-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top left, rgba(244,196,48,.12), transparent 55%);
  pointer-events: none;
}
.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cb-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1.05rem;
}
.cb-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(244,196,48,.16), rgba(244,196,48,.06));
  border: 1px solid rgba(244,196,48,.22);
  font-size: 1.2rem;
  color: #f4c430;
  margin-top: .1rem;
}
.cb-body { flex: 1; min-width: 0; }
.cb-ttl {
  font-family: var(--cond);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .35rem;
}
.cb-txt {
  font-size: .79rem;
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  margin: 0;
}
.cb-txt a {
  color: #f4c430;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,196,48,.3);
  transition: color .2s;
}
.cb-txt a:hover { color: #fff; }
.cb-ok {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 38px;
  padding: 0 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd65a, #e8b91f);
  border: none;
  color: #111 !important;
  font-family: var(--cond);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(244,196,48,.28), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s, box-shadow .2s;
  margin-top: .1rem;
  white-space: nowrap;
}
.cb-ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(244,196,48,.36);
}

/* ── FORM SUCCESS STATE ── */
.cform-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(244,196,48,.18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(244,196,48,.06), rgba(244,196,48,.02));
  margin-top: 1rem;
  animation: fi .55s ease both;
}
.cform-success-ico {
  font-size: 2.8rem;
  color: #f4c430;
  line-height: 1;
}
.cform-success-title {
  font-family: var(--head);
  font-size: 2rem;
  letter-spacing: .06em;
  color: #fff;
  line-height: 1;
}
.cform-success-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  max-width: 32ch;
}

/* ── HERO OFFER BLOCK ── */
.hdesc-offer-block {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding: .5rem .9rem .5rem .55rem;
  border: 1px solid rgba(244,196,48,.22);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244,196,48,.1), rgba(244,196,48,.04));
  box-shadow: 0 0 0 4px rgba(244,196,48,.04), inset 0 1px 0 rgba(255,255,255,.07);
  align-self: center;
  width: fit-content;
}
.hdesc-offer-label {
  font-family: var(--cond);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #111;
  background: linear-gradient(180deg, #ffd65a, #e8b91f);
  padding: .28rem .65rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(244,196,48,.3);
}
.hdesc-offer-text {
  font-family: var(--cond);
  font-size: .85rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}
.hdesc-offer-text .acc {
  color: #f4c430 !important;
  font-weight: 800;
}

/* ── MOBILE NAV OVERHAUL ── */
@media (max-width: 860px) {
  body { padding-bottom: 80px; }
  #mobnav {
    height: 72px;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    gap: 0;
    justify-content: stretch;
  }
  .mni {
    flex: 1;
    padding: 8px 4px 6px;
    gap: 3px;
    border-radius: 14px;
    transition: color .2s, background .2s;
    min-width: 0;
  }
  .mni span {
    font-size: .5rem;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .mni svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .mni:hover, .mni.on {
    background: rgba(255,255,255,.04);
  }
  /* CTA button — центральная */
  .mni.mni-cta {
    flex: 1.4;
    background: linear-gradient(180deg, rgba(244,196,48,.18), rgba(244,196,48,.08));
    border: 1px solid rgba(244,196,48,.28);
    color: #f4c430 !important;
    box-shadow: 0 4px 18px rgba(244,196,48,.12);
    padding: 8px 6px 6px;
  }
  .mni.mni-cta span {
    color: #f4c430 !important;
    font-weight: 700;
  }
  .mni.mni-cta svg { color: #f4c430 !important; }
  .mni.mni-cta.on,
  .mni.mni-cta:hover {
    background: linear-gradient(180deg, rgba(244,196,48,.28), rgba(244,196,48,.14));
    border-color: rgba(244,196,48,.45);
    box-shadow: 0 6px 24px rgba(244,196,48,.22);
  }

  /* nav — скрываем десктопную кнопку Меню */
  .nmenu { display: none !important; }

  /* discount popup above mobile nav */
  .discount-popup {
    bottom: 88px !important;
  }
  /* cookie above mobile nav */
  .cookie-banner {
    bottom: 88px;
    left: 12px;
    width: calc(100vw - 24px);
  }
}

@media (max-width: 400px) {
  .mni span { font-size: .45rem; }
  .mni { padding: 7px 2px 5px; }
}

/* ── DISCOUNT POPUP — центр + улучшен ── */
.discount-popup {
  left: 50% !important;
  right: auto !important;
  bottom: 32px;
  transform: translate(-50%, calc(100% + 50px)) !important;
  width: min(440px, calc(100vw - 32px)) !important;
  text-align: center;
  padding: 1.6rem 1.4rem 1.4rem;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(22,18,8,.99) 0%, rgba(10,10,10,.99) 100%);
  border: 1px solid rgba(244,196,48,.25);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 60px rgba(244,196,48,.06), inset 0 1px 0 rgba(255,255,255,.05);
}
.discount-popup.show {
  transform: translate(-50%, 0) !important;
}
.discount-popup::before {
  background: radial-gradient(circle at 50% 0%, rgba(244,196,48,.22), transparent 55%);
}
.discount-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .9rem;
  border-radius: 999px;
  background: rgba(244,196,48,.1);
  border: 1px solid rgba(244,196,48,.22);
  font-size: .62rem;
  letter-spacing: .16em;
  color: #f8e8b0;
  margin: 0 auto 1rem;
  animation: pulse-badge 2.5s ease infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,196,48,.2); }
  50% { box-shadow: 0 0 0 6px rgba(244,196,48,0); }
}
.discount-popup-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: .7rem;
  background: linear-gradient(180deg, #fff 60%, rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.discount-popup-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .72rem 1.2rem;
  margin: 0 auto 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(244,196,48,.4);
  background: rgba(244,196,48,.07);
  width: 100%;
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.7);
}
.discount-popup-code span {
  font-size: 1.1rem;
  letter-spacing: .22em;
  color: #f4c430;
  font-weight: 800;
}
.discount-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 54px;
  border-radius: 18px;
  font-size: .82rem;
  background: linear-gradient(180deg, #ffd65a, #e5b518);
  box-shadow: 0 16px 40px rgba(244,196,48,.3), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .22s, box-shadow .22s;
}
.discount-popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(244,196,48,.38);
}

/* ── MODALS — более красивые ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  position: relative;
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(22,20,14,.99) 0%, rgba(10,10,10,.99) 100%);
  border: 1px solid rgba(244,196,48,.2);
  border-radius: 28px;
  padding: 2rem;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform: translateY(20px) scale(.97);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(244,196,48,.2) transparent;
}
.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}
.modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(244,196,48,.5), rgba(244,196,48,.1), transparent);
  border-radius: 28px 28px 0 0;
}
.modal-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(244,196,48,.18);
  background: rgba(244,196,48,.07);
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.modal-close:hover {
  background: rgba(244,196,48,.15);
  color: #fff;
  transform: rotate(90deg);
}
.modal-hd {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
  padding-right: 3rem;
}
.modal-num {
  font-family: var(--head);
  font-size: 3rem;
  line-height: 1;
  color: rgba(244,196,48,.25);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--head);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: .04em;
  color: #fff;
  line-height: 1;
  margin-bottom: .3rem;
}
.modal-sub {
  font-family: var(--cond);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.8rem;
}
.modal-body.single { grid-template-columns: 1fr; }
.modal-desc p {
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  font-size: .95rem;
  margin-bottom: 1.25rem;
}
.modal-feats {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.mf {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .8rem;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.055);
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  transition: background .2s, border-color .2s;
}
.mf:hover {
  background: rgba(244,196,48,.05);
  border-color: rgba(244,196,48,.15);
}
.mf i {
  color: #f4c430;
  width: 16px;
  text-align: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.mex-label {
  font-family: var(--cond);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .85rem;
}
.mex-item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  margin-bottom: .85rem;
  transition: border-color .2s, transform .22s;
  text-decoration: none;
}
.mex-item:hover {
  border-color: rgba(244,196,48,.2);
  transform: translateY(-3px);
}
.mex-img {
  width: 100%; height: 120px;
  background: rgba(255,255,255,.04);
  overflow: hidden; position: relative;
}
.mex-img img { width:100%; height:100%; object-fit:cover; }
.mex-img.wide { height: 140px; }
.mex-ov {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  color: #fff; font-size: .8rem;
  opacity: 0; transition: opacity .22s;
}
.mex-item:hover .mex-ov { opacity: 1; }
.mex-name {
  font-family: var(--cond); font-size: .82rem;
  font-weight: 700; letter-spacing: .06em;
  color: #fff; padding: .65rem .85rem .1rem;
}
.mex-type {
  font-size: .75rem; color: rgba(255,255,255,.45);
  padding: 0 .85rem .7rem;
}
.mex-bot {
  display: flex; gap: 1rem; align-items: center;
  padding: .85rem; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  margin-bottom: .75rem;
  transition: border-color .2s, transform .22s;
}
.mex-bot:hover {
  border-color: rgba(0,136,204,.3);
  transform: translateY(-2px);
  background: rgba(0,136,204,.04);
}
.mex-bot-img {
  width: 48px; height: 48px; border-radius: 14px;
  overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.mex-bot-img img { width:100%; height:100%; object-fit:cover; }
.mex-bot-handle {
  font-family: var(--cond); font-size: .82rem;
  font-weight: 700; letter-spacing: .06em; color: #fff;
}
.mex-bot-desc { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: .2rem; }
.mex-bot-link {
  font-size: .72rem; color: #29b5e8; margin-top: .35rem;
  display: block; letter-spacing: .04em;
}
.modal-ft {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap;
}
.modal-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 50px; padding: 0 1.5rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffd65a, #e5b518);
  color: #111 !important;
  font-family: var(--cond);
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; border: none; cursor: pointer;
  box-shadow: 0 12px 30px rgba(244,196,48,.25), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s, box-shadow .2s;
}
.modal-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(244,196,48,.34); }
.modal-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.modal-tags span {
  font-family: var(--cond); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .28rem .65rem;
  border-radius: 999px; background: rgba(244,196,48,.07);
  border: 1px solid rgba(244,196,48,.18); color: #f8e8b0;
}
.modal-indev {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: 16px;
  border: 1px dashed rgba(244,196,48,.2);
  background: rgba(244,196,48,.04);
  margin-top: 1rem;
}
.modal-indev i { color: #f4c430; font-size: 1.2rem; margin-top: .1rem; }
.mid-t {
  font-family: var(--cond); font-size: .78rem;
  font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
}
.mid-s { font-size: .82rem; color: rgba(255,255,255,.5); margin-top: .3rem; }
.modal-desc.full { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .modal-box { padding: 1.4rem 1.1rem; border-radius: 22px; }
  .modal-body { grid-template-columns: 1fr; gap: 1.4rem; }
  .modal-ft { flex-direction: column; align-items: stretch; }
  .modal-cta { justify-content: center; }
}


/* ═══════════════════════════════════════
   PATCH v4 — discount modal centered, cookie bar, mobile fixes, promo bar
   ═══════════════════════════════════════ */

/* ── DISCOUNT POPUP — настоящий центрированный модал ── */
.discount-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 8200;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.discount-overlay.show { opacity: 1; pointer-events: auto; }

.discount-popup {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -40%) scale(.94) !important;
  width: min(460px, calc(100vw - 32px)) !important;
  z-index: 8300;
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease !important;
  text-align: center;
  padding: 2rem 1.8rem 1.8rem !important;
  border-radius: 28px !important;
  background: linear-gradient(160deg, rgba(22,18,8,.99) 0%, rgba(10,10,10,.99) 100%) !important;
  border: 1px solid rgba(244,196,48,.28) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 80px rgba(244,196,48,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.discount-popup.show {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.discount-popup::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% -10%, rgba(244,196,48,.18), transparent 55%);
  pointer-events: none;
}
.discount-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(244,196,48,.1);
  border: 1px solid rgba(244,196,48,.24);
  font-family: var(--cond);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f8e8b0;
  margin: 0 auto 1.1rem;
  animation: pulse-badge 2.5s ease infinite;
}
.discount-popup-title {
  font-family: var(--head);
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: .95;
  color: #fff;
  margin-bottom: .8rem;
  background: linear-gradient(180deg, #fff 55%, rgba(255,255,255,.65));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.discount-popup-code {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .85rem 1.2rem;
  margin: 0 auto 1rem;
  border-radius: 16px;
  border: 1.5px dashed rgba(244,196,48,.45);
  background: rgba(244,196,48,.07);
  width: 100% !important;
  font-family: var(--cond);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.discount-popup-code span {
  font-family: var(--head);
  font-size: 1.4rem !important;
  letter-spacing: .22em;
  color: #f4c430 !important;
  font-weight: 800;
}
.discount-popup-text {
  font-size: .84rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin: 0 0 1.1rem;
  text-align: center;
  max-width: none !important;
}
.discount-popup-text strong { color: #fff; }
.dp-note {
  display: block;
  margin-top: .4rem;
  font-size: .75rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .02em;
}
.discount-popup-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px !important;
  border-radius: 18px !important;
  font-family: var(--cond) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: #111 !important;
  background: linear-gradient(180deg, #ffd65a, #e5b518) !important;
  box-shadow: 0 16px 40px rgba(244,196,48,.3), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition: transform .22s, box-shadow .22s;
  text-decoration: none;
  width: 100%;
}
.discount-popup-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 50px rgba(244,196,48,.4) !important;
}
.discount-popup-close {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: .9rem !important;
  transition: background .2s, color .2s !important;
  z-index: 2;
}
.discount-popup-close:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* ── PROMO BAR — mobile fix ── */
@media (max-width: 860px) {
  #promo {
    gap: .6rem !important;
    padding: .55rem 2.8rem .55rem 1rem !important;
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .p-txt {
    font-size: .65rem !important;
    letter-spacing: .08em !important;
    text-align: center;
  }
  .p-price {
    font-size: 1rem !important;
  }
  .p-btn {
    font-size: .62rem !important;
    padding: .28rem .7rem !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 50px !important;
    white-space: nowrap;
  }
  .p-close {
    position: absolute !important;
    right: .65rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: .7 !important;
    width: 28px !important;
    height: 28px !important;
    font-size: .95rem !important;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── COOKIE BAR — длинная строка снизу слева ── */
.cookie-banner {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  width: min(520px, calc(100vw - 40px)) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: linear-gradient(90deg, rgba(16,14,6,.98) 0%, rgba(10,10,10,.98) 100%) !important;
  border: 1px solid rgba(244,196,48,.18) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04) !important;
  z-index: 9200 !important;
  transform: translateY(calc(100% + 32px)) !important;
  opacity: 0 !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease !important;
  pointer-events: none !important;
  display: block !important;
}
.cookie-banner.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cookie-banner::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 0% 50%, rgba(244,196,48,.08), transparent 50%);
  pointer-events: none;
}
.cb-wrap {
  display: flex !important;
  align-items: center !important;
  gap: .85rem !important;
  padding: .9rem 1rem .9rem 1rem !important;
}
.cb-ico {
  flex: 0 0 auto !important;
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  background: rgba(244,196,48,.1) !important;
  border: 1px solid rgba(244,196,48,.2) !important;
  font-size: 1rem !important;
  color: #f4c430 !important;
  display: grid; place-items: center;
}
.cb-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .12rem !important;
}
.cb-ttl {
  font-family: var(--cond) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}
.cb-txt {
  font-size: .75rem !important;
  color: rgba(255,255,255,.5) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-ok {
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 1.1rem !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffd65a, #e8b91f) !important;
  border: none !important;
  color: #111 !important;
  font-family: var(--cond) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(244,196,48,.25) !important;
  transition: transform .2s, box-shadow .2s !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
}
.cb-ok:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(244,196,48,.35) !important;
}

/* cookie above mobile nav on small screens */
@media (max-width: 860px) {
  .cookie-banner {
    bottom: 84px !important;
    left: 10px !important;
    width: calc(100vw - 20px) !important;
  }
  .cb-txt { white-space: normal !important; }
}

/* discount popup above mobile nav */
@media (max-width: 860px) {
  .discount-popup {
    width: calc(100vw - 32px) !important;
  }
}

/* ── MOBILE PERFORMANCE — reduce animations on mobile ── */
@media (max-width: 860px) {
  /* Disable heavy parallax/cursor on mobile */
  #cur, #dot { display: none !important; }

  /* Reduce transition complexity */
  .rv {
    transition: opacity .5s ease, transform .5s ease !important;
  }

  /* Fix oversized elements */
  .htitle {
    font-size: clamp(3.8rem, 18vw, 7rem) !important;
  }
  .fmlink {
    font-size: clamp(2.2rem, 7vw, 4.5rem) !important;
  }
  .obgt {
    font-size: clamp(6rem, 20vw, 12rem) !important;
  }
  .asn {
    font-size: clamp(3rem, 12vw, 5rem) !important;
  }
  .bchar {
    font-size: clamp(3.5rem, 12vw, 5rem) !important;
  }

  /* hero padding fix */
  #hero {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  .sec {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  /* offer block */
  .olayout {
    gap: 2.5rem !important;
  }
  .ocard { margin-top: 0 !important; }

  /* contact form */
  .cgrid {
    gap: 2rem !important;
  }
  .crow {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: calc(1.5rem * 2 + 1.5rem + 2rem + 38px) !important;
  }
  .sec {
    padding: 4rem 1rem !important;
  }
  #offer {
    padding: 4rem 1rem !important;
  }
  .htitle {
    font-size: clamp(3.2rem, 16vw, 6rem) !important;
  }
  .hero-stats-row {
    display: none !important;
  }
  .hdesc-offer-block {
    flex-wrap: wrap;
    gap: .5rem;
  }
}


/* ═══════════════════════════════════════
   PATCH v5 — final mobile fix, hero cards, logo white, form debug
   ═══════════════════════════════════════ */

/* ── LOGO ALWAYS WHITE ── */
.nlogo, .nlogo:hover, .nlogo:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Hero title all white */
.hero-word, .hero-word-light, .hero-word-dark,
.hl, .htitle, .htitle span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── HERO DESCRIPTION CARDS ── */
.hdesc-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hdesc-card {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-family: var(--cond);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.hdesc-card-ico {
  color: var(--acc);
  font-size: .65rem;
}

/* ── MOBILE NAV — full redesign ── */
@media (max-width: 860px) {
  /* Nav: logo centered */
  #nav {
    justify-content: center !important;
    padding: 1rem 1.2rem !important;
  }
  .nlogo {
    font-size: 1.3rem !important;
    letter-spacing: .08em !important;
    opacity: 1 !important;
    animation: none !important;
    color: #fff !important;
  }
  .nlinks, .ncta {
    display: none !important;
  }

  /* Hero CTA buttons — normal size */
  .hero-cta {
    min-height: 48px !important;
    padding: 0 1.2rem !important;
    font-size: .76rem !important;
    border-radius: 14px !important;
  }
  .hero-cta-row-top {
    flex-direction: column !important;
    gap: .7rem !important;
    width: 100% !important;
  }
  .hero-cta-row-top .hero-cta {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Promo bar — compact single line */
  #promo {
    flex-wrap: nowrap !important;
    padding: .5rem 2.5rem .5rem .9rem !important;
    gap: .5rem !important;
    justify-content: flex-start !important;
    min-height: auto !important;
  }
  .promo-ico { font-size: .85rem !important; flex-shrink: 0; }
  .p-txt {
    font-size: .6rem !important;
    letter-spacing: .06em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .p-price {
    font-size: .9rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .p-btn {
    font-size: .58rem !important;
    padding: .22rem .6rem !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 50px !important;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent !important;
    box-shadow: none !important;
  }
  .p-close {
    position: absolute !important;
    right: .6rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important; height: 26px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: .8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .85rem !important;
    color: #fff !important;
    z-index: 5;
  }

  /* Hero padding with promo+nav */
  #hero {
    padding-top: calc(1rem * 2 + 1.3rem + 2rem + 38px + 4px) !important;
  }

  /* hdesc cards - wrap nicely */
  .hdesc-cards {
    gap: .4rem !important;
    margin-bottom: .75rem !important;
  }
  .hdesc-card {
    font-size: .6rem !important;
    padding: .3rem .65rem !important;
  }
  .hdesc { text-align: center !important; font-size: .92rem !important; }
  .hdesc-offer-block {
    margin-top: .8rem !important;
  }

  /* Mobile nav bottom bar */
  #mobnav {
    height: 68px !important;
    padding: 0 6px !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .mni {
    padding: 7px 3px 5px !important;
    border-radius: 12px !important;
    gap: 2px !important;
  }
  .mni svg { width: 19px !important; height: 19px !important; }
  .mni span { font-size: .48rem !important; letter-spacing: .05em !important; }
  .mni.mni-cta {
    flex: 1.5 !important;
    border-radius: 14px !important;
  }

  /* body bottom padding for mobnav */
  body { padding-bottom: 76px !important; }

  /* cookie and discount above mobnav */
  .cookie-banner { bottom: 80px !important; }
  .discount-popup { /* stays centered via top:50% */ }
}

@media (max-width: 480px) {
  .hdesc-card:nth-child(3) { display: none; }  /* hide 3rd on very small */
  #hero {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }
  .sec, #offer { padding-left: .9rem !important; padding-right: .9rem !important; }
}

/* ── COOKIE BANNER z-index fix — always visible ── */
.cookie-banner {
  z-index: 9500 !important;
}
/* Ensure it starts hidden but is in DOM */
.cookie-banner:not(.show) {
  transform: translateY(calc(100% + 32px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cookie-banner.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── TOAST — bigger and more visible ── */
#toasts {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 9900;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;
}
.ti {
  font-family: var(--cond);
  font-size: .82rem;
  letter-spacing: .06em;
  padding: .85rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  animation: fi .35s ease both;
  max-width: 320px;
}
.ti.ok {
  background: rgba(20,40,20,.95);
  border-color: rgba(80,200,80,.3);
  color: #a0e8a0;
}
.ti.err {
  background: rgba(40,15,15,.95);
  border-color: rgba(220,60,60,.3);
  color: #f4a0a0;
}
.ti strong { color: #fff; display: block; margin-bottom: .15rem; }


/* PATCH v6 — centered toasts + required field states */
#toasts {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  align-items: center !important;
  width: min(92vw, 460px);
}
.ti {
  width: 100%;
  max-width: 460px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  text-align: center;
}
.cinp.is-invalid,
.custom-select.is-invalid .custom-select-trigger {
  border-color: rgba(255,90,90,.85) !important;
  box-shadow: 0 0 0 3px rgba(255,90,90,.14) !important;
}
.cagree input.is-invalid {
  outline: 2px solid rgba(255,90,90,.85);
  outline-offset: 3px;
}
.csub[disabled] {
  opacity: .72;
  cursor: wait;
}


/* PATCH v8 — success only in modal */
.success-modal-overlay {
  z-index: 10020;
}
.success-modal-box {
  max-width: 520px;
  width: min(92vw, 520px);
  text-align: center;
  padding: 2.2rem 1.5rem 1.5rem;
}
.success-modal-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #111;
  font-size: 2.1rem;
  background: linear-gradient(180deg, #ffd65a, #e8b91f);
  box-shadow: 0 16px 40px rgba(244,196,48,.32), inset 0 1px 0 rgba(255,255,255,.38);
}
.success-modal-title {
  margin: 0 0 .7rem;
  font-family: var(--head);
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: .05em;
  color: #fff;
  text-transform: uppercase;
}
.success-modal-text {
  margin: 0 auto 1.3rem;
  max-width: 34ch;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: .96rem;
}
.success-modal-btn {
  width: 100%;
  justify-content: center;
}
#cformSuccess {
  display: none !important;
}


/* ═══════════════════════════════════════════════
   FIX 1 – Hero title: no break between words
   Keep "KOMPLEKTOFF" on one line, no orphan
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-title-inline {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    line-height: .88 !important;
  }
  .hero-word {
    display: inline !important;
    white-space: nowrap;
  }
  /* Force "Komple" and "ktoff" to stay on same line, "Labs" on next */
  .hero-word-light:first-child::after { content: none; }
  .hero-word-dark { display: inline !important; }
  .hero-word-light:last-child {
    display: block !important;
    margin-top: .04em;
  }
  /* Fit the full name without overflow */
  .htitle {
    font-size: clamp(3rem, 15.5vw, 6rem) !important;
  }
}

/* ═══════════════════════════════════════════════
   FIX 2 – Bottom nav: floating pill / arc shape
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mobnav {
    /* Float above the screen edge */
    bottom: 14px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;

    /* Pill / arc shape */
    border-radius: 28px !important;
    border-top: none !important;
    border: 1px solid rgba(255,255,255,.08) !important;

    /* Glass morphism */
    background: rgba(12,12,12,.88) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;

    /* Shadow glow */
    box-shadow:
      0 8px 32px rgba(0,0,0,.55),
      0 2px 0 rgba(255,255,255,.04) inset,
      0 0 0 1px rgba(255,255,255,.05) inset !important;

    /* Layout */
    height: 68px !important;
    padding: 0 8px !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 4px !important;
  }

  /* Increase body padding so content clears the floating nav */
  body {
    padding-bottom: 100px !important;
  }

  /* Cookie / toasts above the floating nav */
  .cookie-banner { bottom: 96px !important; }
  #toasts { bottom: 96px !important; }
  .discount-popup { bottom: 96px !important; }

  /* Nav items */
  .mni {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 8px 4px !important;
    border-radius: 20px !important;
    transition: background .2s, color .2s !important;
    color: rgba(255,255,255,.35) !important;
    min-width: 0;
  }
  .mni svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }
  .mni span {
    font-size: .48rem !important;
    letter-spacing: .07em !important;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mni.on, .mni:hover {
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
  }

  /* CTA button — golden pill in the center */
  .mni.mni-cta {
    flex: 1.6 !important;
    background: linear-gradient(160deg, #f4c430 0%, #d9a414 100%) !important;
    border-radius: 20px !important;
    color: #111 !important;
    padding: 10px 6px !important;
    box-shadow: 0 4px 18px rgba(212,180,30,.35) !important;
  }
  .mni.mni-cta svg { color: #111 !important; }
  .mni.mni-cta span { color: #111 !important; font-weight: 700 !important; }
  .mni.mni-cta:hover {
    background: linear-gradient(160deg, #ffd84d 0%, #e8b31a 100%) !important;
    box-shadow: 0 6px 24px rgba(212,180,30,.5) !important;
  }

  /* Old .mni.cta compatibility */
  .mni.cta {
    flex: 1.6 !important;
    background: linear-gradient(160deg, #f4c430 0%, #d9a414 100%) !important;
    border-radius: 20px !important;
    color: #111 !important;
    padding: 10px 6px !important;
    box-shadow: 0 4px 18px rgba(212,180,30,.35) !important;
  }
  .mni.cta svg, .mni.cta span { color: #111 !important; }
  .mni.cta.on, .mni.cta:hover {
    background: linear-gradient(160deg, #ffd84d 0%, #e8b31a 100%) !important;
    color: #111 !important;
  }
}


/* ═══════════════════════════════════════════════════
   FIX 3 – Hero: убрать пробел между "Komple" "ktoff"
   Пробел появляется из-за whitespace в HTML между span.
   word-spacing:-0.35em на контейнере схлопывает его.
   ═══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .hero-title-inline {
    word-spacing: -0.32em !important;
  }
  /* но между строками (Labs) пробел не нужен, он block */
  .hero-word-light:last-child {
    word-spacing: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   FIX 4 – Bots секция: центр на мобиле
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* левая колонка bots — центрируем всё */
  .bgrid > .rv:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .brollw {
    width: 100% !important;
    text-align: center !important;
  }
  .brollt {
    align-items: center !important;
  }
  .bchars {
    justify-content: center !important;
  }
  .bcta {
    text-align: center !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════
   FIX 5 – hero-content-block: центр на мобиле
   Блок с бейджами / hdesc / акция-баннером
   ═══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .hero-content-block {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .hdesc-cards {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .hdesc {
    text-align: center !important;
    width: 100% !important;
  }
  .hdesc-offer-block {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }
}