/*====================================================

IDEACIPHER
Premium Launch Page
Version 2.0

====================================================*/


/*-------------------------
RESET
--------------------------*/

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

html{

scroll-behavior:smooth;

}

body{

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

background:#071526;

color:#fff;

overflow-x:hidden;

min-height:100vh;

position:relative;

}


/*-------------------------
COLORS
--------------------------*/

:root{

--blue:#009BF3;

--blue2:#4FAEFF;

--yellow:#FFC928;

--dark:#071526;

--card:#0D1B2E;

--card2:#12243D;

--text:#F7F8FA;

--muted:#A8B7CC;

--border:rgba(255,255,255,.06);

}


/*-------------------------
BACKGROUND
--------------------------*/

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at 0% 20%,
rgba(0,155,243,.28),
transparent 38%),

radial-gradient(circle at 100% 95%,
rgba(255,201,40,.18),
transparent 35%),

radial-gradient(circle at 50% 50%,
rgba(0,155,243,.08),
transparent 45%),

linear-gradient(
180deg,
#071526,
#081B33,
#061221
);

background-size:250% 250%;

animation:bgMove 18s ease infinite;

z-index:-10;

}


/*-------------------------
FLOATING BLOBS
--------------------------*/

.blob{

position:fixed;

border-radius:50%;

filter:blur(120px);

opacity:.55;

pointer-events:none;

}

.blob-blue{

width:420px;

height:420px;

background:#009BF3;

left:-180px;

top:-100px;

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

}

.blob-yellow{

width:320px;

height:320px;

background:#FFC928;

right:-120px;

bottom:-100px;

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

}


/*-------------------------
LAYOUT
--------------------------*/

.container{

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:24px;

}


/*-------------------------
MAIN CARD
--------------------------*/

.glass-card{

width:min(92vw, 1320px);

padding:70px 90px;

border-radius:38px;

border-radius:34px;

background:
linear-gradient(
145deg,
rgba(18,35,60,.70),
rgba(8,18,36,.74)
);

backdrop-filter:blur(28px);

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

box-shadow:

0 35px 90px rgba(0,0,0,.55),

0 0 0 1px rgba(255,255,255,.02);

position:relative;

overflow:hidden;

transition:.4s;

}


/* Top Highlight */

.glass-card::before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

height:1px;

background:

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

}


/* Soft Glow */

.glass-card::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:

radial-gradient(circle,
rgba(0,155,243,.08),
transparent 70%);

top:-120px;

right:-120px;

pointer-events:none;

}


/*-------------------------
LOGO
--------------------------*/

.logo{

width:340px;

display:block;

margin:auto;

margin-bottom:40px;

user-select:none;

}


/*-------------------------
BADGE
--------------------------*/

.badge{

display:flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:999px;

background:

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

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

font-weight:600;

font-size:.95rem;
justify-content:center;

color:#5CC3FF;
width:fit-content;

margin:0 auto 32px;

}

.dot{

width:10px;

height:10px;

border-radius:50%;

background:#31FF88;

box-shadow:

0 0 15px #31FF88;

}


/*====================================================

PART 2
HERO + BUTTONS

====================================================*/


/*-------------------------
TYPOGRAPHY
--------------------------*/

h1{

font-size:5.5rem;

font-weight:800;

line-height:1.05;

letter-spacing:-2px;

text-align:center;

margin-bottom:26px;

max-width:1100px;

margin-left:auto;

margin-right:auto;

color:var(--text);

}


