/* =====================================================
   FLY HIGH TOUR — Under Construction
   Design tokens derived from the brand flyer:
   Teal #0A5C5C / #14C4B4, Purple #5C2D91, Orange #F5820B,
   Green accent #3E9B3E, Cream #F7F5F0, Ink #12241F
   Display font: Poppins (bold, geometric — matches logo wordmark)
   Body font: Nunito Sans
   ===================================================== */

:root{
  --teal-deep:   #0A5C5C;
  --teal-bright: #14C4B4;
  --purple:      #5C2D91;
  --orange:      #F5820B;
  --green:       #3E9B3E;
  --cream:       #F7F5F0;
  --ink:         #12241F;
  --wa-green:    #25D366;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}

h1,h2,h3,.brand-name{ font-family:var(--font-display); }

a{ text-decoration:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ================= TOP BAR ================= */
.topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
}
.brand-logo{ width:90px; height:90px; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.5px;
}
.brand-name em{ font-style:normal; color:var(--orange); }
.brand-tag{
  font-size:.68rem;
  color:rgba(255,255,255,.75);
  letter-spacing:.5px;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100vh;
  background:linear-gradient(135deg, var(--teal-deep) 0%, #0d4f6b 45%, var(--purple) 100%);
  overflow:hidden;
  padding-top:110px;
  padding-bottom:60px;
}

.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.globe-glow{
  position:absolute;
  width:900px; height:900px;
  border-radius:50%;
  right:-320px; top:-260px;
  background:radial-gradient(circle at 40% 40%, rgba(20,196,180,0.28), transparent 70%);
  animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ transform:scale(1); opacity:.8; }
  50%{ transform:scale(1.08); opacity:1; }
}

.flight-path{ position:absolute; inset:0; width:100%; height:100%; }

.plane-flyer{
  position:absolute;
  font-size:1.6rem;
  color:#fff;
  offset-path: path("M -50 550 C 250 250, 500 650, 750 300 S 1150 100, 1300 150");
  offset-rotate: auto;
  animation:flyAlong 14s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.6));
}
@keyframes flyAlong{
  from{ offset-distance:0%; }
  to{ offset-distance:100%; }
}
@supports not (offset-path: path("M0 0")){
  .plane-flyer{ top:60%; left:10%; animation:flyFallback 8s ease-in-out infinite; }
  @keyframes flyFallback{
    0%{ transform:translate(0,0) rotate(15deg); }
    50%{ transform:translate(60vw,-20vh) rotate(15deg); }
    100%{ transform:translate(0,0) rotate(15deg); }
  }
}

