:root {
    --bg-base: #ffffff;
    --royal-blue-deep: #001a4d; 
    --royal-blue-light: #4169E1;
    --accent-red: #e60026;
    --premium-yellow: #FFCC00;
    --neon-pink: #ff007f;
    --gold-metallic: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    --text-dark: #111111;
    --shadow-premium: 0 25px 50px rgba(0, 26, 77, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { 
    background: var(--bg-base); 
    color: var(--text-dark); 
    font-family: 'Montserrat', sans-serif; 
    overflow-x: hidden; 
    scroll-behavior: smooth;
}

/* --- LOGO & BACKGROUND --- */
.main-header { position: fixed; top: 20px; width: 100%; text-align: center; z-index: 9500; pointer-events: none; }
.logo-img { height: 60px; width: auto; filter: drop-shadow(0 5px 15px rgba(0, 26, 77, 0.2)); pointer-events: auto; }
#matrix-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.25; pointer-events: none; }

/* --- MAIN CONTAINER --- */
main { position: relative; z-index: 10; width: 100%; min-height: 100vh; }
.container { max-width: 1300px; margin: 0 auto; padding: 100px 20px 200px 20px; }

/* --- PREMIUM CARD SYSTEM (REFINED) --- */
.premium-card { 
    background: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(20px); 
    border-radius: 40px; 
    border: 1px solid rgba(0, 26, 77, 0.05);
    padding: 60px; 
    margin-bottom: 60px; 
    box-shadow: var(--shadow-premium);
    opacity: 0; transform: translateY(40px); transition: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card.visible { opacity: 1; transform: translateY(0); }
h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 6vw, 3.5rem); color: var(--royal-blue-deep); text-align: center; font-weight: 700; margin-bottom: 30px; letter-spacing: -1px; }

/* --- SECTION 1: KINETIC TYPOGRAPHY --- */
.hero-dramatic-wrapper {
    position: relative; width: 100%; height: 500px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; perspective: 1000px;
    background: radial-gradient(circle, rgba(65, 105, 225, 0.03) 0%, transparent 80%);
    border-radius: 40px;
}
.kinetic-sentence { display: none; text-align: center; width: 100%; }
.kinetic-sentence.active { display: block; }
.word {
    display: inline-block; font-family: 'Orbitron', sans-serif; font-size: clamp(1.8rem, 6vw, 3.8rem);
    font-weight: 900; margin: 0 12px; color: var(--royal-blue-deep); opacity: 0;
    transform: translateZ(100px) scale(0.5); filter: blur(10px);
    animation: wordIn 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards, wordOut 0.8s cubic-bezier(0.7, 0, 0.8, 0.3) 3.2s forwards;
}
.word.highlight-red { color: var(--accent-red); text-shadow: 0 0 25px rgba(230, 0, 38, 0.3); }
.word.highlight-blue { color: var(--royal-blue-light); text-shadow: 0 0 25px rgba(65, 105, 225, 0.3); }
@keyframes wordIn { to { opacity: 1; transform: translateZ(0) scale(1); filter: blur(0); } }
@keyframes wordOut { to { opacity: 0; transform: translateZ(200px) scale(1.5); filter: blur(20px); } }

/* --- SECTION 2: BENTO MOSAIC --- */
.exhibition-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 20px; margin-top: 40px; }
.exhibit-item { position: relative; overflow: hidden; border-radius: 25px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.05); background: #fff; transition: 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.exhibit-item.big { grid-column: span 2; grid-row: span 2; }
.exhibit-item.wide { grid-column: span 2; }
.exhibit-item.tall { grid-row: span 2; }
.exhibit-item img { width: 100%; height: 100%; object-fit: cover; transition: 1s ease; }
.exhibit-item:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,26,77,0.15); }
.exhibit-item:hover img { transform: scale(1.1); filter: brightness(0.8); }

