@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Syne:wght@700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
 --bg: #04050b;
 --panel: rgba(8, 12, 24, 0.78);
 --line: rgba(107, 241, 255, 0.2);
 --line-strong: rgba(107, 241, 255, 0.44);
 --text: #eaf7ff;
 --text-soft: #b5c6d8;
 --cyan: #74f9ff;
 --pink: #ff58d8;
 --violet: #a76dff;
 --gold: #ffd385;
 --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
 --radius-xl: 28px;
 --radius-lg: 22px;
 --radius-md: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
 margin: 0;
 min-height: 100vh;
 color: var(--text);
 font-family: "Space Grotesk", sans-serif;
 background:
 radial-gradient(circle at 12% 18%, rgba(89, 57, 255, 0.24), transparent 28%),
 radial-gradient(circle at 82% 8%, rgba(255, 88, 216, 0.18), transparent 24%),
 radial-gradient(circle at 50% 100%, rgba(116, 249, 255, 0.12), transparent 34%),
 linear-gradient(180deg, #03040a 0%, #050711 48%, #090611 100%);
 overflow-x: hidden;
}

body::before,
body::after {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: -1;
}

body::before {
 background-image:
 linear-gradient(var(--line) 1px, transparent 1px),
 linear-gradient(90deg, var(--line) 1px, transparent 1px);
 background-size: 52px 52px;
 mask-image: radial-gradient(circle at center, black 32%, transparent 95%);
 opacity: 0.32;
 animation: grid-drift 18s linear infinite;
}

body::after {
 background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 5px);
 opacity: 0.3;
}

.site-shell {
 width: min(1320px, calc(100% - 32px));
 margin: 0 auto;
 padding: 22px 0 56px;
}

.topbar,
.hero,
.route-panel {
 position: relative;
 border: 1px solid rgba(116, 249, 255, 0.18);
 background: linear-gradient(160deg, rgba(13, 20, 40, 0.84), rgba(9, 10, 23, 0.84));
 box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
 backdrop-filter: blur(18px);
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 24px;
 padding: 18px 22px;
 border-radius: 999px;
}

.brand {
 display: inline-flex;
 align-items: baseline;
 gap: 12px;
 color: inherit;
 text-decoration: none;
}

.brand-mark {
 font-family: "Syne", sans-serif;
 font-size: 1.15rem;
 font-weight: 800;
 letter-spacing: 0.28em;
 color: var(--cyan);
 text-shadow: 0 0 22px rgba(116, 249, 255, 0.65);
}

.brand-sub,
.status-pill,
.eyebrow,
.filter-label,
.route-type,
.route-link {
 font-family: "IBM Plex Mono", monospace;
}

.brand-sub {
 color: #f0d2ff;
 letter-spacing: 0.2em;
 font-size: 0.84rem;
}

.status-pill {
 display: inline-flex;
 align-items: center;
 padding: 8px 14px;
 border-radius: 999px;
 border: 1px solid rgba(255, 211, 133, 0.4);
 color: #ffe6b8;
 background: rgba(255, 211, 133, 0.08);
 font-size: 0.76rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}

.hero {
 padding: clamp(28px, 5vw, 56px);
 border-radius: var(--radius-xl);
 overflow: hidden;
}

.hero::before,
.route-panel::before {
 content: "";
 position: absolute;
 inset: auto -14% -28% auto;
 width: 320px;
 height: 320px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255, 88, 216, 0.26), transparent 66%);
 filter: blur(8px);
 pointer-events: none;
}

.eyebrow {
 margin: 0 0 16px;
 color: var(--cyan);
 font-size: 0.76rem;
 letter-spacing: 0.2em;
 text-transform: uppercase;
}

.hero h1,
.section-head h2 {
 margin: 0;
 letter-spacing: 0.04em;
}

.hero h1 {
 max-width: 11ch;
 font-family: "Syne", sans-serif;
 font-size: clamp(2.8rem, 8vw, 5.6rem);
 line-height: 0.94;
 background: linear-gradient(90deg, #fff 0%, var(--cyan) 30%, #fffbff 54%, var(--pink) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 text-shadow: 0 0 26px rgba(116, 249, 255, 0.18);
}

.hero-copy {
 max-width: 760px;
 margin: 18px 0 0;
 color: var(--text-soft);
 font-size: clamp(1rem, 1.2vw, 1.14rem);
 line-height: 1.7;
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 margin-top: 28px;
}

.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 color: inherit;
 text-decoration: none;
 font-weight: 700;
 transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
 color: #051018;
 background: linear-gradient(110deg, var(--cyan), var(--gold));
 box-shadow: 0 0 30px rgba(116, 249, 255, 0.18);
}