.pin{
  position:absolute;
  color:#FFC145;
  font-size:1.1rem;
  animation:pinBounce 2.6s ease-in-out infinite;
  opacity:.85;
}
.pin-1{ top:18%; left:12%; animation-delay:0s; }
.pin-2{ top:65%; left:22%; animation-delay:.5s; color:#fff; }
.pin-3{ top:30%; left:78%; animation-delay:1s; }
.pin-4{ top:70%; left:68%; animation-delay:1.5s; color:#fff; }
@keyframes pinBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.hero-content{ position:relative; z-index:2; max-width:880px; margin:0 auto; padding-left:1rem; padding-right:1rem; }

.badge-pill{
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  padding:.5rem 1.2rem;
  border-radius:50px;
  font-size:.85rem;
  letter-spacing:.5px;
  backdrop-filter:blur(4px);
}

.hero-title{
  font-weight:800;
  font-size:clamp(2.1rem, 5.2vw, 3.6rem);
  line-height:1.15;
  margin:0 0 1.2rem;
}
.text-gradient{
  background:linear-gradient(90deg, #FFC145, var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-sub{
  font-size:1.05rem;
  max-width:640px;
  color:rgba(255,255,255,.88);
  margin-bottom:2.2rem;
}

/* Countdown */
.countdown-wrap{
  display:flex;
  justify-content:center;
  gap:1.4rem;
  margin-bottom:2.4rem;
  flex-wrap:wrap;
}
.countdown-item{ display:flex; flex-direction:column; align-items:center; }
.countdown-circle{
  width:84px; height:84px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  color:#fff;
  background:rgba(255,255,255,0.08);
  border:3px solid rgba(255,255,255,0.5);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  transition:transform .2s ease;
}
.countdown-item:hover .countdown-circle{ transform:translateY(-4px) scale(1.03); }
.circle-teal{ border-color:var(--teal-bright); }
.circle-purple{ border-color:#B48CE0; }
.circle-orange{ border-color:var(--orange); }
.countdown-label{
  margin-top:.6rem;
  font-size:.78rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

/* CTA buttons */
.hero-actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.btn-cta-orange{
  background:linear-gradient(135deg, var(--orange), #ff9c33);
  border:none;
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 25px rgba(245,130,11,0.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-cta-orange:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(245,130,11,0.5); color:#fff; }
.btn-cta-outline{
  border:2px solid rgba(255,255,255,.6);
  color:#fff;
  font-weight:600;
  background:transparent;
  transition:all .2s ease;
}
.btn-cta-outline:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateY(-3px); }

.scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  color:rgba(255,255,255,.7);
  font-size:.8rem;
  animation:bobCue 2s ease-in-out infinite;
}
@keyframes bobCue{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

/* ================= STATS STRIP ================= */
.stats-strip{
  background:#fff;
  padding:3rem 0;
  border-bottom:1px solid #eee;
}
.stat-icon{
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  color:#fff;
  margin:0 auto .8rem;
}
.stat-teal{ background:var(--teal-deep); }
.stat-purple{ background:var(--purple); }
.stat-orange{ background:var(--orange); }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--ink); }
.stat-label{ font-size:.82rem; color:#666; }

/* ================= SERVICES ================= */
.services-section{ padding:5.5rem 0; background:var(--cream); }
.section-eyebrow{
  display:inline-block;
  color:var(--purple);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:.6rem;
}
.section-title{
  font-weight:800;
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  color:var(--ink);
  margin-bottom:.8rem;
}
.section-sub{ color:#5a6660; max-width:560px; }

.service-card{
  background:#fff;
  border-radius:18px;
  padding:2.2rem 1.6rem;
  height:100%;
  text-align:center;
  box-shadow:0 6px 20px rgba(10,40,40,0.06);
  border:1px solid #eee;
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(10,40,40,0.12); }
.service-icon{
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  color:#fff;
  margin:0 auto 1.1rem;
}
.icon-teal{ background:linear-gradient(135deg, var(--teal-bright), var(--teal-deep)); }
.icon-purple{ background:linear-gradient(135deg, #8a5cd6, var(--purple)); }
.icon-orange{ background:linear-gradient(135deg, #ffb454, var(--orange)); }
.service-card h3{ font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--ink); }
.service-card p{ font-size:.9rem; color:#667; margin:0; }

/* ================= CONTACT ================= */
.contact-section{ padding-bottom:5.5rem; }
.contact-card{
  background:linear-gradient(120deg, var(--teal-deep), var(--purple));
  border-radius:24px;
  padding:3rem;
  color:#fff;
  box-shadow:0 20px 50px rgba(10,40,40,0.25);
}
.contact-card h2{ font-weight:800; font-size:1.8rem; margin-bottom:.8rem; }
.contact-card p{ color:rgba(255,255,255,.85); margin-bottom:1.4rem; }
.contact-links{ display:flex; flex-direction:column; gap:.6rem; }
.contact-links a{ color:#fff; font-weight:600; font-size:.95rem; }
.contact-links a i{ color:var(--orange); margin-right:.5rem; }
.contact-links a:hover{ color:#FFC145; }

/* ================= FOOTER ================= */
.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.75);
  font-size:.88rem;
}
.footer-plane{ color:var(--orange); }
.footer-socials{ display:flex; gap:.8rem; }
.footer-socials a{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.footer-socials a:hover{ background:var(--orange); transform:translateY(-3px); }

/* ================= WHATSAPP FLOAT ================= */
.whatsapp-float{
  position:fixed;
  bottom:24px; right:24px;
  width:60px; height:60px;
  background:var(--wa-green);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.7rem;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  z-index:1000;
  animation:waPulse 2.4s ease-in-out infinite;
  transition:transform .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); color:#fff; }
@keyframes waPulse{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0.5); }
  50%{ box-shadow:0 8px 22px rgba(0,0,0,0.28), 0 0 0 12px rgba(37,211,102,0); }
}

/* ================= REVEAL ANIMATIONS ================= */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].in-view{
  opacity:1;
  transform:translateY(0);
}

/* ================= RESPONSIVE ================= */
@media (max-width:767.98px){
  .hero{ padding-top:130px; }
  .countdown-circle{ width:66px; height:66px; font-size:1.2rem; }
  .countdown-wrap{ gap:.8rem; }
  .contact-card{ padding:2rem 1.4rem; text-align:center; }
  .contact-links{ align-items:center; }
}