/* ==========================================================================
   Azera Drones — refined layer (Apple / Emil Kowalski inspired)
   Loaded last on every public page. Overrides look & motion only; no markup
   or behaviour depends on this file, so removing the <link> fully reverts it.
   ========================================================================== */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ink: #0c1330;          /* primary text, dark surfaces */
  --ink-2: #4a5170;        /* secondary text */
  --ink-3: #7c8299;        /* tertiary text */
  --hairline: rgba(12, 19, 48, 0.08);
  --surface: #ffffff;
  --surface-2: #f5f6f8;    /* Apple-like light gray section */
  --brand: #e12048;
  --brand-hover: #c81a3f;
  --brand-press: #b5173a;

  /* Emil Kowalski easings */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(12, 19, 48, 0.05);
  --shadow-md: 0 1px 2px rgba(12, 19, 48, 0.04), 0 6px 20px -4px rgba(12, 19, 48, 0.08);
  --shadow-lg: 0 2px 4px rgba(12, 19, 48, 0.04), 0 16px 40px -8px rgba(12, 19, 48, 0.14);
}

/* ---------- Typography --------------------------------------------------- */
html body,
html body :is(p, a, span, li, button, input, textarea, select, label, small, strong, em, td, th, div, blockquote, figcaption):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
  font-family: var(--font-sans) !important;
}
html body :is(h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
  font-family: var(--font-display) !important;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
html body :is(h1, .display-1, .display-2, .display-3, .display-4) { font-weight: 700; letter-spacing: -0.032em; line-height: 1.08; }
html body :is(h2, .display-5, .display-6) { font-weight: 700; line-height: 1.15; }
html body :is(h3, h4) { font-weight: 600; line-height: 1.25; }
html body :is(h5, h6) { font-weight: 600; letter-spacing: -0.012em; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.006em;
}
p { text-wrap: pretty; }
.lead { font-weight: 400; letter-spacing: -0.012em; }
.text-muted { color: var(--ink-3) !important; }

::selection { background: rgba(225, 32, 72, 0.16); color: inherit; }

/* ---------- Navigation: frosted glass ----------------------------------- */
nav.navbar.fixed-top,
nav.navbar.bg-white {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav.navbar.fixed-top, nav.navbar.bg-white { background: rgba(255, 255, 255, 0.96) !important; }
}
.navbar .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink) !important;
  opacity: 0.82;
  transition: opacity 160ms var(--ease-out), color 160ms var(--ease-out);
}
.navbar .nav-link:hover,
.navbar .nav-link.show { opacity: 1; }
.navbar .nav-link.active { opacity: 1; color: var(--brand) !important; }
/* Apple-style nav: colour change only, no pills or sliding underlines */
.navbar-nav .nav-link::after, .navbar-nav .nav-link::before { display: none !important; }
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* Dropdowns: grow from their trigger (Emil's origin-aware popovers) */
.dropdown-menu {
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-lg) !important;
  transform-origin: top left;
}
.dropdown-menu-end { transform-origin: top right; }
.dropdown-menu.show { animation: azera-pop 180ms var(--ease-out); }
@keyframes azera-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.dropdown-item {
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 12px;
  color: var(--ink);
  transition: background-color 120ms var(--ease-out);
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(12, 19, 48, 0.05); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { background: rgba(225, 32, 72, 0.08); color: var(--brand); }

/* ---------- Buttons: calm, tactile -------------------------------------- */
.btn {
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out) !important;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: none !important; }
.btn:active, .btn.active:active { transform: scale(0.97) !important; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(225, 32, 72, 0.55) !important;
}
.btn-lg { padding: 0.8rem 1.6rem; font-size: 1rem; }

