/* =========================================================
   ULTRA PREMIUM 3D HERO
   Фокус: сильный визуальный эффект + идеальная читаемость.
   ========================================================= */

.ultra-hero{
    --hero-bg:#050c0b;
    --hero-bg2:#091815;
    --hero-mint:#b9ffe0;
    --hero-mint-soft:rgba(185,255,224,.22);
    --hero-gold:#d8c58d;
    --hero-white:#f7fbf9;
    --hero-muted:rgba(236,248,243,.76);
    position:relative;
    min-height:calc(100vh - 76px);
    min-height:720px;
    height:min(900px, calc(100vh - 76px));
    overflow:hidden;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 48%, rgba(53,132,104,.17) 0, rgba(15,55,43,.08) 25%, transparent 52%),
        radial-gradient(circle at 18% 18%, rgba(211,193,131,.07), transparent 28%),
        linear-gradient(135deg,var(--hero-bg) 0%,var(--hero-bg2) 52%,#030807 100%);
    color:var(--hero-white);
}

.ultra-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(0,0,0,.34),transparent 32%,transparent 68%,rgba(0,0,0,.34)),
        linear-gradient(180deg,rgba(0,0,0,.24),transparent 26%,transparent 70%,rgba(0,0,0,.5));
}

.hero-3d{
    position:absolute;
    inset:-10%;
    z-index:1;
    pointer-events:none;
    transform-style:preserve-3d;
    will-change:transform;
    perspective:1100px;
    transition:filter .5s ease;
}

.hero-vignette{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(ellipse at center, transparent 0 31%, rgba(2,8,7,.12) 53%, rgba(1,4,4,.78) 100%),
        linear-gradient(90deg,rgba(1,5,4,.48),transparent 28%,transparent 72%,rgba(1,5,4,.48));
}

.hero-content{
    position:relative;
    z-index:10;
    width:min(920px,92%);
    text-align:center;
}

.ultra-hero-content{
    transform:translateY(-1.5%);
    animation:heroContentIn 1.15s cubic-bezier(.2,.75,.2,1) both;
}

.hero-kicker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:0 auto 15px;
    font-size:11px;
    line-height:1;
    letter-spacing:.27em;
    font-weight:700;
    color:rgba(220,242,232,.72);
    text-transform:uppercase;
    text-shadow:0 1px 16px rgba(0,0,0,.7);
}

.hero-kicker span{
    width:26px;
    height:1px;
    display:block;
    background:linear-gradient(90deg,transparent,var(--hero-gold));
    opacity:.8;
}
.hero-kicker span:last-child{
    transform:scaleX(-1);
}

.ultra-hero h1{
    margin:0 auto;
    max-width:900px;
    font-size:clamp(30px,4.25vw,54px);
    line-height:1.07;
    letter-spacing:-.035em;
    font-weight:800;
    color:#fff;
    text-shadow:
        0 2px 3px rgba(0,0,0,.75),
        0 0 30px rgba(0,0,0,.78),
        0 0 70px rgba(111,224,180,.08);
}

.ultra-hero .hero-text{
    max-width:650px;
    margin:15px auto 18px !important;
    font-size:clamp(15px,1.55vw,18px);
    line-height:1.55 !important;
    color:var(--hero-muted);
    text-shadow:0 2px 15px rgba(0,0,0,.9);
}

.ultra-hero .hero-cta{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    min-width:205px;
    min-height:52px;
    padding:13px 25px;
    margin:8px 0 15px;
    border:1px solid rgba(221,255,240,.42);
    border-radius:999px;
    background:
        linear-gradient(135deg,rgba(202,255,230,.97),rgba(137,210,179,.95));
    color:#08130f;
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:
        0 12px 45px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.07) inset,
        0 0 38px rgba(123,244,192,.16);
    cursor:pointer;
    transition:transform .28s ease,box-shadow .28s ease,filter .28s ease;
}

.ultra-hero .hero-cta b{
    font-size:20px;
    line-height:1;
    transition:transform .28s ease;
}
.ultra-hero .hero-cta:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);
    box-shadow:
        0 18px 55px rgba(0,0,0,.46),
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 0 50px rgba(123,244,192,.25);
}
.ultra-hero .hero-cta:hover b{transform:translateX(4px)}

