/*
  Visual system v2
  One continuous infrastructure atmosphere. Light values are reserved for small
  information surfaces instead of alternating full-page black/white sections.
*/

:root {
  --ink: #ddecf0;
  --deep: #082832;
  --deep-2: #0d3541;
  --brand: #187ca0;
  --electric: #39c7f3;
  --complete: #b6ed67;
  --paper: #0b303b;
  --white: #f1f5f2;
  --muted: #8eabb3;
  --line: rgba(174, 221, 231, .12);
  --dark-line: rgba(174, 221, 231, .11);
}

html { background: #082832; }
body {
  background:
    radial-gradient(circle at 20% 8%, rgba(31, 135, 167, .34), transparent 28%),
    radial-gradient(circle at 78% 40%, rgba(28, 108, 132, .22), transparent 32%),
    linear-gradient(180deg, #082832 0%, #0b303b 45%, #092a35 100%);
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(174,221,231,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,221,231,.045) 1px, transparent 1px);
  background-size: 104px 104px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 85%);
}

.dark-grid,
.light-grid {
  color: var(--ink);
  background-color: transparent;
  background-image:
    linear-gradient(rgba(174,221,231,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,221,231,.08) 1px, transparent 1px);
  background-size: 100% 100%, calc((100vw - 48px) / 6) 100%;
  background-position: 0 0, 24px 0;
}

.dark-grid::after,
.light-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -140px;
  height: 280px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(10, 46, 57, .82) 48%, transparent);
}

/* Navigation becomes part of the hero instead of a white object placed on it. */
.site-header {
  top: 14px;
  min-height: 66px;
  color: #e9f3f4;
  border-color: rgba(201, 231, 237, .16);
  background: rgba(8, 39, 50, .42);
  box-shadow: 0 16px 50px rgba(2, 19, 25, .12);
  backdrop-filter: blur(22px) saturate(125%);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,199,243,.38), transparent);
  opacity: .65;
}

.site-header.scrolled {
  top: 8px;
  background: rgba(7, 35, 45, .82);
  border-color: rgba(201, 231, 237, .2);
  box-shadow: 0 18px 55px rgba(2, 19, 25, .28);
}

.site-header .brand img,
.site-footer .brand img {
  filter: brightness(0) invert(1) sepia(.08) saturate(.35) hue-rotate(135deg) brightness(1.08);
  opacity: .94;
}

.main-nav a { color: rgba(233,243,244,.72); }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--white); }
.main-nav a::after { background: var(--electric); }
.header-cta {
  color: #072832;
  background: rgba(224, 239, 240, .92);
  box-shadow: 0 10px 28px rgba(2, 20, 27, .18);
}
.header-cta:hover { background: var(--complete); }

