/* ============================================================
   SKY STREAM — MOTION & REDESIGN LAYER
   White + navy/light-blue gradients, animated aurora, glass,
   spotlight, tilt, marquee. Loaded after styles.css.
   ============================================================ */
:root{
  --grad-aurora:linear-gradient(120deg,#0A1A33 0%,#0E2C5E 40%,#1E64C8 75%,#38BDF8 100%);
  --grad-soft:linear-gradient(135deg,#EAF2FD 0%,#F6FAFF 100%);
  --grad-text:linear-gradient(100deg,#1D4ED8 0%,#38BDF8 55%,#0EA5E9 100%);
  --glass:rgba(255,255,255,.72);
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,#1D4ED8,#38BDF8,#0EA5E9);box-shadow:0 0 12px rgba(56,189,248,.7);
  transition:width .1s linear}

/* ---------- animated gradient headline accent ---------- */
.accent, .sec-head h2 .accent, h1 .grad, h2 .accent{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* ---------- hand-drawn brush underline under accent words ---------- */
h1 .grad, h2 .accent, .sec-head h2 .accent, .split-head h2 .accent, .prose h2 .accent{
  position:relative;display:inline-block;padding-bottom:.16em}
h1 .grad::after, h2 .accent::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:.34em;
  background:url(../img/underline.svg) no-repeat center/100% 100%;
  animation:drawLine 1.1s var(--ease) .25s both}
.page-hero h1 .grad::after{background-image:url(../img/underline-gold.svg)}
@keyframes drawLine{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- dotted background pattern (hero) ---------- */
.hero-dots{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(37,99,235,.18) 1.5px,transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 100% at 70% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 70% 30%,#000 30%,transparent 78%);opacity:.7}
.hero-dots.dark{background-image:radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.6px);opacity:.5}

/* real flag images fill circular badge */
.flag img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* brand logo image (header) */
.brand-logo{height:82px;width:auto;max-width:300px;object-fit:contain;display:block}
.site-header.scrolled .brand-logo{height:70px;transition:height .3s var(--ease)}
@media(max-width:900px){.brand-logo{height:60px}}
/* footer logo — white badge on navy */
.foot-logo{display:inline-block;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}
.foot-logo img{height:84px;width:auto;max-width:260px;object-fit:contain;display:block}
.foot-brand-logo{display:inline-flex}
/* credit line */
.foot-credit{text-align:center;padding:14px 0 6px;font-size:.82rem;color:#7d95b8;
  border-top:1px solid rgba(255,255,255,.08)}
.foot-credit a{color:var(--sky);font-weight:600}
.foot-credit a:hover{text-decoration:underline}

/* ---------- flying planes / dashed routes ---------- */
.hero-flight{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero.hero-light .hero-flight{opacity:.9}
.page-hero .hero-flight{opacity:.8}

/* ============================================================
   SKY HERO (cloud background + fanned landmark cards)
   ============================================================ */
.hero.hero-sky{background:#7CBDF5;color:#fff;padding:clamp(24px,4vw,44px) 0 clamp(56px,7vw,96px);
  text-align:center;overflow:hidden;position:relative}
.sky-bg{position:absolute;inset:0;background:url(../img/sky-hero.jpg) center 22%/cover;z-index:0}
.sky-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(to top,var(--white),transparent)}
.sky-arc{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:min(1000px,92%);
  height:auto;z-index:1;pointer-events:none}
.hero.hero-sky .wrap{position:relative;z-index:3;display:block;grid-template-columns:none;
  max-width:1120px;text-align:center}
.hero.hero-sky .sky-center{max-width:760px;margin:0 auto}
.pill-badge{display:inline-block;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.03em;
  padding:9px 20px;border-radius:100px;backdrop-filter:blur(6px);margin-bottom:22px}
.hero.hero-sky h1{color:#fff;font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.06;
  text-shadow:0 4px 24px rgba(20,60,120,.28);margin-bottom:26px}
.hero.hero-sky h1 .serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;
  background:none;-webkit-text-fill-color:#fff;color:#fff;padding:0}
.hero.hero-sky h1 .serif::after{display:none}
.sky-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 12px 30px -12px rgba(20,60,120,.4);padding-left:8px}
.btn-white:hover{transform:translateY(-3px)}
.btn-sky{background:#fff;color:var(--navy);box-shadow:0 12px 30px -12px rgba(20,60,120,.4);padding-left:8px}
.btn-sky:hover{transform:translateY(-3px)}
.btn .ba{width:34px;height:34px;border-radius:50%;background:var(--grad-royal);display:grid;place-items:center;
  color:#fff;flex-shrink:0}
.btn .ba svg{width:16px;height:16px;stroke:#fff;fill:none}
.btn .ba.play{font-size:.7rem;padding-left:2px}
.btn-white .ba{background:var(--navy)}

/* fanned landmark cards */
.landmark-fan{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:44px auto 92px;
  max-width:820px;perspective:1200px}
.lm-card{position:relative;width:clamp(120px,15.5vw,168px);aspect-ratio:3/3.8;border-radius:22px;
  margin:0 -14px;transform:rotate(var(--r)) translateY(var(--y));z-index:var(--z);
  box-shadow:0 26px 46px -20px rgba(20,50,100,.5);transition:transform .35s var(--ease),box-shadow .35s;
  overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:14px}
.lm-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.05);z-index:9;
  box-shadow:0 34px 60px -18px rgba(20,50,100,.6)}
.lm-front{width:clamp(132px,17vw,182px)}
.lm-card{animation:lmbob 5s ease-in-out infinite}
.lm-card:nth-child(2){animation-delay:.4s}.lm-card:nth-child(3){animation-delay:.8s}
.lm-card:nth-child(4){animation-delay:1.2s}.lm-card:nth-child(5){animation-delay:1.6s}
@keyframes lmbob{0%,100%{transform:rotate(var(--r)) translateY(var(--y))}50%{transform:rotate(var(--r)) translateY(calc(var(--y) - 12px))}}
.lm-card:hover{animation-play-state:paused}
.lm-city{font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(.85rem,1.5vw,1.05rem);
  letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.25);z-index:2}
/* real photo fills the whole card */
.lm-card .lm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.lm-card::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,20,40,.42),transparent 30%,transparent 66%,rgba(10,20,40,.28))}
.lm-city{z-index:2}
/* illustration fallback: sit at bottom, show colour background */
.lm-card .lm.lm-fallback{position:absolute;inset:auto auto 6px 50%;transform:translateX(-50%);
  width:92%;height:76%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 12px rgba(0,0,0,.22))}
