/* ==========================================
   FIFTEEN - Global Styles
   ========================================== */

:root {
  --primary-color: #4A6B8A;
  --primary-dark: #3A5A7A;
  --primary-light: #6B8BA8;
  --primary-lighter: #8AABC8;
  --accent-color: #5C7D9A;
  --text-light: #ffffff;
  --text-dark: #3A5A7A;
  --gray-light: #f8f9fa;
  --gray-medium: #e9ecef;
  --border-radius: 12px;
  --transition: all 0.3s ease;

  /* Animation timing */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadow layers */
  --shadow-sm: 0 2px 8px rgba(74, 107, 138, 0.08);
  --shadow-md: 0 4px 20px rgba(74, 107, 138, 0.12);
  --shadow-lg: 0 8px 40px rgba(74, 107, 138, 0.16);
  --shadow-glow: 0 0 30px rgba(74, 107, 138, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
}

/* Title font - Bold sans-serif for most headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

/* Forum font - for accent words only (use .forum-accent class in HTML) */
.forum-accent {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-style: italic;
}

/* Forum font italic - for subtitles */
.forum-accent-italic {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-style: italic;
}

/* Hero accent text uses Forum */
.hero-accent {
  font-family: 'Forum', serif;
  font-style: italic;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================
   NAVIGATION - Minimal Gradient Accent
   ========================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 40px;
}

/* Nav text colors - black by default, white after 120px scroll */

/* White text state (120px scroll) - just text color change */
.navbar.nav-white-text .nav-logo {
  color: white;
}

.navbar.nav-white-text .nav-center a {
  color: rgba(255, 255, 255, 0.75);
}

.navbar.nav-white-text .nav-center a:hover {
  color: white;
}

.navbar.nav-white-text .nav-cta a:not(.btn-cta) {
  color: rgba(255, 255, 255, 0.75);
}

.navbar.nav-white-text .nav-cta a:not(.btn-cta):hover {
  color: white;
}

.navbar.nav-white-text .nav-cta::before {
  background: rgba(255, 255, 255, 0.25);
}

.navbar.nav-white-text .dropdown-toggle {
  color: rgba(255, 255, 255, 0.75);
}

.navbar.nav-white-text .dropdown-toggle:hover,
.navbar.nav-white-text .dropdown-toggle.has-selection {
  color: white;
}

/* White text state underlines */
.navbar.nav-white-text .nav-center a::after,
.navbar.nav-white-text .nav-cta a:not(.btn-cta)::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.navbar.nav-white-text .dropdown-toggle::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

/* Navbar scrolled state (800px scroll) - adds background */
.navbar.scrolled {
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.97) 0%, rgba(25, 40, 58, 0.95) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar.scrolled .navbar-inner {
  padding: 16px 40px;
}

/* Logo */
.nav-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a2a3a;
  letter-spacing: 0;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo::before {
  content: '';
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-image: url('../assets/f_group.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  top: -1px;
}

/* Sectors Dropdown */
.nav-dropdown {
  position: relative;
}

/* Invisible bridge to connect trigger to dropdown */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 30px;
  background: transparent;
}

.nav-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 0;
  background: transparent;
  color: rgba(26, 42, 58, 0.7);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.nav-dropdown .dropdown-toggle:hover {
  color: #1a2a3a;
}

.nav-dropdown .dropdown-toggle.has-selection {
  color: #1a2a3a;
}

/* Dropdown underline effect */
.nav-dropdown .dropdown-toggle::before {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 16px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 42, 58, 0.5), transparent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.nav-dropdown:hover .dropdown-toggle::before {
  transform: scaleX(1);
}

/* Dropdown arrow */
.nav-dropdown .dropdown-toggle::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.nav-dropdown:hover .dropdown-toggle::after {
  transform: rotate(-135deg);
  margin-top: 2px;
  opacity: 1;
}

/* Mega Menu Container */
.dropdown-menu {
  position: fixed;
  top: 80px;
  left: 40px;
  transform: translateY(-10px);
  width: max-content;
  max-width: 900px;
  background: linear-gradient(180deg, #0a1219 0%, #0f1a24 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient line at top */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #4A6B8A 30%, #6B8BA8 50%, #4A6B8A 70%, transparent 95%);
  z-index: 1;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mega menu inner container */
.mega-menu-inner {
  display: flex;
  flex-direction: row;
  padding: 20px;
  gap: 16px;
}

/* Mega Card Styles - Vertical Card Layout */
.mega-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
}

.mega-card:hover {
  background: linear-gradient(180deg, rgba(74, 107, 138, 0.12) 0%, rgba(74, 107, 138, 0.04) 100%);
  border-color: rgba(107, 139, 168, 0.25);
  transform: translateY(-4px);
}

/* Mega Card Image - Top */
.mega-card-image {
  width: 100%;
  height: 120px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.mega-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 18, 25, 0.8) 100%);
}

.mega-card-image-group {
  background: linear-gradient(135deg, #1a2a3a 0%, #0f1a24 100%);
  background-image: url('../assets/f_group.png');
  background-size: auto 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a2a3a;
}

.mega-card-image-finance {
  background: linear-gradient(135deg, #3d2828 0%, #2d1e1e 100%);
  background-image: url('../assets/f_financial_services.png');
  background-size: auto 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #3d2828;
}

.mega-card-image-construction {
  background: linear-gradient(135deg, #3d3520 0%, #2d2818 100%);
  background-image: url('../assets/f_construction.png');
  background-size: auto 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #3d3520;
}

/* Mega Card Content - Right Side */
.mega-card-content {
  flex: 1;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.mega-card-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin: 0;
  font-family: inherit;
}

.mega-card-content p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin: 0;
}

/* Mega Card Sub-category Links */
.mega-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.mega-card-links span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: rgba(74, 107, 138, 0.12);
  border: 1px solid rgba(74, 107, 138, 0.15);
  border-radius: 16px;
  color: rgba(107, 139, 168, 0.85);
  transition: all 0.25s ease;
}

.mega-card:hover .mega-card-links span {
  background: rgba(74, 107, 138, 0.2);
  border-color: rgba(107, 139, 168, 0.3);
  color: rgba(138, 171, 200, 1);
}

/* Mega menu position when navbar is scrolled */
.navbar.scrolled .dropdown-menu {
  top: 72px;
}

/* Navigation Links Container */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Nav Center Links */
.nav-center {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-center a {
  font-weight: 500;
  font-size: 0.85rem;
  padding: 10px 20px;
  color: rgba(26, 42, 58, 0.7);
  transition: all 0.2s ease;
  position: relative;
}

.nav-center a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 42, 58, 0.5), transparent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.nav-center a:hover {
  color: #1a2a3a;
}

.nav-center a:hover::after {
  transform: scaleX(1);
}

/* Nav CTA Buttons */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 24px;
  padding-left: 24px;
  position: relative;
}

/* Temporarily hide Login and Sign Up */
.nav-cta a[href*="login"] {
  display: none !important;
}

.nav-cta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(26, 42, 58, 0.2);
}

.nav-cta a:not(.btn-cta) {
  font-weight: 500;
  font-size: 0.85rem;
  padding: 10px 20px;
  color: rgba(26, 42, 58, 0.7);
  transition: all 0.2s ease;
  position: relative;
}

.nav-cta a:not(.btn-cta)::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 42, 58, 0.5), transparent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.nav-cta a:not(.btn-cta):hover {
  color: #1a2a3a;
}

.nav-cta a:not(.btn-cta):hover::after {
  transform: scaleX(1);
}

/* Primary CTA Button */
.nav-cta .btn-cta {
  position: relative;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #4A6B8A 0%, #6B8BA8 50%, #4A6B8A 100%);
  background-size: 200% 200%;
  color: white;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(74, 107, 138, 0.3);
}

.nav-cta .btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1), rgba(255,255,255,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.nav-cta .btn-cta::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.nav-cta .btn-cta:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 107, 138, 0.45), 0 0 20px rgba(107, 139, 168, 0.3);
}