/* Hero: richer atmospheric depth and a softer edge. */
.hero {
  min-height: 1180px;
  border: 1px solid rgba(178, 222, 231, .11);
  background:
    radial-gradient(ellipse at var(--pointer-x, 56%) var(--pointer-y, 28%), rgba(50, 177, 211, .3), transparent 25%),
    radial-gradient(circle at 74% 30%, rgba(25, 116, 143, .34), transparent 34%),
    linear-gradient(135deg, #0b3a47 0%, #092f3b 46%, #082832 100%);
  box-shadow: inset 0 0 160px rgba(3, 20, 27, .24), 0 22px 80px rgba(3, 20, 27, .2);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .3;
  background: linear-gradient(115deg, transparent 20%, rgba(89,202,231,.13) 45%, transparent 68%);
  transform: translateX(calc(var(--hero-drift, 0) * 1px));
  transition: transform .4s var(--ease);
}

.hero-glow {
  width: 1000px;
  height: 700px;
  left: 38%;
  top: 40px;
  background: radial-gradient(ellipse, rgba(57,199,243,.16), rgba(19,106,132,.08) 44%, transparent 70%);
  filter: blur(34px);
}

.hero-copy h1 {
  color: #edf5f3;
  text-shadow: 0 10px 60px rgba(1, 17, 23, .16);
}

.hero-bottom > p { color: rgba(220,236,239,.68); }
.button-light { color: #082832; background: #dcebed; }
.button-light:hover { background: var(--complete); }
.button-ghost { background: rgba(173,220,229,.08); border-color: rgba(184,224,232,.16); }

.hero-network {
  transform: translate3d(calc(var(--network-x, 0) * 1px), calc(var(--network-y, 0) * 1px), 0);
  transition: transform .35s var(--ease);
}

.network-node {
  border-color: rgba(180, 224, 232, .17);
  background: linear-gradient(145deg, rgba(14, 57, 69, .78), rgba(7, 34, 44, .66));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 22px 55px rgba(2, 20, 27, .22);
}
.network-core {
  background: linear-gradient(145deg, rgba(16, 67, 81, .94), rgba(7, 36, 47, .9));
  box-shadow: 0 0 0 1px rgba(57,199,243,.1), 0 35px 100px rgba(2,18,25,.35), 0 0 70px rgba(57,199,243,.08);
}
.network-status { background: rgba(14, 59, 71, .58); }
.hero-impact { background: linear-gradient(180deg, rgba(8,39,50,.18), rgba(7,32,42,.72)); }

/* Full sections remain within one tonal family. */
.positioning {
  background:
    radial-gradient(circle at 78% 28%, rgba(43,149,176,.18), transparent 34%),
    linear-gradient(180deg, rgba(11,48,59,.2), rgba(13,55,67,.78), rgba(11,48,59,.25));
}
.positioning h2 { color: #d9e9eb; }
.positioning-copy { color: #9cb8bf; }

.orchestration {
  background:
    radial-gradient(ellipse at 44% 45%, rgba(32, 132, 157, .22), transparent 34%),
    linear-gradient(180deg, rgba(10,45,56,.12), rgba(8,39,50,.84) 14%, rgba(8,39,50,.9) 86%, rgba(11,48,59,.1));
}

.orchestration-stage {
  perspective: 1800px;
  transform-style: preserve-3d;
}

.stage-visual {
  --core-shift-x: 0px;
  --core-shift-y: 0px;
  --core-scale: 1;
  --scene-tilt: 0deg;
  border-color: rgba(175, 222, 231, .16);
  background:
    radial-gradient(circle at var(--scene-light-x, 50%) var(--scene-light-y, 50%), rgba(58,191,222,.17), transparent 30%),
    linear-gradient(145deg, #0d3b48, #092d38);
  box-shadow: 0 35px 110px rgba(2,18,25,.32), inset 0 1px rgba(255,255,255,.025);
  transform: rotateX(var(--scene-tilt)) translateZ(0);
  transform-origin: 50% 40%;
  transition: transform .6s var(--ease), background .5s;
}

.stage-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 440px;
  height: 440px;
  left: var(--scene-light-x, 50%);
  top: var(--scene-light-y, 50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,199,243,.14), transparent 68%);
  filter: blur(18px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.flow-core {
  transform: translate(-50%, -50%) translate3d(var(--core-shift-x), var(--core-shift-y), 50px) scale(var(--core-scale));
  border-color: rgba(85,202,231,.52);
  background: linear-gradient(145deg, rgba(14,62,75,.97), rgba(8,39,50,.95));
  box-shadow: 0 38px 100px rgba(1,17,23,.42), 0 0 60px rgba(57,199,243,.08);
  transition: transform .65s var(--ease), border-color .35s, box-shadow .35s;
}

.stage-visual.changing .flow-core {
  transform: translate(-50%, -50%) translate3d(var(--core-shift-x), calc(var(--core-shift-y) + 5px), 50px) scale(calc(var(--core-scale) - .015));
}

.flow-actor {
  background: rgba(9,44,55,.8);
  box-shadow: 0 18px 48px rgba(2,18,25,.2);
}
.buyer-actor { transform: translate3d(var(--buyer-x, 0px), var(--buyer-y, 0px), 30px); opacity: var(--buyer-opacity, 1); }
.seller-actor { transform: translate3d(var(--seller-x, 0px), var(--seller-y, 0px), 30px); opacity: var(--seller-opacity, .58); }
.flow-note { color: #0a303b; background: #cfe2e3; }
.stage-copy { color: #dfecef; }
.stage-copy > p:not(.stage-number), .section-intro > p:last-child { color: #88a9b1; }

.control-layer {
  background:
    radial-gradient(circle at 18% 40%, rgba(47,154,181,.14), transparent 28%),
    linear-gradient(180deg, rgba(10,45,56,.1), rgba(14,59,72,.76), rgba(10,45,56,.15));
}
.control-heading > p:last-child, .payment-stack-intro > p:last-child { color: #91afb6; }
.control-console {
  border-color: rgba(181,225,233,.15);
  background: rgba(9, 42, 53, .82);
  box-shadow: 0 45px 140px rgba(2,18,25,.34), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(18px);
}
.console-sidebar { border-color: var(--line); background: rgba(5,32,41,.36); }
.console-sidebar button { color: #7699a2; }
.console-sidebar button[aria-selected="true"] { color: #e3eff0; background: rgba(39,137,160,.13); }
.console-topbar { color: #7e9fa7; }
.console-title small { color: var(--electric); }
.console-status { color: var(--electric); }
.console-timeline span { color: #d7e7e9; }
.console-timeline small, .console-footnote { color: #7899a2; }

.coverage {
  background:
    radial-gradient(ellipse at 72% 42%, rgba(46,161,188,.2), transparent 31%),
    linear-gradient(180deg, rgba(9,43,53,.12), rgba(7,38,48,.86), rgba(10,47,58,.14));
}
.coverage-copy > p:not(.eyebrow) { color: #8eabb3; }
.route-map {
  border-color: rgba(178,224,233,.14);
  background: radial-gradient(circle at 70% 35%, #164e5d, transparent 38%), linear-gradient(145deg, #0e3c49, #092e39);
  box-shadow: 0 38px 100px rgba(2,18,25,.3);
}
.route-map .map-orbit,
.route-map svg,
.route-map .map-node {
  transform: translate3d(var(--map-x, 0px), var(--map-y, 0px), 0);
  transition: transform .45s var(--ease);
}
.route-map .route-card {
  transform: translate3d(var(--map-card-x, 0px), var(--map-card-y, 0px), 28px);
  transition: opacity .25s, transform .45s var(--ease);
}
.route-map.changing .route-card {
  opacity: 0;
  transform: translate3d(var(--map-card-x, 0px), calc(var(--map-card-y, 0px) + 12px), 28px);
}
.route-card { color: #0a303b; background: #c9dddf; box-shadow: 0 28px 80px rgba(2,18,25,.32); }

.payment-stack {
  background:
    radial-gradient(circle at 82% 15%, rgba(44,149,174,.14), transparent 28%),
    linear-gradient(180deg, rgba(10,45,56,.1), rgba(13,53,65,.7), rgba(10,45,56,.1));
}
.stack { border-color: rgba(181,225,233,.14); background: rgba(8,40,50,.28); }
.stack article { border-color: rgba(181,225,233,.12); }
.stack h3 { color: #dbe9eb; }
.stack p { color: #87a6ae; }
.stack article:hover { background: rgba(34,121,143,.15); }

.solutions {
  background:
    radial-gradient(circle at 25% 18%, rgba(51,161,187,.16), transparent 30%),
    linear-gradient(180deg, rgba(9,43,54,.12), rgba(7,36,46,.8), rgba(9,43,54,.15));
}
.solution-list p { color: #829fa7; }
.solution-list a::before { background: rgba(57,199,243,.055); }

.final-cta {
  background:
    radial-gradient(circle at 50% 48%, rgba(45,161,189,.25), transparent 30%),
    linear-gradient(180deg, rgba(9,43,54,.12), rgba(8,42,52,.9));
}
.final-cta > p:not(.eyebrow) { color: #8ba8b0; }
.site-footer { color: #d8e8ea; background: #082832; }
.site-footer p, .site-footer small { color: #7898a1; }

@media (max-width: 780px) {
  .site-header { background: rgba(8,39,50,.76); }
  .menu-toggle span:not(.sr-only) { background: #dcebed; }
  .main-nav { background: rgba(7,35,45,.98); border-color: rgba(181,225,233,.14); }
  .main-nav a { border-color: rgba(181,225,233,.1); }
  .hero { min-height: 1660px; }
  .stage-visual { transform: none; }
  .control-console { background: rgba(9,42,53,.9); }
  .console-sidebar { background: rgba(5,32,41,.55); }
  .route-card { background: #c9dddf; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-network, .stage-visual, .flow-core, .flow-actor { transform: none !important; }
}