.lm-card:has(.lm-fallback)::before{background:none}
.lm-teal{background:linear-gradient(160deg,#22c5b8,#0e8f86)}
.lm-blue{background:linear-gradient(160deg,#3f8bff,#1f5fd6)}
.lm-orange{background:linear-gradient(160deg,#ffb057,#f47f2b)}
.lm-purple{background:linear-gradient(160deg,#b96cff,#8a3fd6)}
.lm-gold{background:linear-gradient(160deg,#ffd15a,#e5a417)}

/* flag pills row */
.flag-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:760px;margin:0 auto}
.flag-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:.86rem;padding:9px 18px 9px 9px;border-radius:100px;
  box-shadow:0 8px 20px -12px rgba(20,60,120,.5);transition:transform .25s,box-shadow .25s}
.flag-pill:hover{transform:translateY(-4px);box-shadow:0 16px 26px -14px rgba(20,60,120,.55);color:var(--royal)}
.flag-pill .flag{width:30px;height:30px;border:0;box-shadow:none}
/* keep the fanned look on tablet/mobile — just scale the cards down */
@media(max-width:860px){
  .landmark-fan{max-width:100%}
  .lm-card{width:clamp(104px,13.5vw,150px);margin:0 -16px}
  .lm-front{width:clamp(116px,15vw,164px)}
}
@media(max-width:640px){
  .sky-arc{display:none}
  .hero.hero-sky{padding-top:22px}
  .hero.hero-sky h1{font-size:clamp(1.85rem,7vw,2.5rem)}
  .pill-badge{margin-bottom:16px}
  .sky-actions{gap:10px;margin-bottom:8px}
  .btn-white,.btn-sky{padding:11px 16px;font-size:.9rem}
  .btn .ba{width:30px;height:30px}
  .landmark-fan{margin:26px auto 54px}
  .lm-card{width:clamp(82px,20vw,120px);margin:0 -12px;border-radius:16px}
  .lm-front{width:clamp(92px,22vw,132px)}
  .lm-city{font-size:.62rem;letter-spacing:0;line-height:1.05;text-align:center;padding:0 4px;
    text-shadow:0 1px 6px rgba(0,0,0,.45)}
  .lm-card::before{border-radius:16px}
  .flag-pills{gap:8px}
  .flag-pill{font-size:.76rem;padding:7px 13px 7px 7px}
  .flag-pill .flag{width:26px;height:26px}
}
@media(max-width:420px){
  .lm-card{width:74px;margin:0 -9px}
  .lm-front{width:84px}
  .lm-city{font-size:.56rem}
}

/* ---------- dotted GLOBE as backdrop ---------- */
.hero.hero-light .hero-globe{
  width:min(940px,82vw);right:-16%;top:48%;transform:translateY(-50%);
  color:rgba(37,99,235,.5);z-index:0}
.hero.hero-light .hero-globe svg{width:100%;height:100%;display:block}
/* faint mirrored ghost so the "world" reads as a full round on the left too */
.hero.hero-light::before{content:"";position:absolute;left:-18%;bottom:-30%;width:min(620px,55vw);
  aspect-ratio:1;background:radial-gradient(circle,rgba(56,189,248,.10),transparent 62%);z-index:0}
.page-hero-globe{position:absolute;right:-12%;top:50%;transform:translateY(-50%);
  width:min(840px,72vw);aspect-ratio:1;color:rgba(160,205,255,.55);z-index:0;pointer-events:none}
.page-hero-globe svg{width:100%;height:100%;display:block}
@media(max-width:1080px){
  .hero.hero-light .hero-globe{right:-24%;width:86vw;opacity:.6}
  .page-hero-globe{right:-26%;width:90vw;opacity:.5}
}
@media(max-width:900px){
  .hero.hero-light .hero-globe{opacity:.35;top:auto;bottom:-8%;right:-32%}
  .page-hero-globe{opacity:.3;right:-40%}
}

/* ---------- AURORA background (heroes / bands) ---------- */
.aurora{position:relative;overflow:hidden;isolation:isolate}
.aurora::before,.aurora::after{content:"";position:absolute;z-index:-1;border-radius:50%;
  filter:blur(70px);opacity:.55;mix-blend-mode:screen}
.aurora::before{width:60vw;height:60vw;background:radial-gradient(circle,#2563EB,transparent 60%);
  top:-20%;right:-10%;animation:drift1 18s ease-in-out infinite alternate}
.aurora::after{width:50vw;height:50vw;background:radial-gradient(circle,#38BDF8,transparent 60%);
  bottom:-25%;left:-8%;animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8%,10%) scale(1.15)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(10%,-8%) scale(1.2)}}

/* floating orbs (decorative) */
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px);opacity:.5}
.orb.o1{width:16px;height:16px;background:#38BDF8;animation:bob 7s ease-in-out infinite}
.orb.o2{width:10px;height:10px;background:#F5B301;animation:bob 9s ease-in-out .8s infinite}
.orb.o3{width:22px;height:22px;background:rgba(37,99,235,.6);animation:bob 11s ease-in-out 1.4s infinite}
.orb.o4{width:8px;height:8px;background:#7DD3FC;animation:bob 8s ease-in-out .4s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.ring{position:absolute;border:1.5px solid rgba(120,180,250,.25);border-radius:50%;pointer-events:none;
  animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- PAGE HERO upgrade ---------- */
.page-hero{background:var(--grad-aurora)!important}
.page-hero .page-hero-bg{opacity:.35;mix-blend-mode:soft-light}
.page-hero .crumbs a{transition:color .2s}
.page-hero h1{text-shadow:0 2px 30px rgba(0,0,0,.18)}
.page-hero .wrap{animation:heroUp .9s var(--ease) both}
@keyframes heroUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;
  background:linear-gradient(to top,var(--white),transparent);z-index:1}
.page-hero .wrap{position:relative;z-index:3}

/* ---------- BUTTONS: animated gradient + sheen ---------- */
.btn-primary{background:linear-gradient(120deg,#1D4ED8,#2563EB,#38BDF8);background-size:200% auto;
  animation:shine 5s linear infinite;position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
  transition:none}
.btn-primary:hover::after{animation:sheen .9s ease}
@keyframes sheen{to{left:130%}}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg)}
.btn-gold:hover::after{animation:sheen .9s ease}
/* magnetic */
.btn{will-change:transform}

/* ---------- CARDS: glass + spotlight + gradient ring ---------- */
.card{background:linear-gradient(180deg,#ffffff, #fbfdff);position:relative}
.card{--mx:50%;--my:0%}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(56,189,248,.14),transparent 45%);
  pointer-events:none;z-index:0}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card .ic{background:var(--grad-soft);box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)}
.card:hover .ic{background:linear-gradient(135deg,#1D4ED8,#38BDF8);transform:translateY(-3px) rotate(-4deg)}
.card:hover{box-shadow:0 30px 60px -24px rgba(16,42,90,.34)}

/* feature cards glass */
.feature{background:linear-gradient(180deg,#fff,#f7fbff)}
.feature .fic{background:linear-gradient(135deg,#1D4ED8,#38BDF8);box-shadow:0 10px 22px -10px rgba(37,99,235,.6)}
.feature:hover .fic{transform:rotate(-6deg) scale(1.05)}

/* step cards */
.step{background:linear-gradient(180deg,#fff,#f7fbff);overflow:hidden}
.step::before{content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%);transition:transform .4s}
.step:hover::before{transform:scale(1.6)}
.step .sn{background:linear-gradient(135deg,#1D4ED8,#38BDF8);box-shadow:0 12px 24px -10px rgba(37,99,235,.6)}

/* image cards zoom + shine */
.card-img .ci-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,26,51,.28));opacity:0;transition:.4s}
.card-img:hover .ci-media::after{opacity:1}

/* ---------- SECTION soft gradient backgrounds ---------- */
.section.tint{background:var(--grad-soft)}
.section.tint-2{background:linear-gradient(180deg,#F4F8FD, #ffffff)}

/* eyebrow shimmer dot */
.eyebrow::before{box-shadow:0 0 0 0 rgba(245,179,1,.6);animation:pulseDot 2.4s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(245,179,1,.6)}70%{box-shadow:0 0 0 8px rgba(245,179,1,0)}100%{box-shadow:0 0 0 0 rgba(245,179,1,0)}}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:scrollx 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:13px 24px;font-family:var(--font-display);font-weight:700;color:var(--navy);
  white-space:nowrap;box-shadow:var(--shadow-sm)}
.mq-item .flag{width:28px;height:28px}
.mq-item .dot{width:8px;height:8px;border-radius:50%;background:var(--sky)}

/* ---------- STATS band shimmer ---------- */
.stats-band{background:var(--grad-aurora)}
.stats-band .sbi strong{background:linear-gradient(100deg,#fff,#bfe4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-band .sbi strong em{color:#7DD3FC}

/* cta band animated */
.cta-band{background:var(--grad-aurora)}
.cta-band::after{content:"";position:absolute;inset:0;background:
  radial-gradient(600px circle at 20% 20%,rgba(56,189,248,.3),transparent 50%),
  radial-gradient(600px circle at 80% 80%,rgba(37,99,235,.35),transparent 50%);animation:pulseBg 8s ease-in-out infinite alternate}
@keyframes pulseBg{to{opacity:.6}}
.cta-band .cbi{position:relative;z-index:3}

/* partner band */
.partner{background:linear-gradient(120deg,#1D4ED8,#2563EB 55%,#38BDF8)}

/* ---------- REVEAL variants ---------- */
.reveal.left{transform:translateX(-40px)} .reveal.left.in{transform:none}
.reveal.right{transform:translateX(40px)} .reveal.right.in{transform:none}
.reveal.zoom{transform:scale(.94)} .reveal.zoom.in{transform:none}
.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* faq hover */
.faq-item{transition:transform .3s,box-shadow .3s,border-color .3s}
.faq-item:hover{border-color:rgba(37,99,235,.35)}

/* nav link underline grow */
.nav-links>li>a{position:relative}
.nav-links>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;
  background:var(--grad-text);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav-links>li.active>a::after,.nav-links>li>a:hover::after{transform:scaleX(1)}
@media(max-width:900px){.nav-links>li>a::after{display:none}}

/* brand mark shine */
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-100%)}
.brand:hover .brand-mark::after{animation:sheen 1s ease}

/* floaters gradient */
.floaters .f-call{background:linear-gradient(135deg,#1D4ED8,#38BDF8)}

/* section entrance for prose images */
.prose img{box-shadow:var(--shadow)}