.ultra-hero .offer-counter{
    width:max-content;
    max-width:100%;
    margin:2px auto 0;
    padding:9px 15px 10px;
    border:1px solid rgba(212,244,229,.12);
    border-radius:16px;
    background:rgba(3,14,11,.36);
    box-shadow:0 10px 35px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.ultra-hero .counter-title{
    margin-bottom:5px;
    font-size:10px;
    letter-spacing:.05em;
    color:rgba(239,249,244,.64);
}
.ultra-hero .counter{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}
.ultra-hero .counter > div{
    min-width:47px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.ultra-hero .counter span{
    font-size:21px;
    line-height:1;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    color:#effff7;
    text-shadow:0 0 18px rgba(150,255,208,.22);
}
.ultra-hero .counter small{
    margin-top:4px;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(220,239,231,.5);
}

.hero-scroll-indicator{
    position:absolute;
    z-index:11;
    left:50%;
    bottom:20px;
    width:22px;
    height:34px;
    transform:translateX(-50%);
    border:1px solid rgba(222,247,236,.25);
    border-radius:14px;
    opacity:.72;
}
.hero-scroll-indicator span{
    position:absolute;
    left:50%;
    top:7px;
    width:3px;
    height:7px;
    border-radius:3px;
    background:var(--hero-mint);
    transform:translateX(-50%);
    animation:scrollDot 1.8s ease-in-out infinite;
    box-shadow:0 0 10px rgba(185,255,224,.5);
}

/* ---- 3D scene ---- */

.hero-aura{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    transform:translate(-50%,-50%);
    filter:blur(25px);
    mix-blend-mode:screen;
}
.hero-aura-1{
    width:540px;height:540px;
    background:radial-gradient(circle,rgba(92,255,189,.15) 0,rgba(92,255,189,.035) 38%,transparent 70%);
    animation:auraPulse 6s ease-in-out infinite;
}
.hero-aura-2{
    width:850px;height:850px;
    background:radial-gradient(circle,rgba(212,190,125,.07) 0,transparent 62%);
    animation:auraPulse 8s ease-in-out infinite reverse;
}

.hero-grid{
    position:absolute;
    left:-8%;
    right:-8%;
    bottom:-23%;
    height:64%;
    transform-origin:center bottom;
    transform:perspective(650px) rotateX(64deg);
    background-image:
        linear-gradient(rgba(124,220,183,.10) 1px,transparent 1px),
        linear-gradient(90deg,rgba(124,220,183,.10) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 93%);
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 93%);
    animation:gridMove 8s linear infinite;
    opacity:.48;
}

.hero-horizon{
    position:absolute;
    left:10%;
    right:10%;
    top:58%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(169,247,211,.24),rgba(222,202,143,.3),rgba(169,247,211,.24),transparent);
    box-shadow:0 0 28px rgba(127,238,192,.16);
    opacity:.7;
}

.hero-ring{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(174,250,215,.25);
    border-radius:50%;
    transform-style:preserve-3d;
    box-shadow:0 0 20px rgba(111,244,192,.05),inset 0 0 20px rgba(111,244,192,.03);
}
.hero-ring::before,
.hero-ring::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.hero-ring::before{
    inset:-1px;
    border:1px solid transparent;
    border-top-color:rgba(214,198,143,.8);
    border-right-color:rgba(185,255,224,.18);
    filter:drop-shadow(0 0 8px rgba(220,201,143,.4));
}
.hero-ring::after{
    width:7px;height:7px;
    top:-4px;left:50%;
    transform:translateX(-50%);
    background:var(--hero-gold);
    box-shadow:0 0 12px rgba(221,201,139,.85);
}
.hero-ring-1{
    width:410px;height:410px;
    margin:-205px 0 0 -205px;
    transform:rotateX(69deg) rotateZ(12deg);
    animation:ringSpin1 15s linear infinite;
}
.hero-ring-2{
    width:510px;height:510px;
    margin:-255px 0 0 -255px;
    transform:rotateY(67deg) rotateZ(-22deg);
    border-color:rgba(145,239,199,.16);
    animation:ringSpin2 20s linear infinite reverse;
}
.hero-ring-3{
    width:305px;height:305px;
    margin:-152.5px 0 0 -152.5px;
    transform:rotateX(25deg) rotateY(58deg) rotateZ(35deg);
    border-color:rgba(221,198,135,.18);
    animation:ringSpin3 11s linear infinite;
}