h1 span{

display:block;

margin-top:6px;

background:linear-gradient(

90deg,

#82D8FF,

#2FA8FF,

#009BF3

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


.description{

max-width:860px;

margin:auto;

text-align:center;

font-size:1.25rem;

line-height:1.9;

font-weight:400;

color:var(--muted);

margin-bottom:46px;

}


/*-------------------------
BUTTON WRAPPER
--------------------------*/

.buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-bottom:56px;

flex-wrap:wrap;

}


/*-------------------------
BUTTON BASE
--------------------------*/

.btn{

position:relative;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

min-width:200px;

height:60px;

padding:0 34px;

border-radius:999px;

font-weight:600;

font-size:1rem;

text-decoration:none;

transition:.35s ease;

cursor:pointer;

user-select:none;

}


/*-------------------------
PRIMARY BUTTON
--------------------------*/

.btn-primary{

color:#fff;

background:

linear-gradient(

135deg,

#58B5FF,

#3478FF

);

box-shadow:

0 12px 35px rgba(0,155,243,.35),

0 0 30px rgba(0,155,243,.15);

}


.btn-primary:hover{

transform:

translateY(-6px)

scale(1.03);

box-shadow:

0 20px 45px rgba(0,155,243,.55),

0 0 45px rgba(0,155,243,.25);

}


/* glow */

.btn-primary::before{

content:"";

position:absolute;

width:120%;

height:120%;

left:-10%;

top:-10%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:translateX(-120%);

transition:.6s;

}


.btn-primary:hover::before{

transform:translateX(120%);

}


/*-------------------------
SECONDARY BUTTON
--------------------------*/

.btn-secondary{

background:

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

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

color:white;

backdrop-filter:blur(10px);

}


.btn-secondary:hover{

transform:

translateY(-6px)

scale(1.03);

background:

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

border-color:

rgba(255,255,255,.14);

}


/*-------------------------
BUTTON ACTIVE
--------------------------*/

.btn:active{

transform:scale(.97);

}


/*-------------------------
SECTION FADE
--------------------------*/

.logo{

animation:fadeUp .8s ease both;

}

.badge{

animation:fadeUp .8s ease .15s both;

}

h1{

animation:fadeUp .8s ease .3s both;

}

.description{

animation:fadeUp .8s ease .45s both;

}

.buttons{

animation:fadeUp .8s ease .6s both;

}


/*-------------------------
SUBTLE GLOW BEHIND TITLE
--------------------------*/

h1::after{

content:"";

position:absolute;

width:320px;

height:320px;

background:

radial-gradient(circle,

rgba(0,155,243,.08),

transparent 70%

);

left:50%;

transform:translateX(-50%);

top:170px;

z-index:-1;

pointer-events:none;

}


/*-------------------------
SMOOTH HOVER
--------------------------*/

.glass-card:hover{

transform:translateY(-6px);

box-shadow:

0 45px 110px rgba(0,0,0,.65),

0 0 50px rgba(0,155,243,.08);

}

/*====================================================

PART 3
COUNTDOWN + SOCIAL + FOOTER

====================================================*/


/*-------------------------
COUNTDOWN
--------------------------*/

.countdown{

display:grid;

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

gap:20px;

margin-top:15px;

margin-bottom:55px;

}


.time-box{

position:relative;

padding:34px 18px;

border-radius:26px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(20px);

overflow:hidden;

transition:.35s ease;

cursor:default;

}


/* Top Light */

.time-box::before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.40),

transparent

);

}


/* Blue Glow */

.time-box::after{

content:"";

position:absolute;

width:180px;

height:180px;

background:

radial-gradient(circle,

rgba(0,155,243,.12),

transparent 70%

);

left:-70px;

top:-90px;

opacity:0;

transition:.35s;

}


.time-box:hover{

transform:

translateY(-10px)

scale(1.03);

border-color:

rgba(0,155,243,.18);

box-shadow:

0 20px 45px rgba(0,0,0,.35),

0 0 35px rgba(0,155,243,.12);

}


.time-box:hover::after{

opacity:1;

}


.time-box h2{

font-size:3.3rem;

font-weight:800;

line-height:1;

margin-bottom:16px;

color:#ffffff;

letter-spacing:-1px;

}


.time-box span{

display:block;

font-size:.78rem;

font-weight:700;

letter-spacing:4px;

color:var(--muted);

text-transform:uppercase;

}