/* --- SECTION 3: VERTICAL ALBUM (BUSINESS MODEL) --- */
.vertical-album { display: flex; flex-direction: column; gap: 100px; margin-top: 100px; position: relative; }
/* The connection line between steps */
.vertical-album::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, transparent, var(--royal-blue-light), var(--premium-yellow), transparent); opacity: 0.2; z-index: -1; }
.album-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; opacity: 0; transform: translateY(40px); transition: 1.2s; }
.album-row.visible { opacity: 1; transform: translateY(0); }
.album-row:nth-child(even) { direction: rtl; }
.album-row:nth-child(even) .album-text { direction: ltr; text-align: left; }
.album-img-wrap { border-radius: 30px; overflow: hidden; height: 480px; box-shadow: var(--shadow-premium); border: 8px solid white; outline: 1px solid rgba(0,0,0,0.05); }
.album-img-wrap img { width: 100%; height: 100%; object-fit: cover; animation: slowZoom 20s infinite alternate linear; }
.album-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; color: var(--royal-blue-deep); margin-bottom: 20px; line-height: 1; }
.album-text p { font-size: 1.2rem; line-height: 1.8; color: #444; font-style: italic; font-weight: 300; }

/* --- NAVIGATION HIGHLIGHTS (UNCHANGED AS REQUESTED) --- */
.desktop-nav { position: fixed; bottom: 45px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1400px; height: 95px; z-index: 9000; background: var(--royal-blue-deep); border-radius: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; box-shadow: 0 25px 60px rgba(0,0,0,0.4); }
.cluster { display: flex; justify-content: space-evenly; align-items: center; flex: 1; gap: 10px; }
.m-item { text-decoration: none; color: #fff; text-align: center; transition: 0.3s; display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.m-item i { font-size: 1.3rem; display: block; margin-bottom: 4px; color: var(--premium-yellow); }
.m-item span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; opacity: 0.85; }
.active-nav { background: rgba(255, 255, 255, 0.15); border: 1px solid var(--premium-yellow); border-radius: 15px; padding: 8px 12px; transform: translateY(-5px); }
.active-nav i { color: var(--premium-yellow) !important; filter: drop-shadow(0 0 10px var(--premium-yellow)); }
.active-nav span { color: #fff !important; opacity: 1 !important; font-weight: 900; }

/* Buttons */
.offer-btn { position: relative; padding: 12px 25px !important; border-radius: 15px !important; background: linear-gradient(45deg, #ff00cc, #3333ff, #ff00cc) !important; background-size: 200% auto !important; border: none !important; animation: nebulaShift 3s infinite linear, nebulaPulse 2s infinite alternate !important; box-shadow: 0 0 20px rgba(255, 0, 204, 0.5) !important; }
.prime-btn { position: relative; padding: 12px 35px !important; background: #000 !important; border-radius: 15px !important; border: 2px solid #bf953f !important; overflow: hidden !important; box-shadow: 0 0 20px rgba(191, 149, 63, 0.4) !important; }
.prime-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(255,204,0,0.4), transparent 40%); animation: rotateBeam 4s linear infinite !important; z-index: 1; }
.prime-btn i, .prime-btn span { background: var(--gold-metallic); -webkit-background-clip: text; color: transparent !important; z-index: 2; position: relative; opacity: 1 !important; }

/* --- UI COMPONENTS --- */
.meter-container { position: fixed; bottom: 35px; left: 50%; transform: translateX(-50%); z-index: 9999; }
.speed-hex { width: 140px; height: 140px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 15px 45px rgba(0,0,0,0.3); border: 6px solid #fff; transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.speed-hex.testing-active { transform: scale(1.3) translateY(-20px); border-color: var(--royal-blue-light); }
.s-num { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: var(--royal-blue-deep); }

/* --- MOBILE WINGS --- */
.mob-wing { position: fixed; top: 50%; transform: translateY(-50%); width: 68px; background: rgba(255,255,255,0.98); backdrop-filter: blur(15px); border-radius: 35px; display: none; flex-direction: column; align-items: center; padding: 15px 0; gap: 15px; z-index: 9000; box-shadow: 0 15px 40px rgba(0,0,0,0.2); border: 1px solid #f0f0f0; }
.wing-l { left: 8px; } .wing-r { right: 8px; }
.wing-item { text-decoration: none; color: var(--royal-blue-deep); text-align: center; display: flex; flex-direction: column; align-items: center; transition: 0.3s; }
.wing-item i { font-size: 1.2rem; display: block; margin-bottom: 2px; color: var(--royal-blue-light); }
.wing-item span { font-size: 0.45rem; text-transform: uppercase; font-weight: 800; opacity: 0.9; }

/* --- FOOTER --- */
.footer-bar { position: fixed; bottom: 0; width: 100%; height: 40px; background: var(--premium-yellow); display: flex; justify-content: center; align-items: center; gap: 40px; z-index: 8000; }
.footer-bar a { color: #000; text-decoration: none; font-size: 0.65rem; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }

/* Keyframes */
@keyframes nebulaShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes rotateBeam { 100% { transform: rotate(360deg); } }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.15); } }

@media (max-width: 1000px) { .desktop-nav { display: none; } .mob-wing { display: flex; } .container { padding: 100px 90px 180px 90px; } }