/* ==========================================================================
   ALTURA WORKFORCE SOLUTIONS — DESIGN SYSTEM
   ========================================================================== */

:root{
  /* Brand */
  --color-primary: #082159;
  --color-primary-dark: #051433;
  --color-primary-light: #123a8c;
  --color-primary-tint-50: #eef1f8;
  --color-primary-tint-100: #dbe2f0;
  --color-primary-tint-200: #b3c1e0;

  --color-secondary: #C89B3C;      /* gold from logo */
  --color-secondary-light: #E8C066;
  --color-secondary-dark: #9C7523;
  --color-secondary-tint: #FBF3DF;

  --color-accent: #1774B8;          /* sky blue — travel/opportunity accent */
  --color-accent-tint: #E6F2FB;

  --color-success: #1E8E5A;
  --color-success-tint: #E6F6EE;
  --color-warning: #C77700;
  --color-warning-tint: #FFF3E0;
  --color-danger: #C0392B;
  --color-danger-tint: #FCE9E7;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-ink-900: #0B1220;
  --color-ink-800: #16213A;
  --color-ink-700: #2B3654;
  --color-ink-600: #47516E;
  --color-ink-500: #6B7590;
  --color-ink-400: #94A0BD;
  --color-ink-300: #C3CAE0;
  --color-ink-200: #DDE3F0;
  --color-ink-100: #EEF1F8;
  --color-ink-50:  #F7F9FC;

  /* Typography */
  --font-title: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(8,33,89,0.06);
  --shadow-md: 0 8px 24px rgba(8,33,89,0.10);
  --shadow-lg: 0 20px 48px rgba(8,33,89,0.14);
  --shadow-xl: 0 30px 70px rgba(8,33,89,0.20);
  --shadow-gold: 0 10px 30px rgba(200,155,60,0.25);

  /* Layout */
  --container-width: 1280px;
  --container-pad: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 560ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scrollbar-gutter: stable; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink-800);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-title); margin:0; color: var(--color-primary); line-height:1.15; }
p{ margin:0; }

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