/*-------------------------
DIVIDER
--------------------------*/

.divider{

width:100%;

height:1px;

margin:10px 0 38px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

}


/*-------------------------
SOCIAL
--------------------------*/

.socials{

display:flex;

justify-content:center;

align-items:center;

gap:16px;

margin-bottom:38px;

}


.socials a{

width:48px;

height:48px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

font-size:1rem;

color:white;

background:

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

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

transition:.35s ease;

backdrop-filter:blur(15px);

}


.socials a:hover{

transform:

translateY(-6px)

scale(1.08);

background:

linear-gradient(

135deg,

#009BF3,

#3478FF

);

box-shadow:

0 10px 28px rgba(0,155,243,.35);

}


/*-------------------------
FOOTER
--------------------------*/

footer{

text-align:center;

font-size:.92rem;

line-height:2;

color:var(--muted);

opacity:.85;

}


footer strong{

color:white;

font-weight:600;

}


/*-------------------------
BOTTOM GLOW
--------------------------*/

footer::before{

content:"";

display:block;

width:180px;

height:1px;

margin:0 auto 25px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.10),

transparent

);

}


/*-------------------------
ANIMATION
--------------------------*/

.countdown{

animation:fadeUp .8s ease .75s both;

}

.socials{

animation:fadeUp .8s ease .95s both;

}

footer{

animation:fadeUp .8s ease 1.1s both;

}

/*====================================================

PART 4
ANIMATIONS + PREMIUM EFFECTS

====================================================*/


/*-------------------------
BACKGROUND ANIMATION
--------------------------*/

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}


/*-------------------------
FLOATING BLOBS
--------------------------*/

@keyframes float1{

0%{
transform:translate(0,0) scale(1);
}

25%{
transform:translate(50px,-30px) scale(1.05);
}

50%{
transform:translate(15px,30px) scale(.95);
}

75%{
transform:translate(-35px,-15px) scale(1.04);
}

100%{
transform:translate(0,0) scale(1);
}

}

@keyframes float2{

0%{
transform:translate(0,0) scale(1);
}

25%{
transform:translate(-45px,20px) scale(1.08);
}

50%{
transform:translate(-20px,-25px) scale(.94);
}

75%{
transform:translate(30px,20px) scale(1.03);
}

100%{
transform:translate(0,0) scale(1);
}

}


/*-------------------------
FADE UP
--------------------------*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*-------------------------
CARD FLOAT
--------------------------*/

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.glass-card{

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

}


/*-------------------------
BUTTON RIPPLE
--------------------------*/

.btn{

overflow:hidden;

position:relative;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}


/*-------------------------
CURSOR GLOW
--------------------------*/

.mouse-glow{

position:fixed;

width:420px;

height:420px;

border-radius:50%;

pointer-events:none;

background:

radial-gradient(circle,

rgba(0,155,243,.12),

transparent 70%

);

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

transition:

left .08s linear,

top .08s linear;

z-index:-2;

}


/*-------------------------
SMOOTH CARD ROTATION
--------------------------*/

.glass-card{

transform-style:preserve-3d;

transition:

transform .15s ease,

box-shadow .3s ease;

}


/*-------------------------
LOGO HOVER
--------------------------*/

.logo{

transition:.4s;

}

.logo:hover{

transform:scale(1.03);

filter:

drop-shadow(0 0 20px rgba(255,201,40,.35));

}


/*-------------------------
COUNTDOWN NUMBER
--------------------------*/

.time-box h2{

transition:.3s;

}

.time-box:hover h2{

color:#58B5FF;

}


/*-------------------------
BADGE GLOW
--------------------------*/

.badge{

transition:.35s;

}

.badge:hover{

box-shadow:

0 0 25px rgba(0,155,243,.18);

}


/*-------------------------
SCROLLBAR
--------------------------*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#081828;

}

::-webkit-scrollbar-thumb{

background:#214A78;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#009BF3;

}


/*-------------------------
TEXT SELECTION
--------------------------*/

