/* адаптивный размер */
    svg{
      width:auto;
      height:auto;
      max-height:92vh;
      display:block;
    }

    /* общий эффект "рисования" */
    .draw{
      stroke-dasharray: var(--len, 1);
      stroke-dashoffset: var(--len, 1);
      animation: drawLine var(--dur, 1.6s) ease-out forwards;
      animation-delay: var(--delay, 0s);
      will-change: stroke-dashoffset;
    }
    @keyframes drawLine{ to{ stroke-dashoffset:0; } }

    /* ВАЖНО: чтобы stroke НЕ толстел при scale(1.6 0.76) */
    .ns{ vector-effect: non-scaling-stroke; }

    /* лёгкое мигание */
    .signFlicker{
      animation: flicker 4.0s infinite;
      animation-delay: 2.0s;
      transform-origin: 50% 50%;
    }
    @keyframes flicker{
      0%,55%{ opacity:1; }
      56%{ opacity:.18; }
      57%{ opacity:1; }
      58%{ opacity:.06; }
      59%{ opacity:1; }
      60%,82%{ opacity:1; }
      83%{ opacity:.22; }
      84%{ opacity:1; }
      85%{ opacity:.08; }
      86%,100%{ opacity:1; }
    }
	
	
	
#mobile-mockup {
  opacity: 0;
  transform: translateY(0px) scale(0.95);
  transition: opacity .8s ease, transform .8s ease;
}

#mobile-mockup.is-visible {
  opacity: 1;
  transform: translateY(-110px) scale(1);
}

/* линии не рисуются до активации */
#mobile-mockup .draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

/* когда активен */
#mobile-mockup.is-visible .draw {
  animation: draw-line var(--dur, .8s) ease forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}







/* ===== WRAP ===== */
.phone-neon-wrap{
  position:relative;
  width:max-content;
  margin:auto;
}

/* ===== SVG вокруг ===== */
.phone-neon-svg{
  position:absolute;
  inset:-120px;               /* обводка ВОКРУГ */
  width:calc(100% + 240px);
  height:calc(100% + 240px);
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform: scale(1.9);
  transition: opacity .6s ease, transform .6s ease;
}

/* ===== включение ===== */
.phone-neon-wrap.is-visible .phone-neon-svg{
  opacity:1;
}

/* ===== линия ===== */
.neon-path{
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

.phone-neon-wrap.is-visible .neon-path{
  animation: drawLine var(--dur,1.6s) ease-out forwards;
  animation-delay: var(--delay,0s);
}

@keyframes drawLine{
  to{ stroke-dashoffset:0; }
}

/* ===== телефон выше линии ===== */
.phone-3d{
  position:relative;
  z-index:2;
}


/* ===== Neon Laptop (embedded) ===== */
.neon-laptop{
  position: relative;
  width: min(520px, 42vw);
  aspect-ratio: 16/9;
}

.neon-laptop__svg{
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 18px rgba(34,243,255,.12));
}

/* плавное "парение" */
.neon-laptop__svg{
  transform-origin: center;
  animation: neonFloat 3.9s ease-in-out infinite;
}
@keyframes neonFloat{
  0%,100% { transform: translateY(0) rotate(-1.2deg) scale(1); }
  50%     { transform: translateY(-8px) rotate(0.6deg) scale(1.01); }
}

/* grain overlay */
.neon-laptop__grain{
  position:absolute;
  inset:-40%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity:.05;
  transform: rotate(12deg);
  pointer-events:none;
  animation: grainMove 6s steps(8) infinite;
}
@keyframes grainMove{
  0%{ transform: translate(0,0) rotate(12deg); }
  100%{ transform: translate(-60px, 40px) rotate(12deg); }
}

