/* index.css — hero-телефон и главная (раньше inline в scripts) */
/* Hero phone — floating overlay */
.hero-phone-outer{
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  width:200px;
  opacity:.55;
  pointer-events:none;
  overflow:visible;
}
.hero-phone-float{
  position:relative;
  width:200px;
  height:410px;
  animation:heroFloat 5s ease-in-out infinite;
  /* одна мягкая тень — несколько drop-shadow давали «кант» по bbox PNG */
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.22));
  isolation:isolate;
}
@media(min-width:1024px){
  .hero-phone-outer{
    display:block!important;
    right:-30px;
    width:260px;
    opacity:.96;
    pointer-events:auto;
    z-index:20;
  }
  .hero-phone-float{
    width:260px;
    height:530px;
    filter:drop-shadow(0 28px 56px rgba(0,0,0,.26));
  }
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
.hero-phone{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1),visibility .6s;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none;
}
.hero-phone.is-hidden{
  visibility:hidden;
  pointer-events:none;
}
/* Декоративное свечение за телефоном */
.phone-glow{
  display:none;
  position:absolute;
  right:-80px;top:50%;
  transform:translateY(-50%);
  width:500px;height:600px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}
@media(min-width:1024px){
  .phone-glow{
    display:block;
    background:radial-gradient(ellipse at 55% 50%,
      rgba(57,255,136,.20) 0%,
      rgba(57,255,136,.13) 22%,
      rgba(57,255,136,.07) 40%,
      rgba(57,255,136,.03) 55%,
      rgba(57,255,136,.01) 68%,
      transparent 80%);
  }
  .dark .phone-glow{
    background:radial-gradient(ellipse at 55% 50%,
      rgba(57,255,136,.34) 0%,
      rgba(57,255,136,.22) 22%,
      rgba(57,255,136,.11) 40%,
      rgba(57,255,136,.05) 55%,
      rgba(57,255,136,.015) 68%,
      transparent 80%);
  }
}
/* Hero word */
#hero-word{
  transition:opacity .4s ease,transform .4s ease;
  display:inline-block;
  background-clip:text;-webkit-background-clip:text;color:transparent;
}