::selection{

background:#009BF3;

color:white;

}


/*-------------------------
SMOOTH TRANSITIONS
--------------------------*/

a,
button,
.time-box,
.socials a,
.btn{

transition:all .35s ease;

}

/*====================================================

PART 5
RESPONSIVE DESIGN

====================================================*/


/*==============================
Large Desktop (1440px+)
==============================*/

@media (min-width:1440px){

.container{

padding:60px;

}

.glass-card{

max-width:900px;

padding:60px;

}

h1{

font-size:4.6rem;

}

.description{

font-size:1.2rem;

max-width:680px;

}

.logo{

width:310px;

}

.time-box h2{

font-size:3.6rem;

}

}


/*==============================
Desktop
==============================*/

@media (max-width:1200px){

.glass-card{

max-width:820px;

padding:48px;

}

h1{

font-size:3.8rem;

}

}


/*==============================
Tablet
==============================*/

@media (max-width:992px){

.container{

padding:24px;

}

.glass-card{

padding:42px 32px;

border-radius:28px;

}

.logo{

width:240px;

margin-bottom:28px;

}

h1{

font-size:3rem;

letter-spacing:-1px;

}

.description{

font-size:1rem;

line-height:1.8;

margin-bottom:40px;

}

.buttons{

gap:14px;

margin-bottom:42px;

}

.btn{

min-width:180px;

height:56px;

}

.countdown{

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

gap:16px;

}

.time-box{

padding:28px 18px;

}

.time-box h2{

font-size:2.8rem;

}

.socials{

gap:14px;

}

}


/*==============================
Mobile
==============================*/

@media (max-width:768px){

.container{

padding:18px;

align-items:center;

}

.glass-card{

padding:30px 22px;

border-radius:24px;

}

.logo{

width:190px;

margin-bottom:22px;

}

.badge{

padding:10px 18px;

font-size:.85rem;

margin-bottom:18px;

}

h1{

font-size:2.2rem;

line-height:1.15;

margin-bottom:18px;

}

.description{

font-size:.95rem;

line-height:1.8;

margin-bottom:30px;

}

.buttons{

flex-direction:column;

width:100%;

gap:12px;

margin-bottom:34px;

}

.btn{

width:100%;

height:54px;

min-width:unset;

}

.countdown{

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

gap:12px;

margin-bottom:36px;

}

.time-box{

padding:22px 12px;

border-radius:20px;

}

.time-box h2{

font-size:2.3rem;

margin-bottom:10px;

}

.time-box span{

font-size:.7rem;

letter-spacing:2px;

}

.divider{

margin:0 0 28px;

}

.socials{

gap:12px;

margin-bottom:28px;

}

.socials a{

width:44px;

height:44px;

font-size:.9rem;

}

footer{

font-size:.82rem;

line-height:1.8;

}

}


/*==============================
Small Mobile
==============================*/

@media (max-width:480px){

.container{

padding:14px;

}

.glass-card{

padding:24px 18px;

border-radius:20px;

}

.logo{

width:165px;

}

.badge{

font-size:.78rem;

padding:8px 16px;

}

h1{

font-size:1.85rem;

}

.description{

font-size:.88rem;

}

.time-box{

padding:18px 10px;

}

.time-box h2{

font-size:1.9rem;

}

.time-box span{

font-size:.65rem;

letter-spacing:1.5px;

}

.socials a{

width:40px;

height:40px;

}

}


/*==============================
Very Small Devices
==============================*/

@media (max-width:360px){

h1{

font-size:1.6rem;

}

.description{

font-size:.82rem;

}

.logo{

width:145px;

}

.time-box h2{

font-size:1.6rem;

}

.time-box{

padding:15px 8px;

}

.btn{

height:50px;

font-size:.92rem;

}

}


/*==============================
Accessibility
==============================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}