.nav-cta .btn-cta:hover::before {
  opacity: 1;
}

.nav-cta .btn-cta:hover::after {
  width: 200px;
  height: 200px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--primary-dark);
  position: relative;
}

/* Underline grow effect for ghost buttons */
.btn-ghost::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s ease, left 0.3s ease;
}

.btn-ghost:hover {
  color: var(--primary-color);
}

.btn-ghost:hover::after {
  width: 60%;
  left: 20%;
}

.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--primary-dark);
}

.btn-outline:hover {
  background: white;
  color: black;
  transform: translateY(-2px);
}

.btn-primary {
  position: relative;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #4A6B8A 0%, #6B8BA8 50%, #4A6B8A 100%);
  background-size: 200% 200%;
  color: white;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(74, 107, 138, 0.3);
}

/* Glossy overlay */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* Glow effect */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(107, 139, 168, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.4s ease;
  pointer-events: none;
}

.btn-primary:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(74, 107, 138, 0.5),
              0 0 40px rgba(107, 139, 168, 0.35);
}

.btn-primary:hover::after {
  width: 200px;
  height: 200px;
}

.btn-secondary {
  position: relative;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 50px;
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;
}

/* Glassmorphism hover effect */
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(74, 107, 138, 0.4) 0%, rgba(107, 139, 168, 0.2) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.btn-secondary:hover {
  border-color: rgba(107, 139, 168, 0.5);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 107, 138, 0.3),
              0 0 20px rgba(107, 139, 168, 0.15);
}

.btn-secondary:hover::before {
  opacity: 1;
}

/* Secondary button on light backgrounds */
.section-light .btn-secondary {
  color: var(--text-dark);
  border: 1px solid rgba(74, 107, 138, 0.4);
}

.section-light .btn-secondary:hover {
  color: var(--text-dark);
  border-color: rgba(74, 107, 138, 0.6);
  box-shadow: 0 8px 25px rgba(74, 107, 138, 0.15),
              0 0 20px rgba(107, 139, 168, 0.1);
}

/* Mobile Menu Toggle */
/* Mobile menu open state */
body.menu-open {
  overflow: hidden;
}

/* Mobile overlay */
.nav-right::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: -1;
}

.nav-right.active::before {
  opacity: 1;
  visibility: visible;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  transition: all 0.25s ease;
}

.nav-toggle:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.nav-toggle span {
  width: 18px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,1));
  border-radius: 1px;
  transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
  background: var(--primary-color);
  color: var(--text-light);
  padding: 60px 0 30px;
}

.footer-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-logo-card .nav-logo {
  color: white;
}

.footer-logo-card p {
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.footer-cta {
  display: flex;
  align-items: flex-start;
}

.footer-contact-btn {
  padding: 12px 28px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.footer-column h4 {
  font-size: 1rem;
  margin-bottom: 20px;
  color: white;
}

.footer-column a {
  display: block;
  padding: 8px 0;
  opacity: 0.8;
  transition: opacity 0.3s ease, color 0.3s ease;
  position: relative;
}

/* Underline grow effect */
.footer-column a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--text-light);
  transition: width 0.3s ease;
}

.footer-column a:hover {
  opacity: 1;
}

.footer-column a:hover::after {
  width: 100%;
}

.footer-contact {
  text-align: right;
}

.footer-contact h4 {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #1a2d3d;
}

.footer-contact p {
  padding: 5px 0;
  opacity: 0.8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  opacity: 0.7;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.footer-social a:hover {
  background: var(--primary-light);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 6px 20px rgba(74, 107, 138, 0.35);
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1a2d3d 0%, #0f1a24 100%);
  color: var(--text-light);
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  margin: 100px 24px 0 24px;
  border-radius: 24px;
}

/* Subtle gradient accent */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at 70% 30%, rgba(74, 107, 138, 0.15) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

/* Hero background logo */
.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: 60%;
  height: 105%;
  background-image: url('../assets/f_group.png');
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

/* Hero floating icons */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(2,12,12)'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(-3,12,12)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(1,12,12)'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(-2,12,12)'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(3,12,12)'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(-1,12,12)'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(2,12,12)'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cg transform='rotate(-2,12,12)'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 32px 32px, 32px 32px, 47px 47px, 42px 42px, 37px 37px, 35px 35px, 38px 38px, 28px 28px;
  background-position:
    5% 20%,
    18% 38%,
    28% 55%,
    8% 68%,
    22% 75%,
    12% 82%,
    25% 88%,
    6% 95%;
  background-repeat: no-repeat;
}

/* Icon rotation transforms - applied via individual SVG transforms */
.hero::before {
  transform-origin: center;
}

.hero .container {
  position: relative;
  z-index: 10;
}

.hero-content {
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
  margin-top: -10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero badge wrapper */
.hero-badge-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.1s;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: rgba(15, 26, 36, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: white;
  line-height: 1;
}

.hero-badge-cube {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  flex-shrink: 0;
}

@keyframes badgePulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Hero accent text - Forum font italic */
.hero-accent {
  font-family: 'Forum', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--primary-lighter);
}

.hero h1 {
  font-size: 5.5rem;
  font-weight: 900;
  margin-bottom: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.2s;
}

.hero-subtext {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 40px;
  max-width: 650px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(25px);
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.3s;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.4s;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-buttons .btn {
  padding: 14px 32px;
  font-size: 0.9rem;
}

/* Hero Stats */
.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.5s;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stat .stat-number {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.hero-stat .stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero p {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* ==========================================
   PARTNERS SECTION
   ========================================== */

.partners-section {
  padding: 40px 0;
}

.partners-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.partner-logo img {
  height: 40px;
  width: auto;
  opacity: 0.7;
  filter: invert(1);
  transition: opacity 0.3s ease;
}

.partner-logo:hover img {
  opacity: 1;
}

/* ==========================================
   SECTIONS - General
   ========================================== */

section {
  padding: 100px 0;
}

.section-dark {
  background: var(--primary-color);
  color: var(--text-light);
}

.section-light {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  color: var(--text-dark);
  position: relative;
}

/* Subtle top border accent */
.section-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(74, 107, 138, 0.12) 50%,
    transparent 100%);
}

.section-gray {
  background: var(--gray-light);
  color: var(--text-dark);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header.section-header-left {
  text-align: left;
}

.section-header.section-header-left p {
  margin: 0;
}

.section-header h2 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 20px;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}

.section-header p {
  font-size: 1.1rem;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-dark);
}

/* ==========================================
   SECTORS SECTION
   ========================================== */

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.sector-card {
  position: relative;
  border-radius: 16px;
  padding: 48px 40px;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  overflow: hidden;
}

.sector-card-bg {
  position: absolute;
  inset: 0;
  background-size: 200px auto;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.15;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.sector-card:hover .sector-card-bg {
  opacity: 0.25;
  transform: scale(1.05);
}

.sector-card-content {
  position: relative;
  z-index: 2;
}

.sector-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.sector-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.85);
}

.sector-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
}

.sector-card-btn::after {
  content: '→';
  transition: transform 0.3s ease;
}

