/* ===========================================================
   GLOBAL
=========================================================== */

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

html,
body{
width:100%;
height:100%;
overflow:hidden;
font-family:'Poppins',sans-serif;
background:#f6f9ff;
color:#222;
}

body{
position:relative;
}

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

#background{
position:fixed;
inset:0;
overflow:hidden;
z-index:-2;
background:
linear-gradient(135deg,#ffffff 0%,#f7f8ff 40%,#eef5ff 100%);
}

#grid{
position:absolute;
inset:0;
opacity:.05;
background-image:

linear-gradient(#999 1px,transparent 1px),
linear-gradient(90deg,#999 1px,transparent 1px);

background-size:50px 50px;
}

/* ===========================================================
FLOATING BLOBS
=========================================================== */

.blob{

position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.6;
mix-blend-mode:multiply;

}

.blob1{

width:450px;
height:450px;
background:#7d5cff;
top:-120px;
left:-120px;

}

.blob2{

width:420px;
height:420px;
background:#00c8ff;
right:-120px;
top:80px;

}

.blob3{

width:400px;
height:400px;
background:#ff5b92;
bottom:-120px;
left:20%;

}

.blob4{

width:380px;
height:380px;
background:#ffd94d;
bottom:-120px;
right:10%;

}

/* ===========================================================
PROGRESS
=========================================================== */

#progress{

position:fixed;
top:0;
left:0;
height:6px;
width:100%;
background:#e8edf7;
z-index:999;

}

#progressFill{

width:0%;
height:100%;
background:
linear-gradient(90deg,#00bfff,#7d5cff,#ff3f66);

}

/* ===========================================================
APP
=========================================================== */

#app{

position:relative;
width:100%;
height:100vh;

}

/* ===========================================================
SCENE
=========================================================== */

.scene{

position:absolute;

top:50%;
left:50%;

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

width:1180px;
max-width:92%;

text-align:center;

opacity:0;
visibility:hidden;

}

/* ===========================================================
TYPOGRAPHY
=========================================================== */

.badge{

display:inline-flex;
align-items:center;
gap:10px;

padding:10px 22px;

border-radius:50px;

background:white;

box-shadow:

0 12px 35px rgba(0,0,0,.08);

font-weight:600;

color:#6d55ff;

margin-bottom:35px;

}

.episode{

letter-spacing:10px;
font-size:15px;
font-weight:700;

color:#ff4f5f;

margin-bottom:15px;

}

.headline{

font-size:82px;
font-weight:800;
line-height:1.05;

margin-bottom:15px;

}

.headline span{

display:inline-block;
margin:0 8px;

}

.subheadline{

font-size:48px;
font-weight:700;

background:
linear-gradient(90deg,#00c6ff,#7d5cff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:25px;

}

.description{

font-size:28px;
opacity:.7;

}

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

.heroGraphic{

margin-top:70px;

position:relative;

height:380px;

display:flex;

justify-content:center;
align-items:center;

}

.mainCircle{

width:240px;
height:240px;

border-radius:50%;

background:white;

display:flex;
justify-content:center;
align-items:center;

box-shadow:

0 25px 80px rgba(125,92,255,.25);

}

.mainCircle img{

width:130px;

}

.floatingCard{

position:absolute;

width:160px;
height:100px;

border-radius:25px;

background:white;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

}

.card1{

left:220px;
top:40px;

}

.card2{

right:220px;
top:70px;

}

.card3{

bottom:20px;

}

/* ===========================================================
HOOK
=========================================================== */

#hook h2{

font-size:72px;

margin-bottom:50px;

}

.bubble{

display:inline-flex;

padding:16px 28px;

background:white;

border-radius:100px;

margin:14px;

font-weight:600;

box-shadow:

0 10px 35px rgba(0,0,0,.08);

font-size:24px;

}

.bigStatement{

margin-top:70px;

font-size:54px;

font-weight:800;

color:#ff4b62;

}

/* ===========================================================
FEATURES
=========================================================== */

.featureGrid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.feature{

background:white;

padding:45px;

border-radius:30px;

box-shadow:

0 18px 40px rgba(0,0,0,.07);

font-size:48px;

transition:.35s;

}

.feature span{

display:block;

margin-top:20px;

font-size:24px;

font-weight:600;

}

.feature:hover{

transform:

translateY(-12px);

}

/* ===========================================================
WORKFLOW
=========================================================== */

.timeline{

display:flex;

align-items:center;

justify-content:center;

margin-top:90px;

}

.step{

display:flex;

flex-direction:column;

align-items:center;

font-weight:600;

font-size:22px;

}

