:root{
    --purple: #5B3DF5;
    --purple-deep: #1A1030;
    --purple-soft: #F1EEFF;
    --paper: #FAFAFC;
    --ink: #16101F;
    --ink-soft: #635D72;
    --line: #E7E3F1;
    --amber: #FF9A2E;
    --green: #1FAE6E;
    --radius: 16px;
    --shadow: 0 1px 3px rgba(26,16,48,0.02), 0 12px 36px rgba(26,16,48,0.05);
    --ease: cubic-bezier(.16,.84,.44,1);
    --neon-gradient: linear-gradient(91.58deg, #53FBD5 76.95%, #75FF9C 89.79%, #BDFF89 99.95%);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;width:100%;overflow-x:hidden;}
  body{
    margin:0;padding:81px 0 0 0;width:100%;overflow-x:hidden;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  h1,h2,h3,.display{
    font-family:'Sora',sans-serif;
    letter-spacing:-0.03em;
  }
  .mono{
    font-family:'JetBrains Mono',monospace;
    letter-spacing:0.02em;
  }
  a{text-decoration:none;color:inherit;}
  
  .wrap{
    max-width:100%;
    margin:0 auto;
    padding:0 clamp(16px, 4vw, 120px);
  }
  img{max-width:100%;display:block;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- Scroll progress ---------- */
  .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:200;
    background:linear-gradient(90deg,var(--purple),#9B7CFF,var(--amber));
    transition:width .12s linear;}

  /* ---------- Reveal system ---------- */
  .reveal{
    opacity:0;
    transform:translate(var(--rx,0px), var(--ry,26px));
    transition:opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay:var(--rd,0ms);
    will-change:opacity, transform;
  }
  .reveal.visible{opacity:1;transform:translate(0,0);}
  .reveal-scale{opacity:0;transform:scale(.95);transition:opacity .6s var(--ease), transform .6s var(--ease);transition-delay:var(--rd,0ms);}
  .reveal-scale.visible{opacity:1;transform:scale(1);}

/* ---------- Header ---------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(250, 250, 252, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  min-height: 64px;
  overflow: visible !important;
  box-sizing: border-box;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 64px;
  padding: 8px 12px;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}
@media (min-width: 480px) {
  .nav {
    padding: 8px 16px;
    gap: 8px;
  }
}
@media (min-width: 768px) {
  .nav {
    padding: 8px clamp(16px, 4vw, 120px);
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .nav {
    min-height: 80px;
    padding: 0 clamp(24px, 6vw, 120px);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  overflow: visible;
}
@media (min-width: 480px) {
  .logo {
    gap: 8px;
  }
}
@media (min-width: 768px) {
  .logo {
    gap: 16px;
  }
}

.logo-content {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
@media (min-width: 480px) {
  .logo-content {
    gap: 8px;
  }
}
@media (min-width: 768px) {
  .logo-content {
    gap: 16px;
  }
}

.logo-img {
  display: block;
  height: 28px;
  width: 100px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}
@media (min-width: 400px) {
  .logo-img {
    height: 30px;
    width: 110px;
  }
}
@media (min-width: 480px) {
  .logo-img {
    height: 32px;
    width: 130px;
  }
}
@media (min-width: 640px) {
  .logo-img {
    height: 36px;
    width: 160px;
  }
}
@media (min-width: 768px) {
  .logo-img {
    height: 40px;
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .logo-img {
    height: 44px;
    width: 220px;
  }
}

.logo-divider {
  width: 1px;
  height: 16px;
  background-color: var(--line);
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .logo-divider {
    height: 20px;
  }
}
@media (min-width: 640px) {
  .logo-divider {
    height: 24px;
  }
}
@media (min-width: 1024px) {
  .logo-divider {
    height: 32px;
  }
}

.logo-tag {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 400px) {
  .logo-tag {
    font-size: 10px;
  }
}
@media (min-width: 480px) {
  .logo-tag {
    font-size: 11px;
  }
}
@media (min-width: 640px) {
  .logo-tag {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .logo-tag {
    font-size: 13px;
  }
}
@media (min-width: 1024px) {
  .logo-tag {
    font-size: 14px;
  }
}

/* На очень маленьких экранах прячем tag и divider */
@media (max-width: 380px) {
  .logo-divider {
    display: none;
  }
  .logo-tag {
    display: none;
  }
}

nav.links {
  display: none;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  nav.links {
    display: flex;
    margin-left: clamp(24px, 3vw, 48px);
  }
}
nav.links a {
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}
nav.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--purple);
  transition: right 0.25s var(--ease);
}
nav.links a:hover {
  color: var(--ink);
}
nav.links a:hover::after {
  right: 0;
}

/* ===== ГЛАВНАЯ КНОПКА В ХЭДЕРЕ — ПОЛНОСТЬЮ ПЕРЕДЕЛАНА ===== */
.nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 9px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: auto;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(91, 61, 245, 0.12);
  background: var(--purple);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  line-height: 1.2;
  height: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  position: relative;
}
@media (min-width: 400px) {
  .nav .btn {
    padding: 7px 12px;
    font-size: 10px;
    gap: 5px;
    border-radius: 8px;
  }
}
@media (min-width: 480px) {
  .nav .btn {
    padding: 8px 14px;
    font-size: 11px;
    gap: 6px;
    border-radius: 10px;
  }
}
@media (min-width: 640px) {
  .nav .btn {
    padding: 10px 18px;
    font-size: 12px;
    gap: 8px;
    border-radius: 10px;
  }
}
@media (min-width: 1024px) {
  .nav .btn {
    padding: 14px 26px;
    font-size: 15px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(91, 61, 245, 0.2);
  }
}

/* Сокращаем текст кнопки на мобильных */
.nav .btn .btn-text {
  display: inline;
}
@media (max-width: 500px) {
  .nav .btn .btn-text {
    font-size: 9px;
  }
}
@media (max-width: 420px) {
  .nav .btn .btn-text-short {
    display: inline;
  }
  .nav .btn .btn-text-full {
    display: none;
  }
}
@media (min-width: 421px) {
  .nav .btn .btn-text-short {
    display: none;
  }
  .nav .btn .btn-text-full {
    display: inline;
  }
}
/* На совсем маленьких экранах — только иконка */
@media (max-width: 360px) {
  .nav .btn .btn-text-short {
    display: none;
  }
  .nav .btn .btn-text-full {
    display: none;
  }
  .nav .btn {
    padding: 6px 8px;
    font-size: 0;
    gap: 0;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
  }
  .nav .btn::after {
    content: "✓";
    font-size: 14px;
    font-weight: 700;
  }
  .nav .btn svg {
    display: none;
  }
}

/* SVG в кнопке */
.nav .btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .nav .btn svg {
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 1024px) {
  .nav .btn svg {
    width: 16px;
    height: 16px;
  }
}

.nav .btn:hover {
  box-shadow: 0 6px 20px rgba(91, 61, 245, 0.25);
  transform: translateY(-1px);
}
.nav .btn:active {
  transform: scale(0.96);
}

/* Гарантия, что кнопка никогда не обрезается */
.nav .btn {
  margin-right: 0;
  margin-left: auto;
}

  /* ---------- Hero ---------- */
  .hero{
    padding:40px 0 60px;
    min-height:auto;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-bg{
    position:absolute;inset:-10% -10% -10% -10%;z-index:-1;pointer-events:none;
    background:
      radial-gradient(40% 45% at 15% 20%, rgba(91,61,245,0.12), transparent 60%),
      radial-gradient(35% 40% at 85% 80%, rgba(255,154,46,0.08), transparent 60%),
      radial-gradient(28% 32% at 75% 15%, rgba(155,124,255,0.12), transparent 60%);
    background-size:160% 160%;
    animation:blobDrift 22s ease-in-out infinite alternate;
  }
  @keyframes blobDrift{from{background-position:0% 0%;}to{background-position:100% 60%;}}
  
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11px;font-weight:700;letter-spacing:0.1em;
    color:var(--purple);text-transform:uppercase;
    background:var(--purple-soft);padding:6px 14px;border-radius:100px;
    margin-bottom:20px;
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple);animation:pulseDot 2.2s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.6);}}
  
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
    width:100%;
  }
  .hero h1{
    font-size:clamp(32px, 7vw, 76px);
    line-height:1.05;
    font-weight:800;
    margin:0 0 16px;
    color: var(--purple-deep);
  }
  .hero h1 .accent{color:var(--purple);position:relative;}
  .hero p.lead{
    font-size:clamp(15px, 2.2vw, 21px);
    color:var(--ink-soft);
    line-height:1.65;
    max-width:580px;
    margin:0 0 28px;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:32px;
  }
  .hero-actions .btn {
    font-size:clamp(13px, 1.8vw, 15px);
    padding:clamp(10px, 1.5vw, 14px) clamp(18px, 2.5vw, 26px);
  }
  
  .stat-strip{
    display:flex;
    flex-wrap:wrap;
    gap:8px 0;
    border-top:1px solid var(--line);
    padding-top:28px;
  }
  .stat-strip .stat{
    padding-right:24px;
    margin-right:24px;
    border-right:1px solid var(--line);
    flex:0 1 auto;
  }
  .stat-strip .stat:last-child{border-right:none;margin-right:0;padding-right:0;}
  .stat-strip .num{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(20px, 4vw, 26px);color:var(--purple-deep);}
  .stat-strip .label{font-size:12px;color:var(--ink-soft);margin-top:4px;font-weight:500;}

