:root{
  --font-h: system-ui, sans-serif;
  --font-t: system-ui, sans-serif;
  --primary: #229ED9;
  --secondary: #7C3AED;
  --text-main: #E6EAF2;
  --text-secondary: #9AA4B2;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--font-t);
  background:
    radial-gradient(800px 400px at 70% 25%, rgba(34,158,217,.18), transparent 60%),
    radial-gradient(600px 300px at 20% 10%, rgba(124,58,237,.15), transparent 70%),
    linear-gradient(180deg, #0B1220, #0E1526);
  color: var(--text-main);
}

.container{ width:min(1200px,90%); margin:0 auto; }

header{
  position:fixed; top:0; left:0; width:100%;
  backdrop-filter: saturate(160%) blur(12px);
  background: rgba(11,18,32,0.7);
  z-index:10;
}
header .container{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 0;
}
header nav a{
  margin-right:4.0rem;
  color:var(--text-main); text-decoration:none; font-weight:600;
  font-size:clamp(16px,1.3vw,18px);
}
header nav a:last-child{ margin-right:0; }

.logo img{ height:70px; }

.btn{
  padding:14px 20px; border-radius:14px; font-weight:600;
  transition:transform .08s ease, box-shadow .2s ease, background .2s;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn--primary{
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff; box-shadow:0 10px 24px rgba(34,158,217,.35);
}
.btn--primary:hover{ transform:translateY(-1px); }
.btn--secondary{ background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--text-main); }

.hero{ padding-top:120px; min-height:80vh; display:flex; align-items:center; }
.hero-container{ display:flex; flex-wrap:wrap; align-items:center; gap:2rem; }
.hero-text{ flex:1 1 400px; }
.hero-image{ flex:1 1 300px; }
.hero-image img{ max-width:140%; border-radius:20px; }

h1{
  font-family: var(--font-h); font-weight:700; font-size:clamp(32px,5vw,56px);
  line-height:1.1; letter-spacing:-0.02em; margin:0 0 1rem 0;
}
h2{
  font-family: var(--font-h); font-weight:700; font-size:clamp(24px,3vw,36px);
  line-height:1.2; margin-top:0;
}
.subtitle{ font-size:clamp(16px,1.3vw,18px); color:var(--text-secondary); margin:0 0 1.5rem 0; }

.badges{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.badge{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:.5rem 1rem; font-size:.875rem; }

.section{ padding:96px 0; }
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.feature-card{ text-align:center; padding:1.5rem; background:rgba(255,255,255,.05); border-radius:16px; }
.feature-card svg{ width:45px; height:45px; margin-bottom:1rem; color:var(--primary); }

.steps-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; counter-reset:step; }
.step{ padding:1.5rem; background:rgba(255,255,255,.05); border-radius:16px; position:relative; }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-1rem; left:-1rem; background:var(--primary); color:#fff;
  width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:600;
}

.faq-item{ margin-bottom:1rem; }

footer{ padding:2rem 0; text-align:center; font-size:.875rem; color:var(--text-secondary); }

a.btn, a.btn--primary{ text-decoration: none; }

/* ------------------------------
   Projects dropdown
--------------------------------*/
.projects-wrapper{ position: relative; display: inline-block; }
.projects-link{ cursor: pointer; }

.projects-dropdown{
  position: absolute; top: 100%; left: 0;
  background: rgba(11, 18, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px; padding: 0.5rem 0; min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 20;
}
.projects-dropdown.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Показывать по ховеру на десктопе */
@media (hover: hover) {
  .projects-wrapper:hover .projects-dropdown{
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
}

/* Элемент списка */
.projects-dropdown .project-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.5rem 1rem; position:relative; overflow: visible; /* << важно */
  border-radius:10px;
}
.projects-dropdown .project-item a{ color:var(--text-main); text-decoration:none; flex-grow:1; }

/* ВОЛНА при наведении */
.projects-dropdown .project-item::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0.00) 100%
  );
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  border-radius: inherit;
}
@media (hover:hover){
  .projects-dropdown .project-item:hover::before{ transform: scaleX(1); }
}

/* Телеграм-пузырь с описанием (десктоп) */
@media (hover: hover) {
  .projects-dropdown .project-item::after{
    content: attr(data-description);
    position:absolute; top:50%; left: calc(100% + 12px);
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff; padding:10px 12px; border-radius:18px;
    font-size:14px; line-height:1.35; box-shadow:0 4px 12px rgba(0,0,0,.25);
    max-width:280px; white-space:normal; opacity:0; pointer-events:none;
    transition: opacity .2s ease; z-index:15;
  }
  .projects-dropdown .project-item:hover::after{ opacity:1; }

  /* хвостик пузыря */
  .projects-dropdown .project-item a::after{
    content:""; position:absolute; left: calc(100% + 6px); top:50%;
    transform: translateY(-50%) rotate(45deg);
    width:12px; height:12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-bottom-right-radius:3px; opacity:0; transition:opacity .2s ease; z-index:14;
  }
  .projects-dropdown .project-item:hover a::after{ opacity:1; }
}

