/* =================================================================================
   1. GLOBAL STYLES & TYPOGRAPHY
   ================================================================================= */
:root {
    --navy: #0f172a; 
    --blue: #5465ff;
    --light-bg: #f8f9fa;
    --text-dark: #2d3748;
    --text-light: #718096;
    --white: #ffffff;
    --border: #e2e8f0;
    --civ-red: #dc2626;
    --civ-blue: #1d4ed8;
    --fin-green: #10b981;
    --fin-red: #ef4444;
}

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

html, body {
    width: 100%;
    overflow-x: hidden !important; /* Forces the browser to ignore overflowing polaroids */
    position: relative;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    scroll-behavior: auto !important; 
    -ms-overflow-style: none; scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

#main-view { 
    width: 100%;
    overflow-x: hidden; /* Added secondary safeguard */
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; 
}

/* =================================================================================
   2. UI COMPONENTS (Buttons, Cards, Navbar)
   ================================================================================= */
nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background-color: var(--blue); color: var(--white); position: relative; z-index: 100; }
nav .nav-links { display: flex; gap: 2rem; align-items: center; }
nav a { color: var(--white); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; transition: opacity 0.2s; }
nav a:hover { opacity: 0.8; }
.btn-app { background-color: var(--navy); padding: 0.5rem 1rem; border-radius: 4px; font-weight: 600; border: 1px solid transparent; transition: all 0.2s; cursor: pointer;}
.btn-app:hover { background-color: transparent; border-color: var(--white); color: var(--white);}

.btn-outline { background: transparent; border: 1px solid var(--white); color: var(--white); padding: 0.75rem 1.5rem; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; cursor: pointer; }
.btn-outline:hover { background: var(--white); color: var(--blue); }

.btn-back-to-top { background: var(--blue); color: white; border: none; padding: 10px 20px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.btn-back-to-top:hover { background: var(--navy); }

/* Universal Media Viewer Framework */
.media-viewer-container {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; background: #f8fafc; margin: 20px 0;
    display: flex; flex-direction: column; align-items: center;
}
.media-viewer-container iframe { width: 100%; height: 65vh; border: none; }
.media-viewer-container img { max-width: 100%; height: auto; display: block; }

.media-action-bar {
    width: 100%; padding: 12px 20px; background: var(--light-bg);
    border-top: 1px solid var(--border); display: flex;
    justify-content: space-between; align-items: center;
}
.media-action-text { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text-light); }

.highlight-premium {
    --seamless-grad: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    display: inline-flex; align-items: center; text-decoration: none;
    font-weight: 700; transition: transform 0.2s ease;
    background-image: var(--seamless-grad); background-size: 250% 100%; 
    background-position: left center; 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent;
}
.highlight-premium::after {
    content: 'TOP PICK'; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;
    margin-left: 12px; padding: 4px 10px; border-radius: 12px;
    background-image: var(--seamless-grad); background-size: 250% 100%;
    background-position: right center; -webkit-text-fill-color: #ffffff; 
    -webkit-background-clip: border-box; 
    background-clip: border-box; 
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.highlight-premium:hover { transform: translateX(5px); }
.highlight-premium:hover::after { transform: scale(1.05); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4); }

/* Portfolio Cards */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 250px; z-index: 10;}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: var(--blue); }
.card-icon { font-size: 2.5rem; color: var(--blue); margin-bottom: 1rem; }
.card h3 { font-size: 1.25rem; color: var(--navy); margin-bottom: 0.5rem; }
.card p { font-size: 0.85rem; color: var(--text-light); }