/* ---------- Dashboard Showcase ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start; /* было center — меняем на start, чтобы блок не прыгал */
  width: 100%;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 96px;
    align-items: center; /* на ПК возвращаем center */
  }
}

.dashboard-wrapper {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  z-index: 10;
  align-self: start; /* принудительно прижимаем к верху на мобильных */
}
@media (min-width: 1024px) {
  .dashboard-wrapper {
    align-self: center; /* на ПК по центру */
    perspective: 1200px;
  }
}

.dashboard-preview {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(26, 16, 48, 0.06);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}
/* На ПК — лёгкий 3D-эффект */
@media (min-width: 1024px) {
  .dashboard-preview {
    transform: rotateY(-4deg) rotateX(3deg) translateZ(0);
    box-shadow: 0 24px 48px rgba(26, 16, 48, 0.06), 0 4px 12px rgba(26, 16, 48, 0.03);
  }
  .dashboard-wrapper:hover .dashboard-preview {
    transform: rotateY(0deg) rotateX(0deg) translateZ(0);
    box-shadow: 0 32px 64px rgba(91, 61, 245, 0.12);
  }
}
/* На мобильных — никаких трансформаций */
@media (max-width: 1023px) {
  .dashboard-preview {
    transform: none !important;
  }
  .dashboard-wrapper:hover .dashboard-preview {
    transform: none !important;
    box-shadow: 0 16px 32px rgba(26, 16, 48, 0.06);
  }
}

