/* Reusable components: navbar, footer, buttons, cards, badges, lightbox... */

/* --- Buttons --- */
.btn {
  display: inline-block; padding: 0.75rem 1.75rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  text-decoration: none; transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn--primary { background: var(--color-accent); color: var(--color-text); } /* dark text: contrast! */
.btn--outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }

/* --- Navbar --- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-surface); box-shadow: var(--shadow-soft);
  transition: padding var(--transition);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.navbar__controls {
  display: flex; align-items: center; gap: 0.8rem;
  margin-left: auto;
}
.navbar__links { display: none; list-style: none; gap: 1.5rem; }
.navbar__links a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.navbar__links a.active { color: var(--color-accent); }
.navbar__toggle { background: none; border: none; cursor: pointer; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 1.1rem;
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] .theme-toggle {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f8fafc;
}
html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--color-primary);
}
html[data-theme="dark"] .navbar {
  background: rgba(15, 23, 42, 0.82);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .navbar__links a:hover,
html[data-theme="dark"] .navbar__links a.active {
  background: rgba(148, 163, 184, 0.12);
  color: #f8fafc;
}
html[data-theme="dark"] .navbar__toggle {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.25);
}
html[data-theme="dark"] .navbar__toggle span {
  background: #f8fafc;
}

@media (min-width: 768px) {
  .navbar__links { display: flex; }
  .navbar__toggle { display: none; }
}

/* --- Card --- */
.card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  color: var(--color-text);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card__image-wrap { overflow: hidden; aspect-ratio: 16 / 9; }
.card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.card:hover .card__image { transform: scale(1.05); }
.card__body { padding: 1.25rem; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .preloader {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--color-text);
}
html[data-theme="dark"] .news-card a,
html[data-theme="dark"] .contact-item a {
  color: var(--color-accent-light);
}
html[data-theme="dark"] .btn--outline {
  color: #f8fafc;
  border-color: rgba(103, 232, 249, 0.9);
}

