/* Color Variables */
:root {
  --red: #FF0000;
  --red-text: #FF0000; /* used for red TEXT specifically - see light theme override below */
  --bg-color: #050505;
  --text-main: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.6);
  --nav-bg: rgba(0, 0, 0, 0.8);
  --btn-outline: rgba(255, 255, 255, 0.2);
  --glass-bg: rgba(255, 255, 255, 0.05);
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-main: #050505;
  --text-dim: rgba(0, 0, 0, 0.6);
  --nav-bg: rgba(255, 255, 255, 0.8);
  --btn-outline: rgba(0, 0, 0, 0.2);
  --glass-bg: rgba(0, 0, 0, 0.05);
  /* Pure #FF0000 text fails WCAG AA contrast (~4:1) on a white background.
     Use a darker red for TEXT only in light mode so it stays readable (~5.9:1).
     Borders/icons/backgrounds keep using --red as before. */
  --red-text: #CC0000;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
}

/* Accessibility: visible keyboard focus indicator.
   None of the interactive elements below had any focus style, which fails
   WCAG 2.4.7 (Focus Visible) for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--red-text);
  outline-offset: 3px;
}

#hero-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  padding: 20px 0;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-bg);
  transition: background 0.5s ease;
  z-index: 1000;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Keep anchor targets clear of the fixed header when navigated to */
section[id] {
  scroll-margin-top: 90px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-full,
.logo-icon {
  display: flex;
  align-items: center;
}

.logo-full img,
.logo-icon img {
  height: 34px;
  width: auto;
}

/* Icon-only version is hidden on desktop - responsive.css shows it instead
   of the full wordmark once the header gets tight on narrower screens */
.logo-icon {
  display: none;
}

/* Default theme is dark, so show the white logo variant by default;
   swap to the red variant in light mode where white would be invisible.
   These need to fully control display (block/none) on their own - an
   earlier ".logo-full img" rule is more specific than a single class,
   so it must not also set "display" or it would win and show both. */
.logo-for-light {
  display: none;
}

.logo-for-dark {
  display: block;
}

[data-theme="light"] .logo-for-light {
  display: block;
}

[data-theme="light"] .logo-for-dark {
  display: none;
}

/* Footer now themes with the rest of the site, so its logo swaps light/dark
   the same way the nav logo does - this rule must only size the image, not
   set display, or it would out-specificity .logo-for-light/-dark and show both */
.footer-logo img {
  height: 36px;
  width: auto;
}

.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  margin: 0 20px;
  font-size: 14px;
  transition: 0.3s;
}

.nav-links a:hover {
  color: var(--text-main);
}

.nav-links a.nav-current {
  color: var(--red);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Theme Toggle Switch - a pill track with fixed sun/moon indicators
   and a thumb that slides between them, driven by [data-theme] */
.theme-toggle {
  position: relative;
  width: 58px;
  height: 30px;
  padding: 0;
  border-radius: 50px;
  background: var(--glass-bg);
  border: 1px solid var(--btn-outline);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.5s ease, border-color 0.3s ease;
}

.theme-toggle:hover {
  border-color: var(--red);
}

.track-icon {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  transition: opacity 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

.track-icon-moon {
  left: 8px;
  color: var(--text-dim);
  opacity: 1;
}

.track-icon-sun {
  right: 8px;
  color: #e8850c;
  opacity: 0.35;
}

[data-theme="light"] .track-icon-moon {
  opacity: 0.35;
}

[data-theme="light"] .track-icon-sun {
  opacity: 1;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .toggle-thumb {
  transform: translateX(28px);
}

.theme-toggle:hover .toggle-thumb {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

/* Mobile Hamburger Button (hidden on desktop, shown via responsive.css) */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 45px;
  height: 45px;
  background: var(--glass-bg);
  border: 1px solid var(--btn-outline);
  border-radius: 50%;
  cursor: pointer;
}

.hamburger-btn span {
  width: 18px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* This mobile-only CTA lives inside the nav drawer; the desktop CTA
   button (.desktop-cta) is hidden on mobile in responsive.css */
.nav-cta-mobile {
  display: none;
}

.btn-glass {
  border: 1px solid var(--btn-outline);
  padding: 12px 28px;
  color: var(--text-main);
  border-radius: 50px;
  text-decoration: none;
  font-size: 13px;
  background: var(--glass-bg);
}

/* Hero Content */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.hero-badge {
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: var(--red-text);
  padding: 6px 16px;
  font-size: 11px;
  border-radius: 50px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 25px;
}

.hero h1 {
  font-size: clamp(40px, 5vw, 75px);
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 30px 0;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(20px, 5vw, 65px);
  line-height: 1;
  font-weight: 600;
  margin: 0 0 30px 0;
  letter-spacing: -2px;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h1 span {
      color: transparent;
    -webkit-text-stroke: 1.5px var(--red);
    text-transform: uppercase;
}

p {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 550px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-red {
  background: var(--red);
  color: white;
  border: none;
  padding: 18px 40px;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.4s;
  Text-decoration: none;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--btn-outline);
  color: var(--text-main);
  padding: 18px 40px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* Logo Visuals */
.hero-visual {
  perspective: 1000px;
}

#exploding-logo {
  width: 100%;
  filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.3));
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: hidden;
  /* Root <svg> elements clip their content to their own box by default
     (overflow:hidden is the browser's built-in default for the outermost
     svg). The explosion animates hexagons far beyond that box - without
     this override they get hard-clipped right at the SVG's edge instead
     of flying off cleanly. */
  overflow: visible;
}

@keyframes logoGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.8));
  }
}