.db-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.db-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.db-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e7e3f1;
}
.db-dot:nth-child(1) {
  background: #ff5f56;
}
.db-dot:nth-child(2) {
  background: #ffbd2e;
}
.db-dot:nth-child(3) {
  background: #27c93f;
}
.db-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .db-header {
    padding: 16px 24px;
  }
  .db-dot {
    width: 10px;
    height: 10px;
  }
  .db-title {
    font-size: 12px;
  }
}

.db-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) {
  .db-body {
    padding: 24px;
    gap: 20px;
  }
}

.db-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 480px) {
  .db-row {
    flex-direction: row;
  }
}

.db-card {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
}
@media (min-width: 768px) {
  .db-card {
    padding: 16px 20px;
    border-radius: 16px;
  }
}

.db-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
@media (min-width: 768px) {
  .db-card-label {
    font-size: 11px;
    margin-bottom: 8px;
  }
}

.db-card-value {
  font-family: 'Sora', sans-serif;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 800;
  color: var(--purple-deep);
}
.db-card-value.success {
  color: var(--green);
  font-size: clamp(14px, 2.5vw, 18px);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.db-card-value.success::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(31, 174, 110, 0.2);
  flex-shrink: 0;
}

.db-chart-wrap {
  margin-top: 4px;
}
@media (min-width: 768px) {
  .db-chart-wrap {
    margin-top: 8px;
  }
}

.db-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .db-chart-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

