@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   SECUREON CONSULTING — Ultra-Elegant Pro Styles
   Cybersecurity · IT · Cloud Privado
   ═══════════════════════════════════════════════════════════════ */
/* ── Imports ── */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ── Custom Properties ── */
/* ── Base & Typography ── */
body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #e8e6e1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  /* ── Header ── */
  /* ── Main Container ── */
  /* ── Footer ── */
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #f4f2ed;
  letter-spacing: -0.035em;
  font-weight: 700;
}
body h1 {
  font-weight: 800;
}
body h2 {
  font-weight: 700;
}
body p {
  line-height: 1.7;
}
body.no-carousel > header .header-right .navbar-default .navbar-nav li.active > a {
  color: #3b9eff !important;
  position: relative;
}
body.no-carousel > header .header-right .navbar-default .navbar-nav li.active > a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #3b9eff;
  border-radius: 1px;
}
body.no-carousel > header .header-right .navbar-default .navbar-nav li > a {
  font-weight: 600;
  font-size: 15px;
  color: rgba(244, 242, 237, 0.7) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 20px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}
body.no-carousel > header .header-right .navbar-default .navbar-nav li > a:hover, body.no-carousel > header .header-right .navbar-default .navbar-nav li > a:active {
  color: #f4f2ed !important;
}
body > header {
  background-color: rgba(6, 11, 24, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(59, 158, 255, 0.06);
  transition: all 0.4s ease;
}
body > header a {
  font-size: 15px;
}
body > header .logo img,
body > header .inverted_logo img {
  transition: opacity 0.3s ease;
}
body .main_container {
  background-color: transparent;
}
body .main_container .page-header {
  border-bottom: 1px solid rgba(59, 158, 255, 0.08);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}
body .main_container .page-header h1 {
  color: #f4f2ed;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
body footer .site_footer {
  background-color: #080e1e;
  border-top: 1px solid rgba(59, 158, 255, 0.06);
}
body footer .site_footer, body footer .site_footer a {
  color: rgba(244, 242, 237, 0.6);
  transition: color 0.3s ease;
}
body footer .site_footer a:hover {
  color: #3b9eff;
  text-decoration: none;
}
body footer .footer .copyright {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(244, 242, 237, 0.35);
}
body .well {
  background-color: rgba(59, 158, 255, 0.04);
  border: 1px solid rgba(59, 158, 255, 0.08);
  border-radius: 12px;
  color: rgba(244, 242, 237, 0.7);
  padding: 1.5rem 2rem;
}

/* ── Headline System ── */
.headline p {
  font-size: 1.15rem;
  color: rgba(244, 242, 237, 0.55);
  line-height: 1.75;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}
.headline h1 {
  font-weight: 800;
  line-height: 1.08;
  margin: 0;
  font-size: 3.2rem;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, #f4f2ed 0%, rgba(244, 242, 237, 0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.headline h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.headline .text-corporatiu {
  background: linear-gradient(135deg, #3b9eff 0%, #6bbfff 50%, #3b9eff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 200% center;
  }
}
/* ── Cards — Unified System ── */
.card {
  position: relative;
  height: 100%;
  padding: 2rem;
  border: 1px solid rgba(59, 158, 255, 0.16);
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.75) 0%, rgba(12, 20, 42, 0.85) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
  border-radius: 16px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  /* Process connector lines */
  /* Tech card variant */
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 158, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.card .step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  background: linear-gradient(135deg, #3b9eff, rgba(59, 158, 255, 0.4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.05em;
}
.card h3 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card p {
  color: rgba(244, 242, 237, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
}
.card:hover, .card:focus {
  border-color: rgba(59, 158, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(59, 158, 255, 0.08), 0 0 0 1px rgba(59, 158, 255, 0.06);
}
.card:hover::before, .card:focus::before {
  opacity: 1;
}
@media (min-width: 769px) {
  .card.process::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(calc(50% + 4px), -50%);
    width: 28px;
    height: 1px;
    background: rgba(59, 158, 255, 0.15);
  }
  .card.process::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 158, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
  }
}
.card.alt {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
  padding: 1.25rem 1rem;
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.7) 0%, rgba(12, 20, 42, 0.8) 100%);
  border: 1px solid rgba(59, 158, 255, 0.18);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
}
.card.alt h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(244, 242, 237, 0.75);
  transition: all 0.4s ease;
}
.card.alt:hover {
  background: linear-gradient(165deg, rgba(20, 35, 65, 0.6) 0%, rgba(12, 22, 45, 0.8) 100%);
  border-color: rgba(59, 158, 255, 0.3);
  box-shadow: 0 4px 20px rgba(59, 158, 255, 0.1), inset 0 1px 0 rgba(59, 158, 255, 0.1);
}
.card.alt:hover h3 {
  color: #3b9eff;
}
.card.alt::after {
  display: none !important;
}

