/* VocaDynamics — Star Citizen themed styles */
:root{
  --bg-0:#0a0a0a;
  --bg-1:#0e0e0e;
  --bg-2:#151515;
  --text:#f2f2f2;
  --muted:#b0b0b0;
  /* Crusader Industries inspired palette: deep red accents on dark neutral UI */
  --accent:#C8102E; /* Crusader red */
  --accent-2:#FF5A6A; /* lighter red */
  --warn:#FFB3BD;
  --ok:#7CF6C8;
  --glow:0 0 20px rgba(200,16,46,.28), 0 0 40px rgba(255,90,106,.2);
  --glass-bg: rgba(16,16,16,0.5);
  --glass-border: rgba(200,16,46,.28);
  --glass-highlight: rgba(255,90,106,.12);
  /* Anchor offset for sticky header */
  --header-offset: 150px;
}

/* Sheen animation */
@keyframes sheen-sweep{
  0%{ transform: translateX(-130%) skewX(-20deg); opacity: 0; }
  10%{ opacity:.25 }
  50%{ opacity:.12 }
  100%{ transform: translateX(130%) skewX(-20deg); opacity: 0; }
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background: radial-gradient(1200px 600px at 70% -20%, rgba(200,16,46,.08), transparent 60%), var(--bg-0);
  overflow-x:hidden;
}

/* Starfield canvas */
#starfield{position:fixed; inset:0; z-index:-2; background: radial-gradient(800px 400px at 10% -10%, rgba(200,16,46,.06), transparent 60%), var(--bg-0)}

.container{max-width:1100px; margin-inline:auto; padding:0 20px}
.section{padding:20px 0; scroll-margin-top: var(--header-offset)}
.section-header{margin-bottom:28px; text-align:center}
.section-header h2{font-family:Orbitron, sans-serif; letter-spacing:.02em; font-size:2rem; margin:0 0 6px}
.section-header p{color:var(--muted); margin:0 auto; max-width:70ch}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(6px) saturate(130%) contrast(1.25) brightness(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(130%) contrast(1.25) brightness(1.1);
  background: linear-gradient(180deg, rgba(12,12,12,.36), rgba(12,12,12,.58));
  border-bottom:1px solid var(--glass-border);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-highlight);
  /* Allow dropdowns to extend beyond header */
  overflow:visible;
  display:flex; align-items:center;
}
.site-header::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:40%; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  filter: blur(8px);
  opacity:0;
  animation: sheen-sweep 7s ease-in-out infinite;
}
.site-header:hover::after{ animation-duration:2.5s; opacity:.22 }
.site-header .brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; padding:12px 20px}
.logo{filter:drop-shadow(0 0 8px rgba(200,16,46,.45))}
.brand-text{font-family:Orbitron, sans-serif; font-weight:700; letter-spacing:.06em}
.nav{display:flex; gap:14px; align-items:center; margin-left:auto; padding:12px 20px}
.nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; transition:.2s}
.nav a:hover{color:var(--text); background:rgba(200,16,46,.08); box-shadow:var(--glow)}
.nav .cta{color:#ffffff; background:linear-gradient(90deg, var(--accent), var(--accent-2)); font-weight:700}

/* Dropdown */
.dropdown{position:relative}
.dropdown-toggle{display:flex; align-items:center; gap:8px; color:var(--muted); background:transparent; border:1px solid transparent; padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit}
.dropdown-toggle:hover{color:var(--text); background:rgba(200,16,46,.08); box-shadow:var(--glow)}
.dropdown-toggle[aria-expanded="true"]{color:var(--text); background:rgba(200,16,46,.12); border-color:rgba(200,16,46,.3)}
.caret{display:inline-block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; transition:transform .2s}
.dropdown-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.submenu{position:absolute; top:calc(100% + 20px); left:0; min-width:210px; border:1px solid var(--glass-border); border-radius:12px; padding:8px; display:none; box-shadow:0 12px 28px rgba(0,0,0,.4); z-index:1000; overflow:hidden}
.submenu::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0))}
.submenu a{display:block; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px}
.submenu a:hover{color:var(--text); background:rgba(200,16,46,.08)}
.dropdown.open .submenu{display:block}

/* Desktop: center submenu under the toggle and avoid off-screen overflow */
@media (min-width:901px){
  .dropdown{position:relative}
  .dropdown > .submenu{ left:50%; right:auto; transform:translateX(-50%); max-width:min(320px, 92vw) }
}

