/*
 * Know.Travel — Front Page Styles
 * front-page.css
 * Themes: dark / light / sunset — all via CSS variables
 *
 * dark:   --bg-base:#08080d  --bg-surface:#0c0c14  --bg-card:#12121c  --bg-elevated:#181824
 * light:  --bg-base:#f8f8fb  --bg-surface:#ffffff  --bg-card:#ffffff  --bg-elevated:#f0f0f5
 * sunset: --bg-base:#fef5ee  --bg-surface:#fff8f2  --bg-card:#fff8f4  --bg-elevated:#faeee4
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/playfair-display@5/700.css');

/* ============================================================
   SUNSET THEME VARIABLES
   (dark + light already defined in general.css)
============================================================ */
[data-theme="sunset"] {
  --bg-base:    #fef5ee;
  --bg-surface: #fff8f2;
  --bg-card:    #fff8f4;
  --bg-elevated:#faeee4;
  --bg-hover:   #f5e2cc;
  --bg-input:   #fff4ed;

  --border-subtle:  rgba(160,70,10,0.04);
  --border-default: rgba(150,65,10,0.10);
  --border-strong:  rgba(130,55,0,0.18);
  --border-focus:   #c45000;

  --text-primary:   #2d1a0a;
  --text-secondary: #7a4a28;
  --text-tertiary:  #b89070;
  --text-on-accent: #ffffff;

  --accent-blue:   #c45000;
  --accent-purple: #a0320a;
  --accent-cyan:   #b06800;
  --accent-pink:   #c0281e;
  --accent-orange: #d4500a;
  --accent-teal:   #7a6010;
  --accent-green:  #3a7a20;

  --accent-blue-muted:   rgba(196,80,0,0.08);
  --accent-purple-muted: rgba(160,50,10,0.08);
  --accent-pink-muted:   rgba(192,40,30,0.08);
  --accent-orange-muted: rgba(212,80,10,0.08);
  --accent-teal-muted:   rgba(122,96,16,0.08);

  --route-line: rgba(196,80,0,0.35);
  --route-glow: rgba(196,80,0,0.15);
  --marker-lg:  #c45000;
  --marker-md:  #d4600a;
  --marker-sm:  #a03000;
  --marker-xs:  #c0281e;

  --border-highlight:        rgba(212,80,10,0.4);
  --border-highlight-strong: rgba(212,80,10,0.65);

  --gradient-progress: linear-gradient(90deg, #c0281e, #a0320a, #c45000);
  --gradient-brand:    linear-gradient(135deg, #c45000, #a0320a);
  --gradient-warm:     linear-gradient(90deg, #c0281e, #d4500a);

  --tint-orange-bg:    rgba(212,80,10,0.07);
  --tint-orange-border:rgba(212,80,10,0.30);
  --tint-green-bg:     rgba(58,122,32,0.06);
  --tint-green-border: rgba(58,122,32,0.25);
  --tint-pink-bg:      rgba(192,40,30,0.06);
  --tint-pink-border:  rgba(192,40,30,0.22);
  --tint-blue-bg:      rgba(196,80,0,0.07);
  --tint-blue-border:  rgba(196,80,0,0.22);
  --tint-purple-bg:    rgba(160,50,10,0.06);
  --tint-purple-border:rgba(160,50,10,0.20);

  --status-success: #3a7a20;
  --status-warning: #c45000;
  --status-error:   #b82020;
  --status-info:    #c45000;
  --status-live:    #c0281e;

  --shadow-sm: 0 1px 3px rgba(140,60,0,0.08);
  --shadow-md: 0 4px 12px rgba(140,60,0,0.14);
  --shadow-lg: 0 8px 30px rgba(140,60,0,0.18);

  --header-bg:     #fff8f2;
  --header-border: #f0dfc8;
  --nav-color:     #b08060;
  --nav-hover:     #2d1a0a;

  --logo-blue:   #c45000;
  --logo-purple: #a0320a;
  --logo-cyan:   #b06800;
  --logo-text:   #2d1a0a;
  --logo-dot:    #a0320a;
}

/* dark needs --accent-green and --status-success too */
[data-theme="dark"] {
  --accent-green: #66bb6a;
}
[data-theme="light"] {
  --accent-green: #2e7d32;
}

/* ============================================================
   BASE
============================================================ */
.fp-main {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background 0.3s, color 0.3s;
}

.fp-section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.fp-divider {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  height: 1px;
  background: var(--border-default);
  transition: background 0.3s;
}

/* ============================================================
   HERO V2 — Know before you go
============================================================ */
.fp-hero-v2 {
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

/* No grid on dark hero */

/* Warm glow — sunset only */
[data-theme="sunset"] .fp-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(212,80,10,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.fp-hero-v2-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 80px 40px 72px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.fp-v2-eyebrow {
  font-size: 10px;
  letter-spacing: 3.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 28px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  transition: color 0.3s;
}

.fp-v2-h1 {
  font-size: 60px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -2.5px;
  line-height: 1.05;
  margin-bottom: 10px;
  font-family: 'Playfair Display', Georgia, serif;
  transition: color 0.3s;
}

.fp-v2-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--text-secondary);
}

.fp-v2-rule {
  width: 36px;
  height: 2px;
  background: var(--gradient-brand);
  margin: 28px auto;
  border-radius: 2px;
}

.fp-v2-sub {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  transition: color 0.3s;
}

.fp-v2-cta {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  display: block;
  text-align: center;
  margin-bottom: 48px;
  font-family: 'Outfit', sans-serif;
  transition: color 0.3s;
}

.fp-v2-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border-default);
  align-items: flex-start;
  flex-wrap: wrap;
  transition: border-color 0.3s;
}

.fp-v2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-v2-sn {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  display: block;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  transition: color 0.3s;
}

.fp-v2-sl {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: block;
  margin-top: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  transition: color 0.3s;
}

.fp-v2-why {
  font-size: 10px;
  color: var(--text-tertiary);
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: none;
  cursor: pointer;
  margin-top: 8px;
  display: inline-block;
  letter-spacing: 0.5px;
  padding: 0;
  transition: color 0.2s, border-color 0.2s;
  font-family: 'Outfit', sans-serif;
}

.fp-v2-why:hover {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

/* ============================================================
   MODAL
============================================================ */
.fp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.fp-modal-overlay.open { display: flex; }

.fp-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 36px 40px;
  max-width: 440px;
  width: 90%;
  text-align: left;
  position: relative;
  box-shadow: var(--shadow-lg);
  font-family: 'Outfit', sans-serif;
  transition: background 0.3s, border-color 0.3s;
}

.fp-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 18px;
  color: var(--text-tertiary);
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
  transition: color 0.2s;
}
.fp-modal-close:hover { color: var(--text-primary); }

