/* =============== Base Theme Variables =============== */
:root {
  --cc-bg: #0d1b2a;
  --cc-bg-alt: #11243a;
  --cc-accent: #2e5aac;
  --cc-accent-2: #5aa0ff;
  --cc-text: #e6ecf5;
  --cc-muted: #8ca3bc;
  --cc-border: #23364f;

  --brand-bg: var(--cc-bg);
  --brand-bg-hover: #0f2743;
  --brand-accent: var(--cc-accent-2);

  --page-bg: var(--cc-bg);
  --surface: var(--cc-bg-alt);
  --text: var(--cc-text);
  --text-muted: var(--cc-muted);

  --danger: #ff6b6b;
  --radius: 8px;
  --menu-h: 60px;
  --footer-h: 44px;
  --gap: 20px;
  --shadow: 0 0 12px rgba(0,0,0,.45);
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  :root {
    --page-bg: #ffffff;
    --surface: #f8fafc;
    --text: #0d1b2a;
    --text-muted: #6c7a89;
  }
}

/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background: var(--page-bg);
}

/* ===================== Navigation ===================== */
nav.main-menu {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--menu-h);
  background: var(--brand-bg);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 1.5rem;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.menu-left {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.2rem; white-space: nowrap;
}
.menu-left .flightlog { color: #fff; font-weight: 900; }
.menu-left .separator { opacity: .6; }
.menu-left .page-name { color: var(--brand-accent); font-style: italic; }

.menu-center {
  margin: 0 auto;
  display: flex; gap: 2rem;
}
.menu-center a {
  color: #fff; text-decoration: none;
  font-weight: 600; transition: border-color .3s;
  border-bottom: 3px solid transparent;
  padding-bottom: .2rem;
}
.menu-center a:hover {
  border-color: var(--brand-accent);
}

.menu-right {
  margin-left: auto;
}
.login-btn {
  background: var(--brand-accent);
  color: #fff;
  padding: .4rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  display: flex; align-items: center; gap: .4rem;
  transition: background .3s;
}
.login-btn:hover {
  background: var(--cc-accent);
}

/* ===================== Hero Section ===================== */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - var(--menu-h) - var(--footer-h));
  background: linear-gradient(135deg, var(--brand-bg), var(--brand-bg-hover));
  color: #fff;
  text-align: center;
  padding: 2rem;
}
.hero-content {
  max-width: 800px;
}
.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--cc-text);
}
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--brand-accent);
  color: #fff;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: background .3s;
}
.cta-button:hover { background: var(--cc-accent); }

/* ===================== Sections ===================== */
.section {
  padding: 4rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.section ul {
  list-style: none;
  display: grid;
  gap: 1rem;
  font-size: 1.1rem;
}
.section li i {
  color: var(--brand-accent);
  margin-right: .6rem;
}

/* ===================== Footer ===================== */
.main-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: var(--brand-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  font-size: .95rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}

/* Responsive */
@media (max-width: 600px) {
  .menu-center { display: none; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
}