/* ============================================================
   REIFYCORE — Premium Enterprise · v3.0
   Logo-derived palette · Immersive depth · Executive-grade
   ============================================================ */

:root {
  --steel:         #4790BA;
  --steel-soft:    #5A9EC5;
  --steel-deep:    #3A7EA6;
  --steel-glow:    rgba(71,144,186,0.10);
  --steel-glow-s:  rgba(71,144,186,0.20);
  --sky:           #76B3D0;
  --sky-light:     #94C7DC;
  --sky-mist:      #B8D9EA;
  --navy:          #1B4B62;
  --navy-deep:     #153D52;
  --navy-dark:     #0F2E3F;
  --arrow:         #D4714A;

  --grad-steel:    linear-gradient(135deg, var(--steel), var(--sky));
  --grad-deep:     linear-gradient(135deg, var(--navy), var(--steel-deep));
  --grad-card:     linear-gradient(135deg, rgba(71,144,186,0.06), rgba(118,179,208,0.03));

  --bg:            #FAFCFE;
  --bg-warm:       #F4F7FB;
  --bg-soft:       #EDF2F7;
  --bg-card:       #FFFFFF;

  --border:        rgba(27,75,98,0.07);
  --border-hover:  rgba(71,144,186,0.35);
  --surface:       rgba(27,75,98,0.025);
  --surface-line:  rgba(27,75,98,0.06);

  --text-heading:  #1B4B62;
  --text-body:     #2D4456;
  --text-muted:    #4A6275;
  --text-dim:      #6E8694;
  --text-on-dark:  #E8F0F5;
  --text-on-dark-m:rgba(232,240,245,0.72);
  --text-on-dark-d:rgba(232,240,245,0.45);

  --sh-sm:         0 1px 4px rgba(27,75,98,0.04);
  --sh-card:       0 2px 20px rgba(27,75,98,0.05), 0 0 0 1px rgba(27,75,98,0.03);
  --sh-hover:      0 20px 50px rgba(27,75,98,0.10);
  --sh-glow:       0 0 32px rgba(71,144,186,0.12);
  --sh-float:      0 8px 30px rgba(27,75,98,0.07);

  --font-display:  'Outfit', system-ui, sans-serif;
  --font-body:     'Plus Jakarta Sans', system-ui, sans-serif;

  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.45, 0, 0.15, 1);

  --container:     1240px;
  --nav-h:         78px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:24px; --r-2xl:32px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:calc(var(--nav-h)+20px); }
body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-body);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--steel); color:#fff; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul, ol { list-style:none; }
.container { width:min(100% - 40px, var(--container)); margin:0 auto; }

#bgCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.18; }


/* ============================================================
   TYPOGRAPHY — Strong hierarchy
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.02em;
}
h1 { font-size:clamp(2.8rem, 5.5vw, 4.6rem); font-weight:800; letter-spacing:-0.035em; }
h2 { font-size:clamp(2rem, 4vw, 3.2rem); font-weight:700; letter-spacing:-0.03em; }
h3 { font-size:clamp(1.2rem, 1.8vw, 1.5rem); font-weight:600; }
h4 { font-size:1.1rem; font-weight:600; }

p { line-height:1.8; }

.eyebrow {
  font-family:var(--font-body);
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--steel);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.eyebrow::before {
  content:''; width:30px; height:2px;
  background:var(--grad-steel); border-radius:2px;
}

.accent-gradient {
  color:#2E8AB5;
  -webkit-text-fill-color:#2E8AB5;
}

.section-head { max-width:720px; margin-bottom:56px; }
.section-head h2 { margin-bottom:18px; }
.section-head p { font-size:1.08rem; line-height:1.85; color:#3A5266; font-weight:500; }


/* ============================================================
   BUTTONS — Gradient-driven
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:16px 32px; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:0.92rem;
  transition:all 0.4s var(--ease); position:relative; overflow:hidden; white-space:nowrap;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.20), transparent);
  opacity:0; transition:opacity 0.4s;
}
.btn:hover::after { opacity:1; }
.btn:hover { transform:translateY(-3px); }
.btn:active { transform:translateY(0); }

.btn-primary {
  background:var(--grad-steel); color:#fff;
  box-shadow:0 6px 28px rgba(71,144,186,0.25);
}
.btn-primary:hover { box-shadow:0 14px 40px rgba(71,144,186,0.35); }

.btn-secondary {
  color:var(--navy); background:var(--bg-card);
  border:1.5px solid var(--border); box-shadow:var(--sh-sm);
}
.btn-secondary:hover {
  border-color:var(--steel); color:var(--steel-deep);
  box-shadow:var(--sh-glow);
}

.btn-outline { background:transparent; color:var(--steel); border:1.5px solid var(--steel); }
.btn-outline:hover { background:var(--steel); color:#fff; }

.btn-arrow { width:16px; height:16px; transition:transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform:translateX(4px); }


/* ============================================================
   NAVIGATION — Solid header
   ============================================================ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); display:flex; align-items:center;
  background:var(--bg-warm); border-bottom:1px solid var(--border);
  transition:box-shadow 0.4s var(--ease-smooth);
}
.site-header.scrolled { box-shadow:0 2px 20px rgba(27,75,98,0.06); }

.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-logo { height:36px; width:auto; }

.desktop-nav { display:flex; align-items:center; gap:2px; }
.desktop-nav a {
  padding:8px 16px; font-size:0.88rem; font-weight:500;
  color:var(--text-muted); border-radius:var(--r-sm);
  transition:color 0.3s, background 0.3s; position:relative;
}
.desktop-nav a:hover { color:var(--navy); background:var(--surface); }
.desktop-nav a.active { color:var(--steel-deep); font-weight:600; }
.desktop-nav a.active::after {
  content:''; position:absolute; bottom:0; left:16px; right:16px;
  height:2px; background:var(--grad-steel); border-radius:2px;
}

.nav-actions { display:flex; align-items:center; gap:12px; }

.menu-toggle {
  display:none; width:44px; height:44px; border-radius:var(--r-sm);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.menu-toggle span { display:block; width:18px; height:2px; background:var(--navy); border-radius:2px; transition:all 0.35s var(--ease); }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-nav {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(255,255,255,0.98); backdrop-filter:blur(20px);
  padding:20px; border-bottom:1px solid var(--border);
  flex-direction:column; gap:4px; z-index:999;
  box-shadow:0 12px 40px rgba(27,75,98,0.06);
}
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:12px 16px; font-size:0.95rem; color:var(--text-body); border-radius:var(--r-sm); }
.mobile-nav a:hover { background:var(--bg-soft); color:var(--navy); }
.mobile-nav .btn { margin-top:12px; width:100%; }


/* ============================================================
   SECTIONS — Depth, layers, transitions
   ============================================================ */
.section {
  padding:130px 0;
  position:relative;
  z-index:1;
}

.section-alt {
  background:var(--bg-warm);
  position:relative;
}

/* Curved section separators */
.section-wave-top,
.section-wave-bottom {
  position:absolute;
  left:0; right:0;
  height:80px;
  overflow:hidden;
  z-index:2;
}
.section-wave-top { top:-1px; }
.section-wave-bottom { bottom:-1px; }
.section-wave-top svg,
.section-wave-bottom svg {
  width:100%; height:100%;
  display:block;
}

/* Gradient mesh backgrounds */
.section-mesh::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(71,144,186,0.04), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(118,179,208,0.03), transparent 40%);
  pointer-events:none;
}

/* Soft divider */
.section-divider {
  height:1px;
  background:linear-gradient(90deg, transparent 5%, var(--surface-line) 50%, transparent 95%);
  position:relative; z-index:1;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding-top:var(--nav-h);
  background-color:var(--bg);
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(250,252,254,0.96) 0%,
      rgba(250,252,254,0.90) 35%,
      rgba(250,252,254,0.35) 55%,
      rgba(250,252,254,0.08) 100%),
    linear-gradient(180deg,
      rgba(250,252,254,0.30) 0%,
      transparent 40%,
      transparent 70%,
      var(--bg-warm) 100%);
  z-index:1;
}
.hero-bg-image { display:none; }
.hero-bg-overlay { display:none; }

.hero-grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(71,144,186,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71,144,186,0.025) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 60% 40%, black 12%, transparent 55%);
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%, black 12%, transparent 55%);
  z-index:2;
  animation:gridDrift 40s linear infinite;
}
@keyframes gridDrift { 0% { background-position:0 0; } 100% { background-position:72px 72px; } }

.hero-content {
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:48px; align-items:center;
  padding:80px 0 100px;
}

