/*
 * Locked SOLVINTAL homepage palette.
 * UI colour sources are limited to:
 * #FCFDFF Cool White, #1A1A2E SOLVINTAL Navy and #4A90E2 SOLVINTAL Blue,
 * with #F8F9FA reserved for approved light section and card surfaces.
 * Transparent variants use the same sources.
 * Homepage CTAs intentionally match the shared About page treatment:
 * #2F75D5 normal, #2364BA hover and #FFFFFF text. Software service icon
 * tiles also use the approved CTA blue with white glyphs.
 * Photography, the crystalline hero artwork and official technology logos
 * retain their native asset colours.
 */

.homepage {
  --home-cool-white: #FCFDFF;
  --home-soft-section-bg: #F8F9FA;
  --home-navy: #1A1A2E;
  --home-blue: #4A90E2;
  --page-bg: var(--home-cool-white);
  --ink: var(--home-navy);
  --blue: var(--home-blue);
  --accent: var(--home-blue);
  --muted: var(--home-navy);
  --rule: #4A90E252;
  --brand-navy: var(--home-navy);
  --brand-blue: var(--home-blue);
  --brand-blue-deep: var(--home-blue);
  --brand-ice: var(--home-cool-white);
  --brand-mist: var(--home-cool-white);
  --brand-line: #4A90E252;
  background: var(--home-cool-white);
  color: var(--home-navy);
}

.homepage main,
.homepage .home-sections,
.homepage .home-sections > .page-section { background-color: var(--home-cool-white); }
.homepage :focus-visible { outline-color: var(--home-blue); }

