/* Dark theme overrides */
:root {
  --dark-bg: #111318;
  --dark-surface: #171a21;
  --dark-surface-raised: #1d212a;
  --dark-text: #edf0f2;
  --dark-muted: #ffffff;
  --dark-border: rgba(255, 255, 255, 0.10);
  --dark-red-glow: rgba(192, 5, 5, 0.12);
  --dark-red-glow-soft: rgba(192, 5, 5, 0.06);
  --accent-red: #e51d35;
  --accent-red-hover: #c8172e;
  --brand-red: #e51d35;
  --brand-red-dark: #c8172e;
  --brand-red-light: #ff3b4f;
  --brand: #e51d35;
}

html,
body {
  background-color: var(--dark-bg) !important;
  color: var(--dark-muted);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(192, 5, 5, 0.13), transparent 27%),
    radial-gradient(circle at 92% 42%, rgba(192, 5, 5, 0.07), transparent 31%),
    linear-gradient(135deg, #111318 0%, #151820 52%, #101217 100%) !important;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
  color: var(--dark-text);
}

p {
  color: var(--dark-muted);
}

a {
  color: var(--accent-red);
}

a:hover {
  color: var(--brand-red-light);
}

/* Header */
.navbar {
  background: rgba(8, 10, 15, 0.22) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.navbar.scrolled {
  background: rgba(8, 10, 15, 0.38) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: none !important;
}

.navbar-brand img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.68));
}

.navbar-brand::before {
  content: '';
  position: absolute;
  inset: -10px -34px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.10) 42%, transparent 100%);
  filter: blur(10px);
  opacity: 0.9;
}

.nav-link,
.lang-btn {
  color: #ffffff !important;
}

.nav-link:hover,
.nav-link.active,
.lang-btn:hover {
  color: var(--dark-text) !important;
}

.nav-contact {
  color: var(--accent-red) !important;
}

.lang-btn {
  color: var(--brand-red-light) !important;
}

.lang-btn.active::before {
  display: none;
}

.language-selector {
  border-left-color: var(--dark-border);
}

.navbar-toggler {
  background: rgba(255, 255, 255, 0.08);
}

/* Shared surfaces */
section.light,
section.gray,
.card,
.glass,
.card.glass {
  background-color: var(--dark-surface) !important;
}

section.gray {
  background-color: #151820 !important;
}

.hero-cta-btn,
.about-more-btn,
.service-card-link,
.clients-cta-link,
.btn,
.btn-brand,
.nav-contact,
.lang-btn,
.navbar-toggler,
.dropdown-menu,
.dropdown-item {
  border-radius: 0 !important;
}

.clients-cta-link {
  border: 1px solid var(--accent-red) !important;
}

.navbar .dropdown-toggle {
  color: #ffffff !important;
  background: transparent !important;
}

.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle.active,
.navbar .dropdown-toggle[aria-expanded="true"] {
  color: var(--accent-red) !important;
}

.service-telephonie .service-detail-hero h1 {
  font-size: clamp(2.8rem, 5vw, 6.4rem);
  letter-spacing: -0.075em;
}

section.dark {
  background-color: #0d0f13 !important;
}

.glass {
  background: rgba(29, 33, 42, 0.72) !important;
  border-color: var(--dark-border);
}