:focus-visible{ outline: 3px solid var(--color-secondary); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width: var(--container-width); margin:0 auto; padding: 0 var(--container-pad); }
.section{ padding: var(--space-9) 0; }
.section-sm{ padding: var(--space-7) 0; }
.bg-white{ background: var(--color-white); }
.bg-tint{ background: var(--color-ink-50); }
.bg-primary{ background: var(--color-primary); color:#fff; }
.bg-primary *{ color: inherit; }
.bg-gradient-navy{ background: linear-gradient(135deg,#071c4d 0%, #0a2a6e 55%, #0f3a94 100%); color:#fff; }
.bg-gradient-navy *{ }

.grid{ display:grid; gap: var(--space-6); }
.flex{ display:flex; }
.text-center{ text-align:center; }

/* ---------- Section header ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-title); font-weight:600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-secondary-dark);
  background: var(--color-secondary-tint);
  padding: 8px 16px; border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.bg-primary .eyebrow, .bg-gradient-navy .eyebrow{ background: rgba(255,255,255,0.12); color: var(--color-secondary-light); }

.section-head{ max-width: 720px; margin-bottom: var(--space-7); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing:-0.01em; }
.section-head p{ margin-top: var(--space-4); font-size: 17px; line-height:1.7; color: var(--color-ink-600); }
.bg-primary .section-head p, .bg-gradient-navy .section-head p{ color: var(--color-ink-200); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-title); font-weight:600; font-size:15px;
  padding: 15px 28px; border-radius: var(--radius-full);
  border: 2px solid transparent; cursor:pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn svg, .btn i{ transition: transform var(--t-fast) var(--ease); }
.btn:hover svg, .btn:hover i{ transform: translateX(4px); }
.btn:active{ transform: scale(0.97); }

.btn-primary{ background: var(--color-secondary); color: var(--color-primary); box-shadow: var(--shadow-gold); }
.btn-primary:hover{ background: var(--color-secondary-light); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(200,155,60,0.35); }

.btn-navy{ background: var(--color-primary); color:#fff; }
.btn-navy:hover{ background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-outline{ background: transparent; border-color: rgba(255,255,255,0.5); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,0.12); border-color:#fff; transform: translateY(-2px); }

.btn-outline-navy{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-navy:hover{ background: var(--color-primary); color:#fff; transform: translateY(-2px); }

.btn-ghost{ background: var(--color-ink-100); color: var(--color-primary); }
.btn-ghost:hover{ background: var(--color-ink-200); }

.btn-sm{ padding: 10px 20px; font-size: 14px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.6; cursor:not-allowed; transform:none !important; }

.btn-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn-loading::after{
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(8,33,89,0.25); border-top-color: var(--color-primary);
  animation: spin 0.7s linear infinite;
}
.btn-navy.btn-loading::after, .btn-outline.btn-loading::after{ border-color: rgba(255,255,255,0.35); border-top-color:#fff; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  border:1px solid var(--color-ink-100);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* ---------- Icon badge ---------- */
.icon-badge{
  width:56px; height:56px; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: var(--color-primary-tint-50); color: var(--color-primary);
  font-size: 22px; flex-shrink:0;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.card:hover .icon-badge{ background: var(--color-primary); color: var(--color-secondary-light); transform: rotate(-6deg) scale(1.05); }

/* ---------- Forms ---------- */
.form-field{ position:relative; margin-bottom: var(--space-5); }
.form-field label{
  display:block; font-family: var(--font-title); font-weight:600; font-size:13px;
  color: var(--color-ink-700); margin-bottom:8px; letter-spacing:0.01em;
}
.form-field label .req{ color: var(--color-danger); margin-left:2px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 15px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-ink-200); background: var(--color-ink-50);
  font-size:15px; color: var(--color-ink-800);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-field textarea{ resize: vertical; min-height:120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--color-accent); background:#fff;
  box-shadow: 0 0 0 4px var(--color-accent-tint);
}
.form-field.error input, .form-field.error select, .form-field.error textarea{
  border-color: var(--color-danger); background: var(--color-danger-tint);
}
.form-field .field-hint{ font-size:12.5px; color: var(--color-ink-500); margin-top:6px; }
.form-field .field-error{ font-size:12.5px; color: var(--color-danger); margin-top:6px; display:none; font-weight:600; }
.form-field.error .field-error{ display:block; }
.form-field.success input{ border-color: var(--color-success); }
.checkbox-field{ display:flex; align-items:flex-start; gap:12px; margin-bottom: var(--space-5); }
.checkbox-field input{ width:20px; height:20px; margin-top:2px; accent-color: var(--color-primary); flex-shrink:0; }
.checkbox-field label{ font-size:14px; color: var(--color-ink-600); line-height:1.6; }
.form-card{ background:#fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-7); border:1px solid var(--color-ink-100); }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap: 0 var(--space-5); }
.form-success{
  display:none; text-align:center; padding: var(--space-8) var(--space-5);
}
.form-success.show{ display:block; animation: fadeUp var(--t-slow) var(--ease); }
.form-success .icon-circle{
  width:88px; height:88px; border-radius:50%; background: var(--color-success-tint); color: var(--color-success);
  display:flex; align-items:center; justify-content:center; font-size:40px; margin:0 auto var(--space-5);
}

/* ---------- Animations ---------- */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform:none; } }
.reveal{ opacity:0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger .reveal:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger .reveal:nth-child(2){ transition-delay: 90ms; }
.reveal-stagger .reveal:nth-child(3){ transition-delay: 180ms; }
.reveal-stagger .reveal:nth-child(4){ transition-delay: 270ms; }
.reveal-stagger .reveal:nth-child(5){ transition-delay: 360ms; }
.reveal-stagger .reveal:nth-child(6){ transition-delay: 450ms; }

/* ---------- Header ---------- */
.top-bar{
  background: var(--color-primary-dark); color: rgba(255,255,255,0.85);
  font-size: 13px; padding: 8px 0;
}
.top-bar .container{ display:flex; justify-content:space-between; align-items:center; }
.top-bar-left{ display:flex; gap: var(--space-5); }
.top-bar a{ display:inline-flex; align-items:center; gap:6px; transition: color var(--t-fast); }
.top-bar a:hover{ color: var(--color-secondary-light); }
.top-bar-right{ display:flex; gap: var(--space-4); align-items:center; }
.top-bar-right a{ font-weight:600; }
.top-bar-right .divider{ width:1px; height:14px; background: rgba(255,255,255,0.25); }

.site-header{
  position: sticky; top:0; z-index:1000; background:#fff;
  border-bottom: 1px solid var(--color-ink-100);
  transition: box-shadow var(--t-med) var(--ease), padding var(--t-med) var(--ease), backdrop-filter var(--t-med);
  width: 100%; max-width: 100%;
}
.site-header.scrolled{
  box-shadow: 0 6px 24px rgba(8,33,89,0.08);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; transition: padding var(--t-med) var(--ease); }
.site-header.scrolled .nav-wrap{ padding: 10px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ display:inline-flex; }
.brand img{ height:52px; width:auto; border-radius:12px; transition: height var(--t-med) var(--ease); display:block; }
.site-header.scrolled .brand img{ height:42px; }
.brand-text{ font-family: var(--font-title); line-height:1.1; }
.brand-text strong{ display:block; font-size:17px; font-weight:700; color: var(--color-primary); letter-spacing:0.02em; }
.brand-text span{ display:block; font-size:10.5px; font-weight:600; color: var(--color-secondary-dark); letter-spacing:0.14em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap: var(--space-6); }
.main-nav ul{ display:flex; gap: var(--space-5); }
.main-nav a{
  font-family: var(--font-title); font-weight:600; font-size:14.5px; color: var(--color-ink-700);
  position:relative; padding: 8px 2px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--color-secondary);
  transition: width var(--t-fast) var(--ease);
}
.main-nav a:hover{ color: var(--color-primary); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color: var(--color-primary); }
.nav-cta{ display:flex; align-items:center; gap: var(--space-3); }

.mobile-toggle{
  display:none; align-items:center; justify-content:center; position:relative;
  width:44px; height:44px; background:none; border:none; padding:0; z-index:1100; flex-shrink:0;
}
.mobile-toggle-lines{ display:flex; flex-direction:column; gap:5px; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.mobile-toggle-lines span{ width:24px; height:2.5px; background: var(--color-primary); border-radius:2px; display:block; }
.mobile-toggle-x{ position:absolute; font-size:22px; color: var(--color-primary); opacity:0; transform: scale(0.5) rotate(-90deg); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.mobile-toggle.open .mobile-toggle-lines{ opacity:0; transform: scale(0.5) rotate(90deg); }
.mobile-toggle.open .mobile-toggle-x{ opacity:1; transform: scale(1) rotate(0deg); }

.mobile-menu-backdrop{
  position: fixed; inset:0; background: rgba(5,15,45,0.5); z-index:1040;
  opacity:0; pointer-events:none; transition: opacity var(--t-med) var(--ease);
}
.mobile-menu-backdrop.open{ opacity:1; pointer-events:auto; }

.mobile-menu{
  position: fixed; inset:0; background: var(--color-primary); z-index:1050;
  display:flex; flex-direction:column; padding: 0 var(--space-6) var(--space-6);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease);
  overflow-y:auto; width:100%; max-width:100%;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-5) 0; position:sticky; top:0; background: var(--color-primary); z-index:1; }
.mobile-menu-head .brand-logo img{ height:38px; width:auto; border-radius:8px; }
.mobile-menu-close{
  width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,0.1); border:none;
  color:#fff; font-size:19px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background var(--t-fast) var(--ease);
}
.mobile-menu-close:hover{ background: rgba(255,255,255,0.2); }
.mobile-menu ul{ display:flex; flex-direction:column; gap:0; }
.mobile-menu li{ border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-menu a{ display:flex; justify-content:space-between; align-items:center; font-family: var(--font-title); font-weight:600; font-size:20px; color:#fff; padding: 16px 4px; }
.mobile-menu-cta{ margin-top: var(--space-6); display:flex; flex-direction:column; gap: var(--space-3); }
.mobile-menu-foot{ margin-top: var(--space-6); padding-top: var(--space-5); border-top:1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); font-size:12.5px; padding-bottom: var(--space-4); }

/* ---------- Hero banner (non-home pages) ---------- */
.hero-banner{
  position: relative; padding: var(--space-9) 0 var(--space-8);
  background: linear-gradient(135deg,#071c4d 0%, #0a2a6e 55%, #0f3a94 100%);
  color:#fff; overflow:hidden;
}
.hero-banner::before{
  content:''; position:absolute; inset:0;
  background-image: var(--hero-img);
  background-size:cover; background-position:center;
  opacity:0.55;
}
.hero-banner::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(5,15,45,0.94) 0%, rgba(7,20,58,0.88) 40%, rgba(10,30,80,0.65) 75%, rgba(10,30,80,0.55) 100%);
}
.hero-banner .container{ position:relative; z-index:2; }
.hero-mini{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-title); font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-secondary-light); background: rgba(255,255,255,0.1); padding:8px 18px; border-radius: var(--radius-full); margin-bottom: var(--space-5); }
.hero-banner h1{ color:#fff; font-size: clamp(32px, 5vw, 54px); font-weight:700; max-width:820px; letter-spacing:-0.01em; }
.hero-banner p{ color: var(--color-ink-200); font-size:18px; max-width:640px; margin-top: var(--space-4); line-height:1.7; }
.hero-actions{ display:flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap:wrap; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13px; color: var(--color-ink-300); margin-bottom: var(--space-5); }
.breadcrumb a:hover{ color:#fff; }

.trust-strip{ display:flex; flex-wrap:wrap; gap: var(--space-5) var(--space-7); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.15); }
.trust-strip span{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color: var(--color-ink-100); }
.trust-strip i{ color: var(--color-secondary-light); }

/* ---------- Stat counters ---------- */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.stat-item{ text-align:center; }
.stat-num{ font-family: var(--font-title); font-weight:700; font-size: clamp(30px,4vw,44px); color: var(--color-secondary); }
.stat-label{ font-size:14px; color: var(--color-ink-500); margin-top:6px; font-weight:600; }
.bg-primary .stat-label, .bg-gradient-navy .stat-label{ color: var(--color-ink-300); }

/* ---------- Testimonials (Google review style) ---------- */
.review-card{ background:#fff; border-radius: var(--radius-lg); border:1px solid var(--color-ink-100); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.review-top{ display:flex; align-items:center; gap:14px; margin-bottom: var(--space-4); }
.review-avatar{ width:50px; height:50px; border-radius:50%; object-fit:cover; background: var(--color-primary-tint-100); }
.review-name{ font-family: var(--font-title); font-weight:700; font-size:15px; color: var(--color-ink-800); }
.review-sub{ font-size:12.5px; color: var(--color-ink-500); }
.review-stars{ color:#F4B400; font-size:14px; letter-spacing:2px; margin-bottom: var(--space-3); }
.review-text{ font-size:14.5px; color: var(--color-ink-600); line-height:1.7; }
.review-google{ display:flex; align-items:center; gap:6px; margin-top: var(--space-4); font-size:12px; color: var(--color-ink-400); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-primary-dark); color: rgba(255,255,255,0.75); position:relative; }
.footer-top{ padding: var(--space-8) 0 var(--space-7); }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-7); }
.footer-brand-block .brand{ margin-bottom: var(--space-4); }
.footer-brand-block .brand-text strong{ color:#fff; }
.footer-brand-block p{ font-size:14px; line-height:1.75; color: rgba(255,255,255,0.6); max-width:320px; }
.footer-social{ display:flex; gap:10px; margin-top: var(--space-5); }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; transition: all var(--t-fast) var(--ease);
}
.footer-social a:hover{ background: var(--color-secondary); color: var(--color-primary); transform: translateY(-3px); }
.footer-col h4{ color:#fff; font-size:15px; font-weight:700; margin-bottom: var(--space-5); }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color: rgba(255,255,255,0.62); transition: color var(--t-fast), padding-left var(--t-fast); }
.footer-col a:hover{ color: var(--color-secondary-light); padding-left:4px; }
.footer-contact li{ display:flex; gap:10px; font-size:14px; color: rgba(255,255,255,0.62); align-items:flex-start; }
.footer-contact i{ color: var(--color-secondary-light); margin-top:3px; }
.newsletter-form{ display:flex; margin-top: var(--space-4); border-radius: var(--radius-full); overflow:hidden; background: rgba(255,255,255,0.08); padding:5px; }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:10px 16px; color:#fff; font-size:13.5px; }
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.45); }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ background: var(--color-secondary); color: var(--color-primary); border:none; border-radius: var(--radius-full); padding:10px 18px; font-weight:700; font-size:13px; font-family: var(--font-title); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding: var(--space-5) 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--space-3); font-size:13px; color: rgba(255,255,255,0.5); }
.footer-bottom-links{ display:flex; gap: var(--space-5); }
.footer-bottom-links a:hover{ color:#fff; }

.back-to-top{
  position: fixed; right: 24px; bottom: 24px; width:50px; height:50px; border-radius:50%;
  background: var(--color-secondary); color: var(--color-primary); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-gold); z-index:900; opacity:0; pointer-events:none; transform: translateY(10px);
  transition: all var(--t-fast) var(--ease); border:none; font-size:18px;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top:hover{ background: var(--color-secondary-light); transform: translateY(-4px); }

/* whatsapp float */
.whatsapp-float{
  position:fixed; left:24px; bottom:24px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow: 0 10px 26px rgba(37,211,102,0.4); z-index:900;
  transition: transform var(--t-fast) var(--ease);
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* ---------- Final CTA block ---------- */
.final-cta{ position:relative; overflow:hidden; border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align:center; background: linear-gradient(135deg,#071c4d 0%, #0f3a94 100%); }
.final-cta h2{ color:#fff; font-size: clamp(26px,3.4vw,38px); }
.final-cta p{ color: var(--color-ink-200); max-width:600px; margin: var(--space-4) auto 0; font-size:16.5px; line-height:1.7; }
.final-cta .hero-actions{ justify-content:center; margin-top: var(--space-6); }

/* ---------- Loading skeleton ---------- */
.skeleton{ background: linear-gradient(90deg, var(--color-ink-100) 25%, var(--color-ink-50) 37%, var(--color-ink-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.img-fade{ opacity:0; transition: opacity var(--t-slow) var(--ease); }
.img-fade.loaded{ opacity:1; }

/* ---------- Utility ---------- */
.mt-2{ margin-top: var(--space-2); } .mt-3{ margin-top: var(--space-3); } .mt-4{ margin-top: var(--space-4); }
.mt-5{ margin-top: var(--space-5); } .mt-6{ margin-top: var(--space-6); } .mt-7{ margin-top: var(--space-7); }
.mb-4{ margin-bottom: var(--space-4);} .mb-5{ margin-bottom: var(--space-5);} .mb-6{ margin-bottom: var(--space-6);}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 960px){
  .top-bar{ display:none; }
  .main-nav{ display:none; }
  .mobile-toggle{ display:flex; }
  .nav-cta{ display:none; }
  .brand-logo{ padding: 3px; }
}
@media (max-width: 720px){
  .container{ padding: 0 18px; }
  .section{ padding: var(--space-7) 0; }
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
  .stat-row{ grid-template-columns: repeat(2,1fr); gap: var(--space-5); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .form-row-2{ grid-template-columns:1fr; }
  .whatsapp-float{ width:50px; height:50px; font-size:22px; left:16px; bottom:16px; }
  .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; }
   .footer-brand-block .brand{ margin-top: 10px; }
}