/* Student Hub Menu */
.hub-container { position: relative; display: inline-block; }
.hub-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.hub-menu { position: absolute; top: 130%; right: 0; width: 320px; background: var(--white); border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.3); border: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; overflow: hidden; }
.hub-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
.hub-item { display: flex; align-items: center; gap: 15px; padding: 16px 20px; text-decoration: none; border-bottom: 1px solid #edf2f7; transition: background 0.2s; }
.hub-item:last-child { border-bottom: none; }
.hub-item:hover { background: var(--light-bg); }
.hub-icon { font-size: 24px; background: var(--light-bg); padding: 10px; border-radius: 8px; }
.hub-text { display: flex; flex-direction: column; text-align: left; }
.hub-text strong { font-size: 14px; color: var(--navy); margin-bottom: 2px; }
.hub-text span { font-size: 11px; color: var(--text-light); line-height: 1.3; }


/* =================================================================================
   3. SECTIONS & LAYOUT (Hero, Grids, Timeline)
   ================================================================================= */
#main-view { transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
#main-view.shrink-main { transform: scale(0.98); opacity: 0.5; filter: blur(3px); }

.hero { display: flex; min-height: 70vh; }
.hero-left {
    flex: 6.5;
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url('assets/hero-bg.jpg') center/cover no-repeat;
    background-color: var(--navy); color: var(--white); padding: 0% 1%;
    display: flex; flex-direction: column; justify-content: center;
}
.profile-img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5rem; border: 3px solid rgba(255, 255, 255, 0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.hero-left .welcome-text { font-family: 'Parisienne', cursive; font-size: 6.5rem; letter-spacing: .85px; color: #a0aec0; margin-bottom: 7rem; }
.hero-left h1 { font-size: 5.5rem; line-height: 1.1; margin-bottom: .75rem; margin-left: 15rem; font-weight: 700; }
.hero-left .subtitle { font-size: 1.96rem; font-style: italic; margin-left: 15rem; color: #cbd5e0; font-family: 'Playfair Display', serif; }
.hero-right { flex: 3.5; background-color: var(--blue); color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0.1%; }
.hero-right h2 { font-size: 2rem; margin-bottom: 1rem; }
.hero-right p { font-size: 0.95rem; margin-bottom: 2rem; opacity: 0.9; }

.section-container { padding: 5rem 10%; max-width: 1400px; margin: 0 auto; }
.section-header { margin-bottom: 3rem; }
.section-header h2 { font-size: 2.5rem; color: var(--navy); margin-bottom: 0.5rem; }
.section-header .subheading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-light); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.timeline-item { margin-bottom: 2rem; }
.timeline-date { font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 0.25rem; }
.timeline-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; }
.timeline-desc { font-size: 0.9rem; color: var(--text-light); }

footer { background-color: #f1f3f5; padding: 4rem 10%; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); }
.footer-left h2 { font-size: 2rem; color: var(--navy); }
.footer-right { text-align: right; }
.footer-right p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1rem; }

/* Update Font Imports at the top of styles.css */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

/* Margin Gallery (Teleportation Bug Fixed & Modular Sizing Added) */
.margin-gallery { 
    width: calc(50vw - 600px); 
    position: absolute; 
    top: 0; 
    bottom: 0; /* Changed from height:100% to strict bounds to prevent modal teleporting */
    z-index: 0; 
    pointer-events: none; 
    display: none; 
}
.margin-gallery.left { left: 0; }
.margin-gallery.right { right: 0; }

@media (min-width: 1024px) { 
    .margin-gallery { display: block; } 
}

/* Responsive Modular Sizing for Laptops (<1440px) */
@media (max-width: 1440px) {
    .margin-gallery { width: 120px; }
    .margin-gallery.left { left: -20px; }
    .margin-gallery.right { right: -20px; }
    .polaroid { transform: scale(0.65); transform-origin: top center; }
}

/* Captioned Polaroids */
.prlx-wrap { position: absolute; }
.polaroid { 
    background: white; 
    padding: 10px 10px 15px 10px; /* Reduced bottom padding to fit caption */
    border: 1px solid #e2e8f0; 
    border-radius: 2px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15); 
    animation: passive-float var(--dur, 6s) ease-in-out infinite; 
    animation-delay: var(--del, 0s);
    display: flex; flex-direction: column; align-items: center;
}
.polaroid img { width: 100%; height: auto; object-fit: cover; }
.polaroid .caption {
    font-family: 'Caveat', cursive; /* Cute handwritten font */
    font-size: 1.4rem;
    color: #334155;
    margin-top: 10px;
    text-align: center;
    line-height: 1.1;
}

.polaroid.far { width: 140px; filter: blur(4px); opacity: 0.4; }
.polaroid.mid { width: 190px; filter: blur(1.5px); opacity: 0.75; }
.polaroid.close { width: 280px; filter: blur(0); opacity: 1; box-shadow: 0 30px 60px rgba(0,0,0,0.25); }

/* =================================================================================
   4. MODAL & DOCUMENT VIEWER
   ================================================================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 10000; /* CRITICAL FIX: Elevates modal above the 9998 animation layer */
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-overlay.anim-book-v1, 
.modal-overlay.anim-airplane-v1, 
.modal-overlay.anim-clock-v1, 
.modal-overlay.anim-doors-reversed {
    background: transparent;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    background: var(--white); width: 90%; max-width: 900px; max-height: 85vh;
    border-radius: 12px; overflow-y: auto; padding: 3rem; position: relative;
    transform: translateY(20px); transition: transform 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.close-modal {
    position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none;
    font-size: 1.5rem; cursor: pointer; color: var(--text-light); transition: color 0.2s;
}
/* Universal smooth fade-out strictly for the DEFAULT modal */
.modal-overlay.closing:not([class*="anim-"]) .modal-content {
    transform: translateY(0) !important;
    opacity: 0 !important;
    /* Kept at 0.4s so the UI doesn't freeze invisibly for 5 seconds */
    transition: opacity 0.4s ease !important; 
}

.close-modal:hover { color: var(--civ-red); }

.document-body { font-family: 'Playfair Display', serif; font-size: 1.1rem; line-height: 1.8; color: #333; }
.document-body h3 { font-family: 'Inter', sans-serif; font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--navy); border-bottom: 2px solid var(--blue); padding-bottom: 0.5rem; display: inline-block; }
.document-body h4 { font-family: 'Inter', sans-serif; font-size: 1.2rem; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--navy); }

/* Universal smooth fade-out strictly for the DEFAULT modal */
.modal-overlay.closing:not([class*="anim-"]) .modal-content {
    transform: translateY(0) !important;
    opacity: 0 !important;
    /* Kept at 0.4s so the UI doesn't freeze invisibly for 5 seconds */
    transition: opacity 0.4s ease !important; 
}

/* =================================================================================
   6. MODAL TRANSITIONS (Book, Drawer, Clock, etc.)
   ================================================================================= */
#anim-elements-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9998; pointer-events: none; overflow: hidden; display: none;
    perspective: 2000px;
}
#anim-elements-container.active { display: block; }

