/* FONTS */
@font-face {
  font-family: "NMSGeoSans";
  src: url("../fonts/NMSGeoSans_Kerned.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

:root {
  --bg-dark: #030406;
  --oes-gold: #ffd200;
  --oes-orange: #ff8c1a;
  --oes-cyan: #00f2ff;
  --text-white: #f2f5f9;
  --ease-tech: cubic-bezier(0.23, 1, 0.32, 1);
  --clip-cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

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

body {
  background: var(--bg-dark);
  color: var(--text-white);
  font-family: "NMSGeoSans", sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}

/* --- DYNAMIC NEBULA --- */
.space-nebula { 
  position: fixed; inset: 0; z-index: -3;
  background: 
    radial-gradient(circle at 15% 20%, rgba(255, 0, 50, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 15%, rgba(150, 0, 255, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(26, 21, 53, 1) 0%, #030406 100%),
    radial-gradient(circle at 75% 85%, rgba(0, 255, 120, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 210, 0, 0.05) 0%, transparent 40%);
  animation: nmsWarp 40s linear infinite alternate;
}

@keyframes nmsWarp {
  0% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
  100% { transform: scale(1.2) rotate(2deg); filter: hue-rotate(20deg); }
}

/* --- STARS DYNAMICS --- */
.particles-container { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.particles-container::before, .particles-container::after {
  content: ""; position: absolute; inset: -500px;
  background-image: 
    radial-gradient(1.2px 1.2px at 10% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 60%, var(--oes-gold), transparent),
    radial-gradient(1.2px 1.2px at 50% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 80%, var(--oes-cyan), transparent),
    radial-gradient(1.2px 1.2px at 90% 40%, #fff, transparent);
  opacity: 0;
}
.particles-container::after { background-size: 400px 400px; animation: warpStars 10s linear infinite; }
.particles-container::before { background-size: 600px 600px; animation: nebulaFloat 25s linear infinite; }

@keyframes warpStars {
  0% { transform: translateZ(0) scale(1); opacity: 0; }
  20% { opacity: 0.6; } 80% { opacity: 0.6; }
  100% { transform: translateZ(600px) scale(2.5); opacity: 0; }
}
@keyframes nebulaFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.4; } 80% { opacity: 0.4; }
  100% { transform: translate(-5%, -5%) scale(1.3); opacity: 0; }
}

/* --- NAV --- */
.nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: rgba(5, 6, 8, 0.85); backdrop-filter: blur(20px);
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 3rem; border-bottom: 1px solid rgba(0, 242, 255, 0.2);
}
.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { height: 32px; width: auto; }
.brand-text { font-size: 0.85rem; letter-spacing: 0.3em; color: var(--oes-gold); font-weight: 700; }

.nav-links { display: flex; gap: 2.5rem; }
.nav-links a { text-decoration: none; color: #a0a6ad; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; transition: 0.3s; }
.nav-links a:hover { color: var(--oes-cyan); }

/* --- HERO --- */
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; text-align: center; }
.hero-content { z-index: 5; margin-bottom: 50px; }

.emblem-container { position: relative; width: 190px; margin: 0 auto 2.5rem; }
.aura { position: absolute; inset: -50px; border-radius: 50%; filter: blur(60px); opacity: 0.4; animation: pulseAura 6s infinite alternate; }
.aura.gold { background: var(--oes-gold); }
.aura.azure { background: var(--oes-cyan); animation-delay: 3s; }
.hero-emblem { width: 100%; position: relative; z-index: 2; display: block; }

h1 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; }
.subtitle { color: var(--oes-cyan); font-size: 1rem; letter-spacing: 0.4em; margin-bottom: 3rem; }

.hero-buttons { display: flex; gap: 1.5rem; justify-content: center; }
.nms-btn {
  padding: 1.1rem 2.8rem; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.2em;
  clip-path: var(--clip-cut); border: 1px solid; font-weight: 700; transition: 0.3s var(--ease-tech);
}
.nms-btn.primary { border-color: var(--oes-orange); color: var(--oes-orange); background: rgba(255, 140, 26, 0.1); }
.nms-btn.secondary { border-color: var(--oes-cyan); color: var(--oes-cyan); background: rgba(0, 242, 255, 0.05); }
.nms-btn:hover { background: white; color: #000; transform: scale(1.05); }

/* Scroll Indicator */
.scroll-indicator {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0.5;
}
.scroll-indicator span { font-size: 0.65rem; letter-spacing: 0.4em; font-weight: 700; }
.scroll-indicator .line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--oes-cyan), transparent); }

/* --- SECTIONS --- */
.section { padding: 6rem 2rem; max-width: 1100px; margin: auto; }
.section-header { display: flex; align-items: baseline; margin-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; }
.section-number { color: var(--oes-gold); font-size: 0.8rem; margin-right: 1.2rem; font-family: monospace; }
h2 { font-size: 2.2rem; letter-spacing: 0.2em; text-transform: uppercase; }

.tech-panel { background: rgba(255, 255, 255, 0.03); padding: 3.5rem; border: 1px solid rgba(255, 255, 255, 0.08); position: relative; backdrop-filter: blur(15px); }
.highlight { color: var(--oes-gold); font-weight: 700; }

.sector-container { display: flex; flex-direction: column; gap: 1.2rem; max-width: 900px; margin: auto; }
.sector-row {
  display: flex; align-items: flex-start; gap: 2rem; padding: 2.5rem;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.4s var(--ease-tech); border-left: 4px solid transparent;
}
.sector-row:hover { background: rgba(255, 255, 255, 0.04); transform: translateX(10px); }

.gold-theme { border-left-color: var(--oes-gold); color: var(--oes-gold); }
.azure-theme { border-left-color: var(--oes-cyan); color: var(--oes-cyan); }
.orange-theme { border-left-color: var(--oes-orange); color: var(--oes-orange); }

.sector-body { text-align: left; }
.sector-body h3 { font-size: 1.8rem; color: #fff; margin-bottom: 0.5rem; }
.sector-body p { font-size: 1rem; color: #aaa; margin-bottom: 1.2rem; line-height: 1.6; }
.sector-link { font-size: 0.8rem; letter-spacing: 0.15em; text-decoration: none; font-weight: 700; color: inherit; opacity: 0.7; }

/* FOOTER */
.footer { padding: 5rem 2rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); }
.footer img { width: 50px; margin-bottom: 2rem; }
.status-bar { display: flex; justify-content: center; gap: 2.5rem; font-family: monospace; font-size: 0.75rem; color: var(--oes-cyan); margin-top: 1.5rem; }

/* UTILS */
.reveal { opacity: 0; transform: translateY(30px); transition: 1s var(--ease-tech); }
.reveal.active { opacity: 1; transform: translateY(0); }
.pulse { animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes pulseAura { from { transform: scale(1); } to { transform: scale(1.3); } }