/*====================================================
    NovaStream
    Style.css
====================================================*/

:root{

    --primary:#00F2FE;
    --secondary:#F355FF;
    --success:#00FFB2;
    --danger:#ff4d6d;

    --bg:#06040A;
    --bg2:#0D0A16;
    --card:#12101B;
    --border:rgba(255,255,255,.08);

    --text:#FFFFFF;
    --text2:#B9B9C7;

    --radius:18px;

}

/*==========================
BODY
==========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:
    radial-gradient(circle at top,#1b1d47 0%,transparent 35%),
    radial-gradient(circle at right,#2f0b53 0%,transparent 30%),
    var(--bg);

    color:var(--text);

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    min-height:100vh;

    overflow-x:hidden;

}

/*==========================
SCROLL
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#09070F;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--primary),
    var(--secondary));

    border-radius:20px;

}

/*==========================
LINKS
==========================*/

a{

    color:var(--primary);

    text-decoration:none;

    transition:.3s;

}

a:hover{

    color:white;

}

/*==========================
NAVBAR
==========================*/

.navbar{

    background:rgba(6,4,10,.75)!important;

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.05);

    box-shadow:0 5px 25px rgba(0,0,0,.4);

}

.logo-box{

    width:82px;

    height:82px;

    border-radius:18px;

    padding:2px;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 0 20px rgba(0,242,254,.3);

    transition:.35s;

}

.logo-box:hover{

    transform:scale(1.05);

    box-shadow:

    0 0 15px rgba(0,242,254,.7),

    0 0 30px rgba(243,85,255,.5);

}

.logo-bg{

    width:100%;

    height:100%;

    border-radius:16px;

    background:#06040A;

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo-bg img{

    width:65px;

    height:65px;

    object-fit:contain;

}

.nav-link{

    color:white!important;

    margin-left:15px;

    font-weight:600;

    transition:.35s;

    position:relative;

}

.nav-link:hover{

    color:var(--primary)!important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:

    linear-gradient(

    var(--primary),

    var(--secondary));

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

/*==========================
HERO
==========================*/

.hero-section{

    padding:140px 0;

    position:relative;

    overflow:hidden;

}

.hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle,#00F2FE22,transparent 70%);

    animation:pulse 8s infinite;

}

.hero-section h1{

    font-size:4rem;

    font-weight:900;

}

.hero-section p{

    color:#D7D7E5;

    font-size:1.2rem;

}

/*==========================
INPUT
==========================*/

.form-control{

    background:#151220;

    color:white;

    border:none;

    border-radius:15px;

    padding:18px;

}

.form-control:focus{

    background:#151220;

    color:white;

    box-shadow:

    0 0 0 3px rgba(0,242,254,.2);

}

/*==========================
BUTTONS
==========================*/

.btn{

    border:none;

    border-radius:15px;

    transition:.3s;

    font-weight:bold;

}

.btn-primary{

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary));

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:

    0 0 18px rgba(0,242,254,.4);

}

.btn-success{

    background:

    linear-gradient(

    135deg,

    #00d48f,

    #00ffb2);

}

.btn-success:hover{

    transform:translateY(-2px);

}

/*==========================
CARDS
==========================*/

.card{

    background:rgba(18,16,27,.85);

    border:1px solid var(--border);

    border-radius:20px;

    color:white;

    backdrop-filter:blur(10px);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 15px 40px rgba(0,242,254,.15);

}

/*==========================
FEATURE ICON
==========================*/

.feature-icon{

    width:80px;

    height:80px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

}

/*==========================
ALERTS
==========================*/

.alert{

    border:none;

    border-radius:15px;

}

.alert-info{

    background:#102033;

    color:white;

}

.alert-danger{

    background:#3A1521;

    color:white;

}

/*==========================
ADVERTISEMENT
==========================*/

.ad-placeholder{

    border:2px dashed rgba(255,255,255,.15);

    background:#111;

    border-radius:20px;

}

/*==========================
IMAGES
==========================*/

img{

    max-width:100%;

}

/*==========================
FOOTER
==========================*/

.site-footer{

    position:relative;

    margin-top:56px;

    padding:36px 0 24px;

    background:
    linear-gradient(180deg,rgba(7,9,22,.94),rgba(4,5,12,.98));

    border-top:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 -10px 40px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.02) inset;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-logo{

    width:240px;

    max-width:100%;

    height:auto;

}

.footer-copy{

    color:#b8c0dc;

    margin:0;

}

.footer-title{

    margin-bottom:14px;

    color:#fff;

    font-weight:700;

}

.footer-links li + li{

    margin-top:10px;

}

.site-footer a{

    color:#d7def8;

    text-decoration:none;

    transition:.25s;

}

.site-footer a:hover{

    color:var(--primary);

}

.footer-socials{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;

}

.footer-social-link{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

}

.footer-social-link i{

    color:var(--primary);

    font-size:1.15rem;

}

.footer-bottom{

    margin-top:28px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

}

.footer-rights{

    color:#a8b2d1;

}

/*==========================
ANIMATIONS
==========================*/

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.3);

        opacity:.9;

    }

    100%{

        transform:scale(1);

        opacity:.5;

    }

}

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================
DOWNLOAD BUTTON
==========================*/

