:root{--primary:#8b4513;--primary-dark:#6b3410;--secondary:#d35400;--accent:#f5b041;--bg-dark:#1a1a2e;--bg-card:#16213e;--text-light:#ecf0f1;--text-muted:#95a5a6;--border:#2c3e50}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-dark);color:var(--text-light);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.app{min-height:100vh}.hero{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);justify-content:center;align-items:center;height:70vh;min-height:500px;display:flex;position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(circle at 20% 80%,#8b45134d 0%,#0000 50%),radial-gradient(circle at 80% 20%,#d3540033 0%,#0000 50%);position:absolute;inset:0}.hero-overlay{background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.hero-content{z-index:1;text-align:center;max-width:800px;padding:0 2rem;position:relative}.hero h1{letter-spacing:.1em;background:linear-gradient(135deg,#f5b041 0%,#d35400 50%,#8b4513 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 60px #d3540080;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:clamp(3rem,10vw,6rem);font-weight:700}.hero-subtitle{color:var(--accent);letter-spacing:.3em;text-transform:uppercase;margin-bottom:1.5rem;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:300}.hero-description{color:var(--text-muted);max-width:600px;margin:0 auto;font-size:1.1rem}.nav{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);background:#1a1a2ef2;padding:1rem 2rem;position:sticky;top:0}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.nav-toggle{color:var(--text-light);cursor:pointer;background:0 0;border:none;padding:.5rem;display:none}.nav-links{gap:2rem;display:flex}.nav-links a{color:var(--text-light);font-weight:500;text-decoration:none;transition:color .3s;position:relative}.nav-links a:after{content:"";background:var(--accent);width:0;height:2px;transition:width .3s;position:absolute;bottom:-4px;left:0}.nav-links a:hover:after{width:100%}@media (width<=768px){.nav-toggle{display:block}.nav-links{border-bottom:1px solid var(--border);background:#1a1a2efa;flex-direction:column;gap:1rem;padding:1rem;display:none;position:absolute;top:100%;left:0;right:0}.nav-links.open{display:flex}}.section{max-width:1200px;margin:0 auto;padding:5rem 2rem}.section-header{align-items:center;gap:1rem;margin-bottom:3rem;display:flex}.section-icon{color:var(--accent)}.section-header h2{font-size:2rem;font-weight:600}.timeline-section{background:linear-gradient(180deg, var(--bg-dark) 0%, #16213e80 100%)}.timeline{padding:2rem 0;position:relative}.timeline:before{content:"";background:linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}@media (width<=768px){.timeline:before{left:20px}}.timeline-item{margin-bottom:3rem;display:flex;position:relative}.timeline-item:nth-child(odd){flex-direction:row-reverse}@media (width<=768px){.timeline-item,.timeline-item:nth-child(odd){flex-direction:row;padding-left:50px}}.timeline-year{color:var(--accent);text-align:right;flex:1;padding-right:2rem;font-size:1.5rem;font-weight:700}@media (width<=768px){.timeline-year{text-align:left;padding-right:1rem;font-size:1.2rem}}.timeline-marker{z-index:1;position:absolute;left:50%;transform:translate(-50%)}@media (width<=768px){.timeline-marker{left:20px}}.timeline-dot{background:var(--accent);border:3px solid var(--bg-dark);border-radius:50%;width:16px;height:16px;box-shadow:0 0 10px #f5b04180}.timeline-content{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;flex:1;padding:1.5rem}@media (width<=768px){.timeline-content{padding:1rem}}.timeline-content h3{color:var(--accent);margin-bottom:.5rem;font-size:1.1rem}.timeline-content p{color:var(--text-muted);font-size:.95rem}.map-section{background:var(--bg-card);max-width:100%;padding-left:0;padding-right:0}.map-section .section-header{max-width:1200px;margin:0 auto 2rem;padding:0 2rem}.map-container{max-width:1200px;margin:0 auto;padding:0 2rem}.normandy-map{border:2px solid var(--border);border-radius:12px;width:100%;max-width:800px;margin:0 auto;display:block}.map-legend{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:2rem;display:grid}.legend-item{border:1px solid var(--border);background:#1a1a2e80;border-radius:8px;padding:1rem}.legend-item h4{color:var(--accent);margin-bottom:.5rem;font-size:1rem}.legend-item p{color:var(--text-muted);font-size:.85rem}.categories-section{background:linear-gradient(180deg, #16213e80 0%, var(--bg-dark) 100%)}.category-tabs{flex-wrap:wrap;gap:.75rem;margin-bottom:2rem;display:flex}.category-tab{background:var(--bg-card);border:1px solid var(--border);color:var(--text-light);cursor:pointer;border-radius:50px;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.95rem;transition:all .3s;display:flex}.category-tab:hover{border-color:var(--cat-color);background:#8b451333}.category-tab.active{background:var(--cat-color);border-color:var(--cat-color);color:#fff}.category-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem}.category-header{border-bottom:1px solid var(--border);align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;display:flex}.category-icon{color:var(--accent)}.category-header h3{font-size:1.5rem;font-weight:600}.content-section{margin-bottom:2rem}.content-section:last-child{margin-bottom:0}.content-section h4{color:var(--accent);border-left:3px solid var(--secondary);margin-bottom:1rem;padding-left:1rem;font-size:1.2rem}.content-text p{color:var(--text-muted);margin-bottom:1rem;line-height:1.8}.characters-section{background:var(--bg-dark)}.characters-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.character-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:12px;transition:all .3s;overflow:hidden}.character-card:hover{border-color:var(--accent);box-shadow:0 10px 40px #0000004d}.character-image-wrapper{background:var(--bg-dark);height:200px;overflow:hidden}.character-image{object-fit:cover;filter:sepia(30%);width:100%;height:100%;transition:filter .3s}.character-card:hover .character-image{filter:sepia(0%)}.character-info{padding:1.5rem}.character-info h3{color:var(--text-light);margin-bottom:.5rem;font-size:1.1rem}.character-life{color:var(--accent);margin-bottom:.25rem;font-size:.85rem}.character-role{color:var(--text-muted);margin-bottom:1rem;font-size:.9rem}.character-cta{color:var(--secondary);align-items:center;gap:.25rem;font-size:.9rem;font-weight:500;display:flex}.modal-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;padding:2rem;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;width:100%;max-width:600px;max-height:90vh;padding:2rem;position:relative;overflow-y:auto}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.5rem;transition:color .3s;position:absolute;top:1rem;right:1rem}.modal-close:hover{color:var(--text-light)}.modal-header{gap:1.5rem;margin-bottom:1.5rem;display:flex}.modal-header img{object-fit:cover;border:2px solid var(--border);border-radius:8px;width:120px;height:120px}.modal-header-text h3{margin-bottom:.5rem;font-size:1.5rem}.modal-life{color:var(--accent);margin-bottom:.25rem;font-size:.9rem}.modal-role{color:var(--text-muted);font-size:1rem}.modal-description{color:var(--text-muted);margin-bottom:1.5rem;line-height:1.7}.modal-details h4{color:var(--accent);margin-bottom:1rem;font-size:1.1rem}.modal-details ul{list-style:none}.modal-details li{color:var(--text-light);padding:.5rem 0 .5rem 1.5rem;position:relative}.modal-details li:before{content:"•";color:var(--secondary);position:absolute;left:0}.footer{background:var(--bg-card);text-align:center;border-top:1px solid var(--border);padding:3rem 2rem}.footer p{color:var(--text-light);margin-bottom:.5rem}.footer-note{color:var(--text-muted);font-size:.85rem}@media (width<=768px){.section{padding:3rem 1rem}.hero{height:60vh}.modal-header{text-align:center;flex-direction:column;align-items:center}.modal-header img{width:150px;height:150px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}