.fp-modal-tag {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 600;
}

.fp-modal-h {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.8px;
  font-family: 'Playfair Display', Georgia, serif;
  transition: color 0.3s;
}

.fp-modal-h em {
  font-style: italic;
  font-weight: 400;
  color: var(--text-secondary);
}

.fp-modal-rule {
  width: 28px;
  height: 2px;
  background: var(--gradient-brand);
  margin: 18px 0;
  border-radius: 2px;
}

.fp-modal-p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
  transition: color 0.3s;
}

.fp-modal-items { list-style: none; margin-bottom: 20px; }

.fp-modal-items li {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 12px;
  align-items: baseline;
  line-height: 1.5;
  transition: color 0.3s, border-color 0.3s;
}

.fp-modal-items li:last-child { border-bottom: none; }

.fp-modal-items li span {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-blue);
  min-width: 32px;
}

.fp-modal-note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.65;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  transition: color 0.3s;
}

/* ============================================================
   ROUTES BLOCK V2 — world map + penguin
============================================================ */
.fp-routes-new {
  background: var(--bg-elevated);
  transition: background 0.3s;
}

.fp-rn-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.fp-rn-pill {
  display: inline-flex;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--tint-blue-bg);
  color: var(--accent-blue);
  border: 0.5px solid var(--tint-blue-border);
  margin-bottom: 18px;
  font-family: 'Outfit', sans-serif;
  transition: background 0.3s, color 0.3s;
}

