/*==================================================
  ACXYRON MEDIA
  Premium Coming Soon Landing Page
  Part 1 - Foundation, Navigation & Hero
==================================================*/

/*=========================
        GOOGLE FONT
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/*=========================
      CSS VARIABLES
=========================*/

:root{

    --primary:#050505;
    --secondary:#101010;
    --surface:#181818;

    --accent:#2563ff;
    --accent-light:#5c8cff;

    --text:#ffffff;
    --muted:#9a9a9a;

    --border:#2a2a2a;

    --success:#35d67b;

    --radius:18px;

    --transition:.35s ease;

    --shadow:
    0 15px 45px rgba(0,0,0,.35);

    --glass:
    rgba(255,255,255,.05);

    --glass-border:
    rgba(255,255,255,.08);

}

/*=========================
        RESET
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Manrope',sans-serif;

    background:var(--primary);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button,
input{

    font-family:inherit;

}

ul{

    list-style:none;

}

/*=========================
      SELECTION
=========================*/

::selection{

    background:var(--accent);

    color:#fff;

}

/*=========================
      SCROLLBAR
=========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#333;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#555;

}

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

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;

}

/* Moving Gradient */

.gradient{

    position:absolute;

    width:900px;

    height:900px;

    background:

    radial-gradient(circle,

    rgba(37,99,255,.22),

    transparent 70%);

    top:-200px;

    right:-150px;

    filter:blur(40px);

    animation:gradientMove 12s ease-in-out infinite alternate;

}

/* Glow */

.glow{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    filter:blur(120px);

}

.glow-1{

    background:rgba(37,99,255,.15);

    top:55%;

    left:-150px;

}

.glow-2{

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

    bottom:-180px;

    right:-120px;

}

/* Grid */

.grid{

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:60px 60px;

    mask-image:radial-gradient(circle at center, black 30%, transparent 95%);

}

/*=========================
      LOADER
=========================*/

#loader{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    transition:.8s;

}

#loader img{

    width:70px;

    animation:pulse 2s infinite;

}

/*=========================
      NAVIGATION
=========================*/

header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

}

.navbar{

    width:min(1250px,92%);

    margin:auto;

    margin-top:22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 28px;

    border-radius:100px;

    background:var(--glass);

    backdrop-filter:blur(20px);

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

}

.logo img {
    height: 48px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.logo img:hover {
    opacity: 1;
}
.nav-links{

    display:flex;

    gap:40px;

}

.nav-links a{

    color:var(--muted);

    font-size:.95rem;

    transition:var(--transition);

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    left:0;

    bottom:-6px;

    background:var(--accent);

    transition:.35s;

}

.nav-links a:hover{

    color:#fff;

}

.nav-links a:hover::after{

    width:100%;

}

.menu-btn{

    display:none;

    border:none;

    background:none;

    color:#fff;

    font-size:1.5rem;

    cursor:pointer;

}

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

.hero{

    min-height:100vh;

    width:min(1250px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

}

.hero-content{

    animation:fadeUp 1s ease;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

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

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

    border-radius:100px;

    color:var(--muted);

    margin-bottom:35px;

    font-size:.9rem;

}

.status-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:var(--success);

    box-shadow:0 0 12px var(--success);

}

.hero h1{

    font-size:clamp(3.6rem,7vw,5.6rem);

    line-height:1.02;

    font-weight:800;

    letter-spacing:-3px;

    max-width:720px;

}

.hero p{

    margin-top:35px;

    color:var(--muted);

    font-size:1.15rem;

    max-width:600px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:50px;

}

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

.primary-btn{

    padding:18px 36px;

    border-radius:100px;

    background:var(--accent);

    transition:.35s;

    font-weight:700;

    box-shadow:

    0 15px 40px rgba(37,99,255,.35);

}

.primary-btn:hover{

    transform:translateY(-4px);

    background:var(--accent-light);

}

.secondary-btn{

    padding:18px 36px;

    border-radius:100px;

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

    transition:.35s;

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

}

.secondary-btn:hover{

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

    transform:translateY(-4px);

}

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

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.orb{

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(circle at 35% 35%,

    rgba(255,255,255,.12),

    rgba(37,99,255,.15),

    transparent 75%);

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

    animation:float 7s ease-in-out infinite;

}

.ring{

    position:absolute;

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

    border-radius:50%;

}

.ring-one{

    width:600px;

    height:600px;

}

.ring-two{

    width:700px;

    height:700px;

    opacity:.35;

}

.floating-card{

    position:absolute;

    padding:15px 24px;

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

    backdrop-filter:blur(20px);

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

    border-radius:16px;

    font-weight:600;

    box-shadow:var(--shadow);

}

.floating-card:nth-child(4){

    top:12%;

    left:5%;

}

.floating-card:nth-child(5){

    right:2%;

    top:40%;

}

.floating-card:nth-child(6){

    bottom:8%;

    left:18%;

}

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

@keyframes gradientMove{

    from{

        transform:translateY(0) translateX(0);

    }

    to{

        transform:translateY(80px) translateX(-80px);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

@keyframes pulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
  PART 2
  Countdown • Newsletter • About • Footer
  Responsive Design
==================================================*/

/*=========================
      SECTION SPACING
=========================*/

section{

    padding:120px 0;

}

section:not(.hero){

    width:min(1250px,92%);

    margin:auto;

}

/*=========================
      COUNTDOWN
=========================*/

.countdown{

    display:grid;

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

    gap:24px;

}

.time-box{

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

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

    backdrop-filter:blur(20px);

    border-radius:24px;

    padding:40px 20px;

    text-align:center;

    transition:var(--transition);

}

.time-box:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,255,.4);

    box-shadow:0 18px 50px rgba(0,0,0,.3);

}

.time-box h2{

    font-size:3rem;

    font-weight:800;

    letter-spacing:-2px;

}

.time-box p{

    margin-top:10px;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

}

/*=========================
      NEWSLETTER
=========================*/

.newsletter{

    text-align:center;

}

.newsletter-container{

    max-width:760px;

    margin:auto;

}

.newsletter h2{

    font-size:clamp(2.2rem,5vw,3.5rem);

    margin-bottom:20px;

    letter-spacing:-1px;

}

.newsletter p{

    color:var(--muted);

    margin-bottom:50px;

    font-size:1.05rem;

}

#subscribeForm{

    display:flex;

    gap:16px;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

}