/* 1. Targeted Bubble */
.bubble-bg { position: absolute; top: var(--oy); left: var(--ox); width: 20px; height: 20px; background: var(--blue); border-radius: 50%; transform: translate(-50%, -50%) scale(0); z-index: 40; transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1); }
#anim-elements-container.anim-bubble-v1.active .bubble-bg { transform: translate(-50%, -50%) scale(300); }
#anim-elements-container.anim-bubble-v1.closing .bubble-bg { transform: translate(-50%, -50%) scale(0) !important; transition: transform 0.5s ease-in; }
#doc-modal.anim-bubble-v1 .modal-content { opacity: 0; transform: translateY(30px); transition: opacity 0.4s 0.6s, transform 0.4s 0.6s; background: transparent; box-shadow: none; }
#doc-modal.anim-bubble-v1.active .modal-content { opacity: 1; transform: translateY(0); background: var(--white); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
#doc-modal.anim-bubble-v1.closing .modal-content { opacity: 0; transform: translateY(30px); transition: opacity 0.3s, transform 0.3s; }

/* 2. Reversed Double Doors */
#doc-modal.anim-doors-reversed .modal-content { opacity: 0; background: transparent !important; }
#doc-modal.anim-doors-reversed.active .modal-content { opacity: 1; transition: opacity 0.5s; transition-delay: 0.6s; }
#doc-modal.anim-doors-reversed.closing .modal-content { opacity: 0; transition: opacity 0.2s; }
.door-rev { position: absolute; top: 0; width: 50vw; height: 100vh; background: var(--white); z-index: 50; }
.door-rev.left { left: 0; transform: translateX(-100%); border-right: 1px solid #ccc; }
.door-rev.right { right: 0; transform: translateX(100%); border-left: 1px solid #ccc; }
.anim-doors-reversed .door-rev { transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1), border-color 0.4s ease 0.4s; }
.anim-doors-reversed.active .door-rev.left { transform: translateX(0); border-right-color: transparent; }
.anim-doors-reversed.active .door-rev.right { transform: translateX(0); border-left-color: transparent; }
.anim-doors-reversed.closing .door-rev.left { transform: translateX(-100%) !important; border-right-color: #ccc; transition: transform 0.5s ease-in, border-color 0.1s; }
.anim-doors-reversed.closing .door-rev.right { transform: translateX(100%) !important; border-left-color: #ccc; transition: transform 0.5s ease-in, border-color 0.1s; }

/* 3. 3D Page Flip */
.modal-overlay.anim-flip-v1 { perspective: 2500px; } 
#doc-modal.anim-flip-v1 .modal-content { 
    transform-origin: left center; 
    transform: rotateY(-90deg) !important; 
    opacity: 0; 
    transition: none !important;
    box-shadow: 20px 0 50px rgba(0,0,0,0.2); }
#doc-modal.anim-flip-v1.active .modal-content { 
    transform: rotateY(0deg) !important; 
    opacity: 1; 
    transition: transform 1.5s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.5s !important; 
}
#doc-modal.anim-flip-v1.closing .modal-content { 
    transform: rotateY(-90deg) !important; 
    opacity: 0; 
    transition: transform 1.0s ease-in, opacity 5.0s !important; 
}

/* 4. Archive Drawer */
#doc-modal.anim-drawer-v1 .modal-content { transform: translateY(100%); border-top-left-radius: 40px; border-top-right-radius: 40px; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.7s; }
#doc-modal.anim-drawer-v1.active .modal-content { transform: translateY(0); border-radius: 12px; }
#doc-modal.anim-drawer-v1.closing .modal-content { transform: translateY(100%) !important; transition: transform 0.5s ease-in; }

/* 5. Newspaper Spin ????*/
#doc-modal.anim-news-v1 .modal-content { opacity: 0; transform-origin: center; }
#doc-modal.anim-news-v1.active .modal-content { animation: news-spin-v1 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#doc-modal.anim-news-v1.closing .modal-content { animation: news-spin-v1-close 0.9s ease-in forwards !important; }
@keyframes news-spin-v1 { 0% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0) rotate(-1080deg); opacity: 0; } 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } }
@keyframes news-spin-v1-close { 0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } 100% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0) rotate(1080deg); opacity: 0; } }

/* 6. 3D Tumble ????*/
#doc-modal.anim-news-v2 .modal-content { opacity: 0; transform-origin: center; }
#doc-modal.anim-news-v2.active .modal-content { animation: news-spin-v2 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#doc-modal.anim-news-v2.closing .modal-content { animation: news-spin-v2-close 0.7s ease-in forwards !important; }
@keyframes news-spin-v2 { 0% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0) rotateX(-720deg) rotateY(-720deg); opacity: 0; } 100% { transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg); opacity: 1; } }
@keyframes news-spin-v2-close { 0% { transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg); opacity: 1; } 100% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0) rotateX(720deg) rotateY(720deg); opacity: 0; } }