.db-chart {
  height: 80px;
  background: linear-gradient(180deg, rgba(91, 61, 245, 0.03) 0%, transparent 100%);
  border: 1px dashed rgba(91, 61, 245, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  padding: 0 8px;
  gap: 8px;
}
@media (min-width: 768px) {
  .db-chart {
    height: 110px;
    padding: 0 12px;
    gap: 12px;
    border-radius: 12px;
  }
}

.db-bar {
  flex: 1;
  background: var(--purple);
  border-radius: 3px 3px 0 0;
  opacity: 0.8;
  min-height: 4px;
  transition: height 0.6s ease;
}
.db-bar.active {
  background: var(--amber);
  opacity: 1;
}
.db-bar:hover {
  opacity: 1;
  filter: brightness(1.1);
}

/* Всплывающая плашка */
.float-badge {
  position: relative;
  bottom: auto;
  left: auto;
  background: #1a1030;
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 24px rgba(26, 16, 48, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 16px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  animation: floatBadge 4s ease-in-out infinite alternate;
  z-index: 20;
}
@media (min-width: 1024px) {
  .float-badge {
    position: absolute;
    bottom: -20px;
    left: -30px;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 16px 24px;
  }
}

.float-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .float-badge-icon {
    width: 36px;
    height: 36px;
  }
}

.float-badge-text {
  font-size: 13px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .float-badge-text {
    font-size: 14px;
  }
}

.float-badge-sub {
  font-size: 11px;
  color: #9c93b8;
  margin-top: 1px;
}
@media (min-width: 768px) {
  .float-badge-sub {
    font-size: 12px;
  }
}

@keyframes floatBadge {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}
@media (min-width: 1024px) {
  @keyframes floatBadge {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(-12px);
    }
  }
}

  /* ---------- Marquee strip ---------- */
  .marquee-strip{background:var(--purple-deep);padding:14px 0;overflow:hidden;position:relative;width:100%;}
  .marquee-track{display:flex;gap:40px;width:max-content;animation:marquee 30s linear infinite;}
  .marquee-track span{
    color:#D8D2EC;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap;
  }
  .marquee-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex-shrink:0;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ---------- Section shared ---------- */
  section{padding:60px 0;}
  @media(min-width:768px){section{padding:80px 0;}}
  @media(min-width:1024px){section{padding:120px 0;}}
  .section-head{max-width:720px;margin-bottom:40px;}
  .section-head h2{font-size:clamp(26px, 5vw, 48px);font-weight:800;margin:0 0 14px;color:var(--purple-deep);line-height:1.15;}
  .section-head p{color:var(--ink-soft);font-size:clamp(15px, 1.8vw, 19px);line-height:1.65;margin:0;}

  /* ---------- How it works (sticky stack) ---------- */
  .how{background:var(--paper);}
  .stack-wrap{position:relative;max-width:1000px;margin:0 auto;padding-bottom:8px;}
  .stack-card{
    position:relative;
    top:auto;
    margin-bottom:20px;
    background:#fff;border:1px solid var(--line);border-radius:24px;
    box-shadow:var(--shadow);padding:clamp(24px, 4vw, 60px) clamp(20px, 4vw, 64px);
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
    transition:box-shadow .3s ease;
    will-change:transform, opacity;
  }
  @media(min-width:640px){
    .stack-card{flex-direction:row;gap:clamp(24px,4vw,48px);align-items:flex-start;}
  }
  @media(min-width:1024px){
    .stack-card{position:sticky;top:110px;margin-bottom:32px;}
  }
  .stack-card .step-num{
    font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(40px, 8vw, 80px);
    color:var(--purple-soft);-webkit-text-stroke:2px var(--purple);
    line-height:1;flex-shrink:0;
  }
  .stack-card h3{font-size:clamp(20px, 3vw, 30px);margin:0 0 10px;font-weight:800;color:var(--purple-deep);}
  .stack-card p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0;max-width:580px;}
  .stack-card .step-tag{
    display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    color:var(--purple);background:var(--purple-soft);padding:4px 12px;border-radius:100px;margin-bottom:12px;
  }

  /* ---------- Benefits ---------- */
  .benefits-grid{display:grid;grid-template-columns:1fr;gap:20px;}
  @media(min-width:480px){.benefits-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.benefits-grid{grid-template-columns:repeat(3,1fr);gap:28px;}}
  .benefit-card{
    background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;
    box-shadow:var(--shadow);transition:transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  }
  .benefit-card:hover{transform:translateY(-4px);border-color:rgba(91,61,245,0.35);box-shadow:0 12px 24px rgba(26,16,48,0.04), 0 24px 48px rgba(26,16,48,0.08);}
  .benefit-icon{
    width:44px;height:44px;border-radius:12px;background:var(--purple-soft);color:var(--purple);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .25s ease, color .25s ease;
  }
  .benefit-card:hover .benefit-icon{background:var(--purple);color:#fff;}
  .benefit-icon svg{width:20px;height:20px;}
  .benefit-card h4{font-size:17px;font-weight:800;margin:0 0 10px;color:var(--purple-deep);}
  .benefit-card p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}

  /* ---------- Hear From Them ---------- */
  .part-comment {
    background:#FAFAFC;
    padding:60px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  @media(min-width:768px){.part-comment{padding:80px 0;}}
  @media(min-width:1024px){.part-comment{padding:100px 0;}}
  .text-linear {
    font-family:'Sora',sans-serif;
    font-size:clamp(26px, 5vw, 38px);
    font-weight:700;
    color:var(--purple-deep);
    margin-bottom:10px;
    text-align:center;
  }
  .part-comment .container{max-width:100%;padding:0 clamp(16px,4vw,120px);}
  .part-comment p.mb-xl-5 {
    color:var(--ink-soft);
    font-size:15px;
    margin-bottom:30px;
    text-align:center;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
  }
  .comment-list {
    display:flex;
    width:max-content;
    gap:16px;
    animation:marqueeComments 40s linear infinite;
  }
  @media(min-width:768px){.comment-list{gap:24px;}}
  .comment-swiper, .comment-swiper-copy {
    display:flex;
    gap:16px;
  }
  @media(min-width:768px){.comment-swiper, .comment-swiper-copy{gap:24px;}}
  .comment-item {
    background:#FFFFFF;
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    width:280px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:var(--shadow);
    transition:transform 0.3s var(--ease);
  }
  @media(min-width:480px){.comment-item{width:320px;padding:20px;}}
  @media(min-width:768px){.comment-item{width:380px;padding:24px;}}
  .comment-item:hover{transform:translateY(-4px);}
  .comment-content {
    font-size:13px;
    color:var(--ink);
    line-height:1.6;
    margin-bottom:16px;
    display:-webkit-box;
    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  @media(min-width:768px){.comment-content{font-size:14px;}}
  .comment-youtube {
    width:100%;
    height:140px;
    border-radius:8px;
    margin-bottom:16px;
    background-size:cover;
    background-position:center;
    position:relative;
    cursor:pointer;
  }
  @media(min-width:768px){.comment-youtube{height:180px;}}
  .comment-youtube::before {
    content:'';
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%, -50%);
    width:40px;height:40px;
    background:rgba(255,0,0,0.9) url('https://images.wondershare.com/filmora/filmora15/homepage/comment-youtube-icon.svg') no-repeat center;
    background-size:20px;
    border-radius:50%;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
    transition:all 0.2s ease;
  }
  @media(min-width:768px){.comment-youtube::before{width:48px;height:48px;background-size:24px;}}
  .comment-youtube:hover::before{transform:translate(-50%, -50%) scale(1.1);background-color:#ff1e1e;}
  .comment-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    padding-top:14px;
    margin-top:auto;
    gap:8px;
  }
  .d-flex{display:flex;}
  .align-items-center{align-items:center;}
  .mr-2{margin-right:10px;}
  .avatar-img img {
    width:36px;height:36px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border:1px solid var(--line);
  }
  @media(min-width:768px){.avatar-img img{width:44px;height:44px;}}
  .avatar-name{font-weight:600;font-size:13px;color:var(--purple-deep);}
  .avatar-desc{font-size:11px;color:var(--ink-soft);}
  .comment-badge img{height:20px;width:auto;display:block;}
  @media(min-width:768px){.comment-badge img{height:24px;}}

  @keyframes marqueeComments{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

/* ---------- Creator grid (dark) ---------- */
.creators {
  background: var(--purple-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 60px 0;
}
@media (min-width: 768px) {
  .creators {
    padding: 80px 0;
  }
}
@media (min-width: 1024px) {
  .creators {
    padding: 120px 0;
  }
}
.creators::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at 15% 20%, rgba(155, 124, 255, 0.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(91, 61, 245, 0.20), transparent 40%);
  background-size: 150% 150%;
  animation: blobDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
.creators .section-head p {
  color: #c6bee0;
}
.creators .section-head h2 {
  color: #fff;
}

/* Фильтры — компактные на мобильных */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .filters {
    gap: 12px;
    margin-bottom: 44px;
  }
}
.filter-pill {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #d8d2ec;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.18s ease;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .filter-pill {
    padding: 10px 22px;
    font-size: 14px;
  }
}
.filter-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.filter-pill.active {
  background: #fff;
  color: var(--purple-deep);
  border-color: #fff;
}

/* Сетка создателей — адаптивная */
.creator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) {
  .creator-grid {
    gap: 16px;
  }
}
@media (min-width: 640px) {
  .creator-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .creator-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* Карточка создателя — компактная на мобильных */
.creator-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.22s ease, background 0.22s ease;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .creator-card {
    border-radius: 20px;
  }
}
.creator-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.creator-media {
  position: relative;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .creator-media {
    height: 180px;
  }
}
@media (min-width: 768px) {
  .creator-media {
    height: 220px;
  }
}
@media (min-width: 1024px) {
  .creator-media {
    height: 280px;
  }
}