.download-btn{

    width:100%;

    padding:18px;

    font-size:18px;

    margin-top:15px;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px){

.hero-section{

padding:90px 0;

}

.hero-section h1{

font-size:2.8rem;

}

.logo-box{

width:68px;

height:68px;

}

.logo-bg img{

width:52px;

height:52px;

}

}

@media(max-width:576px){

.hero-section h1{

font-size:2.1rem;

}

.form-control{

padding:14px;

}

.btn{

padding:14px;

}

}

/*==========================
NEON UI OVERRIDES
==========================*/

body{

    background:
    radial-gradient(circle at 20% 15%,rgba(0,242,254,.15),transparent 22%),
    radial-gradient(circle at 80% 18%,rgba(243,85,255,.18),transparent 22%),
    radial-gradient(circle at 50% 100%,rgba(0,120,255,.12),transparent 35%),
    linear-gradient(180deg,#05060F 0%,#03040A 100%);

    color:var(--text);

    font-family:"Poppins","Segoe UI",Arial,sans-serif;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background-image:
    radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);

    background-size:120px 120px;

    opacity:.08;

}

.navbar{

    margin:18px auto 0;

    width:min(1240px,calc(100% - 24px));

    border:1px solid rgba(243,85,255,.35);

    border-radius:24px;

    background:rgba(5,7,18,.86)!important;

    box-shadow:
    0 0 0 1px rgba(0,242,254,.18) inset,
    0 0 26px rgba(0,242,254,.12),
    0 0 38px rgba(243,85,255,.12);

}

.navbar > .container{

    max-width:none;

    padding:12px 20px;

}

.brand-wrap{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.brand-logo{

    display:block;

    width:260px;

    max-width:min(42vw,260px);

    height:auto;

    object-fit:contain;

}

.brand-copy{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.brand-name,
.hero-title{

    font-family:"Orbitron","Poppins",sans-serif;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.brand-name{

    font-size:1.45rem;

    font-weight:800;

    color:#fff;

    line-height:1;

}

.brand-tag{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:6px 12px;

    border:1px solid rgba(0,242,254,.25);

    border-radius:999px;

    color:var(--text2);

    font-size:.7rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    background:rgba(255,255,255,.03);

}

.nav-link{

    margin-left:10px;

    padding:10px 14px!important;

    border-radius:999px;

    color:#dfe7ff!important;

}

.nav-link.active,
.nav-link:hover{

    color:#fff!important;

    background:rgba(255,255,255,.04);

}

.nav-link::after{

    left:14px;

    right:14px;

    bottom:2px;

    width:auto;

    transform:scaleX(0);

    transform-origin:left;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:auto;

    transform:scaleX(1);

}

.nav-cta{

    box-shadow:
    0 0 20px rgba(0,242,254,.2),
    0 0 30px rgba(243,85,255,.15);

}

.landing-shell{

    position:relative;

    z-index:1;

}

.hero-home{

    padding:64px 0 48px;

}

.hero-panel,
.neo-card{

    position:relative;

    overflow:hidden;

    border:1px solid rgba(126,139,255,.18);

    border-radius:28px;

    background:
    linear-gradient(180deg,rgba(10,12,28,.92),rgba(5,7,18,.92));

    box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 28px rgba(0,242,254,.08),
    0 0 44px rgba(243,85,255,.08);

}

.hero-panel{

    padding:52px 34px 30px;

    text-align:center;

    background:
    linear-gradient(180deg,rgba(10,12,28,.78),rgba(5,7,18,.88)),
    url("../img/hero-bg.png") center center / cover no-repeat;
}

.hero-panel::before,
.neo-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    radial-gradient(circle at 10% 10%,rgba(0,242,254,.12),transparent 24%),
    radial-gradient(circle at 90% 20%,rgba(243,85,255,.12),transparent 24%);

}

.hero-panel > *{

    position:relative;

    z-index:1;

}

.hero-badge,
.result-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 16px;

    border-radius:999px;

    border:1px solid rgba(130,128,255,.28);

    background:rgba(255,255,255,.03);

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.hero-title{

    margin:22px 0 18px;

    font-size:clamp(2.5rem,5vw,4.5rem);

    line-height:1.15;

}

.hero-title span{

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.hero-copy{

    max-width:820px;

    margin:0 auto 28px;

    color:#c5cae5;

    font-size:1.05rem;

}

.platform-strip{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:28px;

}

.platform-pill{

    width:58px;

    height:58px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    box-shadow:0 0 18px rgba(0,242,254,.06);

    font-size:1.5rem;

    color:#fff;

}

.hero-form{

    display:grid;

    grid-template-columns:minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    max-width:980px;

    margin:0 auto;

    padding:16px;

    border-radius:24px;

    border:1px solid rgba(130,128,255,.24);

    background:rgba(4,8,20,.9);

    box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 22px rgba(0,242,254,.12);

}

.hero-input-wrap{

    position:relative;

}

.hero-input{

    min-height:72px;

    padding:20px 20px 20px 54px;

    border:1px solid rgba(255,255,255,.06);

    background:rgba(6,10,26,.95);

    color:#fff;

    font-size:1rem;

}

.hero-input::placeholder{

    color:#8086a5;

}

.hero-input-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#9aa4d9;

    font-size:1.3rem;

    z-index:2;

}

.hero-submit{

    min-width:210px;

    min-height:72px;

    border-radius:18px;

    font-size:1.05rem;

    text-transform:uppercase;

    letter-spacing:.04em;

}

.hero-highlights{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:14px;

    margin-top:26px;

}

.highlight-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.06);

    background:rgba(255,255,255,.025);

    text-align:left;

}