/* 7. Circle Reveal (Replaced unsupported wipe-angle) */
.clock-overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--white); z-index: 50; clip-path: circle(0% at var(--ox) var(--oy)); }
#doc-modal.anim-clock-v1 .modal-content { opacity: 0; background: transparent !important; }
#doc-modal.anim-clock-v1.active .modal-content { opacity: 1; transition: opacity 0.3s; transition-delay: 0.8s; }
#doc-modal.anim-clock-v1.closing .modal-content { opacity: 0; transition: opacity 0.2s; }
.anim-clock-v1.active .clock-overlay { animation: circle-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.anim-clock-v1.closing .clock-overlay { animation: circle-hide 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
@keyframes circle-reveal { from { clip-path: circle(0% at var(--ox) var(--oy)); } to { clip-path: circle(150% at var(--ox) var(--oy)); } }
@keyframes circle-hide { from { clip-path: circle(150% at var(--ox) var(--oy)); } to { clip-path: circle(0% at var(--ox) var(--oy)); } }

/* 8. CRT TV Snap ????*/
#doc-modal.anim-crt-v1 .modal-content { transform: scale(0, 0.01); opacity: 0; transform-origin: center; }
#doc-modal.anim-crt-v1.active .modal-content { animation: crt-on 0.5s cubic-bezier(0.8, 0, 0.2, 1) forwards; }
#doc-modal.anim-crt-v1.closing .modal-content { animation: crt-off 0.4s ease-in forwards !important; }
@keyframes crt-on { 0% { transform: scale(0, 0.02); opacity: 1; } 50% { transform: scale(1, 0.02); opacity: 1; } 100% { transform: scale(1, 1); opacity: 1; } }
@keyframes crt-off { 0% { transform: scale(1, 1); opacity: 1; filter: brightness(1); } 50% { transform: scale(1, 0.02); opacity: 1; filter: brightness(3); } 100% { transform: scale(0, 0.02); opacity: 0; filter: brightness(5); } }

/* 9. Drop and Bounce ?????*/
#doc-modal.anim-bounce-v1 .modal-content { transform-origin: center; opacity: 0; }
#doc-modal.anim-bounce-v1.active .modal-content { animation: drop-bounce-fill 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#doc-modal.anim-bounce-v1.closing .modal-content { animation: drop-bounce-close 0.6s ease-in forwards !important; }
@keyframes drop-bounce-fill { 0% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0.1); opacity: 0; border-radius: 50px; } 20% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0.15); opacity: 1; border-radius: 40px; } 45% { transform: translate(calc(var(--ox) - 50vw), 60vh) scale(0.15, 0.1); opacity: 1; border-radius: 40px; } 70% { transform: translate(0, -5vh) scale(1.02); opacity: 1; border-radius: 12px; } 100% { transform: translate(0, 0) scale(1); opacity: 1; border-radius: 12px; } }
@keyframes drop-bounce-close { 0% { transform: translate(0, 0) scale(1); opacity: 1; border-radius: 12px; } 30% { transform: translate(0, -5vh) scale(1.02); opacity: 1; border-radius: 12px; } 100% { transform: translate(calc(var(--ox) - 50vw), calc(var(--oy) - 50vh)) scale(0); opacity: 0; border-radius: 50%; } }