/* --- Grid helper --- */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Badge / filter chip --- */
.badge {
  display: inline-block; padding: 0.2rem 0.75rem;
  background: var(--color-accent-light); color: var(--color-primary-dark);
  border-radius: 999px; font-size: 0.8rem; font-weight: 600;
}
.chip {
  padding: 0.5rem 1.25rem; border: 2px solid var(--color-primary);
  background: transparent; color: var(--color-primary);
  border-radius: 999px; cursor: pointer; font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.chip.active, .chip:hover { background: var(--color-primary); color: #fff; }

/* --- Footer --- */
.footer {
  background: var(--color-primary-dark); color: #fff;
  padding-block: 3rem 1.5rem;
}
.footer .container {
  display: grid;
  gap: 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
}
.footer__brand h2,
.footer__links h3,
.footer__connect h3,
.footer__contact h3 {
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer__brand p,
.footer__connect p,
.footer__contact p {
  margin: 0 0 0.7rem;
  color: rgba(255,255,255,0.82);
}
.footer a { color: var(--color-accent-light); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__links nav,
.footer__connect nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}
.footer__bottom {
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Back to top --- */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-accent); color: var(--color-text);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* --- Preloader --- */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--color-surface); transition: opacity 0.4s ease;
}
.preloader.hidden { opacity: 0; pointer-events: none; }
.preloader__spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid var(--color-accent-light); border-top-color: var(--color-primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Lightbox --- */
.lightbox {
  position: fixed; inset: 0; z-index: 150; display: none;
  place-items: center; background: rgba(15, 23, 42, 0.85); padding: 2rem;
}
.lightbox.open { display: grid; }
.lightbox img { max-height: 85vh; border-radius: var(--radius-md); }

/* ===== MODERN ACTIVE UI ===== */
body { overflow-x:hidden; background:
 radial-gradient(circle at 10% 10%, rgba(34,211,238,.09), transparent 28rem),
 radial-gradient(circle at 90% 30%, rgba(99,102,241,.08), transparent 30rem), var(--color-bg); }
.navbar { background:rgba(255,255,255,.78); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid rgba(15,23,42,.07); box-shadow:0 8px 30px rgba(15,23,42,.06); transition:.45s var(--ease-spring); }
.navbar.scrolled { background:rgba(255,255,255,.92); box-shadow:0 12px 40px rgba(15,23,42,.12); }
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.scrolled {
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.34);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.navbar__inner { min-height:76px; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--color-primary)!important; position:relative; z-index:2; }
.brand__mark { display:block; width:48px; height:48px; object-fit:contain; border-radius:14px; padding:4px; background:rgba(255,255,255,.88); border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 28px rgba(30,64,175,.12); }
.brand__text { font-family:var(--font-heading); font-weight:700; letter-spacing:-.02em; }
.brand__text b { color:var(--color-accent); }
.navbar__links { align-items:center; gap:.35rem; }
.navbar__links li { position:relative; }
.navbar__links a { display:flex; align-items:center; gap:.45rem; padding:.72rem .85rem; border-radius:12px; font-size:.9rem; transition:.35s var(--ease-spring); position:relative; }
.navbar__links a span { font-size:.62rem; opacity:.38; font-weight:700; }
.navbar__links a:hover { color:var(--color-primary); background:rgba(30,64,175,.07); transform:translateY(-2px); }
.navbar__links a.active { color:var(--color-primary); background:linear-gradient(135deg,rgba(30,64,175,.1),rgba(34,211,238,.1)); }
.navbar__links a.active::after { content:""; position:absolute; left:14px; right:14px; bottom:4px; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); box-shadow:0 0 12px rgba(34,211,238,.6); animation:fadeUp .4s both; }
.navbar__toggle { width:46px;height:46px;display:none; border-radius:13px; border:1px solid rgba(15,23,42,.1); background:#fff; padding:11px; }
.navbar__toggle span { display:block;height:2px;background:var(--color-primary);margin:5px 0;transition:.3s; }
.scroll-progress { position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none;background:transparent; }
.scroll-progress span { display:block;height:100%;width:0;background:linear-gradient(90deg,#4f46e5,#06b6d4); box-shadow:0 0 12px rgba(6,182,212,.7); }
.cursor-glow { position:fixed;width:240px;height:240px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(34,211,238,.1),transparent 65%);transform:translate(-50%,-50%);mix-blend-mode:multiply; }
.ambient-orb { position:fixed;border-radius:50%;filter:blur(1px);pointer-events:none;z-index:-1;opacity:.35;animation:float 8s ease-in-out infinite; }
.ambient-orb--one { width:180px;height:180px;right:-70px;top:25%;background:radial-gradient(circle,#67e8f9,transparent 70%); }
.ambient-orb--two { width:220px;height:220px;left:-100px;top:65%;background:radial-gradient(circle,#818cf8,transparent 70%);animation-delay:-3s; }
.particles { position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; }
.particle { position:absolute;width:3px;height:3px;border-radius:50%;background:#22d3ee;opacity:.4;animation:float var(--duration) ease-in-out infinite; animation-delay:var(--delay); }
.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn::before { content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transition:transform .7s;z-index:-1; }
.btn:hover::before { transform:translateX(110%); }
.btn:active { transform:scale(.96); }
.card,.news-card,.contact-card,.contact-form { transition:transform .5s var(--ease-spring),box-shadow .5s var(--ease-spring); }
.card:hover,.news-card:hover,.contact-card:hover,.contact-form:hover { transform:translateY(-10px); box-shadow:0 25px 55px rgba(15,23,42,.14); }
.preloader { background:radial-gradient(circle,#f8fbff,#eaf2ff); transition:opacity .7s var(--ease-spring); }
.preloader p { position:absolute;margin-top:110px;font-weight:600;color:var(--color-primary);letter-spacing:.05em;animation:fadeUp .8s both; }
.preloader__spinner { border:none!important;width:70px;height:70px;position:relative;display:block!important;animation:none!important; }
.preloader__spinner i { position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--color-primary);animation:spin 1s linear infinite; }
.preloader__spinner i:nth-child(2){inset:9px;border-top-color:var(--color-accent);animation-duration:.7s;animation-direction:reverse}
.preloader__spinner i:nth-child(3){inset:18px;border-top-color:#6366f1;animation-duration:1.4s}
@keyframes spin {to{transform:rotate(360deg)}}
.page-hero { padding-block:8rem 5rem; position:relative; overflow:hidden; }
.page-hero::after { content:"";position:absolute;width:500px;height:500px;right:-180px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.13),transparent 65%);animation:float 7s ease-in-out infinite; }
.page-hero h1 em { font-style:normal; color:var(--color-accent); }
.eyebrow { display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--color-accent);margin-bottom:.7rem; }
.section-heading { display:flex;justify-content:space-between;align-items:end;margin-bottom:2rem; }
.news-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.news-card { padding:1.8rem;border:1px solid rgba(30,64,175,.08);border-radius:24px;background:rgba(255,255,255,.75);backdrop-filter:blur(12px); }
.news-card__icon { font-size:2rem;margin-bottom:1.4rem;animation:float 4s ease-in-out infinite; }
.news-card span { font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent);font-weight:700; }
.news-card h3 { margin:.5rem 0 .7rem; }
.news-card a { display:inline-block;margin-top:1rem;font-weight:700;text-decoration:none; }
.contact-layout { display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:stretch; }
.contact-card,.contact-form { padding:2.2rem;border-radius:28px;background:rgba(255,255,255,.8);border:1px solid rgba(30,64,175,.08);backdrop-filter:blur(14px); }
.contact-item { display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(15,23,42,.08); }
.contact-form label { display:block;font-weight:600;margin-bottom:1rem; }
.contact-form input,.contact-form textarea { width:100%;margin-top:.45rem;padding:.9rem 1rem;border:1px solid rgba(15,23,42,.12);border-radius:14px;background:#fff;font:inherit;transition:.3s; }
.contact-form input:focus,.contact-form textarea:focus { outline:none;border-color:var(--color-accent);box-shadow:0 0 0 4px rgba(34,211,238,.12);transform:translateY(-1px); }
#form-status { margin-top:1rem;color:var(--color-primary);font-weight:600; }
@media (max-width: 900px) {
 .navbar__toggle { display:block; }
 .navbar__links { position:absolute;left:1rem;right:1rem;top:calc(100% + 10px);display:flex;flex-direction:column;align-items:stretch;gap:.3rem;padding:.65rem;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border:1px solid rgba(15,23,42,.08);border-radius:18px;box-shadow:0 25px 50px rgba(15,23,42,.15);opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:.35s var(--ease-spring); }
 .navbar__links.open { opacity:1;transform:none;pointer-events:auto; }
 .navbar__links a { padding:.9rem 1rem; }
 .news-grid,.contact-layout { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .cursor-glow,.particles,.ambient-orb { display:none!important; } }

.click-ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%);pointer-events:none;animation:ripple .65s ease-out forwards}@keyframes ripple{to{width:240px;height:240px;opacity:0}}
.navbar__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.navbar__toggle.is-open span:nth-child(2){opacity:0}.navbar__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   NAVBAR ACCESSIBILITY + RESPONSIVE CONTRAST FIX
   ========================================================= */
.navbar {
  isolation: isolate;
}

.navbar__controls {
  position: relative;
  z-index: 5;
}

.navbar__links a {
  color: #172554;
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  color: #0f172a;
  background: rgba(30, 64, 175, 0.10);
}

.navbar__links a.active,
.navbar__links a.active:hover,
.navbar__links a.active:focus-visible {
  color: #0f172a;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.14), rgba(6, 182, 212, 0.16));
  font-weight: 700;
}

.navbar__links a.active::after {
  background: linear-gradient(90deg, #1e3a8a, #0891b2);
}

html[data-theme="dark"] .navbar__links a {
  color: #dbeafe;
}

html[data-theme="dark"] .navbar__links a:hover,
html[data-theme="dark"] .navbar__links a:focus-visible {
  color: #ffffff;
  background: rgba(103, 232, 249, 0.12);
}

html[data-theme="dark"] .navbar__links a.active,
html[data-theme="dark"] .navbar__links a.active:hover,
html[data-theme="dark"] .navbar__links a.active:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.30), rgba(6, 182, 212, 0.20));
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.12);
}

html[data-theme="dark"] .navbar__links a.active::after {
  background: linear-gradient(90deg, #67e8f9, #818cf8);
}

.navbar__toggle {
  color: #172554;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(30, 58, 138, 0.18);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

.navbar__toggle span {
  background: #172554;
}

html[data-theme="dark"] .navbar__toggle {
  color: #ffffff;
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(103, 232, 249, 0.25);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35);
}

html[data-theme="dark"] .navbar__toggle span {
  background: #ffffff;
}

/* Mobile menu: opaque enough to preserve text contrast over page effects. */
@media (max-width: 900px) {
  .navbar {
    z-index: 1000;
  }

  .navbar__inner {
    min-height: 68px;
  }

  .navbar__links {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(30, 58, 138, 0.14);
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.20);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  .navbar__links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .navbar__links li,
  .navbar__links a {
    width: 100%;
  }

  .navbar__links a {
    min-height: 48px;
    padding: 0.78rem 0.9rem;
    color: #172554;
  }

  .navbar__links a.active {
    color: #0f172a;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.15), rgba(6, 182, 212, 0.18));
  }

  .navbar__links a.active::after {
    left: 0.7rem;
    right: auto;
    bottom: 8px;
    width: 4px;
    height: calc(100% - 16px);
    border-radius: 99px;
  }

  html[data-theme="dark"] .navbar__links {
    background: rgba(7, 17, 31, 0.98);
    border-color: rgba(103, 232, 249, 0.20);
    box-shadow: 0 24px 55px rgba(2, 6, 23, 0.48);
  }

  html[data-theme="dark"] .navbar__links a {
    color: #e2e8f0;
  }

  html[data-theme="dark"] .navbar__links a:hover,
  html[data-theme="dark"] .navbar__links a:focus-visible {
    color: #ffffff;
    background: rgba(103, 232, 249, 0.10);
  }

  html[data-theme="dark"] .navbar__links a.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(6, 182, 212, 0.22));
  }

  html[data-theme="dark"] .navbar__links a.active::after {
    background: linear-gradient(180deg, #67e8f9, #818cf8);
  }

  .theme-toggle {
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .navbar__inner {
    padding-inline: 0.85rem;
  }

  .brand__mark {
    width: 42px;
    height: 42px;
  }

  .brand__text {
    font-size: 0.92rem;
  }

  .navbar__controls {
    gap: 0.45rem;
  }

  .navbar__toggle,
  .theme-toggle {
    width: 42px;
    height: 42px;
  }

  .navbar__links {
    left: 0.25rem;
    right: 0.25rem;
  }
}

/* =========================================================
   MOBILE NAVBAR — FULL-WIDTH DROPDOWN FIX
   Prevents the menu from being trapped inside .navbar__controls.
   ========================================================= */
@media (max-width: 900px) {
  .navbar__controls {
    position: static;
  }

  .navbar__links {
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100svh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2000 !important;
    box-sizing: border-box;
    padding: 0.7rem !important;
    border-radius: 20px !important;
  }

  .navbar__links li,
  .navbar__links a {
    min-width: 0;
    box-sizing: border-box;
  }

  .navbar__links a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .navbar__links a span {
    flex: 0 0 2rem;
    text-align: center;
  }

  .navbar__links a.active::after {
    left: 0.55rem;
    right: auto;
    bottom: 8px;
    width: 4px;
    height: calc(100% - 16px);
  }
}

@media (max-width: 480px) {
  .navbar__links {
    top: 68px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100svh - 80px);
  }

  .navbar__links a {
    min-height: 48px;
    padding: 0.78rem 0.75rem !important;
    font-size: 0.92rem;
    gap: 0.45rem;
  }

  .navbar__links a span {
    flex: 0 0 1.8rem;
    font-size: 0.6rem;
  }
}