@charset "utf-8";
/* CSS Document */

/* ==========================================
   B💣M BISNES ORANG MALAS
   PREMIUM ICE LANDING PAGE
========================================== */


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


html{
    scroll-behavior:smooth;
}


body{

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

    background:#050b18;

    color:white;

    overflow-x:hidden;

}


:root{

    --blue:#00eaff;

    --cyan:#00ffff;

    --dark:#020617;

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

}



.container{

    width:92%;

    max-width:1200px;

    margin:auto;

}



img{

    max-width:100%;

    display:block;

}



section{

    padding:50px 0;

}



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


#loader{

position:fixed;

inset:0;

background:#020617;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}


.loader-logo{

text-align:center;

}


.loader-logo img{

width:200px;

margin:auto;

}


.loader-logo h2{

font-size:35px;

margin-top:20px;

color:var(--cyan);

}


.loader-logo p{

color:#aaa;

}

#loader {
  /* required for smooth fade out */
  transition: opacity 0.5s ease, visibility 0.5s ease; 
  cursor: pointer; /* hints to the user that it's clickable */
}

/* ===============================
   CSS LOADER - EXPLOSIVE TRANSITION
================================ */

.interaction-prompt {
  color: #777;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: pulse-text 1.5s infinite ease-in-out;
}

.bomb-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bomb-loader {
  font-size: 60px;
  animation: tick 0.5s infinite alternate ease-in-out;
}

.fuse-spark {
  position: absolute;
  top: 12px;
  right: 130px;
  font-size: 20px;
  animation: spark 0.1s infinite alternate;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff9900, #ff3300, #333);
  border-radius: 50%;
  pointer-events: none;
}

/* --- ANIMATIONS --- */

@keyframes pulse-text {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes tick {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px transparent); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 15px #ff3300); }
}

@keyframes spark {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2px, -2px) scale(1.2); }
}

.shake {
  animation: screen-shake 0.4s linear;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10%, 90% { transform: translate(-4px, 4px) rotate(-1deg); }
  20%, 80% { transform: translate(4px, -4px) rotate(1deg); }
  30%, 70% { transform: translate(-6px, -2px) rotate(-2deg); }
  40%, 60% { transform: translate(6px, 2px) rotate(2deg); }
  50% { transform: translate(-2px, 6px) rotate(0deg); }
}

.flash-out {
  animation: white-out 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes white-out {
  0% { background: var(--bg-color); }
  15% { background: #ffffff; }
  100% { background: transparent; pointer-events: none; }
}

.main-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  padding: 1px;
  color: white;
  text-align: center;
}

.main-content.visible {
  opacity: 1;
  transform: translateY(0);
}

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


.hero-ice{

height:70vh;

min-height:750px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;


background-image:

linear-gradient(

rgba(0,10,30,.55),

rgba(0,0,0,.8)

),

url("https://img.org/ICE-HERO-LINK.jpg");


background-size:cover;

background-position:center;

}



.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(

circle,

transparent,

rgba(0,0,0,.7)

);

}



.hero-content{

position:relative;

z-index:2;

}



.masterclass-badge{

display:inline-block;

padding:12px 30px;

border-radius:50px;

background:rgba(0,255,255,.12);

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

backdrop-filter:blur(15px);

font-weight:700;

letter-spacing:1px;

margin-bottom:40px;

animation:float 3s infinite;

}



/* HERO BUTTON */


.hero-button{

display:inline-block;

padding:20px 45px;

border-radius:60px;

background:#000;

color:white;

font-size:20px;

font-weight:800;

border:2px solid var(--cyan);

box-shadow:

0 0 20px var(--cyan),

0 0 60px rgba(0,255,255,.5);


animation:pulse 2s infinite;

}



/* =========================
   MALAS SECTION
========================= */


.malas-section{

background:

linear-gradient(

180deg,

#050b18,

#071b35

);

text-align:center;

}



.malas-section h2{

font-size:45px;

margin-bottom:20px;

}



.section-subtitle{

font-size:18px;

color:#ccc;

max-width:700px;

margin:auto;

line-height:1.8;

}




.malas-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}



.malas-card{

background:

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

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

border-radius:25px;

padding:40px 20px;

backdrop-filter:blur(20px);

transition:.4s;

}



.malas-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 40px rgba(0,234,255,.3);

}




.malas-card h3{

font-size:45px;

color:#00ffff;

font-weight:900;

text-shadow:

0 0 25px cyan;

}



.malas-card p{

font-size:20px;

font-weight:700;

margin-top:15px;

}





/* =========================
   BOM SECTION
========================= */


.bom-section{

text-align:center;

background:

radial-gradient(

circle at top,

#123,

#020617

);

}




.bom-section h2{

font-size:45px;

}



.bom-logo-box{

margin:40px auto 20px;

}



.bom-logo{

width:280px;

margin:auto;

filter:

drop-shadow(

0 0 35px cyan

);

animation:bombFloat 3s infinite;

}



.bom-section h1{

font-size:80px;

color:#fff;

text-shadow:

0 0 30px cyan;

}



.bom-section h3{

font-size:30px;

color:#00ffff;

}



