/* YMC logo-inspired theme */
:root {
  --bg-base: #030612;
  --bg-shade: #09142f;
  --text: #f4f9ff;
  --muted: #b9c9e5;
  --accent: #0f94ff;
  --accent2: #25d8ff;
  --purple: #8b5cf6;
  --cyan: #22d3ee;
  --shadow: 0 0 28px rgba(15, 148, 255, 0.35);
}
* { box-sizing: border-box; }
body { margin:0; color: var(--text); font-family: 'Poppins', 'Inter', Arial, sans-serif; background: radial-gradient(circle at top, #111 0%, var(--bg-base) 40%, #060609 100%); }
.site-shell { min-height: 100vh; position: relative; overflow: hidden; background: url('/images/map.png') no-repeat center/cover, linear-gradient(180deg, rgba(5,5,5,0.95), rgba(3,3,3,1) 75%); }
.site-shell::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(237,161,58,0.2), transparent 35%), radial-gradient(circle at 82% 20%, rgba(235,96,155,0.2), transparent 45%), radial-gradient(circle at 50% 75%, rgba(0,243,255,0.16), transparent 50%); pointer-events:none; z-index:1; }
.top-nav, .site-header { position: sticky; top: 0; z-index: 15; backdrop-filter: blur(10px); background: rgba(1, 7, 25, 0.66); border-bottom: 1px solid rgba(26, 150, 255, 0.18); }
.navbar { display:flex; align-items:center; justify-content:center; gap:1rem; max-width:1200px; margin:0 auto; padding:0.95rem 1.25rem; }
.nav-inner { display: flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0.95rem 1.25rem; }
.logo {
  display:flex;
  align-items:center;
  gap:0.65rem;
  color:#fff;
  font-family:'Orbitron', 'Poppins', sans-serif;
  font-weight:900;
  letter-spacing:.14em;
  text-decoration:none;
  font-size:1rem;
}
.logo img {
  height:36px;
  width:auto;
  display:block;
  filter: drop-shadow(0 0 12px rgba(15, 148, 255, 0.6));
}
.logo span {
  font-size:0.95rem;
  color:#e4f2ff;
  text-transform:uppercase;
  letter-spacing:0.18em;
}
.nav-links { display:flex; gap:0.7rem; }
.nav-link { color: rgba(255,255,255,.75); text-decoration:none; font-weight:700; font-size:.83rem; letter-spacing:.15em; text-transform: uppercase; padding:.5rem .9rem; border-radius:999px; position:relative; transition:.25s ease; }
.nav-link.active, .nav-link:hover { color:#fff; background: rgba(255,255,255,0.13); }
.hero-section { position: relative; z-index:5; min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:4.5rem 1rem 5rem; }
.hero-overlay { position:absolute; inset:0; background-image: linear-gradient(135deg, rgba(235,96,155,0.25) 0%, rgba(237,161,58,0.20) 40%, rgba(0,243,255,0.15) 100%); mix-blend-mode: screen; }
.hero-content { position:relative; z-index:2; max-width:850px; margin:auto; padding:2rem 1rem; }
.hero-content h1 { font-size:clamp(2rem,6vw,3.4rem); line-height:1.05; margin:0 0 1rem; color:#fff; text-transform:uppercase; letter-spacing:.05em; text-shadow: 0 0 20px rgba(237,96,155,.4); }
.hero-content p { font-size:1.05rem; color: rgba(255,255,255,0.86); max-width:780px; margin:0 auto 1.2rem; }
.hero-actions { display:flex; justify-content:center; gap:0.8rem; flex-wrap: wrap; }
.btn { text-decoration:none; font-weight:800; border-radius:999px; padding:.8rem 1.35rem; font-size:.93rem; transition: transform .2s ease, box-shadow .2s ease; }
.btn-primary { color:#fff; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow:0 12px 30px rgba(237,96,155,0.35); }
.btn-secondary { color: white; background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); }
.btn:hover { transform: translateY(-2px); }
.hero-glow { position:absolute; bottom: 0; left:50%; width:960px; height:480px; transform: translateX(-50%); background: radial-gradient(circle at 50% 50%, rgba(237,161,58,0.2), rgba(235,96,155,0.15), transparent 66%); filter: blur(90px); pointer-events:none; }
.features, .gallery, .site-footer { position: relative; z-index:2; padding: 4rem 1rem; }
.container { width:min(1160px,95%); margin:0 auto; }
.features h2, .gallery h2 { font-family:'Orbitron', sans-serif; font-weight:900; font-size:2.4rem; letter-spacing:.2em; color:#fff; margin-bottom:.7rem; }
.features p { color:#c0c0c0; max-width:840px; margin:0 auto 1.75rem; font-size:1.02rem; }
.timeline { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.timeline .item { background: rgba(10,10,13,0.78); border: 1px solid rgba(255,255,255,0.12); border-left:3px solid var(--accent); padding: 1rem; border-radius: 13px; }
.timeline .item h3 { margin:0 0 .45rem; font-size:1.1rem; color:#fff; }
.timeline .item p { margin:0; color:#e1e1e1; font-size:.94rem; line-height:1.4; }
.gallery .grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;
  animation: galleryFadeUp 0.9s ease both;
}
.card {
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: cardFloat 8s ease-in-out infinite;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 30px rgba(15, 148, 255, 0.35);
}
.card img {
  width:100%;
  aspect-ratio: 16/9;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}
.card:hover img {
  transform: scale(1.05);
}
.site-footer { border-top:1px solid rgba(255,255,255,0.08); text-align:center; }
.site-footer p { color: rgba(255,255,255,0.65); margin:.35rem 0; letter-spacing:.1em; font-size:.8rem; }
@media (max-width: 860px) { .hero-section { padding-top: 5rem; } .top-nav .nav-inner { flex-wrap: wrap; gap:.75rem; justify-content:center; } .nav-links { width:100%; justify-content:center; } .timeline { grid-template-columns:1fr; }}
@media (max-width: 520px) { .hero-content h1 { font-size: 1.9rem; } .hero-actions { flex-direction: column; } }

/* Gallery animations */
@keyframes galleryFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Animated elements */
@keyframes floatLaser1 { 0%,100%{ transform: translateY(0) rotate(12deg);} 50%{transform: translateY(250px) rotate(18deg);} }
@keyframes floatLaser2 { 0%,100%{ transform: translateY(0) rotate(-6deg);} 50%{ transform: translateY(-200px) rotate(-10deg);} }
@keyframes floatLaser3 { 0%,100%{ transform: translateY(0) rotate(8deg);} 50%{ transform: translateY(-150px) rotate(-2deg);} }
.laser { position:absolute; left:-10%; width:120%; height:12px; opacity:.9; border-radius:999px; pointer-events:none; }
.laser-1 { top:30%; background:#EDA13A; filter: blur(4px); box-shadow:0 0 30px #EDA13A; transform: rotate(12deg); animation: floatLaser1 14s ease-in-out infinite; }
.laser-2 { top:50%; background:#00f3ff; height:18px; filter: blur(5px); box-shadow:0 0 40px #00f3ff; transform: rotate(-6deg); animation: floatLaser2 18s ease-in-out infinite; }
.laser-3 { top:70%; background:#EB609B; height:10px; filter: blur(3px); box-shadow:0 0 25px #EB609B; transform: rotate(8deg); animation: floatLaser3 12s ease-in-out infinite; }