.logo-active-glow {
  animation: logoGlow 3s infinite ease-in-out;
}


/* Hero Text Blur */
.hero-text {
  opacity: 1;
  filter: blur(0px);
}

/* Tech Forward Section */
.tech-forward {
  height: 100vh;
  width: 100%;
  display: flex;

  background: var(--bg-color);
  position: relative;
  z-index: 50;
  /* must stack above the hero section */
  margin-top: 0;
  transform: translateZ(0);
}

.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.tech-content h2 {
  font-size: clamp(32px, 4vw, 50px);
  margin: 16px 0 18px;
  line-height: 1.15;
}

.tech-content h2 span {
  color: var(--red);
}

.tech-content p {
  font-size: 18px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.philosophy-badge {
  display: inline-block;
  background: rgba(255, 0, 0, 0.08);
  color: var(--red-text);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.philosophy-checklist {
  list-style: none;
  padding: 0;
  margin: 6px 0 30px;
}

.philosophy-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--text-main);
  font-size: 16px;
}

.philosophy-check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy-check-icon svg {
  width: 12px;
  height: 12px;
}

/* --- Visual: soft abstract blob shapes (same blurred-circle technique as
       the footer's orbs, just in this section's context) sitting behind a
       cascading stack of 3 feature chips. Each chip is split into an outer
       element (handles cascade position + the continuous float animation)
       and an -inner element (handles the hover lift/shadow) so the two
       transforms never fight each other. --- */
.philosophy-visual {
  position: relative;
}

/* Rocket illustration sits behind the chip cascade (z-index 0, cards are
   z-index 1+) - positioned centrally so the cards can spread around it
   on both sides rather than sitting in one corner. Colors are theme-
   aware: body flips white/black with the theme, the notch uses
   --bg-color so it always reads as a cutout regardless of theme, and
   the stripe/window/flame stay brand red in both. */
.philosophy-rocket {
  position: absolute;
  width: 285px;
  top: 162px;
  left: -21px;
  z-index: 0;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
  animation: rocketFloat 7s ease-in-out infinite;
}

@keyframes rocketFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -12px) rotate(-1deg); }
}

.rocket-illustration {
  width: 100%;
  height: auto;
  display: block;
}

.rocket-body { fill: var(--text-main); }
.rocket-wing,
.rocket-detail,
.rocket-window-ring { fill: var(--text-dim); }
.rocket-stripe,
.rocket-window { fill: var(--red); }
.rocket-notch { fill: var(--bg-color); }

.rocket-flame-outer,
.rocket-flame-inner {
  fill: var(--red);
  transform-origin: 90px 188px;
  /* anchored at the nozzle (where the exhaust stripe meets the flame),
     not the flame's own center - so scaling reads as thrust growing out
     of and receding back into the engine, not the whole flame just
     breathing in place */
  animation: flameFlickerOuter 1s ease-in-out infinite;
}
.rocket-flame-inner {
  fill: #fff;
  animation: flameFlickerInner 0.65s ease-in-out infinite;
}

@keyframes flameFlickerOuter {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.86); opacity: 0.8; }
}

@keyframes flameFlickerInner {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.78); opacity: 0.7; }
}

/* Respect users who've asked their OS to minimize motion */
@media (prefers-reduced-motion: reduce) {
  .philosophy-rocket,
  .rocket-flame-outer,
  .rocket-flame-inner {
    animation: none;
  }
}

.philosophy-chip-stack {
  position: relative;
  z-index: 1;
  min-height: 450px;
  /* chip-2/chip-3 are absolutely positioned within this box at fixed
     offsets from chip-1's top-left corner (not relative to chip-1's own
     height), so they never depend on guessing how tall chip-1 renders
     for real - min-height reserves enough room for the full spread
     since absolutely positioned children don't otherwise contribute to
     this container's size. */
}

.philosophy-chip {
  width: 250px;
  animation: chipFloat 5s ease-in-out infinite;
}

.chip-1 {
  position: relative;
  z-index: 1;
  animation-delay: 0s;
}

.chip-2 {
  position: absolute;
  left: 288px;
  top: 17px;
  z-index: 2;
  animation-delay: 1.3s;
}

.chip-3 {
  position: absolute;
  left: 241px;
  top: 252px;
  z-index: 3;
  animation-delay: 2.6s;
}

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.philosophy-chip-inner {
  background: var(--glass-bg);
  border: 1px solid var(--btn-outline);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.philosophy-chip:hover .philosophy-chip-inner {
  transform: translateY(-8px);
  box-shadow: 0 28px 46px rgba(0, 0, 0, 0.3);
}

.philosophy-chip-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 0, 0, 0.12);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.philosophy-chip-icon svg {
  width: 20px;
  height: 20px;
}

.philosophy-chip h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  line-height: 1.3;
}

.philosophy-chip p {
  font-size: 12px !important;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 0 !important;
  max-width: none;
}

