/* ================================================================
   AmplioraTech Insights — style.css
   Global styles: loading screen, scroll bar, WA float, form
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito Sans', sans-serif;
  background: #fff;
  color: #1B2A47;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* ── Skip Link ──────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 16px;
  background: #29ABE2; color: #fff;
  padding: 8px 16px; border-radius: 4px;
  font-size: .85rem; font-weight: 700; z-index: 10000;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ── Scroll Progress Bar ────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #29ABE2, #F5A623);
  z-index: 9998; transition: width .1s linear;
}

/* ── Loading Screen ─────────────────────────────────────────── */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(145deg, #0f1d35 0%, #1D3461 50%, #152B54 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0;
  transition: opacity .6s ease, visibility .6s ease;
}
.loading-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-screen::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(41,171,226,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,171,226,.06) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.loading-screen::after {
  content: ''; position: absolute;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(41,171,226,.18) 0%, transparent 70%);
  border-radius: 50%; animation: orb-pulse 2s ease-in-out infinite;
}
.ld-logo {
  position: relative; z-index: 2; width: 220px;
  animation: logo-in .7s cubic-bezier(.22,1,.36,1) both;
}
.ld-spinner-wrap {
  position: relative; z-index: 2;
  margin-top: 36px; width: 60px; height: 60px;
}
.ld-spinner-wrap svg { width: 100%; height: 100%; animation: spin 1.4s linear infinite; }
.ld-tag {
  position: relative; z-index: 2; margin-top: 22px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(41,171,226,.7);
  animation: fade-up .9s .3s cubic-bezier(.22,1,.36,1) both;
}
.ld-dots {
  position: relative; z-index: 2; margin-top: 10px;
  display: flex; gap: 7px;
  animation: fade-up .9s .5s both;
}
.ld-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #29ABE2; opacity: .3;
  animation: dot-blink 1.4s ease-in-out infinite;
}
.ld-dots span:nth-child(2) { animation-delay: .2s; }
.ld-dots span:nth-child(3) { animation-delay: .4s; }

/* ── WhatsApp Float ─────────────────────────────────────────── */
.wa-float {
  position: fixed; bottom: 30px; right: 30px;
  width: 54px; height: 54px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.5);
  z-index: 998; animation: floatUD 3.5s ease-in-out infinite;
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.1); }

/* ── Contact Form ───────────────────────────────────────────── */
.form-success {
  color: #25D366; background: rgba(37,211,102,.1);
  border: 1px solid rgba(37,211,102,.3);
  padding: 12px 16px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; margin-top: 12px;
}
.form-error {
  color: #EF4444; background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  padding: 12px 16px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; margin-top: 12px;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes orb-pulse   { 0%,100%{transform:scale(1);opacity:.7;} 50%{transform:scale(1.15);opacity:1;} }
@keyframes logo-in     { from{opacity:0;transform:translateY(-18px) scale(.9);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes spin        { to{transform:rotate(360deg);} }
@keyframes dot-blink   { 0%,100%{opacity:.2;transform:scale(.8);} 50%{opacity:1;transform:scale(1.2);} }
@keyframes fade-up     { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes floatUD     { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes spinR       { to{transform:rotate(360deg);} }
@keyframes pulseSc     { 0%,100%{transform:scale(1);opacity:.6;} 50%{transform:scale(1.08);opacity:.2;} }
@keyframes fadeIn      { from{opacity:0;} to{opacity:1;} }
@keyframes pulse       { 0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.2;transform:translate(-50%,-50%) scale(1.08)} }