/* Landing page only: scroll-driven showcase built on the real app recordings in assets/showcase. */

html, body { overflow-x: clip; }
body.home {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(77,163,255,0.16), transparent 62%),
    radial-gradient(900px 600px at 50% 118%, rgba(61,214,140,0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

.hero { padding-block: 12px 0; text-align: center; }
.hero h1 { font-size: clamp(32px, 5.4vw, 56px); margin: 18px auto 16px; max-width: 16ch; letter-spacing: -0.02em; line-height: 1.08; }
.hero .lede { max-width: 600px; margin: 0 auto 30px; color: var(--text-muted); font-size: 17px; }
.hero .brandblock .iconstage { width: 240px; height: 170px; margin-bottom: 0; }
.hero .brandblock .icon { width: auto; height: 118px; border-radius: 0; }
.hero .brandblock .wordmark { height: 62px; margin-bottom: 12px; }
@media (max-width: 480px) { .hero .brandblock .iconstage { width: 190px; height: 130px; } .hero .brandblock .icon { width: auto; height: 90px; } .hero .brandblock .wordmark { height: 46px; } }
.ctarow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.storerow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ctanote { color: var(--text-faint); font-size: 13px; margin-top: 8px; }

.betabadge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22,35,58,0.7); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
  font-size: 13px; color: var(--text-muted);
}
.betabadge .dot { width: 8px; height: 8px; border-radius: 5px; background: var(--success); animation: dotping 2s ease-out infinite; }
@keyframes dotping { 0% { box-shadow: 0 0 0 0 rgba(61,214,140,0.55); } 70% { box-shadow: 0 0 0 7px rgba(61,214,140,0); } 100% { box-shadow: 0 0 0 0 rgba(61,214,140,0); } }

/* ---------- hero devices: side phones spread out and sharpen as you scroll ---------- */

