/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
:root {
  --blue: #0057FF;
  --blue-d: #0048d8;
  --blue-dim: rgba(0,87,255,0.08);
  --black: #060608;
  --g1: #f7f7f8;
  --g2: #efefef;
  --g3: #d0d0d4;
  --gt: #6e6e80;
  --gl: #9898a8;
  --f: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --sh-lg: 0 20px 60px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--f);
  background: #fff;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background:var(--blue); color:#fff }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--g3); border-radius:3px }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: 60px;
  display: flex; align-items: center;
  padding: 0 max(20px, calc(50% - 540px));
  transition: background .25s, box-shadow .25s;
}
header.scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.07);
}
.nav {
  width:100%; display:flex;
  align-items:center; justify-content:space-between; gap:20px;
  position:relative;
}
.nav-links-center {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:2px;
}
.logo {
  font-size:19px; font-weight:800; letter-spacing:-.5px;
  background:none; border:none; cursor:pointer;
  padding:0; line-height:1; font-family:var(--f);
}
.logo span { color:var(--blue) }
.nav-links { display:flex; gap:2px }
.nav-links button {
  background:none; border:none; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--gt);
  padding:6px 11px; border-radius:8px;
  transition:color .15s, background .15s; font-family:var(--f);
}
.nav-links button:hover { color:var(--black); background:var(--g1) }
.nav-right { display:flex; align-items:center; gap:10px }
.lang-sw { display:flex; background:var(--g1); border-radius:9px; padding:2px; gap:1px }
.lang-btn {
  border:none; background:none; cursor:pointer;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px;
  color:var(--gt); font-family:var(--f);
  transition:all .18s; text-transform:uppercase; letter-spacing:.04em;
}
.lang-btn.on { background:#fff; color:var(--black); box-shadow:0 1px 4px rgba(0,0,0,.1) }
.nav-cta {
  background:var(--blue); color:#fff; border:none;
  padding:8px 18px; border-radius:10px; font-size:13px;
  font-weight:600; cursor:pointer; font-family:var(--f);
  transition:all .2s;
}
.nav-cta:hover { background:var(--blue-d); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,87,255,.3) }
.mob-menu-btn {
  display:none; background:none; border:none; cursor:pointer;
  padding:6px; border-radius:8px; transition:background .15s;
}
.mob-menu-btn:hover { background:var(--g1) }