/* Кнопка "i" — только на тач-устройствах */
.info-btn{
  background:none; border:none; color:var(--text-main); cursor:pointer;
  font-size:0.75rem; width:20px; height:20px; border-radius:50%;
  margin-left:.5rem; display:none; align-items:center; justify-content:center;
}
.info-btn:hover{ background: rgba(255,255,255,0.1); }
@media (hover: none) { .info-btn{ display:flex; } }

/* Пузырь, который создаёт JS на десктопе — не используется, но оставим безопасно */
.info-popup{ position:absolute; top:50%; left: calc(100% + 12px); transform: translateY(-50%); z-index:1100; max-width:280px; }
.info-popup::after{
  content:""; position:absolute; left:-6px; top:18px; width:12px; height:12px;
  background: inherit; transform: rotate(45deg); border-bottom-right-radius:3px;
}

/* Панель описания под списком — Telegram bubble */
.projects-info-panel{ position:relative; }

/* Хвостик панели сверху слева (мобилки) */
@media (max-width: 768px){
  /* Пузырь Telegram на мобилках */
.projects-info-panel{
  display:none;
  margin:12px 8px 0;
  padding:12px 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  font-size:14px;
  line-height:1.45;
  max-width: calc(100vw - 32px);
  position:relative;
  backdrop-filter: blur(6px);
}

/* Двуслойный «хвостик» как в Telegram */
.projects-info-panel::before,
.projects-info-panel::after{
  content:"";
  position:absolute;
  left:24px;                /* положение хвостика — можно подвинуть */
  top:-6px;
  width:12px; height:12px;
  transform: rotate(45deg);
}

/* Внутренний (цвет пузыря) */
.projects-info-panel::before{
  background: rgba(255,255,255,.06);
  z-index:1;
}

/* Внешний (обводка) — чуть больше и смещён */
.projects-info-panel::after{
  left:23px;
  top:-7px;
  background: transparent;
  border-left:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.12);
  z-index:0;
}

/* Когда JS добавляет .show — показываем панель */
.projects-info-panel.show{ display:block; }
}

/* ------------------------------
   Mobile
--------------------------------*/
@media (max-width: 768px) {
  header{ position: sticky; }

  header .container{
    flex-direction: column; gap: 1rem; padding: 0.5rem 0;
  }

  /* скрыть логотип, чтобы шапка была компактнее */
  .logo{ display: none !important; }

  header nav{ display:flex; flex-wrap:wrap; justify-content:center; }
  header nav a{ margin-right:1rem; }
  header nav a:last-child{ margin-right:0; }

  .hero{ padding-top:110px; }
  .hero-container{ flex-direction:column; align-items:center; text-align:center; }
  .hero-image img{ max-width:100%; margin:0 auto; display:block; }

  /* Dropdown поведение и внешний вид на мобилках */
  .projects-wrapper{ position:relative; }
  .projects-dropdown{
  position:absolute; top: calc(100% + 8px);
  left: -14px;                          /* ← сдвиг влево на мобилках */
  display:none; opacity:1; transform:none; pointer-events:auto;
  min-width:220px; z-index:1000;
}
  .projects-dropdown.show{ display:block; }

  /* На мобилках не показываем десктопную всплывашку */
  .info-popup{ display:none !important; }
  .projects-dropdown .project-item::after{ display:none; }
  .projects-dropdown .project-item a::after{ display:none; }

  /* Панель описания под списком */
  .projects-info-panel{
    display:none;
    margin-top:12px; padding:12px 14px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px; font-size:14px; line-height:1.4;
  }
  .projects-info-panel.show{ display:block; }
}

/* Telegram-like message bubbles (общие классы) */
.tg-bubble{
  border-radius:18px; padding:10px 12px; font-size:14px; line-height:1.35;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.tg-bubble--out{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; }
.tg-bubble--in{  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color: var(--text-main); }

/* Панель описания по умолчанию скрыта везде */
.projects-info-panel{ display:none !important; }
/* На мобилках показываем, когда есть .show */
@media (max-width: 768px){ .projects-info-panel.show{ display:block !important; } }

:root{
  --tip-w: 200px;         /* ширина пузыря — поменяй под себя */
  --tip-pad: 12px 14px;   /* внутренние отступы */
  --tip-fs: 14px;         /* размер шрифта */
  --tip-lh: 1.45;         /* межстрочный интервал */
}

@media (hover: hover) {
  .projects-dropdown .project-item::after{
    width: var(--tip-w);        /* фиксируем ширину */
    max-width: none;            /* убираем ограничение 280px */
    padding: var(--tip-pad);
    font-size: var(--tip-fs);
    line-height: var(--tip-lh);
    white-space: normal;        /* переносы строк */
    word-break: break-word;     /* перенос длинных слов при необходимости */
  }
}

@media (max-width: 768px){
  .projects-info-panel{
    padding: var(--tip-pad);
    font-size: var(--tip-fs);
    line-height: var(--tip-lh);
    max-width: calc(100vw - 48px); /* чтобы не прилипало к краям экрана */
  }
}

/* Десктопная всплывашка */
@media (hover: hover){
  :root{
    --tip-fs: 16px;
    --tip-w: 240px;     /* при необходимости шире */
  }
}

/* Мобильная панель под списком */
@media (max-width: 768px){
  :root{
    --tip-fs: 17px;     /* крупнее на телефонах */
  }
}