.hero-copy h1 { margin-bottom:28px; line-height:1.05; }
.hero-copy h1 em { font-style:normal; }

.hero-text {
  font-size:1.14rem;
  line-height:1.9;
  color:#2D4456;
  max-width:520px;
  margin-bottom:40px;
  font-weight:500;
}

.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }

.hero-badges { display:flex; gap:10px; flex-wrap:wrap; }
.hero-badges span {
  padding:9px 20px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:999px;
  font-size:0.82rem; font-weight:600; color:#2D4456;
  box-shadow:var(--sh-sm); transition:all 0.4s var(--ease);
}
.hero-badges span:hover {
  border-color:var(--steel); color:var(--steel-deep);
  box-shadow:var(--sh-glow); transform:translateY(-2px);
}

/* Hero visual */
.hero-visual {
  position:relative; min-height:540px;
  display:flex; align-items:center; justify-content:center;
}

.hero-float-card {
  position:absolute;
  background:rgba(255,255,255,0.88); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:var(--r-lg); padding:18px 22px;
  box-shadow:var(--sh-float); z-index:10;
  animation:floatSmooth 7s ease-in-out infinite;
}
.hero-float-card.card-1 { top:6%; right:0; animation-delay:0s; }
.hero-float-card.card-2 { bottom:10%; left:-5%; animation-delay:2.5s; }
.hero-float-card.card-3 { top:55%; right:-6%; animation-delay:5s; }
@keyframes floatSmooth {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-14px) rotate(0.5deg); }
}
.hero-float-card .card-label {
  font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--steel); margin-bottom:4px;
}
.hero-float-card .card-value {
  font-family:var(--font-display); font-size:0.88rem;
  font-weight:600; color:var(--navy);
}

#heroGlobe {
  border-radius:var(--r-xl);
  overflow:hidden;
  opacity:0;
  transition:opacity 0.6s ease-out;
}
#heroGlobe.ready { opacity:1; }
#heroGlobe canvas { border-radius:var(--r-xl); }


/* ============================================================
   PREMIUM CARDS — Elevated, glowing, animated
   ============================================================ */
.premium-card {
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-2xl);
  padding:40px;
  box-shadow:var(--sh-card);
  transition:all 0.5s var(--ease);
  position:relative;
  overflow:hidden;
}

/* Gradient border glow on hover */
.premium-card::before {
  content:''; position:absolute; inset:-1.5px;
  background:var(--grad-steel);
  border-radius:var(--r-2xl);
  opacity:0;
  transition:opacity 0.5s var(--ease);
  z-index:-1;
}
.premium-card::after {
  content:''; position:absolute; inset:0;
  background:var(--bg-card);
  border-radius:calc(var(--r-2xl) - 1.5px);
  z-index:0;
}
.premium-card > * { position:relative; z-index:1; }

.premium-card:hover {
  border-color:transparent;
  box-shadow:var(--sh-hover), var(--sh-glow);
  transform:translateY(-10px);
}
.premium-card:hover::before { opacity:1; }

/* Icon wrap */
.card-icon-wrap {
  width:56px; height:56px; border-radius:16px;
  background:var(--grad-card);
  border:1px solid rgba(71,144,186,0.12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  transition:all 0.5s var(--ease);
}
.premium-card:hover .card-icon-wrap {
  background:var(--grad-steel);
  border-color:transparent;
  box-shadow:0 0 28px rgba(71,144,186,0.25);
  transform:scale(1.1) rotate(-5deg);
}
.card-icon-wrap svg {
  width:24px; height:24px; stroke:var(--steel);
  stroke-width:1.8; fill:none; transition:stroke 0.4s;
}
.premium-card:hover .card-icon-wrap svg { stroke:#fff; }

.premium-card h3 { margin-bottom:14px; font-size:1.2rem; }
.premium-card > p { font-size:0.94rem; line-height:1.8; color:#2D4456; font-weight:500; }

/* Capability reveal on hover */
.services-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }

.service-card .card-capabilities {
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--surface-line);
  max-height:0; overflow:hidden; opacity:0;
  transition:all 0.6s var(--ease);
}
.service-card:hover .card-capabilities,
.service-card.expanded .card-capabilities { max-height:300px; opacity:1; }

.card-capabilities .cap-title {
  font-size:0.7rem; font-weight:700; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:12px;
}
.card-capabilities ul { display:flex; flex-direction:column; gap:8px; }
.card-capabilities li {
  font-size:0.86rem; color:#2D4456; font-weight:500;
  padding-left:20px; position:relative;
}
.card-capabilities li::before {
  content:''; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%;
  background:var(--grad-steel);
}


/* ============================================================
   STATS — Dark immersive band
   ============================================================ */
.stats-section {
  position:relative; padding:120px 0; overflow:hidden;
  background-image:var(--stats-img);
  background-size:cover; background-position:center;
}
.stats-bg { display:none; }
.stats-bg img { display:none; }
.stats-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,46,63,0.84) 0%, rgba(15,46,63,0.78) 50%, rgba(15,46,63,0.84) 100%);
}

.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; position:relative; z-index:1; }
.stat-card {
  text-align:center; padding:40px 24px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--r-2xl);
  backdrop-filter:blur(12px);
  transition:all 0.5s var(--ease);
}
.stat-card:hover {
  background:rgba(255,255,255,0.08);
  border-color:rgba(71,144,186,0.30);
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 0 40px rgba(71,144,186,0.12);
}
.stat-number {
  font-family:var(--font-display); font-size:3.4rem; font-weight:800;
  background:var(--grad-steel);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; margin-bottom:12px;
}
.stat-label { font-size:0.88rem; color:var(--text-on-dark-d); font-weight:400; }

.stats-section .section-head h2 { color:var(--text-on-dark); }
.stats-section .section-head p { color:var(--text-on-dark-m); }
.stats-section .eyebrow { color:var(--sky-light); }
.stats-section .eyebrow::before { background:linear-gradient(90deg, var(--sky-light), var(--sky)); }


/* ============================================================
   WHY REIFYCORE — Differentiator section
   ============================================================ */
.why-section {
  padding:130px 0;
  position:relative;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(71,144,186,0.04), transparent 50%),
    var(--bg-warm);
}

.why-grid-full {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.why-card-v2 {
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-2xl);
  padding:36px 28px;
  text-align:center;
  box-shadow:var(--sh-card);
  transition:all 0.5s var(--ease);
  position:relative;
  overflow:hidden;
}
.why-card-v2::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:4px; background:var(--grad-steel);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.5s var(--ease);
}
.why-card-v2:hover {
  border-color:var(--border-hover);
  box-shadow:var(--sh-hover), var(--sh-glow);
  transform:translateY(-8px);
}
.why-card-v2:hover::before { transform:scaleX(1); }

.why-icon {
  width:60px; height:60px; margin:0 auto 20px;
  border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:var(--grad-card); border:1px solid rgba(71,144,186,0.10);
  transition:all 0.4s var(--ease);
}
.why-card-v2:hover .why-icon {
  background:var(--grad-steel);
  border-color:transparent;
  box-shadow:0 0 24px rgba(71,144,186,0.22);
  transform:scale(1.1);
}
.why-icon svg { width:26px; height:26px; stroke:var(--steel); stroke-width:1.8; fill:none; transition:stroke 0.3s; }
.why-card-v2:hover .why-icon svg { stroke:#fff; }
.why-card-v2 h4 { margin-bottom:10px; }
.why-card-v2 p { font-size:0.88rem; line-height:1.75; color:#2D4456; font-weight:500; }


/* ============================================================
   INDUSTRIES — Image cards with hover reveal
   ============================================================ */
.industries-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.industry-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); overflow:hidden;
  transition:all 0.5s var(--ease); box-shadow:var(--sh-card);
  position:relative;
}
.industry-card:hover {
  border-color:var(--border-hover);
  box-shadow:var(--sh-hover), var(--sh-glow);
  transform:translateY(-10px);
}
.industry-card-img { height:190px; overflow:hidden; position:relative; }
.industry-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.industry-card:hover .industry-card-img img { transform:scale(1.10); }
.industry-card-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(27,75,98,0.06) 100%);
}
.industry-card-body { padding:28px 28px 32px; }
.industry-card .ind-number {
  font-family:var(--font-display); font-size:0.72rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--steel); margin-bottom:8px;
}
.industry-card h3 { margin-bottom:12px; font-size:1.2rem; }
.industry-card p { font-size:0.90rem; color:#2D4456; line-height:1.75; font-weight:500; }

/* Hover reveal detail */
.industry-card .ind-hover-detail {
  margin-top:14px; max-height:0; overflow:hidden; opacity:0;
  transition:all 0.6s var(--ease);
}
.industry-card:hover .ind-hover-detail { max-height:400px; opacity:1; }
.ind-hover-detail h4 {
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--steel); margin:14px 0 8px;
}
.ind-hover-detail ul { display:flex; flex-direction:column; gap:6px; }
.ind-hover-detail li {
  font-size:0.84rem; color:#2D4456; font-weight:500;
  padding-left:16px; position:relative; line-height:1.5;
}
.ind-hover-detail li::before {
  content:''; position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--steel);
}