.creator-media .tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(20, 20, 20, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
  .creator-media .tag {
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    font-size: 10px;
    border-radius: 20px;
  }
}

.creator-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .creator-body {
    padding: 14px 18px 18px;
  }
}
@media (min-width: 1024px) {
  .creator-body {
    padding: 18px 20px 20px;
  }
}

.creator-body .cname {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .creator-body .cname {
    font-size: 15px;
  }
}
@media (min-width: 1024px) {
  .creator-body .cname {
    font-size: 16px;
  }
}

.creator-body .chandle {
  font-size: 11px;
  color: #9c93b8;
  margin-top: 1px;
}
@media (min-width: 768px) {
  .creator-body .chandle {
    font-size: 12.5px;
    margin-top: 2px;
  }
}

.creator-meta {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .creator-meta {
    gap: 6px;
    margin-top: 10px;
  }
}
@media (min-width: 1024px) {
  .creator-meta {
    gap: 8px;
    margin-top: 12px;
  }
}

.meta-pill {
  background: #161618;
  color: #8e8e93;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
@media (min-width: 768px) {
  .meta-pill {
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 5px;
  }
}
@media (min-width: 1024px) {
  .meta-pill {
    padding: 4px 10px;
    font-size: 10.5px;
  }
}

.explore-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 3px;
  position: relative;
  z-index: 1;
  transition: gap 0.2s ease;
}
@media (min-width: 768px) {
  .explore-link {
    margin-top: 32px;
    font-size: 15px;
  }
}
@media (min-width: 1024px) {
  .explore-link {
    margin-top: 44px;
  }
}
.explore-link:hover {
  gap: 12px;
}

  /* ---------- FAQ ---------- */
  .faq-list{border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 8px;cursor:pointer;font-weight:700;font-size:16px;
    color: var(--purple-deep);
    transition:color .2s ease;
    gap:16px;
  }
  @media(min-width:768px){.faq-q{font-size:18px;padding:26px 8px;}}
  .faq-q:hover{color:var(--purple);}
  .faq-q .chevron{transition:transform .3s var(--ease);color:var(--ink-soft);flex-shrink:0;font-size:13px;}
  .faq-item.open .faq-q .chevron{transform:rotate(180deg);}
  .faq-item.open .faq-q{color:var(--purple);}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  .faq-a p{margin:0 8px 20px;color:var(--ink-soft);font-size:15px;line-height:1.7;max-width:800px;}
  @media(min-width:768px){.faq-a p{margin:0 8px 26px;font-size:16px;}}

  /* ---------- CTA ---------- */
  .cta-section{
    padding:40px clamp(16px, 4vw, 120px);
  }
  .cta-section .cta-box{
    max-width:1280px;
    margin:0 auto;
    background:linear-gradient(135deg,var(--purple),#8A6BFF);
    position:relative;overflow:hidden;
    border-radius:20px;
  }
  .cta-box::before{
    content:"";position:absolute;inset:-20%;
    background:radial-gradient(35% 45% at 20% 30%, rgba(255,255,255,0.14), transparent 60%),
               radial-gradient(30% 40% at 85% 70%, rgba(255,255,255,0.10), transparent 60%);
    animation:blobDrift 20s ease-in-out infinite alternate;
  }
  .cta-inner{
    position:relative;z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:24px;
    padding:40px 24px;
    color:#fff;
  }
  @media(min-width:768px){
    .cta-inner{flex-direction:row;justify-content:space-between;text-align:left;padding:48px clamp(24px, 4vw, 64px);}
  }
  @media(min-width:1024px){.cta-inner{padding:64px clamp(24px, 4vw, 64px);}}
  .cta-inner h3{font-size:clamp(22px, 4vw, 34px);margin:0 0 10px;font-weight:800;}
  .cta-inner p{margin:0;color:#E4DEFF;font-size:clamp(15px, 2vw, 17px);max-width:500px;line-height:1.6;}
  .cta-inner .btn{background:#fff;color:var(--purple-deep);box-shadow:none;}
  .cta-inner .btn:hover{box-shadow:0 12px 32px rgba(0,0,0,0.15);transform:translateY(-2px);}

  /* ---------- Application paths and creator application form ---------- */
  .apply-section{padding:72px 0 28px;background:#faf9ff;}
  .apply-section .section-head{margin-bottom:30px;}
  .apply-paths{display:grid;grid-template-columns:1fr;gap:18px;}
  .apply-path{padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);}
  .apply-path-invited{border-color:rgba(91,61,245,.28);}
  .apply-path-label{display:inline-flex;margin-bottom:14px;padding:6px 10px;border-radius:100px;background:var(--purple-soft);color:var(--purple);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
  .apply-path h3{margin:0 0 10px;color:var(--purple-deep);font-family:'Sora',sans-serif;font-size:21px;line-height:1.3;}
  .apply-path p{min-height:72px;margin:0 0 22px;color:var(--ink-soft);font-size:14px;line-height:1.65;}
  .apply-path .btn{min-height:48px;}
  .apply-path-invited .btn{background:var(--purple);color:#fff;}
  .apply-path-open .btn{border:1px solid var(--line);background:#fff;color:var(--purple-deep);box-shadow:0 4px 12px rgba(24,14,56,.06);}
  .apply-path-open .btn:hover{border-color:var(--purple);box-shadow:0 8px 20px rgba(91,61,245,.12);}
  .application-section{padding:48px 0 88px;background:#faf9ff;}
  .application-layout{display:grid;grid-template-columns:1fr;gap:34px;align-items:start;}
  .application-intro h2{max-width:480px;margin:0 0 16px;color:var(--purple-deep);font-family:'Sora',sans-serif;font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.03em;}
  .application-intro p{max-width:480px;margin:0;color:var(--ink-soft);font-size:16px;line-height:1.7;}
  .application-note{display:flex;gap:10px;align-items:center;margin-top:22px;color:var(--ink);font-size:14px;font-weight:600;}
  .application-note span{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--purple-soft);color:var(--purple);}
  .application-form{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);}
  .application-fields{display:grid;grid-template-columns:1fr;gap:18px;}
  .application-field{display:flex;min-width:0;flex-direction:column;gap:8px;color:var(--purple-deep);font-size:13px;font-weight:700;}
  .application-required{color:#e44b69;}
  .application-field input,.application-field select,.application-field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;outline:none;background:#fff;color:var(--ink);font:400 14px 'Inter',sans-serif;transition:border-color .2s ease,box-shadow .2s ease;}
  .application-field textarea{min-height:110px;resize:vertical;}
  .application-field input::placeholder,.application-field textarea::placeholder{color:#A49EB3;}
  .application-field input:focus,.application-field select:focus,.application-field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}
  .application-field-wide{grid-column:1/-1;}
  .application-optional{color:var(--ink-soft);font-weight:400;}
  .application-submit{display:flex;justify-content:center;gap:10px;width:100%;min-height:50px;margin-top:22px;border:0;background:var(--purple);color:#fff;cursor:pointer;}
  .application-submit:disabled{cursor:wait;opacity:.7;transform:none;}
  .application-status{min-height:20px;margin:12px 0 0;font-size:14px;line-height:1.5;}
  .application-status.is-success{color:#18794e;}
  .application-status.is-error{color:#b42318;}
  .application-privacy{margin:8px 0 0;color:var(--ink-soft);font-size:12px;line-height:1.5;}
  @media(min-width:640px){
    .apply-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
    .apply-path{padding:32px;}
    .application-form{padding:32px;}
    .application-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(min-width:1024px){
    .apply-section{padding-top:96px;}
    .application-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;}
    .application-intro{position:sticky;top:100px;}
  }

  /* ---------- Footer ---------- */
  footer{background:#050505;color:#fff;padding:50px 0 32px;}
  @media(min-width:768px){footer{padding:80px 0 48px;}}
  .footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    margin-bottom:40px;
  }
  @media(min-width:640px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}}
  @media(min-width:1024px){.footer-grid{gap:64px;margin-bottom:64px;}}
  .footer-logo-block{display:flex;flex-direction:column;gap:12px;}
  .footer-logos-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .footer-logo-block img{height:80px;width:auto;max-width:200px;object-fit:contain;align-self:flex-start;}
  @media(min-width:768px){.footer-logo-block img{height:120px;max-width:260px;}}
  @media(min-width:1024px){.footer-logo-block img{height:145px;max-width:280px;}}
  .footer-logo-block p{color:#8c85a0;font-size:13px;margin:0;}
  .footer-col h4{font-size:15px;font-weight:700;margin:0 0 16px 0;color:#fff;}
  .footer-col p{font-size:13.5px;color:#9C93B8;margin:0 0 10px 0;cursor:pointer;transition:color 0.2s ease;}
  .footer-col p:hover{color:#fff;}
  .foot-row{
    display:flex;flex-direction:column;
    align-items:center;
    border-top:1px solid #222;padding-top:24px;
    font-size:12.5px;color:#635D72;gap:12px;
    text-align:center;
  }
  @media(min-width:640px){.foot-row{flex-direction:row;justify-content:space-between;text-align:left;gap:16px;}}

  /* ---------- Modal (yt-modal-overlay) ---------- */
  .yt-modal-overlay {
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(13,8,27,0.7);backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    z-index:10000;opacity:1;transition:opacity 0.3s var(--ease);
    padding:16px;
  }
  .yt-modal-overlay.hidden{display:none !important;opacity:0;pointer-events:none;}
  .yt-modal-container {
    background:#fff;border-radius:20px;padding:24px 20px;
    max-width:540px;width:100%;position:relative;
    box-shadow:0 24px 48px rgba(0,0,0,0.2);
    animation:ytModalFadeIn 0.4s var(--ease);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    max-height:90vh;
    overflow-y:auto;
  }
  @media(min-width:480px){.yt-modal-container{padding:32px;}}
  @media(min-width:640px){.yt-modal-container{padding:40px;}}
  @keyframes ytModalFadeIn{
    from{opacity:0;transform:translateY(20px) scale(0.95);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  .yt-modal-close{
    position:absolute;top:16px;right:18px;font-size:26px;line-height:1;
    background:none;border:none;color:var(--ink-soft);cursor:pointer;transition:color 0.2s;
  }
  @media(min-width:480px){.yt-modal-close{top:20px;right:24px;font-size:28px;}}
  .yt-modal-header{text-align:center;margin-bottom:20px;}
  .yt-modal-badge{
    display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;
    color:var(--purple);background:var(--purple-soft);padding:5px 10px;border-radius:100px;margin-bottom:12px;
    letter-spacing:0.05em;
  }
  .yt-modal-badge::before{content:"";width:5px;height:5px;background:var(--purple);border-radius:50%;}
  .yt-modal-header h2{font-size:clamp(22px, 5vw, 28px);color:var(--purple-deep);margin:0 0 8px;font-weight:800;line-height:1.2;letter-spacing:-0.02em;}
  .yt-modal-header h2 .accent{color:var(--purple);}
  .yt-modal-header p{color:var(--ink-soft);font-size:13.5px;margin:0;line-height:1.5;}

  .yt-modal-search{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
  @media(min-width:400px){.yt-modal-search{flex-direction:row;}}
  .yt-modal-search input{
    flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
    font-size:14px;outline:none;transition:border-color 0.2s, box-shadow 0.2s;font-family:inherit;color:var(--ink);
    background:#fff;width:100%;
  }
  .yt-modal-search input::placeholder{color:#A49EB3;}
  .yt-modal-search input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}
  .yt-modal-search .btn-check{
    background:var(--purple);color:#fff;padding:14px 20px;border-radius:10px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:all .25s var(--ease);
    box-shadow:0 4px 12px rgba(91,61,245,0.15);
    white-space:nowrap;
  }
  .yt-modal-search .btn-check:hover{background:#4a30d9;transform:translateY(-1px);}

  .yt-status-msg{text-align:center;font-size:13px;color:var(--ink-soft);margin-bottom:12px;font-weight:500;}
  .yt-status-msg.hidden{display:none !important;}

  .yt-result-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow);background:#fff;}
  .yt-result-card.hidden{display:none !important;}
  .yt-result-header{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line);
    flex-wrap:wrap;}
  .yt-result-header img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line);}
  @media(min-width:480px){.yt-result-header img{width:56px;height:56px;}}
  .yt-result-header h3{margin:0 0 2px;font-size:16px;color:var(--purple-deep);font-family:'Sora',sans-serif;font-weight:700;}
  .yt-result-header p{margin:0;font-size:12.5px;color:var(--ink-soft);}

  .yt-result-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);background:#fafafc;}
  .yt-result-stats > div{padding:10px;text-align:center;border-right:1px solid var(--line);}
  .yt-result-stats > div:last-child{border-right:none;}
  .yt-stat-val{font-size:17px;font-weight:800;color:var(--purple);font-family:'Sora',sans-serif;}
  .yt-stat-label{font-size:10px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;margin-top:2px;letter-spacing:0.05em;}

  .yt-result-status{padding:12px 16px;font-size:13px;color:var(--ink);background:rgba(31,174,110,0.06);display:flex;align-items:center;flex-wrap:wrap;}
  .yt-status-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:10px;box-shadow:0 0 0 3px rgba(31,174,110,0.2);flex-shrink:0;}

  .yt-verify-btn{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background 0.2s, border-color 0.2s;
    font-family:inherit;
  }
  .yt-verify-btn:hover{background:#fafafc;border-color:#d0cadd;}
  .yt-verify-btn.hidden{display:none !important;}
  .yt-verify-btn svg{width:18px;height:18px;flex-shrink:0;}

  .yt-secure-text{text-align:center;font-size:11px;color:var(--ink-soft);margin-top:10px;}
  .yt-secure-text.hidden{display:none !important;}

  /* ---------- Mobile header fixes ---------- */
  @media(max-width:640px){
    body{padding-top:64px;}
    .nav{height:64px;padding:0 12px;gap:8px;}
    .logo-img{height:28px;max-width:120px;}
    .logo-divider{height:20px;}
    .logo-tag{font-size:10px;}
    nav.links{display:none !important;}
    .btn{padding:10px 16px;font-size:12px;}
  }
  @media(max-width:480px){
    .hero{padding:24px 0 40px;}
    .hero-actions .btn{width:100%;justify-content:center;}
    .stat-strip .stat{padding-right:14px;margin-right:14px;}
    .stat-strip .num{font-size:18px;}
    .stack-card .step-num{font-size:32px;}
    .section-head h2{font-size:24px;}
    .footer-grid{grid-template-columns:1fr;gap:24px;}
    .footer-logo-block img{height:60px;max-width:160px;}
    .cta-section{padding:24px 12px;}
    .yt-modal-container{padding:20px 16px;margin:10px;}
  }
/* ---------- Mobile header fixes (extra) ---------- */
/* Гарантируем, что хэдер никогда не обрезается */
header,
.nav,
.nav * {
  box-sizing: border-box;
}

/* Защита от обрезания на iOS Safari */
@supports (-webkit-touch-callout: none) {
  header {
    padding-top: env(safe-area-inset-top);
  }
  .nav {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* На очень маленьких экранах убираем разделитель и tag */
@media (max-width: 380px) {
  .logo-divider {
    display: none;
  }
  .logo-tag {
    display: none;
  }
}

/* На экранах от 381px до 480px — показываем только короткую версию */
@media (min-width: 381px) and (max-width: 480px) {
  .logo-tag {
    font-size: 10px;
  }
  .logo-img {
    height: 28px;
    max-width: 100px;
  }
}

/* Кнопка не должна вылазить за границы */
.nav .btn {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}

/* Для безопасного отображения на всех устройствах */
.nav {
  overflow: visible;
}
header {
  overflow: visible;
}
/* ---------- FINAL MOBILE HEADER FIXES ---------- */

/* Фикс для iOS Safari (iPhone 12/13/14 и другие) */
@supports (-webkit-touch-callout: none) {
  header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    width: 100vw;
    max-width: 100vw;
  }
  .nav {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    width: 100%;
    max-width: 100%;
  }
}

/* Дополнительная защита от обрезания */
.nav {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.nav .btn {
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
  margin-left: auto;
}

/* Фикс для очень узких экранов */
@media (max-width: 380px) {
  .nav {
    padding: 6px 8px;
    min-height: 56px;
    gap: 4px;
  }
  .logo-img {
    height: 24px;
    max-width: 80px;
  }
  .logo {
    gap: 4px;
  }
  .logo-content {
    gap: 4px;
  }
}

/* Для iPhone SE и других маленьких */
@media (max-width: 375px) {
  .nav .btn {
    padding: 5px 8px;
    font-size: 8px;
    border-radius: 6px;
    min-height: 28px;
  }
  .nav .btn svg {
    width: 10px;
    height: 10px;
  }
}

/* Для iPhone 12/13/14 (393px) — точно исправляем */
@media (min-width: 390px) and (max-width: 430px) {
  .nav {
    padding: 8px 14px;
    gap: 6px;
  }
  .logo-img {
    height: 28px;
    max-width: 90px;
  }
  .logo-tag {
    font-size: 9px;
  }
  .logo-divider {
    height: 16px;
  }
  .nav .btn {
    padding: 7px 12px;
    font-size: 10px;
    border-radius: 8px;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .nav .btn .btn-text-short {
    display: inline;
  }
  .nav .btn .btn-text-full {
    display: none;
  }
  .nav .btn svg {
    width: 11px;
    height: 11px;
  }
}

/* Для iPhone 12/13/14 Pro Max и похожих */
@media (min-width: 430px) and (max-width: 500px) {
  .nav .btn .btn-text-short {
    display: inline;
  }
  .nav .btn .btn-text-full {
    display: none;
  }
}

/* ---------- Application controls ---------- */
.apply-path .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 14px/1.35 'Inter', sans-serif;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.apply-path-invited .btn {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 6px 16px rgba(91, 61, 245, .2);
}
.apply-path-invited .btn:hover {
  background: #4a30d9;
  box-shadow: 0 8px 20px rgba(91, 61, 245, .26);
}
.apply-path-open .btn {
  border-color: var(--line);
  background: #fff;
  color: var(--purple-deep);
  box-shadow: 0 4px 12px rgba(24, 14, 56, .06);
}
.apply-path-open .btn:hover {
  border-color: var(--purple);
  background: var(--purple-soft);
  box-shadow: 0 8px 20px rgba(91, 61, 245, .12);
}
.apply-path .btn:focus-visible,
.application-submit:focus-visible {
  outline: 3px solid rgba(91, 61, 245, .3);
  outline-offset: 3px;
}
.application-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23635D72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.application-field select:invalid {
  color: #8f899d;
}
.application-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--purple);
  color: #fff;
  font: 600 15px/1.35 'Inter', sans-serif;
  box-shadow: 0 6px 16px rgba(91, 61, 245, .2);
  cursor: pointer;
  transition: none;
  transform: none;
  animation: none;
}
.application-submit:hover,
.application-submit:active {
  background: #4a30d9;
  box-shadow: 0 6px 16px rgba(91, 61, 245, .2);
  transform: none;
}
.application-submit:disabled {
  background: var(--purple);
  opacity: .65;
  cursor: wait;
}