[data-theme="light"] .philosophy-chip-inner {
  background: #f7f7f8;
}

/* Respect users who've asked their OS to minimize motion */
@media (prefers-reduced-motion: reduce) {
  .philosophy-chip {
    animation: none;
  }
}

/* 1. Center the hero section on screen */
.hero-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  overflow: hidden;
  transform: translateZ(0);
}


/* 2. Split the grid 50/50 for alignment */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
}

/* 3. Logo container */
.hero-visual {
  display: flex;
  justify-content: flex-end;
  /* align logo to the right */
  position: relative;
}




/*### Services Section ###*/
.services-section {
  margin-top: -100vh;
  padding: 100px 0;
  background: var(--bg-color);
  position: relative;
  z-index: 100;
}

.services-header {
  max-width: 700px;
  margin-bottom: 60px;
}

.services-header h2 {
  font-size: 50px;
  line-height: 1.1;
  margin: 15px 0;
}
.services-header h2 span {
  color: var(--red);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.service-card {
  position: relative;
  background: #0a0a0a;
  /* Default background */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* push content to the bottom */
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  /* dim and grayscale by default, full color revealed on hover */
  transition: all 0.6s ease;
  z-index: 0;
  filter: grayscale(100%) brightness(50%);
}

.service-card:hover {
  border-color: var(--red);
  background: rgba(255, 0, 0, 0.01);
  transform: translateY(-10px);
}

/* Dark gradient overlay on top of the image */
.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.1) 0%, rgba(5, 5, 5, 0.9) 100%);
  z-index: 1;
}

/* Keep content above the image */
.card-inner {
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}

/* Hover Effect */
.service-card:hover .card-bg {
  opacity: 0.6;
  filter: grayscale(0%) brightness(70%);
  /* color returns and slightly zooms on hover */
  transform: scale(1.1);
}

.service-card:hover {
  border-color: var(--red);
  box-shadow: 0 20px 40px rgba(255, 0, 0, 0.1);
}

.service-card:hover .card-inner {
  transform: translateY(-10px);
}

/* Give the icon a distinct look */
.card-icon {
  background: rgba(255, 0, 0, 0.15);
  backdrop-filter: blur(5px);
  width: 55px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-bottom: 20px;
}



.card-icon svg {
  width: 30px;
  height: 30px;
}



.service-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 700;
}

.service-card p {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
}

.card-arrow {
  font-size: 14px;
  color: var(--red);
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s;
}

.service-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================ */
/* LIGHT MODE OPTIMIZATION FOR SERVICES */
/* ============================================ */

[data-theme="light"] .service-card {
  background: #e8e8e8;
  /* light gray background */
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Light mode: swap the dark overlay for a light one */
[data-theme="light"] .service-card::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* Light mode: fade the background image further and shift it toward white */
[data-theme="light"] .card-bg {
  opacity: 0.15;
  filter: grayscale(100%) brightness(1.2);
}

/* How visible the image becomes on hover */
[data-theme="light"] .service-card:hover .card-bg {
  opacity: 0.3;
  filter: grayscale(0%) brightness(1);
}

/* Light mode: refine icon styling */
[data-theme="light"] .card-icon {
  background: rgba(255, 0, 0, 0.05);
  border: 1px solid rgba(255, 0, 0, 0.1);
}

/* Arrow color inside the card */
[data-theme="light"] .card-arrow {
  color: #333;
}

[data-theme="light"] .services-section {
  background-color: #ffffff;
}






/* Marquee Text */
.marquee-wrapper {
  position: absolute;
  top: -14vh;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  /* keep it subtle, not too bold */
}

.marquee-content {
  display: inline-block;
}

.marquee-content span {
  display: inline-block;
  font-size: 5vw; /* extra large text */
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2); /* hollow/outline look */
  padding-right: 50px;
}

/* Light mode: darken the outline text so it stays visible on a white background */
[data-theme="light"] .marquee-content span {
  color: rgba(0, 0, 0, 0.1);
}









/* FinTech Section Styles */
.fintech-section {
  padding: 150px 0;
  background: var(--bg-color);
  position: relative;
  z-index: 105;
}

.fintech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.fintech-content h2 {
  font-size: 55px;
  font-weight: 800;
  margin-bottom: 25px;
}

.fintech-content h2 span {
  color: var(--red);
}

/* Left Side Badges */
.fintech-badges {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.badge-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.02);
  padding: 20px 25px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.3s;
}

.badge-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
}

.badge-card:hover {
  border-color: var(--red);
  background: rgba(255, 0, 0, 0.02);
}

.b-icon-box {
  color: var(--red);
  width: 30px;
  height: 30px;
}

/* Right Side Feature Cards */
.fintech-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.f-card {
  position: relative;
  height: 240px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.5s ease;
}

/* Background Image with Overlay */
.f-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  /* dim by default, brightens on hover */
  filter: grayscale(100%);
  transition: 0.6s ease;
  z-index: 0;
}

.f-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 1;
}

.f-card-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.f-icon {
  width: 40px;
  height: 40px;
  color: var(--red);
  margin-bottom: 15px;
  transition: 0.4s;
}