.button-secondary {
 border-color: rgba(255, 255, 255, 0.14);
 background: rgba(255, 255, 255, 0.04);
}

.hero-stats {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
 margin-top: 34px;
}

.stat-card {
 padding: 18px 18px 16px;
 border-radius: var(--radius-md);
 border: 1px solid rgba(167, 109, 255, 0.2);
 background: rgba(8, 11, 24, 0.58);
}

.stat-value {
 display: block;
 font-family: "Syne", sans-serif;
 font-size: clamp(1.6rem, 2.4vw, 2.4rem);
 color: var(--cyan);
}

.stat-label { color: var(--text-soft); font-size: 0.92rem; }

.route-panel {
 margin-top: 26px;
 padding: 28px;
 border-radius: var(--radius-xl);
}

.section-head {
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 24px;
}

.section-head h2 {
 font-family: "Syne", sans-serif;
 font-size: clamp(1.9rem, 4vw, 3rem);
}

.filter-shell { min-width: min(100%, 320px); }

.filter-label {
 display: block;
 margin-bottom: 8px;
 color: var(--text-soft);
 font-size: 0.72rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}

.filter-shell input {
 width: 100%;
 min-height: 48px;
 padding: 0 16px;
 border: 1px solid rgba(116, 249, 255, 0.18);
 border-radius: 14px;
 color: var(--text);
 background: rgba(3, 6, 14, 0.88);
 font: inherit;
}

.filter-shell input:focus {
 outline: 2px solid rgba(116, 249, 255, 0.34);
 outline-offset: 2px;
}

.route-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 18px;
}

.route-card {
 position: relative;
 display: flex;
 flex-direction: column;
 min-height: 100%;
 padding: 14px;
 border: 1px solid rgba(116, 249, 255, 0.14);
 border-radius: var(--radius-lg);
 color: inherit;
 text-decoration: none;
 background:
 linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
 linear-gradient(180deg, rgba(5, 9, 21, 0.94), rgba(10, 8, 21, 0.9));
 box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
 transform-style: preserve-3d;
 transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.route-card:hover {
 border-color: var(--line-strong);
 box-shadow: 0 18px 40px rgba(0, 0, 0, 0.44), 0 0 28px rgba(116, 249, 255, 0.12), 0 0 38px rgba(255, 88, 216, 0.08);
}

.route-card.is-hidden { display: none; }

.route-card img,
.route-card h3,
.route-card p,
.route-card .route-type,
.route-card .route-link {
 position: relative;
 z-index: 1;
}

.route-card img {
 width: 100%;
 height: 164px;
 object-fit: cover;
 border-radius: 14px;
 border: 1px solid rgba(116, 249, 255, 0.24);
}

.route-type {
 display: inline-flex;
 align-self: start;
 margin-top: 14px;
 padding: 6px 10px;
 border-radius: 999px;
 color: #f5d6ff;
 background: rgba(167, 109, 255, 0.12);
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.route-card h3 {
 margin: 14px 0 10px;
 font-size: 1.12rem;
}

.route-card p {
 margin: 0;
 color: var(--text-soft);
 font-size: 0.94rem;
 line-height: 1.6;
}

.route-link {
 margin-top: auto;
 padding-top: 18px;
 color: var(--cyan);
 font-size: 0.74rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

.empty-state {
 margin: 18px 0 4px;
 color: var(--text-soft);
}

@keyframes grid-drift {
 from { transform: translateY(0); }
 to { transform: translateY(52px); }
}

@media (max-width: 1180px) {
 .route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
 .site-shell {
 width: min(100% - 20px, 1320px);
 padding-top: 10px;
 }

 .topbar,
 .section-head {
 flex-direction: column;
 align-items: stretch;
 }

 .hero-stats { grid-template-columns: 1fr; }
 .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
 .topbar { border-radius: 24px; }
 .hero,
 .route-panel { padding: 20px; }
 .route-grid { grid-template-columns: 1fr; }

 .brand {
 flex-direction: column;
 gap: 6px;
 align-items: flex-start;
 }
}