/* ================= style.css ================= */

/* RESET */

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

/* FONT */

@font-face{

    font-family:estedad;

    src:url("../fonts/Estedad-Bold.woff2");

}

:root{

    --gold:#D4AF37;

    --dark:#050816;

    --text:#ffffff;

}

/* BODY */

html,
body{

    min-height:100%;
    overflow-x: hidden;

}

body{

    font-family:estedad;
    background:#000;
    color:#fff;
    overflow-x:hidden;
    padding-top: 80px;

}

/* APP */

.app-wrapper{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    position:relative;

    z-index:2;

}

/* ================= COSMIC BG ================= */

.cosmic-bg{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

    background:

    radial-gradient(circle at top left,
    rgba(99,102,241,.22),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(212,175,55,.16),
    transparent 35%),

    radial-gradient(circle at center,
    #050816 0%,
    #000 100%);

}

/* stars */

.cosmic-bg::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(2px 2px at 20% 30%,
    rgba(255,255,255,.9),
    transparent),

    radial-gradient(1px 1px at 70% 60%,
    rgba(255,215,0,.9),
    transparent),

    radial-gradient(2px 2px at 40% 80%,
    rgba(255,255,255,.7),
    transparent),

    radial-gradient(1px 1px at 85% 20%,
    rgba(255,215,0,.9),
    transparent),

    radial-gradient(2px 2px at 10% 70%,
    rgba(255,255,255,.8),
    transparent),

    radial-gradient(1px 1px at 50% 50%,
    rgba(212,175,55,.8),
    transparent);

    background-size:
    250px 250px,
    300px 300px,
    400px 400px,
    500px 500px,
    350px 350px,
    450px 450px;

    animation:
    starsMove 120s linear infinite,
    twinkle 8s ease-in-out infinite;

}

/* nebula */

.cosmic-bg::after{

    content:"";

    position:absolute;

    width:70vw;
    height:70vw;

    top:-20%;
    left:-10%;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.18),
    rgba(138,43,226,.10),
    rgba(59,130,246,.08),
    transparent 70%);

    filter:blur(100px);

    animation:
    nebulaMove 20s ease-in-out infinite alternate;

}

@keyframes starsMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-300px);
    }

}

@keyframes twinkle{

    0%,100%{
        opacity:.7;
    }

    50%{
        opacity:1;
    }

}

@keyframes nebulaMove{

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

    100%{
        transform:
        translate(120px,60px)
        scale(1.25);
    }

}

/* ================= NAVBAR ================= */

.custom-nav{

    background:
    linear-gradient(to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.25));

    backdrop-filter:blur(18px);

    border-bottom: 1px solid rgba(243, 191, 69, 0.3);

    padding:0.5rem 2rem;

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

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

}

/* TOGGLER */

.navbar-toggler-custom{

    width:48px;
    height:48px;

    border:none;

    border-radius:14px;

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

    color:#fff;

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

    font-size:1.8rem;

    transition:.4s;

}

.navbar-toggler-custom:hover{

    transform:
    rotate(90deg)
    scale(1.05);

    background:
    rgba(212,175,55,.15);

    box-shadow:
    0 0 25px rgba(212,175,55,.25);

}

/* LOGO */

.navbar-logo{

    color:var(--gold)!important;

    font-size:2rem;

    font-weight:900;

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

}

.navbar-logo span{

    color:#fff;

}

/* DESKTOP MENU */

.desktop-menu{

    gap:14px;

}

.nav-link-custom{

    position:relative;

    overflow:hidden;

    padding:.9rem 1.2rem;

    border-radius:16px;

    color:rgba(255,255,255,.82);

    text-decoration:none;

    transition:
    .4s cubic-bezier(.175,.885,.32,1.275);

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

    z-index:1;

}

.nav-link-custom::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(135deg,
    rgba(212,175,55,.18),
    rgba(255,255,255,.04));

    opacity:0;

    transition:.4s;

    border-radius:16px;

    z-index:-1;

}