.f-card h4 {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.f-card p {
  font-size: 13px !important;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Hover Effects */
.f-card:hover {
  border-color: var(--red);
  transform: translateY(-10px);
}

.f-card:hover .f-card-bg {
  opacity: 0.5;
  filter: grayscale(0%);
  transform: scale(1.1);
}

.f-card:hover .f-icon {
  transform: scale(1.1);
  color: white;
}

/* Offset Layout (Zig-Zag) */
.c2,
.c4 {
  margin-top: 40px;
}

.c1,
.c3 {
  margin-bottom: 40px;
}

/* Light Mode Optimization */
[data-theme="light"] .f-card {
  background: #f0f0f0;
}

[data-theme="light"] .f-card::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.95) 100%);
}

[data-theme="light"] .badge-card {
  background: #f9f9f9;
}

[data-theme="light"] .f-card:hover .f-icon {
  color: var(--red);
}


.fintech-visual {
  position: relative;
  /* required so absolutely positioned children anchor here */
}

.card-trail-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

.trail-path {
  stroke-dasharray: 0, 360;
  /* 40 = visible trail length, 360 = full path length */
  stroke-dashoffset: 400;
  /* hidden at the start */
  filter: drop-shadow(0 0 2px #FF0000);
}






/* Staff Augmentation Spotlight Section */
.staff-section {
  padding: 150px 0;
  background: var(--bg-color);
  position: relative;
  z-index: 103;
}

.staff-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
}

.staff-content {
  min-width: 0;
  /* without this, a long unbreakable word in the heading (e.g. "Augmentation")
     can force this grid item - and the whole page - wider than narrow phone
     viewports once the layout collapses to a single column */
}

.staff-badge {
  display: inline-block;
  background: rgba(255, 0, 0, 0.08);
  color: var(--red-text);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 22px;
}

.staff-content h2 {
  font-size: clamp(32px, 7vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.staff-content h2 span {
  color: var(--red);
}

.staff-content p {
  margin-bottom: 35px;
}

/* Right Side: Card Fan Visual */
.staff-visual {
  display: flex;
  align-items: flex-start;
  padding-top: 25px;
  min-width: 0;
  /* without this, the grid column blows out past its fr-share to fit
     the cards' content, pushing the fan off the right edge of the
     viewport on laptop-width screens (~992-1380px) */
}

.staff-card {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 82px;
  max-width: 190px;
  min-width: 0;
  min-height: 250px;
  background: rgb(18, 18, 18);
  border: 1px solid var(--btn-outline);
  border-radius: 22px;
  padding: 28px 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.staff-card:not(:first-child) {
  margin-left: -16px;
}

.staff-card:nth-child(2) {
  margin-top: 55px;
}

.staff-card:nth-child(3) {
  margin-top: 30px;
}

.staff-card:nth-child(4) {
  margin-top: 10px;
}

/* Highlighted "active" card - pulled up and in front of the others */
.staff-card.active {
  min-height: 290px;
  margin-top: -20px;
  background: linear-gradient(160deg, #ff2b2b 0%, var(--red) 45%, #7a0000 100%);
  border: none;
  box-shadow: 0 30px 55px rgba(255, 0, 0, 0.28);
  z-index: 10;
}

/* Small circular "handle" on top of the active card */
.staff-card.active::after {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.staff-num {
  display: block;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-dim);
  margin-bottom: 26px;
}

.staff-num .hash {
  font-size: 16px;
  font-style: normal;
  -webkit-text-stroke: 1px var(--text-dim);
  margin-right: 2px;
}

.staff-card.active .staff-num {
  color: #fff;
  -webkit-text-stroke: 0;
}

.staff-card.active .staff-num .hash {
  color: rgba(255, 255, 255, 0.7);
  -webkit-text-stroke: 0;
}

.staff-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
  line-height: 1.3;
}

.staff-card p {
  font-size: 13px !important;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.staff-card.active h4 {
  color: #fff;
}

.staff-card.active p {
  color: rgba(255, 255, 255, 0.85);
}

/* Hover: lift and bring to front, same feel as .f-card:hover */
.staff-card:hover {
  transform: translateY(-10px);
  z-index: 20;
  border-color: var(--red);
}

.staff-card.active:hover {
  transform: translateY(-14px);
}

[data-theme="light"] .staff-card:not(.active) {
  background: #f7f7f8;
}

[data-theme="light"] .staff-badge {
  background: rgba(255, 0, 0, 0.06);
}


/*Industries Section Styles */
.industries-section {
  padding: 150px 0;
  background: var(--bg-color);
  position: relative;
  z-index: 106;
}

.industries-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.industries-header h2 {
  font-size: 55px;
  line-height: 1.1;
  margin: 15px 0;
}

.industries-header h2 span {
  color: var(--red);
}

/* Industry Grid */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 25px;
}

.ind-card {
  position: relative;
  height: 350px;
  border-radius: 30px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.ind-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  filter: grayscale(100%) brightness(0.6);
  transition: all 0.7s ease;
  z-index: 0;
}

.ind-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.95) 100%);
  z-index: 1;
}

.ind-content {
  position: relative;
  z-index: 2;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: Center;
  transition: transform 0.4s ease;
}