.btn-brand, .btn-success, .btn-contact, .btn-danger, .btn-primary {
  box-shadow: 0 1px 2px rgba(181, 23, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.btn-brand:hover, .btn-success:hover, .btn-contact:hover {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* ---------- Surfaces ---------------------------------------------------- */
.card {
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  transition: box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out) !important;
}
.card:hover { box-shadow: var(--shadow-lg) !important; transform: none !important; }
.card .card-img-top { border-radius: 0 !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow-md) !important; }
.rounded, .rounded-3, .rounded-4 { border-radius: var(--radius-md) !important; }
img.rounded, img.img-fluid.rounded { border-radius: var(--radius-lg) !important; }
.bg-light { background-color: var(--surface-2) !important; }

/* Dark promo blocks that reuse .footer-dark inside content (e.g. education CTA) */
.row.footer-dark {
  border-top: 0 !important;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 0% 0%, #1a2550 0%, #0c1330 60%) !important;
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Footer: quiet, Apple-style */
footer.footer-dark {
  border-top: 0 !important;
  font-size: 0.875rem;
}
footer.footer-dark .footer-links a { transform: none !important; transition: color 160ms var(--ease-out); }
footer.footer-dark h5, footer.footer-dark h6 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ---------- Forms ------------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(12, 19, 48, 0.14) !important;
  background-color: #fff;
  padding: 0.7rem 0.9rem;
  font-size: 0.9375rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out) !important;
}
.form-control:hover, .form-select:hover { border-color: rgba(12, 19, 48, 0.24) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(225, 32, 72, 0.12) !important;
  outline: none;
}
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.4rem; }
.form-check-input { border-color: rgba(12, 19, 48, 0.25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(225, 32, 72, 0.12); border-color: var(--brand); }

/* ---------- Small details ---------------------------------------------- */
a { transition: color 160ms var(--ease-out); }
:focus-visible { outline: 2px solid rgba(225, 32, 72, 0.6); outline-offset: 2px; }
.badge { font-weight: 500; letter-spacing: 0; border-radius: 6px; }
hr { border-color: var(--hairline); opacity: 1; }

.whatsapp-widget {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out) !important;
  box-shadow: 0 8px 24px -6px rgba(18, 140, 126, 0.45) !important;
}
.whatsapp-widget:hover { transform: scale(1.04) !important; }
.whatsapp-widget:active { transform: scale(0.96) !important; }

.social-icon { transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out) !important; }

/* Retire the novelty cursor ring + click ripples */
.custom-cursor, .click-ripple, .touch-ripple { display: none !important; }

/* Reference logos: monochrome until hover */
.references-section img {
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.references-section img:hover { filter: none; opacity: 1; }

/* ---------- Motion: restrained AOS ------------------------------------- */
html body [data-aos] {
  transition-duration: 700ms !important;
  transition-timing-function: var(--ease-out) !important;
}
html body [data-aos^="fade"]:not(.aos-animate) { opacity: 0; }
html body [data-aos="fade-up"]:not(.aos-animate) { transform: translate3d(0, 16px, 0) !important; }
html body [data-aos="fade-down"]:not(.aos-animate) { transform: translate3d(0, -16px, 0) !important; }
html body [data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(-20px, 0, 0) !important; }
html body [data-aos="fade-left"]:not(.aos-animate) { transform: translate3d(20px, 0, 0) !important; }
html body [data-aos^="zoom"]:not(.aos-animate) { transform: scale(0.97) !important; }

@media (prefers-reduced-motion: reduce) {
  html body [data-aos] { transition: opacity 300ms linear !important; transform: none !important; }
  .dropdown-menu.show { animation: none; }
  .btn:active { transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Light surfaces (replaces dark navy blocks) — matches the frosted top bar
   ========================================================================== */
:root { --chrome: #f5f6f8; --chrome-2: #eef0f4; }

/* Footer: Apple-style light gray */
html body footer.footer-dark {
  background: var(--chrome) !important;
  border-top: 1px solid var(--hairline) !important;
  color: var(--ink-2) !important;
}
html body footer.footer-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--ink) !important; }
html body footer.footer-dark :is(p, span, li, small, .text-muted) { color: var(--ink-2) !important; }
html body footer.footer-dark a,
html body footer.footer-dark .footer-links a,
html body footer.footer-dark .footer-bottom-link { color: var(--ink-2) !important; }
html body footer.footer-dark a:hover,
html body footer.footer-dark .footer-links a:hover,
html body footer.footer-dark .footer-bottom-link:hover { color: var(--brand) !important; }
html body footer.footer-dark i { color: var(--ink-3); }
html body footer.footer-dark hr { border-color: var(--hairline) !important; }
html body footer.footer-dark .social-icon {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
}
html body footer.footer-dark .social-icon i { color: var(--ink) !important; }
html body footer.footer-dark .social-icon:hover i { color: #fff !important; }

/* In-content promo block (e.g. education CTA): light, frosted, like the nav */
html body .row.footer-dark {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,246,248,0.9)) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--ink) !important;
}
html body .row.footer-dark :is(h1, h2, h3, h4, h5, h6, span, li) { color: var(--ink) !important; }
html body .row.footer-dark :is(p, .text-white-50, .text-muted) { color: var(--ink-2) !important; }
html body .row.footer-dark .btn-outline-light {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .row.footer-dark .btn-outline-light:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }

/* Consent labels: space between the legal link and "I have read..." text */
.form-check-label a[data-translate^="legal-"] + span[data-translate^="legal-"] { margin-left: 0.3em; }

/* Consent errors stay hidden until validation shows them (validateCheckbox sets display:block / .d-block) */
.form-check .invalid-feedback { display: none; }
.form-check .form-check-input.is-invalid ~ .invalid-feedback { display: block; }