/* ═══════════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════════ */
.mob-menu {
  display:none; position:fixed; inset:0; z-index:90;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  flex-direction:column;
  padding:76px 24px 32px;
}
.mob-menu.open { display:flex }
.mob-menu a {
  text-decoration:none;
  font-size:26px; font-weight:700; color:var(--black);
  padding:16px 0; border-bottom:1px solid var(--g2);
  letter-spacing:-.02em;
  cursor:pointer;
}
.mob-menu-cta {
  margin-top:20px; background:var(--blue); color:#fff;
  border:none; font-size:16px; font-weight:600;
  padding:16px; border-radius:14px; cursor:pointer;
  font-family:var(--f); transition:background .2s;
}
.mob-menu-cta:hover { background:var(--blue-d) }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 100px 20px 80px;
  position:relative; overflow:hidden;
}
.hero-orbs { position:absolute; inset:0; pointer-events:none; overflow:hidden }
.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); will-change:transform;
  animation: orbFloat 8s ease-in-out infinite;
}
.o1 { width:520px; height:520px; background:#c7daff; top:-120px; left:-120px; opacity:.38; animation-delay:0s; }
.o2 { width:420px; height:420px; background:#dce8ff; bottom:-100px; right:-100px; opacity:.38; animation-delay:-3s; }
.o3 { width:280px; height:280px; background:#e8f0ff; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.2; animation-delay:-5s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(12px, -16px) scale(1.04); }
  66%       { transform: translate(-8px, 10px) scale(.97); }
}

.hero-inner { position:relative; max-width:700px; margin:0 auto }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--g2); background:#fff;
  padding:5px 14px 5px 8px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--gt);
  margin-bottom:28px; box-shadow:var(--sh-sm);
}
.badge-pill {
  background:var(--blue); color:#fff; font-size:10px;
  font-weight:700; padding:3px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.05em;
}
.hero h1 {
  font-size: clamp(34px, 6.5vw, 68px);
  font-weight:900; line-height:1.06;
  letter-spacing:-.03em; color:var(--black); margin-bottom:18px;
}
.hero h1 em { font-style:italic; color:var(--blue) }
.hero-sub {
  font-size:17px; color:var(--gt); line-height:1.65;
  max-width:450px; margin:0 auto 34px; font-weight:400;
}
.hero-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 26px; border-radius:12px; font-size:15px;
  font-weight:600; cursor:pointer; border:none;
  font-family:var(--f); letter-spacing:-.01em; transition:all .2s;
}
.btn-dark { background:var(--black); color:#fff }
.btn-dark:hover { background:#1a1a2e; transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.22) }
.btn-ghost { background:transparent; color:var(--black); border:1.5px solid var(--g2) }
.btn-ghost:hover { border-color:var(--g3); background:var(--g1) }

/* ═══════════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════════ */
.sec { padding:96px 20px }
.sec-w { max-width:1100px; margin:0 auto }
.sec-head { text-align:center; margin-bottom:52px }
.chip {
  display:inline-block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue); background:var(--blue-dim);
  padding:5px 14px; border-radius:999px; margin-bottom:14px;
}
.sec-title {
  font-size:clamp(24px,3.5vw,40px); font-weight:800;
  letter-spacing:-.025em; color:var(--black);
  line-height:1.1; margin-bottom:10px;
}
.sec-sub { font-size:16px; color:var(--gt); line-height:1.6 }

/* ═══════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════ */
.svcs-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.card {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--g2);
  border-radius:24px; padding:28px;
  box-shadow:var(--sh-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  position:relative; overflow:hidden;
}
.card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--g3) }
.card:hover::after { transform:scaleX(1) }
.card.feat { background:var(--black); border-color:var(--black) }
.card.feat:hover { border-color:#2a2a2a }
.c-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:14px;
}
.ic-dk { background:rgba(255,255,255,.1) }
.ic-bl { background:var(--blue-dim) }
.ic-lt { background:var(--g1) }
.c-tag {
  display:inline-block; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:999px; margin-bottom:12px;
}
.tg-beta { background:rgba(255,165,0,.12); color:#9a5c00 }
.tg-hot  { background:var(--blue); color:#fff }
.tg-new  { background:rgba(16,185,129,.1); color:#0a6644 }
.card h3 {
  font-size:18px; font-weight:700; letter-spacing:-.02em;
  line-height:1.25; margin-bottom:8px; color:var(--black);
}
.card.feat h3 { color:#fff }
.c-desc { font-size:13.5px; line-height:1.65; color:var(--gt); flex-grow:1 }
.card.feat .c-desc { color:rgba(255,255,255,.48) }
.c-feats { list-style:none; margin:16px 0 20px; display:flex; flex-direction:column; gap:8px }
.c-feats li { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; color:var(--gt) }
.card.feat .c-feats li { color:rgba(255,255,255,.65) }
.fi-dot { font-size:10px; margin-top:2px; flex-shrink:0 }
.c-foot {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-top:18px; margin-top:auto;
  border-top:1px solid var(--g2);
}
.card.feat .c-foot { border-top-color:rgba(255,255,255,.1) }
.c-price { font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--black) }
.card.feat .c-price { color:#fff }
.c-period { font-size:11px; color:var(--gl); margin-top:3px }
.card.feat .c-period { color:rgba(255,255,255,.32) }
.c-btn {
  border:none; padding:9px 16px; border-radius:10px;
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:var(--f); transition:all .2s; flex-shrink:0;
}
.c-btn:hover { transform:scale(1.05) }
.cb-wh { background:#fff; color:var(--black) }
.cb-wh:hover { background:var(--g1) }
.cb-lt { background:var(--g1); color:var(--black) }
.cb-lt:hover { background:var(--g2) }
.cb-dark { background:var(--black); color:#fff }
.cb-dark:hover { background:#1a1a2e }
.cb-blue { background:var(--blue); color:#fff }
.cb-blue:hover { background:var(--blue-d) }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.about { background:var(--black) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.about-text .chip { color:var(--blue); background:rgba(0,87,255,.15) }
.about-text .sec-title { color:#fff; margin-bottom:16px }
.about-text p { font-size:16px; color:rgba(255,255,255,.42); line-height:1.75 }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.stat-card {
  padding:22px 16px; border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.stat-val {
  font-size:32px; font-weight:900;
  color:var(--blue); letter-spacing:-.04em; line-height:1;
  transition: all 0.4s ease;
}
.stat-lbl { font-size:11px; color:rgba(255,255,255,.3); margin-top:6px; line-height:1.4 }

/* ═══════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════ */
.form-outer { max-width:460px; margin:0 auto }
.form-box {
  background:#fff; border:1px solid var(--g2);
  border-radius:28px; padding:40px;
  box-shadow:var(--sh-md);
}
.f-fields { display:flex; flex-direction:column; gap:13px; margin-top:28px }
.fg { display:flex; flex-direction:column; gap:5px }
.f-lbl { font-size:12px; font-weight:600; color:var(--gt) }
.f-inp {
  width:100%; padding:12px 16px; border:1.5px solid var(--g2);
  border-radius:12px; font-size:14px; font-family:var(--f);
  color:var(--black); background:var(--g1); outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none;
}
.f-inp::placeholder { color:var(--g3) }
.f-inp:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(0,87,255,.07) }
.f-inp.err { border-color:#ef4444; background:#fff9f9 }
.f-err { font-size:11px; color:#ef4444; display:none }
.f-err.show { display:block }
.f-sbtn {
  width:100%; padding:14px; margin-top:4px;
  background:var(--blue); color:#fff; border:none;
  border-radius:12px; font-size:15px; font-weight:700;
  font-family:var(--f); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .22s;
}
.f-sbtn:hover:not(:disabled) { background:var(--blue-d); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,87,255,.28) }
.f-sbtn:disabled { opacity:.6; cursor:not-allowed; transform:none }
.toast {
  display:none; padding:12px 16px; border-radius:12px;
  font-size:13px; font-weight:500; align-items:center; gap:8px;
  line-height:1.5;
}
.toast.ok { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; display:flex }
.toast.er { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; display:flex }
.spinner {
  width:16px; height:16px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  background:var(--black);
  padding:56px 20px 32px;
  border-top:1px solid rgba(255,255,255,.05);
}
.ft-w { max-width:1100px; margin:0 auto }
.ft-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:48px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ft-logo {
  font-size:22px; font-weight:800;
  letter-spacing:-.5px; line-height:1; margin-bottom:12px;
}
.ft-logo { color:#fff }
.ft-logo span { color:var(--blue) }
.ft-tag { font-size:13px; color:rgba(255,255,255,.28); line-height:1.65 }
.ft-col-title {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:rgba(255,255,255,.22); margin-bottom:16px;
}
.ft-contacts { display:flex; flex-direction:column; gap:10px }
.ft-link {
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:rgba(255,255,255,.52);
  text-decoration:none; transition:color .15s;
}
.ft-link:hover { color:#fff }
.ft-ic {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:14px;
}
.ic-ph { background:rgba(52,199,89,.15) }
.ic-tg { background:rgba(0,136,204,.15) }
.ic-ig { background:rgba(225,48,108,.1) }
.ft-nav { display:flex; flex-direction:column; gap:8px }
.ft-nav-btn {
  background:none; border:none; cursor:pointer;
  text-align:left; font-size:13px;
  color:rgba(255,255,255,.42); font-family:var(--f);
  transition:color .15s; padding:0;
}
.ft-nav-btn:hover { color:#fff }
.ft-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:28px; flex-wrap:wrap; gap:14px;
}
.ft-copy { font-size:12px; color:rgba(255,255,255,.2) }
.prv-btn {
  font-size:12px; color:rgba(255,255,255,.3); cursor:pointer;
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--f); padding:0; transition:color .15s, border-color .15s;
}
.prv-btn:hover { color:rgba(255,255,255,.6); border-bottom-color:rgba(255,255,255,.3) }

/* ═══════════════════════════════════════════
   PRIVACY MODAL
═══════════════════════════════════════════ */
.m-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:20px;
}
.m-overlay.open { display:flex }
.modal {
  background:#fff; border-radius:24px;
  width:100%; max-width:520px; max-height:85vh;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sh-lg);
}
.m-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px 18px; border-bottom:1px solid var(--g2);
}
.m-title { font-size:17px; font-weight:700; letter-spacing:-.01em }
.m-close {
  width:32px; height:32px; border-radius:8px; border:none;
  background:var(--g1); cursor:pointer; font-size:16px;
  color:var(--gt); display:flex; align-items:center;
  justify-content:center; transition:background .15s; font-family:var(--f);
}
.m-close:hover { background:var(--g2); color:var(--black) }
.m-body { padding:24px 28px; overflow-y:auto; flex:1 }
.m-body h4 { font-size:13px; font-weight:700; margin:16px 0 6px; color:var(--black) }
.m-body h4:first-child { margin-top:0 }
.m-body p { font-size:13px; color:var(--gt); line-height:1.7 }

/* ═══════════════════════════════════════════
   FLOATING TELEGRAM BUTTON
═══════════════════════════════════════════ */
.float-tg {
  position:fixed; bottom:24px; right:24px; z-index:150;
  width:54px; height:54px; border-radius:50%;
  background:#229ED9; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(34,158,217,.5);
  transition:transform .2s, box-shadow .2s;
  text-decoration:none;
}
.float-tg:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(34,158,217,.6) }
.float-tg svg { width:26px; height:26px; fill:#fff }

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.rv { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease }
.rv.vis { opacity:1; transform:none }
.d1 { transition-delay:.09s }
.d2 { transition-delay:.17s }
.d3 { transition-delay:.25s }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:900px) {
  .svcs-grid { grid-template-columns:1fr 1fr }
  .about-grid { grid-template-columns:1fr; gap:40px }
  .ft-grid { grid-template-columns:1fr 1fr }
}
@media (max-width:640px) {
  .svcs-grid { grid-template-columns:1fr }
  .nav-links { display:none }
  .nav-links-center { display:none }
  .nav-cta { display:none }
  .mob-menu-btn { display:block }
  .stats { grid-template-columns:repeat(3,1fr) }
  .ft-grid { grid-template-columns:1fr; gap:28px }
  .form-box { padding:28px 20px }
  .sec { padding:72px 20px }
  .float-tg { bottom:16px; right:16px; width:48px; height:48px }
}