*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:radial-gradient(ellipse at top left,#050510 0%,#0b0b18 30%,#120f24 100%);
    color:#e8e0d0;
    line-height:1.6;
    overflow-x:hidden
}

.orb{
    position:fixed;
    width:260px;
    height:260px;
    border-radius:50%;
    background:conic-gradient(from 0deg,#d4a700,#e6c200,#d4a700);
    filter:blur(70px);
    opacity:.22;
    animation:orbit 30s infinite ease-in-out;
    pointer-events:none;
    z-index:-1
}
.orb1{top:0;left:0}
.orb2{bottom:0;right:10%}
.orb3{top:40%;left:60%}

@keyframes orbit{
    0%,100%{transform:scale(1) translateX(0)}
    50%{transform:scale(1.05) translateX(25px)}
}

.navbar{
    position:fixed;
    top:0;
    width:100%;
    background:rgba(10,10,20,.92);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(212,167,0,.18);
    z-index:1000
}

.nav-container{
    max-width:1200px;
    margin:0 auto;
    padding:.8rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.logo {
    height: auto;
    width: 50px;  
    filter: drop-shadow(0 0 12px rgba(212, 167, 0, 0.6));
    display: block;
}

.nav-menu{
    display:flex;
    gap:1.8rem;
    list-style:none;
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

.nav-menu a{
    color:#e8e0d0;
    text-decoration:none;
    font-size:.95rem;
    font-weight:500;
    position:relative;
    padding-bottom:.2rem;
    transition:color .25s ease
}

.nav-menu a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:0;height:2px;
    background:linear-gradient(90deg,#d4a700,#e6c200);
    transition:width .25s ease
}

.nav-menu a:hover{color:#f3e28f}
.nav-menu a:hover::after{width:100%}

.hamburger{
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer
}

.hamburger span{
    width:24px;
    height:3px;
    border-radius:2px;
    background:linear-gradient(90deg,#d4a700,#e6c200)
}

.hero{
    min-height:100vh;
    max-width:1200px;
    margin:0 auto;
    padding:6rem 2rem 4rem;
    display:flex;
    align-items:center;
    gap:4rem
}

.hero-content h1,.gradient,h2,.stat .number{
    background:linear-gradient(135deg,#f3e28f,#e6c200);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent 
}

.hero-content h1{
    font-size:clamp(3.4rem,7vw,5rem);
    line-height:1.1;
    margin-bottom:1.2rem
}

.hero-content p{
    font-size:1.1rem;
    opacity:.9;
    max-width:430px;
    margin-bottom:2.5rem
}

.stats{display:flex;gap:2.5rem;margin-bottom:2.5rem}
.stat .number{font-size:2.2rem;font-weight:800;display:block}
.stat span:last-child{font-size:.9rem;opacity:.7}

.btn-download{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.95rem 2.4rem;
    border-radius:999px;
    border:1px solid rgba(212,167,0,.5);
    background:radial-gradient(circle at top left,#f3e28f 0%,#d4a700 40%,#8a6b16 100%);
    color:#120f24;
    font-weight:700;
    font-size:1rem;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(0,0,0,.65);
    transition:all .25s ease
}

.btn-download:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,.8);
    background:radial-gradient(circle at top left,#fff3a5 0%,#e6c200 45%,#8a6b16 100%)
}


.features,.team,.download,.faq-section{
    max-width:1200px;
    margin:0 auto;
    padding:4.5rem 2rem
}

h2{
    font-size:clamp(2.1rem,4vw,2.7rem);
    text-align:center;
    margin-bottom:3rem
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem
}

.feature-card{
    background:linear-gradient(180deg,rgba(18,18,28,.88),rgba(12,12,24,.92));
    border-radius:18px;
    border:1px solid rgba(212,167,0,.12);
    padding:2rem 1.6rem;
    box-shadow:0 14px 36px rgba(0,0,0,.72);
    transition:all .24s cubic-bezier(.2,.9,.2,1);
    display:flex;
    flex-direction:column;
    gap:.8rem;
    min-height:160px;
    position:relative
}

.feature-card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 28px 70px rgba(0,0,0,.78),0 0 36px rgba(212,167,0,.10);
    border-color:rgba(212,167,0,.45)
}

.feature-card h3{
    color:#f3e28f;
    font-size:1.15rem;
    font-weight:700;
    margin-left:70px
}

.feature-card p{
    color:rgba(232,224,208,.9);
    line-height:1.45
}

.feature-icon{
    position:absolute;
    top:16px;left:16px;
    width:56px;height:56px;
    border-radius:12px;
    background:linear-gradient(135deg,rgba(243,226,143,.95),rgba(212,167,0,.9));
    box-shadow:0 8px 18px rgba(212,167,0,.08);
    display:flex;
    align-items:center;
    justify-content:center
}

.feature-icon svg{width:34px;height:34px}
.feature-card::after{
    content:'';
    position:absolute;
    right:14px;top:14px;
    width:8px;height:8px;
    border-radius:50%;
    background:rgba(212,167,0,.85);
    box-shadow:0 6px 12px rgba(212,167,0,.06)
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:2rem
}

.team-member{
    background:rgba(12,12,24,.92);
    border-radius:18px;
    border:1px solid rgba(212,167,0,.18);
    padding:2rem 1.6rem;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.75);
    transition:all .2s ease
}

.team-member img{
    width:110px;
    height:110px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:1rem;
    border:3px solid rgba(212,167,0,.12);
    box-shadow:0 12px 30px rgba(0,0,0,.65)
}

.team-member h3{
    margin:.2rem 0 .35rem;
    font-size:1.05rem;
    color:#f3e28f
}

.team-member p{margin:0;opacity:.85}

.team-member:hover{
    transform:translateY(-25px);
    box-shadow:0 22px 48px rgba(0,0,0,.75),0 0 28px rgba(212,167,0,.10);
    border-color:rgba(212,167,0,.45)
}

.download .btn-download{
    font-size:1.05rem;
    padding:.8rem 2rem;
    min-width:200px;
    max-width:640px;
    width:60%
}

.btn-center{text-align:center;margin-top:1rem}
.download p{text-align:center;margin-top:.65rem;opacity:.95;font-size:.95rem}

.footer-content{
    max-width:1200px;
    margin:0 auto;
    padding:2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem
}

.footer-content p{margin:0}
.footer-content .social a{color:inherit;text-decoration:none;font-weight:600}

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(5,5,16,.9);
    backdrop-filter:blur(8px)
}

.modal-content{
    background:linear-gradient(180deg,#120f24,#0b0b18);
    margin:10% auto;
    padding:30px 30px 20px 30px; 
    border:1px solid rgba(212,167,0,.4);
    border-radius:24px;
    width:90%;
    max-width:500px;
    text-align:center;
    box-shadow:0 0 50px rgba(212,167,0,.15);
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px; 
}

.modal-content p:last-child { 
    margin-top:0;
    margin-bottom:0;
    font-size:0.9rem;
}

.form-group{
    text-align:left;
    margin-bottom:20px
}

.form-group label{
    display:block;
    color:#f3e28f;
    margin-bottom:8px;
    font-size:.9rem
}

.form-group input,.form-group textarea{
    width:100%;
    padding:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(212,167,0,.2);
    border-radius:8px;
    color:white;
    outline:none;
    font-family:inherit
}

.close-modal{
    position:absolute;
    right:20px;
    top:15px;
    font-size:28px;
    cursor:pointer;
    color:#f3e28f
}

.faq-section{
    max-width:900px;
    margin:50px auto;
    padding:0 20px
}

.faq-container{
    display:flex;
    flex-direction:column;
    gap:15px
}

details{
    background:rgba(18,18,28,.6);
    border:1px solid rgba(212,167,0,.15);
    border-radius:16px;
    overflow:hidden;
    transition:all .3s ease
}

details:hover{
    background:rgba(18,18,28,.9);
    border-color:rgba(212,167,0,.5);
    transform:translateY(-2px)
}

summary{
    padding:20px;
    font-weight:600;
    color:#f3e28f;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:1.1rem;
    list-style:none
}

summary::-webkit-details-marker{display:none}

.faq-icon{
    font-size:1.5rem;
    transition:transform .3s ease;
    color:#d4a700
}

details[open] .faq-icon{transform:rotate(45deg)}

.faq-content{
    padding:0 20px 20px;
    color:rgba(232,224,208,.8);
    line-height:1.6;
    border-top:1px solid rgba(212,167,0,.1);
    animation:slideDown .4s ease-out
}

@keyframes slideDown{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
}

.feature-card:focus-within,
.team-member:focus-within{
    outline:6px solid rgba(212,167,0,.16);
    outline-offset:8px;
    box-shadow:0 8px 30px rgba(212,167,0,.06)
}

@media(max-width:1100px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.faq-container{grid-template-columns:1fr}}
@media(max-width:720px){
    .hero{flex-direction:column;text-align:center;padding-top:8rem}
    .hero-content p,.stats{margin:0 auto 2.5rem;justify-content:center}
    .features-grid{grid-template-columns:1fr}
    .download .btn-download{width:90%;max-width:none}
    .team-member img{width:92px;height:92px}
    .footer-content{flex-direction:column;text-align:center;gap:.75rem}
}

lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px;border-radius:24px}
lite-youtube::before{content:attr(data-title);display:block;position:absolute;top:0;background:linear-gradient(180deg,rgba(0,0,0,.67) 0,rgba(0,0,0,.54) 14%,rgba(0,0,0,.15) 54%,rgba(0,0,0,.05) 72%,rgba(0,0,0,0) 94%);height:99px;width:100%;font-family:"YouTube Noto",Roboto,Arial,Helvetica,sans-serif;color:#f3f3f3;text-shadow:0 0 2px rgba(0,0,0,.5);font-size:18px;padding:25px 20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box}
lite-youtube:hover::before{color:#fff}
lite-youtube::after{content:"";display:block;padding-bottom:56.25%}
lite-youtube>iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}
lite-youtube>.lty-playbtn{display:block;width:100%;height:100%;background:no-repeat center/68px 48px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79 .46 34 0 34 0S12.21 .46 6.9 1.55c-2.93.78-4.64 3.26-5.42 6.19C.5 13.28 0 24 0 24s.5 10.72 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.54 34 48 34 48s21.79-.46 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.5 34.72 68 24 68 24s-.5-10.72-1.48-16.26z" fill="%23f00"/><path d="M45 24 27 14v20z" fill="%23fff"/></svg>');position:absolute;cursor:pointer;z-index:1;filter:grayscale(100%);transition:filter .1s cubic-bezier(0,0,.2,1);border:0}
lite-youtube:hover>.lty-playbtn,lite-youtube .lty-playbtn:focus{filter:none}
lite-youtube.lyt-activated{cursor:unset}
lite-youtube.lyt-activated::before,lite-youtube.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}


.video-mockup{
    flex:1;
    max-width:520px;
    perspective:1000px;
    overflow:hidden;
    border-radius:24px;
}

.video-mockup lite-youtube{
    width:150%;               
    height:290px;
    max-width:none;
    margin-left:-5%;         
    box-shadow:0 25px 60px rgba(0,0,0,.8);
    transition:box-shadow .45s ease, transform .6s cubic-bezier(.2,.9,.2,1);
    transform:rotateX(0deg) rotateY(0deg) translateZ(0);
    border-radius:24px;
    transform-style:preserve-3d;
}

.video-mockup:hover lite-youtube{
    box-shadow:0 40px 80px rgba(0,0,0,.7);
    transform:translateY(-10px) rotateX(0deg) rotateY(0deg);
}


@media (max-width: 900px) {
    .hamburger {
        display: flex !important; 
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%; 
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: rgba(10, 10, 20, 0.98);
        backdrop-filter: blur(18px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        transition: left 0.4s ease;
        z-index: 999;
        padding: 2rem;
    }

    .nav-menu.active {
        left: 0; 
    }

    .nav-menu a {
        font-size: 1.4rem;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        z-index: 998;
    }
}