/* ============================================================
   Q-OPS — HERO-LEVEL PRODUCT SHOWCASE
   ============================================================ */
.qops-section {
  padding:140px 0;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(71,144,186,0.08), transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(118,179,208,0.05), transparent 40%),
    linear-gradient(150deg, #0F2E3F, #1B4B62, #153D52);
}
.qops-section::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(118,179,208,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,179,208,0.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
}

.qops-section .section-head { max-width:800px; text-align:center; margin:0 auto 60px; }
.qops-section .section-head h2 { color:var(--text-on-dark); font-size:clamp(2.2rem, 4.5vw, 3.6rem); }
.qops-section .section-head p { color:var(--text-on-dark-m); font-size:1.1rem; }
.qops-section .eyebrow { color:var(--sky-light); }
.qops-section .eyebrow::before { background:linear-gradient(90deg, var(--sky-light), var(--sky)); }

/* Phase flow — connected cards */
.qops-flow { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin-top:56px; position:relative; }
.qops-flow::before {
  content:''; position:absolute;
  top:50%; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(148,199,220,0.20), rgba(148,199,220,0.40), rgba(148,199,220,0.20), transparent);
  z-index:0;
}

.qops-phase {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-2xl);
  padding:36px 28px;
  backdrop-filter:blur(8px);
  transition:all 0.5s var(--ease);
  position:relative; z-index:1;
  margin:0 10px;
}
.qops-phase:hover {
  background:rgba(255,255,255,0.08);
  border-color:rgba(118,179,208,0.35);
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,0.20), 0 0 40px rgba(118,179,208,0.10);
}
.qops-phase .phase-num {
  font-family:var(--font-display); font-size:2.2rem; font-weight:800;
  background:var(--grad-steel); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:8px; line-height:1;
}
.qops-phase .phase-label {
  font-size:0.68rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--sky-light); margin-bottom:18px;
}
.qops-phase h3 { font-size:1.2rem; margin-bottom:20px; color:var(--text-on-dark); }
.qops-phase ul { display:flex; flex-direction:column; gap:10px; }
.qops-phase li {
  font-size:0.86rem; color:var(--text-on-dark-m);
  padding-left:20px; position:relative; line-height:1.55;
}
.qops-phase li::before {
  content:''; position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:50%;
  background:var(--sky-light);
}

.qops-benefits { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:56px; }
.qops-benefit {
  text-align:center; padding:32px 18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--r-xl); transition:all 0.4s var(--ease);
}
.qops-benefit:hover { border-color:rgba(118,179,208,0.25); transform:translateY(-5px); }
.qops-benefit .benefit-icon {
  width:56px; height:56px; margin:0 auto 16px;
  background:rgba(118,179,208,0.10); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.qops-benefit .benefit-icon svg { width:24px; height:24px; stroke:var(--sky-light); stroke-width:1.8; fill:none; }
.qops-benefit strong { display:block; color:var(--text-on-dark); font-size:0.92rem; margin-bottom:6px; }
.qops-benefit p { font-size:0.82rem; color:var(--text-on-dark-d); line-height:1.6; }

.pain-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:28px; }
.pain-item {
  padding:16px 18px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05); border-radius:var(--r-md);
  font-size:0.84rem; color:var(--text-on-dark-m); display:flex; align-items:center; gap:10px;
}
.pain-dot { width:8px; height:8px; min-width:8px; border-radius:50%; background:var(--arrow); }

.qops-model-flow {
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; margin-top:24px;
}
.qops-model-item {
  padding:14px 28px; background:rgba(118,179,208,0.10);
  border:1px solid rgba(118,179,208,0.20); border-radius:999px;
  font-weight:600; font-size:0.88rem; color:var(--sky-light);
}
.qops-model-arrow { color:var(--text-on-dark-d); font-size:1.2rem; }


/* ============================================================
   CAPABILITIES / TECH / ABOUT / CONTACT
   ============================================================ */
.capabilities-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
.capability-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); padding:40px; box-shadow:var(--sh-card);
  transition:all 0.5s var(--ease);
}
.capability-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-hover), var(--sh-glow); transform:translateY(-8px); }
.capability-card .cap-tag {
  display:inline-block; font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--steel); background:var(--steel-glow);
  padding:5px 14px; border-radius:999px; margin-bottom:18px;
}
.capability-card h3 { margin-bottom:14px; }
.capability-card p { font-size:0.9rem; line-height:1.8; }

.tech-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:14px; }
.tech-logo-card {
  text-align:center; padding:24px 12px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg-card); box-shadow:var(--sh-sm);
  transition:all 0.4s var(--ease);
  min-height:110px; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.tech-logo-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-hover), var(--sh-glow); transform:translateY(-5px); }
.tech-logo-img { height:32px; width:auto; margin:0 auto 10px; object-fit:contain; }
.tech-icon {
  width:44px; height:44px; margin:0 auto 10px; border-radius:var(--r-sm);
  background:var(--steel-glow); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem; color:var(--steel-deep);
}
.tech-logo-card span { font-size:0.76rem; font-weight:600; color:var(--text-dim); }

.about-statement { max-width:800px; margin:0 auto; text-align:center; }
.about-statement p { font-size:1.15rem; line-height:1.95; color:#2D4456; font-weight:500; }
.about-statement p + p { margin-top:18px; }

.vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vm-card {
  padding:44px; background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--sh-card); transition:all 0.5s var(--ease);
}
.vm-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-hover), var(--sh-glow); transform:translateY(-6px); }
.vm-card .vm-label {
  font-family:var(--font-display); font-size:0.76rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--steel); margin-bottom:18px;
}
.vm-card p { font-size:1rem; line-height:1.85; color:#2D4456; font-weight:500; }

.vm-dark .vm-card {
  background:var(--navy); border-color:rgba(255,255,255,0.06);
  box-shadow:0 4px 24px rgba(15,46,63,0.20);
}
.vm-dark .vm-card:hover { border-color:rgba(71,144,186,0.30); box-shadow:0 14px 44px rgba(15,46,63,0.28), var(--sh-glow); }
.vm-dark .vm-card .vm-label { color:var(--sky-light); }
.vm-dark .vm-card p { color:var(--text-on-dark-m); }
.vm-dark .section-head h2 { color:var(--text-on-dark); }
.vm-dark .eyebrow { color:var(--sky-light); }

.why-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.why-card-rich {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-card);
  transition:all 0.5s var(--ease);
}
.why-card-rich:hover {
  border-color:var(--steel); box-shadow:var(--sh-hover), 0 0 0 2px rgba(71,144,186,0.12);
  transform:translateY(-10px);
}
.why-card-rich-img { height:170px; overflow:hidden; position:relative; }
.why-card-rich-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.why-card-rich:hover .why-card-rich-img img { transform:scale(1.10); }
.why-card-rich-body { padding:28px; }
.why-card-rich-body h4 { margin-bottom:10px; }
.why-card-rich-body p { font-size:0.90rem; line-height:1.75; color:#2D4456; font-weight:500; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.82rem; font-weight:600; color:var(--text-body); }
.form-group input, .form-group textarea, .form-group select {
  padding:14px 18px; background:var(--bg-card);
  border:1.5px solid var(--surface-line); border-radius:var(--r-md);
  font-family:var(--font-body); font-size:0.9rem; color:var(--navy);
  transition:border-color 0.3s, box-shadow 0.3s; outline:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color:var(--steel); box-shadow:0 0 0 3px var(--steel-glow);
}
.form-group textarea { min-height:140px; resize:vertical; }
.contact-info-cards { display:flex; flex-direction:column; gap:16px; }
.contact-info-card {
  padding:28px; background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-card); transition:all 0.3s;
}
.contact-info-card:hover { border-color:var(--border-hover); }
.contact-info-card h4 { margin-bottom:6px; font-size:0.95rem; }
.contact-info-card p { font-size:0.88rem; }
.contact-info-card a { color:var(--steel); font-weight:500; }
.contact-highlight { background:var(--steel-glow); border-color:rgba(71,144,186,0.15); }