/* Header, hero and service navigation */
.homepage .hero { background: var(--home-cool-white); }
.homepage .site-header,
.homepage:not(.is-scrolled) .site-header,
.homepage.is-scrolled .site-header {
  background: var(--home-cool-white);
  box-shadow: 0 1px 0 #4A90E252;
}
.homepage:not(.is-scrolled) .site-header { box-shadow: none; }
.homepage .site-header .contact-cta {
  border-color: #2F75D5;
  background: #2F75D5;
  color: #FFFFFF;
  box-shadow: 0 8px 20px #1A1A2E24;
}
.homepage .site-header .contact-cta:hover {
  border-color: #2364BA;
  background: #2364BA;
  color: #FFFFFF;
  box-shadow: 0 10px 24px #1A1A2E30;
}
.homepage .service-nav {
  border-color: #4A90E27A;
  background: var(--home-cool-white);
  box-shadow: 0 14px 28px -20px #1A1A2E40;
}
.homepage .service-nav a { color: var(--home-navy); }
.homepage .service-nav a + a::before { background: #4A90E252; }
.homepage .service-label::after { background: var(--home-blue); }
.homepage .service-nav a:hover,
.homepage .service-nav a:focus-visible {
  color: var(--home-navy);
  background: #4A90E21A;
}
/* Shared homepage typography and controls */
.homepage .eyebrow,
.homepage .accent { color: var(--home-blue); }
.homepage .section-title { color: var(--home-navy); }
.homepage .body-copy { color: var(--home-navy); }
.homepage .text-link { color: var(--home-navy); }
.homepage :is(.software-summary .text-link, .staff-cta.text-link) {
  border-color: #2F75D5;
  background: #2F75D5;
  color: #FFFFFF;
  box-shadow: 0 8px 18px #1A1A2E1F;
}
.homepage :is(.software-summary .text-link, .staff-cta.text-link):hover {
  border-color: #2364BA;
  background: #2364BA;
  color: #FFFFFF;
  box-shadow: 0 10px 22px #1A1A2E29;
}

/* 01: contained Navy Difference panel on the Cool White canvas */
.homepage .home-sections > .difference { background: var(--home-cool-white); }
.homepage .difference-panel {
  border: 1px solid var(--home-blue);
  border-radius: 22px;
  background: var(--home-navy);
  color: var(--home-cool-white);
  box-shadow: 0 24px 52px -38px #1A1A2EA6;
}
.homepage .difference-panel::before { background: transparent; }
.homepage .difference-photo { filter: grayscale(1); }
.homepage .difference-photo-secondary { border: 0; }
.homepage .difference-support {
  border: 0;
  background: var(--home-blue);
  color: var(--home-navy);
  box-shadow: 0 12px 26px #1A1A2E70;
}
.homepage .difference .eyebrow { color: var(--home-blue); }
.homepage .difference .section-title { color: var(--home-cool-white); }
.homepage .difference .section-title .accent { color: var(--home-blue); }
.homepage .difference .body-copy { color: var(--home-cool-white); }
.homepage .difference-point { border-bottom-color: #4A90E25C; }
.homepage .difference-stat { color: var(--home-blue); }
.homepage .difference-point h3 { color: var(--home-cool-white); }
.homepage .difference-point p { color: var(--home-cool-white); }

/* 02: open Web Development section; the interface mockup carries the visual weight */
.homepage .home-sections > .software { background: var(--home-cool-white); }
.homepage .web-browser { border-color: #4A90E266; background: #FFFFFF; }

/* Technology strip: a short light transition between open and dark sections */
.homepage .logo-strip {
  border-block: 1px solid var(--home-blue);
  background: #4A90E21A;
  color: var(--home-navy);
}
.homepage .logo-group li {
  border-color: #4A90E252;
  background: var(--home-cool-white);
  color: var(--home-navy);
  box-shadow: 0 8px 20px -18px #1A1A2E52;
}

/* 03: dark contained Staff panel; the three-zone composition stays intact */
.homepage .home-sections > .staff {
  background: var(--home-cool-white);
  color: var(--home-navy);
}
.homepage .staff::before,
.homepage .staff::after { display: none; background: transparent; background-image: none; }
.homepage .staff-shell {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 4.6vw, 60px);
  border: 1px solid var(--home-blue);
  border-radius: 22px;
  background: var(--home-navy);
  box-shadow: 0 24px 52px -38px #1A1A2EA6;
}
.homepage .staff-shell::before { content: none; display: none; }
.homepage .staff-overview,
.homepage .staff-network,
.homepage .staff-resources { z-index: 1; }
.homepage .staff .eyebrow { color: var(--home-blue); }
.homepage .staff .section-title { color: var(--home-cool-white); }
.homepage .staff .section-title .accent { color: var(--home-blue); }
.homepage .staff-introduction .body-copy { color: var(--home-cool-white); }
.homepage .staff-needs {
  border-top-color: #4A90E266;
}
.homepage .staff-needs li { border-color: #4A90E266; }
.homepage .staff-benefit-icon {
  border-color: var(--home-blue);
  background: var(--home-blue);
  color: #FFFFFF;
}
.homepage .staff-answer { color: var(--home-cool-white); }
.homepage .staff-question { color: var(--home-cool-white); }
.homepage .staff-resources {
  border-color: var(--home-blue);
  background: #F8F9FA;
  box-shadow: 0 18px 42px -28px #1A1A2E8A;
  backdrop-filter: none;
}
.homepage .staff-resources h3,
.homepage .staff-role { color: var(--home-navy); }
.homepage .staff-resources ul,
.homepage .staff-resources li + li { border-color: #4A90E252; }
.homepage .staff-role-icon { color: var(--home-blue); }
.homepage .staff-network::before,
.homepage .staff-network::after { background: #4A90E266; }
.homepage .staff-orbit { border-color: #4A90E2A3; }
.homepage .staff-orbit-middle { box-shadow: 0 0 35px #4A90E23D; }
.homepage .staff-orbit-inner {
  background: #4A90E229;
  box-shadow: 0 0 0 18px #4A90E21F;
}
.homepage .staff-satellite {
  border-color: var(--home-cool-white);
  background: var(--home-blue);
  box-shadow: 0 0 0 7px #4A90E23D, 0 0 18px var(--home-blue);
}
.homepage .staff-network-core {
  border-color: var(--home-cool-white);
  background: var(--home-blue);
  color: #FFFFFF;
  box-shadow: 0 0 0 15px #4A90E238, 0 0 44px #4A90E280;
}
.homepage .staff-node {
  border-color: var(--home-cool-white);
  background: var(--home-blue);
  box-shadow: 0 0 16px var(--home-blue);
}
@keyframes staff-heartbeat {
  50% { box-shadow: 0 0 0 23px #4A90E224, 0 0 58px #4A90E299; }
}

/* 04: light Shared Ambitions field with a different artwork-led composition */
.homepage .home-sections > :is(.ambition, .home-academy) {
  background: var(--home-soft-section-bg);
}
.homepage .ambition > .section-inner {
  padding: 0;
  background: transparent;
}
.homepage .ambition .eyebrow { color: var(--home-blue); }
.homepage .ambition .section-title { color: var(--home-navy); }
.homepage .ambition .body-copy { color: var(--home-navy); }
.homepage .ambition-artwork::before { background: var(--home-blue); opacity: .16; }
.homepage .ambition-artwork img { filter: drop-shadow(0 20px 25px #1A1A2E29); }
.homepage .ambition-halo { border-color: #4A90E299; }
.homepage .ambition-halo-two { border-color: #4A90E27A; }
.homepage .ambition-spark {
  border-color: var(--home-cool-white);
  background: var(--home-blue);
  box-shadow: 0 0 0 7px #4A90E229;
}
.homepage .ambition-benefits::before {
  background: linear-gradient(90deg, #4A90E252, var(--home-blue), #4A90E252);
}
.homepage .ambition-benefits li {
  border-color: #4A90E252;
  background: var(--home-cool-white);
  box-shadow: 0 16px 28px -24px #1A1A2E52;
}
.homepage .ambition-benefits svg {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 12px;
  border-radius: 13px;
  background: #2F75D5;
  color: #FFFFFF;
}
.homepage .ambition-benefits li::before {
  border-color: var(--home-cool-white);
  background: var(--home-blue);
}
.homepage .ambition-benefits li::after { color: var(--home-blue); }
.homepage .ambition-benefits li:hover {
  border-color: var(--home-blue);
  box-shadow: 0 20px 32px -22px #1A1A2E66;
}

/* 05: contained Navy Growth Marketing panel */
.homepage .home-sections > .growth-marketing { background: var(--home-cool-white); }
.homepage .growth-marketing-panel {
  border: 1px solid var(--home-blue);
  background: var(--home-navy);
  color: var(--home-cool-white);
  box-shadow: 0 24px 52px -38px #1A1A2EA6;
}
.homepage .growth-marketing .eyebrow,
.homepage .growth-marketing .section-title .accent,
.homepage .growth-card-label,
.homepage .growth-metric-value { color: var(--home-blue); }
.homepage .growth-marketing .section-title,
.homepage .growth-marketing .body-copy { color: var(--home-cool-white); }
.homepage .growth-marketing-cta {
  border-color: #2F75D5;
  background: #2F75D5;
  color: #FFFFFF;
  box-shadow: 0 8px 18px #1A1A2E70;
}
.homepage .growth-marketing-cta:hover {
  border-color: #2364BA;
  background: #2364BA;
  color: #FFFFFF;
}
.homepage .growth-metric,
.homepage .growth-capabilities {
  border-color: #4A90E27A;
  background: #4A90E21A;
}
.homepage .growth-metric-featured { background: #4A90E229; }
.homepage .growth-metric > p:last-child,
.homepage .growth-capabilities > p { color: var(--home-cool-white); }
.homepage .growth-capabilities li {
  border-color: #4A90E27A;
  background: #1A1A2E;
  color: var(--home-cool-white);
}
.homepage .growth-service-card {
  border-color: #4A90E252;
  background: #F8F9FA;
  color: var(--home-navy);
  box-shadow: 0 12px 28px #1A1A2E52;
}
.homepage .growth-service-icon {
  background: #2F75D5;
  color: #FFFFFF;
}
.homepage .growth-service-card h3,
.homepage .growth-service-card > p:last-child { color: var(--home-navy); }

/* 06: open white Process section with navy copy and SOLVINTAL Blue accents */
.homepage .home-sections > .process { background: #FFFFFF; }
.homepage .process > .section-inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  color: var(--home-navy);
  box-shadow: none;
}
.homepage .process-heading .eyebrow { color: var(--home-blue); }
.homepage .process-heading .section-title { color: var(--home-navy); }
.homepage .process-heading .section-title .accent { color: var(--home-blue); }
.homepage .process-heading .body-copy { color: var(--home-navy); }
.homepage .process-heading {
  display: block;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.homepage .process-heading .eyebrow,
.homepage .process-heading .section-title,
.homepage .process-heading .body-copy {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}
.homepage .process-heading .eyebrow { margin-bottom: var(--eyebrow-space); }
.homepage .process-heading .body-copy { max-width: 58ch; margin-top: 20px; }
.homepage .process-step::before,
.homepage .process-step::after {
  border-color: transparent;
  background: transparent;
}
.homepage .process.has-motion .process-step:not(:last-child)::before,
.homepage .process .process-step:last-child::before { background: transparent; }
.homepage .process-steps::before { background: #4A90E27A; }
.homepage .process-steps::after {
  background: linear-gradient(90deg, transparent 0%, var(--home-blue) 45%, var(--home-cool-white) 50%, transparent 55%);
  background-size: 260% 100%;
}
.homepage .process-icon {
  order: 1;
  border-color: var(--home-blue);
  background: var(--home-blue);
  color: #FFFFFF;
  margin: 0 auto 22px;
}
.homepage .process-number {
  border-color: #FFFFFF;
  background: var(--home-blue);
  color: #FFFFFF;
}
.homepage .process-copy {
  order: 2;
  border-color: var(--home-blue);
  background: #F8F9FA;
  box-shadow: 0 12px 28px #1A1A2E2E;
}
.homepage .process-steps::before,
.homepage .process-steps::after {
  animation: none;
}
.homepage .process-steps::before {
  content: '';
  display: block;
  top: 37px;
  bottom: auto;
  height: 2px;
  background: #4A90E27A;
}
.homepage .process-steps::after { content: none; display: none; }
.homepage .process.has-motion .process-icon,
.homepage .process.has-motion .process-copy,
.homepage .process.has-motion .process-steps::after {
  animation: none;
}
.homepage .process .process-copy.scroll-enter-ready {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity .65s ease-out, transform .75s var(--ease), border-color .3s, box-shadow .3s;
  transition-delay: var(--entry-delay, 0ms), var(--entry-delay, 0ms), 0ms, 0ms;
}
.homepage .process .process-copy.scroll-enter-ready.is-entered {
  opacity: 1;
  transform: none;
}
@media (max-width: 900px) {
  .homepage .process-steps::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage .process .process-copy.scroll-enter-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.homepage .process .process-copy h3 { color: var(--home-navy); }
.homepage .process .process-copy p { color: var(--home-navy); }
.homepage .process-step:hover .process-copy {
  border-color: var(--home-blue);
  background: #F8F9FA;
  box-shadow: 0 18px 34px #1A1A2E52;
}
@keyframes process-row-node {
  0%, 22%, 100% { border-color: var(--home-blue); background: var(--home-cool-white); color: var(--home-blue); box-shadow: none; }
  6%, 16% { border-color: var(--home-blue); background: var(--home-blue); color: var(--home-navy); box-shadow: 0 0 0 8px #4A90E23D; }
}
@keyframes process-row-card {
  0%, 22%, 100% { border-color: var(--home-blue); box-shadow: 0 12px 28px #1A1A2E2E; }
  6%, 16% { border-color: var(--home-blue); box-shadow: 0 16px 32px #1A1A2E52, inset 0 3px var(--home-blue); }
}

/* Footer */
.homepage .site-footer {
  --ink: var(--home-cool-white);
  --muted: var(--home-cool-white);
  --rule: #4A90E23D;
  border-top-color: var(--home-blue);
  background: var(--home-navy);
  color: var(--home-cool-white);
}
.homepage .footer-slogan .slogan-grow,
.homepage .contact-item svg { color: var(--home-blue); }
.homepage .social-icon {
  border-color: #4A90E266;
  background: transparent;
  color: var(--home-cool-white);
}
.homepage .social-icon:hover {
  border-color: var(--home-blue);
  background: #4A90E229;
  color: var(--home-cool-white);
}
.homepage .footer-column a:hover,
.homepage .footer-bottom a:hover,
.homepage .footer-contact > a:hover { color: var(--home-blue); }

@media (max-width: 600px) {
  .homepage .service-nav a + a::before { background: #4A90E252; }
  .homepage .difference-panel,
  .homepage .growth-marketing-panel { border-radius: 18px; }
  .homepage .process > .section-inner { padding: 0; border-radius: 0; }
  .homepage .staff-shell { padding: 24px; border-radius: 18px; }
}