.herodevices {
  --hp: 0;
  --spread: 170px;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 36px 0 30px;
}
.herodevices::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 760px; height: 560px; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(77,163,255,0.30), rgba(61,214,140,0.08) 60%, transparent 78%);
  filter: blur(40px); pointer-events: none;
}
.herodevices .center {
  --w: 280px;
  z-index: 2;
  transform: translateY(calc((1 - var(--hp)) * 26px)) scale(calc(0.95 + var(--hp) * 0.05));
}
.herodevices .side {
  --w: 232px;
  position: absolute; left: 50%; top: 118px; z-index: 1;
  opacity: calc(0.35 + var(--hp) * 0.4);
  filter: blur(calc((1 - var(--hp)) * 6px + 1.5px)) brightness(0.6);
}
.herodevices .side.l { transform: translateX(calc(-50% - 70px - var(--hp) * var(--spread))) rotate(-8deg); }
.herodevices .side.r { transform: translateX(calc(-50% + 70px + var(--hp) * var(--spread))) rotate(8deg); }
.herodevices .caption {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ---------- big centered section heads ---------- */

.bighead { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.bighead h2 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.bighead p { color: var(--text-muted); font-size: 16.5px; margin: 0 auto; max-width: 58ch; }

/* ---------- "designed to the detail": copy · floating status pills · phone in hand ---------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 280px minmax(0, 1.25fr);
  gap: 28px;
  align-items: center;
  padding-block: 90px 60px;
}
.detail-copy h2 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 20px; }
.detail-copy p { color: var(--text-muted); font-size: 15.5px; margin: 0 0 14px; }

.pillcol {
  height: 540px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
.pilltrack { display: flex; flex-direction: column; gap: 14px; padding-right: 22px; animation: pillscroll 38s linear infinite; }
.pillcol:hover .pilltrack { animation-play-state: paused; }
@keyframes pillscroll { to { transform: translateY(calc(-50% - 7px)); } }
.pill {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 20px;
  background: rgba(22,35,58,0.78);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.pill:nth-child(even) { margin-left: 22px; margin-right: -22px; }
.pillcol { margin-right: -22px; }
.pill svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--text); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pill h3 { font-size: 16.5px; line-height: 1.25; }
.pill p { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.pill .ok { color: var(--success); font-weight: 600; white-space: nowrap; }
.pill .warn { color: var(--gold); font-weight: 600; white-space: nowrap; }

.photohand { position: relative; width: 560px; height: 610px; justify-self: end; margin-right: -130px; }
.photohand::before {
  content: ""; position: absolute; left: 0; top: 0; width: 70%; height: 70%;
  background: radial-gradient(closest-side, rgba(77,163,255,0.22), transparent 75%);
  filter: blur(30px); pointer-events: none;
}
/* The recording sits under the photo's transparent screen; the matrix maps it onto that screen's
   four corners (scripts/showcase: hand photo from Pexels, background removed with rembg). */
.photohand-screen {
  position: absolute; left: 0; top: 0; width: 300px; height: 652.24px;
  transform-origin: 0 0; transform: matrix3d(0.50306328,-0.33104945,0,-5.4479584e-06,0.35739283,0.50587805,0,5.8304611e-05,0,0,1,0,-0.57723826,100.944,0,1);
  background: #0b1220; overflow: hidden;
}
.photohand-screen > video, .photohand-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photohand-img {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
  mask-image: linear-gradient(to top, transparent 0%, #000 22%);
}

/* ---------- sticky story: the list drives which recording plays ---------- */

.story { padding-block: 80px 40px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.story-list { list-style: none; margin: 0; padding: 0; }
.story-item {
  min-height: 74vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 26px;
  border-left: 2px solid var(--border);
  opacity: 0.25; filter: blur(1.5px);
  transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.5s ease;
}
.story-item.active { opacity: 1; filter: none; border-color: var(--accent); }
.story-item .kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.story-item h3 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 14px; }
.story-item p { color: var(--text-muted); font-size: 16px; max-width: 44ch; margin: 0; }
.story-item .story-inline { display: none; }
.story-stage { position: sticky; top: 7vh; height: 86vh; display: flex; align-items: center; }
.stage-panel {
  width: 100%; height: 100%; max-height: 740px;
  border-radius: 32px;
  background: radial-gradient(120% 80% at 50% 0%, #1b2b46, #0e1826 72%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.stage-panel .device { --w: min(280px, 30vh); }
.stage-panel .screen > video, .stage-panel .screen > img {
  position: absolute; inset: 0;
  opacity: 0; filter: blur(10px);
  transition: opacity 0.55s ease, filter 0.55s ease;
}
.stage-panel .screen > .active { opacity: 1; filter: none; }

/* ---------- spotlights: one feature, its recording, blurred stills behind ---------- */

.spot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-block: 70px;
}
.spot.flip .spot-visual { order: 2; }
.spot-visual { position: relative; display: flex; justify-content: center; padding-block: 24px; }
.spot-visual .device { --w: 250px; z-index: 2; }
.spot-visual .ghost {
  position: absolute; left: 50%; top: 14%;
  width: 190px; border-radius: 26px; overflow: hidden;
  filter: blur(3px) brightness(0.42) saturate(0.8);
  opacity: 0.8; z-index: 1;
  transition: transform 1.3s cubic-bezier(.16,.84,.44,1);
}
.spot-visual .ghost img { display: block; width: 100%; }
.spot-visual .ghost.l { transform: translateX(calc(-50% - 110px)) scale(0.9); }
.spot-visual .ghost.r { transform: translateX(calc(-50% + 110px)) scale(0.9); }
.spot.in-view .ghost.l { transform: translateX(calc(-50% - 200px)) scale(0.92) rotate(-3deg); }
.spot.in-view .ghost.r { transform: translateX(calc(-50% + 200px)) scale(0.92) rotate(3deg); }
.spot-copy h2 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 18px; }
.spot-copy p { color: var(--text-muted); font-size: 16px; margin: 0 0 14px; max-width: 48ch; }
.spot-copy .more { font-weight: 600; text-decoration: none; font-size: 15px; }
.spot-copy .more:hover { text-decoration: underline; }

/* ---------- "and everything else": phrases light up as you scroll ---------- */

.wordlight { text-align: center; padding-block: 100px 70px; }
.wordlight h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; margin-bottom: 26px; }
.lightwords {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: clamp(20px, 2.8vw, 32px); line-height: 1.5;
  max-width: 920px; margin: 0 auto;
}
.lightwords .w { opacity: 0.16; transition: opacity 0.35s ease; }
.lightwords .w.lit { opacity: 1; }
.lightwords .sep { color: var(--text-faint); opacity: 0.5; }

/* ---------- supporting sections ---------- */

.premiumband {
  background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 24px; padding: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.premiumband h2 { font-size: 22px; margin-bottom: 6px; color: var(--gold); }
.premiumband p { margin: 0; color: var(--text-muted); max-width: 46ch; font-size: 15px; }

}

.whatsnew { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.whatsnew li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.whatsnew li:last-child { border-bottom: none; }
.whatsnew .tag { flex-shrink: 0; width: 92px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--success); padding-top: 3px; }
.whatsnew .tag.import { color: var(--accent); }
.whatsnew .tag.compliance { color: var(--gold); }
.whatsnew div p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.whatsnew div strong { color: var(--text); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .pilltrack { animation: none; }
  .herodevices .side, .herodevices .center, .spot-visual .ghost { transition: none; }
  .lightwords .w { opacity: 1; }
  .story-item { opacity: 1; filter: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail-copy { grid-column: 1 / -1; }
  .photohand { zoom: 0.8; justify-self: center; margin-right: 0; }
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-stage { display: none; }
  .story-item { min-height: 0; padding: 26px 0 36px 18px; opacity: 1; filter: none; border-color: var(--accent-dim); }
  .story-item .story-inline { display: block; margin: 26px auto 0; --w: 220px; }
  .spot, .spot.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 50px; }
  .spot.flip .spot-visual { order: 0; }
  .spot-visual .ghost { width: 150px; }
  .spot.in-view .ghost.l { transform: translateX(calc(-50% - 130px)) scale(0.9) rotate(-3deg); }
  .spot.in-view .ghost.r { transform: translateX(calc(-50% + 130px)) scale(0.9) rotate(3deg); }
}
@media (max-width: 680px) {
  .detail { grid-template-columns: minmax(0, 1fr); padding-block: 60px 20px; }
  .pillcol { height: 330px; }
  .pill:nth-child(even) { margin-left: 14px; margin-right: 0; }
  .photohand { zoom: 0.62; justify-self: end; margin-right: -70px; }
  .herodevices { --spread: 40px; }
  .herodevices .center { --w: 230px; }
  .herodevices .side { --w: 180px; top: 100px; }
}

/* ---------- shared-calendar demo: a partner's calendar as the pilot toggles what to share ---------- */

.sharedemo .spot-copy { order: 1; }
.sharedemo .spot-visual { order: 2; }
.sharedemo .fine { font-size: 14px; color: var(--text-faint); }
.premium-tag {
  display: inline-block; margin-bottom: 14px; padding: 3px 10px; border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3);
}
.caldemo {
  width: 100%; max-width: 400px; padding: 18px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.caldemo-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.caldemo-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; }
.caldemo-sub { font-size: 11px; color: var(--text-faint); }
.caldemo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.caldemo-chip {
  font: 500 12px 'IBM Plex Sans', sans-serif; color: var(--text-muted); cursor: pointer;
  padding: 6px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--border-strong);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.caldemo-chip::before { content: '○ '; }
.caldemo-chip[aria-pressed="true"] { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }
.caldemo-chip[aria-pressed="true"]::before { content: '✓ '; }
.caldemo-rows { display: flex; flex-direction: column; gap: 6px; }
.calrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: stretch; height: 84px; }
.calday { font: 500 11px 'IBM Plex Mono', monospace; color: var(--text-faint); padding-top: 8px; line-height: 1.3; }
.calday b { display: block; font-size: 15px; color: var(--text-muted); font-family: 'Sora', sans-serif; }
.calslot { border-radius: 10px; border: 1px dashed transparent; position: relative; }
.calev {
  height: 100%; padding: 7px 10px; border-radius: 10px; border-left: 4px solid var(--accent);
  background: var(--accent-dim); font-size: 12px; line-height: 1.4;
  animation: calevin 0.45s ease both;
}
.calev strong { display: block; font-size: 13px; color: var(--text); }
.calev span { display: block; color: var(--text-muted); }
.calev.t-early { border-color: var(--gold); background: rgba(251,191,36,0.12); }
.calev.t-late { border-color: #2DD4BF; background: rgba(45,212,191,0.12); }
.calev.t-standby { border-color: var(--text-faint); background: rgba(143,163,187,0.12); }
.calev.t-off { border-color: var(--success); background: rgba(61,214,140,0.1); }
.calev.t-trip { border-color: var(--accent); background: var(--accent-dim); }
.calev.allday { height: auto; min-height: 30px; border-radius: 999px; padding: 5px 12px; border-left-width: 1px; border: 1px solid var(--accent); }
.calev.cont { border-top-left-radius: 0; border-top-right-radius: 0; }
.calslot.empty { border-color: var(--border); }
.caldemo-caption { margin: 14px 0 0; min-height: 44px; font-size: 13px; color: var(--text-muted); text-align: center; transition: opacity 0.3s ease; }
@keyframes calevin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .calev { animation: none; } .caldemo-chip { transition: none; } }
@media (max-width: 860px) {
  .sharedemo .spot-copy { order: 1; }
  .sharedemo .spot-visual { order: 2; }
}
.sharedemo .spot-visual, .sharedemo .spot-copy { min-width: 0; }