.careers-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.career-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); padding:40px; text-align:center;
  box-shadow:var(--sh-card); transition:all 0.5s var(--ease);
}
.career-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-hover), var(--sh-glow); transform:translateY(-8px); }
.career-icon {
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:var(--steel-glow); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; transition:all 0.4s var(--ease);
}
.career-card:hover .career-icon {
  background:var(--grad-steel); box-shadow:0 0 24px rgba(71,144,186,0.22);
  transform:scale(1.1) rotate(-5deg);
}
.career-card h3 { margin-bottom:10px; }
.career-card p { font-size:0.88rem; }

.culture-banner {
  background:radial-gradient(ellipse at 50% 50%, rgba(71,144,186,0.05), transparent 60%), linear-gradient(135deg, var(--navy-dark), var(--navy));
  border:1px solid rgba(255,255,255,0.05); border-radius:var(--r-2xl);
  padding:64px; text-align:center; margin-bottom:64px;
}
.culture-banner h2 { color:var(--text-on-dark); }
.culture-banner p { max-width:600px; margin:0 auto; font-size:1.05rem; line-height:1.8; color:var(--text-on-dark-m); }
.values-strip { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.values-strip span {
  padding:10px 22px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08); border-radius:999px;
  font-size:0.84rem; font-weight:500; color:var(--text-on-dark-m);
}


/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  padding:100px 0; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(71,144,186,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(118,179,208,0.05), transparent 40%),
    linear-gradient(150deg, #0F2E3F, #173F55);
  border-top:1px solid rgba(255,255,255,0.05);
}
.cta-band * { position:relative; z-index:1; }
.cta-band h2 { margin-bottom:18px; color:var(--text-on-dark); }
.cta-band p { margin-bottom:36px; color:var(--text-on-dark-m); max-width:600px; margin-left:auto; margin-right:auto; font-size:1.05rem; }
.cta-band .btn-primary {
  background:linear-gradient(135deg, #3A7EA6, #5A9EC5);
  box-shadow:0 6px 24px rgba(58,126,166,0.30);
}
.cta-band .btn-primary:hover { box-shadow:0 12px 36px rgba(58,126,166,0.40); }


/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero {
  padding:180px 0 100px; position:relative; overflow:hidden;
  background-color:var(--bg);
  background-image:var(--hero-img);
  background-size:cover; background-position:center right;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 30%, rgba(250,252,254,0.45) 50%, rgba(250,252,254,0.05) 100%),
    linear-gradient(180deg, rgba(250,252,254,0.40) 0%, transparent 50%, var(--bg-warm) 100%);
  z-index:0;
}
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { margin-bottom:20px; }
.page-hero > .container > p { font-size:1.12rem; color:#2D4456; max-width:640px; line-height:1.85; font-weight:500; }
.page-hero-image { display:none; }


/* ============================================================
   FOOTER — Light
   ============================================================ */
.site-footer {
  background:var(--bg-warm);
  border-top:1px solid var(--border);
  padding:80px 0 36px; position:relative; z-index:1;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
.footer-brand p { font-size:0.88rem; line-height:1.75; margin-top:18px; max-width:300px; color:var(--text-muted); }
.footer-col h5 {
  font-family:var(--font-body); font-weight:700; font-size:0.74rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-body); margin-bottom:22px;
}
.footer-col a { display:block; font-size:0.88rem; color:var(--text-muted); padding:4px 0; transition:color 0.3s; }
.footer-col a:hover { color:var(--steel); }
.footer-bottom {
  margin-top:52px; padding-top:28px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.8rem; color:var(--text-dim);
}


/* ============================================================
   SERVICE PAGE
   ============================================================ */
.service-group { margin-bottom:90px; }
.service-group:last-child { margin-bottom:0; }
.group-header { margin-bottom:40px; }
.group-header h2 { font-size:clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom:14px; }
.group-header > p { font-size:0.98rem; max-width:700px; line-height:1.85; }
.sub-services-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.sub-service-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); padding:36px; box-shadow:var(--sh-card);
  transition:all 0.5s var(--ease); cursor:pointer; position:relative; overflow:hidden;
}
.sub-service-card::before {
  content:''; position:absolute; inset:-1.5px;
  background:var(--grad-steel); border-radius:var(--r-2xl);
  opacity:0; transition:opacity 0.5s; z-index:-1;
}
.sub-service-card::after {
  content:''; position:absolute; inset:0;
  background:var(--bg-card); border-radius:calc(var(--r-2xl) - 1.5px); z-index:0;
}
.sub-service-card > * { position:relative; z-index:1; }
.sub-service-card:hover { border-color:transparent; box-shadow:var(--sh-hover), var(--sh-glow); transform:translateY(-6px); }
.sub-service-card:hover::before { opacity:1; }
.sub-service-card .card-id {
  display:inline-block; font-family:var(--font-display); font-size:0.68rem; font-weight:700;
  color:var(--steel); background:var(--steel-glow);
  padding:4px 14px; border-radius:999px; margin-bottom:14px;
}
.sub-service-card h4 { margin-bottom:12px; font-size:1.1rem; }
.sub-service-card .card-summary { font-size:0.88rem; line-height:1.8; }
.sub-service-card .card-detail {
  margin-top:18px; padding-top:18px; border-top:1px solid var(--surface-line);
  font-size:0.86rem; line-height:1.8; max-height:0; overflow:hidden; opacity:0;
  transition:all 0.6s var(--ease);
}
.sub-service-card:hover .card-detail, .sub-service-card.expanded .card-detail { max-height:400px; opacity:1; }

.service-group-dark {
  background:var(--navy); padding:80px 0;
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%);
  margin-bottom:90px;
}
.service-group-dark .group-header h2 { color:var(--text-on-dark); }
.service-group-dark .group-header > p { color:var(--text-on-dark-m); }
.service-group-dark .eyebrow { color:var(--sky-light); }
.service-group-dark .eyebrow::before { background:linear-gradient(90deg, var(--sky-light), var(--sky)); }
.service-group-dark .sub-service-card { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.07); box-shadow:none; }
.service-group-dark .sub-service-card:hover { background:rgba(255,255,255,0.07); border-color:rgba(118,179,208,0.30); box-shadow:0 0 30px rgba(118,179,208,0.10); }
.service-group-dark .sub-service-card h4 { color:var(--text-on-dark); }
.service-group-dark .sub-service-card .card-summary { color:var(--text-on-dark-m); }
.service-group-dark .sub-service-card .card-detail { color:var(--text-on-dark-m); border-top-color:rgba(255,255,255,0.06); }
.service-group-dark .sub-service-card .card-id { color:var(--sky-light); background:rgba(118,179,208,0.12); }


/* ============================================================
   INDUSTRY PAGE
   ============================================================ */
.industry-detail-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); padding:44px; box-shadow:var(--sh-card);
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  margin-bottom:28px; transition:all 0.5s var(--ease);
}
.industry-detail-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-hover), var(--sh-glow); }
.industry-detail-card .ind-num {
  font-family:var(--font-display); font-size:3.5rem; font-weight:800;
  background:linear-gradient(135deg, rgba(71,144,186,0.25), rgba(71,144,186,0.06));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1; margin-bottom:16px;
}
.industry-detail-card .ind-insight { font-size:0.92rem; line-height:1.85; }
.industry-detail-card .ind-right h4 { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--steel); margin-bottom:20px; }
.industry-detail-card .ind-right ul { display:flex; flex-direction:column; gap:12px; }
.industry-detail-card .ind-right li { font-size:0.88rem; padding-left:20px; position:relative; line-height:1.65; }
.industry-detail-card .ind-right li::before { content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--steel); }
.industry-details-list .industry-detail-card:last-child { margin-bottom:0; }

.industry-compact-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:32px; }
.industry-compact-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-sm); transition:all 0.4s var(--ease);
}
.industry-compact-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-glow); transform:translateY(-5px); }
.industry-compact-card h4 { margin-bottom:10px; }
.industry-compact-card p { font-size:0.86rem; }


/* ============================================================
   TECH SECTION LIGHT
   ============================================================ */
.tech-section-light { background:var(--bg-warm); padding:100px 0; }


