/* ====== ТЁМНАЯ ПАЛИТРА (твои акценты) ====== */
:root{
  --bg:#0A0A12;
  --bg-2:#121126;
  --text:#ECEAFF;
  --muted:#B2AEE6;

  --a1:#08B8F6;   /* start */
  --a2:#CA36FF;   /* end   */

  --link:#C4B5FD;
  --max:1200px;
}

/* БАЗА */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Rubik',system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}

/* прогресс */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--a1),var(--a2));z-index:4000}

/* кнопки */
.btn{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700;transition:.2s}
.btn-primary{background:linear-gradient(315deg,var(--a1),var(--a2));color:#0b0b0c;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{color:var(--link);border:1px solid rgba(255,255,255,.25)}
.btn-outline{border:1px solid rgba(255,255,255,.25);color:var(--text)}

/* ====== HEADER ====== */
.site-header{position:sticky;top:0;z-index:2000;background:rgba(6,6,10,.38);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.logo{height:56px;width:auto}
.brand span{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:16px;align-items:center}
.nav a{color:var(--link);text-decoration:none;opacity:.92;padding:8px 10px;border-radius:10px}
.nav a:hover{opacity:1;background:rgba(255,255,255,.06)}
.burger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer}
.burger span{width:28px;height:2px;background:#e1e2f0;display:block;border-radius:2px}
.nav-mobile{display:none;flex-direction:column;gap:10px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06)}
.nav-mobile a{color:var(--link);text-decoration:none;padding:10px;border-radius:10px;background:rgba(255,255,255,.03)}

/* ====== HERO ====== */
.hero{position:relative;min-height:80vh;display:grid;place-items:center;padding:92px 20px 58px;overflow:hidden}
.hero-inner{max-width:920px;text-align:center;position:relative;z-index:1}
.hero h1{font-size:clamp(32px,5.5vw,54px);line-height:1.1;margin-bottom:10px;text-wrap:balance}
.hero .lead{color:var(--muted)}
.hero .cta{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.blob{position:absolute;width:42vw;height:42vw;filter:blur(90px);opacity:.35;border-radius:50%}
.bl1{background:rgba(167,139,250,.22);top:-12%;left:-10%;animation:float1 18s ease-in-out infinite}
.bl2{background:rgba(8,184,246,.18);bottom:-18%;right:-15%;animation:float2 22s ease-in-out infinite}
@keyframes float1{0%{transform:translate(0,0)}50%{transform:translate(6%,8%)}100%{transform:translate(0,0)}}
@keyframes float2{0%{transform:translate(0,0)}50%{transform:translate(-8%,-6%)}100%{transform:translate(0,0)}}

/* волна */
.brand-wave{height:110px;overflow:hidden}
.brand-wave svg{width:100%;height:100%;display:block}
.brand-wave .grad{stop-color:var(--a1)}
.brand-wave .grad2{stop-color:var(--a2)}

/* управляемые размеры */
:root{
  --header-h: 1px;               /* реальная высота твоей шапки */
  --phone-w: clamp(240px, 16vw, 340px); /* <<< телефон меньше и адаптивный */
}

/* карта: фиксированная высота секции */
.map-section{
  position: relative;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}

/* фон карты */
.map-layer{
  position: absolute; inset: 0;
  background: url('/assets/img/map.jpg') center/cover no-repeat;
  z-index: 0;
  transform: translateZ(0);
}

/* затемнение */
.map-overlay{
  position: absolute; inset: 0;
  z-index: 1; pointer-events:none;
  background:
    radial-gradient(55% 52% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,.6) 75%),
    rgba(0,0,0,.14);
  mix-blend-mode: multiply;
}

/* ЗАГОЛОВОК: больше НЕ sticky — делаем absolute,
   чтобы он не «сползал» вниз, а был прибит к верху карты */
.map-head{
  position: absolute;
  top: calc(var(--header-h) + 8px);    /* ниже шапки */
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 100%);
  padding: 12px 20px;
  text-align: center;
  z-index: 2;
}
.map-head h2{ font-size: clamp(22px,3vw,32px); margin-bottom: 6px; }
.map-head .lead{ color: var(--muted); }
.logo2{height:60px;width:auto}
/* ТЕЛЕФОН: фиксирован по центру экрана, но меньше за счёт --phone-w */
.map-phone{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(var(--phone-scale, .9));
  opacity: var(--phone-alpha, 0);
  pointer-events: none; z-index: 3;
  
  width: var(--phone-w);            /* <<< вот здесь размер телефона */
  aspect-ratio: 9/19.5;
  border-radius: 36px; background: #000;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 35px 60px rgba(0,0,0,.62), 0 0 0 10px rgba(0,0,0,.28) inset;

  transition: opacity .2s linear, transform .2s linear;
}
.map-phone::before{
  content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:32%; height:20px; background:#0d0f12; border-radius:0 0 14px 14px;
}
.map-phone .screen{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#0b0c10,#0a0a0b);
  background-size:cover; background-position:center;
  display:grid; place-items:center; color:#fff;
  font-weight:900; letter-spacing:.7px; font-size:clamp(24px,4.6vw,48px);
}