/* ── Tech grid: force Fortinet (card without .alt) to match the others ── */
#widget_fortinet .card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
  padding: 1.25rem 1rem;
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.7) 0%, rgba(12, 20, 42, 0.8) 100%);
  border: 1px solid rgba(59, 158, 255, 0.18);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
}
#widget_fortinet .card .step-num {
  display: none;
}
#widget_fortinet .card h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(244, 242, 237, 0.75);
  transition: all 0.4s ease;
}
#widget_fortinet .card:hover {
  background: linear-gradient(165deg, rgba(20, 35, 65, 0.6) 0%, rgba(12, 22, 45, 0.8) 100%);
  border-color: rgba(59, 158, 255, 0.3);
  box-shadow: 0 4px 20px rgba(59, 158, 255, 0.1), inset 0 1px 0 rgba(59, 158, 255, 0.1);
}
#widget_fortinet .card:hover h3 {
  color: #3b9eff;
}
#widget_fortinet .card::before, #widget_fortinet .card::after {
  display: none !important;
}

/* ── Tech rows: equal height and spacing across both rows ── */
#container-comp1_tecnologias {
  padding-top: 30px !important;
  padding-bottom: 50px !important;
}

#container-comp1_tecnologias .widgetsContainer,
#container-comp1_tecnologias2 .widgetsContainer {
  display: flex;
  align-items: stretch;
}
#container-comp1_tecnologias .widgetsContainer > div[class*=col-],
#container-comp1_tecnologias2 .widgetsContainer > div[class*=col-] {
  display: flex;
}
#container-comp1_tecnologias .widgetsContainer > div[class*=col-] > .widget,
#container-comp1_tecnologias2 .widgetsContainer > div[class*=col-] > .widget {
  display: flex;
  width: 100%;
}
#container-comp1_tecnologias .widgetsContainer > div[class*=col-] > .widget .card,
#container-comp1_tecnologias2 .widgetsContainer > div[class*=col-] > .widget .card {
  width: 100%;
  min-height: 80px;
  height: 100%;
}

/* ── Services Grid (Home) ── */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 640px) {
  .services {
    grid-template-columns: 1fr;
  }
}
.service-card {
  padding: 1.25rem 1rem;
  border: 1px solid rgba(59, 158, 255, 0.16);
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.7) 0%, rgba(12, 20, 42, 0.8) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(59, 158, 255, 0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.service-card .icon {
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(59, 158, 255, 0.06);
  border: 1px solid rgba(59, 158, 255, 0.1);
  transition: all 0.4s ease;
}
.service-card .icon.icon-blue i,
.service-card .icon.icon-green i,
.service-card .icon.icon-purple i {
  color: #3b9eff;
}
.service-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  color: #f4f2ed;
  letter-spacing: -0.01em;
}
.service-card p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(244, 242, 237, 0.4);
  font-weight: 400;
}
.service-card:hover, .service-card:focus {
  border-color: rgba(59, 158, 255, 0.2);
  transform: translateY(-3px);
}
.service-card:hover::after, .service-card:focus::after {
  opacity: 1;
}
.service-card:hover .icon, .service-card:focus .icon {
  background: rgba(59, 158, 255, 0.12);
  border-color: rgba(59, 158, 255, 0.2);
}

/* ── KPI Stats ── */
.kpi-stats {
  display: flex;
  justify-content: flex-start;
  gap: 3rem;
  margin-top: 2.5rem;
  text-align: left;
  flex-wrap: nowrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(59, 158, 255, 0.06);
}

@media (max-width: 768px) {
  .kpi-stats {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 2rem;
  }
}
.kpi-item {
  flex: none;
}