.sector-card:hover .sector-card-btn {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

.sector-card:hover .sector-card-btn::after {
  transform: translateX(4px);
}

.sector-card:hover {
  transform: translateY(-6px);
}

/* Financial Services Card */
.sector-card-financial {
  background: linear-gradient(135deg, #8B4D5C 0%, #6B3344 50%, #4A2230 100%);
  box-shadow: 0 8px 32px rgba(139, 77, 92, 0.3);
}

.sector-card-financial .sector-card-bg {
  background-image: url('../assets/f_financial_services.png');
}

.sector-card-financial:hover {
  box-shadow: 0 16px 48px rgba(139, 77, 92, 0.4);
}

/* Construction Card */
.sector-card-construction {
  background: linear-gradient(135deg, #8B7D4D 0%, #6B5D33 50%, #4A3D1A 100%);
  box-shadow: 0 8px 32px rgba(139, 125, 77, 0.3);
}

.sector-card-construction .sector-card-bg {
  background-image: url('../assets/f_construction.png');
}

.sector-card-construction:hover {
  box-shadow: 0 16px 48px rgba(139, 125, 77, 0.4);
}

/* ==========================================
   IMAGE/TEXT COMBO SECTION
   ========================================== */

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split-section.reverse {
  direction: rtl;
}

.split-section.reverse > * {
  direction: ltr;
}

.split-image {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-light) 100%);
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-content h2 {
  font-size: 2.75rem;
  font-weight: 900;
  margin-bottom: 25px;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}

.split-content p {
  opacity: 0.8;
  margin-bottom: 25px;
  line-height: 1.8;
  color: var(--text-dark);
}

/* ==========================================
   PLATFORM INTRO
   ========================================== */

.platform-intro {
  text-align: center;
}

.platform-intro h2 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 25px;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}

.platform-intro p {
  max-width: 700px;
  margin: 0 auto 40px;
  opacity: 0.8;
  line-height: 1.8;
  color: var(--text-dark);
}

/* ==========================================
   ACCORDION
   ========================================== */

.accordion-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.accordion-item {
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--gray-medium);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s ease;
}

.accordion-item:hover {
  transform: translateX(4px);
}

.accordion-item.active {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateX(0);
}

.accordion-header {
  padding: 25px 30px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--primary-dark);
  transition: color 0.3s ease;
}

.accordion-item:hover .accordion-header {
  color: var(--primary-color);
}

.accordion-header::after {
  content: '+';
  font-size: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease;
  color: var(--primary-color);
}

.accordion-item:hover .accordion-header::after {
  transform: scale(1.15);
}

.accordion-item.active .accordion-header::after {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  padding: 0 30px;
  opacity: 0;
  line-height: 1.8;
  color: var(--text-dark);
  overflow: hidden;
  transition: max-height 0.4s ease,
              padding 0.4s ease,
              opacity 0.3s ease;
}

.accordion-item.active .accordion-content {
  max-height: 200px;
  padding: 0 30px 25px;
  opacity: 0.8;
}

.accordion-image {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-light) 100%);
  align-self: center;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.4s ease;
}

.accordion-image:hover {
  box-shadow: var(--shadow-lg);
}

.accordion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.accordion-image img.active {
  opacity: 1;
}

.accordion-img-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.5s ease,
              transform 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
  font-weight: 600;
}

.accordion-img-placeholder.active {
  opacity: 1;
  transform: scale(1);
}

.accordion-img-placeholder[data-image="1"] {
  background: linear-gradient(135deg, #4A6B8A 0%, #6B8BA8 100%);
}

.accordion-img-placeholder[data-image="2"] {
  background: linear-gradient(135deg, #5C7D9A 0%, #7B9DB8 100%);
}

.accordion-img-placeholder[data-image="3"] {
  background: linear-gradient(135deg, #3A5A7A 0%, #5A7A9A 100%);
}

.accordion-img-placeholder[data-image="4"] {
  background: linear-gradient(135deg, #6B8BA8 0%, #8AABC8 100%);
}

.accordion-image {
  position: relative;
}

/* ==========================================
   VETTING PROCESS
   ========================================== */

.vetting-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

/* Connecting line between steps */
.vetting-steps::before {
  content: '';
  position: absolute;
  top: 60px;
  left: calc(12.5% + 30px);
  right: calc(12.5% + 30px);
  height: 2px;
  background: linear-gradient(90deg,
    var(--primary-lighter) 0%,
    var(--primary-color) 50%,
    var(--primary-lighter) 100%);
  opacity: 0.25;
  z-index: 0;
}

.vetting-step {
  text-align: center;
  padding: 30px;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vetting-step:hover {
  transform: translateY(-8px);
}

.vetting-step .step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 20px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

/* Pulse ring effect */
.vetting-step .step-number::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  opacity: 0;
  transition: all 0.3s ease;
}

.vetting-step:hover .step-number {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(74, 107, 138, 0.35);
}

.vetting-step:hover .step-number::after {
  opacity: 0.3;
  inset: -10px;
}

.vetting-step h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--primary-dark);
  transition: color 0.3s ease;
}

.vetting-step:hover h3 {
  color: var(--primary-color);
}

.vetting-step p {
  opacity: 0.8;
  font-size: 0.95rem;
  color: var(--text-dark);
}

/* ==========================================
   NEWS SECTION
   ========================================== */

.news-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

.news-row:last-child {
  margin-bottom: 0;
}

.news-row.reverse {
  direction: rtl;
}

.news-row.reverse > * {
  direction: ltr;
}

.news-card {
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--gray-medium);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-lighter);
}

.news-card-image {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-light) 100%);
  overflow: hidden;
  position: relative;
}

/* Image zoom effect placeholder */
.news-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.6s ease;
}

.news-card:hover .news-card-image::before {
  transform: scale(1.08);
}

.news-card-content {
  padding: 30px;
}

.news-card-content .tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--primary-color);
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-bottom: 15px;
  transition: box-shadow 0.3s ease;
}

/* Tag pulse on card hover */
.news-card:hover .tag {
  box-shadow: 0 0 0 4px rgba(74, 107, 138, 0.15);
}

.news-card-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--primary-dark);
  transition: color 0.3s ease;
}

.news-card:hover .news-card-content h3 {
  color: var(--primary-color);
}

.news-card-content p {
  opacity: 0.8;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.news-text h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--primary-dark);
}

.news-text p {
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.news-closer {
  text-align: center;
  padding-top: 40px;
}

.news-closer h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--primary-dark);
}

/* ==========================================
   ABOUT PAGE COMPONENTS
   ========================================== */

/* Hero Short Variant */
.hero-short {
  min-height: calc(50vh + 200px);
  padding: 0;
  justify-content: center;
}

.hero-short .hero-content {
  margin-top: 0;
}

/* Hero Buttons Section */
.hero-buttons-section {
  background: transparent;
  padding: 48px 0;
}

.hero-buttons-centered {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Four Pillars Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pillar-card {
  border-radius: 20px;
  padding: 32px 24px;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

.pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.pillar-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: white;
  backdrop-filter: blur(8px);
}

.pillar-card h3 {
  font-size: 1.25rem;
  color: white;
  margin-bottom: 12px;
  font-weight: 600;
}

.pillar-card p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-size: 0.95rem;
}

.pillar-features {
  color: rgba(255, 255, 255, 0.85);
}

.pillar-features li {
  color: rgba(255, 255, 255, 0.85);
}

.pillar-features li::before {
  color: white;
}

/* Problem vs Solution Grid */
.problem-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.ps-column {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(74, 107, 138, 0.12);
}

.ps-header {
  padding: 32px 32px 24px;
  text-align: center;
}

.ps-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.ps-header h2 {
  font-size: 1.5rem;
  margin: 0;
}

/* Problem Column */
.ps-problem {
  background: #f8f9fa;
  border: 1px solid rgba(150, 150, 150, 0.15);
}

