@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap');

/* Design tokens used by the component classes below (buttons, tags, animations). */
:root {
  /*--color-text: #1a1815;*/
  --color-text: #163B5A;
  --color-divider: color-mix(in srgb, #1a1815 40%, transparent);
  --color-accent: #0068fa;
  --color-accent-600: #0177bf;
  --color-accent-700: #015b91;
}

html { scroll-behavior: smooth; }
a { text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading, "Inter", system-ui, sans-serif); font-weight: 700;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 999px;
}
.btn svg { display: block; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: 4px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: 8px; justify-content: flex-start; text-align: left; }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.faq summary { cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .faq-chevron { transform: rotate(180deg); }

.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-6px); }
.features-grid .lift:hover { transform: translateY(-4px); }

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes floatY2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.float-a { animation: floatY 6s ease-in-out infinite; }
.float-b { animation: floatY2 6.5s ease-in-out infinite .4s; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .4s ease, transform .4s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal.stagger.is-visible > *:nth-child(2) { transition-delay: .06s; }
.reveal.stagger.is-visible > *:nth-child(3) { transition-delay: .12s; }
.reveal.stagger.is-visible > *:nth-child(4) { transition-delay: .18s; }
.reveal.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .35s ease, transform .35s ease; }
.reveal.stagger.is-visible > * { opacity: 1; transform: none; }

@keyframes bgPan { from { background-position: 0 0; } to { background-position: 80px 80px; } }
.bg-pan { animation: bgPan 14s linear infinite; }

/* — decorative backgrounds — */
.bg-grid-pattern {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
}
.bg-grid-pattern-soft {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 5%, transparent) 1px, transparent 1px);
}
.bg-dot-pattern {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 14%, transparent) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}
.bg-diagonal-pattern {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
}
.glow-orb-accent { background: radial-gradient(circle, #bfe6fc 0%, transparent 70%); }
.glow-orb-white { background: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%); }

@keyframes dotPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); display: inline-block; animation: dotPulse 1.6s ease-in-out infinite; }

@keyframes routeDash { to { stroke-dashoffset: -240; } }
.route-dash { stroke-dasharray: 6 10; animation: routeDash 4s linear infinite; }

@keyframes quoteFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-3deg); } }
.quote-float { animation: quoteFloat 4s ease-in-out infinite; }

.icon-draw path, .icon-draw polygon, .icon-draw line, .icon-draw rect { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 1s ease; }
.reveal.is-visible .icon-draw path, .reveal.stagger.is-visible .icon-draw path,
.reveal.is-visible .icon-draw polygon, .reveal.stagger.is-visible .icon-draw polygon,
.reveal.is-visible .icon-draw line, .reveal.stagger.is-visible .icon-draw line,
.reveal.is-visible .icon-draw rect, .reveal.stagger.is-visible .icon-draw rect { stroke-dashoffset: 0; }

@keyframes iconSway { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.08); } }
.icon-motion { animation: iconSway 3.2s ease-in-out infinite; transform-origin: 50% 50%; }

@keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-in { animation: heroUp .8s cubic-bezier(.16,1,.3,1) both; }
.hero-in-1 { animation-delay: .05s; }
.hero-in-2 { animation-delay: .18s; }
.hero-in-3 { animation-delay: .32s; }
.hero-in-4 { animation-delay: .46s; }
.hero-in-5 { animation-delay: .58s; }

@keyframes dashMove { to { stroke-dashoffset: -200; } }
.flight-path { stroke-dasharray: 2 14; animation: dashMove 6s linear infinite; }

@keyframes flyPath { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.plane-fly { position: absolute; top: 0; left: 0; offset-path: path('M 10 210 C 220 40, 420 40, 600 150'); animation: flyPath 7s linear infinite; }

@keyframes pulseGlow { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .6; transform: scale(1.06); } }
.glow-orb { animation: pulseGlow 5s ease-in-out infinite; }

.nav-link { position: relative; text-decoration: none; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--color-accent); transition: width .25s ease; }
.nav-link:hover::after { width: 100%; }

.btn-primary-anim { position: relative; overflow: hidden; }
.btn-primary-anim::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn-primary-anim:hover::after { left: 130%; }
.btn-primary-anim svg { transition: transform .25s ease; }
.btn-primary-anim:hover svg { transform: translateX(4px); }

.kicker-draw { position: relative; display: inline-block; }
.kicker-draw::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--color-accent); transition: width .6s ease .1s; }
.reveal.is-visible .kicker-draw::after { width: 32px; }

/* — editorial redesign additions — */

/* Hero illustration: flight path draws itself in, then the plane fades in
   at its tip. Plain CSS animation (like .hero-in) so it always plays on
   load, independent of the scroll-reveal system. */
@keyframes drawPath { to { stroke-dashoffset: 0; } }
.hero-illustration-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawPath 1.7s cubic-bezier(.16,1,.3,1) 1.05s forwards;
}
@keyframes planeFadeIn { to { opacity: 1; } }
.hero-illustration-plane { opacity: 0; animation: planeFadeIn .7s ease 2.2s forwards; }

@keyframes driftSlow { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,-16px); } }
@keyframes driftSlow2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,-10px); } }
.drift-a { animation: driftSlow 9s ease-in-out infinite; }
.drift-b { animation: driftSlow2 11s ease-in-out infinite .5s; }

@keyframes altitudeRing { 0% { transform: scale(.94); opacity: 0; } 8% { opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
.altitude-ring { animation: altitudeRing 4.5s ease-out infinite; transform-origin: center; }
.altitude-ring-2 { animation-delay: 1.5s; }
.altitude-ring-3 { animation-delay: 3s; }

/* Deep contrast band used by the CTA section. */
.bg-navy-gradient {
  background-image: radial-gradient(ellipse at 70% 0%, rgba(255,255,255,.10) 0%, transparent 55%), linear-gradient(155deg, #012a42 0%, #014064 46%, #0177bf 100%);
}

.quote-mark { line-height: 1; }

.rule-fade { background: linear-gradient(90deg, transparent, var(--color-divider) 15%, var(--color-divider) 85%, transparent); }

.pill-number { font-variant-numeric: tabular-nums; }

/* Full-bleed image band with a readable overlay for text on top. */
.image-overlay {
  background-image: linear-gradient(180deg, rgba(1,42,66,.55) 0%, rgba(1,42,66,.72) 100%);
}