/* MangoExplorer, a night-sky product site: navy ground, one turquoise and one mango accent,
   the split-flap departures board as the single loud element. */
:root {
    --night: #070A1A;
    --navy: #0B1026;
    --navy-2: #121A3D;
    --navy-3: #1B2552;
    --sea: #3CD3C3;
    --sea-deep: #1FA89A;
    --mango: #FF9F1C;
    --mango-deep: #F07B12;
    --ink: #EEF2FA;
    --mist: #9AA6C2;
    --mist-2: #6E7A98;
    --line: rgba(160, 180, 230, .14);
    --glass: rgba(22, 31, 70, .55);
    --display: 'Unbounded', 'Onest', system-ui, sans-serif;
    --body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --board: 'Chakra Petch', 'Onest', monospace;
    --wrap: 1200px;
    --radius: 22px;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--night);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
.sea { color: var(--sea); }
.mango { color: var(--mango); }
.muted { color: var(--mist-2); }
.note { margin-top: 10px; color: var(--mist-2); font-size: .82rem; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--mango); color: var(--night); font-weight: 700; }
.skip:focus { left: 10px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; font: 600 1rem var(--body); text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-mango { background: linear-gradient(135deg, #FFB547, var(--mango-deep)); color: var(--night); box-shadow: 0 14px 34px -14px rgba(255, 140, 28, .8); }
.btn-mango:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(255, 140, 28, .95); }
.btn-ghost { background: rgba(255, 255, 255, .04); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: rgba(60, 211, 195, .1); box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .5); }

/* ---------- navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s ease, box-shadow .3s ease; }
.nav.is-solid { background: rgba(7, 10, 26, .82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 1.12rem var(--display); text-decoration: none; letter-spacing: -.01em; }
.brand b { color: var(--mango); font-weight: 600; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--mist); font-size: .95rem; font-weight: 500; text-decoration: none; transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { min-height: 42px; padding: 0 20px; font-size: .92rem; }
.nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); cursor: pointer; }
.nav-burger span { display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--ink); transition: transform .25s ease; }
.nav.is-open .nav-burger span:first-child { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav-burger span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 150px 0 60px; background:
    radial-gradient(900px 500px at 78% 18%, rgba(60, 211, 195, .16), transparent 60%),
    radial-gradient(700px 420px at 10% 90%, rgba(255, 159, 28, .12), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--night) 100%); }
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(60, 211, 195, .1); color: var(--sea); font-size: .88rem; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 0 rgba(60, 211, 195, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(60, 211, 195, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 211, 195, 0); } }
.hero h1 { margin: 22px 0 20px; font-size: clamp(2.3rem, 4.1vw, 3.7rem); font-weight: 800; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--mango) 0%, #FFD08A 55%, var(--sea) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 54ch; color: var(--mist); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* the split-flap board */
.board { position: relative; padding: 22px 22px 18px; border-radius: 26px; background: linear-gradient(180deg, #0E1433, #0A0F27); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 10px rgba(255, 255, 255, .015); }
.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.board-title { display: inline-flex; align-items: center; gap: 10px; color: var(--mango); font: 700 1.1rem var(--board); letter-spacing: .08em; text-transform: uppercase; }
.board-title::before { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 19h19v2h-19zM22.07 9.64c-.21-.8-1.04-1.28-1.84-1.06L14.92 10 8 3.57l-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 2.59 4.49L21 11.49c.81-.23 1.28-1.05 1.07-1.85z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 19h19v2h-19zM22.07 9.64c-.21-.8-1.04-1.28-1.84-1.06L14.92 10 8 3.57l-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 2.59 4.49L21 11.49c.81-.23 1.28-1.05 1.07-1.85z'/%3E%3C/svg%3E") center / contain no-repeat; }
.board-clock { padding: 4px 10px; border-radius: 8px; background: #05081A; color: var(--sea); font: 600 1rem var(--board); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); }
.board-cols, .board-row { display: grid; grid-template-columns: 7.2em 1fr 6.4em; gap: 10px; align-items: center; }
.board-cols { padding: 0 6px 8px; color: var(--mist-2); font: 600 .72rem var(--board); letter-spacing: .12em; text-transform: uppercase; }
.board-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.board-row { padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .02); }
.flaps { display: flex; gap: 2px; overflow: hidden; }
.flap { position: relative; display: grid; place-items: center; width: .98em; height: 1.55em; border-radius: 4px; background: linear-gradient(180deg, #27306A 0 49%, #1E2658 51% 100%); color: #F4F7FF; font: 600 clamp(.82rem, 1.35vw, 1.02rem) var(--board); text-transform: uppercase; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5); }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.flap.is-flipping { animation: flip .09s linear; }
@keyframes flip { 50% { transform: scaleY(.15); filter: brightness(1.5); } }
.status { justify-self: end; padding: 4px 9px; border-radius: 7px; font: 700 .72rem var(--board); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.status.on { background: rgba(60, 211, 195, .14); color: var(--sea); }
.status.board-mango { background: rgba(255, 159, 28, .14); color: var(--mango); }
.board-foot { margin-top: 12px; color: var(--mist-2); font-size: .8rem; text-align: center; }

.hero-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--line); }
.hero-strip div { display: flex; align-items: baseline; gap: 12px; padding: 22px 18px 0 0; }
.hero-strip b { color: var(--ink); font: 700 1.7rem var(--display); }
.hero-strip span { color: var(--mist); font-size: .92rem; line-height: 1.35; }

/* ---------- sections ---------- */
.section { position: relative; padding: 120px 0; }
.section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.section-head p { color: var(--mist); font-size: 1.08rem; }
.section-head.narrow { grid-template-columns: 1fr; gap: 12px; }

/* platform map */
.map { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: center; min-height: 520px; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow { fill: none; stroke: rgba(60, 211, 195, .5); stroke-width: 1.6; stroke-dasharray: 6 9; animation: dash 18s linear infinite; }
.flow.mango { stroke: rgba(255, 159, 28, .55); animation-direction: reverse; }
@keyframes dash { to { stroke-dashoffset: -600; } }
.map-col { position: relative; display: grid; gap: 22px; }
.map-col.right { gap: 90px; }
.node { padding: 18px 20px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); }
.node b { display: block; margin-bottom: 4px; font: 600 1rem var(--display); }
.node span { color: var(--mist); font-size: .9rem; line-height: 1.5; }
.node.mango b { color: var(--mango); }
.map-core { position: relative; display: grid; place-items: center; }
.core { display: grid; place-items: center; gap: 6px; width: min(270px, 100%); aspect-ratio: 1; padding: 30px; border-radius: 50%; text-align: center; background: radial-gradient(circle at 50% 35%, #1D2A63, #0C1232 70%); box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .35), 0 0 0 14px rgba(60, 211, 195, .05), 0 0 0 28px rgba(60, 211, 195, .03), 0 0 90px rgba(60, 211, 195, .25); }
.core img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 30px -10px rgba(59, 130, 246, .8); }
.core b { font: 700 1.15rem var(--display); }
.core span { color: var(--mist); font-size: .82rem; line-height: 1.4; }

/* journey: a real sequence, so it is numbered */
.flow-section { background: linear-gradient(180deg, transparent, rgba(18, 26, 61, .5), transparent); }
.journey { counter-reset: step; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.journey li { counter-increment: step; position: relative; padding: 52px 18px 0 0; }
.journey li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-3); color: var(--sea); font: 700 .9rem var(--display); box-shadow: 0 0 0 4px var(--night); z-index: 1; }
.journey li::after { content: ''; position: absolute; top: 17px; left: 34px; right: 0; height: 2px; background: linear-gradient(90deg, rgba(60, 211, 195, .55), rgba(60, 211, 195, .08)); }
.journey li:last-child::after { display: none; }
.journey b { display: block; margin-bottom: 6px; font: 600 1.02rem var(--display); }
.journey span { display: block; color: var(--mist); font-size: .9rem; line-height: 1.5; }

/* split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse .split-copy { order: 2; }
.split-copy { display: grid; gap: 18px; }
.split-copy > p { color: var(--mist); font-size: 1.08rem; }
.facts { display: grid; gap: 0; margin: 10px 0 0; }
.facts div { padding: 16px 0; border-top: 1px solid var(--line); }
.facts dt { margin-bottom: 4px; font: 600 1rem var(--display); }
.facts dd { margin: 0; color: var(--mist); font-size: .95rem; }
.ticks { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; color: var(--mist); }
.ticks li::before { content: ''; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 159, 28, .16); box-shadow: inset 0 0 0 5px var(--night), inset 0 0 0 16px var(--mango); }

/* browser mock */
.device { overflow: hidden; border-radius: 22px; background: #F4F8FD; color: #0F1B2D; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transition: transform .6s ease; }
.device:hover { transform: perspective(1400px) rotateY(-3deg); }
.device-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #E4ECF6; }
.device-bar i { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.device-bar i:nth-child(2) { background: #FBBF24; }
.device-bar i:nth-child(3) { background: #34D399; }
.device-bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; color: #5B6B82; font-size: .78rem; }
.device-body { display: grid; gap: 14px; padding: 18px; }
.mock-search { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -10px rgba(11, 37, 69, .3); }
.mock-search span { padding: 6px 10px; border-radius: 9px; background: #EEF4FB; font-size: .78rem; font-weight: 600; }
.mock-search b { margin-left: auto; padding: 6px 14px; border-radius: 9px; background: #E1251B; color: #fff; font-size: .78rem; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-card { display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -12px rgba(11, 37, 69, .4); font-size: .74rem; }
.mock-card i { height: 64px; margin-bottom: 6px; border-radius: 10px; background: linear-gradient(160deg, #6CC4E8, #2A7FB8 55%, #F3C98B); }
.mock-card i.b { background: linear-gradient(160deg, #8ED6C9, #2E9E8E 55%, #F2B07A); }
.mock-card i.c { background: linear-gradient(160deg, #A4C8F0, #4C7BC2 55%, #F7D9A0); }
.mock-card span { color: #5B6B82; }
.mock-card em { margin-top: 4px; color: #134A85; font-style: normal; font-weight: 700; font-size: .9rem; }
.mock-chat { display: grid; gap: 6px; font-size: .78rem; }
.mock-chat span { justify-self: end; max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #1E63AE; color: #fff; }
.mock-chat b { max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; font-weight: 500; box-shadow: 0 6px 18px -12px rgba(11, 37, 69, .4); }

/* prices */
.suppliers { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.suppliers span { padding: 10px 18px; border-radius: 999px; background: rgba(60, 211, 195, .08); color: var(--ink); font: 600 .95rem var(--display); box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .25); }
.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.chain-step { flex: 1 1 140px; padding: 18px; border-radius: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.chain-step small { display: block; color: var(--mist); font-size: .82rem; }
.chain-step b { display: block; margin-top: 4px; font: 700 1.5rem var(--display); font-variant-numeric: tabular-nums; }
.chain-step.total { background: linear-gradient(135deg, rgba(255, 159, 28, .22), rgba(255, 159, 28, .06)); box-shadow: inset 0 0 0 1px rgba(255, 159, 28, .45); }
.chain-step.total b { color: var(--mango); }
.chain-op { display: grid; place-items: center; color: var(--mist-2); font: 600 1.4rem var(--display); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 54px; }
.tiles article { padding: 24px 22px; border-top: 2px solid rgba(60, 211, 195, .35); }
.tiles article p { margin-top: 8px; color: var(--mist); font-size: .94rem; }
.tiles.four { margin-top: 0; row-gap: 34px; }

/* allotment */
.allot { padding: 24px; border-radius: 24px; background: linear-gradient(180deg, #0E1433, #0A0F27); box-shadow: inset 0 0 0 1px var(--line); }
.allot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.allot-head b { font: 600 1.05rem var(--display); }
.allot-head span { color: var(--mist); font-size: .85rem; }
.allot-rows { display: grid; gap: 10px; }
.allot-row { display: grid; grid-template-columns: 6.5em 1fr 5.5em; gap: 14px; align-items: center; font-size: .88rem; }
.allot-row time { color: var(--mist); font-variant-numeric: tabular-nums; }
.allot-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.allot-bar span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--sea-deep), var(--sea)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.allot-bar span.full { background: linear-gradient(90deg, var(--mango-deep), var(--mango)); }
.allot-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento article { padding: 26px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.bento article p { margin-top: 8px; color: var(--mist); font-size: .95rem; }
.bento .b-wide { grid-column: span 2; }
.ledger { display: grid; gap: 6px; margin-top: 18px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .25); font-size: .92rem; font-variant-numeric: tabular-nums; }
.ledger div { display: flex; justify-content: space-between; gap: 10px; }
.ledger .in b { color: var(--sea); }
.ledger .disc b { color: #FF8A8A; }
.ledger .left { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 700; }
.ledger .left b { color: var(--mango); }
.bento .reports { grid-column: 1 / -1; }
.reports ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.reports li { color: var(--mist); font-size: .95rem; }
.reports li b { display: block; color: var(--ink); }

/* advisor playground */
.advisor { background: radial-gradient(700px 400px at 85% 50%, rgba(255, 159, 28, .1), transparent 70%); }
.play { display: grid; gap: 10px; padding: 28px; border-radius: 26px; background: linear-gradient(180deg, #111942, #0B1130); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0, 0, 0, .9); }
.play h3 { margin-bottom: 6px; }
.play label { display: flex; justify-content: space-between; color: var(--mist); font-size: .92rem; }
.play output { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.play input[type=range] { width: 100%; accent-color: var(--sea); }
.verdict { margin-top: 10px; padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, .25); }
.chip { display: inline-block; padding: 5px 14px; border-radius: 999px; font: 700 .85rem var(--display); }
.chip.raise { background: rgba(255, 159, 28, .16); color: var(--mango); }
.chip.lower { background: rgba(96, 165, 250, .16); color: #8CC2FF; }
.chip.hold { background: rgba(255, 255, 255, .08); color: var(--mist); }
.verdict p { margin-top: 10px; color: var(--mist); font-size: .92rem; }
.levers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0 0; }
.levers div { padding-top: 8px; border-top: 1px solid var(--line); }
.levers dt { color: var(--mist-2); font-size: .78rem; }
.levers dd { margin: 2px 0 0; font-weight: 600; font-size: .92rem; }

/* eurosava */
.eurosava { padding: 90px 0; }
.eurosava-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding: 48px; border-radius: 30px; background: linear-gradient(135deg, rgba(60, 211, 195, .12), rgba(255, 159, 28, .08)); box-shadow: inset 0 0 0 1px var(--line); }
.eurosava-inner p { margin-top: 16px; color: var(--mist); }
.routes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.routes li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(7, 10, 26, .55); }
.routes b { font: 700 1.05rem var(--board); letter-spacing: .06em; }
.routes i { height: 2px; background: repeating-linear-gradient(90deg, var(--sea) 0 6px, transparent 6px 12px); }
.routes span { color: var(--mist); font-size: .82rem; text-align: right; min-width: 8em; }

/* demo */
.demo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.demo-inner > div p { margin-top: 16px; color: var(--mist); font-size: 1.08rem; }
.demo-form { display: grid; gap: 8px; padding: 28px; border-radius: 26px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.demo-form label { margin-top: 6px; color: var(--mist); font-size: .9rem; }
.demo-form input, .demo-form textarea { width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .3); color: var(--ink); font: inherit; box-shadow: inset 0 0 0 1px var(--line); }
.demo-form input:focus, .demo-form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sea); }
.demo-form .btn { margin-top: 14px; }
.form-msg { min-height: 1.4em; font-size: .92rem; }
.form-msg.ok { color: var(--sea); }
.form-msg.bad { color: #FF9A9A; }


/* ---------- features page ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--sea); }
.fhero { padding: 150px 0 40px; background: radial-gradient(800px 380px at 80% 0%, rgba(60, 211, 195, .14), transparent 65%), linear-gradient(180deg, var(--navy), var(--night)); }
.fhero h1 { margin-bottom: 16px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; }
.fhero h1 em { font-style: normal; background: linear-gradient(100deg, var(--mango), #FFD08A 55%, var(--sea)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.finder { position: relative; display: flex; align-items: center; max-width: 640px; margin-top: 30px; }
.finder svg { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--sea); pointer-events: none; }
.finder input { width: 100%; padding: 16px 150px 16px 50px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ink); font: 500 1rem var(--body); box-shadow: inset 0 0 0 1px var(--line); }
.finder input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sea); }
.finder input::placeholder { color: var(--mist-2); }
.finder-count { position: absolute; right: 20px; color: var(--mist); font-size: .85rem; font-variant-numeric: tabular-nums; }
.flayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding: 40px 0 40px; }
.findex { position: sticky; top: 100px; align-self: start; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; }
.findex a { padding: 7px 12px; border-radius: 10px; color: var(--mist); font-size: .92rem; text-decoration: none; transition: background .2s ease, color .2s ease; }
.findex a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.findex a.is-current { color: var(--ink); background: rgba(60, 211, 195, .12); box-shadow: inset 2px 0 0 var(--sea); }
.fbody { display: grid; gap: 70px; min-width: 0; }
.fgroup { scroll-margin-top: 100px; }
.fgroup header { display: grid; gap: 6px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fgroup h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.fgroup header p { color: var(--mist); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fgrid article { padding: 20px 22px; border-radius: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s ease, transform .2s ease; }
.fgrid article:hover { box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .45); transform: translateY(-2px); }
.fgrid article p { margin-top: 6px; color: var(--mist); font-size: .94rem; }
.fempty { padding: 40px; border-radius: 20px; background: var(--glass); color: var(--mist); text-align: center; }
.demo-strip { padding: 60px 0 110px; }
.demo-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 44px; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 159, 28, .14), rgba(60, 211, 195, .08)); box-shadow: inset 0 0 0 1px var(--line); }
.demo-strip h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
@media (max-width: 900px) {
    .flayout { grid-template-columns: 1fr; gap: 24px; }
    .findex { position: static; display: flex; gap: 6px; overflow-x: auto; max-height: none; padding-bottom: 6px; }
    .findex a { flex: none; background: rgba(255, 255, 255, .04); }
    .fgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .finder input { padding-right: 20px; }
    .finder-count { position: static; display: block; }
    .finder { flex-wrap: wrap; gap: 8px; }
    .finder svg { top: 17px; }
    .demo-strip-inner { padding: 28px 22px; }
}

/* ---------- footer ---------- */
.foot { position: relative; overflow: hidden; padding: 80px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--night), #050716); }
.foot-glow { position: absolute; left: 50%; top: -260px; width: 900px; height: 420px; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 211, 195, .18), transparent); pointer-events: none; }
.foot-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 64px; padding: 36px 40px; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 159, 28, .14), rgba(60, 211, 195, .08)); box-shadow: inset 0 0 0 1px var(--line); }
.foot-cta h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.foot-cta p { margin-top: 8px; color: var(--mist); }
.foot-grid { position: relative; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.foot-brand p { margin-top: 16px; max-width: 34ch; color: var(--mist); font-size: .94rem; }
.foot-live { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(60, 211, 195, .08); color: var(--sea) !important; font-size: .86rem !important; font-weight: 600; }
.foot-live a { color: inherit; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot-col h3 { margin-bottom: 6px; color: var(--ink); font: 600 .95rem var(--display); }
.foot-col a, .foot-col span { position: relative; width: fit-content; color: var(--mist); font-size: .92rem; text-decoration: none; }
.foot-col a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--sea); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.foot-col a:hover { color: var(--ink); }
.foot-col a:hover::after { transform: scaleX(1); }
.foot-langs { display: flex; gap: 6px; margin-top: 6px; }
.foot-langs span { padding: 3px 9px; border-radius: 7px; background: rgba(255, 255, 255, .05); color: var(--mist); font: 600 .78rem var(--board); letter-spacing: .06em; box-shadow: inset 0 0 0 1px var(--line); }
.foot-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--mist-2); font-size: .86rem; }
.foot-stack { margin-left: auto; }
.foot-top { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(60, 211, 195, .1); color: var(--sea); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .35); transition: transform .25s ease, background .25s ease; }
.foot-top:hover { transform: translateY(-3px); background: rgba(60, 211, 195, .2); }
.foot-top svg { width: 18px; height: 18px; }

/* ---------- futuristic layer ---------- */
.progress { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 3px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--sea), var(--mango)); box-shadow: 0 0 12px rgba(60, 211, 195, .7); }
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .18; animation: drift 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: -20vmax; top: -10vmax; background: var(--sea); }
.aurora i:nth-child(2) { right: -25vmax; top: 30vh; background: #3B82F6; animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { left: 20vw; bottom: -35vmax; background: var(--mango); opacity: .1; animation-duration: 38s; animation-delay: -16s; }
@keyframes drift { 50% { transform: translate(8vmax, 6vmax) scale(1.15); } 100% { transform: translate(-6vmax, 10vmax) scale(.95); } }
body { background: transparent; }
html { background: var(--night); }

.horizon { position: absolute; left: -10%; right: -10%; bottom: 0; height: 260px; pointer-events: none; background-image: linear-gradient(rgba(60, 211, 195, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 211, 195, .28) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(420px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%); animation: grid-run 4s linear infinite; }
@keyframes grid-run { to { background-position: 0 64px, 0 0; } }

.glow-border { position: relative; isolation: isolate; }
.glow-border::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 0 60%, var(--sea) 72%, var(--mango) 82%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-border 6s linear infinite; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --a: 360deg; } }

.spot { position: relative; overflow: hidden; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(60, 211, 195, .16), transparent 70%); transition: opacity .3s ease; }
.spot:hover::after { opacity: 1; }
.tilt { transition: transform .25s ease; transform-style: preserve-3d; will-change: transform; }

.marquee { position: relative; overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line); background: rgba(7, 10, 26, .6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 46px; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 46px; color: var(--mist); font: 600 1.05rem var(--display); white-space: nowrap; }
.marquee span::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mango); box-shadow: 0 0 10px var(--mango); }
@keyframes marquee { to { transform: translateX(-50%); } }

.decode { font-variant-ligatures: none; }
.btn { will-change: transform; }

@media (max-width: 1080px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) {
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .foot-stack { margin-left: 0; }
    .foot-cta { padding: 26px 22px; }
    .horizon { height: 160px; }
}

/* ---------- section animations ---------- */
/* platform map: packets riding the lines */
.packet { filter: drop-shadow(0 0 6px currentColor); }
.packet[fill="#3CD3C3"] { color: #3CD3C3; }
.packet[fill="#FF9F1C"] { color: #FF9F1C; }

/* journey: a plane flying along the steps as the page scrolls */
.journey { position: relative; }
.journey .journey-plane { position: absolute; z-index: 2; top: -4px; left: calc(var(--p, 0) * (100% - 40px)); width: 42px; height: 42px; padding: 0; counter-increment: none; color: var(--mango); filter: drop-shadow(0 0 10px rgba(255, 159, 28, .8)); transition: left .15s linear; }
.journey .journey-plane::before, .journey .journey-plane::after { display: none; }
.journey .journey-plane svg { width: 100%; height: 100%; transform: rotate(90deg); }
.journey li:not(.journey-plane)::before { transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.journey li.is-lit::before { background: var(--sea); color: var(--night); box-shadow: 0 0 0 4px var(--night), 0 0 22px rgba(60, 211, 195, .8); }
.journey li.is-lit b { color: var(--ink); }
.journey li:not(.is-lit):not(.journey-plane) b { color: var(--mist); }

/* chat: the question types itself, then the answer arrives */
.mock-chat .typing { display: none; gap: 4px; width: fit-content; padding: 12px 14px; }
.mock-chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: #9AA6C2; animation: typing 1s infinite ease-in-out; }
.mock-chat .typing i:nth-child(2) { animation-delay: .15s; }
.mock-chat .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .4; } }
.mock-chat.is-typing [data-reply] { display: none; }
.mock-chat.is-waiting .typing { display: flex; }
.mock-chat [data-reply] { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.mock-chat span.is-typing::after { content: '|'; margin-left: 1px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* price chain: each step lights in turn */
.chain.is-play .chain-step, .chain.is-play .chain-op { animation: light-up .6s ease both; }
.chain.is-play > :nth-child(1) { animation-delay: .1s; }
.chain.is-play > :nth-child(2) { animation-delay: .35s; }
.chain.is-play > :nth-child(3) { animation-delay: .6s; }
.chain.is-play > :nth-child(4) { animation-delay: .85s; }
.chain.is-play > :nth-child(5) { animation-delay: 1.1s; }
.chain.is-play > :nth-child(6) { animation-delay: 1.35s; }
.chain.is-play > :nth-child(7) { animation-delay: 1.6s; }
.chain.is-play > :nth-child(8) { animation-delay: 1.85s; }
.chain.is-play > :nth-child(9) { animation: light-up .6s 2.1s ease both, total-glow 2.4s 2.7s ease-in-out infinite; }
@keyframes light-up { from { opacity: .15; transform: translateY(10px); } }
@keyframes total-glow { 50% { box-shadow: inset 0 0 0 1px rgba(255, 159, 28, .7), 0 0 34px rgba(255, 159, 28, .35); } }

/* charter route above the seats */
.allot-route { display: block; width: 100%; height: auto; margin: -4px 0 14px; overflow: visible; }
.route-line { fill: none; stroke: rgba(60, 211, 195, .5); stroke-width: 1.5; stroke-dasharray: 5 7; animation: dash 20s linear infinite; }
.route-end { fill: var(--sea); filter: drop-shadow(0 0 6px rgba(60, 211, 195, .9)); }
.route-code { fill: var(--mist); font: 700 11px var(--board); letter-spacing: .08em; }
.route-plane { filter: drop-shadow(0 0 8px rgba(255, 159, 28, .9)); }

/* ledger: lines arrive in order */
.ledger.is-play > div { animation: slide-in .5s ease both; }
.ledger.is-play > div:nth-child(2) { animation-delay: .5s; }
.ledger.is-play > div:nth-child(3) { animation-delay: 1s; }
.ledger.is-play > div:nth-child(4) { animation-delay: 1.5s; }
.ledger.is-play > div:nth-child(5) { animation-delay: 2s; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-16px); } }

/* Price Advisor radar */
.radar { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin-top: 18px; border-radius: 50%; background:
    radial-gradient(circle, transparent 0 24%, rgba(60, 211, 195, .22) 24.5% 25%, transparent 25.5% 49%, rgba(60, 211, 195, .22) 49.5% 50%, transparent 50.5% 74%, rgba(60, 211, 195, .22) 74.5% 75%, transparent 75.5%),
    linear-gradient(transparent calc(50% - .5px), rgba(60, 211, 195, .2) 50%, transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(60, 211, 195, .2) 50%, transparent calc(50% + .5px)),
    radial-gradient(circle, #0D1638, #070A1A 70%);
    box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .35), 0 0 60px rgba(60, 211, 195, .12); overflow: hidden; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(60, 211, 195, .45), transparent 70deg); animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.blip { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px; border-radius: 50%; animation: blip 4s ease-out infinite; }
.blip.raise { background: var(--mango); box-shadow: 0 0 14px var(--mango); }
.blip.keep { background: #C8D2E6; box-shadow: 0 0 10px rgba(200, 210, 230, .8); }
.blip.lower { background: #60A5FA; box-shadow: 0 0 14px #60A5FA; }
.blip:nth-of-type(2) { animation-delay: .6s; }
.blip:nth-of-type(3) { animation-delay: 1.3s; }
.blip:nth-of-type(4) { animation-delay: 2.1s; }
.blip:nth-of-type(5) { animation-delay: 2.9s; }
.blip:nth-of-type(6) { animation-delay: 3.4s; }
@keyframes blip { 0% { transform: scale(.4); opacity: .3; } 12% { transform: scale(1.4); opacity: 1; } 60% { transform: scale(1); opacity: .9; } 100% { transform: scale(.6); opacity: .25; } }
.radar-time { position: absolute; left: 50%; top: 50%; padding: 3px 9px; border-radius: 7px; background: rgba(7, 10, 26, .85); color: var(--sea); font: 700 .8rem var(--board); transform: translate(-50%, -50%); box-shadow: inset 0 0 0 1px rgba(60, 211, 195, .4); }
.radar-key { display: flex; gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--mist); }
.radar-key li::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: middle; }
.radar-key .raise::before { background: var(--mango); }
.radar-key .keep::before { background: #C8D2E6; }
.radar-key .lower::before { background: #60A5FA; }

/* planes crossing the Eurosava routes */
.routes i { position: relative; }
.routes i em { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; background: var(--mango); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 159, 28, .9)); animation: cross 5s ease-in-out infinite; }
.routes li:nth-child(2) i em { animation-delay: -1.3s; }
.routes li:nth-child(3) i em { animation-delay: -2.6s; }
.routes li:nth-child(4) i em { animation-delay: -3.9s; }
@keyframes cross { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 16px); opacity: 0; } }

@media (max-width: 1080px) { .journey .journey-plane { display: none; } .journey li::before { background: var(--sea); color: var(--night); } .journey li b { color: var(--ink) !important; } }

/* reveal on scroll: visible by default, only enhanced when JS runs */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .hero-grid, .split, .demo-inner, .eurosava-inner, .section-head { grid-template-columns: 1fr; }
    .split.reverse .split-copy { order: 0; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .journey { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
    .journey li:nth-child(3)::after { display: none; }
    .device { transform: none; }
}
@media (max-width: 860px) {
    .nav-links, .nav-cta { display: none; }
    .nav-burger { display: block; }
    .nav.is-open { background: rgba(7, 10, 26, .96); }
    .nav.is-open .nav-links { position: absolute; top: 74px; left: 0; right: 0; display: grid; gap: 0; padding: 8px 20px 20px; background: rgba(7, 10, 26, .96); box-shadow: 0 1px 0 var(--line); }
    .nav.is-open .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
    .map { grid-template-columns: 1fr; min-height: 0; }
    .map-lines { display: none; }
    .map-col.right { gap: 22px; }
    .map-core { order: -1; }
    .bento { grid-template-columns: 1fr; }
    .bento .b-wide { grid-column: auto; }
    .reports ul { grid-template-columns: 1fr; }
    .hero-strip { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 84px 0; }
}
@media (max-width: 560px) {
    .wrap { width: calc(100% - 32px); }
    .hero { padding-top: 120px; }
    .tiles, .journey, .levers { grid-template-columns: 1fr; }
    .journey li::after { display: none; }
    .mock-cards { grid-template-columns: 1fr 1fr; }
    .mock-cards .mock-card:last-child { display: none; }
    .board { padding: 16px 12px; }
    .flaps { gap: 1px; }
    .flap { width: 1em; height: 1.6em; font-size: .74rem; }
    .board-cols, .board-row { grid-template-columns: 6.6em 1fr; gap: 6px; }
    .board-cols span:last-child, .board-row .status { display: none; }
    .eurosava-inner { padding: 28px 20px; }
    .routes span { display: none; }
    .routes li { grid-template-columns: auto 1fr auto; }
    .chain-op { flex-basis: 100%; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .reveal { opacity: 1; transform: none; }
    .aurora, .horizon { animation: none; }
    .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
    .glow-border::before { animation: none; }
    .radar-sweep, .blip, .routes i em, .route-line { animation: none; }
    .journey .journey-plane { display: none; }
    .journey li::before { background: var(--sea); color: var(--night); }
    .journey li b { color: var(--ink) !important; }
    .packet, .route-plane { display: none; }
}