/* ============================================================
   HERO 3D CINEMA — первый экран нового поколения
   ============================================================ */
.hero-cinema{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(59,130,246,.16), transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(168,85,247,.14), transparent 60%),
        linear-gradient(160deg,#05060f 0%,#0a0d1f 45%,#0b1026 100%);
    perspective:1000px;
}

/* --- 3D-слой --- */
#hero3d{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
}

/* --- Затемнение под текст: глубокое, но живое --- */
.hero-vignette{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(ellipse 55% 70% at 28% 50%, rgba(4,6,16,.88) 0%, rgba(4,6,16,.55) 45%, rgba(4,6,16,0) 75%);
}

/* --- плавающие световые пятна (доп. глубина) --- */
.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.35;
    z-index:1;
    pointer-events:none;
    animation:orbFloat 14s ease-in-out infinite alternate;
}
.hero-orb--1{width:420px;height:420px;left:-8%;top:8%;background:#3b82f6;animation-duration:16s;}
.hero-orb--2{width:360px;height:360px;right:-6%;bottom:6%;background:#a855f7;animation-duration:19s;animation-delay:-6s;}
.hero-orb--3{width:260px;height:260px;left:52%;top:-10%;background:#22d3ee;opacity:.22;animation-duration:22s;animation-delay:-11s;}
@keyframes orbFloat{
    from{transform:translate3d(0,0,0) scale(1);}
    to{transform:translate3d(60px,-45px,0) scale(1.18);}
}

/* --- Контент: стеклянная карточка, компактный шрифт --- */
.hero-cinema__content{
    position:relative;
    z-index:3;
    max-width:660px;
    margin:0 auto;
    padding:3.4rem 2.6rem 2.8rem;
    text-align:center;
    border-radius:26px;
    background:rgba(10,14,30,.42);
    border:1px solid rgba(148,163,184,.16);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08);
    transform-style:preserve-3d;
    will-change:transform;
}

/* верхняя световая кромка */
.hero-cinema__content::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:26px;
    padding:1px;
    background:linear-gradient(120deg,rgba(59,130,246,.55),rgba(168,85,247,.35) 45%,transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#7dd3fc;
    margin-bottom:1.1rem;
    padding:.42rem 1rem;
    border-radius:999px;
    border:1px solid rgba(125,211,252,.28);
    background:rgba(14,165,233,.08);
    animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) .15s both;
}
.hero-eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:#22d3ee;
    box-shadow:0 0 12px #22d3ee,0 0 26px #22d3ee;
    animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.6}}

/* Заголовок — НЕ большой, но выразительный */
.hero-cinema h1{
    font-size:clamp(1.55rem, 3.4vw, 2.25rem);
    line-height:1.22;
    font-weight:800;
    letter-spacing:-.01em;
    color:#f8fafc;
    margin:0 0 .85rem;
    animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) .32s both;
    text-wrap:balance;
}
.hero-cinema h1 .grad{
    background:linear-gradient(92deg,#60a5fa 0%,#a78bfa 45%,#22d3ee 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-cinema__text{
    font-size:clamp(.92rem, 1.6vw, 1.05rem);
    line-height:1.6;
    color:#c7d0e0;
    margin:0 0 1.5rem;
    max-width:46ch;
    margin-left:auto;
    margin-right:auto;
    animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) .48s both;
    text-wrap:pretty;
}

/* --- CTA-кнопка с «магнитным» свечением --- */
.hero-cinema .btn-cta{
    position:relative;
    display:inline-block;
    padding:.95rem 2.6rem;
    font-size:.98rem;
    font-weight:700;
    letter-spacing:.02em;
    color:#fff;
    background:linear-gradient(94deg,#2563eb 0%,#7c3aed 55%,#2563eb 100%);
    background-size:220% 100%;
    border:none;
    border-radius:999px;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 12px 34px rgba(99,102,241,.45),0 0 0 1px rgba(255,255,255,.12) inset;
    transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background-position .6s;
    animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) .62s both, ctaShine 5s linear 2s infinite;
}
@keyframes ctaShine{0%{background-position:0% 0}100%{background-position:220% 0}}
.hero-cinema .btn-cta:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 18px 48px rgba(124,58,237,.6),0 0 0 1px rgba(255,255,255,.2) inset;
}
.hero-cinema .btn-cta::after{
    content:"";
    position:absolute;
    top:0;left:-80%;
    width:55%;height:100%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-20deg);
    animation:btnSheen 3.4s ease-in-out infinite;
}
@keyframes btnSheen{0%,60%{left:-80%}100%{left:130%}}

/* --- Бейджи преимуществ: лёгкие «чипсы» --- */
.hero-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.5rem;
    margin:1.4rem 0 1.2rem;
    animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) .78s both;
}
.hero-chip{
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.04em;
    color:#dbe4f3;
    padding:.4rem .95rem;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.22);
    background:rgba(148,163,184,.08);
    transition:border-color .3s,background .3s,transform .3s;
    cursor:default;
}
.hero-chip:hover{
    border-color:rgba(96,165,250,.6);
    background:rgba(59,130,246,.14);
    transform:translateY(-2px);
}

/* --- Соцкнопки и счётчик адаптированы под тёмную тему --- */
.hero-cinema table{margin-left:auto;margin-right:auto;animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) .9s both;}
.hero-cinema .offer-counter{margin-top:1.3rem;animation:fadeSlideDown 1s cubic-bezier(.22,1,.36,1) 1s both;}
.hero-cinema .counter-title{color:#e2e8f0;font-size:.88rem;}
.hero-cinema .counter span{
    color:#fff;font-weight:800;font-variant-numeric:tabular-nums;
    text-shadow:0 0 18px rgba(96,165,250,.55);
}

/* --- Индикатор скролла --- */
.hero-scrollhint{
    position:absolute;
    left:50%;
    bottom:1.4rem;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.35rem;
    color:#8ea0bd;
    font-size:.68rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    animation:fadeSlideDown 1s ease 1.4s both;
    pointer-events:none;
}
.hero-scrollhint .mouse{
    width:22px;height:36px;
    border:1.5px solid rgba(142,160,189,.55);
    border-radius:12px;
    position:relative;
}
.hero-scrollhint .mouse::after{
    content:"";
    position:absolute;
    left:50%;top:7px;
    width:3px;height:7px;
    margin-left:-1.5px;
    border-radius:3px;
    background:#7dd3fc;
    animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

@keyframes fadeSlideDown{
    from{opacity:0;transform:translateY(26px);filter:blur(6px);}
    to{opacity:1;transform:translateY(0);filter:blur(0);}
}

/* --- Эффект лёгкого наклона карточки от курсора --- */
@media (hover:hover) and (pointer:fine){
    .hero-cinema__content{transition:transform .25s ease-out;}
}

/* --- Мобильная адаптация --- */
@media (max-width:640px){
    .hero-cinema__content{padding:2.4rem 1.4rem 2rem;margin:0 1rem;}
    .hero-orb--1{width:260px;height:260px;}
    .hero-orb--2{width:220px;height:220px;}
    .hero-scrollhint{display:none;}
}

@media (prefers-reduced-motion:reduce){
    .hero-cinema *,.hero-orb,.hero-cinema .btn-cta::after{animation:none!important;transition:none!important;}
}