.kpi-number {
  font-family: "JetBrains Mono", monospace;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #3b9eff 0%, #7dcfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.kpi-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(244, 242, 237, 0.35);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* ── Feature Cards (Servicios page) ── */
.feature-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .feature-cards {
    grid-template-columns: 1fr;
  }
}
.feature-card {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.7) 0%, rgba(12, 20, 42, 0.8) 100%);
  border: 1px solid rgba(59, 158, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
  border-radius: 16px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 158, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.feature-card:hover {
  border-color: rgba(59, 158, 255, 0.18);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(59, 158, 255, 0.06);
}
.feature-card:hover::before {
  opacity: 1;
}
.feature-card .feature-icon {
  background: rgba(59, 158, 255, 0.06);
  padding: 0.85rem;
  border-radius: 14px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  border: 1px solid rgba(59, 158, 255, 0.1);
  transition: all 0.4s ease;
  flex-shrink: 0;
}
.feature-card:hover .feature-icon {
  background: rgba(59, 158, 255, 0.12);
  border-color: rgba(59, 158, 255, 0.25);
  box-shadow: 0 0 20px rgba(59, 158, 255, 0.08);
}
.feature-card .feature-icon i {
  color: #3b9eff;
}
.feature-card .feature-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #f4f2ed;
  letter-spacing: -0.02em;
}
.feature-card .feature-content p {
  margin-bottom: 1rem;
  color: rgba(244, 242, 237, 0.5);
  font-size: 0.9rem;
  line-height: 1.65;
}
.feature-card .feature-content ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.feature-card .feature-content ul li {
  margin-bottom: 0.35rem;
  color: rgba(59, 158, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
  padding-left: 1rem;
  transition: color 0.3s ease;
}
.feature-card .feature-content ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: rgba(59, 158, 255, 0.4);
  font-weight: 600;
}

/* Feature card color variants — unified elegant look */
.feature-card.feature-green,
.feature-card.feature-blue {
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.75) 0%, rgba(12, 20, 42, 0.85) 100%);
  border-color: rgba(59, 158, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
}
.feature-card.feature-green:hover,
.feature-card.feature-blue:hover {
  background: linear-gradient(165deg, rgba(20, 35, 65, 0.6) 0%, rgba(10, 18, 35, 0.8) 100%);
  border-color: rgba(59, 158, 255, 0.22);
}
.feature-card.feature-green .feature-icon,
.feature-card.feature-blue .feature-icon {
  background: rgba(59, 158, 255, 0.08);
  border: 1px solid rgba(59, 158, 255, 0.12);
}
.feature-card.feature-green .feature-icon i,
.feature-card.feature-blue .feature-icon i {
  color: #3b9eff;
}
.feature-card.feature-green .feature-content ul li,
.feature-card.feature-blue .feature-content ul li {
  color: rgba(59, 158, 255, 0.8);
}

/* ── Core Section (Nosotros) ── */
.core-section {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.core-section h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: #f4f2ed;
  letter-spacing: -0.035em;
}
.core-section p {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(244, 242, 237, 0.55);
  margin-bottom: 1.25rem;
}

/* ── Services Box (Nosotros) ── */
.services-box {
  border: 1px solid rgba(59, 158, 255, 0.16);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 2rem;
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.65) 0%, rgba(12, 20, 42, 0.75) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
}

.services-box-header {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  color: #f4f2ed;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.services-box-header i {
  background: rgba(59, 158, 255, 0.08);
  color: #3b9eff;
  padding: 0.6rem;
  border-radius: 10px;
  margin-right: 0.85rem;
  font-size: 1.1rem;
  border: 1px solid rgba(59, 158, 255, 0.1);
}

