:root {
  color-scheme: dark;
  font-family: 'Manrope', sans-serif;
  color: #f4f7ef;
  background: #07110e;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(28, 102, 74, 0.2), transparent 35%),
    linear-gradient(145deg, #050a09 0%, #0a1713 52%, #07110e 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.glow { position: fixed; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(120px); opacity: 0.16; pointer-events: none; }
.glow--top { background: #74e0a6; top: -20rem; right: -8rem; }
.glow--bottom { background: #c5ff6b; bottom: -24rem; left: -8rem; }

main { width: min(1180px, calc(100% - 48px)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; }
.brand { color: #f4f7ef; text-decoration: none; font: 600 20px/1 'Unbounded', sans-serif; letter-spacing: -1px; }
.brand span { color: #aeea74; margin-left: 5px; }
.status { display: flex; gap: 10px; align-items: center; margin: 0; color: #a7b6ad; font-size: 13px; letter-spacing: .04em; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #aeea74; box-shadow: 0 0 0 5px rgba(174,234,116,.1); animation: pulse 2s infinite; }

.hero { margin: auto 0; padding: 7vh 0; text-align: center; }
.eyebrow { margin: 0 0 18px; color: #aeea74; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; }
h1 { margin: 0; font: 500 clamp(42px, 8vw, 100px)/1.05 'Unbounded', sans-serif; letter-spacing: -.065em; }
.subtitle { margin: 22px 0 52px; color: #839289; font-size: clamp(14px, 2vw, 17px); }

.countdown { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: clamp(8px, 2vw, 22px); align-items: start; width: min(880px, 100%); margin: auto; }
.time-card { padding: 26px 12px 20px; border: 1px solid rgba(196,228,205,.12); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); box-shadow: 0 22px 60px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.time-card strong { display: block; font: 500 clamp(33px, 6vw, 66px)/1 'Unbounded', sans-serif; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.time-card span { display: block; margin-top: 14px; color: #74857b; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.countdown > b { color: #536159; font: 400 clamp(20px, 4vw, 44px)/1 'Unbounded', sans-serif; padding-top: 33px; }
.arrived { color: #aeea74; font: 500 clamp(24px, 5vw, 50px)/1.3 'Unbounded', sans-serif; }

.arrival-card { width: min(535px, 100%); margin: 38px auto 0; padding: 17px 20px; display: flex; align-items: center; gap: 16px; text-align: left; border-top: 1px solid rgba(196,228,205,.12); border-bottom: 1px solid rgba(196,228,205,.12); }
.arrival-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(174,234,116,.3); border-radius: 50%; color: #aeea74; }
.arrival-card div:nth-child(2) { display: grid; flex: 1; }
.arrival-card span, .arrival-card small { color: #6f8076; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.arrival-card time { margin: 3px 0; font-size: 15px; font-weight: 600; }
.airport { display: grid; text-align: right; }
.airport strong { margin-top: 3px; color: #aeea74; font: 500 21px/1 'Unbounded', sans-serif; }

footer { display: flex; align-items: center; gap: 16px; padding: 28px 0 32px; color: #536159; font-size: 10px; letter-spacing: .1em; }
.route { flex: 1; display: flex; align-items: center; gap: 9px; }
.route i { height: 1px; flex: 1; background: rgba(196,228,205,.1); }
.route em { color: #718078; font-style: normal; transform: rotate(7deg); }

@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(174,234,116,0); } }

@media (max-width: 620px) {
  main { width: min(100% - 28px, 1180px); }
  .topbar { padding-top: 24px; }
  .hero { padding: 5vh 0; }
  .subtitle { margin-bottom: 38px; }
  .countdown { gap: 5px; }
  .time-card { padding: 20px 4px 16px; border-radius: 12px; }
  .time-card span { font-size: 8px; letter-spacing: .08em; margin-top: 10px; }
  .countdown > b { padding-top: 24px; }
  .arrival-card { padding-inline: 6px; }
  footer { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}