/*======================================================
            SMI QUANTUM WEBINAR PORTAL
======================================================*/

:root{

    --portal-blue:#23c8ff;
    --portal-cyan:#00eaff;
    --portal-purple:#7b5cff;
    --portal-bg:#07101d;
    --portal-border:rgba(35,200,255,.22);

}

/*======================================================
                    MAIN SECTION
======================================================*/

.quantum-webinar{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    isolation:isolate;

    background:#040816;

}

/*======================================================
                BACKGROUND EFFECTS
======================================================*/

.portal-background{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(0,180,255,.08),
    transparent 62%);

}

.portal-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

    linear-gradient(90deg,
    rgba(255,255,255,.025) 1px,
    transparent 1px);

    background-size:42px 42px;

    opacity:.35;

    mask-image:radial-gradient(circle,
    white,
    transparent 78%);

}

.portal-noise{

    position:absolute;
    inset:0;

    opacity:.05;

    pointer-events:none;

}

/*======================================================
                    PORTAL CORE
======================================================*/

.portal-core{

    position:relative;

    width:min(76vw,980px);

    height:min(76vw,900px);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:-20px;

  

}

.portal-core:hover{

    transform:scale(1.03);

}

/*======================================================
                    RINGS
======================================================*/

.ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(35,200,255,.18);

    box-shadow:

        inset 0 0 18px rgba(0,234,255,.08),

        0 0 25px rgba(0,180,255,.08);

}

.ring1{

    width:100%;

    height:100%;

}

.ring2{

    width:88%;

    height:88%;

}

.ring3{

    width:74%;

    height:74%;

}

.ring4{

    width:60%;

    height:60%;

}

.ring5{

    width:46%;

    height:46%;

}
/*======================================================
                    GLOW
======================================================*/

.core-glow{

    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,234,255,.95),
        rgba(0,234,255,.18),
        transparent);

    filter:blur(20px);

    animation:pulse 4s ease infinite;

}

/*======================================================
                    CENTER
======================================================*/

