/* Bio Code Technology - Canonical palette shared by every owned route. */

:root {
  --brand-navy: #081a2f;
  --brand-navy-soft: #102a46;
  --brand-blue: #2f6fb1;
  --brand-blue-soft: #dfeaf4;
  --brand-white: #ffffff;
  --brand-green: #3f7254;
  --brand-green-soft: #e3ede6;
  --brand-yellow: #d4aa3a;
  --brand-yellow-strong: #9a7313;
  --brand-yellow-soft: #f4edcf;
  --brand-black: #111820;
  --brand-gray: #657383;
  --brand-gray-dark: #394756;
  --brand-gray-soft: #edf1f4;
  --brand-border: #cbd5dd;

  /* Compatibility aliases used by legacy pages. */
  --primary: var(--brand-blue);
  --primary-light: #78a8d2;
  --secondary: var(--brand-navy);
  --accent: var(--brand-yellow);
  --accent-light: #e2c365;
  --purple: var(--brand-blue);
  --purple-light: #8bb6dc;
  --green: var(--brand-green);
  --green-light: #82ad91;
  --success: var(--brand-green);
  --warning: var(--brand-yellow);
  --dark-bg: var(--brand-navy);
  --dark-bg-secondary: var(--brand-navy-soft);
  --text-primary: var(--brand-white);
  --text-secondary: #c3ced8;
  --text-tertiary: #94a2b0;
  --border-color: rgba(255, 255, 255, 0.12);
  --border-color-hover: rgba(120, 168, 210, 0.5);
}

html {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior: none;
  scrollbar-color: var(--brand-blue) var(--brand-navy);
}

body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior: none;
}

html::-webkit-scrollbar-track {
  background: var(--brand-navy);
}

html::-webkit-scrollbar-thumb {
  background: var(--brand-blue);
  border-color: var(--brand-navy);
}

/* Main institutional page. */
.page-main {
  background: var(--brand-black);
  color: var(--brand-white);
}

.page-main header,
.page-main header.is-scrolled {
  background: rgba(8, 26, 47, 0.97);
  border-bottom-color: rgba(120, 168, 210, 0.28);
}

.page-main .nav-links a {
  color: #b7c4d0;
}

.page-main .nav-links a:hover,
.page-main .nav-links a.active {
  color: var(--brand-white);
}

.page-main .hero {
  background: var(--brand-navy);
}

.page-main .hero-video {
  inset: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
  opacity: 0.2;
}

.page-main .hero::before {
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: none;
  background: linear-gradient(
    90deg,
    rgba(8, 26, 47, 0.72) 0%,
    rgba(8, 26, 47, 0.48) 54%,
    rgba(16, 42, 70, 0.62) 100%
  );
}

.page-main .hero::after {
  border-color: rgba(47, 111, 177, 0.6);
}

.page-main .hero-brief {
  background: rgba(16, 42, 70, 0.92);
  border-color: rgba(120, 168, 210, 0.45);
  border-left-color: var(--brand-blue);
}

.page-main .cta-button,
.page-main .biopay-cta-primary,
.page-main .form-submit {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--brand-white);
}

.page-main .cta-button:hover,
.page-main .biopay-cta-primary:hover,
.page-main .form-submit:hover {
  background: var(--brand-navy-soft);
  border-color: var(--brand-blue);
  color: var(--brand-white);
}

.page-main :is(#about, #clients, #services, #social-impact, #servicenow, #specialist, #contact) {
  --text-primary: var(--brand-black);
  --text-secondary: var(--brand-gray);
  --text-tertiary: #748290;
  --card-bg: var(--brand-white);
  --card-bg-hover: var(--brand-white);
  --border-color: var(--brand-border);
  --border-color-hover: #9eb1c1;
  --accent: var(--brand-blue);
  color: var(--brand-black);
}

.page-main :is(#about, #clients, #services, #social-impact, #servicenow, #specialist, #contact) h2,
.page-main :is(#about, #clients, #services, #social-impact, #servicenow, #specialist, #contact) h3,
.page-main :is(#about, #clients, #services, #social-impact, #servicenow, #specialist, #contact) h4 {
  color: var(--brand-black);
}

.page-main :is(#about, #clients, #services, #social-impact, #servicenow, #specialist, #contact) p {
  color: var(--brand-gray);
}

.page-main #about {
  background: var(--brand-gray-soft);
}

.page-main #about::before {
  background: rgba(47, 111, 177, 0.12);
}

.page-main #about .section-eyebrow,
.page-main #about .tech-item h4 i {
  color: var(--brand-blue);
}