/* stroke styles */
.neon-laptop .stroke{
  fill:none;
  stroke: url(#grad);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:url(#glow);
  vector-effect: non-scaling-stroke;
}
.neon-laptop .thin{ stroke-width:1; }

/* draw */
.neon-laptop .draw{
  stroke-dasharray: var(--len, 1);
  stroke-dashoffset: var(--len, 1);
}

/* по умолчанию — НЕ рисуем, пока не видно */
.neon-laptop{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.neon-laptop.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.neon-laptop.is-visible .draw{
  animation: drawLine var(--dur, 1.0s) ease-out forwards;
  animation-delay: var(--dd, 0s);
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* tip */
.neon-laptop .tip{
  opacity:.9;
  filter:url(#glowStrong);
  transform-box: fill-box;
  transform-origin: center;
  animation: tipMove var(--t, 1.2s) ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes tipMove{
  from{ transform: translateX(-260px); opacity:0; }
  15% { opacity:1; }
  to  { transform: translateX(260px); opacity:0; }
}

/* keys */
.neon-laptop .keysIn{
  opacity:0;
  animation: keysIn .25s linear forwards;
  animation-delay: var(--d, 0s);
}
@keyframes keysIn{ to{ opacity:1; } }

.neon-laptop .keyRect{
  fill:none;
  stroke: url(#grad);
  stroke-width: 1;
  opacity:.55;
  filter:url(#glow);
  vector-effect: non-scaling-stroke;
}
.neon-laptop .keyRect.space{ opacity:.5; }

.neon-laptop .keyRect[data-pressed="1"]{
  opacity:1 !important;
  stroke-width:2;
  filter:url(#glowStrong);
}

/* code text */
.neon-laptop #codeText{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  letter-spacing: .2px;
  fill: url(#grad);
  opacity: .85;
  filter: url(#glow);
  user-select:none;
}

/* responsive */
@media (max-width: 980px){
  .neon-laptop{ width: min(560px, 92vw); }
}
@media (prefers-reduced-motion: reduce){
  .neon-laptop__svg{ animation:none; }
  .neon-laptop.is-visible .draw{ animation:none; stroke-dashoffset:0; }
}





/* Отзывы контейнер для фонового SVG  */
#reviews .container{ position:relative; }

/* фон-слой */
#reviews .reviews-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* SVG позиция + скрытие */
#reviews .reviews-hand{
  position:absolute;
right: 10px;
    bottom: 50px;
  width:min(560px, 55vw);
  height:auto;

  opacity:0;
  transform: rotate(-10deg) scale(.95);
  transition: opacity .8s ease, transform .8s ease;
}

/* контент поверх */
#reviews .section__head,
#reviews .reviews{
  position:relative;
  z-index:2;
}

/* включаем видимость */
#reviews.is-visible .reviews-hand{
  opacity:.95;
 transform: rotate(-5deg) scale(1.6);
}

/* базовое состояние линий */
#reviews .reviews-hand .hand-draw{
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  will-change: stroke-dashoffset;
}

/* рисуем ТОЛЬКО когда видим */
#reviews.is-visible .reviews-hand .hand-draw{
  animation: handDrawLine var(--dur, 1.8s) ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes handDrawLine{ to{ stroke-dashoffset:0; } }

/* мигание неона после дорисовки */
#reviews.is-visible .reviews-hand .hand-neon{
  animation: handNeonFlicker 3.8s infinite;
  animation-delay: 2.2s;
}

@keyframes handNeonFlicker{
  0%,52%{opacity:1}
  53%{opacity:.15} 54%{opacity:1}
  55%{opacity:.05} 56%{opacity:1}
  57%,78%{opacity:1}
  79%{opacity:.2}  80%{opacity:1}
  81%{opacity:.08} 82%{opacity:1}
  83%,100%{opacity:1}
}







    /* ===== Right SVG ===== */
    .dialer svg{
      width:100%;
      height:auto;
      max-height:92vh;
      display:block;
      touch-action:manipulation;
      user-select:none;
    }

    .dialer .draw{
      stroke-dasharray: var(--len, 1);
      stroke-dashoffset: var(--len, 1);
      animation: drawLine var(--dur, 1.6s) ease-out forwards;
      animation-delay: var(--delay, 0s);
      will-change: stroke-dashoffset;
    }
    @keyframes drawLine{ to{ stroke-dashoffset:0; } }
    .ns{ vector-effect: non-scaling-stroke; }

    .uiFade{ opacity:0; animation: uiIn .7s ease-out forwards; animation-delay: 2.05s; }
    @keyframes uiIn{ to{ opacity:1; } }

    .keyBtn{ cursor:pointer; }
    .keyBtn .btnCore{ transition: transform .12s ease, opacity .12s ease; transform-origin:center; opacity:.95; }
    .keyBtn:hover .btnCore{ opacity:1; }
    .keyBtn.is-pressed .btnCore{ transform: scale(.94); }
    .keyBtn .ripple{ opacity:0; transform: scale(.2); transform-origin:center; }
    .keyBtn.is-pressed .ripple{ animation: ripple .28s ease-out forwards; }
    @keyframes ripple{ 0%{opacity:.55; transform:scale(.2);} 100%{opacity:0; transform:scale(1.55);} }

    .tTime{ font:700 14px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.2px; }
    .tName{ font:800 24px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.2px; }
    .tNumber{ font:600 18px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.6px; opacity:.95; }
    .tHint{ font:500 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; opacity:.7; }

    .btnNum{ font:900 20px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; dominant-baseline: middle; text-anchor: middle; }
    .btnLetters{ font:700 9px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; text-anchor: middle; opacity:.8; letter-spacing:1px; }




/* ===== Contact phone (dialer) reveal on scroll ===== */
.contact__right{
  opacity: 0;
  transform: translateY(60px) scale(.96);
  filter: blur(10px);
  transition: opacity .85s ease, transform .85s ease, filter .85s ease;
  will-change: transform, opacity, filter;
  pointer-events: none; /* пока не виден */
}

.contact__right.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* Важно: пока не доскролили — отключаем рисование/мигание */
.contact__right .draw,
.contact__right .signFlicker,
.contact__right .uiFade{
  animation-play-state: paused !important;
}

/* Когда блок стал видимым — включаем всё */
.contact__right.is-visible .draw,
.contact__right.is-visible .signFlicker,
.contact__right.is-visible .uiFade{
  animation-play-state: running !important;
}

/* Если у пользователя отключены анимации */
@media (prefers-reduced-motion: reduce){
  .contact__right{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }
  .contact__right .draw,
  .contact__right .signFlicker,
  .contact__right .uiFade{
    animation-play-state: running !important;
  }
}