/* 10. Paper Airplane */
#doc-modal.anim-airplane-v1 .modal-content { opacity: 0; background: transparent !important; }
#doc-modal.anim-airplane-v1.active .modal-content { opacity: 1; transition: opacity 0.5s; transition-delay: 1.2s; }
#doc-modal.anim-airplane-v1.closing .modal-content { opacity: 0; transition: opacity 0.2s; }
.airplane-wrapper { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--white); transform-origin: center; z-index: 40; }
.anim-airplane-v1.active .airplane-wrapper { animation: airplane-fly-in 0.7s ease-out forwards, airplane-unfold 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes airplane-fly-in { 0% { transform: translate(-100vw, 100vh) rotate(60deg) scale(0.2); clip-path: polygon(0% 25%, 100% 50%, 100% 50%, 100% 50%, 0% 75%, 20% 50%); } 60% { transform: translate(10vw, -10vh) rotate(-15deg) scale(0.6); clip-path: polygon(0% 25%, 100% 50%, 100% 50%, 100% 50%, 0% 75%, 20% 50%); } 100% { transform: translate(0, 0) rotate(0deg) scale(0.5); clip-path: polygon(0% 25%, 100% 50%, 100% 50%, 100% 50%, 0% 75%, 20% 50%); } }
@keyframes airplane-unfold { 0% { clip-path: polygon(0% 25%, 100% 50%, 100% 50%, 100% 50%, 0% 75%, 20% 50%); transform: scale(0.5); background: #e2e8f0; } 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%); transform: scale(1); background: var(--white); } }
.anim-airplane-v1.closing .airplane-wrapper { animation: airplane-fold 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards, airplane-fly-out 0.6s 0.6s ease-in forwards !important; }
@keyframes airplane-fold { 0% { clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%); transform: scale(1); background: var(--white); } 100% { clip-path: polygon(0% 25%, 100% 50%, 100% 50%, 100% 50%, 0% 75%, 20% 50%); transform: scale(0.5); background: #e2e8f0; } }
@keyframes airplane-fly-out { 0% { transform: translate(0, 0) rotate(0deg) scale(0.5); } 20% { transform: translate(-5vw, 5vh) rotate(-20deg) scale(0.45); } 100% { transform: translate(150vw, -100vh) rotate(45deg) scale(0.2); } }

/* 11. Heavy Book (25 Pages) - COMPLETELY FIXED */
#doc-modal.anim-book-v1 .modal-content { opacity: 0; background: transparent !important; }
#doc-modal.anim-book-v1.active .modal-content { opacity: 1; transition: opacity 0.6s; transition-delay: 1.4s; }
#doc-modal.anim-book-v1.closing .modal-content { opacity: 0; transition: opacity 0.3s; }
.book-bg { position: absolute; top:0; left:0; width:100vw; height:100vh; background:var(--white); opacity:0; transition:opacity 0.3s; z-index:5;}
.anim-book-v1.active .book-bg { opacity: 1; transition-delay: 1.4s; }
.anim-book-v1.closing .book-bg { opacity: 0; }
.flipping-page { position: absolute; top: 0; width: 50vw; height: 100vh; background: #ffffff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 20; }
.page-flip-heavy { right: 0; border-left: 2px solid #cbd5e0; transform-origin: left center; animation: flip-over 1.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes flip-over { 
    0% { transform: rotateY(0deg); opacity: 1; } 
    80% { opacity: 1; } 
    100% { transform: rotateY(-180deg); opacity: 0; } 
}/* Reverse Closing Animation for the Book */
.anim-elements-container.closing .page-flip-heavy {
    animation: flip-back 1.2s cubic-bezier(0.3, 1, 0.2, 1) forwards !important;
}

@keyframes flip-back { 
    0% { transform: rotateY(-180deg); opacity: 0; } 
    80% { opacity: 1; } 
    100% { transform: rotateY(0deg); opacity: 1; } 
}

/* Ticker Animation */
.tape-strip { position: absolute; width: 120vw; height: 5vh; background: #0f172a; font-family: 'Courier Prime', monospace; font-size: 2.5vh; font-weight: bold; display: flex; align-items: center; white-space: nowrap; z-index: 50; left: -10vw; transform-origin: left; transform: scaleX(0); opacity: 0; border-bottom: 1px solid #1e293b; }
.tape-strip span.g { color: var(--fin-green); margin: 0 20px;}
.tape-strip span.r { color: var(--fin-red); margin: 0 20px;}
.anim-elements-container.anim-ticker .tape-strip { animation: tape-type 1s var(--dly) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.ticker-flash { position: absolute; top:0; left:0; width:100vw; height:100vh; background: var(--white); z-index: 60; opacity: 0; animation: tick-flash 0.5s 2.2s forwards; }
@keyframes tape-type { 0% { transform: scaleX(0); opacity: 1;} 100% { transform: scaleX(1); opacity: 1; } }
@keyframes tick-flash { to { opacity: 1; } }

/* Jigsaw Animation */
.jig-td-base { position: absolute; top: var(--oy); left: var(--ox); width: 280px; height: 210px; transform: translate(-50%, -50%) scale(0); background: #0f172a; border: 6px solid #334155; border-radius: 8px; box-shadow: inset 0 30px 50px rgba(0,0,0,0.9), 0 10px 30px rgba(0,0,0,0.5); z-index: 45; }
.jig-td-lid { position: absolute; top: var(--oy); left: var(--ox); width: 292px; height: 222px; transform: translate(-50%, -50%) scale(0); background: var(--navy); border: 2px solid #93c5fd; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 55; display: flex; justify-content: center; align-items: center; }
.jig-td-lid::after { content: ''; width: 15px; height: 50px; background: rgba(0,0,0,0.2); border-radius: 20px; position: absolute; right: 15px; box-shadow: inset 2px 0 5px rgba(0,0,0,0.3); }
.anim-elements-container.anim-jigsaw .jig-td-base { animation: td-box-appear 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, td-box-fade 0.5s 2.8s forwards; }
.anim-elements-container.anim-jigsaw .jig-td-lid { animation: td-box-appear 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, td-lid-slide 0.8s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes td-box-appear { to { transform: translate(-50%, -50%) scale(1); } }
@keyframes td-lid-slide { to { transform: translate(80%, -50%) scale(1); opacity: 0; } }
@keyframes td-box-fade { to { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } }
.jig-svg-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none;}
.jig-svg-container svg { width: 100%; height: 100%; overflow: visible; }
.jig-path { transform-origin: center; opacity: 0; stroke: rgba(0,0,0,0.4); stroke-width: 1.5px; filter: url(#puzzle-bevel); }
.anim-elements-container.anim-jigsaw .jig-path { animation: td-jig-burst 1.8s var(--dly) cubic-bezier(0.2, 0.8, 0.2, 1) forwards, jig-fade-seamless 1s 3.2s forwards; }
@keyframes td-jig-burst { 0% { transform: translate(var(--st-x), var(--st-y)) scale(0.05) rotate(var(--rot-start)); opacity: 0; } 1% { opacity: 1; } 50% { transform: translate(var(--scat-x), var(--scat-y)) scale(1.2) rotate(var(--rot-mid)); opacity: 1; } 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; fill: var(--color); } }
@keyframes jig-fade-seamless { 0% { fill: var(--color); stroke: rgba(0,0,0,0.4); filter: url(#puzzle-bevel);} 49% { fill: var(--gray); stroke: rgba(0,0,0,0.2); filter: url(#puzzle-bevel);} 50% { fill: var(--gray); stroke: rgba(0,0,0,0.05); filter: none;} 100% { fill: transparent; stroke: transparent; filter: none; opacity: 0;} }

/* Fireworks Animation */
.fw-ballot { position: absolute; top: var(--oy); left: var(--ox); width: 60px; height: 80px; background: white; border: 2px solid #ccc; transform: translate(-50%, -50%); z-index: 60; display: flex; justify-content: center; align-items: center; opacity: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.fw-check { color: var(--civ-red); font-size: 40px; font-weight: bold; opacity: 0; }
.fw-box { position: absolute; top: 100vh; left: 50%; width: 120px; height: 120px; background: #1d4ed8; transform: translateX(-50%); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding-top: 10px; border-top: 10px solid #1e3a8a;}
.fw-particle { position: absolute; top: 60%; left: 50%; width: 15px; height: 15px; border-radius: 50%; z-index: 70; opacity: 0; }
.anim-elements-container.anim-firework .fw-ballot { animation: b-fly-center 0.6s ease-out forwards, b-drop-box 0.5s 1.2s ease-in forwards; }
.anim-elements-container.anim-firework .fw-check { animation: b-check 0.3s 0.7s forwards; }
.anim-elements-container.anim-firework .fw-box { animation: box-rise 0.6s ease-out forwards, box-shake 0.3s 1.7s forwards, box-vanish 0.1s 2s forwards; }
.anim-elements-container.anim-firework .fw-particle { animation: fw-explode 1s 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes b-fly-center { 0% { top: var(--oy); left: var(--ox); opacity: 1;} 100% { top: 40%; left: 50%; transform: translate(-50%, -50%) scale(1.5); opacity: 1; } }
@keyframes b-check { to { opacity: 1; transform: scale(1.2); } }
@keyframes box-rise { to { top: 55%; } }
@keyframes b-drop-box { to { top: 60%; opacity: 0; } }
@keyframes box-shake { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 25% { transform: translateX(-55%) rotate(-5deg); } 75% { transform: translateX(-45%) rotate(5deg); } }
@keyframes box-vanish { to { opacity: 0; } }
@keyframes fw-explode { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(3); opacity: 0; } }

/* Responsive Mobile Overrides */
@media (max-width: 1024px) {
    .hero { flex-direction: column; }
    .hero-left { padding: 4rem 2rem; align-items: center; text-align: center; }
    .hero-left .welcome-text { font-size: 3.5rem; margin-bottom: 1rem; }
    .hero-left h1 { font-size: 3.2rem; margin-left: 0; margin-bottom: 0.5rem; }
    .hero-left .subtitle { font-size: 1.3rem; margin-left: 0; }
    .hero-right { padding: 3rem 2rem; }
    nav { flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
    nav .nav-links { flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
    .hub-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
    .hub-menu { right: auto; left: 50%; transform: translate(-50%, -10px); width: 95%; max-width: 320px; }
    .hub-menu.active { transform: translate(-50%, 0); }
    .grid-2 { grid-template-columns: 1fr; gap: 2.5rem; }
    .section-container { padding: 3rem 5%; }
    footer { flex-direction: column; gap: 2rem; text-align: center; }
    .footer-right { text-align: center; }
    .modal-content { padding: 1.5rem; width: 95%; }
    .document-body h3 { font-size: 1.4rem; }
    .close-modal { top: 0.75rem; right: 1rem; }
}

/* =================================================================================
   SIDEBAR NAVIGATION
   ================================================================================= */
.sidebar-nav {
    position: fixed; top: 0; left: 0; width: 80px; height: 100vh;
    background: var(--navy); border-right: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; align-items: center; padding: 2rem 0;
    z-index: 900; box-shadow: 2px 0 15px rgba(0,0,0,0.2);
}
.sidebar-logo { font-size: 1.8rem; margin-bottom: auto; }
.sidebar-links { display: flex; flex-direction: column; gap: 2rem; width: 100%; align-items: center; padding: 0; background: transparent; }
.sidebar-links a { font-size: 1.5rem; text-decoration: none; opacity: 0.6; transition: 0.2s; padding: 10px; border-radius: 8px; }
.sidebar-links a:hover { opacity: 1; background: rgba(255,255,255,0.1); transform: scale(1.1); }
.sidebar-actions { margin-top: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-actions button, .sidebar-actions a {
    background: none; border: none; font-size: 1.5rem; cursor: pointer;
    opacity: 0.6; transition: 0.2s; text-decoration: none;
    display: flex; justify-content: center; align-items: center;
}
.sidebar-actions button:hover, .sidebar-actions a:hover { opacity: 1; transform: scale(1.1); }

@media (max-width: 1024px) {
    .sidebar-nav {
        top: auto; bottom: 0; width: 100vw; height: 70px; flex-direction: row;
        border-right: none; border-top: 1px solid rgba(255,255,255,0.1);
        padding: 0 1rem; justify-content: space-around; z-index: 900;
    }
    .sidebar-logo { display: none; }
    .sidebar-links { flex-direction: row; justify-content: center; gap: 1.5rem; }
    .sidebar-actions { flex-direction: row; gap: 1.5rem; margin-top: 0; }
    #main-view { padding-left: 0; padding-bottom: 70px; }
}

/* =================================================================================
   ACCESSIBILITY: REDUCED MOTION OVERRIDE
   ================================================================================= */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01ms !important; }
    .modal-overlay.active { opacity: 1 !important; transition: none !important; }
    .modal-overlay.active .modal-content { transform: none !important; opacity: 1 !important; }
}
/* =========================================
   PHASE 2: PRE-LOADER STYLES (LAYOUT LOCK)
   ========================================= */
.preloader-overlay {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important;
    background: var(--light-bg) !important; 
    z-index: 99999 !important;
    display: flex; 
    flex-direction: column; /* CRITICAL FIX: Stacks items vertically */
    justify-content: center; 
    align-items: center;
    overflow: hidden; 
    transition: opacity 0.6s ease, visibility 0.6s; 
}

.preloader-overlay.fade-out { opacity: 0; visibility: hidden; }

.loader-container { 
    position: relative; display: flex; 
    justify-content: center; align-items: center; 
    width: 100%; max-width: 350px; 
}
#sig-svg {
    width: 90vw; 
    max-width: 100%; 
    height: auto !important; 
    max-height: 25vh;
    overflow: visible;
}

/* FIX: Targeted the correct class */
.ink-stroke {
    fill: none;
    stroke: var(--blue);
    stroke-width: 28; /* The ink thickness */
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0; /* CRITICAL FIX: Hides the fully drawn SVG from flashing on load */
}

#pen-img {
    position: fixed; 
    width: 60px; height: auto; pointer-events: none; z-index: 9999;
    transform: translate(2%, -95%); opacity: 0; transition: opacity 0.3s;
}
.signature-line-wrapper {
    display: flex;
    align-items: flex-end;
    width: 1200vw;
    max-width: 400px; 
    margin-top: -20px; /* Pulls it up slightly behind the signature */
}

.sig-x {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 1.5rem;
    color: #a0aec0;
    margin-right: 8px;
    line-height: 0.8;
    opacity: 0;
    animation: pop-in 0.2s 0.2s forwards;
}

.sig-dashed-line {
    flex-grow: 1;
    border-bottom: 2px dashed #a0aec0;
    max-width: 0; /* Starts hidden */
    border-right: 2px solid var(--blue); /* Your cursor effect */
    animation: draw-line 1.5s 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes draw-line { 
    0% { max-width: 0; border-right: 2px solid var(--blue); } 
    90% { max-width: 100%; border-right: 2px solid var(--blue); } 
    100% { max-width: 100%; border-right: transparent; } 
}

/* The Tracking Pen Styles */
#pen-img {
    position: fixed; /* Fixed tracks exact viewport coordinates generated by JS */
    width: 60px; 
    height: auto;
    pointer-events: none;
    z-index: 9999;
    transform: translate(2%, -95%);
    opacity: 0; 
    transition: opacity 0.3s;
}

.preloader-overlay .subtext { 
    font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #718096; 
    margin-top: 15px; opacity: 0; 
    animation: fade-in 0.8s 1.2s forwards; 
}

@keyframes fade-in { to { opacity: 1; } }

/* =========================================
   PHASE 3: MODAL MULTIMEDIA STYLES
   ========================================= */
.modal-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.modal-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}
.modal-gallery img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.content-html p {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    color: #475569;
}
/* =========================================
   PHASE 3.5: MODAL LAYOUT FRAMEWORKS
   ========================================= */
/* Option 1: 50/50 Split (Text Left, Media Right) */
.modal-layout-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}

/* Base text styling for injected modal content */
.modal-text-content h4 { margin-top: 0; margin-bottom: 1rem; color: var(--navy); }
.modal-text-content p { margin-bottom: 1.2rem; font-size: 1.05rem; color: var(--text-light); }
.modal-text-content ul { margin-bottom: 1.2rem; padding-left: 1.5rem; color: var(--text-light); }
.modal-text-content li { margin-bottom: 0.5rem; }

@media (max-width: 860px) {
    .modal-layout-split { grid-template-columns: 1fr; }
}
/* Option 2: Tabbed Document Interface */
.modal-layout-tabbed { margin-top: 1rem; }
.modal-tabs { 
    display: flex; gap: 10px; margin-bottom: 15px; 
    border-bottom: 2px solid var(--border); padding-bottom: 10px; 
    overflow-x: auto; /* Allows scrolling on narrow mobile screens */
}
.modal-tab-btn { 
    background: transparent; border: none; font-size: 0.95rem; font-weight: 600; 
    color: var(--text-light); padding: 8px 16px; cursor: pointer; 
    transition: all 0.2s; border-radius: 6px; white-space: nowrap;
}
.modal-tab-btn:hover { background: var(--light-bg); color: var(--navy); }
.modal-tab-btn.active { background: var(--blue); color: var(--white); box-shadow: 0 4px 10px rgba(84, 101, 255, 0.2); }

.modal-tab-content { display: none; animation: fade-in 0.4s ease; }
.modal-tab-content.active { display: block; }

/* Option 6: Competency Cards (NCSS Standards) */
.competency-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 5px solid var(--blue);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .competency-card.has-image {
        flex-direction: row;
        align-items: flex-start;
    }
    .competency-card.has-image .comp-text { flex: 2; }
    .competency-card.has-image .comp-media { flex: 1; margin-top: 0; }
}

.comp-header { margin-bottom: 1rem; }
.comp-header h5 { margin: 0; color: var(--text-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.comp-header h4 { margin: 0.25rem 0 0 0; color: var(--navy); font-size: 1.3rem; }

.evidence-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f1f5f9; border: 1px solid #cbd5e1;
    padding: 8px 16px; border-radius: 6px;
    font-size: 0.9rem; color: var(--navy); font-weight: 500;
    text-decoration: none; transition: all 0.2s;
    margin-right: 10px; margin-bottom: 10px;
}
.evidence-badge:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

.comp-media img {
    width: 100%; height: auto; border-radius: 6px;
    border: 1px solid var(--border);
}


/* =================================================================================
   PHASE 4: DYNAMIC SLIM BUBBLE SIDEBAR
   ================================================================================= */
.sidebar {
    position: fixed; top: 0; left: 0; width: 60px; height: 100vh;
    background: transparent; pointer-events: none; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 900;
}
.sidebar > * { pointer-events: auto; }

.sb-links, .sb-actions {
    display: flex; flex-direction: column; gap: 1rem; width: 100%; align-items: center;
}
.sb-actions { margin-top: 3rem; }

.sidebar a {
    color: var(--navy); background: white; width: 45px; height: 45px; 
    border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    display: flex; justify-content: center; align-items: center;
    text-decoration: none; font-size: 1.2rem;
    transition: transform 0.4s cubic-bezier(0.3, 1.2, 0.4, 1), opacity 0.3s;
}
.sidebar a:hover {
    background: var(--blue); color: white; transform: translateY(-3px) scale(1.1);
}

/* Cascading Collapse Effect */
.sidebar.collapsed a { transform: translateX(-100px); opacity: 0; }
.sidebar.collapsed .sb-links a:nth-child(1) { transition-delay: 0.0s; }
.sidebar.collapsed .sb-links a:nth-child(2) { transition-delay: 0.05s; }
.sidebar.collapsed .sb-links a:nth-child(3) { transition-delay: 0.1s; }
.sidebar.collapsed .sb-links a:nth-child(4) { transition-delay: 0.15s; }
.sidebar.collapsed .sb-actions a:nth-child(1) { transition-delay: 0.2s; }
.sidebar.collapsed .sb-actions a:nth-child(2) { transition-delay: 0.25s; }

/* The Pulsing Hint Zone */
.hint-zone {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%); 
    width: 40px; height: 100vh; z-index: 899;
}
.hint-zone .indicator {
    width: 12px; height: 12px; background: var(--blue); border-radius: 50%; 
    box-shadow: 0 0 15px rgba(84,101,255,0.6); position: absolute; left: 10px; top: 50%;
    animation: pulse 2s infinite;
}
.hint-zone.active .indicator { display: block; }
.hint-zone:not(.active) .indicator { display: none; }

@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(84,101,255,0.7); } 
    70% { box-shadow: 0 0 0 10px rgba(84,101,255,0); } 
    100% { box-shadow: 0 0 0 0 rgba(84,101,255,0); } 
} 

/* Mobile Override */
@media (max-width: 1024px) {
    .sidebar {
        top: auto; bottom: 0; width: 100vw; height: 70px; flex-direction: row;
        background: white; pointer-events: auto; border-top: 1px solid var(--border);
        box-shadow: 0 -5px 15px rgba(0,0,0,0.05); padding: 0 1rem; justify-content: space-around;
    }
    .sidebar.collapsed a { transform: none; opacity: 1; }
    .sidebar a { width: auto; height: auto; background: transparent; box-shadow: none; font-size: 1.5rem; }
    .hint-zone { display: none; }
    .sb-links, .sb-actions { flex-direction: row; gap: 1.5rem; width: auto; margin-top: 0; }
    #main-view { padding-bottom: 70px; }
}
/* Option 3/4 Additions: Feature Cards & Quotes */
.feature-card:hover { border-color: var(--blue) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: translateY(-2px); transition: all 0.2s; }