.core-center{

    position:relative;

    width:340px;

    height:340px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
        radial-gradient(circle,
        rgba(12,40,70,.96),
        rgba(4,15,35,.95));

    border:2px solid rgba(0,234,255,.30);

    backdrop-filter:blur(20px);

    box-shadow:
        inset 0 0 60px rgba(0,234,255,.08),
        0 0 45px rgba(0,180,255,.22);

    z-index:20;

    padding:18px;

}
.live-pill{

    padding:9px 10px;

    border-radius:30px;

    font-size:13px;

    letter-spacing:1px;

    color:#fff;

    background:linear-gradient(90deg,#00b8ff,#2484ff);

}

.core-center h2{

    font-family:'Audiowide',cursive;

    font-size:50px;

    font-weight:900;

    letter-spacing:4px;

    text-transform:uppercase;

}

.core-center p{

    font-size:18px;

    line-height:1.5;

}

.portal-launch{

    width:170px;

    height:58px;

    border-radius:40px;

    font-size:22px;

    font-weight:700;

    background:

    linear-gradient(180deg,

    #24d7ff,

    #0b86ff);

    box-shadow:

    0 0 25px rgba(0,180,255,.45);

}

.portal-launch:hover{

    transform:scale(1.08);

    box-shadow:

    0 0 60px rgba(0,220,255,.65);

}

/*======================================================
                SCANNER
======================================================*/

.scanner-line{

    position:absolute;

    width:170%;

    height:3px;

    filter:blur(.4px);
    background:

    linear-gradient(90deg,

    transparent,

    #00eaff,

    transparent);

    animation:scan 4s linear infinite;

}

/*======================================================
                PARTICLES
======================================================*/

.portal-particles span{

    position:absolute;

    width:4px;

    height:4px;

    border-radius:50%;

    background:#00dfff;

    box-shadow:0 0 12px #00e1ff;

}

.portal-particles span:nth-child(1){top:15%;left:22%;}
.portal-particles span:nth-child(2){top:23%;right:28%;}
.portal-particles span:nth-child(3){top:72%;left:18%;}
.portal-particles span:nth-child(4){bottom:22%;right:16%;}
.portal-particles span:nth-child(5){bottom:18%;left:35%;}
.portal-particles span:nth-child(6){top:52%;right:8%;}
.portal-particles span:nth-child(7){top:60%;left:10%;}
.portal-particles span:nth-child(8){top:32%;left:50%;}
.portal-particles span:nth-child(9){bottom:38%;right:42%;}
.portal-particles span:nth-child(10){top:12%;right:45%;}
.portal-particles span:nth-child(11){bottom:12%;left:55%;}
.portal-particles span:nth-child(12){top:80%;right:55%;}

/*======================================================
                    KEYFRAMES
======================================================*/

@keyframes ring1{

from{transform:rotate(0deg);}
to{transform:rotate(360deg);}

}

@keyframes ring2{

from{transform:rotate(360deg);}
to{transform:rotate(0deg);}

}

@keyframes ring3{

0%{

transform:rotate(0deg) scale(1);

}

50%{

transform:rotate(180deg) scale(1.04);

}

100%{

transform:rotate(360deg) scale(1);

}

}

@keyframes pulse{

0%,100%{

transform:scale(1);

opacity:.65;

}

50%{

transform:scale(1.22);

opacity:1;

}

}

@keyframes scan{

0%{

transform:translateY(-200px);

}

100%{

transform:translateY(200px);

}

}

.portal-loading,
.webinar-modal,
.comingsoon-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999999;

}

.portal-loading.show,
.webinar-modal.show,
.comingsoon-modal.show{

    opacity:1;

    visibility:visible;

}

/*==========================
    ENERGY ORBITS
===========================*/

.energy-orbit{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:1px dashed rgba(0,234,255,.15);

}

.orbit1{

    transform:scale(1.15);

    animation:spin 14s linear infinite;

}

.orbit2{

    transform:scale(1.30);

    animation:spinReverse 22s linear infinite;

}

.orbit3{

    transform:scale(1.45);

    animation:spin 32s linear infinite;

}

/*==========================
        PULSE
===========================*/

.pulse-wave{

    position:absolute;

    width:100px;

    height:100px;

    border-radius:50%;

    border:2px solid rgba(0,234,255,.35);

    animation:wave 2.8s infinite;

}

/*==========================
      DATA STREAM
===========================*/

.data-stream{

    position:absolute;

    width:2px;

    background:#00dfff;

    box-shadow:0 0 10px #00dfff;

}

.stream1{

    height:80px;

    left:50%;

    top:-40px;

    animation:flow 2s linear infinite;

}

.stream2{

    width:80px;

    height:2px;

    top:50%;

    left:-40px;

    animation:flowX 2s linear infinite;

}

.stream3{

    width:80px;

    height:2px;

    top:50%;

    right:-40px;

    animation:flowReverse 2s linear infinite;

}

/*==========================
    COORDINATES
===========================*/

.portal-coordinates{

    position:absolute;

    font-size:10px;

    color:#66dfff;

    letter-spacing:2px;

}

.tl{

    top:-30px;

    left:-40px;

}

.tr{

    top:-30px;

    right:-40px;

}

.bl{

    bottom:-30px;

    left:-40px;

}

.br{

    bottom:-30px;

    right:-40px;

}

/*==========================
      KEYFRAMES
===========================*/

@keyframes spin{

    from{transform:rotate(0deg) scale(1.15);}
    to{transform:rotate(360deg) scale(1.15);}

}

@keyframes spinReverse{

    from{transform:rotate(360deg) scale(1.30);}
    to{transform:rotate(0deg) scale(1.30);}

}

@keyframes wave{

    0%{

        transform:scale(.2);

        opacity:1;

    }

    100%{

        transform:scale(4);

        opacity:0;

    }

}

@keyframes flow{

    from{

        transform:translateY(-20px);

        opacity:0;

    }

    to{

        transform:translateY(20px);

        opacity:1;

    }

}

@keyframes flowX{

    from{

        transform:translateX(-20px);

        opacity:0;

    }

    to{

        transform:translateX(20px);

        opacity:1;

    }

}

@keyframes flowReverse{

    from{

        transform:translateX(20px);

        opacity:0;

    }

    to{

        transform:translateX(-20px);

        opacity:1;

    }

}

.hero-webinar{

    position:absolute;

    top:95px;

    left:240px;

    width:280px;

    height:280px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:30;

    border-radius:24px;

    background:rgba(8,18,35,.22);

    border:1px solid rgba(35,200,255,.15);

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 0 40px rgba(0,234,255,.05);

    overflow:hidden;

}

.hero-webinar:hover{

    transform:translateY(-6px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 40px rgba(0,234,255,.18);

    transition:.35s;

}

.hud-corner{

    position:absolute;

    width:28px;

    height:28px;

    border-color:#00dfff;

}

.hud-tl{

    top:12px;
    left:12px;

    border-top:2px solid;
    border-left:2px solid;

}

.hud-tr{

    top:12px;
    right:12px;

    border-top:2px solid;
    border-right:2px solid;

}

.hud-bl{

    bottom:12px;
    left:12px;

    border-bottom:2px solid;
    border-left:2px solid;

}

.hud-br{

    bottom:12px;
    right:12px;

    border-bottom:2px solid;
    border-right:2px solid;

}

/*======================================================
                NOTIFY BUTTON
======================================================*/

#notifyBtn{

    width:340px;

    height:78px;

    margin-top:35px;

    border:none;

    border-radius:22px;

    cursor:pointer;

    color:#fff;

    font-size:28px;

    font-weight:700;

    letter-spacing:2px;

    background:
        linear-gradient(180deg,#22d8ff,#0a88ff);

    box-shadow:
        0 0 20px rgba(0,210,255,.35),
        0 0 60px rgba(0,180,255,.20);

    transition:.35s;

}

#notifyBtn:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 0 35px rgba(0,220,255,.55),
        0 0 80px rgba(0,220,255,.30);

}

#notifyBtn:active{

    transform:scale(.98);

}