.ind-icon {
  width: 50px;
  height: 50px;
  color: var(--red);
  margin-bottom: 20px;
  transition: 0.4s;
}

.ind-card h3 {
  font-size: 26px;
  margin-bottom: 12px;
  font-weight: 700;
}

.ind-card p {
  font-size: 15px !important;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Hover Effects */
.ind-card:hover {
  border-color: var(--red);
  box-shadow: 0 15px 40px rgba(255, 0, 0, 0.15);
}

.ind-card:hover .ind-card-bg {
  opacity: 0.5;
  filter: grayscale(0%) brightness(0.8);
  transform: scale(1.1);
}

.ind-card:hover .ind-content {
  transform: translateY(-10px);
}

/* Light Mode Fix */
[data-theme="light"] .ind-card {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ind-card::after {
  background: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.95) 100%);
}

[data-theme="light"] .ind-card-bg {
  opacity: 0.1;
}





/* Why Choose Us Section */

.why-choose-section {
  padding: 100px 0;
  background-color: var(--bg-color);
  position: relative;
  z-index: 107;
}

.why-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
  align-items: start;
}

/* Left Side Sticky */
.why-left {
  position: sticky;
  top: 150px;
}

.why-left h2 {
  font-size: 55px;
  line-height: 1.1;
  margin: 20px 0;
}

.why-left h2 span {
  color: var(--red);
}

.why-left p {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 400px;
}

/* Right Side List */
.choose-item {
  display: flex;
  gap: 40px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  cursor: default;
}
[data-theme="light"] .choose-item {
  border-bottom: 1px solid rgba(37, 37, 37, 0.2);
}

.choose-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.choose-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--red-text);
  font-family: 'Space Grotesk', sans-serif;
  opacity: 0.5;
  padding-top: 8px;
}

/* At 0.5 opacity, red-on-white contrast fails WCAG AA - raise opacity in light mode */
[data-theme="light"] .choose-num {
  opacity: 0.85;
}

.choose-content h3 {
  font-size: 28px;
  margin-bottom: 15px;
  transition: 0.3s;
}

.choose-content p {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 600px;
}

/* Hover Effect - Aigocy Style */
.choose-item:hover {
  padding-left: 20px;
  border-bottom-color: var(--red);
}

.choose-item:hover .choose-num {
  opacity: 1;
}

.choose-item:hover .choose-content h3 {
  color: var(--red);
  transform: translateX(10px);
}

/* --- New Tech Core Visual --- */
/* --- Logo Core Visual Styling --- */
.tech-core-wrapper {
  position: relative;
  width: 400px;
  height: 300px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating rings */
.core-layer {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 0, 0, 0.15);
}

.layer-1 {
  width: 100%;
  height: 100%;
  border-style: dashed;
  animation: rotateClockwise 25s linear infinite;
}

.layer-2 {
  width: 80%;
  height: 80%;
  border: 1px double rgba(255, 0, 0, 0.2);
  animation: rotateCounter 18s linear infinite;
}

/* Center logo */
.logo-core {
  position: absolute;
  width: 280px;
  height: auto;
  color: var(--red);
  z-index: 10;
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8));
  animation: coreBreath 4s ease-in-out infinite;
  margin-top: 40px;
}

.core-icon-paths path {
  fill: var(--red);
}

/* Energy Pulse Effect */
.core-pulse-ring {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  animation: energyPulse 3s ease-out infinite;
}

/* Animations */
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounter {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes coreBreath {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px rgba(255, 0, 0, 0.9));
  }
}

@keyframes energyPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Tech Bits */
.tech-bit {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  opacity: 0.5;
}

.bit-1 {
  top: 15%;
  left: 15%;
  animation: floatBit 4s infinite;
}

.bit-2 {
  bottom: 20%;
  right: 20%;
  animation: floatBit 6s infinite reverse;
}

@keyframes floatBit {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(15px, -15px);
  }
}

/* Light Mode Fix */
[data-theme="light"] .core-layer {
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .logo-core {
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.4));
}





/* End-to-End Solutions Section */
.solutions-section {
  padding: 140px 0;
  background: var(--bg-color);
  position: relative;
  z-index: 108;
}

.solutions-header {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}

.solutions-header h2 {
  font-size: 55px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
}

.solutions-header h2 span {
  color: var(--red);
  font-weight: 800;
}

.solutions-header p {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 680px;
  margin: 0 auto;
}

.solutions-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--glass-bg);
  border: 1px solid var(--btn-outline);
  border-radius: 28px;
  overflow: hidden;
}

.solution-item {
  padding: 50px 35px;
  text-align: center;
  border-right: 1px solid var(--btn-outline);
  transition: background 0.4s ease;
}

.solution-item:last-child {
  border-right: none;
}

.solution-item:hover {
  background: rgba(255, 0, 0, 0.03);
}

.solution-icon-circle {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.solution-icon-circle svg {
  width: 32px;
  height: 32px;
}

.icon-chip {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 20px;
  line-height: 1.2;
  border: 2px solid var(--bg-color);
}

.solution-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  line-height: 1.3;
}