/* ---------- story: glow, rail and slide-in follow the active step ---------- */

.stage-panel { position: relative; }
.stage-glow { position: absolute; inset: auto -20% -30% -20%; height: 70%; border-radius: 50%; filter: blur(70px); opacity: 0.35; background: #4DA3FF; transition: background-color 0.9s ease; }
.story-stage[data-step="1"] .stage-glow { background: #FBBF24; }
.story-stage[data-step="2"] .stage-glow { background: #3DD68C; }
.story-stage[data-step="3"] .stage-glow { background: #2DD4BF; }
.stage-panel .device { position: relative; z-index: 1; transition: transform 0.9s cubic-bezier(.16,.84,.44,1); }
.story-stage[data-step="1"] .stage-panel .device { transform: rotate(-2.5deg) scale(0.97); }
.story-stage[data-step="2"] .stage-panel .device { transform: rotate(2deg) scale(1.02); }
.story-stage[data-step="3"] .stage-panel .device { transform: rotate(-1.5deg) scale(0.98); }
.story-rail { position: absolute; z-index: 2; left: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.story-rail span { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); transition: height 0.5s ease, background-color 0.5s ease; }
.story-rail span.on { height: 28px; background: var(--accent); }
.story-item { transform: translateX(-14px); transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.5s ease, transform 0.6s cubic-bezier(.16,.84,.44,1); }
.story-item.active { transform: none; }
.story-item h3::after { content: ''; display: block; width: 0; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--accent); transition: width 0.7s ease 0.15s; }
.story-item.active h3::after { width: 56px; }
@media (max-width: 860px) { .story-item { transform: none; } .story-item h3::after { width: 56px; } }
@media (prefers-reduced-motion: reduce) { .stage-panel .device, .story-item { transition: none; transform: none !important; } }

/* ---------- airlines: floating logos, a click opens the details ---------- */

.airlines { padding-block: 70px 30px; }
.logocloud { position: relative; min-height: 280px; align-content: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 34px; padding-block: 40px 20px; }
.logobubble {
  display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-decoration: none;
  width: 130px; padding: 14px 8px; border-radius: 22px; background: transparent; border: 1px solid transparent;
  font: 600 14px 'Sora', sans-serif; color: var(--text);
  animation: logobob var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.logobubble:nth-child(even) { margin-top: 26px; }
.logobubble img { width: 84px; height: 84px; border-radius: 22px; object-fit: contain; background: #fff; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform 0.35s cubic-bezier(.16,.84,.44,1); }
.logobubble:hover, .logobubble:focus-visible { animation-play-state: paused; outline: none; }
.logobubble:hover img, .logobubble:focus-visible img { transform: scale(1.1); box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 28px 6px rgba(120,190,255,0.55), 0 0 70px 18px rgba(77,163,255,0.3); }
.logobubble::after {
  content: ''; position: absolute; left: 50%; top: 14px; z-index: -1; width: 150px; height: 150px; border-radius: 50%;
  transform: translateX(-50%) scale(0.6); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(120,190,255,0.35), rgba(77,163,255,0.12) 45%, transparent 70%);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.16,.84,.44,1);
}
.logobubble:hover::after, .logobubble:focus-visible::after { opacity: 1; transform: translateX(-50%) scale(1.15); }
.logobubble:hover span, .logobubble:focus-visible span { text-shadow: 0 0 14px rgba(120,190,255,0.8); }
.logobubble.request:hover .plus { border-color: var(--accent); box-shadow: 0 0 28px 6px rgba(77,163,255,0.5); color: #fff; }
.logobubble.request { font-weight: 500; font-size: 13px; color: var(--text-muted); text-align: center; }
.logobubble .plus { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; border: 1.5px dashed var(--border-strong); font-size: 34px; color: var(--accent); }
@keyframes logobob { from { transform: translate(-12px, -10px) rotate(-1.5deg); } to { transform: translate(12px, 10px) rotate(1.5deg); } }

.airdialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto;
  color: var(--text); background: var(--card); border: 1px solid var(--border-strong); border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.airdialog[open] { animation: dialogin 0.4s cubic-bezier(.16,.84,.44,1); }
.airdialog::backdrop { background: rgba(5,10,20,0.72); backdrop-filter: blur(6px); }
.airdialog-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; }
.airdialog .device { --w: 210px; }
.airdialog-title { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.airdialog-title img { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; padding: 5px; }
.airdialog-title h3 { font-size: 26px; letter-spacing: -0.015em; }
.airdialog ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; color: var(--text-muted); font-size: 15px; }
.airdialog .more { font-weight: 600; text-decoration: none; font-size: 15px; }
.airclose { position: absolute; top: 12px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 18px; cursor: pointer; font-size: 22px; line-height: 1; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); }
.airclose:hover { border-color: var(--accent); }
@keyframes dialogin { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .airdialog-body { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 20px; justify-items: center; }
  .airdialog .device { --w: 170px; }
  .logobubble { width: 104px; }
  .logobubble img, .logobubble .plus { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) { .logobubble { animation: none; } .airdialog[open] { animation: none; } }
.caldemo-hint { margin: 0 0 10px; font-size: 12px; color: var(--accent); }
.caldemo.touched .caldemo-hint { color: var(--text-faint); }
.caldemo:not(.touched) .caldemo-chip[aria-pressed="true"] { animation: chippulse 2.4s ease-in-out infinite; }
@keyframes chippulse { 50% { box-shadow: 0 0 0 4px rgba(77,163,255,0.22); } }
.caldemo-presets { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.caldemo-preset { font: 500 12px 'IBM Plex Sans', sans-serif; color: var(--text-muted); cursor: pointer; padding: 6px 12px; border-radius: 8px; background: transparent; border: 1px solid var(--border); }
.caldemo-preset:hover { color: var(--text); border-color: var(--accent); }
.caldemo-chip { transition-property: background, color, border-color, box-shadow; }
@media (prefers-reduced-motion: reduce) { .caldemo:not(.touched) .caldemo-chip { animation: none !important; } }

/* constellation: twinkling stars behind the logos, the "+" is the star still to light */
.logocloud::before {
  content: ''; position: absolute; inset: -10px -4%; pointer-events: none; animation: twinkle 5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(2.2px 2.2px at 8% 22%, #fff, transparent), radial-gradient(1.6px 1.6px at 19% 78%, #fff, transparent),
    radial-gradient(2.2px 2.2px at 31% 12%, #fff, transparent), radial-gradient(1.6px 1.6px at 44% 88%, #fff, transparent),
    radial-gradient(2px 2px at 58% 18%, #cfe3ff, transparent), radial-gradient(1.6px 1.6px at 67% 70%, #fff, transparent),
    radial-gradient(2.2px 2.2px at 79% 30%, #fff, transparent), radial-gradient(1.6px 1.6px at 91% 82%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 96% 14%, #fff, transparent), radial-gradient(2.2px 2.2px at 3% 60%, #cfe3ff, transparent);
  opacity: 0.55;
}
.logobubble { position: relative; z-index: 1; }
.logobubble.request .plus { animation: starpulse 2.8s ease-in-out infinite; }
.constellation-note { text-align: center; max-width: 560px; margin: 26px auto 0; }
.constellation-note p { margin: 0 0 8px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; }
.constellation-note p.fine { font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes starpulse { 50% { border-color: var(--accent); box-shadow: 0 0 22px rgba(77,163,255,0.35); } }
@media (prefers-reduced-motion: reduce) { .logocloud::before, .logobubble.request .plus { animation: none; } }

/* Air Europa's launch site: the Earth's surface under the logos, shooting stars across the sky */
.airsky { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.airsky .logocloud, .airsky .launchpad { position: relative; z-index: 1; }
.shooter, .comet { position: absolute; z-index: 0; pointer-events: none; opacity: 0; transform-origin: 100% 50%; rotate: var(--r, 28deg); animation: shoot var(--p, 13s) ease-out var(--d, 0s) infinite; }
.shooter { top: var(--y); left: var(--x); width: 150px; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35) 60%, #fff); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.shooter::after, .comet::after { content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(190,225,255,0.9); }
.shooter.s1 { --x: 12%; --y: 70px; --d: -3s; --p: 14s; }
.shooter.s2 { --x: 58%; --y: 30px; --d: -9s; --p: 19s; --r: 21deg; }
.shooter.s3 { --x: 76%; --y: 190px; --d: -6s; --p: 23s; --r: 36deg; }
.comet { top: 110px; left: 4%; width: 280px; height: 5px; --r: 17deg; --p: 31s; --d: -14s; animation-name: cometfly; background: linear-gradient(90deg, transparent, rgba(120,190,255,0.35) 55%, rgba(200,230,255,0.9)); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.comet::after { width: 12px; height: 12px; margin-top: -6px; box-shadow: 0 0 16px 6px rgba(150,205,255,0.85), 0 0 40px 14px rgba(77,163,255,0.35); }
@keyframes shoot {
  0% { opacity: 0; transform: translateX(0) scaleX(0.15); }
  3% { opacity: 1; }
  10% { opacity: 0.85; transform: translateX(400px) scaleX(1); }
  15%, 100% { opacity: 0; transform: translateX(500px) scaleX(0.3); }
}
@keyframes cometfly {
  0% { opacity: 0; transform: translateX(0) scaleX(0.3); }
  5% { opacity: 1; }
  14% { opacity: 0.9; transform: translateX(560px) scaleX(1); }
  20%, 100% { opacity: 0; transform: translateX(720px) scaleX(0.4); }
}
.launchpad { height: 680px; margin-top: -20px; text-align: center; }
.launch-earth {
  position: absolute; left: 50%; top: 250px; width: 2400px; height: 2400px; margin-left: -1200px; border-radius: 50%;
  background: linear-gradient(#5db0ff 0, #2368c4 40px, #123c82 130px, #0a2250 240px, #071634 340px);
  box-shadow: 0 0 0 2px rgba(130,200,255,0.45), 0 -6px 40px 8px rgba(77,163,255,0.4), 0 -30px 120px 20px rgba(77,163,255,0.18);
  -webkit-mask-image: linear-gradient(#000 0, #000 340px, transparent 420px); mask-image: linear-gradient(#000 0, #000 340px, transparent 420px);
}
.launch-earth::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0.5;
  background: radial-gradient(180px 36px at 38% 1.2%, #3fae7a, transparent), radial-gradient(260px 44px at 56% 2.2%, #34a06e, transparent), radial-gradient(200px 30px at 66% 4%, #3fae7a, transparent), radial-gradient(150px 28px at 46% 5.5%, #2f8f63, transparent);
}
.launch-crew { position: absolute; left: calc(50% - 335px); top: 146px; width: 300px; height: 130px; overflow: visible; rotate: -8deg; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
.launch-crew .arm { transform-box: fill-box; transform-origin: 0 50%; animation: armtap 2.4s ease-in-out infinite alternate; }
.blueprint-scan { animation: bpscan 3.2s ease-in-out infinite alternate; }
.launch-tower { position: absolute; left: calc(50% + 175px); top: 76px; width: 60px; height: 180px; rotate: 6deg; overflow: visible; }
.launch-tower .beacon { animation: starpulse 1.4s ease-in-out infinite; fill: #e5484d; }
.launch-rocket { position: absolute; left: calc(50% + 10px); top: 66px; width: 120px; height: 190px; rotate: 3deg; scale: 1.4; transform-origin: 50% 160px; animation: rocketidle 3.2s ease-in-out infinite alternate; }
.launch-rocket svg { display: block; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45)); }
.launch-rocket .body { fill: #f3f6fb; }
.launch-rocket .nose { fill: #e5484d; }
.launch-rocket .fin { fill: #c93a40; }
.launch-rocket .nozzle { fill: #5b6472; }
.launch-rocket .porthole { position: absolute; left: 50%; top: 64px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe1ff 0%, #4da3ff 45%, #12326b 100%); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5b6472, 0 0 14px 3px rgba(77,163,255,0.7); }
.launch-rocket .flame { position: absolute; left: 50%; top: 160px; width: 18px; height: 30px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: linear-gradient(#fff3b0, #ffb02e 55%, rgba(255,90,40,0)); transform-origin: top; opacity: 0.75; animation: flameflick 0.18s ease-in-out infinite alternate; }
.launch-rocket .puff { position: absolute; bottom: -14px; width: 26px; height: 26px; border-radius: 50%; background: rgba(230,240,255,0.5); filter: blur(3px); animation: puffout 3.6s ease-out infinite; }
.launch-rocket .p1 { left: 8px; --dx: -30px; } .launch-rocket .p2 { left: 46px; animation-delay: -1.2s; } .launch-rocket .p3 { right: 8px; animation-delay: -2.4s; --dx: 30px; }
.launchpad .logobubble.request { position: absolute; left: calc(50% + 260px); top: 150px; width: 110px; margin: 0; padding: 6px; z-index: 2; color: #cfe3ff; text-shadow: 0 2px 10px rgba(5,10,30,0.9); rotate: 9deg; }
.launchpad .logobubble.request .plus { background: rgba(6,20,46,0.55); }
.launch-copy { position: absolute; left: 0; right: 0; top: 290px; display: grid; gap: 5px; justify-items: center; text-shadow: 0 2px 12px rgba(5,10,30,0.85); }
.launch-copy .msg-done { font-size: 14px; color: #cfe3ff; }
.launch-copy .msg { font-size: 14px; color: #cfe3ff; }
.launch-copy .msg::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
.launch-copy .wip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font: 600 12px 'Sora', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); background: rgba(10,20,40,0.75); border: 1px dashed var(--gold); }
.launch-copy .wip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: starpulse 1.6s ease-in-out infinite; }
.launchpad .constellation-note { position: absolute; left: 0; right: 0; top: 452px; margin: 0 auto; }
@keyframes rocketidle { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes flameflick { from { transform: scaleY(0.7); } to { transform: scaleY(1.1); } }
@keyframes puffout { 0% { transform: translate(0, 0) scale(0.5); opacity: 0.6; } 100% { transform: translate(var(--dx, 0px), 22px) scale(2); opacity: 0; } }
@keyframes dots { to { width: 0; } }
@keyframes armtap { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes bpscan { from { transform: translateX(0); } to { transform: translateX(112px); } }
@media (max-width: 700px) {
  .launchpad { height: 860px; }
  .launch-crew { left: calc(50% - 175px); top: 150px; width: 190px; height: 82px; }
  .launch-tower { display: none; }
  .launch-rocket { left: calc(50% + 30px); scale: 1.2; }
  .launchpad .logobubble.request { left: 50%; margin-left: -55px; top: 480px; rotate: 0deg; }
  .launch-copy { top: 300px; padding-inline: 16px; }
  .launchpad .constellation-note { top: 630px; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) { .shooter, .comet { display: none; } .launch-rocket, .launch-rocket .flame, .launch-rocket .puff, .launch-crew .arm, .blueprint-scan, .launch-copy .msg::after, .launch-copy .wip .dot, .launch-tower .beacon { animation: none; } }
.logocloud .logobubble.request.in-cloud { display: none; }
@media (max-width: 700px) {
  .logocloud .logobubble.request.in-cloud { display: flex; }
  .launchpad .logobubble.request { display: none; }
  .launchpad { height: 700px; }
  .launchpad .constellation-note { top: 470px; }
}
.faqlist { max-width: 760px; margin: 0 auto; padding: 0 20px; display: grid; gap: 10px; }
.faq { border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: 10px 0 0; color: var(--text-muted); line-height: 1.55; }