.comingsoon-modal{

    position:absolute;

    inset:0;

    z-index:500;

    pointer-events:auto;

}

.comingsoon-window{

    width:560px;

    padding:45px;

    margin-top:380px;

    border-radius:28px;

    background:rgba(7,15,30,.45);

    backdrop-filter:blur(30px);

    border:1px solid rgba(0,220,255,.15);

    box-shadow:0 0 60px rgba(0,180,255,.15);

}

.comingsoon-window h2{
    margin-bottom:6px;
}

.comingsoon-window h3{
    margin-top:0;
}

.comingsoon-window p{
    margin-top:18px;
    line-height:1.6;
    font-size:22px;
}

html,
body{

    margin:0;

    padding:0;

    width:100%;

    height:100%;

    overflow:hidden;

    background:#040816;

}





.modal-backdrop{
    position:absolute;
    inset:0;
}

.modal-window{

    position:relative;

    z-index:2;

    width:min(1100px,92vw);

    background:#081626;

    border-radius:28px;

    padding:40px;

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

    box-shadow:
        0 0 80px rgba(0,180,255,.25);

}

/*======================================================
                WEBINAR POPUP
======================================================*/

.modal-window{

    position:relative;

    width:min(1180px,92vw);

    padding:42px;

    border-radius:28px;

    background:
        linear-gradient(180deg,
        rgba(10,22,45,.97),
        rgba(5,12,28,.97));

    border:1px solid rgba(0,234,255,.18);

    box-shadow:
        0 0 80px rgba(0,170,255,.25),
        inset 0 0 80px rgba(0,255,255,.05);

    overflow:hidden;

}

.modal-window::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top,
    rgba(0,255,255,.06),
    transparent 60%);

    pointer-events:none;

}



.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding-bottom:28px;

    margin-bottom:35px;

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

}

.modal-header h2{

    margin:0;

    font-size:42px;

    font-weight:800;

    color:#fff;

}

.modal-header p{

    margin-top:10px;

    color:#9fdfff;

    font-size:18px;

}

.status-live{

    padding:12px 24px;

    border-radius:40px;

    background:linear-gradient(135deg,#00d7ff,#0088ff);

    color:#fff;

    font-weight:700;

    letter-spacing:2px;

    box-shadow:0 0 30px rgba(0,180,255,.45);

}



.modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    font-size:30px;

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

    transition:.35s;

}

.modal-close:hover{

    background:#ff3b3b;

    transform:rotate(90deg);

}



.modal-body{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:42px;

    align-items:flex-start;

}



.webinar-details{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.info-card{

    padding:20px 24px;

    border-radius:18px;

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

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

    transition:.35s;

}

.info-card:hover{

    transform:translateX(8px);

    border-color:#00dfff;

    box-shadow:0 0 25px rgba(0,200,255,.18);

}

.info-card h4{

    margin:0;

    color:#00e7ff;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

}

.info-card p{

    margin:10px 0 0;

    color:#fff;

    font-size:21px;

    font-weight:700;

}



.registration-box{

    padding:36px;

    border-radius:24px;

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

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

    box-shadow:
        inset 0 0 40px rgba(0,255,255,.04);

}



.registration-box h3{

    margin:0 0 28px;

    text-align:center;

    color:#fff;

    font-size:30px;

}



#webinarForm{

    display:flex;

    flex-direction:column;

    gap:18px;

}



#webinarForm input,
#webinarForm select{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:14px;

    outline:none;

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

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

    color:#fff;

    font-size:16px;

    transition:.35s;

    box-sizing:border-box;

}

#webinarForm input::placeholder{

    color:#9eb8cf;

}

