@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

:root {
    --pink: #e1306c;
    --black: #0a0a0a;
    --soft-white: #fafafa;
    --glass: rgba(255, 255, 255, 0.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }

body { 
    background-color: var(--soft-white);
    background-image: 
        radial-gradient(at 0% 0%, rgba(225, 48, 108, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 212, 255, 0.08) 0px, transparent 50%);
    color: var(--black);
    overflow-x: hidden;
}

/* --- 1. LIVE STATUS TICKER --- */
.top-status-bar {
    background: var(--black); color: white; padding: 8px 0;
    font-size: 0.6rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 2px; overflow: hidden; position: sticky; top: 0; z-index: 2000;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.ticker-content { display: flex; gap: 50px; white-space: nowrap; width: max-content; animation: statusLoop 25s linear infinite; }
@keyframes statusLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pulse { animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- NAVIGATION --- */
.floating-nav {
    position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(15px);
    padding: 14px 25px; border-radius: 50px;
    display: flex; gap: 20px; z-index: 1000; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}
.floating-nav a { color: white; text-decoration: none; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }

/* --- HERO --- */
.hero { height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; }
.hero h1 { font-size: 20vw; line-height: 0.8; font-weight: 900; letter-spacing: -4px; }
.hollow { color: transparent; -webkit-text-stroke: 1px var(--black); }
.section-label { color: var(--pink); font-weight: 800; text-transform: uppercase; letter-spacing: 3px; font-size: 0.7rem; display: block; margin-bottom: 10px; }

/* --- MARQUEE (10 BRANDS) --- */
.brand-marquee { background: var(--black); padding: 25px 0; overflow: hidden; display: flex; transform: rotate(-1deg); width: 110%; margin-left: -5%; }
.marquee-track { display: flex; gap: 80px; animation: scroll 25s linear infinite; }
.brand { color: white; font-weight: 900; font-size: 1.2rem; white-space: nowrap; opacity: 0.5; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* About Section Grid Layout */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    margin-top: 40px;
}

.about-sub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}

/* Tablet & Desktop Scaling */
@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
    }
    .about-main h2 { font-size: 5rem; }
}

/* --- STATS COUNTER --- */
.stats-bar { padding: 40px 8%; background: white; border-y: 1px solid #eee; display: flex; align-items: center; gap: 20px; }
.stat-number { font-size: 3.5rem; font-weight: 900; color: var(--black); }
.stat-text { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: #888; line-height: 1.2; }

/* --- TALENT SECTION --- */
.talent-section { padding: 80px 0; background: var(--black); color: white; border-radius: 40px 40px 0 0; overflow: hidden; }
.talent-header { padding: 0 8% 40px 8%; display: flex; justify-content: space-between; align-items: flex-end; }
.talent-track { display: flex; gap: 20px; padding-left: 8%; animation: talentScroll 40s linear infinite; width: max-content; }
.talent-card { width: 240px; height: 340px; background: #151515; border-radius: 20px; position: relative; overflow: hidden; flex-shrink: 0; }
.talent-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.talent-info { position: absolute; bottom: 20px; left: 20px; }
.view-all-btn { 
    display: block; margin: 50px 8% 0 8%; padding: 20px; background: transparent; 
    border: 2px solid var(--pink); color: var(--pink); text-align: center; 
    text-decoration: none; border-radius: 15px; font-weight: 900; font-size: 1rem;
}
@keyframes talentScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- EXPERTISE --- */
.section { padding: 80px 8%; }
.bento { background: white; border: 1px solid #eee; padding: 40px 30px; border-radius: 30px; margin-bottom: 20px; }
.bento h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; color: var(--pink); }

/* --- PARTNER BRANDS (Logo Animation) --- */
.brands-section { padding: 60px 0; background: #f9f9f9; text-align: center; }
.brand-slider { overflow: hidden; white-space: nowrap; padding: 20px 0; position: relative; }
.brand-slide-track { display: inline-flex; animation: brandScroll 25s linear infinite; }
.brand-logo-item { font-size: 1.5rem; font-weight: 900; margin: 0 40px; color: #ccc; text-transform: uppercase; }
@keyframes brandScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* --- GLOBAL STATUS TICKER --- */
.status-ticker {
    background: var(--black); color: white; padding: 8px 0;
    font-size: 0.65rem; font-weight: 900; overflow: hidden;
}
.ticker-text {
    white-space: nowrap; animation: ticker 30s linear infinite;
}
@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* --- CONTACT --- */
.contact-form { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; }
.contact-form input { width: 100%; padding: 18px; background: #eee; border: none; border-radius: 15px; font-weight: 600; }
.submit-btn { background: var(--black); color: white; padding: 20px; border-radius: 15px; border: none; font-weight: 900; }
footer { padding: 100px 8% 150px 8%; border-top: 1px solid #eee; }
.footer-flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; }
.location h3 { font-size: 2rem; margin-bottom: 10px; }
.rights { margin-top: 50px; font-size: 0.8rem; color: #888; border-top: 1px solid #eee; padding-top: 30px; display: flex; justify-content: space-between; }

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(20px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }