/* =========================================================
   CAMPRY LIMITED — Global Stylesheet
   Design tokens: Primary #0047AB / Secondary #2B7DE9 / Gold #FFC857
   Fonts: Plus Jakarta Sans (display) + Inter (body)
   ========================================================= */

:root {
  --c-primary: #0047AB;
  --c-primary-dark: #003380;
  --c-secondary: #2B7DE9;
  --c-gold: #FFC857;
  --c-white: #FFFFFF;
  --c-light: #F5F9FF;
  --c-dark: #1F2937;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--c-dark);
  background: var(--c-white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
}

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

/* ---------- Typography scale ---------- */
.h-hero-title { font-size: clamp(2.25rem, 5vw, 5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0,10,30,.55), 0 1px 3px rgba(0,10,30,.5); }
.h-hero-text  { font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.55; text-shadow: 0 2px 16px rgba(0,10,30,.55), 0 1px 2px rgba(0,10,30,.45); }
.h-section-title { font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; }
.h-body { font-size: 1.125rem; line-height: 1.75; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  padding: .95rem 2rem; border-radius: 9999px; transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); color: #fff; box-shadow: 0 10px 30px -10px rgba(0,71,171,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(0,71,171,.65); }
.btn-gold { background: var(--c-gold); color: #1F2937; box-shadow: 0 10px 30px -12px rgba(255,200,87,.7); }
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-outline { border: 2px solid rgba(255,255,255,.75); color: #fff; backdrop-filter: blur(6px); background: rgba(255,255,255,.06); }
.btn-outline:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-outline-dark { border: 2px solid var(--c-primary); color: var(--c-primary); }
.btn-outline-dark:hover { background: var(--c-primary); color: #fff; }

/* ---------- Glassmorphism ---------- */
.glass { background: rgba(255,255,255,.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.5); }
.glass-dark { background: rgba(11,20,38,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); }

/* ---------- Cards ---------- */
.card-hover { transition: transform .35s ease, box-shadow .35s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(0,71,171,.25); }
.card-hover:hover svg { transform: scale(1.14) rotate(-4deg); }
.card-hover svg { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

/* ---------- Hero Slideshow ---------- */
.hero-slideshow { position: relative; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: opacity 1s ease-in-out;
  animation: kenburns 5s ease-in-out forwards;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
@keyframes kenburns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, rgba(0,20,50,.72) 0%, rgba(0,20,50,.42) 32%, rgba(0,20,50,.12) 58%, rgba(0,20,50,.02) 78%),
    linear-gradient(0deg, rgba(0,15,40,.45) 0%, rgba(0,15,40,0) 30%);
}

/* Hero slide dots */
.hero-dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,.4); transition: all .3s ease; cursor: pointer; }
.hero-dot.is-active { background: var(--c-gold); width: 28px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ---------- Floating shapes (ambient background) ---------- */
.float-shape { animation: floaty 7s ease-in-out infinite; }
.float-shape-slow { animation: floaty 11s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-22px) translateX(10px); }
}

/* ---------- Progress bars ---------- */
.progress-track { background: #E7EEF9; border-radius: 9999px; overflow: hidden; height: 10px; }
.progress-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--c-primary), var(--c-secondary)); width: 0; transition: width 1.4s ease; }

/* ---------- Loading skeleton ---------- */
.skeleton { background: linear-gradient(90deg, #EEF2F9 25%, #E4ECFA 37%, #EEF2F9 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: .75rem; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Nav ---------- */
.nav-link { position: relative; font-weight: 600; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--c-gold); transition: width .25s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Utility ---------- */
.text-gradient { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-eyebrow { letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: .8rem; color: var(--c-secondary); }
.dot-grid { background-image: radial-gradient(rgba(0,71,171,.16) 1.5px, transparent 1.5px); background-size: 22px 22px; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-gold); outline-offset: 2px;
}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 60px; height: 60px; border-radius: 9999px; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.6);
  animation: pulse-wa 2.4s ease infinite;
}
@keyframes pulse-wa { 0%,100% { box-shadow: 0 12px 28px -8px rgba(37,211,102,.6);} 50% { box-shadow: 0 12px 34px -4px rgba(37,211,102,.85);} }

/* Ripple */
.btn { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 9999px; background: rgba(255,255,255,.5); transform: scale(0); animation: ripple-anim .6s linear; pointer-events: none; }
@keyframes ripple-anim { to { transform: scale(3); opacity: 0; } }