#webinarForm input:focus,
#webinarForm select:focus{

    border-color:#00e7ff;

    box-shadow:0 0 25px rgba(0,220,255,.25);

}



#webinarForm button{

    margin-top:10px;

    height:64px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:20px;

    font-weight:700;

    color:#fff;

    letter-spacing:1px;

    background:linear-gradient(135deg,#00d4ff,#0088ff);

    box-shadow:0 0 35px rgba(0,180,255,.35);

    transition:.35s;

}

#webinarForm button:hover{

    transform:translateY(-4px);

    box-shadow:0 0 45px rgba(0,220,255,.55);

}



@media(max-width:980px){

.modal-window{

    width:95vw;

    padding:26px;

}

.modal-body{

    grid-template-columns:1fr;

}

.registration-box{

    margin-top:25px;

}

}

/*======================================================
            WEBINAR REGISTRATION SELECT
======================================================*/

.registration-box select{

    width:100%;

    height:56px;

    padding:0 18px;

    background:#1b2436;

    color:#ffffff;

    border:1px solid rgba(0,220,255,.25);

    border-radius:14px;

    font-size:16px;

    outline:none;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

}

.registration-box select option{

    background:#1b2436;

    color:#ffffff;

}

.modal-header{

    display:flex;
    align-items:flex-start;
    gap:20px;

}

.header-left{

    width:210px;
    flex-shrink:0;

}

.header-banner{

    flex:1.5;

    height:240px;

    margin-left:-25px;

    margin-right:-10px;

    border-radius:14px;

    overflow:hidden;

    border:1px solid rgba(0,200,255,.18);

}

.header-banner img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}

/*======================================================
            REGISTRATION SUCCESS
======================================================*/

.success-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.success-modal.show{

    opacity:1;

    visibility:visible;

}

.success-window{

    width:430px;

    background:#101a2d;

    border:1px solid rgba(0,200,255,.25);

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

}

.success-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#00d084,#00b36b);

    color:#fff;

    font-size:42px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}

.success-window h2{

    color:#fff;

    margin-bottom:12px;

}

.success-window p{

    color:#9fb6d9;

    margin-bottom:25px;

}

.success-info{

    text-align:left;

    background:#17233a;

    border-radius:12px;

    padding:18px;

    margin-bottom:25px;

}

.success-info div{

    margin:10px 0;

    color:#fff;

}

.success-info strong{

    color:#00c8ff;

}

#successOk{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;

    background:linear-gradient(90deg,#12c2e9,#1f8ef1);

}

#notifyForm{

    display:none;

    flex-direction:column;

    gap:14px;

    margin-top:25px;

}

#notifyForm input,
#notifyForm select{

    width:100%;

    height:52px;

    box-sizing:border-box;
}

#submitNotify{

    margin-top:10px;

    padding:14px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:linear-gradient(90deg,#16c7ff,#2f80ff);

    color:#fff;

    font-weight:700;

}

.notify-card{

    width:100%;

    margin-top:20px;

    padding:0;

    border:none;

    background:transparent;

    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    box-shadow:none;

    animation:glassAppear .35s ease;

}

.notify-card h2{

    margin:0 0 10px;

    text-align:center;

    color:#ffffff;

}

.notify-card p{

    margin:0 0 25px;

    text-align:center;

    color:rgba(255,255,255,.75);

    font-size:15px;

}

.notify-card input,
.notify-card select{

    width:100%;

    height:56px;

    margin-bottom:16px;

    padding:0 18px;

    border-radius:14px;

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

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

    color:#fff;

    box-sizing:border-box;

    font-size:15px;

}

.notify-card input:focus,
.notify-card select:focus{

    outline:none;

    border-color:#18d8ff;

    box-shadow:0 0 20px rgba(0,200,255,.25);

}
.notify-card input::placeholder{

    color:rgba(255,255,255,.6);

}

.notify-card input:focus,
.notify-card select:focus{

    outline:none;

    border-color:#12d6ff;

    box-shadow:0 0 20px rgba(0,200,255,.25);

}

#submitNotify{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(90deg,#11d3ff,#2a78ff);

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 0 35px rgba(0,190,255,.45);

}

@keyframes glassAppear{

    from{

        opacity:0;

        transform:translateY(35px) scale(.92);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.notify-success{

    text-align:center;

    padding:50px 20px;

}

.success-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(#15d4ff,#2f80ff);

    color:#fff;

    font-size:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 0 35px rgba(0,200,255,.4);

}

.notify-success h2{

    margin-top:25px;

    color:#fff;

}

.notify-success p{

    color:#b6c6d9;

}