#subscribeForm input{

    flex:1;

    min-width:280px;

    padding:18px 22px;

    border-radius:100px;

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

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

    color:var(--text);

    outline:none;

    transition:var(--transition);

}

#subscribeForm input::placeholder{

    color:var(--muted);

}

#subscribeForm input:focus{

    border-color:var(--accent);

    box-shadow:0 0 0 4px rgba(37,99,255,.15);

}

#subscribeForm button{

    padding:18px 34px;

    border:none;

    border-radius:100px;

    background:var(--accent);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

}

#subscribeForm button:hover{

    background:var(--accent-light);

    transform:translateY(-3px);

}

#success-message{

    margin-top:30px;

    color:var(--success);

    display:none;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-weight:600;

}

/*=========================
          ABOUT
=========================*/

.about{

    text-align:center;

    max-width:900px;

}

.about h2{

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

    margin-bottom:28px;

    letter-spacing:-2px;

}

.about p{

    color:var(--muted);

    font-size:1.15rem;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}

/*=========================
        SOCIALS
=========================*/

.socials{

    display:flex;

    justify-content:center;

    gap:24px;

}

.socials a{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    backdrop-filter:blur(20px);

    font-size:1.2rem;

    transition:var(--transition);

}

.socials a:hover{

    transform:translateY(-6px);

    background:var(--accent);

    box-shadow:0 10px 35px rgba(37,99,255,.35);

}

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

footer{

    width:min(1250px,92%);

    margin:auto;

    padding:60px 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

footer p{

    color:var(--muted);

}

.footer-links{

    display:flex;

    gap:28px;

}

.footer-links a{

    color:var(--muted);

    transition:var(--transition);

}

.footer-links a:hover{

    color:#fff;

}

footer span{

    color:var(--muted);

    font-size:.9rem;

}

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

@media(max-width:1100px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

    padding-top:170px;

    gap:90px;

}

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero p{

    max-width:700px;

}

.hero-buttons{

    justify-content:center;

}

.hero-visual{

    order:-1;

}

.orb{

    width:420px;

    height:420px;

}

.ring-one{

    width:500px;

    height:500px;

}

.ring-two{

    width:580px;

    height:580px;

}

}

/*=========================
      TABLET
=========================*/

@media(max-width:768px){

.nav-links{

    display:none;

}

.menu-btn{

    display:block;

}

.navbar{

    padding:16px 22px;

}

.logo img {
    height: 40px;
    width: auto;
}
  
.hero h1{

    letter-spacing:-1px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.primary-btn,
.secondary-btn{

    width:100%;

    text-align:center;

}

.countdown{

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

}

.time-box{

    padding:30px 15px;

}

.time-box h2{

    font-size:2.5rem;

}

.orb{

    width:320px;

    height:320px;

}

.ring-one{

    width:390px;

    height:390px;

}

.ring-two{

    width:450px;

    height:450px;

}

.floating-card{
    display:block;
    padding:10px 16px;
    font-size:0.8rem;
}

footer{

    flex-direction:column;

    text-align:center;

}

}

/*=========================
      MOBILE
=========================*/

@media(max-width:540px){

.hero{

    padding-top:150px;

}

.badge{

    font-size:.8rem;

}

.hero h1{

    font-size:2.8rem;

    line-height:1.1;

}

.hero p{

    font-size:1rem;

}

.countdown{

    grid-template-columns:1fr;

}

.newsletter h2{

    font-size:2rem;

}

#subscribeForm{

    flex-direction:column;

}

#subscribeForm input{

    width:100%;

    min-width:unset;

}