.services-columns {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.services-columns .column {
  flex: 1;
  min-width: 200px;
  text-align: left;
}
.services-columns h4 {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.services-columns h4.blue,
.services-columns h4.green {
  color: #3b9eff;
}
.services-columns ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.services-columns ul li {
  font-size: 0.875rem;
  color: rgba(244, 242, 237, 0.5);
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
}
.services-columns ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: rgba(59, 158, 255, 0.4);
  font-weight: 600;
}

/* ── Stats Section (Nosotros) ── */
.stats-section {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.stats-image {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  margin-bottom: 2rem;
  border: 1px solid rgba(59, 158, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(59, 158, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.7) 0%, rgba(12, 20, 42, 0.8) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(59, 158, 255, 0.07);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.stat-card:hover {
  border-color: rgba(59, 158, 255, 0.18);
  transform: translateY(-3px);
}
.stat-card i {
  font-size: 1.25rem;
  color: #3b9eff;
  margin-top: 0.15rem;
  opacity: 0.8;
}
.stat-card strong {
  color: #f4f2ed;
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.stat-card p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(244, 242, 237, 0.4);
}

/* ── CTA Button ── */
.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4f2ed;
  background: linear-gradient(135deg, #3b9eff 0%, #2680d6 100%);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
}
.btn-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-custom:hover, .btn-custom:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59, 158, 255, 0.25), 0 0 0 1px rgba(59, 158, 255, 0.3);
  color: #fff;
  text-decoration: none;
}
.btn-custom:hover::before, .btn-custom:focus::before {
  opacity: 1;
}
.btn-custom:active {
  transform: translateY(0);
}

/* ── Contact Form Styling ── */
.contact-form .form-control {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: rgba(10, 18, 38, 0.6);
  border: 1px solid rgba(59, 158, 255, 0.1);
  border-radius: 10px;
  color: #f4f2ed;
  padding: 12px 16px;
  font-size: 0.9rem;
  transition: all 0.4s ease;
}
.contact-form .form-control:focus {
  border-color: rgba(59, 158, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.08);
  outline: none;
  background: rgba(12, 22, 45, 0.8);
}
.contact-form .form-control::placeholder {
  color: rgba(244, 242, 237, 0.25);
}
.contact-form textarea.form-control {
  min-height: 140px;
  resize: vertical;
}
.contact-form label {
  color: rgba(244, 242, 237, 0.6);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.contact-form .checkbox label {
  color: rgba(244, 242, 237, 0.5);
  font-weight: 400;
  font-size: 0.85rem;
}
.contact-form .checkbox label a {
  color: #3b9eff;
  text-decoration: none;
}
.contact-form .checkbox label a:hover {
  text-decoration: underline;
}
.contact-form .btn-success {
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 12px 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #3b9eff 0%, #2680d6 100%);
  border: none;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-form .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59, 158, 255, 0.25);
}

/* ── Composition Containers — Fine-tuning ── */
.compositionContainer[style*="background-color: rgba(23,35,64"] {
  background: linear-gradient(180deg, rgba(10, 18, 38, 0.95) 0%, rgba(8, 14, 30, 0.98) 100%) !important;
  border-top: 1px solid rgba(59, 158, 255, 0.04);
  border-bottom: 1px solid rgba(59, 158, 255, 0.04);
}

/* ── Page Header Enhancement ── */
.page-header h1 {
  position: relative;
  display: inline-block;
}
.page-header h1::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: #3b9eff;
  border-radius: 2px;
}

/* ── Breadcrumb ── */
.breadcrumb {
  background: transparent;
}

/* ── Back to Top ── */
.back-top {
  background: rgba(59, 158, 255, 0.1) !important;
  border: 1px solid rgba(59, 158, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  transition: all 0.4s ease;
}
.back-top:hover {
  background: rgba(59, 158, 255, 0.2) !important;
  border-color: rgba(59, 158, 255, 0.3);
  transform: translateY(-2px);
}
.back-top i {
  color: #3b9eff;
}

/* ── Selection Color ── */
::selection {
  background: rgba(59, 158, 255, 0.25);
  color: #f4f2ed;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #060b18;
}

::-webkit-scrollbar-thumb {
  background: rgba(59, 158, 255, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 158, 255, 0.35);
}

/* ── Responsive Refinements ── */
@media (max-width: 992px) {
  .headline h1 {
    font-size: 2.4rem;
  }
  .headline h2 {
    font-size: 1.7rem;
  }
}
@media (max-width: 768px) {
  .headline h1 {
    font-size: 2rem;
  }
  .headline h2 {
    font-size: 1.5rem;
  }
  .feature-card {
    flex-direction: column;
    gap: 1rem;
  }
  .card {
    padding: 1.5rem;
  }
  .kpi-number {
    font-size: 1.6rem;
  }
}