/* FLYDESK COMMUNICATIONS - FZCO
   Premium light theme (Tailwind + Bootstrap compatible) */

:root{
  --fd-navy:#0b1f3b;
  --fd-blue:#1e5eff;
  --fd-blue-2:#4aa3ff;
  --fd-silver:#c7ceda;
  --fd-text:#0f172a;
  --fd-muted:#475569;
  --fd-bg:#ffffff;
  --fd-card:#ffffff;
  --fd-border:rgba(15,23,42,.10);
  --fd-shadow:0 18px 50px rgba(2, 6, 23, .10);
  --fd-shadow-soft:0 10px 30px rgba(2, 6, 23, .08);
}

html{ scroll-behavior:smooth; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fd-text);
  background: var(--fd-bg);
}

/* Links */
.fd-link{ color: var(--fd-blue); text-decoration: none; }
.fd-link:hover{ color: #1547c6; text-decoration: underline; }

/* Backgrounds */
.fd-hero-bg{
  background:
    radial-gradient(1200px 500px at 15% 0%, rgba(74,163,255,.22), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(30,94,255,.16), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1) 70%);
}
.fd-section-bg{
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(74,163,255,.14), rgba(255,255,255,0) 60%),
    radial-gradient(850px 450px at 95% 5%, rgba(30,94,255,.10), rgba(255,255,255,0) 55%);
}

/* Glass / cards */
.fd-glass{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--fd-shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.fd-card{
  background: var(--fd-card);
  border: 1px solid var(--fd-border);
  box-shadow: var(--fd-shadow-soft);
  border-radius: 1.25rem;
}
.fd-card:hover{
  box-shadow: var(--fd-shadow);
  transform: translateY(-4px);
}

/* Buttons */
.fd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: .95rem;
  padding: .85rem 1.05rem;
  font-weight: 600;
  letter-spacing:.01em;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fd-btn:focus{ outline: 3px solid rgba(30,94,255,.25); outline-offset: 3px; }
.fd-btn-primary{
  color:#fff;
  background: linear-gradient(135deg, #1e5eff, #4aa3ff);
  box-shadow: 0 14px 34px rgba(30,94,255,.22);
}
.fd-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(30,94,255,.26); color:#fff; }
.fd-btn-outline{
  color: var(--fd-navy);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.12);
}
.fd-btn-outline:hover{ transform: translateY(-2px); box-shadow: var(--fd-shadow-soft); color: var(--fd-navy); }
.fd-btn-ghost{
  color: var(--fd-navy);
  background: transparent;
  border: 1px solid rgba(15,23,42,.08);
}
.fd-btn-ghost:hover{ background: rgba(248,250,252,1); transform: translateY(-2px); }

/* Navbar */
.fd-navbar{
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.fd-navbar.is-scrolled{
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .10);
}

/* Reveal on scroll */
.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }
.reveal-delay-1.is-visible{ transition-delay: .08s; }
.reveal-delay-2.is-visible{ transition-delay: .16s; }
.reveal-delay-3.is-visible{ transition-delay: .24s; }

/* Floating shapes */
.fd-float{
  animation: fdFloat 7s ease-in-out infinite;
  will-change: transform;
}
.fd-float-2{ animation-duration: 9s; animation-delay: .5s; }
.fd-float-3{ animation-duration: 11s; animation-delay: 1.1s; }
@keyframes fdFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Form controls (Bootstrap-free) */
.fd-input,
.fd-select,
.fd-textarea{
  width: 100%;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: .85rem;
  padding: .7rem .9rem;
  font-size: .95rem;
  color: var(--fd-text);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fd-input:focus,
.fd-select:focus,
.fd-textarea:focus{
  outline: none;
  border-color: rgba(30,94,255,.45);
  box-shadow: 0 0 0 3px rgba(30,94,255,.15);
}
.fd-alert{
  border-radius: .85rem;
  padding: .85rem 1rem;
  font-size: .9rem;
}
.fd-alert-success{ background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.fd-alert-error{ background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.fd-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Sticky mobile CTA */
.fd-sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(15,23,42,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -8px 24px rgba(2,6,23,.08);
}
@media (min-width: 1024px){ .fd-sticky-cta{ display: none !important; } }
body.has-sticky-cta .fd-whatsapp{ bottom: calc(72px + env(safe-area-inset-bottom)); }

.fd-map{
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 1rem;
}

/* WhatsApp floating button */
.fd-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #25d366, #1fbf5f);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fd-whatsapp:hover{ transform: translateY(-3px); box-shadow: 0 22px 46px rgba(0,0,0,.22); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .fd-float{ animation: none !important; }
  .reveal, .reveal.is-visible{ transition: none !important; transform: none !important; opacity: 1 !important; }
  .fd-card, .fd-btn{ transition: none !important; }
}