#subscribeForm button{

    width:100%;

}

.socials{

    flex-wrap:wrap;

    gap:16px;

}

.socials a{

    width:52px;

    height:52px;

}

.about{

    text-align:left;

}

.about p{

    font-size:1rem;

}

.footer-links{

    flex-direction:column;

    gap:12px;

}

}

/*==================================================
  PART 3
  Premium Effects & Animations
==================================================*/

/*=========================
      NOISE OVERLAY
=========================*/

.noise{

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.15) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.1) 1px, transparent 1px);

    background-size:120px 120px;

}

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

.particles{

    position:absolute;
    inset:0;

    overflow:hidden;

}

.particles::before,
.particles::after{

    content:"";

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:white;

    box-shadow:

    5vw 15vh rgba(255,255,255,.7),
    12vw 70vh rgba(255,255,255,.4),
    25vw 35vh rgba(255,255,255,.6),
    33vw 85vh rgba(255,255,255,.3),
    45vw 20vh rgba(255,255,255,.7),
    60vw 65vh rgba(255,255,255,.5),
    75vw 18vh rgba(255,255,255,.8),
    82vw 48vh rgba(255,255,255,.5),
    91vw 77vh rgba(255,255,255,.6);

    animation:drift 30s linear infinite;

}

.particles::after{

    animation-duration:45s;

    opacity:.45;

}

/*=========================
      SPOTLIGHT
=========================*/

body::before{

    content:"";

    position:fixed;

    width:700px;
    height:700px;

    border-radius:50%;

    left:var(--mouse-x,50%);
    top:var(--mouse-y,50%);

    transform:translate(-50%,-50%);

    background:
    radial-gradient(circle,
    rgba(37,99,255,.12),
    transparent 70%);

    pointer-events:none;

    z-index:-2;

    transition:left .15s linear,
               top .15s linear;

}

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

header.scrolled .navbar{

    background:rgba(5,5,5,.88);

    border-color:rgba(255,255,255,.12);

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

}

/*=========================
      MOBILE MENU
=========================*/

@media(max-width:768px){

.nav-links{

    position:fixed;

    top:90px;

    right:-100%;

    width:280px;

    display:flex;

    flex-direction:column;

    gap:28px;

    padding:35px;

    border-radius:24px;

    background:rgba(18,18,18,.96);

    backdrop-filter:blur(25px);

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

    transition:.45s;

}

.nav-links.active{

    right:20px;

}

}

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

input:focus{

    transform:translateY(-2px);

}

/*=========================
      BUTTON GLOW
=========================*/

.primary-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::before{

    content:"";

    position:absolute;

    width:200%;

    height:100%;

    top:0;

    left:-200%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transition:.8s;

}

.primary-btn:hover::before{

    left:100%;

}

/*=========================
      SOCIAL GLOW
=========================*/

.socials a{

    position:relative;

    overflow:hidden;

}

.socials a::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    opacity:0;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.15),
    transparent 70%);

    transition:.35s;

}

.socials a:hover::after{

    opacity:1;

}

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

.floating-card:nth-child(4){

    animation:float1 6s ease-in-out infinite;

}

.floating-card:nth-child(5){

    animation:float2 8s ease-in-out infinite;

}

.floating-card:nth-child(6){

    animation:float3 7s ease-in-out infinite;

}

/*=========================
      REVEAL
=========================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================
      CARD HOVER
=========================*/

.time-box,
.newsletter-container,
.about{

    transition:.45s;

}

.newsletter-container:hover{

    transform:translateY(-6px);

}

.about:hover{

    transform:translateY(-6px);

}

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

@keyframes drift{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

@keyframes float1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes float2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(22px);

    }

}

@keyframes float3{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

}

@keyframes fadeOut{

    to{

        opacity:0;

        visibility:hidden;

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================
      REDUCED MOTION
=========================*/

@media(prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}

}

/*=========================
      UTILITY CLASSES
=========================*/

.hidden{

    display:none!important;

}

.text-center{

    text-align:center;

}

.fade{

    opacity:.6;

}

.glass{

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

    backdrop-filter:blur(20px);

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

}

.shadow{

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

}

.rounded{

    border-radius:24px;

}

.mt-2{

    margin-top:2rem;

}

.mt-4{

    margin-top:4rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-4{

    margin-bottom:4rem;

}