.cinematic-home-hero{
    position:relative;
    height:500px;
    overflow:hidden;
    isolation:isolate;
    background:#01070d;
    color:#fff
}
.cinematic-home-hero video{
    position:absolute;
    z-index:0;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(1.06) contrast(1.06);
    pointer-events:none;
    transform:translateZ(0)
}
.cinematic-home-shade{
    position:absolute;
    z-index:1;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,7,14,.92) 0%,rgba(0,8,16,.72) 34%,rgba(0,8,16,.16) 70%,rgba(0,6,12,.25) 100%),
        linear-gradient(0deg,rgba(0,8,16,.66),transparent 48%)
}
.cinematic-home-shade:after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 68% 62%,rgba(0,126,255,.18),transparent 30%);
    mix-blend-mode:screen
}
.cinematic-home-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding-left:62px
}
.cinematic-home-content>span{
    display:inline-flex;
    padding:7px 11px;
    border:1px solid rgba(90,180,255,.35);
    border-radius:6px;
    background:rgba(4,74,145,.3);
    color:#bde2ff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em
}
.cinematic-home-content h1{
    max-width:700px;
    margin:17px 0 0;
    font-size:50px;
    line-height:1.06;
    letter-spacing:-.04em;
    text-shadow:0 8px 35px rgba(0,0,0,.45)
}
.cinematic-home-content p{
    max-width:600px;
    margin-top:17px;
    color:#d6e4ef;
    font-size:15px;
    line-height:1.7;
    text-shadow:0 3px 16px #000
}
.cinematic-home-content>div{
    display:flex;
    gap:12px;
    margin-top:25px
}
.cinematic-home-content a{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 22px;
    border-radius:13px;
    background:linear-gradient(135deg,#087cff,#009fff);
    color:#fff;
    font-size:11px;
    font-weight:800;
    box-shadow:0 13px 30px rgba(0,105,245,.28)
}
.cinematic-home-content a.cinematic-quote{
    border:1px solid rgba(255,255,255,.64);
    background:rgba(0,7,14,.34);
    box-shadow:none;
    backdrop-filter:blur(8px)
}
.cinematic-home-content .cinematic-quote svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:#27df69;
    stroke-width:1.8
}
.cinematic-controls,.mobile-cinematic-controls{
    position:absolute;
    z-index:4;
    right:25px;
    bottom:23px;
    display:flex;
    gap:7px
}
.cinematic-controls button,.mobile-cinematic-controls button{
    min-width:40px;
    height:37px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:20px;
    background:rgba(1,10,19,.64);
    color:#fff;
    font:700 9px Inter,Arial,sans-serif;
    cursor:pointer;
    backdrop-filter:blur(10px)
}
.cinematic-controls button:first-child,.mobile-cinematic-controls button:first-child{
    width:37px;
    min-width:37px;
    padding:0
}
.cinematic-progress{
    position:absolute;
    z-index:3;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    overflow:hidden;
    background:rgba(255,255,255,.15)
}
.cinematic-progress:after{
    content:"";
    display:block;
    width:35%;
    height:100%;
    background:linear-gradient(90deg,#087cff,#33c4ff);
    box-shadow:0 0 15px #087cff;
    animation:cinematicSweep 7s linear infinite
}
@keyframes cinematicSweep{
    from{transform:translateX(-110%)}
    to{transform:translateX(310%)}
}
.mobile-cinematic-hero{
    position:relative;
    z-index:1;
    height:clamp(230px,62vw,300px);
    overflow:hidden;
    margin:14px 16px 8px;
    border-radius:24px;
    isolation:isolate;
    background:#020b15;
    color:#fff;
    box-shadow:0 14px 32px rgba(5,33,64,.2)
}
.mobile-cinematic-hero video{
    position:absolute;
    z-index:0;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(1.05) contrast(1.05);
    pointer-events:none;
    transform:translateZ(0);
    -webkit-transform:translateZ(0)
}
.mobile-cinematic-hero video::-webkit-media-controls{display:none!important}
.mobile-cinematic-shade{
    position:absolute;
    z-index:1;
    inset:0;
    background:linear-gradient(180deg,rgba(0,6,12,.06) 12%,rgba(0,8,16,.3) 43%,rgba(0,8,16,.93) 100%)
}
.mobile-cinematic-content{
    position:absolute;
    z-index:2;
    left:19px;
    right:19px;
    bottom:24px;
    padding-right:70px
}
.mobile-cinematic-content>span{
    color:#6fc4ff;
    font-size:7px;
    font-weight:850;
    letter-spacing:.12em
}
.mobile-cinematic-content h1{
    margin:7px 0 0;
    font-size:25px;
    line-height:1.08;
    letter-spacing:-.04em;
    text-shadow:0 4px 18px #000
}
.mobile-cinematic-content p{
    display:-webkit-box;
    max-width:300px;
    margin:8px 0 0;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color:#d5e1ec;
    font-size:9px;
    line-height:1.45
}
.mobile-cinematic-content a{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    margin-top:12px;
    padding:0 14px;
    border-radius:10px;
    background:linear-gradient(135deg,#087cff,#0aa6ff);
    color:#fff;
    font-size:9px;
    font-weight:800
}
.mobile-cinematic-controls{
    z-index:3;
    right:12px;
    top:12px;
    bottom:auto;
    align-items:center;
    flex-direction:row
}
.mobile-cinematic-controls button{
    height:32px;
    min-width:32px;
    padding:0 9px;
    font-size:7px
}
.mobile-cinematic-controls button:first-child{
    width:32px;
    min-width:32px
}
@media(max-width:900px){
    .cinematic-home-hero{height:690px}
    .cinematic-home-shade{background:linear-gradient(180deg,rgba(0,7,14,.06) 10%,rgba(0,7,14,.35) 43%,#02070d 76%)}
    .cinematic-home-content{align-items:flex-start;justify-content:flex-end;padding:25px 22px 76px}
    .cinematic-home-content h1{max-width:600px;font-size:40px}
    .cinematic-controls{bottom:22px}
}
@media(max-width:520px){
    .cinematic-home-hero{height:635px}
    .cinematic-home-content{padding:20px 16px 70px}
    .cinematic-home-content h1{font-size:33px}
    .cinematic-home-content p{font-size:12px}
    .cinematic-home-content>div{gap:8px;flex-wrap:wrap;margin-top:18px}
    .cinematic-home-content a{min-height:42px;padding:0 15px;font-size:9px}
    .cinematic-controls{right:12px;bottom:14px}
    .mobile-cinematic-hero{height:clamp(220px,62vw,270px);margin-right:11px;margin-left:11px}
    .mobile-cinematic-content h1{font-size:22px}
}
@media(min-width:650px) and (max-width:980px){
    .mobile-cinematic-hero{height:360px;margin-right:28px;margin-left:28px}
    .mobile-cinematic-content{left:30px;bottom:32px}
    .mobile-cinematic-content h1{font-size:34px}
    .mobile-cinematic-content p{font-size:11px}
}
body.has-cinematic-hero .app-main{padding-bottom:calc(102px + var(--safe-bottom))}
body.has-cinematic-hero .app-bottom-nav{
    z-index:119;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    transform:translate3d(-50%,0,0);
    -webkit-transform:translate3d(-50%,0,0);
    will-change:transform
}
@media(prefers-reduced-motion:reduce){
    .cinematic-progress:after{animation:none}
}