:root{
  --brand:#2d84c6; --brand-2:#78c6ff; --ink:#0f172a; --muted:#6b7280;
  --panel:#ffffff; --bg:#f7fbff; --ring:rgba(45,132,198,.35);
  --shadow:0 12px 32px rgba(16,42,74,.14); --shadow-soft:0 6px 18px rgba(16,42,74,.10);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e5e7eb; --muted:#9ca3af; --panel:#0f1628; --bg:#0b1020;
    --shadow:0 20px 40px rgba(0,0,0,.55); --shadow-soft:0 10px 24px rgba(0,0,0,.35);}
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at -10% 120%, rgba(120,198,255,.22), transparent 60%),
    radial-gradient(900px 700px at 110% -20%, rgba(45,132,198,.18), transparent 60%),
    var(--bg);
  color:var(--ink); overflow-x:hidden;
}
/* NAV */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid color-mix(in srgb,var(--brand) 12%,transparent);}
.nav__in{max-width:1200px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.nav__links{display:flex;gap:18px;align-items:center}
.nav__links a{font-weight:600;text-decoration:none;color:var(--ink);opacity:.9}
.nav__links a:hover{color:var(--brand)}
.btn,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none;cursor:pointer}
.btn{background:linear-gradient(135deg,var(--brand),#1f6da4);color:#fff;box-shadow:var(--shadow-soft)}
.btn-outline{border:1px solid color-mix(in srgb,var(--brand) 45%,#8fb9d9);color:var(--ink);background:transparent}
.btn-outline:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.nav__menu{display:none}
@media (max-width:980px){.nav__links{display:none}.nav__menu{display:block;border:0;background:transparent;padding:8px;border-radius:10px}
  .drawer{position:fixed;inset:60px 14px auto 14px;background:var(--panel);box-shadow:var(--shadow);border-radius:14px;padding:14px;display:none;flex-direction:column;gap:12px}
  .drawer a{padding:10px 8px;border-radius:10px}.drawer a:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
  .drawer--open{display:flex}}
/* HERO */
.hero{max-width:1200px;margin: clamp(24px,6vw,48px) auto;padding:0 18px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
.chip{border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);padding:7px 10px;border-radius:999px;font-size:12.5px;font-weight:700;color:color-mix(in srgb,var(--brand) 65%,var(--ink))}
.hero__title{font-size: clamp(20px,5vw,30px);line-height:1.05;margin:8px 0}
.hero__lead{color:var(--muted);font-size: clamp(15px,2.2vw,18px)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.tagrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
/* Illustration */
.sky{position:relative;height:360px;border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand-2) 14%,transparent),color-mix(in srgb,var(--panel) 92%,transparent));box-shadow:var(--shadow);overflow:hidden}
.runway{position:absolute;bottom:-50px;left:50%;transform:translateX(-50%) perspective(800px) rotateX(55deg);width:130%;height:220px;background:repeating-linear-gradient(90deg,#2a3345 0 60px,#242b3b 60px 120px);box-shadow:0 -30px 60px rgba(0,0,0,.25) inset}
.runway:after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:40%;width:70%;height:8px;background:repeating-linear-gradient(90deg,#fff 0 30px,transparent 30px 60px);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.plane{position:absolute;left:-20%;top:40%;width:120px;aspect-ratio:3/1.2;background:linear-gradient(180deg,#fff,#dfe7f3);border-radius:30px;box-shadow:0 10px 20px rgba(0,0,0,.18);animation:fly 8s linear infinite}
.plane:before{content:"";position:absolute;width:40px;height:18px;background:linear-gradient(180deg,#fff,#dfe7f3);right:20px;top:-8px;border-radius:6px 6px 0 0;transform:skewX(-10deg)}
.plane:after{content:"";position:absolute;width:30px;height:14px;background:linear-gradient(180deg,#fff,#dfe7f3);left:24px;bottom:-6px;border-radius:0 0 6px 6px;transform:skewX(10deg)}
@keyframes fly{0%{transform:translateX(0) translateY(0) rotate(-3deg)}40%{transform:translateX(60vw) translateY(-14px) rotate(3deg)}60%{transform:translateX(85vw) translateY(-18px) rotate(6deg)}100%{transform:translateX(120vw) translateY(-24px) rotate(8deg)}}
.cloud{position:absolute;width:120px;height:40px;background:#fff;border-radius:40px;top:40px;left:10%;filter:blur(.5px) drop-shadow(0 8px 16px rgba(0,0,0,.08));opacity:.9;animation:drift 38s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff}
.cloud:before{width:70px;height:70px;border-radius:50%;left:16px;top:-24px}
.cloud:after{width:60px;height:60px;border-radius:50%;left:64px;top:-16px}
.cloud.c2{top:100px;left:65%;transform:scale(.9);animation-duration:42s;opacity:.85}
.cloud.c3{top:160px;left:30%;;transform:scale(1.1);animation-duration:46s;opacity:.8}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(-70vw)}}
/* Stats strip */
.strip{max-width:1200px;margin:14px auto 0;padding:0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.strip{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.strip{grid-template-columns:1fr}}
.metric{background:var(--panel);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:12px}
.metric__badge{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#1f6da4);display:grid;place-items:center;color:#fff;font-weight:800}
.metric__label{font-size:12.5px;color:var(--muted)} .metric__num{font-size:20px;font-weight:800}
.badge{margin-left:auto;padding:6px 8px;border-radius:999px;background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand);font-size:12px;font-weight:800}
/* Sections */
.section{max-width:1200px;margin: clamp(32px,7vw,72px) auto;padding:0 18px}
.section h3{margin:0 0 12px;font-size: clamp(20px,3vw,28px)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid color-mix(in srgb,var(--brand) 8%,transparent);border-radius:16px;padding:16px;box-shadow:var(--shadow-soft);transition:transform .12s,border-color .15s,box-shadow .15s;display:flex;gap:12px;min-height:120px}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 24%,transparent);box-shadow:var(--shadow)}
.ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#1f6da4);color:#fff;display:grid;place-items:center;flex:none}
.card h4{margin:6px 0 4px;font-size:16px} .card p{color:var(--muted);margin:0;font-size:14px} .card a{margin-top:10px;display:inline-flex;gap:8px;text-decoration:none;color:var(--brand);font-weight:700;font-size:14px}
/* Tiles & footer */
.cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.tile{flex:1 1 280px;min-width:260px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand-2) 14%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--brand) 15%,transparent);border-radius:16px;padding:18px;box-shadow:var(--shadow-soft)}
.tile h4{margin:0 0 6px}.tile p{margin:0 0 12px;color:var(--muted)}
.footer{margin:40px 0 24px;text-align:center;color:var(--muted);font-size:14px}
.footer a{color:var(--brand);text-decoration:none;font-weight:700}.footer a:hover{text-decoration:underline}
/* Reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .45s, transform .45s}
.reveal.show{opacity:1;transform:none}


/* Hide mobile drawer on non-mobile screens */
.drawer{ display:none; }               /* default: hidden everywhere */
@media (max-width:980px){
  .drawer{
    position:fixed; inset:60px 14px auto 14px; background:var(--panel);
    box-shadow:var(--shadow); border-radius:14px; padding:14px;
    display:none;                      /* still hidden until toggled */
    flex-direction:column; gap:12px;
  }
  .drawer a{ padding:10px 8px; border-radius:10px; }
  .drawer a:hover{ background:color-mix(in srgb,var(--brand) 10%,transparent); }
  .drawer--open{ display:flex; }       /* shown only on mobile when toggled */
}


/* ==== FIDS DISPLAY STYLE ==== */
#fids {
  font-family: 'Roboto Mono', 'Consolas', monospace;
  color: #fff;
  background: #111;
  padding: 1.5rem;
  border-radius: 8px;
}

.fids__board {
  background: #000;
  border: 2px solid #222;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

/* === Header === */
.fids__header {
  background: #1a1a1a;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #333;
}

.fids__title {
  color: #ffcc00;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fids__meta {
  font-size: 0.9rem;
  color: #ccc;
}

/* === Table === */
.fids__board table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.fids__board thead {
  background: #222;
  color: #ffcc00;
  text-transform: uppercase;
  font-weight: bold;
}

.fids__board thead th {
  padding: 0.75rem;
  border-bottom: 2px solid #333;
  text-align: center;
  letter-spacing: 0.5px;
}

.fids__board tbody td {
  padding: 0.75rem;
  text-align: center;
  border-bottom: 1px solid #222;
  color: #f5f5f5;
}

.fids__board tbody tr:nth-child(even) {
  background: #111;
}

.fids__board tbody tr:nth-child(odd) {
  background: #161616;
}

/* Airline cell with logo */
.airline-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.airline-cell img {
  height: 22px;
  width: auto;
  vertical-align: middle;
}

/* === Status colors === */
.st {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.st--landed { color: #00ff99; }     /* Green */
.st--boarding { color: #00bfff; }   /* Blue */
.st--delay { color: #ff9933; }      /* Orange */
.st--departed { color: #999; }      /* Gray */
.st--expected { color: #66ccff; }   /* Light Blue */
.st--cancelled { color: #ff3333; }  /* Red */
.st--ontime { color: #ffff66; }     /* Yellow */

/* === Footer === */
.fids__footer {
  background: #1a1a1a;
  color: #ccc;
  padding: 0.5rem;
  text-align: center;
  border-top: 1px solid #333;
  font-size: 0.85rem;
}

/* === Animations / glow effect === */
@keyframes blink {
  50% { opacity: 0.5; }
}
.st--boarding {
  animation: blink 1.2s infinite;
}

@keyframes glow {
  from { text-shadow: 0 0 5px #ffcc00; }
  to { text-shadow: 0 0 15px #ffcc00; }
}
.fids__clock {
  color: #ffcc00;
  animation: glow 2s ease-in-out infinite alternate;
}

/* === Responsive adjustments === */
@media (max-width: 768px) {
  .fids__board table {
    font-size: 0.9rem;
  }
  .fids__board thead th,
  .fids__board tbody td {
    padding: 0.5rem;
  }
}