/* ====== SCREENS (ДЕМО) ====== */
.screens{padding:80px 20px}
.screens-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.copy h2{text-wrap:balance;margin-bottom:8px}
.lead{text-wrap:balance;color:var(--muted)}
.chips{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chips li{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);cursor:pointer;user-select:none}
.chips li.active{background:linear-gradient(315deg,var(--a1),var(--a2));color:#0b0b0c;border-color:transparent}

.phone-shell{
  position:relative;margin-inline:auto;width:min(420px,80vw);height:740px;border-radius:40px;
  background:#0A0B10;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.55);overflow:hidden
}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30%;height:20px;background:#0d0f12;border-radius:0 0 12px 12px;z-index:2}
.feed{position:absolute;inset:0;overflow-y:auto;scroll-behavior:smooth}
.feed img{display:block;width:100%}
.feed::-webkit-scrollbar{width:0;height:0}
.dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.dots i{width:8px;height:8px;border-radius:50%;background:#525472;opacity:.6}
.dots i.active{background:linear-gradient(315deg,var(--a1),var(--a2));opacity:1}

.feed-carousel{display:none;margin-top:14px;overflow-x:auto;white-space:nowrap;scroll-snap-type:x mandatory;gap:12px}
.feed-carousel img{display:inline-block;width:min(320px,82vw);border-radius:18px;scroll-snap-align:center;margin-right:12px}

/* ====== FEATURES ====== */
.features{padding:80px 20px}
.features-head{max-width:var(--max);margin:0 auto 16px}
.features-head h2{
  font-size:clamp(28px,3vw,36px);
  margin-bottom:6px;
  background:linear-gradient(315deg,var(--a1),var(--a2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.features-head .lead{color:var(--muted)}
.features-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px
}
@media (max-width:900px){.features-grid{grid-template-columns:1fr}}
.feat{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:22px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.35);border-color:rgba(255,255,255,.18)}
.feat-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(315deg,var(--a1),var(--a2));color:#0b0b0c;font-size:18px;font-weight:800}
.feat h3{margin:0}
.feat p{color:var(--muted);margin-top:6px}
.feat details{margin-top:10px}
.feat summary{cursor:pointer;list-style:none;color:var(--link)}
.feat summary::-webkit-details-marker{display:none}
.feat ul{margin-top:8px;color:#BFC1FF;display:grid;gap:6px}

/* ====== FOOTER ====== */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 28px 20px 40px;
  color: #a2a3b0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}
.site-footer a{ color: var(--link); }

.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.footer-contacts .contact{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.footer-contacts .contact:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.2);
}

.footer-contacts .tg::before{ content: "✈️"; }

/* ====== ADAPTIVE ====== */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .nav-mobile.show{display:flex}
  .screens-inner{grid-template-columns:1fr}
  .phone-shell{display:none}
  .feed-carousel{display:flex}
}