.hero-core{
    position:absolute;
    left:50%;
    top:50%;
    width:150px;
    height:150px;
    margin:-75px 0 0 -75px;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:coreFloat 6s ease-in-out infinite;
    filter:drop-shadow(0 0 24px rgba(116,255,196,.16));
}
.hero-core::before{
    content:"";
    position:absolute;
    inset:25px;
    border-radius:50%;
    background:
        radial-gradient(circle at 34% 30%,#e7fff4 0 3%,#8dffd0 7%,rgba(65,210,150,.4) 24%,rgba(10,66,48,.32) 55%,transparent 72%);
    box-shadow:
        0 0 35px rgba(110,255,194,.36),
        0 0 90px rgba(76,219,158,.18),
        inset 0 0 25px rgba(255,255,255,.18);
    animation:corePulse 3.2s ease-in-out infinite;
}
.hero-core::after{
    content:"";
    position:absolute;
    inset:12px;
    border:1px solid rgba(185,255,224,.35);
    border-radius:50%;
    border-left-color:transparent;
    border-bottom-color:rgba(216,197,141,.62);
    animation:coreRotate 5s linear infinite;
}
.hero-core span{
    position:absolute;
    left:50%;
    top:50%;
    width:4px;
    height:4px;
    margin:-2px;
    border-radius:50%;
    background:#dffff0;
    box-shadow:0 0 9px rgba(177,255,219,.9);
    transform-origin:0 0;
}
.hero-core span:nth-child(1){transform:rotate(0deg) translateX(72px)}
.hero-core span:nth-child(2){transform:rotate(30deg) translateX(72px)}
.hero-core span:nth-child(3){transform:rotate(60deg) translateX(72px)}
.hero-core span:nth-child(4){transform:rotate(90deg) translateX(72px)}
.hero-core span:nth-child(5){transform:rotate(120deg) translateX(72px)}
.hero-core span:nth-child(6){transform:rotate(150deg) translateX(72px)}
.hero-core span:nth-child(7){transform:rotate(180deg) translateX(72px)}
.hero-core span:nth-child(8){transform:rotate(210deg) translateX(72px)}
.hero-core span:nth-child(9){transform:rotate(240deg) translateX(72px)}
.hero-core span:nth-child(10){transform:rotate(270deg) translateX(72px)}
.hero-core span:nth-child(11){transform:rotate(300deg) translateX(72px)}
.hero-core span:nth-child(12){transform:rotate(330deg) translateX(72px)}

.hero-orb{
    position:absolute;
    width:10px;height:10px;
    border-radius:50%;
    background:#d8ffed;
    box-shadow:0 0 10px rgba(199,255,227,.95),0 0 35px rgba(91,240,179,.55);
}
.hero-orb-a{left:25%;top:33%;animation:orbA 8s ease-in-out infinite}
.hero-orb-b{left:73%;top:31%;width:7px;height:7px;animation:orbB 9s ease-in-out infinite}
.hero-orb-c{left:79%;top:69%;width:5px;height:5px;animation:orbC 7s ease-in-out infinite}
.hero-orb-d{left:18%;top:70%;width:6px;height:6px;animation:orbD 10s ease-in-out infinite}

.hero-beam{
    position:absolute;
    left:50%;top:50%;
    width:2px;height:390px;
    transform-origin:50% 0;
    background:linear-gradient(to bottom,rgba(184,255,224,.35),transparent 82%);
    filter:blur(.2px);
    opacity:.55;
}
.hero-beam-1{transform:rotate(38deg) translateY(-50%);animation:beamMove1 8s ease-in-out infinite}
.hero-beam-2{transform:rotate(-51deg) translateY(-50%);animation:beamMove2 10s ease-in-out infinite}
.hero-beam-3{height:300px;transform:rotate(92deg) translateY(-50%);opacity:.35;animation:beamMove3 7s ease-in-out infinite}

.hero-particle-field{
    position:absolute;
    inset:0;
}
.hero-particle-field i{
    position:absolute;
    width:2px;height:2px;
    border-radius:50%;
    background:#d9ffec;
    box-shadow:0 0 7px rgba(174,255,215,.65);
    opacity:.35;
    animation:particleFloat var(--d,7s) ease-in-out infinite;
}
.hero-particle-field i:nth-child(1){left:12%;top:23%;--x:28px;--y:-20px;--d:8s}
.hero-particle-field i:nth-child(2){left:18%;top:44%;--x:-22px;--y:35px;--d:9s}
.hero-particle-field i:nth-child(3){left:29%;top:18%;--x:18px;--y:30px;--d:7s}
.hero-particle-field i:nth-child(4){left:38%;top:30%;--x:-26px;--y:-24px;--d:10s}
.hero-particle-field i:nth-child(5){left:43%;top:13%;--x:30px;--y:12px;--d:8s}
.hero-particle-field i:nth-child(6){left:55%;top:19%;--x:-18px;--y:28px;--d:9s}
.hero-particle-field i:nth-child(7){left:63%;top:13%;--x:24px;--y:-16px;--d:11s}
.hero-particle-field i:nth-child(8){left:78%;top:21%;--x:-28px;--y:22px;--d:8s}
.hero-particle-field i:nth-child(9){left:87%;top:39%;--x:17px;--y:-25px;--d:10s}
.hero-particle-field i:nth-child(10){left:90%;top:58%;--x:-24px;--y:20px;--d:7s}
.hero-particle-field i:nth-child(11){left:82%;top:80%;--x:25px;--y:-15px;--d:9s}
.hero-particle-field i:nth-child(12){left:69%;top:87%;--x:-17px;--y:-28px;--d:8s}
.hero-particle-field i:nth-child(13){left:53%;top:82%;--x:30px;--y:16px;--d:10s}
.hero-particle-field i:nth-child(14){left:36%;top:88%;--x:-28px;--y:-18px;--d:7s}
.hero-particle-field i:nth-child(15){left:23%;top:76%;--x:20px;--y:26px;--d:9s}
.hero-particle-field i:nth-child(16){left:10%;top:64%;--x:-22px;--y:-20px;--d:11s}
.hero-particle-field i:nth-child(17){left:31%;top:61%;--x:16px;--y:-32px;--d:8s}
.hero-particle-field i:nth-child(18){left:67%;top:59%;--x:-20px;--y:30px;--d:10s}
.hero-particle-field i:nth-child(19){left:47%;top:67%;--x:25px;--y:-18px;--d:9s}
.hero-particle-field i:nth-child(20){left:57%;top:40%;--x:-24px;--y:20px;--d:7s}
.hero-particle-field i:nth-child(21){left:74%;top:47%;--x:18px;--y:-30px;--d:12s}
.hero-particle-field i:nth-child(22){left:34%;top:45%;--x:-17px;--y:23px;--d:8s}
.hero-particle-field i:nth-child(23){left:15%;top:84%;--x:28px;--y:-12px;--d:10s}
.hero-particle-field i:nth-child(24){left:92%;top:18%;--x:-25px;--y:27px;--d:9s}

.hero-glass-panel{
    position:absolute;
    left:50%;top:50%;
    width:720px;height:390px;
    margin:-195px 0 0 -360px;
    border:1px solid rgba(206,244,226,.05);
    border-radius:42%;
    transform:rotateX(70deg) rotateZ(-8deg);
    box-shadow:0 0 90px rgba(91,232,172,.025),inset 0 0 70px rgba(188,255,223,.018);
}
.hero-glass-panel span{
    position:absolute;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(210,239,226,.16),transparent);
}
.hero-glass-panel span:nth-child(1){left:18%;right:18%;top:22%}
.hero-glass-panel span:nth-child(2){left:27%;right:27%;top:50%;opacity:.45}
.hero-glass-panel span:nth-child(3){left:18%;right:18%;top:78%;opacity:.5}

