:root {
    --primary: #c9a050; /* Gold/Bronze accent */
    --dark: #0a0a0a;
    --light: #f4f4f4;
    --transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
.fw-black { font-weight: 900; }
.py-10 { padding: 120px 0; }

/* Navbar */
#navbar { padding: 30px 0; background: transparent; transition: var(--transition); }
#navbar.scrolled { padding: 15px 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.navbar-brand span { color: var(--primary); }

/* Hero Section */
.hero-section { height: 100vh; min-height: 800px; }
.parallax-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transform: scale(1.1); z-index: -1;
}
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), transparent); z-index: 0; }

.floating-text {
    position: absolute; bottom: 50px; right: -50px;
    font-size: 15vw; font-weight: 900; color: rgba(255,255,255,0.03);
    pointer-events: none; z-index: 1; text-transform: uppercase;
}

/* About Image Composition */
.about-img-frame { position: relative; width: 80%; }
.main-img { border-radius: 20px; filter: grayscale(1); transition: 0.8s; }
.main-img:hover { filter: grayscale(0); }
.sub-img {
    position: absolute; bottom: -50px; right: -80px;
    width: 60%; border: 10px solid white; border-radius: 10px;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 20px;
}
.bento-item {
    background-size: cover; background-position: center;
    border-radius: 24px; position: relative;
    overflow: hidden; transition: var(--transition);
}
.bento-item:hover { transform: translateY(-10px) scale(1.02); }
.bento-item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.bento-content { position: relative; z-index: 2; padding: 30px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: white; }

.item-large { grid-column: span 2; }
.item-tall { grid-row: span 2; }
.item-square { grid-column: span 1; }

/* Portfolio Cards */
.project-card img { transition: 0.8s; width: 100%; height: 450px; object-fit: cover; }
.project-info {
    position: absolute; bottom: -100px; left: 0; width: 100%;
    padding: 30px; background: white; transition: var(--transition);
}
.project-card:hover .project-info { bottom: 0; }
.project-card:hover img { transform: scale(1.1); }

/* Glass Form */
.glass-form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.form-control { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.2); border-radius: 0; color: white; padding: 15px 0; }
.form-control:focus { background: transparent; border-color: var(--primary); box-shadow: none; color: white; }

/* Loader */
#preloader { position: fixed; inset: 0; background: var(--dark); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.loader-line { width: 100px; height: 1px; background: rgba(255,255,255,0.1); position: relative; }
.loader-line::after { content: ''; position: absolute; width: 0; height: 100%; background: var(--primary); animation: load 2s infinite; }
@keyframes load { 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } }

@media (max-width: 991px) {
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .item-large, .item-tall, .item-square { grid-column: span 1; grid-row: span 1; height: 300px; }
    .display-1 { font-size: 3.5rem; }
}

@media (max-width:768px){
    #herobutton{
        flex-direction: column;
    }
}