/* Mobile nav */
.nav-toggle{display:none; margin-left:auto; margin-right:10px; background:transparent; border:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; margin:6px 0; background:var(--text); transition:.2s}
@media (max-width:900px){
  :root{ --header-offset: 64px }
    .site-header{padding:6px 4px}
    .brand{padding:10px 12px}
    .nav-toggle{order:2}
    .nav{position:fixed; inset:80px 10px auto 10px; margin-left:0;}
    .nav{position:fixed; inset:80px 10px auto 10px; flex-direction:column; background:rgba(10,10,10,.95); border:1px solid rgba(200,16,46,.2); border-radius:12px; transform:translateY(-20px); opacity:0; pointer-events:none}
  .nav{align-items:center}
  .nav{gap:6px}
  .nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav-toggle{display:block}
  .dropdown, .submenu{position:static}
  .dropdown{width:100%; display:flex; flex-direction:column; align-items:center}
  .dropdown-toggle{margin:0 auto; align-self:center}
  /* Mobile submenu: centered with expand animation */
  .submenu{
    display:block;
    width:min(92%, 320px);
    margin:0 auto 0;
    padding:8px;
    background: var(--glass-bg);
    border:1px solid var(--glass-border);
  backdrop-filter: blur(5px) saturate(120%) contrast(1.2) brightness(1.08);
  -webkit-backdrop-filter: blur(5px) saturate(120%) contrast(1.2) brightness(1.08);
    box-shadow:0 10px 22px rgba(0,0,0,.32);

    max-height:0;
    opacity:0;
    transform:translateY(-6px);
    overflow:hidden;
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
  }
  .dropdown.open .submenu{
    max-height:300px;
    opacity:1;
    transform:translateY(0);
    margin-top:6px;
  }
  .submenu a{ text-align:center }
}