.circle{

width:80px;
height:80px;

border-radius:50%;

background:

linear-gradient(135deg,#00c8ff,#7d5cff);

display:flex;

justify-content:center;
align-items:center;

color:white;

font-size:28px;

font-weight:700;

margin-bottom:18px;

box-shadow:

0 12px 30px rgba(125,92,255,.35);

}

.line{

width:120px;
height:6px;

border-radius:20px;

background:#d8dff0;

margin:0 25px;

}

/* ===========================================================
BROWSER
=========================================================== */

.browser{

width:1000px;
max-width:95%;

margin:auto;

background:white;

border-radius:28px;

overflow:hidden;

box-shadow:

0 30px 80px rgba(0,0,0,.10);

}

.browserTop{

height:70px;

display:flex;

align-items:center;

padding-left:25px;

background:#f6f7fb;

}

.dot{

width:16px;
height:16px;

border-radius:50%;

margin-right:10px;

}

.red{background:#ff605c;}
.yellow{background:#ffbd44;}
.green{background:#00ca4e;}

.browserBody{

padding:35px;

}

.placeholder{

background:

linear-gradient(
90deg,
#eceef7,
#ffffff,
#eceef7);

border-radius:20px;

margin-bottom:25px;

}

.heroImage{

height:220px;

}

.banner{

height:100px;

}

.content{

height:50px;

}

.message{

margin-top:50px;

font-size:48px;

font-weight:700;

}

.message2{

margin-top:18px;

font-size:28px;

opacity:.7;

}

/* ===========================================================
CTA
=========================================================== */

#cta h2{

font-size:66px;

margin-bottom:60px;

}

#comments{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.comment{

background:white;

padding:16px 30px;

border-radius:50px;

font-weight:600;

font-size:22px;

box-shadow:

0 10px 35px rgba(0,0,0,.08);

}

#thanks{

margin-top:80px;

font-size:34px;

font-weight:700;

color:#6d55ff;

}

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

@media(max-width:900px){

.headline{

font-size:58px;

}

.subheadline{

font-size:34px;

}

.featureGrid{

grid-template-columns:1fr;

}

.timeline{

flex-direction:column;

gap:20px;

}

.line{

width:6px;
height:70px;

}

}

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

.active{
opacity:1 !important;
visibility:visible !important;
}

.hero-container{

display:flex;
flex-direction:column;
align-items:center;

}

.series-badge{

display:flex;
align-items:center;
gap:12px;

padding:12px 24px;

border-radius:999px;

background:white;

box-shadow:0 15px 40px rgba(0,0,0,.08);

font-weight:700;
letter-spacing:2px;

}

.dot{

width:10px;
height:10px;
border-radius:50%;

background:#7c5cff;

}

.hero-title{

margin-top:30px;

font-size:90px;

font-weight:800;

line-height:1;

}

.hero-title span{

display:inline-block;

}

.hero-subtitle{

margin-top:15px;

font-size:42px;

background:linear-gradient(90deg,#00c6ff,#7c5cff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-description{

margin-top:20px;

font-size:24px;

opacity:.65;

}

.hero-stage{

margin-top:80px;

position:relative;

width:700px;
height:420px;

}

.logo-circle{

position:absolute;

left:50%;
top:50%;

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

width:220px;
height:220px;

border-radius:50%;

background:white;

box-shadow:
0 30px 80px rgba(0,0,0,.08);

display:flex;
justify-content:center;
align-items:center;

z-index:5;

}

.logo-gradient{

width:140px;
height:140px;

border-radius:50%;

background:linear-gradient(135deg,#00d4ff,#7c5cff);

display:flex;
justify-content:center;
align-items:center;

font-size:64px;
font-weight:800;
color:white;

}

.ring{

position:absolute;

left:50%;
top:50%;

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

border-radius:50%;

border:2px dashed rgba(124,92,255,.25);

}

.ring1{

width:320px;
height:320px;

}

.ring2{

width:470px;
height:470px;

opacity:.5;

}

.glass-card{

position:absolute;

width:130px;
height:130px;

border-radius:28px;

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

backdrop-filter:blur(25px);

box-shadow:
0 20px 45px rgba(0,0,0,.08);

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

font-size:42px;

}

.glass-card small{

margin-top:10px;

font-size:16px;

font-weight:600;

}

.card-a{

left:40px;
top:40px;

}

.card-b{

right:40px;
top:50px;

}

.card-c{

left:80px;
bottom:30px;

}

.card-d{

right:70px;
bottom:40px;

}

.orbit{

position:absolute;

left:50%;
top:50%;

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

border-radius:50%;

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

}

.orbit1{

width:520px;
height:520px;

}

.orbit2{

width:640px;
height:640px;

}