/* Стили, которые нужны только странице index.html */

.hero-hint{position:relative;z-index:2;margin-top:22px;font-size:12px;color:#7C9686;}
@media (max-width:999px){.hero-hint{display:none;}}
#tower{position:absolute;inset:0;z-index:1;width:100%;height:100%;}
@media (max-width:900px){#tower{display:none;}}
/* №36: тизер тарифов — подсветка следует за мышью, по умолчанию — аутсорсинг */
  @media (hover:hover) and (pointer:fine){
    .grid-3:has(.teaser-card:hover) .price-card.hi:not(:hover){
      border-color:var(--line); background:var(--white); box-shadow:none;
    }
    .grid-3:has(.teaser-card:hover) .price-card.hi:not(:hover)::before{opacity:0;}
    .grid-3 .teaser-card:hover{
      border-color:var(--green-main); background:var(--pale);
      box-shadow:inset 0 0 0 1px var(--green-main), 0 16px 34px rgba(18,49,11,.14);
    }
  }
.price-card.hi::before{transition:opacity .2s ease;}
/* №37/№40: мобильный ярлык «Живое демо» + полноэкранный оверлей */
  .demo-tab{position:fixed;right:0;top:58%;z-index:150;display:none;align-items:center;gap:8px;
    background:var(--dark-card);color:var(--green-bright);font-weight:600;font-size:12.5px;font-family:'Inter',sans-serif;
    padding:10px 14px 10px 12px;border-radius:14px 0 0 14px;border:none;
    box-shadow:0 6px 18px rgba(18,49,11,.3);cursor:pointer;white-space:nowrap;}
.demo-tab svg{width:14px;height:14px;}
@media (max-width:900px){.demo-tab{display:flex;}}
.demo-overlay{position:fixed;inset:0;z-index:400;display:none;
    background:radial-gradient(120% 100% at 80% 20%, #16260F 0%, #0F1C0C 60%, #0A1308 100%);}
.demo-overlay.show{display:block;}
.demo-overlay .ov-stage{position:absolute;inset:0;}
.demo-overlay canvas{position:absolute;inset:0;width:100%;height:100%;}
.demo-overlay .ov-x{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border:none;
    background:rgba(255,255,255,.12);color:#fff;border-radius:50%;font-size:17px;line-height:1;cursor:pointer;}
.demo-overlay .ov-cap{position:absolute;left:0;right:0;bottom:16px;z-index:2;text-align:center;
    color:var(--on-dark-soft);font-size:12.5px;padding:0 34px;pointer-events:none;}
.demo-overlay .ov-ttl{position:absolute;left:20px;top:20px;z-index:2;color:#fff;
    font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;max-width:70%;}
/* №56: тизер тарифов — подсветка касанием на телефоне */
  .grid-3 .teaser-card.touched{
    border-color:var(--green-main); background:var(--pale);
    box-shadow:inset 0 0 0 1px var(--green-main), 0 16px 34px rgba(18,49,11,.14);
  }
.grid-3.has-touched .price-card.hi:not(.touched){border-color:var(--line);background:var(--white);box-shadow:none;}
.grid-3.has-touched .price-card.hi:not(.touched)::before{opacity:0;}
/* №65–66: «Три причины» — зелёная подсветка и переходы */
  .reason-card{cursor:pointer;transition:background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;position:relative;}
.reason-card .r-go{position:absolute;right:18px;bottom:16px;color:var(--green-main);font-weight:700;font-size:16px;opacity:0;transition:opacity .2s, transform .2s;transform:translateX(-6px);}
.reason-card:hover .r-go, .reason-card.touched .r-go{opacity:1;transform:none;}
.reason-card:hover, .reason-card.touched{
    background:var(--pale); border-color:var(--green-light);
    box-shadow:inset 0 0 0 1px var(--green-light), 0 14px 30px rgba(18,49,11,.12);
    transform:translateY(-4px);
  }
.reason-card:hover .reason-num, .reason-card.touched .reason-num{color:var(--green-light);}
/* №91: ярлык демо сворачивается в язычок */
  .demo-tab{transition:transform .3s ease;}
.demo-tab.folded{transform:translateX(calc(100% - 26px));}