/* ---- Animations ---- */

@keyframes heroContentIn{
    from{opacity:0;transform:translateY(22px) scale(.985)}
    to{opacity:1;transform:translateY(-1.5%) scale(1)}
}
@keyframes auraPulse{
    0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.55}
    50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
}
@keyframes gridMove{
    from{background-position:0 0}
    to{background-position:0 140px}
}
@keyframes ringSpin1{
    from{transform:rotateX(69deg) rotateZ(12deg) rotate(0deg)}
    to{transform:rotateX(69deg) rotateZ(12deg) rotate(360deg)}
}
@keyframes ringSpin2{
    from{transform:rotateY(67deg) rotateZ(-22deg) rotate(0deg)}
    to{transform:rotateY(67deg) rotateZ(-22deg) rotate(-360deg)}
}
@keyframes ringSpin3{
    from{transform:rotateX(25deg) rotateY(58deg) rotateZ(35deg) rotate(0deg)}
    to{transform:rotateX(25deg) rotateY(58deg) rotateZ(35deg) rotate(360deg)}
}
@keyframes coreFloat{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(0,-8px,15px) scale(1.035)}
}
@keyframes corePulse{
    0%,100%{transform:scale(.9);opacity:.72}
    50%{transform:scale(1.08);opacity:1}
}
@keyframes coreRotate{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}
@keyframes orbA{
    0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.4}
    50%{transform:translate3d(42px,-25px,35px) scale(1.5);opacity:1}
}
@keyframes orbB{
    0%,100%{transform:translate3d(0,0,0);opacity:.35}
    50%{transform:translate3d(-34px,38px,20px);opacity:1}
}
@keyframes orbC{
    0%,100%{transform:translate3d(0,0,0);opacity:.25}
    50%{transform:translate3d(-24px,-30px,30px);opacity:.9}
}
@keyframes orbD{
    0%,100%{transform:translate3d(0,0,0);opacity:.3}
    50%{transform:translate3d(35px,25px,10px);opacity:.9}
}
@keyframes beamMove1{
    0%,100%{opacity:.18}
    50%{opacity:.7}
}
@keyframes beamMove2{
    0%,100%{opacity:.45}
    50%{opacity:.12}
}
@keyframes beamMove3{
    0%,100%{opacity:.15}
    50%{opacity:.48}
}
@keyframes particleFloat{
    0%,100%{transform:translate3d(0,0,0);opacity:.18}
    50%{transform:translate3d(var(--x),var(--y),20px);opacity:.8}
}
@keyframes scrollDot{
    0%{transform:translate(-50%,0);opacity:.1}
    35%{opacity:1}
    70%{transform:translate(-50%,13px);opacity:.1}
    100%{transform:translate(-50%,13px);opacity:0}
}