.solution-item p {
  font-size: 14px !important;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

[data-theme="light"] .solutions-panel {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .icon-chip {
  border-color: #ffffff;
}


/* process section */

.delivery-process-section {
  padding: 100px 0;
  background: var(--bg-color);
  overflow: hidden;
}

.process-intro {
  text-align: center;
  margin-bottom: 100px;
}

.process-intro h2 {
  font-size: 55px;
}

.process-flow-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Center line track */
.flow-line-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(-50%);
}

/* Red progress line that fills on scroll */
.flow-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  /* height increased by JS */
  background: var(--red);
  box-shadow: 0 0 15px var(--red), 0 0 30px var(--red);
}

.flow-item {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Dot on the track */
.flow-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #111;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  z-index: 10;
  transition: 0.5s;
}

.flow-item.active .flow-dot {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 15px var(--red);
  scale: 1.1;

}

/* Card Styles */
.flow-content {
  width: 45%;
  padding: 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  transition: 0.6s;
  opacity: 0.3;
  filter: blur(2px);
}

.flow-content p {
  margin: 0;
}

.flow-content.left {
  margin-right: 55%;
}

.flow-content.right {
  margin-left: 55%;
}

.flow-item.active .flow-content {
  opacity: 1;
  filter: blur(0px);
  border-color: rgba(255, 0, 0, 0.3);
  background: rgba(255, 0, 0, 0.02);
  transform: translateY(-10px);
}

/* Light mode: the translucent white card/dot are nearly invisible against
   a white page background - give them a visible light-gray boundary instead */
[data-theme="light"] .flow-content {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .flow-line-track {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .flow-dot {
  background: #e0e0e0;
  border-color: rgba(0, 0, 0, 0.15);
}

.step-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--red-text);
  margin-bottom: 15px;
  display: block;
}

.flow-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.flow-content p {
  color: var(--text-dim);
  line-height: 1.6;
}




/* Tech Stack Section */

.space-tech-tunnel {
    height: 100vh;
    background: #050505; /* always dark - see note below */
    position: relative;
    overflow: hidden;
    z-index: 120;
}

/* This section is an immersive "flying through a tech space tunnel"
   sequence - stars, nebula glow, 3D pods drifting past the camera. That
   illusion depends entirely on a dark backdrop (space is dark), so unlike
   the rest of the site this section intentionally stays dark in both
   themes rather than switching to white in light mode, which would wash
   out the stars/nebula and lose the depth effect completely. */
.space-bg-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* --- Space Visuals --- */
.stars-layer-1, .stars-layer-2, .stars-layer-3 {
    position: absolute;
    inset: -100%;
}

