/* ================= GOOGLE FONT ================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:#f6f1e8;
    overflow-x:hidden;
    background:
    radial-gradient(circle at top left, rgba(255,166,77,.25), transparent 25%),
    radial-gradient(circle at top right, rgba(255,120,0,.18), transparent 20%),
    linear-gradient(180deg,#142314 0%,#1b2d17 30%,#25361c 55%,#2f411e 100%);
    position:relative;
}

/* ================= BACKGROUND EFFECT ================= */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.05),transparent 20%),
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.04),transparent 18%),
    radial-gradient(circle at 50% 80%,rgba(255,255,255,.03),transparent 20%);
    pointer-events:none;
    z-index:-1;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    background-image:
    radial-gradient(circle,rgba(0,0,0,.08) 2px,transparent 2px);
    background-size:90px 90px;
    opacity:.18;
    pointer-events:none;
    z-index:-1;
}

img{
    width:100%;
    display:block;
    height:auto;
}

/* ================= ANIMATION ================= */
@keyframes floaty{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

@keyframes shine{
    0%{left:-120%;}
    100%{left:140%;}
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ================= WRAPPER ================= */
.wrapper{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 20px 60px;
}

/* ================= HEADER ================= */
header{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:26px 20px;
    display:flex;
    justify-content:center;
}

/* ================= SOCIAL ================= */
.social-center{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.social-center a{
    width:56px;
    height:56px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    box-shadow:0 10px 20px rgba(0,0,0,.25);
    position:relative;
    overflow:hidden;
}

.social-center a::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:50%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-25deg);
}

.social-center a:hover::before{
    animation:shine .8s ease;
}

.social-center a:hover{
    transform:translateY(-6px);
    background:#ff8a1f;
}

.social-center img{
    width:26px;
    height:26px;
    object-fit:contain;
}

/* ================= HERO ================= */
.hero{
    text-align:center;
    padding:30px 20px 55px;
}

.hero h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(48px,10vw,120px);
    letter-spacing:3px;
    color:#fff7ea;
    text-shadow:
    0 4px 0 rgba(255,153,51,.35),
    0 20px 30px rgba(0,0,0,.45);
    animation:floaty 4s ease-in-out infinite;
}

/* ================= NFT ROW ================= */
.characters{
    display:grid;
    grid-template-columns:repeat(9,1fr);
    border-radius:28px 28px 0 0;
    overflow:hidden;
    box-shadow:0 25px 45px rgba(0,0,0,.35);
}

.character{
    overflow:hidden;
    background:#223018;
    position:relative;
}

.character::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.35),transparent);
}

.character img{
    height:165px;
    object-fit:cover;
    transition:.45s;
}

.character:hover img{
    transform:scale(1.08);
}

/* ================= GRID ================= */
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:0 0 28px 28px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
}

/* ================= BOX ================= */
.box{
    min-height:460px;
    padding:55px;
    border-top:1px solid rgba(255,255,255,.06);
    border-right:1px solid rgba(255,255,255,.06);
    animation:fadeUp .8s ease;
    transition:.35s;
}

.box:hover{
    background:rgba(255,255,255,.08);
}

.box:nth-child(2n){
    border-right:none;
}

/* ================= POSISI BOX ================= */
.gif-box{
    order:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.about-box{
    order:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.roadmap-image-box{order:3;}
.why{order:4;}

/* ================= TEXT ================= */
.box h2{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(38px,6vw,66px);
    margin-bottom:20px;
    color:#ffb45b;
    letter-spacing:1px;
}

.box p,
.why li{
    font-size:18px;
    line-height:1.8;
    font-weight:500;
    margin-bottom:14px;
}

.box span{
    color:#ffb45b;
    font-weight:900;
}

.why ul{
    list-style:none;
}

/* ================= BUTTON ================= */
.join-btn{
    margin-top:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    background:linear-gradient(135deg,#ff8a1f,#ffb347);
    color:#1a1208;
    text-decoration:none;
    border-radius:999px;
    font-size:14px;
    font-weight:900;
    transition:.35s;
    box-shadow:0 15px 28px rgba(0,0,0,.25);
    position:relative;
    overflow:hidden;
}

.join-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:50%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-25deg);
}

.join-btn:hover::before{
    animation:shine .8s ease;
}

.join-btn:hover{
    transform:translateY(-5px) scale(1.03);
}

/* ================= FRAME ================= */
.frame{
    width:100%;
    max-width:390px;
    margin:auto;
    padding:14px;
    background:rgba(255,255,255,.08);
    border-radius:26px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 30px rgba(0,0,0,.25);
    transition:.35s;
}

.frame:hover{
    transform:scale(1.03);
}

.frame img{
    border-radius:20px;
}

/* ================= ROADMAP ================= */
.roadmap{
    position:relative;
    margin-top:20px;
    padding-left:80px;
}

.roadmap::before{
    content:"";
    position:absolute;
    left:28px;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,#ffb45b,#ff7a00);
    border-radius:20px;
}

.road-step{
    position:relative;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:24px;
    margin-bottom:22px;
    box-shadow:0 14px 24px rgba(0,0,0,.22);
    transition:.35s;
}

.road-step:hover{
    transform:translateX(8px);
    background:rgba(255,255,255,.11);
}

.road-step::before{
    content:attr(data-step);
    position:absolute;
    left:-60px;
    top:26px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#ff9d2d;
    color:#1b1208;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

.road-step::after{
    content:"";
    position:absolute;
    left:-22px;
    top:44px;
    width:22px;
    height:3px;
    background:#ff9d2d;
}

/* ================= NECKLACE ================= */
.necklace-showcase{
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.necklace-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:18px;
    text-align:center;
    transition:.35s;
    box-shadow:0 12px 22px rgba(0,0,0,.22);
}

.necklace-card:hover{
    transform:translateY(-8px) scale(1.03);
}

.necklace-card img{
    max-width:130px;
    margin:auto;
    transition:.35s;
}

.necklace-card:hover img{
    transform:scale(1.08) rotate(-2deg);
}

.necklace-card h3{
    margin-top:14px;
    font-size:20px;
    color:#ffb45b;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1100px){
.characters{grid-template-columns:repeat(5,1fr);}
.character img{height:145px;}
.box{padding:42px;}
}

@media(max-width:820px){
.grid{grid-template-columns:1fr;}
.characters{grid-template-columns:repeat(3,1fr);}
.character img{height:125px;}
.box{padding:30px 22px;border-right:none;}
.join-btn{width:100%;}
}

@media(max-width:520px){

.wrapper{padding:0 12px 35px;}
.hero h1{font-size:46px;}
.characters{grid-template-columns:repeat(2,1fr);}
.character img{height:110px;}
.box{padding:22px 15px;}
.box h2{font-size:38px;}
.box p,.why li{font-size:15px;}

.roadmap{padding-left:44px;}
.roadmap::before{left:14px;}

.road-step{
padding:16px;
border-radius:18px;
}

.road-step::before{
left:-28px;
width:16px;
height:16px;
font-size:0;
}

.road-step::after{
left:-14px;
width:14px;
}

.road-step h3{font-size:20px;}
.road-step p{font-size:14px;}

.necklace-showcase{
grid-template-columns:1fr;
gap:14px;
}

}