.gradient-light {
  background: linear-gradient(135deg, #171a21, #111318) !important;
}

.section-header p {
  color: var(--dark-muted);
}

/* Keep body copy readable on the dark experience. */
p,
li,
small,
label,
.text-muted,
.lead,
.footer-section p,
.footer-section span {
  color: #ffffff !important;
}

/* Shared red accents */
.text-brand,
.section-header h6,
.values-kicker,
.value-number,
.about-service-icon,
.clients-header h6,
.contact-item i,
.footer-links a:hover,
.contact-item a:hover {
  color: var(--accent-red) !important;
}

.btn-brand,
.hero-cta-btn:not(.secondary),
.clients-cta-link,
.contact-submit,
.service-tag:hover,
.social-link:hover {
  background: var(--accent-red) !important;
}

.btn-brand:hover,
.hero-cta-btn:not(.secondary):hover,
.contact-submit:hover {
  background: var(--accent-red-hover) !important;
}

.btn-outline,
.hero-cta-btn.secondary,
.clients-cta-link,
.service-tag,
.social-link {
  border-color: var(--accent-red) !important;
  color: var(--accent-red) !important;
}

.btn-outline:hover,
.hero-cta-btn.secondary:hover,
.clients-cta-link:hover {
  background: rgba(210, 96, 105, 0.16) !important;
  color: #f0a0a6 !important;
}

.service-card-accent,
.values-kicker::after,
.timeline-value:hover::before,
.director-separator {
  background: var(--accent-red) !important;
}

.timeline-value::before {
  border-color: var(--accent-red) !important;
}

.timeline-pulse {
  background: linear-gradient(90deg, transparent, var(--accent-red) 45%, #f0a0a6 68%, var(--accent-red)) !important;
  box-shadow: 0 0 8px rgba(210, 96, 105, 0.42) !important;
}

.timeline-value:hover h3,
.director-subtitle-label,
.director-separator,
.contact-form-index,
.contact-form-status.is-error {
  color: var(--accent-red) !important;
}

.contact-modal-aside {
  background: linear-gradient(145deg, #6e343a, var(--accent-red)) !important;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--accent-red) !important;
  box-shadow: inset 3px 0 var(--accent-red) !important;
}

/* Hero */
.hero,
.hero[style] {
  background: var(--dark-bg) !important;
  background-color: var(--dark-bg) !important;
}

.hero::after,
.hero::before {
  background:
    radial-gradient(ellipse at 95% -15%, rgba(227, 6, 19, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse at 25% 105%, rgba(227, 6, 19, 0.07) 0%, transparent 70%),
    #111318 !important;
}

.hero-title,
.hero-stat-value {
  color: var(--dark-text) !important;
}

.hero-subtitle,
.hero-stat-label {
  color: var(--dark-muted) !important;
}

.orbit-title,
.orbit-desc {
  color: #fff !important;
}

.hero-stats {
  border-top-color: var(--dark-border);
}

.hero-cta-btn.secondary {
  color: var(--dark-text) !important;
  background: var(--dark-surface-raised) !important;
}

.hero-cta-btn.secondary:hover {
  background: #272c37 !important;
  color: #fff !important;
}

/* Main sections */
.about-us,
.stats-section,
.services,
.values-section,
.clients-section {
  background-color: transparent !important;
}

.clients-cta-link {
  background: var(--accent-red) !important;
  color: #fff !important;
  border-color: var(--accent-red) !important;
}

.clients-cta-link:hover {
  background: transparent !important;
  color: #f0a0a6 !important;
}

.services {
  background: var(--dark-surface) !important;
}

.services-kicker,
.about-main .about-kicker-v2,
.about-services-section .about-kicker-v2 {
  color: #ffffff !important;
}

.services h2,
.about-main .about-title-v2,
.about-services-section .about-title-v2,
.clients-header h2,
.values-header h2,
.timeline-value h3 {
  color: var(--dark-text) !important;
}

.services .intro .services-intro,
.services .intro p,
.values-header p,
.timeline-value p,
.clients-header p,
.about-main .about-lead-v2 {
  color: var(--dark-muted) !important;
}

.carousel-control {
  color: var(--dark-text);
}

.carousel-prev::after,
.carousel-next::after {
  border-color: var(--dark-text);
}

.values-section#values {
  background: var(--dark-surface) !important;
}

.timeline-rail {
  background: rgba(223, 191, 194, 0.32);
}

.timeline-value::before {
  background: var(--dark-surface);
}

.clients-section {
  background: linear-gradient(180deg, #171a21 0%, #111318 100%) !important;
}

.clients-carousel::before {
  background: linear-gradient(to right, #171a21 0%, rgba(23, 26, 33, 0.8) 40%, transparent 100%);
}

.clients-carousel::after {
  background: linear-gradient(to left, #171a21 0%, rgba(23, 26, 33, 0.8) 40%, transparent 100%);
}

.clients-header h2,
.clients-trust-message p {
  color: var(--dark-text) !important;
}

.clients-header p {
  color: var(--dark-muted) !important;
}

.clients-trust-message {
  border-top-color: var(--dark-border);
}

.about-main,
.about-services-section {
  background: var(--dark-surface) !important;
}

.about-service-card {
  background: var(--dark-surface-raised);
  border-color: var(--dark-border);
}

.about-service-card h3 {
  color: var(--dark-text);
}

.about-service-card p {
  color: var(--dark-muted);
}

/* Modal */
.contact-modal-form {
  background: var(--dark-surface) !important;
}

.contact-modal-form h3 {
  color: var(--dark-text);
}

.contact-modal-form > p,
.contact-form-note,
.contact-form-status {
  color: var(--dark-muted);
}

.contact-field label {
  color: var(--dark-text);
}

.contact-field input,
.contact-field textarea {
  color: var(--dark-text);
  background: var(--dark-surface-raised);
  border-color: var(--dark-border);
}

.contact-modal-close {
  background: var(--dark-surface-raised);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

/* Footer */
footer {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.footer-logo h3,
footer h4.navbar-brand {
  margin: 0 !important;
  color: var(--accent-red) !important;
  font-size: 1.05rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

footer::before {
  background: linear-gradient(90deg, transparent, rgba(210, 96, 105, 0.42), transparent) !important;
}

.footer-section h3::after {
  background: var(--accent-red) !important;
}

.footer-services {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

.service-tag {
  width: fit-content !important;
  max-width: 100%;
  min-width: 0;
  padding: 5px 7px !important;
  border-radius: 8px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.68rem;
  line-height: 1.15;
  justify-self: start;
}

.director-section,
.director-card {
  background-color: var(--dark-surface) !important;
}

/* One continuous page background */
section,
.about-us,
.stats-section,
.services,
.values-section,
.clients-section,
.director-section,
.partner-form-section,
footer {
  background: transparent !important;
  background-color: transparent !important;
}

.about-us::after,
.stats-section::after,
.services::after,
.values-section::after,
.clients-section::after {
  background: transparent !important;
  opacity: 0 !important;
}

.hero,
.hero[style],
.hero::after,
.hero::before {
  background-color: transparent !important;
}

.hero::after,
.hero::before {
  background: transparent !important;
}

.hero::before {
  background: url('../img/hero-cyber.png') center right / cover no-repeat !important;
  filter: blur(3px);
  opacity: 0.78;
  transform: scale(1.025);
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(8, 10, 15, 0.96) 0%, rgba(8, 10, 15, 0.84) 34%, rgba(8, 10, 15, 0.28) 70%, rgba(8, 10, 15, 0.18) 100%),
    linear-gradient(0deg, rgba(8, 9, 13, 0.7), transparent 38%, rgba(8, 9, 13, 0.2)) !important;
}

.partner-form-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(210, 96, 105, 0.08), transparent 28%),
    transparent !important;
}

body.service-page,
.services-page-header,
.about-main,
.about-services-section,
.about-hero {
  background: transparent !important;
  background-color: transparent !important;
}

.services-page-header::before {
  background: radial-gradient(circle, rgba(210, 96, 105, 0.10), transparent 70%) !important;
}

.services-page-header .services-title,
.services-page-header .services-description,
.services-page-header .services-kicker {
  color: var(--dark-text) !important;
}

.services-page-header .services-description {
  color: var(--dark-muted) !important;
}

.clients-section {
  background: transparent !important;
}

.clients-carousel::before {
  background: linear-gradient(to right, rgba(17, 19, 24, 0.95), rgba(17, 19, 24, 0.55) 40%, transparent) !important;
}

.clients-carousel::after {
  background: linear-gradient(to left, rgba(17, 19, 24, 0.95), rgba(17, 19, 24, 0.55) 40%, transparent) !important;
}

.hero-accent {
  background: linear-gradient(125deg, var(--accent-red) 0%, var(--brand-red-light) 52%, var(--brand-red-dark) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-kicker,
.about-kicker-v2,
.about-main-image::before,
.about-brand-accent,
.about-list-icon,
.director-subtitle-label,
.company-figure-value,
.contact-form-index,
.service-eyebrow,
.value-number,
.values-kicker,
.about-service-icon,
.clients-header h6,
.clients-trust-message span,
.contact-item i,
.footer-logo h3,
.nav-contact,
.lang-btn.active {
  color: var(--accent-red) !important;
}

.btn-brand,
.about-more-btn,
.hero-cta-btn:not(.secondary),
.clients-cta-link,
.contact-submit {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  color: #fff !important;
}

.btn-brand:hover,
.about-more-btn:hover,
.hero-cta-btn:not(.secondary):hover,
.clients-cta-link:hover,
.contact-submit:hover {
  background: var(--accent-red-hover) !important;
  border-color: var(--accent-red-hover) !important;
  color: #fff !important;
}

.navbar .nav-link::after,
.navbar .dropdown-toggle::before {
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.1), rgba(229, 29, 53, 0.92), rgba(17, 17, 17, 0.1)) !important;
}

.values-kicker::after,
.about-kicker-v2::after,
.service-card-accent,
.footer-section h3::after {
  background: var(--accent-red) !important;
}

.footer-links a:hover,
.contact-item a:hover,
.about-main-image::before,
.company-figure-value,
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle.active,
.navbar .dropdown-toggle[aria-expanded="true"] {
  color: var(--accent-red) !important;
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin: 8px -12px 0;
    padding: 12px 20px 18px;
    background: rgba(8, 10, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}