.fp-rn-h {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 14px;
  font-family: 'Outfit', sans-serif;
  transition: color 0.3s;
}

.fp-rn-p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 300px;
  font-family: 'Outfit', sans-serif;
  transition: color 0.3s;
}

.fp-rn-nums { display: flex; gap: 28px; margin-bottom: 32px; }

.fp-rn-nn {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  display: block;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  transition: color 0.3s;
}

.fp-rn-nl {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  transition: color 0.3s;
}

.fp-rn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent-blue);
  color: var(--text-on-accent);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  transition: opacity 0.2s, transform 0.15s, background 0.3s;
  border: none;
}

.fp-rn-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Routes map card — always dark (terminal display aesthetic) */
.fp-rn-card {
  background: #0d1117;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

[data-theme="light"] .fp-rn-card,
[data-theme="sunset"] .fp-rn-card {
  box-shadow: 0 8px 32px rgba(0,0,0,0.20);
  border-color: rgba(0,0,0,0.12);
}

.fp-rn-fhdr {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 9px;
  letter-spacing: 3.5px;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-align: center;
  background: rgba(255,255,255,0.02);
}

.fp-rn-frow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.fp-rn-frow-last { border-bottom: none; }

.fp-rn-fr {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
  font-family: 'Outfit', sans-serif;
}

.fp-rn-fon { font-size: 9px; color: #4ade80; letter-spacing: 1px; font-family: 'Outfit', sans-serif; font-weight: 600; }
.fp-rn-fbo { font-size: 9px; color: #fbbf24; letter-spacing: 1px; font-family: 'Outfit', sans-serif; font-weight: 600; }

#fp-rn-mload {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,0.15);
  letter-spacing: 2px;
  font-family: 'Outfit', sans-serif;
}

.fp-rn-mbadge-wrap { padding: 8px 16px 12px; text-align: center; }

.fp-rn-mbadge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  font-size: 9px;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
}

/* ============================================================
   FEATURE BLOCKS (Airports, Visa, Countries)
============================================================ */
.fp-feat {
  padding: 80px 52px;
  display: flex;
  align-items: center;
  gap: 64px;
  background: transparent;
  transition: background 0.3s;
}

.fp-feat-reverse { flex-direction: row-reverse; }

.fp-graphic {
  flex: 0 0 420px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fp-graphic svg { border-radius: 16px; overflow: hidden; }

.fp-text { flex: 1; }

/* Tags */
.fp-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  transition: background 0.3s, color 0.3s;
}

.fp-tag-blue   { background: var(--tint-blue-bg);   color: var(--accent-blue);   border: 0.5px solid var(--tint-blue-border);   }
.fp-tag-green  { background: var(--tint-green-bg);  color: var(--status-success); border: 0.5px solid var(--tint-green-border);  }
.fp-tag-amber  { background: var(--tint-orange-bg); color: var(--accent-orange);  border: 0.5px solid var(--tint-orange-border); }
.fp-tag-coral  { background: var(--tint-pink-bg);   color: var(--accent-pink);    border: 0.5px solid var(--tint-pink-border);   }
.fp-tag-purple { background: var(--tint-purple-bg); color: var(--accent-purple);  border: 0.5px solid var(--tint-purple-border); }
.fp-tag-pink   { background: var(--tint-pink-bg);   color: var(--accent-pink);    border: 0.5px solid var(--tint-pink-border);   }

.fp-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
  font-family: 'Outfit', sans-serif;
  transition: color 0.3s;
}

.fp-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 400px;
  font-family: 'Outfit', sans-serif;
  transition: color 0.3s;
}

.fp-desc strong { color: var(--text-primary); font-weight: 600; }

.fp-stats { display: flex; gap: 28px; margin-bottom: 28px; }

.fp-stat-n {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-family: 'Outfit', sans-serif;
  transition: color 0.3s;
}

.fp-stat-l {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  transition: color 0.3s;
}

.fp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s, background 0.3s;
  border: none;
  font-family: 'Outfit', sans-serif;
}