.stars-layer-1 {
    background-image: 
        radial-gradient(1px 1px at 10% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 30% 65%, #fff, transparent),
        radial-gradient(1px 1px at 50% 15%, #fff, transparent),
        radial-gradient(2px 2px at 70% 45%, #fff, transparent),
        radial-gradient(1px 1px at 85% 75%, var(--red), transparent),
        radial-gradient(1.5px 1.5px at 15% 85%, #fff, transparent);
    background-size: 400px 400px;
    animation: spaceWarp 90s linear infinite, twinkleA 3.5s ease-in-out infinite;
}

.stars-layer-2 {
    background-image:
        radial-gradient(1px 1px at 25% 10%, #fff, transparent),
        radial-gradient(1px 1px at 60% 30%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, var(--red), transparent),
        radial-gradient(1px 1px at 5% 55%, #fff, transparent);
    background-size: 300px 300px;
    animation: spaceWarp 60s linear infinite reverse, twinkleB 5s ease-in-out infinite;
    animation-delay: 0s, 1.5s;
}

.stars-layer-3 {
    background-image:
        radial-gradient(0.8px 0.8px at 15% 45%, #fff, transparent),
        radial-gradient(0.8px 0.8px at 55% 15%, #fff, transparent),
        radial-gradient(1px 1px at 75% 85%, #fff, transparent),
        radial-gradient(0.8px 0.8px at 35% 70%, #fff, transparent),
        radial-gradient(0.8px 0.8px at 90% 40%, var(--red), transparent);
    background-size: 250px 250px;
    animation: spaceWarp 40s linear infinite, twinkleC 2.5s ease-in-out infinite;
    animation-delay: 0.5s, 0.8s;
}

@keyframes spaceWarp {
    from { transform: translate(0, 0); }
    to { transform: translate(15%, 15%); }
}

@keyframes twinkleA { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.55; } }
@keyframes twinkleB { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }
@keyframes twinkleC { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }

.nebula-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 45%; height: 45%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 40% 45%, rgba(255, 0, 0, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 65% 60%, rgba(120, 40, 255, 0.04) 0%, transparent 44%);
    filter: blur(35px);
    animation: nebulaDrift 45s ease-in-out infinite alternate;
}

.nebula-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 0, 0, 0.02) 100deg, transparent 220deg, rgba(120, 40, 255, 0.015) 320deg, transparent 360deg);
    animation: galaxySpin 70s linear infinite;
}

/* Note: stars-layer-1/2/3 and .nebula-glow intentionally have no
   [data-theme="light"] override - this section stays dark in both
   themes (see .space-tech-tunnel above), so they always use their
   original bright styling. */

/* --- 3D Scene Setup --- */
.tunnel-viewport {
    height: 100vh;
    position: relative;
    perspective: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tunnel-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.huge-tech-intro {
    text-align: center;
    z-index: 10;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* .tagline has no color of its own (it inherits var(--text-main)), which
   would resolve to near-black in light theme - invisible against this
   section's permanently-dark background. Pin it to red here instead. */
.space-tech-tunnel .tagline {
    color: var(--red);
}

.huge-text {
    font-size: clamp(60px, 12vw, 160px);
    font-weight: 900;
    line-height: 0.85;
    color: #fff;
    letter-spacing: -5px;
    margin: 20px 0;
}

.huge-text span {
    color: transparent;
    -webkit-text-stroke: 2px var(--red);
}

/* Note: no [data-theme="light"] override here either - stays white
   against the permanently-dark tunnel background, same reasoning as
   the stars/nebula above. */

/* --- Tech Pods --- */
.tech-pod {
    position: absolute;
    top: 50%; left: 50%;
    width: 160px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 0, 0, 0.2);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(10px);
    opacity: 0;
    will-change: transform, opacity;
}

.tech-pod img { width: 35px; height: 35px; }
.tech-pod span { color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; }

/* Note: no [data-theme="light"] overrides for .tech-pod, .tech-pod span,
   or .invert-light either - same reasoning, this section stays dark. */















/* Contact Section */

.final-cta-section {
    padding: 150px 0;
    background-color: var(--bg-color);
    position: relative;
    z-index: 10;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.cta-title {
    font-size: clamp(35px, 5vw, 60px);
    line-height: 1.1;
    margin: 20px 0;
}

.cta-title span { color: var(--red); }
.cta-desc { color: var(--text-dim); font-size: 18px; line-height: 1.6; margin-bottom: 40px; }

/* Contact Details */
.contact-details-v2 { display: grid; gap: 20px; }
.det-item { display: flex; align-items: center; gap: 15px; font-weight: 600; font-size: 16px; }
.det-icon { width: 40px; height: 40px; background: rgba(255,0,0,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--red); }
.det-icon svg { width: 18px; height: 18px; }

/* --- Modern Form Styling --- */
.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 30px;
    backdrop-filter: blur(15px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.form-group {
    position: relative;
    margin-bottom: 35px;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

.form-group select { color: var(--text-dim); cursor: pointer; }
.form-group select option { background: #111; color: white; }

/* Floating Labels */
.form-group label {
    position: absolute;
    top: 12px; left: 0;
    color: var(--text-dim);
    pointer-events: none;
    transition: 0.3s ease;
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    top: -20px;
    font-size: 12px;
    color: var(--red-text);
    font-weight: 700;
}

/* Bottom Border Glow */
.input-bar {
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--red);
    transition: 0.4s ease;
}

.form-group input:focus ~ .input-bar, .form-group textarea:focus ~ .input-bar {
    width: 100%;
    box-shadow: 0 0 10px var(--red);
}

/* Submit Button */
.btn-submit {
    width: 100%;
    background: var(--red);
    color: white;
    padding: 18px 0;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: 0.4s;
    margin-top: 20px;
}

.btn-submit svg { width: 20px; height: 20px; transition: 0.4s; }

.btn-submit:hover {
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
    transform: translateY(-3px);
}

.btn-submit:hover svg {
    transform: translate(5px, -5px);
}

/* Light Mode Support */
[data-theme="light"] .contact-form-wrapper { background: #f9f9f9; border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .form-group input, [data-theme="light"] .form-group textarea { color: #000; border-bottom-color: rgba(0,0,0,0.1); }















/* --- Footer Premium Styles ---
   Uses the exact same card formula as .f-card / .staff-card / .solution-item
   (var(--glass-bg) + var(--btn-outline) + backdrop blur) so the footer reads
   as "one of our cards", not a different, unrelated color scheme. */
.modern-footer {
    background: var(--glass-bg);
    border: 1px solid var(--btn-outline);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    margin: 20px 24px 24px;
    border-radius: 32px;
}

/* --- Animated Background: a faint red glow drifting in the corners, the
       same restrained accent-only use of red as .card-icon / .hero-badge,
       not a dominant color wash --- */
.footer-bg-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--red);
    filter: blur(120px);
    opacity: 0.12;
}

.orb-1 {
    top: -10%; left: -10%;
    animation: floatingOrb 15s infinite alternate;
}

.orb-2 {
    bottom: -10%; right: -10%;
    animation: floatingOrb 20s infinite alternate-reverse;
}

@keyframes floatingOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.2); }
}

/* --- Content Styling --- */
.footer-container { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 30px; }

/* --- Main Grid --- */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.2fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-tagline {
    color: var(--text-main);
    margin: 18px 0 25px;
    max-width: 280px;
    line-height: 1.6;
}

.footer-column h4 {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 26px;
    color: var(--text-main);
    font-weight: 700;
}

.footer-column a {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 15px;
    transition: 0.3s;
}

.footer-column a:hover { color: var(--red); transform: translateX(5px); }

.footer-column a.footer-contact-item,
/* --- Contact column: icon + text rows ---
   Specificity note: this must beat ".footer-column a" (class+element,
   which set display:block) - written as a bare class it was losing that
   fight and silently falling back to block, which is what stacked the
   icon above the text instead of beside it. */
.footer-column a.footer-contact-item,
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.5;
    transition: 0.3s;
}

a.footer-contact-item:hover { color: var(--red); }
a.footer-contact-item:hover .footer-contact-icon { background: var(--red); color: #fff; }

.footer-contact-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--red);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    margin-top: 2px;
    transition: 0.3s;
}

.footer-contact-icon svg {
    width: 15px;
    height: 15px;
}

/* --- Bottom Bar --- */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--btn-outline);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 300;
}

.footer-bottom-bar p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
}