/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal {
  opacity:0;
  transition:opacity 0.8s var(--ease-smooth);
}
.reveal.visible { opacity:1; }
.reveal-delay-1 { transition-delay:.07s; }
.reveal-delay-2 { transition-delay:.14s; }
.reveal-delay-3 { transition-delay:.21s; }
.reveal-delay-4 { transition-delay:.28s; }
.reveal-delay-5 { transition-delay:.35s; }
.reveal-delay-6 { transition-delay:.42s; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {
  .hero-content { grid-template-columns:1fr; gap:40px; }
  .hero-visual { min-height:380px; }
  .services-grid, .industries-grid { grid-template-columns:repeat(2, 1fr); }
  .stats-row { grid-template-columns:repeat(2, 1fr); }
  .why-grid, .careers-grid, .why-grid-full { grid-template-columns:repeat(2, 1fr); }
  .qops-flow { grid-template-columns:1fr; gap:20px; }
  .qops-flow::before { display:none; }
  .qops-phase { margin:0; }
  .qops-benefits { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:repeat(2, 1fr); }
  .tech-grid { grid-template-columns:repeat(4, 1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .industry-detail-card { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:768px) {
  :root { --nav-h:66px; }
  .container { width:min(100% - 28px, var(--container)); }
  .desktop-nav { display:none; }
  .nav-actions .btn { display:none; }
  .menu-toggle { display:flex; }
  .mobile-nav { display:none; }
  .mobile-nav.open { display:flex; }
  .hero { min-height:auto; padding-bottom:60px; }
  .hero-content { padding:40px 0; }
  .hero-visual { display:none; }
  .section { padding:90px 0; }
  .services-grid, .industries-grid, .why-grid, .capabilities-grid, .careers-grid, .why-grid-full { grid-template-columns:1fr; }
  .sub-services-grid, .industry-compact-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .vm-grid { grid-template-columns:1fr; }
  .tech-grid { grid-template-columns:repeat(3, 1fr); }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .page-hero { padding:130px 0 60px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .pain-grid { grid-template-columns:1fr; }
  .qops-model-flow { flex-direction:column; }
  .culture-banner { padding:40px 24px; }
}
@media (max-width:480px) {
  .stats-row { grid-template-columns:1fr; }
  .tech-grid { grid-template-columns:repeat(2, 1fr); }
  .qops-benefits { grid-template-columns:1fr; }
}



/* ============================================================
   GEN-Z MOTION ENGINE v4
   ============================================================ */

/* ── Hero word-by-word animation ── */
.words-animated .word-anim {
  display:inline-block;
  opacity:0;
  transform:translateY(18px) rotateX(20deg);
  animation:wordReveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes wordReveal {
  to { opacity:1; transform:none; }
}

/* ── Directional reveals ── */
.reveal-left { opacity:0; transition:opacity 0.9s var(--ease-smooth); }
.reveal-left.visible { opacity:1; }
.reveal-right { opacity:0; transition:opacity 0.9s var(--ease-smooth); }
.reveal-right.visible { opacity:1; }
.reveal-scale { opacity:0; transition:opacity 0.9s var(--ease-smooth); }
.reveal-scale.visible { opacity:1; }

/* ── Stagger items ── */
.stagger-item {
  opacity:0;
  transition:opacity 0.6s var(--ease-smooth);
}
.stagger-item.visible { opacity:1; }

/* ── Section mesh background motion ── */
.section-mesh::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at calc(20% + var(--mesh-shift, 0px)) 30%, rgba(71,144,186,0.05), transparent 50%),
    radial-gradient(ellipse at calc(80% - var(--mesh-shift, 0px)) 70%, rgba(118,179,208,0.04), transparent 40%);
  pointer-events:none;
}

/* ── Q-OPS Flow animation ── */
.qops-flow::before {
  content:''; position:absolute;
  top:50%; left:8%; right:8%; height:3px;
  background:linear-gradient(90deg, transparent, rgba(148,199,220,0.08), rgba(148,199,220,0.30), rgba(148,199,220,0.08), transparent);
  z-index:0;
  transform:scaleX(0); transform-origin:left;
  transition:transform 2s var(--ease-smooth);
}
.qops-flow.flow-active::before { transform:scaleX(1); }

.qops-phase::after {
  content:''; position:absolute;
  top:50%; right:-24px; width:48px; height:3px;
  background:linear-gradient(90deg, rgba(148,199,220,0.35), rgba(148,199,220,0.08));
  z-index:0; opacity:0; transition:opacity 0.6s 1s;
}
.qops-flow.flow-active .qops-phase::after { opacity:1; }
.qops-phase:last-child::after { display:none; }

.qops-phase:hover .phase-num { filter:drop-shadow(0 0 20px rgba(71,144,186,0.30)); }

/* ── Gradient border glow on premium cards ── */
.premium-card::after {
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(71,144,186,0.05), transparent 50%),
    var(--bg-card);
  border-radius:calc(var(--r-2xl) - 1.5px);
}

/* ── Button shimmer sweep ── */
.btn-primary::before {
  content:''; position:absolute;
  top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation:btnShimmer 4s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%, 100% { left:-100%; }
  50% { left:140%; }
}

/* ── Eyebrow line grow ── */
.reveal.visible .eyebrow::before,
.reveal-scale.visible .eyebrow::before,
.reveal-left.visible .eyebrow::before {
  animation:eyebrowGrow 0.8s var(--ease) forwards;
}
@keyframes eyebrowGrow { from { width:0; } to { width:30px; } }

/* ── Stat pulse on appear ── */
@keyframes statPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(71,144,186,0); }
  50% { box-shadow:0 0 24px 6px rgba(71,144,186,0.10); }
}

/* ── Why card icon rotate ── */
.why-card-v2:hover .why-icon { transform:scale(1.14) rotate(-10deg); }

/* ── Q-OPS benefit icon pulse ── */
.qops-benefit:hover .benefit-icon { animation:benefitPulse 0.5s ease-out; }
@keyframes benefitPulse { 0% { transform:scale(1); } 50% { transform:scale(1.18); } 100% { transform:scale(1.06); } }

/* ── Footer link underline ── */
.footer-col a { position:relative; }
.footer-col a::after {
  content:''; position:absolute; bottom:2px; left:0; right:0; height:1px;
  background:var(--steel); transform:scaleX(0); transform-origin:left;
  transition:transform 0.35s var(--ease);
}
.footer-col a:hover::after { transform:scaleX(1); }

/* ── Section smooth gradient transitions (no hard cuts) ── */
.section-alt {
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 12%, var(--bg-warm) 88%, var(--bg) 100%);
}

/* ── Smooth hover lift for all interactive cards ── */
.industry-card, .career-card, .why-card-rich, .why-card-v2 {
  transition:all 0.5s var(--ease);
}

/* ── Scroll progress bar style ── */
#scrollProgress { border-radius:0 2px 2px 0; }

/* ── Card hover glow ring ── */
.premium-card:hover, .capability-card:hover, .career-card:hover {
  box-shadow:var(--sh-hover), 0 0 0 1px var(--border-hover), var(--sh-glow);
}

/* ── Page load fade removed — was causing globe area flicker on navigation ── */