.fp-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.fp-btn-blue   { background: var(--accent-blue);    color: var(--text-on-accent); }
.fp-btn-green  { background: var(--status-success); color: var(--text-on-accent); }
.fp-btn-amber  { background: var(--accent-orange);  color: var(--text-on-accent); }
.fp-btn-coral  { background: var(--accent-pink);    color: var(--text-on-accent); }
.fp-btn-purple { background: var(--accent-purple);  color: var(--text-on-accent); }
.fp-btn-pink   { background: var(--accent-pink);    color: var(--text-on-accent); }

/* ============================================================
   COUNTRIES MAP (Leaflet)
============================================================ */
.fp-graphic-map { height: 340px; }

#fp-countries-map {
  width: 100%;
  height: 340px;
  border-radius: 16px;
  overflow: hidden;
}

#fp-countries-map .leaflet-tile { outline: 1px solid transparent; }
#fp-countries-map .leaflet-container img { max-width: none !important; }
#fp-countries-map .leaflet-control-attribution { background: transparent !important; font-size: 9px !important; color: rgba(128,128,128,0.45) !important; }
#fp-countries-map .leaflet-control-attribution a { color: rgba(128,128,128,0.55) !important; text-decoration: none !important; }
#fp-countries-map .leaflet-control-zoom { display: none !important; }

.fp-col-card {
  position: absolute;
  bottom: 14px;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 8px 14px;
  pointer-events: none;
  z-index: 20;
  animation: fp-col-fade 5s ease-in-out infinite;
  box-shadow: var(--shadow-md);
  transition: background 0.3s;
}

.fp-col-card-1 { left: 12px;  border: 1px solid var(--tint-orange-border); animation-delay: 0s;   }
.fp-col-card-2 { right: 12px; border: 1px solid var(--tint-orange-border); animation-delay: 2.5s; }

.fp-col-lbl   { font-size: 8px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-family: 'Outfit', sans-serif; margin-bottom: 3px; color: var(--accent-orange); transition: color 0.3s; }
.fp-col-city  { font-size: 13px; font-weight: 700; color: var(--text-primary); font-family: 'Outfit', sans-serif; line-height: 1.2; transition: color 0.3s; }
.fp-col-price { font-size: 9px; color: var(--text-tertiary); font-family: 'Outfit', sans-serif; margin-top: 2px; transition: color 0.3s; }

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fp-stamp {
  0%,  8%  { opacity: 0; transform: translateY(-25px) rotate(-6deg) scale(.9); }
  18%, 75% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1);       }
  85%,100% { opacity: 0; transform: translateY(-25px) rotate(-6deg) scale(.9); }
}

@keyframes fp-col-fade {
  0%,  8%  { opacity: 0; transform: translateY(5px); }
  18%, 78% { opacity: 1; transform: translateY(0);   }
  90%,100% { opacity: 0; transform: translateY(5px); }
}

