/* Atlas: a dusk sky. Indigo to coral is the only colour that moves; it marks
 * the main action, the route, and a price that dropped. */
:root{ --a1:#4F46E5; --a2:#E1533F; --ok:#0F9D74; --grad:linear-gradient(90deg,#818CF8,#FB923C); --on-grad:#120E26; --bg:#F5F5FA; --card2:#EEEEF7 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --a1:#A5B4FC; --a2:#FDBA74; --ok:#6EE7B7; --bg:#0E0B22; --bg2:#131030; --card:#191539; --card2:#211C47 } }
:root[data-theme="dark"]{ --a1:#A5B4FC; --a2:#FDBA74; --ok:#6EE7B7; --bg:#0E0B22; --bg2:#131030; --card:#191539; --card2:#211C47 }
.hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .pulse{margin-top:6px;max-height:90px}
.phone .ask{background:radial-gradient(120% 90% at 85% 0%,rgba(251,146,60,.38),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(129,140,248,.34),transparent 60%),#191539}

.crewbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.crewbar .cb{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--card2);animation:rise .4s var(--ease) both;animation-delay:calc(var(--i) * 70ms);position:relative}
.crewbar .cb img{width:40px;height:40px;border-radius:12px;flex:none}
.crewbar .cb b{display:block;font-family:var(--display);font-size:.98rem;letter-spacing:-.02em}
.crewbar .cb span{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.crewbar .cb.live::after{content:"";position:absolute;top:12px;inset-inline-end:12px;width:8px;height:8px;border-radius:99px;background:var(--ok);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@media (max-width:700px){ .crewbar{grid-template-columns:1fr} }

/* a trip: the route, the dates, the weather, the price against the budget */
.trip{padding:0;overflow:hidden}
.trip .sky{position:relative;padding:20px 22px 18px;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--a2) 26%,transparent),transparent 60%),radial-gradient(100% 120% at 0% 100%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 60%),var(--card2)}
.route{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;letter-spacing:-.03em}
.route .code{font-size:clamp(1.6rem,4.5vw,2.2rem)}
.route .arc{flex:1;height:26px;min-width:40px}
.trip h3{margin:2px 0 0;font-size:1.25rem}
.trip .meta{color:var(--muted);font-size:.9rem;margin-top:4px}
.trip .body{padding:16px 22px 18px;display:grid;gap:12px}
.facts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.facts3 div{padding:10px 12px;border-radius:14px;background:var(--card2)}
.facts3 b{display:block;font-size:1.05rem} .facts3 span{color:var(--muted);font-size:.8rem}
.budget{height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.budget i{display:block;height:100%;background:var(--grad);border-radius:99px}
.offer{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--card);font-size:.9rem}
.offer b{white-space:nowrap}
.searches{display:flex;flex-wrap:wrap;gap:8px}
.trip .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.planner .two{margin-top:0}
.safe{display:flex;gap:8px;align-items:flex-start;margin-top:12px} .safe svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}