.bom-section p{

max-width:600px;

margin:25px auto;

color:#ccc;

font-size:18px;

}

/* =========================
   JOIN BUTTON PREMIUM
========================= */


.join-button{

display:inline-block;

position:relative;

overflow:hidden;

padding:22px 50px;

margin-top:30px;

border-radius:60px;

background:#000;

color:#fff;

font-size:20px;

font-weight:800;

border:2px solid #00ffff;

box-shadow:

0 0 20px #00ffff,

0 0 70px rgba(0,255,255,.7);


animation:pulse 2s infinite;

}



.join-button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;


background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.8),

transparent

);


transform:skewX(-25deg);

animation:shine 2.5s infinite;

}



.join-button:hover{

transform:scale(1.05);

}




/* =========================
   FOUNDER
========================= */


.founder-new{

background:#030712;

text-align:center;

}



.founder-profile{

margin-bottom:70px;

}



.founder-image{

width:220px;

height:220px;

object-fit:cover;

border-radius:50%;

margin:auto;

border:5px solid #00ffff;

box-shadow:

0 0 50px rgba(0,255,255,.5);


}



.founder-profile h2{

font-size:40px;

margin-top:30px;

}



.founder-profile h3{

font-size:24px;

color:#00ffff;

margin-top:10px;

}



.powered{

color:#aaa;

font-size:18px;

margin-top:10px;

}




/* STORY */


.founder-story{

max-width:800px;

margin:auto;

text-align:center;

}



.founder-story h2{

font-size:38px;

margin-bottom:35px;

}



.founder-story p{

font-size:18px;

line-height:1.9;

color:#ddd;

margin-bottom:25px;

}



.problem-box{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin:40px 0;

}



.problem-box div{

background:

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

padding:25px;

border-radius:20px;

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

font-weight:700;

font-size:17px;


}





/* =========================
   COMMUNITY
========================= */


.community-new{

background:

linear-gradient(

180deg,

#071b35,

#020617

);

text-align:center;

}



.community-new h2{

font-size:45px;

}



.community-new>p{

color:#ccc;

font-size:18px;

margin-bottom:50px;

}



.community-image{

max-width:900px;

width:100%;

margin:auto;

border-radius:25px;

box-shadow:

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

}




.stats-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}



.stat-card{

padding:35px;

border-radius:25px;

background:

rgba(255,255,255,.07);

backdrop-filter:blur(20px);

}



.stat-card h3{

font-size:55px;

color:#00ffff;

text-shadow:

0 0 25px cyan;

}



.stat-card p{

color:white;

font-size:18px;

}



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


.final-cta{

text-align:center;

background:

radial-gradient(

circle,

#123,

#020617

);

}



.final-cta h2{

font-size:45px;

}



.cta-bom-logo{

width:100%;

margin:40px auto 20px;

filter:

drop-shadow(

0 0 30px cyan

);

}



.final-cta h1{

font-size:80px;

}



.final-cta p{

font-size:28px;

color:#00ffff;

}





/* =========================
   BOTTOM NAV
========================= */


.bottom-nav{

position:fixed;

bottom:20px;

left:50%;

transform:translateX(-50%);

width:95%;

max-width:520px;


display:flex;

justify-content:space-around;


padding:15px;


background:

rgba(2,6,23,.9);


backdrop-filter:blur(20px);


border-radius:25px;


border:

1px solid rgba(255,255,255,.1);


z-index:9999;


box-shadow:

0 20px 60px rgba(0,0,0,.6);

}



.bottom-nav a{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:12px;

color:white;

}



.bottom-nav i{

font-size:22px;

color:#00ffff;

}




/* =========================
   ANIMATION
========================= */


@keyframes pulse{


0%{

transform:scale(1);

}


50%{

transform:scale(1.05);

}


100%{

transform:scale(1);

}


}



@keyframes shine{


0%{

left:-120%;

}


100%{

left:150%;

}


}



@keyframes bombFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}



@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}





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


@media(max-width:900px){


.malas-grid{

grid-template-columns:1fr 1fr;

}



.stats-grid{

grid-template-columns:1fr;

}



.hero-ice{

height:40vh;

}



}




@media(max-width:600px){



section{

padding:20px 0;

}



.hero-ice{

min-height:450px;

background-position:center;

}



.masterclass-badge{

font-size:13px;

}



.hero-button,

.join-button{

width:90%;

font-size:16px;

padding:18px;

}



.malas-section h2,

.bom-section h2,

.community-new h2,

.final-cta h2{

font-size:30px;

}



.malas-grid{

grid-template-columns:1fr;

}



.malas-card h3{

font-size:38px;

}



.bom-logo{

width:220px;

}



.bom-section h1,

.final-cta h1{

font-size:55px;

}



.bom-section h3{

font-size:22px;

}



.founder-profile h2{

font-size:30px;

}



.founder-image{

width:160px;

height:160px;

}



.problem-box{

grid-template-columns:1fr;

}



.problem-box div{

font-size:15px;

}



.final-cta p{

font-size:22px;

}



.bottom-nav{

bottom:10px;

}



}


.hidden{
opacity:0;
transform:translateY(50px);
transition:.8s;
}


.show{
opacity:1;
transform:translateY(0);
}