:target{scroll-margin-top:92px}
html{scroll-behavior:smooth}

:root{
  --bg:#0b0b12; --bg2:#12142a; --txt:#e5e7eb;
  --gl1:#8b5cf6; --gl2:#3b82f6;
  --gap:14px;
}

/* base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* particles */
#particles{position:fixed;inset:0;z-index:-2;pointer-events:none}

/* background */
.space{position:relative;overflow-x:hidden;background:
  radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.18), transparent 55%),
  radial-gradient(900px 500px at 10% 10%, rgba(59,130,246,.12), transparent 60%),
  linear-gradient(180deg, var(--bg), var(--bg2) 45%, var(--bg) 100%);
}
.bg{position:fixed;z-index:-1;pointer-events:none}
.bg.nebula{top:-10vh;left:-10vw;width:120vw;opacity:.55}
.bg.planet{top:8vh;right:-18vw;width:56vw;opacity:.4}
.bg.shards{bottom:-8vh;left:-8vw;width:64vw;opacity:.35}

/* HEADER */
.hdr{position:sticky;top:0;z-index:70;background:#00000066;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
.hdr-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap;min-width:0}
.zl-icon{width:64px;height:44px;flex:0 0 auto}
.brand-name{
  font-weight:800;letter-spacing:.4px;
  font-size:clamp(16px, 5vw, 24px);
  background:linear-gradient(90deg,var(--txt),#dbeafe);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 10px rgba(99,102,241,.25);
  overflow:hidden;text-overflow:ellipsis;
}

.nav{display:none;gap:20px;align-items:center}
.nav a{color:#d7d9e4;text-decoration:none}
.nav a:hover{color:#fff}
.menu-btn{display:inline-flex;flex-direction:column;gap:4px;border:1px solid #ffffff1a;background:#ffffff12;border-radius:12px;padding:8px}
.menu-btn span{display:block;width:22px;height:2px;background:#fff}
@media(min-width:900px){.nav{display:flex}.menu-btn{display:none}}
.mobile-nav{display:none;border-top:1px solid #ffffff14;background:#00000080}
.mobile-nav.open{display:grid;padding:10px 16px;gap:8px;animation:navSlide .2s ease both}
@keyframes navSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* sticky CTA (mobile) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:8px 16px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));background:#0000008a;backdrop-filter:blur(8px);border-top:1px solid #ffffff14}
@media(min-width:768px){.sticky-cta{display:none}}
@media(max-width:767px){body.site{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:14px;border:1px solid #ffffff1a;background:#ffffff0d;color:#fff;text-decoration:none;transition:.2s}
.btn:hover{background:#ffffff1f}
.btn-primary{background:linear-gradient(90deg,#8b5cf6,#3b82f6);border:none;box-shadow:0 10px 30px rgba(139,92,246,.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{border:1px solid #ffffff1a;background:#ffffff0d}
.w-full{width:100%}

/* A11y focus */
:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px;border-radius:10px}
.nav a:focus-visible,.menu-btn:focus-visible,.btn:focus-visible,.car-btn:focus-visible,.mobile-nav a:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}

/* grids */
.grid2{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}
@media(min-width:1024px){.grid2{grid-template-columns:1.08fr .92fr}}
.grid4{display:grid;gap:16px;grid-template-columns:1fr 1fr;align-items:start}
@media(min-width:768px){.grid4{grid-template-columns:repeat(4,1fr)}}

/* HERO */
.hero{position:relative;padding:68px 0 36px}
.hero-content{position:relative;z-index:2}
.hero h1{font-size:clamp(26px, 8.2vw, 50px);line-height:1.15;margin:0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.hero .lead{margin-top:10px;color:#c7c9d3;font-size:clamp(14px, 4.2vw, 18px);max-width:58ch}
.grad{background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.bullets{margin:16px 0 0;padding:0;list-style:none;color:#c7c9d3}
.bullets li{margin:6px 0}
.cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
@media(max-width:480px){.cta .btn{width:100%}}

/* марсианин */
.martian-img{position:absolute;left:clamp(-10px,-4vw,-60px);top:clamp(-4px,-2vw,-30px);width:clamp(320px,40vw,560px);z-index:1;pointer-events:none;opacity:.85;animation:float 6s ease-in-out infinite}
.martian-img img{width:100%;height:auto}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(max-width:768px){.martian-img{opacity:.6;width:min(68vw,420px);left:-12vw;top:8px}}

/* glass + mock */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid #ffffff14;border-radius:22px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(2,6,23,.35)}
.mock{position:relative;aspect-ratio:16/10;padding:16px;overflow:hidden}
.orbit{position:absolute;border-radius:9999px;border:1px solid #ffffff24;inset:10%}
.orbit-1{animation:spin 22s linear infinite}
.orbit-2{inset:22%;animation:spin 30s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.card{position:absolute;left:16px;bottom:16px;right:52%;padding:12px;border:1px solid #ffffff1a;border-radius:14px;background:#00000055}
.card.right{left:auto;right:16px;top:22%}
.card .bar{height:14px;width:96px;border-radius:8px;background:#ffffff14}
.card .line{margin-top:8px;height:8px;border-radius:6px;background:#ffffff10}
.card .line.w60{width:60%}.card .line.w40{width:40%}.card .line.w50{width:50%}
.card .media{height:110px;border-radius:10px;background:linear-gradient(90deg,#8b5cf633,#3b82f633)}
.shine{position:absolute;inset:-30%;background:linear-gradient(45deg,rgba(139,92,246,.18),rgba(59,130,246,.12),transparent 60%);transform:rotate(8deg)}

/* sections */
.section{position:relative;z-index:2;padding:64px 0}
@media(max-width:680px){.section{padding:48px 0}}
.ttl{font-size:clamp(22px,5.2vw,32px);margin:0 0 14px;line-height:1.2}
.muted{color:#c7c9d3}
.link{color:#a5b4fc;text-decoration:underline}
.link:hover{color:#dbeafe}

/* benefits */
.benefits{padding:18px 0 28px}
.tile{padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left}
.tile .ico{color:#a78bfa;font-size:20px}
.tile h3{margin:2px 0 2px;line-height:1.2}
.tile p{margin:0;color:#c7c9d3}

/* ===== ПОРТФОЛИО (карусель) ===== */
.carousel{position:relative;padding:16px}
.viewport{overflow:hidden}
.track{display:flex;gap:var(--gap);will-change:transform;scroll-behavior:smooth}
.slide{flex:0 0 var(--slide-w,100%);display:flex;flex-direction:column;gap:10px;background:#ffffff06;border:1px solid #ffffff14;border-radius:16px;padding:10px;transition:transform .2s ease,box-shadow .2s ease}
.slide img{aspect-ratio:16/9;border-radius:10px;object-fit:cover;width:100%}
.slide .meta{display:flex;align-items:center;justify-content:space-between;color:#d7d9e4}
.slide .meta span{font-size:12px;color:#c7c9d3}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:1px solid #ffffff1a;background:#00000066;color:#fff;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;transition:background .15s ease, transform .15s ease}
.car-btn:hover{background:#ffffff1a}
.car-btn:active{transform:translateY(-50%) scale(.98)}
.car-btn.prev{left:-4px}
.car-btn.next{right:-4px}
.tilt{transform-style:preserve-3d;transition:transform .2s ease,box-shadow .2s ease}
.tilt:hover{transform:perspective(800px) rotateX(4deg) rotateY(-4deg)}
.tilt:active{transform:perspective(800px) rotateX(1deg) rotateY(-1deg) scale(.995)}

/* короткий процесс */
.steps-simple{display:grid;gap:14px;align-items:start}
@media(min-width:900px){.steps-simple{grid-template-columns:repeat(3,1fr)}}
.steps-simple .step{padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left}
.steps-simple .step span{color:#c7c9d3}
.steps-simple .step p{margin:0;color:#c7c9d3}

/* ====== ТАРИФЫ (столбы) ====== */
.pricing{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:680px){.pricing{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pricing{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.pricing{grid-template-columns:repeat(5,1fr)}}

.price-card{position:relative;padding:18px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid #ffffff14;backdrop-filter:blur(10px)}
.price-card::before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:linear-gradient(120deg,#8b5cf6,transparent 40%,#3b82f6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.3;pointer-events:none}
.price-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid #ffffff24;background:linear-gradient(90deg,#8b5cf61a,#3b82f61a);font-size:12px;color:#e7e9ff}
.badge .dot{width:7px;height:7px;border-radius:999px;background:radial-gradient(circle,#34d399,#10b981)}
.price{font-weight:800;font-size:18px;color:#fff}
.price-title{margin:2px 0 2px;font:700 18px/1.2 Inter,system-ui}
.cheap{font-size:13px;color:#a5b4fc}
.cheap:hover{color:#dbeafe}
.price-desc{margin:8px 0 10px;color:#c7c9d3}
.price-list{margin:0 0 10px;padding-left:20px;color:#c7c9d3}
.price-list li{margin:6px 0}
.price-link{display:inline-block;margin-top:auto;color:#dbeafe;text-decoration:underline}
.price-link:hover{color:#fff}

/* FAQ */
.faq{display:grid;gap:14px;align-items:start}
@media(min-width:900px){.faq{grid-template-columns:repeat(2,1fr)}}
.qa{padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left}
.qa b{font-weight:700}
.qa p{margin:0;color:#c7c9d3}

/* Если перейдёшь на <details> — стили готовы */
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.qa summary::-webkit-details-marker{display:none}
.qa summary b{flex:1}
.qa summary::after{content:'';width:10px;height:10px;border-right:2px solid #a5b4fc;border-bottom:2px solid #a5b4fc;transform:rotate(-45deg);transition:transform .2s ease,border-color .2s ease}
.qa[open] summary::after{transform:rotate(45deg);border-color:#dbeafe}
.qa summary:hover b{color:#fff}
.qa>p{margin-top:6px}

/* форма */
.lead-grid{align-items:start;--lead-head:0px}
.form,.paybox{position:relative;z-index:0}
.form{padding:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.form input,.form select,.form textarea{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:14px;padding:12px 14px;outline:none}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 0 0 6px rgba(124,58,237,.15);border-color:#8b5cf6}
.form .grid2{display:grid;gap:12px;align-items:start}

/* чекбокс — ровно по центру */
.form .agree{display:flex;align-items:center;gap:10px;font-size:13px;color:#c7c9d3;margin-top:6px}
.form .agree input{appearance:auto;width:18px;height:18px;accent-color:#8b5cf6;margin:0;vertical-align:middle}
.form .agree span{line-height:1.35}

/* сообщение формы */
.form .form-msg{margin-top:6px;font-size:14px}

/* Fancy form polish */
.fancy-form .fg>span{font-size:13px;color:#c7c9d3;margin:0 0 6px 2px}
.fancy-form input,.fancy-form select,.fancy-form textarea{background:#0f1220cc;border:1px solid #ffffff1a;border-radius:14px;padding:12px 14px;color:#fff;transition:.2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.fancy-form input::placeholder,.fancy-form textarea::placeholder{color:#9aa0b4}
.fancy-form input:focus,.fancy-form select:focus,.fancy-form textarea:focus{border-color:transparent;outline:none;box-shadow:0 0 0 6px rgba(124,58,237,.12), inset 0 0 0 1px transparent;background-image:linear-gradient(#0f1220cc,#0f1220cc),radial-gradient(circle at 20% 0,#8b5cf6,#3b82f6);background-origin:border-box;background-clip:padding-box,border-box}
.fancy-form .actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.btn-3d{box-shadow:0 14px 34px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.2)}
.btn-3d:active{transform:translateY(1px);box-shadow:0 10px 24px rgba(99,102,241,.28)}

/* селекты — тёмные опции */
.form select,.form select option{background:#111;color:#fff}
.form select option:hover{background:#1f1f2e}

/* pay */
.paybox{ padding:16px; }
/* Убрали сдвиг для десктопа */
/* Опустить правый блок ниже формы (только десктоп) */
@media (min-width:1024px){
  .lead-grid{ --paybox-extra: 148px; }              /* ← величина сдвига, меняй по вкусу */
  .lead-grid .paybox{
    margin-top: calc(var(--lead-head, 0px) + var(--paybox-extra));
  }
}

.paybox h3{margin:0 0 8px}
.payicons{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.payicons img{height:32px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
@media(min-width:768px){.payicons img{height:36px}}
.paybox .contacts{display:grid;gap:8px;margin-top:8px}
.paybox .hint{color:#c7c9d3;font-size:12px;margin-top:6px}

/* гарантия */
.warranty{margin-top:12px}
.wttl{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.wdesc{margin:0;color:#c7c9d3;font-size:14px}

/* контакты и футер */
.foot-contacts{display:grid;gap:16px;padding:16px;border-radius:22px;margin-bottom:32px}
@media(min-width:900px){.foot-contacts{grid-template-columns:1fr 1fr}}
.foot-contacts .row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}

.ftr{border-top:1px solid #ffffff14;padding:20px 0 26px;color:#c7c9d3}
.ftr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* модалка */
.modal{position:fixed;inset:0;background:#000000b0;display:none;align-items:center;justify-content:center;padding:16px;z-index:9999}
.modal.open{display:flex}
.modal-box{max-width:720px;width:100%;padding:18px;border-radius:22px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-head button{border:none;background:#ffffff12;color:#fff;border-radius:10px;padding:6px 10px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Buttons busy (для JS-атрибута aria-busy) */
.btn[aria-busy="true"]{position:relative;pointer-events:none;opacity:.85}
.btn[aria-busy="true"]::after{
  content:'';position:absolute;right:10px;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite;
}

/* Form valid/invalid */
.fancy-form input:invalid,.fancy-form select:invalid,.fancy-form textarea:invalid{
  border-color:#ef4444!important;box-shadow:0 0 0 6px rgba(239,68,68,.12)
}
.fancy-form input:valid,.fancy-form select:valid,.fancy-form textarea:valid{
  border-color:#10b981;box-shadow:0 0 0 6px rgba(16,185,129,.10)
}

/* Placeholder цвет */
::-webkit-input-placeholder{color:#9aa0b4}
::-moz-placeholder{color:#9aa0b4}
:-ms-input-placeholder{color:#9aa0b4}
::placeholder{color:#9aa0b4}

/* Sticky header vars + target компенсация */
:root{--hdr-h:62px}
@media(min-width:900px){:root{--hdr-h:72px}}
:target{scroll-margin-top:calc(var(--hdr-h) + 20px)}

/* Small perf tweaks */
.tile,.step,.qa,.form,.paybox,.foot-contacts,.price-card{contain:content}

/* ===== Contacts upgraded ===== */
.contact-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid #ffffff14;
}
.contact-card::before{
  /* тонкая градиентная окантовка */
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px;
  background:linear-gradient(120deg,#8b5cf6,transparent 40%,#3b82f6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.35; pointer-events:none;
}
.contact-card .contact-left h3{margin:0 0 8px}
.contact-card .btn-icon{gap:8px}
.contact-card .btn-icon svg{flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(96,165,250,.35))}
.contact-card .row .btn-icon:hover svg{transform:translateY(-1px)}
.contact-right .info-list{display:grid;gap:10px}
.info-item{display:flex;align-items:center;gap:10px}
.info-item svg{filter:drop-shadow(0 0 8px rgba(99,102,241,.3))}

/* подсветка внутри карточки */
.contact-glow{
  position:absolute; inset:auto 10% -30% 10%; height:120px; border-radius:50%;
  background:radial-gradient(60% 140% at 50% 0,#8b5cf633,#3b82f633,transparent 70%);
  filter:blur(18px);
}

/* адаптив разъезд колонок */
.foot-contacts{position:relative}
@media(min-width:900px){
  .foot-contacts{grid-template-columns:1fr 1fr}
}

.btn-icon svg {
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn-icon:hover svg {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255,255,255,.45);
}
/* Контакты — базовый контейнер */
#contacts .contacts-wrap{position:relative}

/* Карточка поверх тарелки */
.contact-card{position:relative; z-index:2; overflow:visible}

/* Мягкое свечение под правым краем карточки */
.contact-card::after{
  content:""; position:absolute; right:10%; top:-26px;
  width:420px; height:220px;
  background:radial-gradient(58% 60% at 52% 42%,
              rgba(124,58,237,.28), rgba(96,165,250,.16) 45%, transparent 70%);
  filter:blur(18px); opacity:.65; pointer-events:none; z-index:1;
}

/* Тарелка — меньше, правее и под карточкой */
.contact-ufo{
  position:absolute; right:-4%; top:-46%;
  width:min(40vw,560px); height:auto;
  pointer-events:none; z-index:1;          /* ниже .contact-card */
  opacity:.96;
  filter: drop-shadow(0 18px 50px rgba(124,58,237,.32))
          drop-shadow(0 0 18px rgba(96,165,250,.22));
  animation: float 7s ease-in-out infinite;
  /* плавно «уходит» за карточку слева */
  -webkit-mask-image: linear-gradient( to left, #000 72%, rgba(0,0,0,.75) 84%, transparent 100%);
          mask-image: linear-gradient( to left, #000 72%, rgba(0,0,0,.75) 84%, transparent 100%);
}

/* Кнопки-иконки — оставим как было (чёткая отрисовка) */
.btn-icon svg{
  flex:0 0 auto; border-radius:50%;
  box-shadow:0 0 6px rgba(255,255,255,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-icon:hover svg{transform:scale(1.1); box-shadow:0 0 12px rgba(255,255,255,.45)}

/* Адаптив */
@media (max-width:1280px){
  .contact-ufo{right:-8%; top:-40%; width:min(48vw,520px)}
  .contact-card::after{right:6%}
}
@media (max-width:1024px){
  .contact-ufo{right:-10%; top:-34%; width:min(54vw,480px)}
}
@media (max-width:820px){
  .contact-ufo{right:-14%; top:-26%; width:min(64vw,440px); opacity:.92}
}
@media (max-width:680px){
  /* если нужно показать и на мобилке — просто убери display:none */
  .contact-ufo{display:none}
  .contact-card::after{display:none}
}

/* ===== Contacts x UFO — как на макете ===== */
#contacts .wrap{position:relative}

/* Карточка — над UFO, кликабельность сохраняем */
#contacts .contact-card{position:relative; z-index:2; overflow:visible}

/* Свечение от лодки под правой частью карточки */
#contacts .contact-card::after{
  content:""; position:absolute; right:6%; top:-28px;
  width:520px; height:260px;
  background:
    radial-gradient(60% 60% at 55% 45%, rgba(124,58,237,.34), rgba(96,165,250,.18) 46%, transparent 70%);
  filter: blur(20px);
  opacity:.65; pointer-events:none; z-index:1;
}

/* Контакты: позиционирование и слои */
#contacts .wrap{ position:relative; }
#contacts .contact-card{ position:relative; z-index:3; overflow:visible; }

/* Тарелка — ПОВЕРХ карточки, без фона, справа как в примере */
#contacts .contact-ufo{
  position:absolute;
  right:-310px;           /* сдвиг вправо; подстрой при необходимости */
  top:-190px;             /* чуть выше верхней кромки карточки */
  width:min(46vw, 560px); /* размер тарелки */
  height:auto;
  z-index:6;              /* выше .contact-card */
  pointer-events:none;    /* клики по карточке не блокируем */
  opacity:1;
  /* лёгкая подсветка по краям */
  filter:
    drop-shadow(0 22px 60px rgba(124,58,237,.35))
    drop-shadow(0 0 22px rgba(96,165,250,.25));
  animation: float 7s ease-in-out infinite;
}

/* Чёткие иконки на кнопках */
.btn-icon svg{
  flex:0 0 auto;
  border-radius:50%;
  box-shadow:0 0 6px rgba(255,255,255,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-icon:hover svg{ transform:scale(1.1); box-shadow:0 0 12px rgba(255,255,255,.45); }

/* Адаптив — сохраняем композицию */
@media (max-width:1380px){
  #contacts .contact-ufo{ right:-160px; top:-98px; width:min(50vw,520px); }
}
@media (max-width:1180px){
  #contacts .contact-ufo{ right:-180px; top:-88px; width:min(54vw,500px); }
}
@media (max-width:980px){
  #contacts .contact-ufo{ right:-200px; top:-76px; width:min(58vw,470px); }
}
@media (max-width:780px){
  /* если нужно скрыть на мобилке — оставь так; иначе уменьши */
  #contacts .contact-ufo{ display:none; }
}


/* Lead form: единая высота и валидация только после взаимодействия */
:root{ --field-h: 52px; }

.fancy-form input,
.fancy-form select{
  height: var(--field-h);
  line-height: var(--field-h);
}

.fancy-form textarea{ min-height: 120px; }

/* сброс «красного» по умолчанию */
.fancy-form input:not(.touched):invalid,
.fancy-form select:not(.touched):invalid,
.fancy-form textarea:not(.touched):invalid{
  border-color:#ffffff1a !important;
  box-shadow:none !important;
}

/* показываем статус только после blur */
.fancy-form .touched:invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 6px rgba(239,68,68,.12) !important;
}
.fancy-form .touched:valid{
  border-color:#10b981 !important;
  box-shadow:0 0 0 6px rgba(16,185,129,.10) !important;
}

/* маленькая подсказка под формой */
.form-help{display:block;margin:6px 0 0;font-size:12px;color:#9aa0b4}

/* Pay chips */
.paychips{
  display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 10px;
}
.paychips .chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border-radius:12px;
  border:1px solid #ffffff1a; background:#ffffff0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.paychips .chip:hover{
  background:#ffffff1a; transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(99,102,241,.28);
}
.paychips img{
  display:block; height:18px; width:auto; object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Кнопка отправки — явное «занят» */
#submitBtn[aria-busy="true"] .btn-text::after{
  content:"  •••";
  animation: dots 1.1s steps(4,end) infinite;
}
@keyframes dots{ 0%{content:""} 25%{content:" ."} 50%{content:" .."} 75%{content:" ..."} 100%{content:""} }

/* Мягче для цены */
.price { font-weight: 400; }        /* или 500/600 — как нужно */

/* Мягче для заголовка тарифа */
.price-title {
  font-weight: 500;                  /* нормальная/полужирная */
  font-size: 18px;
  line-height: 1.2;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Портфолио: улучшения карточек ===== */
#portfolio .slide{
  position:relative;
  overflow:hidden;
}
#portfolio .slide img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  transition:transform .35s ease, filter .35s ease;
}
#portfolio .slide:hover img{
  transform:scale(1.03);
  filter:saturate(1.05);
}
#portfolio .slide .meta{
  position:absolute;
  left:10px; bottom:10px; right:10px;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15));
  border:1px solid #ffffff22; backdrop-filter:blur(6px);
}

/* ===== Плавающее превью у курсора ===== */
.port-hover{
  position:fixed; z-index:999; pointer-events:none;
  transform:translate3d(-9999px,-9999px,0); /* спрятано */
  width:min(420px,32vw); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid #ffffff22; box-shadow:0 20px 60px rgba(2,6,23,.45);
  transition:opacity .15s ease, transform .15s ease;
  opacity:0;
}
.port-hover.show{ opacity:1; }
.port-hover img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.port-hover .ph-meta{
  padding:10px 12px; display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:#c7c9d3;
}
.port-hover .ph-meta b{ color:#fff; font-weight:600; }

/* Лайтбокс переиспользует .modal */
#portLightbox .modal-box img{ border:1px solid #ffffff14 }



/* ==== Портфолио: крупнее карточки и лучшее «стекло» ==== */
#portfolio .carousel{ padding:20px 18px; }
#portfolio .viewport{ overflow:hidden; }
#portfolio .track{ display:flex; gap:var(--gap); }

#portfolio .slide{
  position:relative;
  flex:0 0 var(--slide-w, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid #ffffff26;
  border-radius:18px;
  padding:14px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#portfolio .slide:hover{
  box-shadow:0 16px 40px rgba(2,6,23,.45);
  border-color:#ffffff3a;
}
#portfolio .slide img{
  width:100%;
  height:auto;
  /* БОЛЬШЕ ВЫСОТА КАРТОЧКИ */
  aspect-ratio: 16 / 11;      /* было 16/9 – теперь выше */
  object-fit:cover;
  border-radius:14px;
  transition:transform .35s ease, filter .35s ease;
}
#portfolio .slide:hover img{ transform:scale(1.02); filter:saturate(1.05); }

#portfolio .slide .meta{
  position:absolute; left:20px; right:20px; bottom:20px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.18));
  border:1px solid #ffffff2f;
  color:#e5e7eb;
  backdrop-filter: blur(6px);
}
#portfolio .slide .meta b{ color:#fff; }

/* кнопки перелистывания поверх всего */
#portfolio .car-btn{ z-index:10; }

/* Модалка (лайтбокс) — поверх всего, Esc/клик по фону закрывают */
#portLightbox{ z-index:9999; }



/* Заголовок секции с кнопкой справа */
.portfolio-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:5px;flex-wrap:wrap;margin-bottom:10px
}


/* ====== PLUS: Masonry grid ====== */
.plus-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; flex-wrap:wrap;
}

.masonry{
  column-count: 4;          /* количество колонок на десктопе */
  column-gap: 16px;         /* расстояние между колонками */
}
@media (max-width: 1280px){ .masonry{ column-count: 3; } }
@media (max-width: 980px) { .masonry{ column-count: 2; } }
@media (max-width: 640px) { .masonry{ column-count: 1; } }

.m-card{
  display:inline-block;      /* обязательно для много-колоночного лейаута */
  width:100%;
  margin:0 0 16px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid #ffffff14;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(2,6,23,.35);
  break-inside: avoid;       /* чтобы карточка не разрезалась между колонками */
}

.m-card .img{
  display:block;
  overflow:hidden;
}
.m-card .img img{
  display:block; width:100%; height:auto;       /* натуральные пропорции, без “дыр” */
  transform:translateZ(0);
  transition:transform .3s ease;
  will-change: transform;
}
.m-card:hover .img img{ transform:scale(1.02); }

.m-card .cap{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; color:#d7d9e4;
}
.m-card .cap b{ color:#fff; font-weight:700; }
.m-card .cap span{
  font-size:12px; color:#a5b4fc; background:#ffffff14; border:1px solid #ffffff1f;
  padding:4px 8px; border-radius:999px;
}

/* ====== Lightbox base (если не было) ====== */
.lb{position:fixed; inset:0; background:#0009; display:none; align-items:center; justify-content:center; z-index:9999; padding:20px;}
.lb.open{display:flex}
.lb-box{position:relative; max-width:min(92vw,1200px); max-height:90vh;}
.lb-box img{display:block; max-width:100%; max-height:80vh; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.4)}
.lb-close{position:absolute; right:-8px; top:-8px; border:none; background:#111; color:#fff; width:34px; height:34px; border-radius:10px; cursor:pointer}
.lb-ttl{margin-top:10px; text-align:center; color:#e5e7eb}






/* ===== Mock: сборка модулей за орбитами ===== */
.mock{ position:relative; perspective:900px; }

/* Орбиты сверху, чтобы «накрывали» модули */
.orbit{ position:absolute; z-index:5; }

/* Контейнер модулей — ниже орбит, выше фона */
.ui-assemble{
  position:absolute; inset:10% 10% 12% 10%;
  display:grid; grid-template-columns:1.2fr .8fr; gap:12px;
  z-index:2; pointer-events:none;
  filter: drop-shadow(0 8px 26px rgba(2,6,23,.35));
}

/* Левая доска + два мини-виджета справа столбцом */
.ui-assemble .board{ grid-row:1 / 3; }
.ui-assemble .mini.top{ align-self:start; }
.ui-assemble .mini.bot{ align-self:end; }

/* Базовый «кусок» интерфейса */
.ui-assemble .piece{
  background:#0c1120cc;
  border:1px solid #ffffff12;
  border-radius:14px;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(2,6,23,.32);
  transform: translateY(18px) scale(.96) rotateX(6deg);
  opacity:0;
  animation:pieceIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}

/* Поочерёдная сборка */
.ui-assemble .board{ animation-delay:.10s; }
.ui-assemble .mini.top{ animation-delay:.28s; }
.ui-assemble .mini.bot{ animation-delay:.40s; }

@keyframes pieceIn{
  60% { transform: translateY(-2px) scale(1.005) rotateX(0.5deg); opacity:1; }
  100%{ transform: translateY(0) scale(1) rotateX(0); opacity:1; }
}

/* Наполнение «доски» */
.ui-assemble .board{
  padding:12px;
  position:relative;
}
.ui-assemble .board .bar{
  height:14px; width:120px; border-radius:8px; background:#ffffff14;
  margin-bottom:8px;
}
.ui-assemble .board .line{
  height:8px; border-radius:6px; background:#ffffff10; margin:6px 0;
}
.ui-assemble .board .line.w70{ width:70%; }
.ui-assemble .board .line.w40{ width:40%; }
.ui-assemble .board .table{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px;
}
.ui-assemble .board .cell{
  display:block; height:42px; border-radius:10px;
  background:linear-gradient(90deg,#8b5cf61f,#3b82f61f);
  border:1px solid #ffffff10;
}

/* Мини-виджеты справа */
.ui-assemble .mini{ position:relative; padding:12px; }
.ui-assemble .mini.top{
  min-height:86px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.ui-assemble .mini.bot{
  min-height:72px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}

/* «Искры» в верхнем виджете */
.ui-assemble .mini.top .spark{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,#dbeafe,#a78bfa 60%, transparent);
  box-shadow:0 0 10px rgba(167,139,250,.7);
  animation: micro 2.4s ease-in-out infinite;
}
.ui-assemble .mini.top .spark:nth-child(1){ left:18px; top:18px; animation-delay:.6s; }
.ui-assemble .mini.top .spark:nth-child(2){ right:16px; bottom:16px; animation-delay:1.2s; }

@keyframes micro{
  0%,100%{ transform:scale(.7); opacity:.35; }
  50%    { transform:scale(1.15); opacity:1; }
}

/* Точки в нижнем виджете */
.ui-assemble .mini.bot{ display:flex; align-items:center; gap:8px; }
.ui-assemble .mini.bot .dot{
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#a5b4fc,#60a5fa);
  box-shadow:0 0 8px rgba(96,165,250,.6);
  animation:bob 2.2s ease-in-out infinite;
}
.ui-assemble .mini.bot .dot:nth-child(2){ animation-delay:.2s; }
.ui-assemble .mini.bot .dot:nth-child(3){ animation-delay:.4s; }

@keyframes bob{
  0%,100%{ transform:translateY(0); opacity:.85; }
  50%    { transform:translateY(-4px); opacity:1; }
}

/* Чтобы карточки из mock были поверх всего */
.mock .card{ position:absolute; z-index:7; }
/* Блик тоже поверх */
.mock .shine{ position:absolute; z-index:6; }

/* Уважение к reduce-motion */
@media (prefers-reduced-motion: reduce){
  .ui-assemble .piece,
  .ui-assemble .mini.top .spark,
  .ui-assemble .mini.bot .dot{ animation:none!important; opacity:1!important; transform:none!important; }
}




/* === HERO: арт-карта с изображением и слоганом === */
.hero-art{
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  border-radius:22px;
  background: radial-gradient(120% 100% at 70% 30%, rgba(124,58,237,.12), rgba(59,130,246,.08) 45%, transparent 70%);
  border:1px solid #ffffff14;
  box-shadow: 0 10px 30px rgba(2,6,23,.35);
  isolation:isolate;             /* чтобы блины свечения не улетали наружу */
}

/* еле-заметный «ореол» по краям */
.hero-art::after{
  content:"";
  position:absolute; inset:-25% -20% -15% -20%;
  background:
    radial-gradient(60% 40% at 75% 50%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(60% 40% at 25% 50%, rgba(59,130,246,.14), transparent 60%);
  filter: blur(20px);
  pointer-events:none;
  z-index: 0;
}

.hero-art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.06) rotate(-1.5deg);
  filter: saturate(1.05) contrast(1.05);
  z-index: 1;
  will-change: transform, filter;
  animation: heroDrift 14s ease-in-out infinite alternate;
}

/* крупный слоган поверх */
.hero-slogan{
  position:absolute; z-index: 2;
  bottom: 10%; right: 6%;
  max-width: 22ch;
  text-align: right;
  line-height: 1.05;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 6px 26px rgba(2,6,23,.55), 0 2px 10px rgba(2,6,23,.35);
}

/* верхняя строка — светлая */
.hero-slogan span{
  display:block;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  color:#dbeafe;
  opacity:.95;
}

/* нижняя строка — «градиентная» и яркая */
.hero-slogan strong{
  display:block;
  margin-top: 6px;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  background: linear-gradient(90deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(99,102,241,.35));
}

/* лёгкое «дыхание» картинки */
@keyframes heroDrift{
  0%   { transform: scale(1.06) rotate(-1.5deg) translate3d(0, 0, 0); filter: saturate(1.05) }
  100% { transform: scale(1.08) rotate(-.5deg)  translate3d(-6px, -4px, 0); filter: saturate(1.08) }
}

/* чуть-чуть параллакса от мыши на десктопах */
@media (hover:hover){
  .hero-art:hover img{ transition: transform .25s ease }
}

/* если пользователь просит меньше анимации — отключим */
@media (prefers-reduced-motion: reduce){
  .hero-art img{ animation:none; transform: scale(1.05) rotate(-1deg) }
}





/* ——— INTL моноблок ——— */
.intl-card{
  position:relative; overflow:hidden;
  display:grid; gap:22px;
  grid-template-columns:minmax(280px,1.1fr) minmax(340px,.9fr);
  padding:22px;
}
.intl-card.dark{
  background:linear-gradient(180deg,rgba(10,12,22,.78),rgba(10,12,22,.62));
  border-color:#ffffff20;
  box-shadow:0 20px 60px rgba(2,6,23,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.intl-card::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-24px; height:120px;
  background:radial-gradient(65% 60% at 50% 0, rgba(124,58,237,.28), rgba(59,130,246,.20) 42%, transparent 70%);
  filter:blur(18px); pointer-events:none;
}

.intl-copy{display:flex; flex-direction:column; gap:12px; align-self:center}
.intl-visual{position:relative; min-height:320px; border-radius:16px; overflow:hidden}

/* картинка карты */
.map-img{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:right 6% center;
  background-size:96% auto;
  opacity:.95;
  filter:drop-shadow(0 10px 30px rgba(59,130,246,.22));
  pointer-events:none;
}

/* пульсации */
.map-pulses{ position:absolute; inset:0; }
.map-pulses .pulse{
  position:absolute; width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff 0, #a5b4fc 40%, rgba(99,102,241,0) 70%);
  box-shadow:0 0 14px rgba(147,197,253,.95), 0 0 30px rgba(124,58,237,.45);
  animation:ping 2.6s ease-in-out infinite;
  opacity:.9;
}
.map-pulses .pulse:nth-child(odd){ animation-duration:3.2s; }

@keyframes ping{
  0%{ transform:translate(-50%,-50%) scale(.55); opacity:0; }
  22%{ opacity:1; }
  70%{ opacity:.18; }
  100%{ transform:translate(-50%,-50%) scale(2.2); opacity:0; }
}

/* адаптив */
@media (max-width:1000px){
  .intl-card{ grid-template-columns:1fr; }
  .map-img{ background-position:center; background-size:90% auto; min-height:280px; }
}
.map-img{
  position:absolute; inset:0; pointer-events:none;
}
.map-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;                /* вписывается в правую часть блока */
  object-position:right 6% center;   /* смещение как в макете */
  opacity:.95;
  filter:drop-shadow(0 10px 30px rgba(59,130,246,.22));
}