/* Hero */
.hero{position:relative; padding-top:120px; padding-bottom:100px; overflow:hidden}
.holo-grid{position:absolute; inset:0; background-image: linear-gradient(rgba(200,16,46,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,.08) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(800px 400px at 50% 10%, #000, transparent 70%); opacity:.7; z-index:-1}
.hero-inner h1{font-family:Orbitron, sans-serif; font-size: clamp(2rem, 2.6rem + 1.2vw, 4rem); line-height:1.05; margin:0 0 10px}
.hero-inner .subtle{display:block; color:var(--accent-2); font-weight:600; letter-spacing:.12em; font-size:.9rem}
.hero .tagline{color:var(--muted); max-width:64ch}
.actions{display:flex; gap:14px; margin:20px 0 10px}
.btn{display:inline-block; text-decoration:none; border:1px solid rgba(200,16,46,.3); color:var(--text); padding:10px 16px; border-radius:10px; transition:.2s}
.btn:hover{box-shadow:var(--glow); transform:translateY(-1px)}
.btn.primary{color:#ffffff; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-color:transparent; font-weight:700}
.btn.ghost{background:rgba(200,16,46,.06)}
.btn.small{padding:8px 12px; font-size:.9rem}

.stats{display:flex; gap:26px; list-style:none; padding:14px 0 0; margin:18px 0 0; border-top:1px dashed rgba(200,16,46,.22)}
.stats li{display:flex; flex-direction:column; gap:4px; color:var(--muted)}
.stats strong{font-family:Orbitron; color:var(--text)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{position:relative; background:linear-gradient(180deg, rgba(20,20,20,.8), rgba(12,12,12,.7)); border:1px solid rgba(200,16,46,.18); border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.25); transform-style:preserve-3d}
.card:before{content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(120deg, rgba(200,16,46,.35), rgba(10,16,28,0) 40%); filter:blur(12px); opacity:.25; z-index:-1}
.card-icon{color:var(--accent);}
.card h3{font-family:Orbitron, sans-serif; margin:10px 0}
.card p{color:var(--muted); margin:0 0 10px}
.card ul{margin:0 0 10px 18px; padding:0}
.card-link{color:var(--accent-2); text-decoration:none; font-weight:600}
@media (max-width:960px){.cards{grid-template-columns:1fr}}

/* Liquid glass look */
.overlay-glass{
  position:relative;
  backdrop-filter: blur(6px) saturate(130%) contrast(1.25) brightness(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(130%) contrast(1.25) brightness(1.1);
  background: linear-gradient(180deg, rgba(12,12,12,.28), rgba(12,12,12,.52));
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:16px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-highlight);
  max-width: 980px;
}
.overlay-glass:after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

/* Apply glass to cards and panels for consistency */
.card{background: var(--glass-bg); border-color: var(--glass-border); backdrop-filter: blur(4px) saturate(120%) contrast(1.15) brightness(1.06); -webkit-backdrop-filter: blur(4px) saturate(120%) contrast(1.15) brightness(1.06)}
.panel{background: var(--glass-bg); border-color: var(--glass-border); backdrop-filter: blur(4px) saturate(120%) contrast(1.15) brightness(1.06); -webkit-backdrop-filter: blur(4px) saturate(120%) contrast(1.15) brightness(1.06)}
.submenu{background: var(--glass-bg); backdrop-filter: blur(5px) saturate(120%) contrast(1.2) brightness(1.08); -webkit-backdrop-filter: blur(5px) saturate(120%) contrast(1.2) brightness(1.08)}
.contact-card{background: var(--glass-bg); border-color: var(--glass-border); backdrop-filter: blur(4px) saturate(120%) contrast(1.15) brightness(1.06); -webkit-backdrop-filter: blur(4px) saturate(120%) contrast(1.15) brightness(1.06)}

/* Reusable glass panel for sections */
.glass-panel{
  background: linear-gradient(180deg, rgba(12,12,12,.28), rgba(12,12,12,.5));
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

/* Details */
.detail .grid.two{display:grid; grid-template-columns:1fr; gap:20px; justify-items:center}
.detail .grid.two > div{max-width:800px}
@media (max-width:900px){.detail .grid.two{grid-template-columns:1fr}}
.section-bg.banner{position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin-bottom:18px; border:1px solid rgba(200,16,46,.2); background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.section-bg.banner:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,28,.05), rgba(10,16,28,.35) 70%, rgba(10,16,28,.65))}
.detail-hero{position:relative; margin-bottom:18px}
.detail-hero .section-header.overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center}
.detail-hero .section-header.overlay h2{font-size:clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem); text-shadow:0 2px 20px rgba(0,0,0,.55); margin-bottom:8px}
.detail-hero .section-header.overlay p{max-width:70ch; color:var(--text); text-shadow:0 2px 18px rgba(0,0,0,.5); margin:0 0 10px}
.detail-hero .section-header.overlay .bullets{margin:8px 0 10px; text-align:left; max-width:800px}
.detail-hero .section-header.overlay .bullets li{margin:6px 0; text-shadow:0 2px 12px rgba(0,0,0,.55)}
.detail-hero .section-header.overlay .badges{justify-content:center}
.cargo-bg{background-image:radial-gradient(800px 400px at 30% 10%, rgba(200,16,46,.22), rgba(10,10,10,.6) 60%), linear-gradient(120deg, rgba(200,16,46,.14), rgba(10,10,10,.45) 45%), url('assets/cargo.jpg')}
.salvage-bg{background-image:radial-gradient(800px 400px at 70% 10%, rgba(200,16,46,.18), rgba(10,10,10,.6) 60%), linear-gradient(120deg, rgba(200,16,46,.12), rgba(10,10,10,.45) 45%), url('assets/salvage.jpg')}
.mining-bg{background-image:radial-gradient(800px 400px at 50% 10%, rgba(200,16,46,.18), rgba(10,10,10,.6) 60%), linear-gradient(120deg, rgba(200,16,46,.12), rgba(10,10,10,.45) 45%), url('assets/mining.jpg')}
.section-bg.banner{background-color:#12090d}
.bullets{margin:0 0 14px 18px; text-align: left;}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{border:1px solid rgba(200,16,46,.35); color:var(--accent-2); border-radius:999px; padding:4px 10px; font-size:.82rem; background:rgba(200,16,46,.06)}
.panel{background:linear-gradient(180deg, rgba(18,18,18,.8), rgba(10,10,10,.7)); border:1px solid rgba(200,16,46,.2); border-radius:12px; padding:16px}

/* Fleet */
.fleet{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.fleet-card{background: var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%)}
.fleet-card .label{font-size:.75rem; color:var(--muted)}
@media (max-width:900px){.fleet{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fleet{grid-template-columns:1fr}}

/* Contracts */
.contract-form .grid.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.contract-form label{display:flex; flex-direction:column; gap:6px; color:var(--muted)}
.contract-form input, .contract-form select, .contract-form textarea{background:rgba(200,16,46,.06); border:1px solid rgba(200,16,46,.25); color:var(--text); border-radius:10px; padding:10px; outline:none}
.contract-form input:focus, .contract-form select:focus, .contract-form textarea:focus{box-shadow:var(--glow); border-color:var(--accent-2)}
.contract-form .full{grid-column:1 / -1}

/* Contact */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.contact-card{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--text); background:rgba(200,16,46,.06); border:1px solid rgba(200,16,46,.22); border-radius:12px; padding:14px}
.contact-card .tiny{font-size:.8rem; color:var(--muted)}
@media (max-width:900px){.contract-form .grid.two{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr}}

/* Footer */
.site-footer{
  border-top:1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  background: linear-gradient(180deg, rgba(12,12,12,.34), rgba(12,12,12,.62));
  box-shadow: 0 -4px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative; overflow:hidden;
}
.site-footer::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:40%; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  filter: blur(8px);
  opacity:0;
  animation: sheen-sweep 8s ease-in-out infinite; animation-delay:1.2s;
}
.site-footer:hover::after{ animation-duration:2.8s; opacity:.2 }
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0}
.footer-inner .brand-small{display:flex; align-items:center; gap:8px}
.footer-nav{display:flex; gap:12px}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav a:hover{color:var(--accent-2)}
.legal{color:var(--muted); opacity:.85; font-size:.85rem}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1; transform:none}

/* Scale down operation overlays on mobile */
@media (max-width:900px){
  /* Let overlay content participate in layout to avoid overflow */
  .detail-hero .section-header.overlay{ position:static; padding:12px }
  .overlay-glass{ max-width:92%; padding:12px 14px; border-radius:12px }
  .detail-hero .section-header.overlay h2{ font-size:clamp(1.35rem, 1.05rem + 1.6vw, 1.8rem) }
  .detail-hero .section-header.overlay p{ max-width:60ch }
  .detail-hero .section-header.overlay .bullets{ max-width:92%; font-size:.95rem }
  .detail-hero .badge{ font-size:.78rem; padding:3px 8px }
  /* Gentle separation between operation articles inside a single glass panel */
  #operations .glass-panel article + article{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(200,16,46,.14) }
}