.page-main #about .about-text,
.page-main #about .tech-item {
  background: var(--brand-white);
  border-color: var(--brand-border);
}

.page-main #about .about-text {
  border-left-color: var(--brand-blue);
}

.page-main #clients {
  background: var(--brand-blue-soft);
}

.page-main #clients::before {
  background: var(--brand-blue);
}

.page-main #clients .client-card {
  background: var(--brand-white);
}

.page-main #clients .client-card:nth-child(even) {
  border-bottom-color: var(--brand-blue);
}

.page-main #clients :is(.client-logo, .client-logo i) {
  color: var(--brand-blue);
}

.page-main #services {
  background: var(--brand-white);
}

.page-main #services::before {
  border-color: var(--brand-gray-soft);
}

.page-main #services .service-card {
  background: var(--brand-gray-soft);
  border-color: var(--brand-border);
}

.page-main #services .service-card:hover {
  background: var(--brand-white);
  border-color: #9eb1c1;
}

.page-main #services .service-card .service-icon,
.page-main #services .service-card .service-icon i,
.page-main #services .service-card:hover .service-icon {
  background: var(--brand-blue-soft);
  border-color: #a7bdcf;
  color: var(--brand-blue) !important;
}

.page-main #social-impact {
  background: var(--brand-green-soft);
}

.page-main #social-impact::before {
  background: rgba(63, 114, 84, 0.13);
}

.page-main #social-impact .impact-card {
  background: var(--brand-white);
  border-color: rgba(63, 114, 84, 0.32);
}

.page-main #social-impact :is(.impact-card-header i, .feature i, .impact-connection strong) {
  color: var(--brand-green);
}

.page-main #social-impact :is(.impact-badge, .feature) {
  background: var(--brand-green-soft);
  border-color: rgba(63, 114, 84, 0.28);
  color: var(--brand-green);
}

.page-main #social-impact .impact-connection {
  background: rgba(63, 114, 84, 0.11);
  border-color: rgba(63, 114, 84, 0.28);
  color: var(--brand-green);
}

.page-main #social-impact :is(.garage-play-cta, .social-impact-cta) {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-white);
}

.page-main #social-impact .social-program-cta {
  width: fit-content;
  margin-top: 1.25rem;
}

.page-main #projects {
  --card-bg: var(--brand-navy-soft);
  --card-bg-hover: #173754;
  --border-color: #31516d;
  --border-color-hover: #5f8aae;
  background: var(--brand-black);
}

.page-main #projects::before {
  background-color: var(--brand-navy);
  background-image:
    linear-gradient(rgba(47, 111, 177, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 111, 177, 0.28) 1px, transparent 1px);
}

.page-main #projects :is(.project-card, .hft-card) {
  background: var(--brand-navy-soft);
  border-color: #31516d;
}

.page-main #projects :is(.project-icon, .project-link, .garage-link, .social-link) {
  color: #8bb6dc;
}

.page-main .garage-tag {
  background: rgba(212, 170, 58, 0.14);
  border-color: rgba(212, 170, 58, 0.42);
  color: #e2c365;
}

.page-main .social-tag {
  background: rgba(63, 114, 84, 0.24);
  border-color: rgba(130, 173, 145, 0.4);
  color: #9dc5aa;
}

.page-main .biopay-section {
  --card-bg: var(--brand-navy-soft);
  --card-bg-hover: #173754;
  --border-color: #4d7ca5;
  --border-color-hover: #78a8d2;
  background: var(--brand-blue);
}

.page-main .biopay-section::before {
  background: var(--brand-navy);
}

.page-main .biopay-section .biopay-teaser-card {
  background: var(--brand-navy-soft);
  border-color: #5f8aae;
}

.page-main .biopay-section :is(.biopay-section-badge, .biopay-teaser-live, .biopay-teaser-proofs span) {
  background: rgba(47, 111, 177, 0.24);
  border-color: rgba(120, 168, 210, 0.48);
  color: #c7dced;
}

.page-main #servicenow {
  background: var(--brand-gray-soft);
}

.page-main #servicenow::before {
  background: var(--brand-gray-dark);
}

.page-main #servicenow :is(.glass-card, .tech-item, .tech-card-mini) {
  background: var(--brand-white) !important;
  border-color: var(--brand-border) !important;
}

.page-main #servicenow .financial-stack-summary {
  max-width: 760px;
  margin: -0.75rem auto 2rem;
  color: var(--brand-gray);
  text-align: center;
}