.footer-brand-highlight {
    color: var(--red-text);
    font-weight: 700;
}

.scroll-top-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--btn-outline);
    background: var(--glass-bg);
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.scroll-top-btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: translateY(-3px);
}

.social-icon {
    display: inline-flex;
    width: 40px; height: 40px;
    border: 1px solid var(--btn-outline);
    border-radius: 50%;
    align-items: center; justify-content: center;
    margin-right: 10px;
    font-size: 14px;
    color: var(--text-main); text-decoration: none;
    transition: 0.3s;
}

.social-icon:hover { background: var(--red); color: #fff; border-color: var(--red); }

@media (max-width: 992px) {
    .footer-main-grid { grid-template-columns: repeat(2, 1fr); gap: 50px; }
    .footer-brand-info { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .modern-footer { margin: 16px 14px 16px; border-radius: 24px; }
    .footer-main-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-brand-info { grid-column: auto; }
    .footer-bottom-bar { flex-direction: column; gap: 16px; text-align: center; }
}

















/* Common */
/* Give every section a background color */
section, footer {
    background-color: var(--bg-color); /* this hides the 3D canvas behind it */
    position: relative;
    z-index: 10;
}

/* Only the hero stays transparent so the 3D canvas shows through */
.hero-section {
    background-color: transparent !important;
}

/* Keep the 3D canvas fixed in place at all times */
#hero-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* behind all sections */
    pointer-events: none;
}


.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}





/* --- Custom Cursor --- */
.cursor-dot, .cursor-outline {
    pointer-events: none;
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background-color 0.3s, opacity 0.3s;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--red);
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--red);
    opacity: 0.5;
}

/* --- Mouse Spotlight --- */
.mouse-spotlight {
    position: fixed;
    top: 0; left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.cursor-active {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 0, 0, 0.1);
    border-width: 1px;
}







/* starfield */

.starfield {
  position: relative;
}

.starfield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 65%, #fff, transparent),
    radial-gradient(1px 1px at 50% 15%, #fff, transparent),
    radial-gradient(2px 2px at 70% 45%, #fff, transparent),
    radial-gradient(1px 1px at 85% 75%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 15% 85%, #fff, transparent),
    radial-gradient(1px 1px at 25% 40%, #fff, transparent),
    radial-gradient(1px 1px at 60% 90%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 25%, var(--red), transparent),
    radial-gradient(1px 1px at 40% 55%, #fff, transparent);
  background-size: 350px 350px;
  opacity: 0.35;
  animation: starfieldTwinkle 4s ease-in-out infinite, starfieldDrift 70s linear infinite;
}

.starfield > .container {
  position: relative;
  z-index: 1;
}

@keyframes starfieldTwinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

@keyframes starfieldDrift {
  from { background-position: 0 0; }
  to { background-position: 350px 350px; }
}

[data-theme="light"] .starfield::before {
  animation: starfieldTwinkleLight 4s ease-in-out infinite, starfieldDrift 70s linear infinite;
  background-image:
    /* dense speckle field - many small dark dots, with a good handful of
       red accent stars mixed in for brand color */
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(15, 15, 25, 0.75), transparent),
    radial-gradient(2px 2px at 30% 65%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 50% 15%, rgba(15, 15, 25, 0.8), transparent),
    radial-gradient(2.5px 2.5px at 70% 45%, rgba(15, 15, 25, 0.55), transparent),
    radial-gradient(2px 2px at 85% 75%, var(--red), transparent),
    radial-gradient(2px 2px at 15% 85%, rgba(15, 15, 25, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 25% 40%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 60% 90%, rgba(15, 15, 25, 0.65), transparent),
    radial-gradient(2px 2px at 90% 25%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 40% 55%, rgba(15, 15, 25, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 5% 50%, rgba(15, 15, 25, 0.65), transparent),
    radial-gradient(2px 2px at 55% 30%, rgba(15, 15, 25, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 75% 8%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 95% 60%, rgba(15, 15, 25, 0.6), transparent),
    radial-gradient(2px 2px at 20% 5%, rgba(15, 15, 25, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 65% 70%, rgba(15, 15, 25, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 35% 95%, rgba(15, 15, 25, 0.55), transparent),
    radial-gradient(2px 2px at 45% 45%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 80% 90%, rgba(15, 15, 25, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 12% 62%, rgba(15, 15, 25, 0.65), transparent),
    radial-gradient(2px 2px at 42% 12%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 68% 82%, rgba(15, 15, 25, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 92% 42%, rgba(15, 15, 25, 0.65), transparent),
    radial-gradient(2px 2px at 8% 32%, rgba(15, 15, 25, 0.7), transparent);
  background-size: 350px 350px;
}

@keyframes starfieldTwinkleLight {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 0.95; }
}