/* ── Career page specifics ── */
.career-perks-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.career-open-roles {
  margin-top:80px;
}
.role-card {
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-2xl);
  padding:36px;
  box-shadow:var(--sh-card);
  transition:all 0.5s var(--ease);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:16px;
}
.role-card:hover {
  border-color:var(--border-hover);
  box-shadow:var(--sh-hover), var(--sh-glow);
  transform:translateY(-4px);
}
.role-card-info h3 { margin-bottom:6px; }
.role-card-info p { font-size:0.90rem; color:#2D4456; font-weight:500; }
.role-tags {
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}
.role-tags span {
  font-size:0.72rem; font-weight:600;
  padding:4px 12px; border-radius:999px;
  background:var(--steel-glow); color:var(--steel);
  letter-spacing:0.04em;
}

/* Resume upload area */
.resume-upload {
  border:2px dashed var(--border);
  border-radius:var(--r-xl);
  padding:40px;
  text-align:center;
  transition:all 0.3s;
  cursor:pointer;
  background:var(--bg-warm);
}
.resume-upload:hover {
  border-color:var(--steel);
  background:var(--steel-glow);
}
.resume-upload.dragover {
  border-color:var(--steel);
  background:rgba(71,144,186,0.08);
  transform:scale(1.01);
}
.resume-upload svg { margin:0 auto 16px; }
.resume-upload p { font-size:0.92rem; color:#2D4456; font-weight:500; }
.resume-upload .upload-hint { font-size:0.8rem; color:var(--text-dim); margin-top:8px; }
.file-name-display {
  margin-top:12px; font-size:0.88rem; font-weight:600; color:var(--steel);
  display:none;
}
.file-name-display.active { display:block; }

@media (max-width:768px) {
  .career-perks-grid { grid-template-columns:1fr; }
  .role-card { flex-direction:column; align-items:flex-start; }
}


/* ============================================================
   GEN-Z ANIMATIONS v2
   ============================================================ */

/* ── Scroll-triggered counter spin ── */
@keyframes countSpin {
  0% { transform:rotateX(90deg); opacity:0; }
  100% { transform:rotateX(0deg); opacity:1; }
}
.stat-card.visible .stat-number {
  animation:countSpin 0.8s var(--ease) forwards;
}

/* ── Card entrance stagger with scale bounce ── */
@keyframes cardPop {
  0% { transform:translateY(40px) scale(0.95); opacity:0; }
  60% { transform:translateY(-6px) scale(1.02); opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
.premium-card.visible,
.why-card-v2.visible,
.industry-card.visible,
.career-card.visible {
  animation:cardPop 0.7s var(--ease) forwards;
}

/* ── Text scramble effect on hero headline ── */
@keyframes textGlow {
  0%, 100% { text-shadow:0 0 0 transparent; }
  50% { text-shadow:0 0 20px rgba(46,138,181,0.15); }
}
.hero-copy h1 {
  animation:textGlow 4s ease-in-out infinite;
}

/* ── Floating particles around sections ── */
@keyframes drift {
  0%, 100% { transform:translate(0, 0) rotate(0deg); opacity:0.3; }
  25% { transform:translate(20px, -30px) rotate(90deg); opacity:0.6; }
  50% { transform:translate(-10px, -60px) rotate(180deg); opacity:0.4; }
  75% { transform:translate(30px, -40px) rotate(270deg); opacity:0.5; }
}

/* ── Hover card tilt with glow trail ── */
.premium-card:hover,
.why-card-v2:hover,
.sub-service-card:hover {
  box-shadow:
    var(--sh-hover),
    0 0 40px rgba(71,144,186,0.10),
    0 0 80px rgba(71,144,186,0.05);
}

/* ── Smooth gradient text shimmer ── */
@keyframes gradientShift {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.accent-gradient {
  background-size:200% auto;
  animation:gradientShift 6s ease infinite;
}

/* ── Section entrance — clip reveal ── */
@keyframes clipReveal {
  from { clip-path:inset(0 0 100% 0); }
  to { clip-path:inset(0 0 0 0); }
}

/* ── Badge hover pop ── */
.hero-badges span:hover {
  transform:translateY(-4px) scale(1.05);
}

/* ── Magnetic pull on nav links ── */
.desktop-nav a {
  transition:color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.desktop-nav a:hover {
  transform:translateY(-1px);
}

/* ── Smooth scroll indicator pulse ── */
@keyframes scrollPulse {
  0%, 100% { transform:translateY(0); opacity:0.6; }
  50% { transform:translateY(8px); opacity:1; }
}
.scroll-indicator {
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--text-dim);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.scroll-indicator .scroll-arrow {
  width:20px;
  height:20px;
  border-right:2px solid var(--steel);
  border-bottom:2px solid var(--steel);
  transform:rotate(45deg);
  animation:scrollPulse 2s ease-in-out infinite;
}

/* ── Q-OPS phase number counter animation ── */
@keyframes phaseCount {
  0% { transform:translateY(20px) scale(0.8); opacity:0; }
  60% { transform:translateY(-4px) scale(1.05); }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
.qops-flow.flow-active .qops-phase .phase-num {
  animation:phaseCount 0.6s var(--ease) forwards;
}
.qops-flow.flow-active .qops-phase:nth-child(2) .phase-num { animation-delay:0.3s; }
.qops-flow.flow-active .qops-phase:nth-child(3) .phase-num { animation-delay:0.6s; }

/* ── CTA band background motion ── */
@keyframes ctaGlow {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.cta-band::before {
  background-size:200% 200%;
  animation:ctaGlow 12s ease infinite;
}

/* ── Icon rotation on service card hover ── */
.premium-card:hover .card-icon-wrap svg {
  animation:iconSpin 0.5s var(--ease);
}
@keyframes iconSpin {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(-15deg); }
  100% { transform:rotate(0deg); }
}

/* ── Industry card image zoom pulse ── */
.industry-card:hover .industry-card-img img {
  animation:imgPulse 0.6s ease-out;
}
@keyframes imgPulse {
  0% { transform:scale(1); }
  50% { transform:scale(1.12); }
  100% { transform:scale(1.10); }
}

/* ── Smooth link underline grow from center ── */
.desktop-nav a::after {
  content:'';
  position:absolute;
  bottom:0; left:50%; right:50%;
  height:2px;
  background:var(--grad-steel);
  border-radius:2px;
  transition:left 0.3s var(--ease), right 0.3s var(--ease);
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  left:16px; right:16px;
}

/* ── Career page specific ── */
.career-values-strip {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:32px;
}
.career-values-strip span {
  padding:12px 24px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  font-size:0.86rem; font-weight:500;
  color:var(--text-on-dark-m);
  transition:all 0.4s var(--ease);
}
.career-values-strip span:hover {
  background:rgba(71,144,186,0.10);
  border-color:rgba(71,144,186,0.25);
  transform:translateY(-3px);
  color:var(--sky-light);
}

.career-perks-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.resume-section {
  background:var(--bg-warm);
  padding:100px 0;
}
.resume-card {
  max-width:680px;
  margin:0 auto;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-2xl);
  padding:48px;
  box-shadow:var(--sh-card);
}
.resume-card h3 { text-align:center; margin-bottom:8px; }
.resume-card > p { text-align:center; color:var(--text-muted); margin-bottom:32px; }

.file-upload-area {
  border:2px dashed var(--surface-line);
  border-radius:var(--r-lg);
  padding:40px;
  text-align:center;
  transition:all 0.4s var(--ease);
  cursor:pointer;
  margin-bottom:20px;
}
.file-upload-area:hover {
  border-color:var(--steel);
  background:var(--steel-glow);
}
.file-upload-area.dragover {
  border-color:var(--steel);
  background:var(--steel-glow-s);
  transform:scale(1.02);
}
.file-upload-area svg {
  width:40px; height:40px;
  stroke:var(--steel); stroke-width:1.5; fill:none;
  margin:0 auto 12px; display:block;
}
.file-upload-area p { color:var(--text-muted); font-size:0.9rem; }
.file-upload-area .upload-hint { font-size:0.78rem; color:var(--text-dim); margin-top:6px; }
.file-name { font-size:0.86rem; color:var(--steel); font-weight:600; margin-top:8px; }

@media (max-width:768px) {
  .career-perks-grid { grid-template-columns:1fr; }
  .resume-card { padding:32px 24px; }
  .scroll-indicator { display:none; }
}


/* ── Apply Now nav button — high contrast ── */
.desktop-nav .btn.btn-primary {
  background:linear-gradient(135deg, #2E7DA8, #4790BA);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 16px rgba(46,125,168,0.30);
  border:none;
  letter-spacing:0.02em;
}
.desktop-nav .btn.btn-primary:hover {
  background:linear-gradient(135deg, #256A92, #3A7EA6);
  box-shadow:0 6px 24px rgba(46,125,168,0.40);
  transform:translateY(-2px);
}

/* ── Career page animations ── */
.career-form-wrapper {
  position:relative;
}

/* Animated form field focus */
.career-form-wrapper .form-group input:focus,
.career-form-wrapper .form-group textarea:focus,
.career-form-wrapper .form-group select:focus {
  border-color:var(--steel);
  box-shadow:0 0 0 3px var(--steel-glow), 0 4px 16px rgba(71,144,186,0.08);
  transform:translateY(-1px);
  transition:all 0.3s var(--ease);
}

/* Stagger form fields */
.career-form-wrapper .form-group,
.career-form-wrapper .form-row {
  opacity:0;
  transform:translateY(20px);
  animation:formFieldIn 0.6s var(--ease) forwards;
}
.career-form-wrapper .form-group:nth-child(1),
.career-form-wrapper .form-row:nth-child(1) { animation-delay:0.1s; }
.career-form-wrapper .form-group:nth-child(2),
.career-form-wrapper .form-row:nth-child(2) { animation-delay:0.2s; }
.career-form-wrapper .form-group:nth-child(3) { animation-delay:0.3s; }
.career-form-wrapper .form-group:nth-child(4) { animation-delay:0.4s; }
.career-form-wrapper .form-group:nth-child(5) { animation-delay:0.5s; }
.career-form-wrapper .form-group:nth-child(6) { animation-delay:0.6s; }
.career-form-wrapper .form-group:nth-child(7) { animation-delay:0.7s; }
.career-form-wrapper .form-group:nth-child(8) { animation-delay:0.8s; }
.career-form-wrapper .form-group:nth-child(9) { animation-delay:0.9s; }

@keyframes formFieldIn {
  to { opacity:1; transform:none; }
}

/* Submit button pulse glow */
.career-submit-btn {
  position:relative;
  overflow:hidden;
}
.career-submit-btn::before {
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, #2E7DA8, #4790BA, #76B3D0, #4790BA, #2E7DA8);
  background-size:300% 300%;
  border-radius:999px;
  z-index:-1;
  animation:submitGlow 3s ease infinite;
  opacity:0.6;
  filter:blur(4px);
}
@keyframes submitGlow {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

/* Info cards slide in from right with stagger */
.career-info-stagger .contact-info-card {
  opacity:0;
  transform:translateX(30px);
  animation:infoSlideIn 0.6s var(--ease) forwards;
}
.career-info-stagger .contact-info-card:nth-child(1) { animation-delay:0.2s; }
.career-info-stagger .contact-info-card:nth-child(2) { animation-delay:0.35s; }
.career-info-stagger .contact-info-card:nth-child(3) { animation-delay:0.50s; }
.career-info-stagger .contact-info-card:nth-child(4) { animation-delay:0.65s; }
.career-info-stagger .contact-info-card:nth-child(5) { animation-delay:0.80s; }

@keyframes infoSlideIn {
  to { opacity:1; transform:none; }
}

/* Resume upload — animated border */
.resume-upload {
  position:relative;
}
.resume-upload::before {
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, var(--steel), var(--sky), var(--steel));
  background-size:200% 200%;
  border-radius:calc(var(--r-xl) + 2px);
  z-index:-1;
  opacity:0;
  animation:uploadBorderSpin 4s linear infinite;
  transition:opacity 0.3s;
}
.resume-upload:hover::before {
  opacity:0.5;
}
@keyframes uploadBorderSpin {
  0% { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}

/* Upload icon bounce on hover */
.resume-upload:hover svg {
  animation:uploadBounce 0.5s ease;
}
@keyframes uploadBounce {
  0%, 100% { transform:translateY(0); }
  40% { transform:translateY(-8px); }
  60% { transform:translateY(-3px); }
}

/* ── Force Apply Now button visibility ── */
.desktop-nav .btn.btn-primary,
.mobile-nav .btn.btn-primary,
nav .btn.btn-primary {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-weight:700 !important;
  background:linear-gradient(135deg, #2A6F96, #3A82AD) !important;
  box-shadow:0 4px 18px rgba(42,111,150,0.35);
  border:none;
  letter-spacing:0.03em;
  text-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.desktop-nav .btn.btn-primary:hover,
.mobile-nav .btn.btn-primary:hover {
  background:linear-gradient(135deg, #225D80, #2E7DA8) !important;
  box-shadow:0 8px 28px rgba(42,111,150,0.45);
  transform:translateY(-3px);
}


/* ============================================================
   GEN-Z CARD ANIMATIONS — Careers, Contact, Q-OPS, Tech
   ============================================================ */

/* ── Info card hover glow + lift ── */
.contact-info-card {
  transition:all 0.5s var(--ease);
  position:relative;
  overflow:hidden;
}
.contact-info-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:var(--grad-steel);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s var(--ease);
}
.contact-info-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--sh-hover), var(--sh-glow);
  border-color:var(--border-hover);
}
.contact-info-card:hover::before {
  transform:scaleX(1);
}

/* ── Q-OPS pain grid items — stagger pop-in ── */
.pain-item {
  transition:all 0.4s var(--ease);
}
.pain-item:hover {
  transform:translateY(-4px) scale(1.02);
  border-color:rgba(212,113,74,0.35);
  background:rgba(255,255,255,0.06);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.pain-item .pain-dot {
  transition:transform 0.3s var(--ease);
}
.pain-item:hover .pain-dot {
  transform:scale(1.4);
  box-shadow:0 0 8px rgba(212,113,74,0.50);
}

/* ── Q-OPS phase cards — glow border on hover ── */
.qops-phase {
  position:relative;
  overflow:hidden;
}
.qops-phase::before {
  content:'';
  position:absolute; inset:-1px;
  background:linear-gradient(135deg, rgba(148,199,220,0.40), rgba(71,144,186,0.20), rgba(148,199,220,0.40));
  background-size:200% 200%;
  border-radius:var(--r-2xl);
  opacity:0;
  transition:opacity 0.5s;
  z-index:-1;
  animation:phaseGlowSpin 3s linear infinite;
}
.qops-phase:hover::before { opacity:1; }

@keyframes phaseGlowSpin {
  0% { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}

/* Q-OPS benefit cards — pop on scroll */
.qops-benefit {
  transition:all 0.5s var(--ease);
}
.qops-benefit:hover {
  transform:translateY(-8px);
  border-color:rgba(118,179,208,0.35);
  background:rgba(255,255,255,0.08);
  box-shadow:0 12px 32px rgba(0,0,0,0.15), 0 0 24px rgba(118,179,208,0.08);
}

/* ── Tech logo cards — stagger float-up + hover effects ── */
.tech-logo-card {
  transition:all 0.5s var(--ease);
  position:relative;
  overflow:hidden;
}
.tech-logo-card::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(71,144,186,0.06), transparent 60%);
  opacity:0;
  transition:opacity 0.3s;
}
.tech-logo-card:hover::after { opacity:1; }
.tech-logo-card:hover {
  transform:translateY(-8px) scale(1.04);
  border-color:var(--border-hover);
  box-shadow:0 16px 40px rgba(27,75,98,0.10), 0 0 20px rgba(71,144,186,0.08);
}
.tech-logo-card:hover .tech-logo-img,
.tech-logo-card:hover .tech-icon {
  transform:scale(1.15) rotate(-3deg);
  transition:transform 0.4s var(--ease);
}
.tech-logo-img, .tech-icon {
  transition:transform 0.4s var(--ease);
}

/* ── Scroll-triggered stagger classes (applied by JS) ── */
.stagger-pop {
  opacity:0;
  transform:translateY(28px) scale(0.95);
  transition:opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
.stagger-pop.visible {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ── Q-OPS model flow items — pulse on appear ── */
.qops-model-item {
  transition:all 0.4s var(--ease);
}
.qops-model-item:hover {
  background:rgba(118,179,208,0.20);
  border-color:rgba(118,179,208,0.40);
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(118,179,208,0.15);
}


/* ============================================================
   GEN-Z COOL ANIMATIONS — Cards, Boxes, Logos
   ============================================================ */

/* ── Contact & Career info cards — float in with stagger ── */
.contact-info-cards .contact-info-card {
  transition:all 0.5s var(--ease);
}
.contact-info-cards .contact-info-card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:var(--sh-hover), var(--sh-glow);
  border-color:var(--border-hover);
}

/* ── Q-OPS pain grid items — pulse border on hover ── */
.pain-item {
  transition:all 0.4s var(--ease);
  position:relative;
  overflow:hidden;
}
.pain-item::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(212,113,74,0.06), transparent 60%);
  opacity:0;
  transition:opacity 0.4s;
}
.pain-item:hover {
  transform:translateY(-4px) scale(1.03);
  border-color:rgba(212,113,74,0.30);
  box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 0 20px rgba(212,113,74,0.08);
}
.pain-item:hover::before { opacity:1; }
.pain-item:hover .pain-dot {
  animation:dotPulse 0.8s ease infinite;
}
@keyframes dotPulse {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(212,113,74,0.4); }
  50% { transform:scale(1.3); box-shadow:0 0 0 6px rgba(212,113,74,0); }
}

/* ── Q-OPS phase cards — glow border sweep ── */
.qops-phase {
  position:relative;
  overflow:hidden;
}
.qops-phase::before {
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:conic-gradient(from 0deg, transparent, rgba(148,199,220,0.12), transparent 30%);
  animation:phaseSweep 6s linear infinite;
  opacity:0;
  transition:opacity 0.5s;
}
.qops-phase:hover::before { opacity:1; }
@keyframes phaseSweep {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

/* ── Q-OPS benefit cards — bounce in ── */
.qops-benefit {
  transition:all 0.4s var(--ease);
}
.qops-benefit:hover {
  transform:translateY(-8px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(148,199,220,0.30);
  box-shadow:0 12px 32px rgba(0,0,0,0.15), 0 0 24px rgba(118,179,208,0.10);
}

/* ── Tech logo cards — wave stagger + hover float ── */
.tech-logo-card {
  transition:all 0.5s var(--ease);
  position:relative;
  overflow:hidden;
}
.tech-logo-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:var(--grad-steel);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 0.4s var(--ease);
}
.tech-logo-card:hover::after { transform:scaleX(1); }
.tech-logo-card:hover {
  transform:translateY(-8px) scale(1.05);
  box-shadow:var(--sh-hover), 0 0 28px rgba(71,144,186,0.10);
  border-color:var(--border-hover);
}
.tech-logo-card:hover .tech-logo-img,
.tech-logo-card:hover .tech-icon {
  animation:logoFloat 0.6s ease;
}
@keyframes logoFloat {
  0% { transform:translateY(0); }
  40% { transform:translateY(-8px) scale(1.08); }
  100% { transform:translateY(0) scale(1); }
}

/* Wave stagger for tech grid (applied via JS) */
.tech-logo-card.wave-in {
  animation:waveIn 0.6s var(--ease) forwards;
}
@keyframes waveIn {
  from { opacity:0; transform:translateY(30px) scale(0.9); }
  to { opacity:1; transform:none; }
}

/* ── Q-OPS model flow items — pill hover ── */
.qops-model-item {
  transition:all 0.4s var(--ease);
  position:relative;
  overflow:hidden;
}
.qops-model-item::before {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(148,199,220,0.15), transparent);
  transition:none;
  animation:pillSweep 3s ease-in-out infinite;
}
@keyframes pillSweep {
  0%, 100% { left:-100%; }
  50% { left:100%; }
}
.qops-model-item:hover {
  transform:translateY(-4px) scale(1.06);
  background:rgba(148,199,220,0.18);
  border-color:rgba(148,199,220,0.40);
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

/* ── Contact page info cards — tilt on hover ── */
.contact-info-card {
  transition:all 0.4s var(--ease);
  position:relative;
  overflow:hidden;
}
.contact-info-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(71,144,186,0.06), transparent 60%);
  opacity:0;
  transition:opacity 0.3s;
}
.contact-info-card:hover::before { opacity:1; }
.contact-info-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--sh-hover), var(--sh-glow);
  border-color:var(--border-hover);
}

/* ── Enterprise Consulting card special glow ── */
.contact-highlight {
  position:relative;
}
.contact-highlight::after {
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, var(--steel), var(--sky), var(--steel));
  background-size:200% 200%;
  border-radius:inherit;
  z-index:-1;
  animation:consultGlow 4s ease infinite;
  opacity:0.35;
}
@keyframes consultGlow {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}


/* ============================================================
   CAREER INFO CARDS — Cool stagger entrance
   ============================================================ */
.career-info-stagger .contact-info-card,
.contact-info-cards .contact-info-card {
  opacity:0;
  transform:translateX(40px) scale(0.95);
}

/* When parent becomes visible via JS */
.career-info-stagger.animated .contact-info-card,
.contact-info-cards.animated .contact-info-card {
  opacity:1;
  transform:translateX(0) scale(1);
  transition:all 0.7s cubic-bezier(0.16,1,0.3,1);
}

.career-info-stagger.animated .contact-info-card:nth-child(1),
.contact-info-cards.animated .contact-info-card:nth-child(1) { transition-delay:0.1s; }
.career-info-stagger.animated .contact-info-card:nth-child(2),
.contact-info-cards.animated .contact-info-card:nth-child(2) { transition-delay:0.22s; }
.career-info-stagger.animated .contact-info-card:nth-child(3),
.contact-info-cards.animated .contact-info-card:nth-child(3) { transition-delay:0.34s; }
.career-info-stagger.animated .contact-info-card:nth-child(4),
.contact-info-cards.animated .contact-info-card:nth-child(4) { transition-delay:0.46s; }
.career-info-stagger.animated .contact-info-card:nth-child(5),
.contact-info-cards.animated .contact-info-card:nth-child(5) { transition-delay:0.58s; }

/* Card hover — magnetic lift + glow trail */
.contact-info-card:hover {
  transform:translateY(-8px) scale(1.02) !important;
  box-shadow:0 20px 40px rgba(27,75,98,0.10), 0 0 30px rgba(71,144,186,0.08) !important;
  border-color:var(--border-hover) !important;
}

/* Left border accent that slides in */
.contact-info-card::after {
  content:'';
  position:absolute;
  top:12px; bottom:12px; left:0;
  width:3px;
  background:var(--grad-steel);
  border-radius:0 3px 3px 0;
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 0.5s var(--ease);
}
.contact-info-card:hover::after {
  transform:scaleY(1);
}

/* ── Page hero — word-by-word animation (same as home) ── */
.page-hero h1.words-animated .word-anim {
  display:inline-block;
  opacity:0;
  transform:translateY(20px) rotateX(20deg);
  animation:wordReveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}


/* ── Career/Contact info cards — visible stagger animation ── */
.info-cards-animated .contact-info-card {
  opacity:0;
  transform:translateY(30px) scale(0.95);
}
.info-cards-animated.visible .contact-info-card {
  animation:cardPopIn 0.6s var(--ease) forwards;
}
.info-cards-animated.visible .contact-info-card:nth-child(1) { animation-delay:0.1s; }
.info-cards-animated.visible .contact-info-card:nth-child(2) { animation-delay:0.22s; }
.info-cards-animated.visible .contact-info-card:nth-child(3) { animation-delay:0.34s; }
.info-cards-animated.visible .contact-info-card:nth-child(4) { animation-delay:0.46s; }
.info-cards-animated.visible .contact-info-card:nth-child(5) { animation-delay:0.58s; }
.info-cards-animated.visible .contact-info-card:nth-child(6) { animation-delay:0.70s; }

@keyframes cardPopIn {
  0% { opacity:0; transform:translateY(30px) scale(0.95); }
  60% { opacity:1; transform:translateY(-6px) scale(1.02); }
  100% { opacity:1; transform:none; }
}

/* ── Inner page hero word animation ── */
.page-hero h1 .word-anim {
  display:inline-block;
  opacity:0;
  transform:translateY(22px) rotateX(25deg);
  animation:wordReveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Inner page hero text stagger ── */
.page-hero .eyebrow {
  opacity:0;
  animation:heroEyebrowIn 0.7s var(--ease) 0.1s forwards;
}
.page-hero .eyebrow.eyebrow-typed {
  animation:none;
  opacity:1;
}
.page-hero h1 {
  opacity:0;
  animation:heroTitleIn 0.01s linear 0.05s forwards;
}
.page-hero > .container > p {
  opacity:0;
  animation:heroParagraphIn 0.8s var(--ease) 0.8s forwards;
}

@keyframes heroEyebrowIn {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:none; }
}
@keyframes heroTitleIn {
  to { opacity:1; }
}
@keyframes heroParagraphIn {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:none; }
}

/* ── Typed eyebrow cursor blink ── */
.eyebrow-typed {
  font-variant-numeric:tabular-nums;
}


/* ============================================================
   SETTLED STATE — drops elements off GPU layer for crisp text
   ============================================================ */
.settled {
  animation:none !important;
  transform:none !important;
  will-change:auto !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.settled * {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* ============================================================
   GLOBAL FONT SMOOTHING — applied to every element
   ============================================================ */
* {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Cloud Engineering Card — Gen-Z animations ── */
.sub-service-card { position:relative; overflow:hidden; }
.sub-service-card::before {
  content:''; position:absolute; inset:-2px;
  background:conic-gradient(from 0deg, transparent, var(--steel), var(--sky), transparent 30%);
  border-radius:inherit; z-index:-1; opacity:0;
  animation:cloudBorderSpin 4s linear infinite;
  transition:opacity 0.5s;
}
.sub-service-card:hover::before { opacity:0.7; }
@keyframes cloudBorderSpin { to { transform:rotate(360deg); } }
.sub-service-card:hover {
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 24px 60px rgba(71,144,186,0.18), 0 0 40px rgba(118,179,208,0.20);
}
.sub-service-card .card-icon-wrap svg {
  animation:cloudFloat 3s ease-in-out infinite;
}
@keyframes cloudFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
.sub-service-card::after {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(118,179,208,0.10), transparent);
  animation:cloudFlow 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cloudFlow {
  0%,100% { left:-100%; } 50% { left:100%; }
}

/* ── Force-reset managed-services to standard light alignment ── */
.service-group#managed-services {
  background:transparent;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  padding-bottom:0;
}