.page-main #servicenow .tech-card-mini {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-main #servicenow .tech-card-mini:hover {
  transform: translateY(-4px);
  border-color: var(--brand-blue) !important;
  box-shadow: 0 14px 30px rgba(8, 26, 47, 0.1);
}

.page-main #servicenow .tech-card-mini i {
  display: block;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: var(--brand-blue) !important;
}

.page-main #servicenow .tech-card-mini h4 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.page-main #live-coding {
  --card-bg: var(--brand-navy-soft);
  --border-color: #3f5366;
  background: var(--brand-black);
}

.page-main #live-coding::before {
  background: var(--brand-navy);
}

.page-main #live-coding .section-eyebrow {
  color: #e2c365;
}

.page-main #live-coding .video-description {
  background: var(--brand-navy-soft) !important;
  border-color: #4e6579 !important;
}

.page-main #specialist {
  background: var(--brand-green-soft);
}

.page-main #specialist::before {
  background: rgba(63, 114, 84, 0.13);
}

.page-main #specialist .specialist-card {
  background: var(--brand-white);
  border-color: rgba(63, 114, 84, 0.3);
}

.page-main #specialist .specialist-figure {
  background: var(--brand-gray-soft);
  border-color: var(--brand-border);
}

.page-main #specialist .pill {
  background: var(--brand-yellow-soft);
  border-color: rgba(154, 115, 19, 0.3);
  color: var(--brand-yellow-strong);
}

.page-main #contact {
  background: var(--brand-blue-soft);
}

.page-main #contact::before {
  background: rgba(47, 111, 177, 0.12);
}

.page-main #contact .contact-container {
  background: var(--brand-white);
  border-left-color: var(--brand-blue);
}

.page-main #contact :is(input, textarea) {
  background: var(--brand-white);
  border-color: var(--brand-border);
  color: var(--brand-black);
}

.page-main footer {
  background: var(--brand-black);
  border-top-color: var(--brand-blue);
}

/* Scheduling route. */
.page-schedule {
  --bg: var(--brand-gray-soft);
  --text: var(--brand-black);
  --muted: var(--brand-gray);
  --border: var(--brand-border);
  --primary: var(--brand-blue);
  background: var(--brand-gray-soft);
  color: var(--brand-black);
}

.page-schedule .card {
  position: relative;
  overflow: hidden;
  background: var(--brand-white);
  border-color: var(--brand-border);
  box-shadow: 0 18px 42px rgba(8, 26, 47, 0.1);
}

.page-schedule .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue), var(--brand-yellow));
}

.page-schedule .btn {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--brand-white);
}

.page-schedule .btn.secondary {
  background: var(--brand-white);
  color: var(--brand-blue);
}

.page-schedule footer {
  background: var(--brand-navy);
  border-top-color: var(--brand-blue);
  color: #c3ced8;
}

/* Bio Code Tech Pay product route. */
.page-biopay {
  --bg: var(--brand-navy);
  --bg-deep: var(--brand-black);
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-hover: rgba(255, 255, 255, 0.075);
  --border: rgba(255, 255, 255, 0.13);
  --primary: var(--brand-blue);
  --purple: var(--brand-blue);
  --purple-light: #8bb6dc;
  --green: var(--brand-green);
  --green-light: #82ad91;
  --text-primary: var(--brand-white);
  --text-secondary: #b7c4d0;
  background: var(--brand-navy);
  color: var(--brand-white);
}