@keyframes fp-map-ping {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3.5); opacity: 0;  }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 860px) {
  .fp-hero-v2-inner { padding: 52px 24px 44px; }
  .fp-v2-h1  { font-size: 40px; letter-spacing: -1.5px; }
  .fp-v2-sub { font-size: 15px; }
  .fp-v2-stats { flex-wrap: wrap; gap: 24px; }

  .fp-rn-inner { grid-template-columns: 1fr; padding: 44px 24px; gap: 36px; }
  .fp-rn-p  { max-width: 100%; }
  .fp-rn-btn { width: 100%; justify-content: center; }

  .fp-feat,
  .fp-feat-reverse { flex-direction: column; padding: 52px 24px; gap: 36px; }
  .fp-graphic      { flex: none; width: 100%; height: 280px; }
  .fp-graphic-map  { height: 280px; }
  #fp-countries-map{ height: 280px; }
  .fp-text         { text-align: center; }
  .fp-stats        { justify-content: center; }
  .fp-desc         { max-width: 100%; }
  .fp-btn          { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .fp-v2-h1   { font-size: 34px; letter-spacing: -1px; }
  .fp-v2-sn   { font-size: 22px; }
  .fp-v2-stats{ gap: 16px; }
  .fp-rn-h    { font-size: 28px; }
  .fp-title   { font-size: 26px; }
}


/* ================================================================
   Front Page — additional blocks (auto-appended)
================================================================ */

/* ---- Cosmonautics Day Banner ---- */
.fp-cosmo{
  position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  padding:80px 24px 60px;
  background:radial-gradient(ellipse at 65% 40%,#071428 0%,#04080f 55%,#000408 100%);
  transition:background 1s ease;
}
.fp-cosmo.moon-mode{
  background:radial-gradient(ellipse at 65% 40%,#0e0e16 0%,#05050a 55%,#000000 100%);
}
.fp-cosmo::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at  8%  12%,rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(1px   1px   at 15%  72%,rgba(255,255,255,.55) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 22%  34%,rgba(255,255,255,.60) 0%,transparent 100%),
    radial-gradient(1px   1px   at 31%  88%,rgba(255,255,255,.45) 0%,transparent 100%),
    radial-gradient(1.2px 1.2px at 44%  18%,rgba(255,255,255,.70) 0%,transparent 100%),
    radial-gradient(1px   1px   at 52%  63%,rgba(255,255,255,.40) 0%,transparent 100%),
    radial-gradient(1.3px 1.3px at 58%  92%,rgba(255,255,255,.55) 0%,transparent 100%),
    radial-gradient(1px   1px   at 67%   8%,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 73%  45%,rgba(255,255,255,.80) 0%,transparent 100%),
    radial-gradient(1px   1px   at 81%  78%,rgba(255,255,255,.50) 0%,transparent 100%),
    radial-gradient(1.2px 1.2px at 89%  22%,rgba(255,255,255,.60) 0%,transparent 100%),
    radial-gradient(1px   1px   at 95%  55%,rgba(255,255,255,.45) 0%,transparent 100%),
    radial-gradient(1.3px 1.3px at 48%  82%,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px   1px   at 25%   6%,rgba(255,255,255,.45) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 63%  58%,rgba(255,255,255,.70) 0%,transparent 100%),
    radial-gradient(1px   1px   at  4%  88%,rgba(255,255,255,.40) 0%,transparent 100%);
}
.fp-cosmo-inner{
  position:relative;z-index:1;max-width:1100px;width:100%;
  margin:0 auto;display:flex;align-items:center;gap:72px;
}
.fp-cosmo-globe-wrap{flex-shrink:0;position:relative;width:300px;}
.fp-planet-switcher{display:flex;gap:6px;margin-top:-52px;margin-bottom:18px;justify-content:center;}
.fp-planet-btn{
  padding:5px 16px;border-radius:20px;font-size:.78rem;font-weight:600;
  letter-spacing:.05em;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:rgba(255,255,255,.45);
  cursor:pointer;transition:all .2s;font-family:inherit;
}
.fp-planet-btn.active-earth{background:rgba(79,195,247,.15);border-color:rgba(79,195,247,.4);color:#4fc3f7;}
.fp-planet-btn.active-moon{background:rgba(200,200,220,.12);border-color:rgba(200,200,220,.35);color:#c8c8dc;}
.fp-planet-btn:hover{opacity:.85;}
.fp-globe-canvas-wrap{position:relative;width:300px;height:300px;}
.fp-cosmo-atmos{
  position:absolute;inset:-20px;border-radius:50%;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(79,195,247,.22) 68%,rgba(79,195,247,.08) 80%,transparent 92%);
  animation:fp-cosmo-pulse 4s ease-in-out infinite;
  pointer-events:none;z-index:1;transition:opacity .8s,background .8s;
}
.fp-cosmo-atmos.moon-atmos{
  background:radial-gradient(ellipse at center,transparent 54%,rgba(180,180,200,.10) 70%,rgba(180,180,200,.04) 82%,transparent 92%);
}
@keyframes fp-cosmo-pulse{
  0%,100%{opacity:.8;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}
#fp-earth-canvas{
  position:relative;z-index:2;
  width:300px !important;height:300px !important;
  border-radius:50%;display:block;
  box-shadow:0 0 50px rgba(30,136,229,.35),0 0 100px rgba(30,136,229,.14);
  transition:box-shadow .8s;
}
#fp-earth-canvas.moon-shadow{
  box-shadow:0 0 40px rgba(140,140,160,.25),0 0 80px rgba(140,140,160,.10);
}
.fp-cosmo-text{flex:1;min-width:0;}
.fp-cosmo-tag{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#4fc3f7;margin:0 0 22px;opacity:.9;
}
.fp-cosmo-h1{
  font-size:clamp(2.4rem,5vw,4rem);font-weight:700;line-height:1.1;
  color:#eaeaf0;margin:0 0 26px;letter-spacing:-.02em;
}
.fp-cosmo-h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#4fc3f7,#7c4dff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fp-cosmo-rule{width:48px;height:2px;background:linear-gradient(90deg,#4fc3f7,transparent);margin:0 0 26px;border-radius:2px;}
.fp-cosmo-sub{font-size:1.06rem;line-height:1.68;color:#9a9ab0;margin:0 0 40px;max-width:520px;}
.fp-cosmo-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 30px;
  background:linear-gradient(135deg,rgba(79,195,247,.13),rgba(124,77,255,.13));
  border:1px solid rgba(79,195,247,.24);border-radius:8px;
  color:#4fc3f7;font-size:.96rem;font-weight:500;
  text-decoration:none;transition:background .2s,border-color .2s,transform .15s;white-space:nowrap;
}
.fp-cosmo-btn:hover{
  background:linear-gradient(135deg,rgba(79,195,247,.22),rgba(124,77,255,.22));
  border-color:rgba(79,195,247,.45);transform:translateY(-2px);
}
.fp-cosmo-admin-badge{
  position:absolute;top:12px;right:16px;z-index:10;
  padding:4px 10px;border-radius:5px;font-size:.68rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:rgba(255,120,120,.9);
}
@media(max-width:768px){
  .fp-cosmo{padding:72px 20px 50px;min-height:auto;}
  .fp-cosmo-inner{flex-direction:column;gap:44px;text-align:center;}
  .fp-cosmo-globe-wrap{width:220px;}
  .fp-globe-canvas-wrap{width:220px;height:220px;}
  #fp-earth-canvas{width:220px !important;height:220px !important;}
  .fp-cosmo-atmos{inset:-14px;}
  .fp-cosmo-rule{margin:0 auto 24px;}
  .fp-cosmo-sub{margin:0 auto 32px;}
  .fp-planet-switcher{justify-content:center;}
}

/* ---- Modals ---- */
.fp-modal-overlay{z-index:100000!important;}
.fp-modal-h em{font-style:inherit;color:inherit;}
.fp-v2-min{color:var(--accent-green,#27ae60);font-weight:700;font-size:.48em;vertical-align:baseline;letter-spacing:.02em;line-height:1;}
.fp-modal--scroll{max-height:85vh;overflow-y:auto;}
.fp-modal--scroll::-webkit-scrollbar{width:4px;}
.fp-modal--scroll::-webkit-scrollbar-thumb{background:var(--color-border,rgba(0,0,0,.15));border-radius:2px;}
.fp-modal-countries{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.fp-mc-section h3{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.5;margin:0 0 4px;}
.fp-mc-section p{margin:0;font-size:.9rem;line-height:1.55;}
.fp-mc-list{opacity:.75;}
.fp-v2-plus52{display:inline-block;font-size:.38em;font-weight:700;line-height:1;padding:2px 6px;border-radius:20px;background:var(--color-accent,#1a3a6b);color:#fff;vertical-align:super;margin-left:3px;opacity:.9;}

/* ---- FIDS Widget ---- */
.fp-fids{background:#0a0e1a;border-radius:12px;padding:13px 15px;font-family:'Outfit',system-ui,sans-serif;width:100%;box-sizing:border-box;}
        .fp-fids-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
        .fp-fids-title{color:#4fc3f7;font-size:9px;letter-spacing:.14em;font-weight:500;}
        .fp-fids-clock{color:#4fc3f7;font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;}
        .fp-fids-cols{display:grid;grid-template-columns:46px 1fr 46px 32px 24px 46px 74px;border-bottom:1px solid #1c2540;padding-bottom:4px;margin-bottom:3px;}
        .fp-fids-col{font-size:8px;color:#3a5070;letter-spacing:.05em;padding:0 3px;text-transform:uppercase;}
        .fp-fids-body{min-height:148px;}
        .fp-fids-row{display:grid;grid-template-columns:46px 1fr 46px 32px 24px 46px 74px;padding:4px 0;border-bottom:1px solid rgba(28,37,64,.55);}
        .fp-fids-row.fp-fids-new{animation:fpFidsIn .45s ease forwards;}
        @keyframes fpFidsIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}
        .fp-fids-cell{font-size:10px;color:#c8d8e8;padding:0 3px;display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;}
        .fp-fids-cell.fp-fids-code{color:#7bb8e8;font-weight:500;}
        .fp-fids-cell.fp-fids-dest{color:#e8eff8;font-size:9px;}
        .fp-fids-cell.fp-fids-term{color:#5a7a9a;font-size:9px;}
        .fp-fids-st{font-size:8px;padding:2px 5px;border-radius:3px;font-weight:500;letter-spacing:.04em;white-space:nowrap;}
        .fp-fids-st-ontime{background:rgba(22,163,74,.18);color:#4ade80;}
        .fp-fids-st-boarding{background:rgba(234,179,8,.18);color:#fde047;animation:fpBlink 1.2s ease-in-out infinite;}
        .fp-fids-st-checkin{background:rgba(59,130,246,.18);color:#93c5fd;}
        .fp-fids-st-delayed{background:rgba(239,68,68,.18);color:#f87171;}
        .fp-fids-st-departed{background:rgba(100,116,139,.12);color:#64748b;}
        .fp-fids-st-final{background:rgba(239,68,68,.22);color:#fca5a5;animation:fpBlink .8s ease-in-out infinite;}
        @keyframes fpBlink{0%,100%{opacity:1;}50%{opacity:.4;}}
        .fp-fids-live{display:inline-flex;align-items:center;gap:2px;font-size:7px;padding:1px 4px;border-radius:3px;background:rgba(34,197,94,.13);color:#4ade80;border:0.5px solid rgba(34,197,94,.3);}
        .fp-fids-livedot{width:4px;height:4px;border-radius:50%;background:#4ade80;animation:fpBlink .9s ease-in-out infinite;flex-shrink:0;}
        .fp-fids-footer{display:flex;justify-content:space-between;align-items:center;margin-top:9px;}
        .fp-fids-badge{background:rgba(79,195,247,.1);border:1px solid rgba(79,195,247,.25);color:#4fc3f7;font-size:8px;padding:2px 9px;border-radius:20px;}
        .fp-fids-upd{font-size:8px;color:#2a4060;}
        .fp-fids-airports{display:flex;gap:5px;align-items:center;}
        .fp-fids-ap{font-size:8px;font-weight:500;color:#4fc3f7;text-decoration:none;padding:1px 5px;border:0.5px solid rgba(79,195,247,.3);border-radius:3px;}
        .fp-fids-ap:hover{background:rgba(79,195,247,.1);}

/* ---- Field Notes — Good to Know ---- */
.fp-fn{
  padding:72px 24px 80px;
  background:var(--bg-base);
}
.fp-fn-inner{
  max-width:1100px;margin:0 auto;
}
.fp-fn-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:48px;gap:16px;
}
.fp-fn-hl{
  display:flex;align-items:center;gap:12px;
}
.fp-fn-tag{
  font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-blue);
}
.fp-fn-sep{width:28px;height:1px;background:var(--border-strong);flex-shrink:0;}
.fp-fn-title{
  font-size:1.5rem;font-weight:700;color:var(--text-primary);
  letter-spacing:-.025em;margin:0;
}
.fp-fn-all{
  font-size:.8rem;font-weight:500;color:var(--text-secondary);
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  transition:color .15s;white-space:nowrap;
}
.fp-fn-all:hover{color:var(--accent-blue);}
.fp-fn-all svg{transition:transform .15s;}
.fp-fn-all:hover svg{transform:translateX(3px);}

/* grid */
.fp-fn-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}

/* card */
.fp-fn-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border-default);
  border-radius:14px;
  text-decoration:none;
  overflow:hidden;
  transition:border-color .18s,transform .2s,box-shadow .2s;
}
.fp-fn-card:hover{
  border-color:var(--border-strong);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

/* image */
.fp-fn-img{
  width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--bg-elevated);
  position:relative;flex-shrink:0;
}
.fp-fn-img img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.fp-fn-card:hover .fp-fn-img img{transform:scale(1.04);}
.fp-fn-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-elevated) 0%,var(--bg-hover) 100%);
}
.fp-fn-img-placeholder svg{opacity:.18;}

/* body */
.fp-fn-body{
  padding:20px 22px 22px;
  display:flex;flex-direction:column;flex:1;
}
.fp-fn-meta{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.fp-fn-date{
  font-size:.72rem;color:var(--text-tertiary);
}
.fp-fn-card-title{
  font-size:.98rem;font-weight:600;line-height:1.45;
  color:var(--text-primary);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fp-fn-excerpt{
  font-size:.85rem;line-height:1.62;color:var(--text-secondary);
  margin:0 0 18px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.fp-fn-read{
  display:inline-flex;align-items:center;margin-top:auto;
  color:var(--accent-blue);
}
.fp-fn-read svg{
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s,transform .2s;
}
.fp-fn-card:hover .fp-fn-read svg{opacity:1;transform:translateX(0);}

/* responsive */
@media(max-width:900px){
  .fp-fn-grid{grid-template-columns:1fr 1fr;gap:18px;}
  .fp-fn-grid .fp-fn-card:last-child{display:none;}
}
@media(max-width:600px){
  .fp-fn{padding:52px 20px 64px;}
  .fp-fn-grid{grid-template-columns:1fr;gap:16px;}
  .fp-fn-grid .fp-fn-card:last-child{display:flex;}
  .fp-fn-head{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ---- Globe Preloader ---- */
.fp-globe-loader {
  position:absolute;inset:0;border-radius:50%;z-index:3;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:radial-gradient(ellipse at center, #071c3a 0%, #030d1f 55%, #000408 100%);
  opacity:1;transition:opacity .6s ease;
}
.fp-globe-loader.done { opacity:0; pointer-events:none; }

/* Stars inside the loader circle */
.fp-globe-loader::before {
  content:'';position:absolute;inset:0;border-radius:50%;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 55%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 15%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 50% 80%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 35%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(1.1px 1.1px at 72% 65%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 22%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 50%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 48%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1.1px 1.1px at 45% 62%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 38%, rgba(255,255,255,.45) 0%, transparent 100%);
  filter:blur(.4px);
}

/* Subtle blue glow in center */
.fp-globe-loader::after {
  content:'';position:absolute;
  width:60%;height:60%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(20,60,120,.35) 0%, transparent 70%);
  filter:blur(12px);
}

/* Spinner ring */
.fp-globe-loader-ring {
  width:34px;height:34px;border-radius:50%;position:relative;z-index:1;
  border:1.5px solid rgba(79,195,247,.12);
  border-top-color:rgba(79,195,247,.85);
  animation:fp-globe-spin .85s linear infinite;
}
@keyframes fp-globe-spin { to { transform:rotate(360deg); } }

@media(max-width:768px) {
  .fp-globe-loader-ring { width:26px;height:26px; }
}

/* Countdown number */
.fp-globe-countdown {
  position:relative;z-index:1;
  font-size:2.6rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:#4fc3f7;margin-top:14px;
  text-shadow:0 0 20px rgba(79,195,247,.5);
  transition:opacity .3s;
}

/* Launch message */
.fp-globe-launch-msg {
  position:relative;z-index:1;
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(79,195,247,.55);margin-top:8px;text-align:center;
  padding:0 12px;
}

@media(max-width:768px) {
  .fp-globe-countdown { font-size:2rem; margin-top:10px; }
  .fp-globe-launch-msg { font-size:.62rem; }
}