@media (max-width:900px){
    .ultra-hero{
        min-height:680px;
        height:calc(100vh - 70px);
    }
    .hero-ring-1{width:330px;height:330px;margin:-165px 0 0 -165px}
    .hero-ring-2{width:420px;height:420px;margin:-210px 0 0 -210px}
    .hero-ring-3{width:250px;height:250px;margin:-125px 0 0 -125px}
    .hero-glass-panel{width:560px;height:330px;margin:-165px 0 0 -280px}
}

@media (max-width:600px){
    .ultra-hero{
        min-height:650px;
        height:calc(100svh - 65px);
    }
    .hero-kicker{
        font-size:9px;
        letter-spacing:.19em;
        gap:7px;
        margin-bottom:13px;
    }
    .hero-kicker span{width:18px}
    .ultra-hero h1{
        font-size:clamp(29px,8.8vw,43px);
        line-height:1.09;
        letter-spacing:-.025em;
    }
    .ultra-hero .hero-text{
        max-width:340px;
        margin:12px auto 16px !important;
        font-size:15px;
        line-height:1.48 !important;
    }
    .ultra-hero .hero-cta{
        min-width:190px;
        min-height:50px;
        font-size:14px;
        padding:12px 21px;
    }
    .ultra-hero .offer-counter{
        padding:8px 11px 9px;
        border-radius:13px;
    }
    .ultra-hero .counter{gap:8px}
    .ultra-hero .counter > div{min-width:43px}
    .ultra-hero .counter span{font-size:18px}
    .ultra-hero .counter small{font-size:7px}
    .hero-ring-1{width:245px;height:245px;margin:-122.5px 0 0 -122.5px}
    .hero-ring-2{width:310px;height:310px;margin:-155px 0 0 -155px}
    .hero-ring-3{width:185px;height:185px;margin:-92.5px 0 0 -92.5px}
    .hero-core{transform:scale(.72)}
    .hero-glass-panel{
        width:390px;
        height:240px;
        margin:-120px 0 0 -195px;
        opacity:.65;
    }
    .hero-grid{
        background-size:52px 52px;
        bottom:-18%;
        height:55%;
        opacity:.33;
    }
    .hero-beam{height:270px}
    .hero-scroll-indicator{bottom:12px}
}

@media (prefers-reduced-motion:reduce){
    .hero-3d *,
    .hero-3d,
    .ultra-hero-content,
    .hero-scroll-indicator span{
        animation:none !important;
        transition:none !important;
    }
}