.nav-link-custom::after{

    content:"";

    position:absolute;

    right:50%;
    bottom:0;

    width:0;
    height:2px;

    background:
    linear-gradient(to left,
    #D4AF37,
    #fff);

    transition:.45s ease;

    transform:translateX(50%);

}

.nav-link-custom:hover{

    color:#fff;

    transform:
    translateY(-4px)
    scale(1.03);

    box-shadow:
    0 10px 30px rgba(212,175,55,.12);

}

.nav-link-custom:hover::before,
.nav-link-custom.active::before{

    opacity:1;

}

.nav-link-custom:hover::after,
.nav-link-custom.active::after{

    width:70%;

}

.nav-link-custom i{

    transition:.4s;

}

.nav-link-custom:hover i{

    transform:
    rotate(-10deg)
    scale(1.2);

    color:#D4AF37;

}

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

.mobile-menu{

    width:300px!important;

    background:
    rgba(5,8,22,.96);

    backdrop-filter:blur(18px);

    color:#fff;

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

}

.mobile-menu .offcanvas-header{

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

}

.mobile-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.mobile-link{

    color:#fff;

    text-decoration:none;

    padding:15px;

    border-radius:18px;

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

    transition:.35s;

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

}

.mobile-link:hover{

    background:
    rgba(212,175,55,.14);

    color:#D4AF37;

    transform:
    translateX(-6px);

}

/* ================= MAIN ================= */

.main-content{

    flex:1 0 auto;

    display:flex;

    align-items:center;

    padding:2rem;

}

/* TEXT */

.typed-subtitle{

    min-height:100px;

    line-height:2;

    font-size:1.2rem;

}

.gold-text{

    color:var(--gold);

}

.typed-cursor{

    color:var(--gold);

}

/* TITLE */

.h-title{

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

    line-height:1.4;

    margin-top:1rem;

    font-weight:800;

}

.h-title strong{

    color:var(--gold);

}

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

.hero-image-wrapper{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

.hero-image-wrapper::before{

    content:"";

    position:absolute;

    width:120%;
    height:120%;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.35),
    transparent 70%);

    filter:blur(45px);

    animation:
    pulseGlow 4s ease-in-out infinite;

    z-index:-1;

}

.hero-image-wrapper::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:40px;

    padding:2px;

    background:
    linear-gradient(
    45deg,
    rgba(212,175,55,.8),
    rgba(255,255,255,.1),
    rgba(138,43,226,.5),
    rgba(212,175,55,.8));

    background-size:300% 300%;

    animation:
    borderRotate 8s linear infinite;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.hero-img{

    width:100%;
    max-width:520px;

    border-radius:35px;

    position:relative;

    z-index:2;

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

    transition:.5s;

    box-shadow:
    0 0 60px rgba(212,175,55,.18),
    0 25px 60px rgba(0,0,0,.6);

}

.hero-img:hover{

    transform:
    scale(1.03)
    rotate(-1deg);

}

@keyframes floatingImage{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes pulseGlow{

    0%,100%{
        opacity:.5;
        transform:scale(1);
    }

    50%{
        opacity:1;
        transform:scale(1.08);
    }

}

@keyframes borderRotate{

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

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

}

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

.footer-copyright{

    text-align:center;

    padding:1rem;

    background:
    rgba(0,0,0,.45);

    backdrop-filter:blur(10px);

    border-top:
    1px solid rgba(243, 191, 69, 0.3);

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

    font-size:.85rem;

}

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

@media(max-width:991px){

    .main-content{

        padding:2rem 1rem;

        text-align:center;

    }

}

@media(min-width:992px){

    .navbar-toggler-custom{

        display:none;

    }

}

/* ================= ACTIVE MOBILE FIX ================= */

.mobile-link.active{
    background: rgba(212,175,55,.18);
    color:#D4AF37 !important;
    border-right:3px solid #D4AF37;
    transform: translateX(-6px);
    box-shadow: 0 8px 25px rgba(212,175,55,.15);
}

.mobile-link.active i{
    color:#D4AF37;
}

/* glow effect */
.mobile-link.active::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(212,175,55,.08);
    border-radius:18px;
}

/* ================= PILL QUICK LINKS ================= */

.quick-links{
    display:flex;
    gap:12px;
    margin-top:14px;
    flex-wrap:wrap;
}

/* pill base */
.quick-link.pill{
    position:relative;
    overflow:hidden;

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

    padding:8px 16px;

    border-radius:999px;

    font-size:0.85rem;

    color:rgba(255,255,255,.78);

    text-decoration:none;

    background:
    linear-gradient(145deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02));

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

    backdrop-filter:blur(10px);

    transition:.35s ease;

    z-index:1;
}

/* gold glow border */
.quick-link.pill::before{
    content:"";
    position:absolute;
    inset:-2px;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(212,175,55,.7),
    transparent
    );

    transform:translateX(-120%);
    animation: goldFlow 3.5s linear infinite;

    z-index:-1;
    filter:blur(6px);
    opacity:.6;
}

/* inner shine */
.quick-link.pill::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 30% 20%,
    rgba(212,175,55,.18),
    transparent 60%);

    opacity:0;
    transition:.4s;

    z-index:-1;
}

/* hover */
.quick-link.pill:hover{
    transform:translateY(-3px) scale(1.05);

    color:#D4AF37;

    border-color:rgba(212,175,55,.5);

    box-shadow:
    0 10px 25px rgba(212,175,55,.15);
}

.quick-link.pill:hover::after{
    opacity:1;
}

/* icon */
.quick-link.pill i{
    font-size:1.1rem;
    transition:.3s;
}

.quick-link.pill:hover i{
    transform:rotate(-10deg) scale(1.2);
    color:#D4AF37;
}

/* ANIMATION FLOW */
@keyframes goldFlow{
    0%{
        transform:translateX(-120%);
    }
    100%{
        transform:translateX(120%);
    }
}

/* MOBILE OPTIMIZE */
@media(max-width:768px){

    .quick-links{
        justify-content:center;
        gap:8px;
    }

    .quick-link.pill{
        font-size:0.75rem;
        padding:6px 12px;
    }
}