.highlight-item i,
.info-icon{

    width:48px;

    height:48px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:linear-gradient(135deg,rgba(0,242,254,.18),rgba(243,85,255,.18));

    color:var(--primary);

    font-size:1.4rem;

    flex-shrink:0;

}

.highlight-item strong,
.info-card h3,
.result-card h2{

    display:block;

    color:#fff;

    font-weight:700;

}

.highlight-item span,
.info-card p,
.result-url{

    color:#98a0be;

    font-size:.92rem;

}

.resultado-shell{

    max-width:980px;

    margin-inline:auto;

}

.result-card{

    padding:28px;

}

.result-header{

    display:grid;

    grid-template-columns:minmax(0,1fr) 200px;

    gap:24px;

    align-items:center;

}

.result-card h2{

    margin:16px 0 10px;

    font-size:1.65rem;

}

.result-thumb img{

    width:100%;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.08);

    object-fit:cover;

}

.result-meta{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:18px 0 24px;

}

.result-meta span{

    display:inline-flex;

    align-items:center;

    padding:10px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.04);

    color:#d8e1ff;

    font-size:.92rem;

}

.download-options{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:14px;

}

.download-option-btn,
.download-ready-btn{

    min-height:60px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 18px;

    border-radius:18px;

    font-weight:700;

}

.download-option-btn{

    background:
    linear-gradient(135deg,rgba(0,242,254,.16),rgba(243,85,255,.18));

    color:#fff;

    border:1px solid rgba(118,128,255,.28);

}

.download-option-btn:hover,
.download-ready-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 0 22px rgba(0,242,254,.14);

}

.status-box{

    margin-top:18px;

    padding:16px 18px;

    border-radius:18px;

    border:1px solid transparent;

    color:#fff;

}

.status-loading{

    background:rgba(13,31,58,.78);

    border-color:rgba(0,242,254,.18);

}

.status-success{

    background:rgba(8,53,40,.76);

    border-color:rgba(0,255,178,.2);

}

.status-error{

    background:rgba(58,20,36,.82);

    border-color:rgba(255,77,109,.24);

}

.status-warning{

    background:rgba(58,43,10,.8);

    border-color:rgba(255,193,7,.2);

}

.progress-container {
    width: 100%;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 12px;
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    margin-top: 8px;
    font-weight: 600;
    color: var(--text);
}

#download-link-area{

    margin-top:16px;

}

.info-card{

    padding:28px;

}

.info-icon{

    margin-bottom:18px;

}

.site-footer{

    background:rgba(4,5,12,.92);

    border-top:1px solid rgba(255,255,255,.06);

}

@media(max-width:991px){

.navbar{

    width:calc(100% - 18px);

}

.brand-tag{

    display:none;

}

.hero-form,
.result-header{

    grid-template-columns:1fr;

}

.hero-submit{

    width:100%;

}

.hero-highlights{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.footer-socials{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:576px){

.navbar{

    margin-top:10px;

    border-radius:18px;

}

.navbar > .container{

    padding:10px 14px;

}

.brand-logo{

    width:190px;

    max-width:52vw;

}

.hero-home{

    padding-top:36px;

}

.hero-panel,
.result-card,
.info-card{

    padding:22px 18px;

}

.platform-pill{

    width:52px;

    height:52px;

}

.hero-highlights{

    grid-template-columns:1fr;

}

.highlight-item{

    padding:15px;

}

.footer-socials{

    grid-template-columns:1fr;

}

}