.page-biopay .bg-mesh {
  background:
    radial-gradient(ellipse 70% 50% at 10% 10%, rgba(47, 111, 177, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 90% 85%, rgba(63, 114, 84, 0.1) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(212, 170, 58, 0.045) 0%, transparent 70%);
}

.page-biopay .nav {
  background: rgba(8, 26, 47, 0.92);
  border-bottom-color: rgba(47, 111, 177, 0.35);
}

.page-biopay .nav-brand .brand-name,
.page-biopay :is(.section-badge, .hero-badge) {
  color: #8bb6dc;
}

.page-biopay :is(.hero-badge, .section-badge) {
  background: rgba(47, 111, 177, 0.13);
  border-color: rgba(120, 168, 210, 0.44);
}

.page-biopay .gradient-text {
  background: linear-gradient(135deg, #8bb6dc, var(--brand-blue), #82ad91);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-biopay :is(.btn-primary, .btn-cta-xl) {
  background: linear-gradient(135deg, var(--brand-blue), #245786);
  color: var(--brand-white);
  box-shadow: 0 8px 28px rgba(47, 111, 177, 0.32);
}

.page-biopay :is(.btn-primary, .btn-cta-xl):hover {
  background: linear-gradient(135deg, #3b7dbd, var(--brand-navy-soft));
  box-shadow: 0 12px 38px rgba(47, 111, 177, 0.42);
}

.page-biopay :is(.btn-outline, .btn-cta-outline) {
  border-color: rgba(120, 168, 210, 0.48);
  color: #a9c9e4;
}

.page-biopay :is(.btn-outline, .btn-cta-outline):hover {
  background: rgba(47, 111, 177, 0.16);
  border-color: var(--brand-blue);
  color: var(--brand-white);
}

.page-biopay .proof-bar {
  background: rgba(47, 111, 177, 0.08);
  border-color: rgba(47, 111, 177, 0.24);
}

.page-biopay :is(.pillar-card, .capability-card, .arch-item, .agent-container, .video-wrapper) {
  border-color: rgba(120, 168, 210, 0.26);
}

.page-biopay :is(.pillar-card, .capability-card, .arch-item):hover {
  background: rgba(47, 111, 177, 0.08);
  border-color: rgba(120, 168, 210, 0.48);
}

.page-biopay .agent-container {
  background: linear-gradient(135deg, rgba(47, 111, 177, 0.13), rgba(63, 114, 84, 0.08));
}

.page-biopay .cta-final {
  background: linear-gradient(135deg, rgba(47, 111, 177, 0.18), rgba(63, 114, 84, 0.12));
  border-color: rgba(120, 168, 210, 0.4);
}

.page-biopay .cta-final::before {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-blue));
}

.page-biopay :is(.cta-live-badge, .nav-live) {
  color: #82ad91;
}

/* Garage game route. */
.page-garage {
  --primary: var(--brand-blue);
  --accent: var(--brand-green);
  --game-accent: var(--brand-yellow);
  --game-accent-alt: var(--brand-blue);
  --dark-bg: var(--brand-navy);
  --card-bg: rgba(255, 255, 255, 0.045);
  --text-primary: var(--brand-white);
  --text-secondary: #aebbc7;
  background: var(--brand-navy);
}

.page-garage .bg-animation {
  background:
    radial-gradient(circle at top right, rgba(212, 170, 58, 0.11) 0%, transparent 42%),
    radial-gradient(circle at bottom left, rgba(47, 111, 177, 0.15) 0%, transparent 42%),
    var(--brand-navy);
}

.page-garage .topbar {
  background: rgba(8, 26, 47, 0.94);
  border-bottom-color: rgba(212, 170, 58, 0.34);
}

.page-garage .topbar-brand img {
  filter: drop-shadow(0 0 6px rgba(212, 170, 58, 0.26));
}

.page-garage .topbar-badge {
  background: rgba(212, 170, 58, 0.1);
  border-color: rgba(212, 170, 58, 0.36);
  color: var(--brand-yellow);
}

.page-garage .loading-bar {
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-blue));
}

.page-garage .fallback-overlay {
  background: var(--brand-navy);
}

.page-garage .btn-play {
  background: linear-gradient(135deg, var(--brand-yellow), #b88b1f);
  color: var(--brand-black);
  box-shadow: 0 6px 26px rgba(212, 170, 58, 0.3);
}

.page-garage .btn-play:hover {
  box-shadow: 0 10px 34px rgba(212, 170, 58, 0.4);
}

/* Cross-origin wrappers and redirect routes. */
.page-embed,
.page-embed iframe {
  background: var(--brand-navy);
}

.page-redirect {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 2rem;
  background: var(--brand-navy);
  color: var(--brand-white);
  font-family: Inter, system-ui, sans-serif;
  text-align: center;
}

.page-redirect a {
  color: #e2c365;
  font-weight: 700;
}

@media (min-width: 769px) and (hover: hover) {
  .page-main :is(
      .cta-button,
      .biopay-cta-primary,
      .form-submit,
      .tech-item,
      .client-card,
      .service-card,
      .project-card,
      .impact-card,
      .specialist-card,
      .biopay-teaser-card,
      .biopay-img-card,
      .tech-card-mini
    ):hover,
  .page-main :is(
      .service-card:hover .service-icon,
      .service-card:hover .service-icon i,
      .client-card:hover .client-logo,
      .garage-card:hover .garage-icon
    ) {
    transform: none;
  }
}

@media (max-width: 768px) {
  .page-main .hero-video {
    object-position: center center;
  }

  .page-main .hero::before {
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    background: linear-gradient(
      180deg,
      rgba(8, 26, 47, 0.62) 0%,
      rgba(8, 26, 47, 0.5) 48%,
      rgba(16, 42, 70, 0.7) 100%
    );
  }
}