.ps-problem .ps-header {
  background: linear-gradient(135deg, #6b7280 0%, #9b5555 100%);
}

.ps-problem .ps-label {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.ps-problem .ps-header h2 {
  color: white;
}

.ps-problem .ps-icon {
  background: rgba(155, 85, 85, 0.12);
  color: #9b5555;
}

/* Solution Column */
.ps-solution {
  background: white;
  border: 1px solid rgba(74, 107, 138, 0.1);
}

.ps-solution .ps-header {
  background: linear-gradient(135deg, #5a8a6e 0%, #6b7c8d 100%);
}

.ps-solution .ps-label {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.ps-solution .ps-header h2 {
  color: white;
}

.ps-solution .ps-icon {
  background: rgba(90, 138, 110, 0.12);
  color: #5a8a6e;
}

.ps-items {
  padding: 8px 24px 24px;
}

.ps-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(74, 107, 138, 0.08);
}

.ps-item:last-child {
  border-bottom: none;
}

.ps-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ps-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ps-text strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.ps-text span {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .problem-solution-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Comparison Cards */
.comparison-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

.comparison-column {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(74, 107, 138, 0.12);
}

.comparison-column-header {
  padding: 24px 28px;
  text-align: center;
}

.comparison-label {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.comparison-traditional .comparison-column-header {
  background: linear-gradient(135deg, #8b9dad 0%, #6b7c8d 100%);
}

.comparison-traditional .comparison-label {
  color: white;
}

.comparison-traditional .comparison-items {
  background: #f8f9fa;
}

.comparison-fifteen .comparison-column-header {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
}

.comparison-fifteen .comparison-label {
  color: white;
}

.comparison-fifteen .comparison-items {
  background: white;
}

.comparison-items {
  padding: 8px 0;
}

.comparison-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(74, 107, 138, 0.08);
}

.comparison-item:last-child {
  border-bottom: none;
}

.comparison-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comparison-icon.negative {
  background: rgba(200, 80, 80, 0.12);
  color: #c85050;
}

.comparison-icon.positive {
  background: rgba(76, 175, 80, 0.12);
  color: #4caf50;
}

.comparison-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comparison-text strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.comparison-text span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.comparison-fifteen .comparison-text span {
  color: var(--primary-lighter);
  font-weight: 500;
}

@media (max-width: 768px) {
  .comparison-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .comparison-item {
    padding: 14px 20px;
  }

  .comparison-icon {
    width: 32px;
    height: 32px;
  }
}

/* Values Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.value-card {
  background: white;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid rgba(74, 107, 138, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(74, 107, 138, 0.1);
}

.value-card h3 {
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.value-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.team-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(74, 107, 138, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(74, 107, 138, 0.15);
}

.team-image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
}

.team-info {
  padding: 24px;
}

.team-info h3 {
  font-size: 1.2rem;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.team-info p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.team-linkedin {
  color: var(--primary-lighter);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.team-linkedin:hover {
  color: var(--primary-color);
}

/* Contact Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.contact-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(74, 107, 138, 0.1);
  border: 1px solid rgba(74, 107, 138, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(74, 107, 138, 0.15);
}

.contact-card-header {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
  padding: 24px;
  text-align: center;
}

.contact-card-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
}

.contact-card-header h3 {
  font-size: 1.15rem;
  color: white;
  margin: 0;
  font-weight: 600;
}

.contact-card-body {
  padding: 24px;
  text-align: center;
}

.contact-card-body p {
  color: var(--text-muted);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.contact-card-body p:last-child {
  margin-bottom: 0;
}

.contact-card-body p strong {
  color: var(--primary-dark);
}

.contact-card-body a {
  color: var(--primary-lighter);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.contact-card-body a:hover {
  color: var(--primary-color);
}

/* Legacy contact card support (no header) */
.contact-card > h3:first-child {
  font-size: 1.2rem;
  color: var(--primary-dark);
  margin-bottom: 16px;
  padding: 24px 24px 0;
  text-align: center;
}

.contact-card > p {
  padding: 0 24px;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.contact-card > p:last-child {
  padding-bottom: 24px;
}

/* 3-column contact grid */
.contact-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
}

@media (max-width: 900px) {
  .contact-grid-3 {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

/* Responsive About Page */
@media (max-width: 1024px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-short {
    min-height: 40vh;
    padding: 120px 0 60px;
  }

  .pillars-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   SECTOR PAGE COMPONENTS
   ========================================== */

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.metric-card {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(74, 107, 138, 0.08);
  border: 1px solid rgba(74, 107, 138, 0.08);
}

.metric-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-lighter);
  line-height: 1;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Four Pillars with Features */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pillar-features {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  text-align: left;
}

.pillar-features li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pillar-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--primary-lighter);
  border-radius: 50%;
}

/* Modules Grid */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.module-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(74, 107, 138, 0.08);
  border: 1px solid rgba(74, 107, 138, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.module-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(74, 107, 138, 0.15);
}

.module-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-lighter);
  opacity: 0.6;
  margin-bottom: 16px;
}

.module-card h3 {
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.module-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 20px rgba(74, 107, 138, 0.08);
  border: 1px solid rgba(74, 107, 138, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(74, 107, 138, 0.15);
}

.service-card h3 {
  font-size: 1.15rem;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.service-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.service-highlight {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-lighter);
  padding-top: 12px;
  border-top: 1px solid rgba(74, 107, 138, 0.1);
}

/* Responsive Sector Pages */
@media (max-width: 1200px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .metric-card {
    padding: 24px 20px;
  }

  .metric-value {
    font-size: 2.5rem;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Trades Grid (Construction) */
.trades-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.trade-item {
  background: white;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  font-weight: 500;
  color: var(--primary-dark);
  box-shadow: 0 4px 20px rgba(74, 107, 138, 0.08);
  border: 1px solid rgba(74, 107, 138, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.trade-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(74, 107, 138, 0.12);
  background: var(--primary-lighter);
  color: white;
}

@media (max-width: 1024px) {
  .trades-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .trades-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .trades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   CTA SECTION
   ========================================== */

.cta-section {
  text-align: center;
  background: linear-gradient(135deg, #1a2d3d 0%, #0f1a24 100%);
  color: white;
  position: relative;
  overflow: hidden;
  margin: 0 24px 24px 24px;
  border-radius: 24px;
  padding: 80px 40px;
}

@keyframes ctaGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Decorative background orbs */
.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.cta-section::before {
  width: 350px;
  height: 350px;
  top: -120px;
  right: -80px;
}

.cta-section::after {
  width: 250px;
  height: 250px;
  bottom: -100px;
  left: 8%;
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 25px;
  letter-spacing: -0.01em;
}

.cta-section p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Sector-specific CTA gradients */
body.financial-services .cta-section {
  background: linear-gradient(135deg, #3d2828 0%, #2d1818 100%);
}

body.construction .cta-section {
  background: linear-gradient(135deg, #3d3520 0%, #2d2818 100%);
}

/* Team Section Card */
.team-section-card {
  background: linear-gradient(135deg, #1a2d3d 0%, #0f1a24 100%);
  color: var(--text-light);
  padding: 80px 40px;
  margin: 0 24px;
  border-radius: 24px;
}

.team-section-card .section-header h2,
.team-section-card .section-header p {
  color: var(--text-light);
}

.team-section-card .team-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-section-card .team-info h3 {
  color: var(--text-light);
}

.team-section-card .team-info p {
  color: rgba(255, 255, 255, 0.7);
}

.cta-section .btn {
  background: white;
  color: var(--primary-color);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.cta-section .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25),
              0 0 20px rgba(255, 255, 255, 0.15);
}

/* CTA without background */
.cta-section.cta-no-bg {
  background: transparent;
  animation: none;
  color: var(--text-dark);
}

.cta-section.cta-no-bg::before,
.cta-section.cta-no-bg::after {
  display: none;
}

.cta-section.cta-no-bg .btn {
  background: var(--primary-color);
  color: white;
}

.cta-section.cta-no-bg .btn:hover {
  background: var(--primary-dark);
}

/* ==========================================
   WHAT IS FIFTEEN CARD
   ========================================== */

.what-is-fifteen-section {
  padding: 0;
}

.what-is-fifteen-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #1a2d3d 0%, #0f1a24 100%);
  color: var(--text-light);
  padding: 80px 40px;
  margin: 0 24px;
  border-radius: 24px;
  overflow: hidden;
}

.what-is-fifteen-card h2 {
  color: white;
}

.what-is-fifteen-card p {
  color: rgba(255, 255, 255, 0.85);
}

.what-is-fifteen-card .split-section {
  display: contents;
}

.what-is-fifteen-card .split-image {
  background: rgba(255, 255, 255, 0.1);
  height: 380px;
  margin-left: -120px;
  border-radius: 0 16px 16px 0;
  order: 1;
}

.what-is-fifteen-card .split-content {
  padding-right: 40px;
  max-width: 480px;
  margin-left: auto;
  order: 2;
}

.what-is-fifteen-card .split-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.what-is-fifteen-card .split-content p {
  margin-bottom: 20px;
  line-height: 1.8;
}

/* Sector-specific card backgrounds */
body.sector-financial .what-is-fifteen-card {
  background: linear-gradient(135deg, #3d2828 0%, #2d1818 100%);
}

body.sector-construction .what-is-fifteen-card {
  background: linear-gradient(135deg, #3d3520 0%, #2d2818 100%);
}

/* ==========================================
   ELITE PROFESSIONALS CARD
   ========================================== */

.elite-card {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}

/* ==========================================
   PLATFORM PREVIEW SECTION
   ========================================== */

.platform-preview-section {
  padding: 0;
  overflow: hidden;
}

.platform-preview-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #1a2d3d 0%, #0f1a24 100%);
  color: var(--text-light);
  padding: 80px 40px;
  margin: 0 24px;
  border-radius: 24px;
  overflow: hidden;
}

.platform-preview-text {
  padding-left: 40px;
  max-width: 480px;
}

.platform-preview-text h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: white;
}

.platform-preview-text p {
  margin-bottom: 20px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

.platform-preview-text .btn {
  margin-top: 10px;
}

.platform-preview-mockup {
  position: relative;
}

/* Sector-specific CTA and footer backgrounds */
body.sector-financial .cta-section {
  background: linear-gradient(135deg, #3d2828 0%, #2d1818 100%);
}

body.sector-construction .cta-section {
  background: linear-gradient(135deg, #3d3520 0%, #2d2818 100%);
}

body.sector-financial .footer {
  background: linear-gradient(135deg, #3d2828 0%, #2d1818 100%);
}

body.sector-construction .footer {
  background: linear-gradient(135deg, #3d3520 0%, #2d2818 100%);
}

body.sector-financial .footer-column h4,
body.sector-financial .footer-contact h4 {
  color: #c9a27a;
}

body.sector-construction .footer-column h4,
body.sector-construction .footer-contact h4 {
  color: #d4a853;
}

body.sector-financial .footer-social a {
  background: rgba(201, 162, 122, 0.2);
}

body.sector-financial .footer-social a:hover {
  background: #c9a27a;
  box-shadow: 0 6px 20px rgba(201, 162, 122, 0.35);
}

body.sector-construction .footer-social a {
  background: rgba(212, 168, 83, 0.2);
}

body.sector-construction .footer-social a:hover {
  background: #d4a853;
  box-shadow: 0 6px 20px rgba(212, 168, 83, 0.35);
}

/* Sector-specific platform preview backgrounds */
body.sector-financial .platform-preview-layout {
  background: linear-gradient(135deg, #3d2828 0%, #2d1818 100%);
}

body.sector-construction .platform-preview-layout {
  background: linear-gradient(135deg, #3d3520 0%, #2d2818 100%);
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 992px) {
  .navbar-inner {
    padding: 20px 24px;
  }

  .navbar.scrolled .navbar-inner {
    padding: 16px 24px;
  }

  .nav-left {
    gap: 16px;
  }

  .nav-logo {
    font-size: 1.4rem;
    letter-spacing: 0;
  }

  .nav-right {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: linear-gradient(180deg, #1a2d3d 0%, #0f1a24 100%);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 30px 40px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .nav-right.active {
    transform: translateX(0);
  }

  .nav-center {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-bottom: 30px;
  }

  .nav-center a {
    padding: 16px 0;
    font-size: 1.1rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-center a::after {
    bottom: 14px;
  }

  .nav-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  .nav-cta::before {
    display: none;
  }

  .nav-cta a {
    padding: 16px 0;
    font-size: 1rem;
    width: 100%;
  }

  .nav-cta .btn-cta {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 1001;
  }

  /* Mega menu - tablet adjustments */
  .dropdown-menu {
    width: calc(100% - 48px);
    max-width: calc(100vw - 48px);
    left: 24px;
    top: 72px;
  }

  .navbar.scrolled .dropdown-menu {
    top: 80px;
  }

  .mega-menu-inner {
    padding: 16px;
    gap: 12px;
  }

  .mega-card-image {
    height: 90px;
  }

  .mega-card-content {
    padding: 12px 14px;
  }

  .mega-card-content h3 {
    font-size: 0.9rem;
  }

  .mega-card-content p {
    font-size: 0.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mega-card-links span {
    font-size: 0.55rem;
    padding: 3px 6px;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-cta {
    justify-content: center;
  }

  .hero {
    padding: 120px 0 80px;
    margin: 90px 16px 0 16px;
    border-radius: 20px;
  }

  .hero h1 {
    font-size: 3.5rem;
  }

  .hero-subtext {
    font-size: 1.1rem;
  }

  .hero-stats {
    gap: 32px;
    margin-top: 48px;
    padding-top: 32px;
  }

  .hero-stat .stat-number {
    font-size: 1.75rem;
  }

  .section-header h2,
  .platform-intro h2,
  .cta-section h2 {
    font-size: 2.5rem;
  }

  .split-content h2 {
    font-size: 2rem;
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .split-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split-section.reverse {
    direction: ltr;
  }

  .vetting-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-row {
    grid-template-columns: 1fr;
  }

  .accordion-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .accordion-image {
    order: -1;
    position: relative;
    top: 0;
  }

  .platform-preview-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    overflow: hidden;
  }

  .platform-preview-text {
    padding-left: 0;
    text-align: center;
  }

  .platform-preview-mockup {
    margin-right: 0;
    display: none;
  }

  .news-row.reverse {
    direction: ltr;
  }
}

@media (max-width: 768px) {
  .navbar-inner {
    padding: 16px 20px;
  }

  .navbar.scrolled .navbar-inner {
    padding: 12px 20px;
  }

  .nav-left {
    gap: 12px;
  }

  .nav-logo {
    font-size: 1.2rem;
    letter-spacing: 0;
  }

  .nav-dropdown .dropdown-toggle {
    padding: 8px 12px;
    font-size: 0.75rem;
    gap: 6px;
  }

  /* Full-width mega menu - mobile */
  .dropdown-menu {
    width: calc(100% - 32px);
    max-width: calc(100vw - 32px);
    left: 16px;
    top: 64px;
  }

  .navbar.scrolled .dropdown-menu {
    top: 72px;
  }

  .mega-menu-inner {
    flex-direction: column;
    padding: 12px;
    gap: 8px;
  }

  .mega-card {
    flex-direction: row;
  }

  .mega-card-image {
    width: 80px;
    height: auto;
    min-height: 80px;
  }

  .mega-card-image::after {
    background: linear-gradient(90deg, transparent 50%, rgba(10, 18, 25, 0.8) 100%);
  }

  .mega-card-content {
    padding: 10px 12px;
    gap: 4px;
  }

  .mega-card-content h3 {
    font-size: 0.85rem;
  }

  .mega-card-content p {
    display: none;
  }

  .mega-card-links {
    margin-top: 2px;
    gap: 4px;
  }

  .mega-card-links span {
    font-size: 0.5rem;
    padding: 2px 5px;
  }

  .nav-toggle {
    width: 36px;
    height: 36px;
  }

  .nav-toggle span {
    width: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .hero {
    padding: 100px 0 60px;
    min-height: auto;
    margin: 80px 12px 0 12px;
    border-radius: 16px;
  }

  .hero-content {
    text-align: center;
    align-items: center;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero-subtext {
    font-size: 1rem;
    max-width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    padding: 14px 28px;
    font-size: 0.9rem;
    width: 100%;
  }

  .hero-stats {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  .hero-stat .stat-number {
    font-size: 1.5rem;
  }

  section {
    padding: 60px 0;
  }

  .section-header h2,
  .platform-intro h2,
  .cta-section h2 {
    font-size: 2rem;
  }

  .split-content h2 {
    font-size: 1.75rem;
  }

  .vetting-steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   SCROLL REVEAL ANIMATIONS
   ========================================== */

/* Base state for reveal elements */
.reveal-element {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Revealed state */
.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveals for sector cards */
.sectors-grid .sector-card.reveal-element:nth-child(1) { transition-delay: 0s; }
.sectors-grid .sector-card.reveal-element:nth-child(2) { transition-delay: 0.15s; }

/* Staggered reveals for vetting steps */
.vetting-steps .vetting-step.reveal-element:nth-child(1) { transition-delay: 0s; }
.vetting-steps .vetting-step.reveal-element:nth-child(2) { transition-delay: 0.1s; }
.vetting-steps .vetting-step.reveal-element:nth-child(3) { transition-delay: 0.2s; }
.vetting-steps .vetting-step.reveal-element:nth-child(4) { transition-delay: 0.3s; }

/* Staggered reveals for news rows */
.news-row .news-card.reveal-element { transition-delay: 0s; }
.news-row .news-text.reveal-element { transition-delay: 0.15s; }
.news-row.reverse .news-card.reveal-element { transition-delay: 0.15s; }
.news-row.reverse .news-text.reveal-element { transition-delay: 0s; }

/* Split section slide-in animations */
.split-section.reveal-element {
  opacity: 1;
  transform: none;
}

.split-section .split-image {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-section .split-content {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
}

.split-section.reverse .split-image {
  transform: translateX(50px);
}

.split-section.reverse .split-content {
  transform: translateX(-50px);
}

.split-section.revealed .split-image,
.split-section.revealed .split-content {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================
   REDUCED MOTION SUPPORT
   ========================================== */

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

  .reveal-element {
    opacity: 1;
    transform: none;
  }

  .hero h1,
  .hero-subtext,
  .hero-buttons,
  .hero-badge,
  .hero-stats {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .split-section .split-image,
  .split-section .split-content {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================
   PLATFORM PREVIEW COMPONENT
   ========================================== */

.pp-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(74, 107, 138, 0.1);
  border-radius: 24px;
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.pp-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1f2e;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

/* Top Bar */
.pp-topbar {
  height: 56px;
  background: #1a1f2e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}

.pp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-logo {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}

.pp-badge {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}

.pp-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pp-nav-item {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.2s ease;
}

.pp-nav-item.active {
  color: white;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-lighter);
  padding-bottom: 2px;
}

.pp-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-username {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Avatars */
.pp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  flex-shrink: 0;
}

.pp-avatar-sm {
  width: 22px;
  height: 22px;
  font-size: 0.5rem;
}

.pp-avatar-primary { background: rgba(74, 107, 138, 0.3); border: 1px solid rgba(74, 107, 138, 0.5); color: #7ba3c0; }
.pp-avatar-blue { background: rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.5); color: #60a5fa; }
.pp-avatar-purple { background: rgba(147, 51, 234, 0.2); border: 1px solid rgba(147, 51, 234, 0.5); color: #a78bfa; }
.pp-avatar-green { background: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.5); color: #34d399; }
.pp-avatar-amber { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.5); color: #fbbf24; }
.pp-avatar-rose { background: rgba(244, 63, 94, 0.2); border: 1px solid rgba(244, 63, 94, 0.5); color: #fb7185; }
.pp-avatar-cyan { background: rgba(6, 182, 212, 0.2); border: 1px solid rgba(6, 182, 212, 0.5); color: #22d3ee; }
.pp-avatar-pink { background: rgba(236, 72, 153, 0.2); border: 1px solid rgba(236, 72, 153, 0.5); color: #f472b6; }
.pp-avatar-indigo { background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.5); color: #818cf8; }

/* Main Content Area */
.pp-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Left Sidebar */
.pp-sidebar-left {
  width: 180px;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.pp-sidebar-section {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pp-sidebar-title {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pp-sidebar-item {
  padding: 2px 8px 2px 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pp-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pp-sidebar-item.active {
  background: rgba(74, 107, 138, 0.15);
  border: 1px solid rgba(74, 107, 138, 0.2);
}

/* Chat Area */
.pp-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pp-chat-header {
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.pp-messages {
  flex: 1;
  overflow: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-message {
  display: flex;
  gap: 10px;
}

.pp-message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Skeletons */
.pp-skeleton {
  display: inline-block;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.pp-skeleton-light {
  background: rgba(255, 255, 255, 0.08);
}

/* Image Preview */
.pp-image-preview {
  width: 120px;
  height: 70px;
  background: linear-gradient(135deg, rgba(74, 107, 138, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
  border: 1px solid rgba(74, 107, 138, 0.2);
  border-radius: 8px;
  margin-top: 4px;
}

/* Reactions */
.pp-reactions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.pp-reaction {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Chat Input */
.pp-chat-input {
  height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pp-input-field {
  flex: 1;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.pp-send-btn {
  width: 28px;
  height: 28px;
  background: rgba(74, 107, 138, 0.2);
  border: 1px solid rgba(74, 107, 138, 0.3);
  border-radius: 6px;
}

/* Right Sidebar */
.pp-sidebar-right {
  width: 140px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.pp-members-header {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.pp-members-section {
  padding: 8px;
}

.pp-members-title {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  padding: 4px 8px;
  margin-bottom: 4px;
}

.pp-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.pp-member:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pp-online-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  position: absolute;
  left: 22px;
  top: 16px;
  border: 1px solid #1a1f2e;
}

/* Responsive */
@media (max-width: 900px) {
  .pp-sidebar-left,
  .pp-sidebar-right {
    display: none;
  }

  .pp-nav {
    display: none;
  }

  .pp-username {
    display: none;
  }
}

@media (max-width: 600px) {
  .pp-container {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================
   SECTOR-SPECIFIC ACCENT COLORS
   ========================================== */

/* Financial Services - Pastel Red */
body.sector-financial {
  --sector-accent: #E07070;
  --sector-accent-light: #F09090;
  --sector-accent-dark: #C85858;
}

body.sector-financial .hero-accent {
  color: var(--sector-accent);
}

body.sector-financial .hero-badge {
  background: rgba(61, 40, 40, 0.85);
  border: 1px solid rgba(224, 112, 112, 0.5);
  color: white;
}

body.sector-financial .nav-logo::before {
  background-image: url('../assets/f_financial_services.png');
}

body.sector-financial .hero::after {
  background-image: url('../assets/f_financial_services.png');
}

/* Financial Services floating icons - finance themed */
body.sector-financial .hero::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(-2,12,12)'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(3,12,12)'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(-1,12,12)'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(2,12,12)'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(-3,12,12)'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(1,12,12)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(-2,12,12)'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e07070' stroke-width='1.5'%3E%3Cg transform='rotate(2,12,12)'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 36px 36px, 34px 34px, 39px 39px, 37px 37px, 34px 34px, 33px 33px, 38px 38px, 45px 45px;
  background-position:
    10% 22%,
    25% 42%,
    6% 58%,
    20% 70%,
    15% 78%,
    28% 82%,
    8% 88%,
    22% 95%;
}

body.sector-financial .btn-primary {
  background: var(--sector-accent);
  color: white;
}

body.sector-financial .btn-primary:hover {
  background: var(--sector-accent-dark);
  box-shadow: 0 8px 25px rgba(224, 112, 112, 0.45),
              0 0 30px rgba(224, 112, 112, 0.2);
}

body.sector-financial .btn-secondary {
  border-color: var(--sector-accent);
  color: var(--sector-accent);
}

body.sector-financial .hero .btn-secondary,
body.sector-financial .cta-section .btn-secondary {
  color: white;
}

body.sector-financial .btn-secondary::before {
  background: linear-gradient(135deg, rgba(224, 112, 112, 0.4) 0%, rgba(224, 112, 112, 0.2) 100%);
}

body.sector-financial .btn-secondary:hover {
  border-color: var(--sector-accent-light);
  color: var(--sector-accent-light);
  box-shadow: 0 8px 25px rgba(224, 112, 112, 0.3),
              0 0 20px rgba(224, 112, 112, 0.15);
}

body.sector-financial .hero .btn-secondary:hover,
body.sector-financial .cta-section .btn-secondary:hover {
  color: white;
}

body.sector-financial .nav-cta .btn-cta {
  background: linear-gradient(135deg, var(--sector-accent) 0%, var(--sector-accent-dark) 100%);
  color: white;
}

body.sector-financial .nav-cta .btn-cta:hover {
  box-shadow: 0 8px 25px rgba(224, 112, 112, 0.45), 0 0 20px rgba(224, 112, 112, 0.3);
}

body.sector-financial .nav-cta .btn-cta::before {
  background: linear-gradient(135deg, var(--sector-accent-light), var(--sector-accent), var(--sector-accent-dark));
}

body.sector-financial .navbar.scrolled {
  background: linear-gradient(180deg, rgba(61, 40, 40, 0.97) 0%, rgba(51, 33, 33, 0.95) 100%);
}

/* Financial Services - Extended styling */
body.sector-financial .hero {
  background: #3d2828;
}

body.sector-financial .section-header h2,
body.sector-financial .split-content h2 {
  color: var(--sector-accent);
}

body.sector-financial .pillar-icon,
body.sector-financial .service-icon,
body.sector-financial .feature-icon {
  background: var(--sector-accent-dark);
  color: white;
}

/* Financial 4 Pillars - Gradient card backgrounds (desaturated) */
body.sector-financial .pillar-card:nth-child(1) {
  background: linear-gradient(135deg, #6b3333 0%, #9e5555 100%);
}
body.sector-financial .pillar-card:nth-child(2) {
  background: linear-gradient(135deg, #3a3d5e 0%, #55597a 100%);
}
body.sector-financial .pillar-card:nth-child(3) {
  background: linear-gradient(135deg, #3a5f62 0%, #4d7b7f 100%);
}
body.sector-financial .pillar-card:nth-child(4) {
  background: linear-gradient(135deg, #5a5a5a 0%, #7a7a7a 100%);
}

/* Financial pillar icon backgrounds (darker) */
body.sector-financial .pillar-card:nth-child(1) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}
body.sector-financial .pillar-card:nth-child(2) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}
body.sector-financial .pillar-card:nth-child(3) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}
body.sector-financial .pillar-card:nth-child(4) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}

body.sector-financial .metric-value {
  color: var(--sector-accent);
}

body.sector-financial .accordion-item.active .accordion-header {
  color: var(--sector-accent);
}

body.sector-financial .accordion-item.active .accordion-icon {
  background: var(--sector-accent);
  color: var(--primary-dark);
}

/* Construction - Pastel Yellow */
body.sector-construction {
  --sector-accent: #F5E6A3;
  --sector-accent-light: #FAF0C8;
  --sector-accent-dark: #E6D48A;
}

body.sector-construction .hero-accent {
  color: var(--sector-accent);
}

body.sector-construction .hero-badge {
  background: rgba(61, 53, 32, 0.85);
  border: 1px solid rgba(245, 230, 163, 0.5);
  color: white;
}

body.sector-construction .nav-logo::before {
  background-image: url('../assets/f_construction.png');
}

body.sector-construction .hero::after {
  background-image: url('../assets/f_construction.png');
}

/* Construction floating icons - construction themed */
body.sector-construction .hero::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(3,12,12)'%3E%3Cpath d='M2 20h20M5 20V10l7-5 7 5v10M9 20v-6h6v6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(-2,12,12)'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(1,12,12)'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(-3,12,12)'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(2,12,12)'%3E%3Crect x='2' y='6' width='20' height='8' rx='1'/%3E%3Cpath d='M17 14v7M7 14v7M17 3v3M7 3v3'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(-1,12,12)'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(3,12,12)'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8d9a0' stroke-width='1.5'%3E%3Cg transform='rotate(-2,12,12)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 35px 35px, 38px 38px, 34px 34px, 38px 38px, 36px 36px, 37px 37px, 34px 34px, 39px 39px;
  background-position:
    8% 18%,
    22% 40%,
    12% 55%,
    26% 68%,
    5% 75%,
    18% 82%,
    28% 90%,
    10% 95%;
}

body.sector-construction .btn-primary {
  background: var(--sector-accent);
  color: white;
}

body.sector-construction .btn-primary:hover {
  background: var(--sector-accent-dark);
  box-shadow: 0 8px 25px rgba(245, 230, 163, 0.45),
              0 0 30px rgba(245, 230, 163, 0.2);
}

body.sector-construction .btn-secondary {
  border-color: var(--sector-accent);
  color: var(--sector-accent);
}

body.sector-construction .hero .btn-secondary,
body.sector-construction .cta-section .btn-secondary {
  color: white;
}

body.sector-construction .btn-secondary::before {
  background: linear-gradient(135deg, rgba(245, 230, 163, 0.4) 0%, rgba(245, 230, 163, 0.2) 100%);
}

body.sector-construction .btn-secondary:hover {
  border-color: var(--sector-accent-light);
  color: var(--sector-accent-light);
  box-shadow: 0 8px 25px rgba(245, 230, 163, 0.3),
              0 0 20px rgba(245, 230, 163, 0.15);
}

body.sector-construction .hero .btn-secondary:hover,
body.sector-construction .cta-section .btn-secondary:hover {
  color: white;
}

body.sector-construction .nav-cta .btn-cta {
  background: linear-gradient(135deg, var(--sector-accent) 0%, var(--sector-accent-dark) 100%);
  color: white;
}

body.sector-construction .nav-cta .btn-cta:hover {
  box-shadow: 0 8px 25px rgba(245, 230, 163, 0.45), 0 0 20px rgba(245, 230, 163, 0.3);
}

body.sector-construction .nav-cta .btn-cta::before {
  background: linear-gradient(135deg, var(--sector-accent-light), var(--sector-accent), var(--sector-accent-dark));
}

body.sector-construction .navbar.scrolled {
  background: linear-gradient(180deg, rgba(61, 53, 32, 0.97) 0%, rgba(51, 44, 27, 0.95) 100%);
}

/* Construction - Extended styling */
body.sector-construction .hero {
  background: #3d3520;
}

body.sector-construction .section-header h2,
body.sector-construction .split-content h2 {
  color: var(--sector-accent);
}

body.sector-construction .pillar-icon,
body.sector-construction .service-icon,
body.sector-construction .feature-icon {
  background: var(--sector-accent-dark);
  color: white;
}

/* Construction 4 Pillars - Gradient card backgrounds (desaturated) */
body.sector-construction .pillar-card:nth-child(1) {
  background: linear-gradient(135deg, #7a6535 0%, #9a8555 100%);
}
body.sector-construction .pillar-card:nth-child(2) {
  background: linear-gradient(135deg, #6b6050 0%, #8a8070 100%);
}
body.sector-construction .pillar-card:nth-child(3) {
  background: linear-gradient(135deg, #5a7048 0%, #7a9068 100%);
}
body.sector-construction .pillar-card:nth-child(4) {
  background: linear-gradient(135deg, #3a3b3c 0%, #5a5c5e 100%);
}

/* Construction pillar icon backgrounds (darker) */
body.sector-construction .pillar-card:nth-child(1) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}
body.sector-construction .pillar-card:nth-child(2) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}
body.sector-construction .pillar-card:nth-child(3) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}
body.sector-construction .pillar-card:nth-child(4) .pillar-icon {
  background: rgba(0, 0, 0, 0.25);
}

body.sector-construction .metric-value {
  color: var(--sector-accent);
}

body.sector-construction .accordion-item.active .accordion-header {
  color: var(--sector-accent);
}

body.sector-construction .accordion-item.active .accordion-icon {
  background: var(--sector-accent);
  color: var(--primary-dark);
}

/* ==========================================
   FINANCIAL SERVICES - Pillar Colors Throughout
   ========================================== */

/* Financial - Module numbers with pillar colors */
body.sector-financial .module-card:nth-child(1) .module-number,
body.sector-financial .module-card:nth-child(5) .module-number {
  color: #AD1F1E;
}
body.sector-financial .module-card:nth-child(2) .module-number,
body.sector-financial .module-card:nth-child(6) .module-number {
  color: #2D3576;
}
body.sector-financial .module-card:nth-child(3) .module-number {
  color: #258F98;
}
body.sector-financial .module-card:nth-child(4) .module-number {
  color: #6E6E6E;
}

/* Financial - Vetting step numbers with pillar colors */
body.sector-financial .vetting-step:nth-child(1) .step-number {
  background: linear-gradient(135deg, #AD1F1E 0%, #c73939 100%);
}
body.sector-financial .vetting-step:nth-child(2) .step-number {
  background: linear-gradient(135deg, #2D3576 0%, #4a5199 100%);
}
body.sector-financial .vetting-step:nth-child(3) .step-number {
  background: linear-gradient(135deg, #258F98 0%, #3aacb5 100%);
}
body.sector-financial .vetting-step:nth-child(4) .step-number {
  background: linear-gradient(135deg, #6E6E6E 0%, #8a8a8a 100%);
}

/* Financial - Service card highlights with pillar colors */
body.sector-financial .service-card:nth-child(1) .service-highlight {
  background: rgba(173, 31, 30, 0.1);
  color: #AD1F1E;
  border-left: 3px solid #AD1F1E;
}
body.sector-financial .service-card:nth-child(2) .service-highlight {
  background: rgba(45, 53, 118, 0.1);
  color: #2D3576;
  border-left: 3px solid #2D3576;
}
body.sector-financial .service-card:nth-child(3) .service-highlight {
  background: rgba(37, 143, 152, 0.1);
  color: #258F98;
  border-left: 3px solid #258F98;
}
body.sector-financial .service-card:nth-child(4) .service-highlight {
  background: rgba(110, 110, 110, 0.1);
  color: #6E6E6E;
  border-left: 3px solid #6E6E6E;
}

/* Financial - Metric cards with pillar color accents */
body.sector-financial .metric-card:nth-child(1) {
  border-top: 3px solid #AD1F1E;
}
body.sector-financial .metric-card:nth-child(2) {
  border-top: 3px solid #2D3576;
}
body.sector-financial .metric-card:nth-child(3) {
  border-top: 3px solid #258F98;
}
body.sector-financial .metric-card:nth-child(4) {
  border-top: 3px solid #6E6E6E;
}

body.sector-financial .metric-card:nth-child(1) .metric-value {
  color: #AD1F1E;
}
body.sector-financial .metric-card:nth-child(2) .metric-value {
  color: #2D3576;
}
body.sector-financial .metric-card:nth-child(3) .metric-value {
  color: #258F98;
}
body.sector-financial .metric-card:nth-child(4) .metric-value {
  color: #6E6E6E;
}

/* ==========================================
   CONSTRUCTION - Pillar Colors Throughout
   ========================================== */

/* Construction - Module numbers with pillar colors */
body.sector-construction .module-card:nth-child(1) .module-number,
body.sector-construction .module-card:nth-child(5) .module-number {
  color: #C79A33;
}
body.sector-construction .module-card:nth-child(2) .module-number,
body.sector-construction .module-card:nth-child(6) .module-number {
  color: #AD996B;
}
body.sector-construction .module-card:nth-child(3) .module-number {
  color: #7A9C5A;
}
body.sector-construction .module-card:nth-child(4) .module-number {
  color: #5D5F60;
}

/* Construction - Vetting step numbers with pillar colors */
body.sector-construction .vetting-step:nth-child(1) .step-number {
  background: linear-gradient(135deg, #C79A33 0%, #d9b355 100%);
}
body.sector-construction .vetting-step:nth-child(2) .step-number {
  background: linear-gradient(135deg, #AD996B 0%, #c4b38a 100%);
}
body.sector-construction .vetting-step:nth-child(3) .step-number {
  background: linear-gradient(135deg, #7A9C5A 0%, #96b87a 100%);
}
body.sector-construction .vetting-step:nth-child(4) .step-number {
  background: linear-gradient(135deg, #5D5F60 0%, #7a7c7e 100%);
}

/* Construction - Service card highlights with pillar colors */
body.sector-construction .service-card:nth-child(1) .service-highlight {
  background: rgba(199, 154, 51, 0.1);
  color: #C79A33;
  border-left: 3px solid #C79A33;
}
body.sector-construction .service-card:nth-child(2) .service-highlight {
  background: rgba(173, 153, 107, 0.1);
  color: #AD996B;
  border-left: 3px solid #AD996B;
}
body.sector-construction .service-card:nth-child(3) .service-highlight {
  background: rgba(122, 156, 90, 0.1);
  color: #7A9C5A;
  border-left: 3px solid #7A9C5A;
}
body.sector-construction .service-card:nth-child(4) .service-highlight {
  background: rgba(93, 95, 96, 0.1);
  color: #5D5F60;
  border-left: 3px solid #5D5F60;
}

/* Construction - Metric cards with pillar color accents */
body.sector-construction .metric-card:nth-child(1) {
  border-top: 3px solid #C79A33;
}
body.sector-construction .metric-card:nth-child(2) {
  border-top: 3px solid #AD996B;
}
body.sector-construction .metric-card:nth-child(3) {
  border-top: 3px solid #7A9C5A;
}
body.sector-construction .metric-card:nth-child(4) {
  border-top: 3px solid #5D5F60;
}

body.sector-construction .metric-card:nth-child(1) .metric-value {
  color: #C79A33;
}
body.sector-construction .metric-card:nth-child(2) .metric-value {
  color: #AD996B;
}
body.sector-construction .metric-card:nth-child(3) .metric-value {
  color: #7A9C5A;
}
body.sector-construction .metric-card:nth-child(4) .metric-value {
  color: #5D5F60;
}

/* Construction - Trade items with pillar colors */
body.sector-construction .trade-item:nth-child(4n+1) {
  border-left: 3px solid #C79A33;
}
body.sector-construction .trade-item:nth-child(4n+2) {
  border-left: 3px solid #AD996B;
}
body.sector-construction .trade-item:nth-child(4n+3) {
  border-left: 3px solid #7A9C5A;
}
body.sector-construction .trade-item:nth-child(4n+4) {
  border-left: 3px solid #5D5F60;
}

/* ==========================================
   SCROLL TO TOP BUTTON
   ========================================== */

.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4a6b8a 0%, #6b8ba8 100%);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 107, 138, 0.4);
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(74, 107, 138, 0.5);
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
}

/* Financial Services - Red theme */
body.sector-financial .scroll-to-top {
  background: linear-gradient(135deg, var(--sector-accent) 0%, var(--sector-accent-dark) 100%);
  box-shadow: 0 4px 15px rgba(224, 112, 112, 0.4);
}

body.sector-financial .scroll-to-top:hover {
  box-shadow: 0 8px 25px rgba(224, 112, 112, 0.5);
}

/* Construction - Yellow theme */
body.sector-construction .scroll-to-top {
  background: linear-gradient(135deg, var(--sector-accent) 0%, var(--sector-accent-dark) 100%);
  box-shadow: 0 4px 15px rgba(245, 230, 163, 0.4);
}

body.sector-construction .scroll-to-top:hover {
  box-shadow: 0 8px 25px rgba(245, 230, 163, 0.5);
}

/* Mobile positioning */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }

  .scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}