:root {

  --bg: #050b14;

  --bg-2: #08111d;

  --bg-3: #0b1727;

  --surface: rgba(11, 20, 34, 0.66);

  --surface-strong: rgba(11, 20, 34, 0.88);

  --surface-soft: rgba(13, 25, 42, 0.72);

  --border: rgba(125, 176, 235, 0.14);

  --border-strong: rgba(125, 176, 235, 0.22);

  --text: #e7eef9;

  --muted: #95a6bd;

  --heading: #f8fbff;

  --accent: #59cfff;

  --accent-2: #2b8dff;

  --accent-soft: rgba(89, 207, 255, 0.14);

  --esg: #7ee8c3;

  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.22);

  --radius: 26px;

  --radius-lg: 32px;

  --radius-sm: 16px;

  --container: 1240px;

  --transition: 260ms ease;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: "Inter", Arial, sans-serif;

  color: var(--text);

  line-height: 1.72;

  background:

    radial-gradient(circle at 12% 12%, rgba(54, 134, 255, 0.1), transparent 28%),

    radial-gradient(circle at 88% 14%, rgba(89, 207, 255, 0.08), transparent 24%),

    radial-gradient(circle at 50% 100%, rgba(89, 207, 255, 0.05), transparent 24%),

    linear-gradient(180deg, #040912 0%, #07101b 42%, #09111b 100%);

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



.site-noise,

.site-frame {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



.site-noise {

  opacity: 0.14;

  background-image:

    radial-gradient(rgba(255,255,255,0.08) 0.5px, transparent 0.5px);

  background-size: 8px 8px;

  mask-image: radial-gradient(circle at center, black 38%, transparent 90%);

}



.site-frame {

  inset: 18px;

  border: 1px solid rgba(255, 255, 255, 0.03);

  border-radius: 28px;

}



.container {

  width: min(var(--container), calc(100% - 48px));

  margin: 0 auto;

  position: relative;

  z-index: 2;

}



.section {

  position: relative;

  padding: 128px 0;

  overflow: hidden;

}



.header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(5, 10, 17, 0.72);

  backdrop-filter: blur(18px) saturate(140%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.header::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(89, 207, 255, 0.22), transparent);

  opacity: 0.6;

}



.header-inner {

  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

}



.brand-mark {

  position: relative;

  width: 13px;

  height: 13px;

  border-radius: 999px;

  background: linear-gradient(135deg, #a1edff, var(--accent));

  box-shadow:

    0 0 0 7px rgba(89, 207, 255, 0.08),

    0 0 32px rgba(89, 207, 255, 0.3);

  flex: 0 0 auto;

}



.brand-mark::after {

  content: "";

  position: absolute;

  inset: -9px;

  border-radius: 999px;

  border: 1px solid rgba(89, 207, 255, 0.14);

}



.brand-text {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.brand-text strong {

  font-size: 0.98rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-weight: 700;

  color: var(--heading);

}



.brand-text small {

  color: var(--muted);

  font-size: 0.76rem;

  letter-spacing: 0.03em;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.nav {

  display: flex;

  align-items: center;

  gap: 28px;

}



.nav a {

  position: relative;

  color: var(--muted);

  font-size: 0.95rem;

  transition: color var(--transition), opacity var(--transition);

}



.nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -11px;

  width: 0;

  height: 1px;

  background: linear-gradient(90deg, var(--accent), transparent);

  transition: width var(--transition);

}



.nav a:hover,

.nav a:focus-visible {

  color: var(--text);

}



.nav a:hover::after,

.nav a:focus-visible::after {

  width: 100%;

}



.nav-cta {

  padding: 11px 18px;

  border-radius: 999px;

  border: 1px solid rgba(89, 207, 255, 0.18);

  background:

    linear-gradient(180deg, rgba(89, 207, 255, 0.12), rgba(89, 207, 255, 0.06));

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);

  color: var(--heading) !important;

}



.nav-cta::after {

  display: none;

}



.nav-toggle {

  display: none;

  width: 48px;

  height: 48px;

  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.03);

  border-radius: 14px;

  padding: 0;

  cursor: pointer;

}



.nav-toggle span {

  display: block;

  width: 18px;

  height: 2px;

  margin: 5px auto;

  background: var(--text);

  border-radius: 999px;

}



.mobile-menu {

  display: none;

  background: rgba(5, 10, 17, 0.96);

  border-top: 1px solid rgba(255,255,255,0.05);

}



.mobile-menu-inner {

  display: grid;

  gap: 14px;

  padding: 18px 0 22px;

}



.mobile-menu a {

  color: var(--muted);

  font-weight: 500;

}



.hero {

  padding-top: 118px;

  padding-bottom: 108px;

  min-height: calc(100vh - 82px);

  display: flex;

  align-items: center;

}



.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),

    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);

  background-size: 88px 88px;

  mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.32) 70%, transparent 100%);

  opacity: 0.22;

}



.hero-visual,

.hero-gridline {

  position: absolute;

  pointer-events: none;

}



.hero-visual-a {

  width: 58vw;

  height: 58vw;

  max-width: 900px;

  max-height: 900px;

  right: -14vw;

  top: -10vw;

  border-radius: 50%;

  background:

    radial-gradient(circle at 42% 42%, rgba(120, 216, 255, 0.22), transparent 24%),

    radial-gradient(circle at center, rgba(61, 127, 255, 0.14), transparent 52%);

  filter: blur(12px);

  animation: heroPulse 18s ease-in-out infinite;

}



.hero-visual-b {

  width: 52vw;

  height: 2px;

  top: 18%;

  left: -8%;

  background: linear-gradient(90deg, transparent, rgba(89, 207, 255, 0.24), transparent);

  box-shadow:

    0 0 28px rgba(89, 207, 255, 0.15),

    0 0 80px rgba(89, 207, 255, 0.08);

  animation: sweepLine 16s linear infinite;

}



.hero-gridline {

  inset: auto 0 16% 0;

  height: 160px;

  background:

    linear-gradient(180deg, transparent, rgba(89, 207, 255, 0.06), transparent),

    repeating-linear-gradient(

      90deg,

      transparent 0 70px,

      rgba(255,255,255,0.03) 70px 71px,

      transparent 71px 140px

    );

  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);

  opacity: 0.5;

  animation: slowDrift 22s linear infinite;

}



.hero-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);

  gap: 56px;

  align-items: end;

}



.hero-copy {

  position: relative;

  z-index: 2;

}



.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 24px;

  padding: 8px 14px;

  border-radius: 999px;

  font-size: 0.74rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #c7eeff;

  background: rgba(89, 207, 255, 0.08);

  border: 1px solid rgba(89, 207, 255, 0.16);

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);

}



.eyebrow::before {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 999px;

  background: linear-gradient(135deg, #a6eeff, var(--accent));

  box-shadow: 0 0 18px rgba(89, 207, 255, 0.38);

}



.section-esg .eyebrow {

  color: #c9f4e7;

  background: rgba(126, 232, 195, 0.08);

  border-color: rgba(126, 232, 195, 0.16);

}



.section-esg .eyebrow::before {

  background: linear-gradient(135deg, #cbfaec, var(--esg));

  box-shadow: 0 0 18px rgba(126, 232, 195, 0.34);

}



h1,

h2,

h3 {

  margin: 0;

  color: var(--heading);

  letter-spacing: -0.04em;

  line-height: 1.04;

}



h1 {

  font-size: clamp(3.2rem, 7vw, 6.25rem);

  max-width: 11ch;

  font-weight: 800;

}



h2 {

  font-size: clamp(2.2rem, 4.2vw, 3.6rem);

  max-width: 16ch;

  font-weight: 700;

}



h3 {

  font-size: 1.12rem;

  margin-bottom: 12px;

  font-weight: 600;

  letter-spacing: -0.02em;

}



.hero-lead {

  margin: 28px 0 18px;

  font-size: clamp(1.18rem, 2vw, 1.52rem);

  line-height: 1.5;

  color: #d7e6f7;

  max-width: 50rem;

}



.hero-text,

.section-heading p,

.card p,

.contact-box p {

  color: var(--muted);

  margin: 0;

}



.hero-text {

  max-width: 44rem;

  font-size: 1.02rem;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 54px;

  padding: 0 22px;

  border-radius: 999px;

  font-weight: 600;

  transition:

    transform var(--transition),

    border-color var(--transition),

    background var(--transition),

    box-shadow var(--transition);

}



.btn:hover,

.btn:focus-visible {

  transform: translateY(-2px);

}



.btn-primary {

  color: #041019;

  background: linear-gradient(135deg, #b0f1ff 0%, #7fdfff 32%, var(--accent) 100%);

  box-shadow:

    0 14px 34px rgba(89, 207, 255, 0.22),

    inset 0 1px 0 rgba(255,255,255,0.45);

}



.btn-primary:hover,

.btn-primary:focus-visible {

  box-shadow:

    0 18px 42px rgba(89, 207, 255, 0.28),

    inset 0 1px 0 rgba(255,255,255,0.5);

}



.btn-secondary {

  color: var(--heading);

  border: 1px solid rgba(255,255,255,0.1);

  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));

}



.panel,

.card,

.contact-card {

  position: relative;

  background:

    linear-gradient(180deg, rgba(16, 26, 41, 0.78), rgba(9, 18, 31, 0.72));

  border: 1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  backdrop-filter: blur(16px) saturate(125%);

}



.panel::before,

.card::before,

.contact-card::before,

.contact-box::before {

  content: "";

  position: absolute;

  inset: 0 auto auto 0;

  width: 100%;

  height: 1px;

  background: linear-gradient(90deg, rgba(255,255,255,0.24), transparent 60%);

  pointer-events: none;

}



.panel::after,

.card::after,

.contact-card::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);

  pointer-events: none;

}



.panel {

  padding: 34px 34px 32px;

  min-height: 100%;

  overflow: hidden;

  background:

    radial-gradient(circle at top right, rgba(89, 207, 255, 0.08), transparent 36%),

    linear-gradient(180deg, rgba(16, 26, 41, 0.84), rgba(9, 18, 31, 0.8));

}



.panel-topline {

  position: absolute;

  top: 0;

  left: 20px;

  right: 20px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(89, 207, 255, 0.28), transparent);

}



.stat + .stat {

  margin-top: 20px;

  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,0.06);

}



.stat-label {

  display: block;

  margin-bottom: 8px;

  color: #8edfff;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.13em;

  font-weight: 700;

}



.stat strong {

  font-size: 1.03rem;

  color: var(--heading);

  line-height: 1.4;

}



.section-heading {

  margin-bottom: 44px;

}



.section-heading-left h2 {

  max-width: 18ch;

}



.content-grid,

.status-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.76fr);

  gap: 28px;

}



.feature-list {

  display: grid;

  gap: 20px;

}



.card {

  padding: 30px;

  transition:

    transform var(--transition),

    border-color var(--transition),

    box-shadow var(--transition),

    background var(--transition);

}



.card-large {

  padding: 40px;

}



.card p + p {

  margin-top: 18px;

}



.card-large p {

  max-width: 72ch;

}



.section-about .card:hover,

.section-about .feature-list .card:hover,

.contact-card:hover {

  transform: translateY(-4px);

  border-color: rgba(89, 207, 255, 0.2);

  box-shadow:

    0 26px 70px rgba(0, 0, 0, 0.34),

    0 0 0 1px rgba(89, 207, 255, 0.06);

}



.section-about .card::after {

  animation: aboutGlow 12s ease-in-out infinite;

}



.section-about .feature-list .card:nth-child(2)::after {

  animation-delay: -3s;

}



.section-about .feature-list .card:nth-child(3)::after {

  animation-delay: -6s;

}



.section-region {

  background:

    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));

  border-top: 1px solid rgba(255,255,255,0.04);

  border-bottom: 1px solid rgba(255,255,255,0.04);

}



.network {

  position: absolute;

  pointer-events: none;

  opacity: 0.42;

}



.network-a {

  inset: 12% auto auto 4%;

  width: 360px;

  height: 360px;

  background:

    radial-gradient(circle at 24% 30%, rgba(89, 207, 255, 0.42) 0 2px, transparent 3px),

    radial-gradient(circle at 66% 18%, rgba(89, 207, 255, 0.38) 0 2px, transparent 3px),

    radial-gradient(circle at 74% 60%, rgba(89, 207, 255, 0.4) 0 2px, transparent 3px),

    radial-gradient(circle at 38% 74%, rgba(89, 207, 255, 0.34) 0 2px, transparent 3px),

    linear-gradient(135deg, transparent 25%, rgba(89, 207, 255, 0.1) 25.5%, rgba(89, 207, 255, 0.1) 26%, transparent 26.5%),

    linear-gradient(25deg, transparent 54%, rgba(89, 207, 255, 0.09) 54.5%, rgba(89, 207, 255, 0.09) 55%, transparent 55.5%);

  filter: blur(0.2px);

  animation: networkShift 20s ease-in-out infinite;

}



.network-b {

  right: 6%;

  bottom: 12%;

  width: 300px;

  height: 300px;

  background:

    radial-gradient(circle at 18% 62%, rgba(89, 207, 255, 0.26) 0 2px, transparent 3px),

    radial-gradient(circle at 48% 36%, rgba(89, 207, 255, 0.24) 0 2px, transparent 3px),

    radial-gradient(circle at 76% 68%, rgba(89, 207, 255, 0.28) 0 2px, transparent 3px),

    linear-gradient(90deg, transparent 20%, rgba(89, 207, 255, 0.08) 20.5%, rgba(89, 207, 255, 0.08) 21%, transparent 21.5%),

    linear-gradient(160deg, transparent 50%, rgba(89, 207, 255, 0.08) 50.5%, rgba(89, 207, 255, 0.08) 51%, transparent 51.5%);

  animation: networkShiftAlt 24s ease-in-out infinite;

}



.section-esg {

  background:

    radial-gradient(circle at top right, rgba(126, 232, 195, 0.07), transparent 26%),

    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008));

  border-top: 1px solid rgba(255,255,255,0.04);

  border-bottom: 1px solid rgba(255,255,255,0.04);

}



.esg-wave {

  position: absolute;

  inset: auto auto 0 0;

  width: 140%;

  height: 220px;

  pointer-events: none;

  opacity: 0.16;

  background:

    radial-gradient(ellipse at center, rgba(126, 232, 195, 0.22), transparent 62%);

}



.esg-wave-a {

  bottom: -60px;

  left: -10%;

  transform: rotate(-3deg);

  animation: waveMove 20s ease-in-out infinite;

}



.esg-wave-b {

  bottom: -90px;

  left: -18%;

  opacity: 0.1;

  transform: rotate(2deg);

  animation: waveMoveAlt 28s ease-in-out infinite;

}



.section-status {

  background:

    linear-gradient(180deg, rgba(255,255,255,0.016), rgba(255,255,255,0.008));

  border-top: 1px solid rgba(255,255,255,0.04);

  border-bottom: 1px solid rgba(255,255,255,0.04);

}



.status-track {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.3;

  background:

    linear-gradient(90deg, transparent 0%, rgba(89, 207, 255, 0.08) 48%, transparent 50%),

    repeating-linear-gradient(

      90deg,

      transparent 0 110px,

      rgba(255,255,255,0.022) 110px 111px,

      transparent 111px 220px

    );

  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);

  animation: progressFlow 16s linear infinite;

}



.region-grid .card-large,

.status-grid .card-large {

  min-height: 100%;

}



.accent-card {

  background:

    radial-gradient(circle at top right, rgba(89, 207, 255, 0.1), transparent 38%),

    linear-gradient(180deg, rgba(14, 25, 41, 0.86), rgba(10, 18, 31, 0.82));

}



.clean-list {

  margin: 16px 0 0;

  padding: 0;

  list-style: none;

}



.clean-list li {

  position: relative;

  padding-left: 18px;

  color: var(--muted);

}



.clean-list li + li {

  margin-top: 12px;

}



.clean-list li::before {

  content: "";

  position: absolute;

  top: 0.72em;

  left: 0;

  width: 7px;

  height: 7px;

  border-radius: 999px;

  background: linear-gradient(135deg, #aff2ff, var(--accent));

  box-shadow: 0 0 0 6px rgba(89, 207, 255, 0.08);

}



.section-company {

  background:

    linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.008));

  border-top: 1px solid rgba(255,255,255,0.04);

  border-bottom: 1px solid rgba(255,255,255,0.04);

}



.company-gridline {

  position: absolute;

  inset: auto 0 18% 0;

  height: 140px;

  pointer-events: none;

  opacity: 0.32;

  background:

    linear-gradient(180deg, transparent, rgba(89, 207, 255, 0.05), transparent),

    repeating-linear-gradient(

      90deg,

      transparent 0 84px,

      rgba(255,255,255,0.025) 84px 85px,

      transparent 85px 168px

    );

  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);

}



.company-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);

  gap: 28px;

  align-items: stretch;

}



.company-card {

  min-height: 100%;

}



.company-card-primary {

  background:

    radial-gradient(circle at top right, rgba(89, 207, 255, 0.08), transparent 36%),

    linear-gradient(180deg, rgba(16, 26, 41, 0.84), rgba(9, 18, 31, 0.8));

}



.company-card-secondary {

  background:

    radial-gradient(circle at top right, rgba(89, 207, 255, 0.06), transparent 38%),

    linear-gradient(180deg, rgba(14, 25, 41, 0.82), rgba(10, 18, 31, 0.78));

}



.company-item + .company-item {

  margin-top: 20px;

  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,0.06);

}



.company-label {

  display: block;

  margin-bottom: 8px;

  font-size: 0.74rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: #8edfff;

  font-weight: 700;

}



.company-item strong,

.company-item a {

  color: var(--heading);

  font-size: 1rem;

  line-height: 1.5;

}



.company-item a {

  transition: color var(--transition), opacity var(--transition);

}



.company-item a:hover,

.company-item a:focus-visible {

  color: #abebff;

}



.company-card-secondary p {

  max-width: 34ch;

}



@media (max-width: 1080px) {

  .company-grid {

    grid-template-columns: 1fr;

  }

}



.section-contact {

  padding-top: 112px;

  padding-bottom: 124px;

}



.contact-glow {

  position: absolute;

  width: 640px;

  height: 640px;

  right: -140px;

  bottom: -280px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(89, 207, 255, 0.12), transparent 62%);

  pointer-events: none;

}



.contact-box {

  position: relative;

  display: grid;

  grid-template-columns: minmax(0, 1fr) 380px;

  gap: 28px;

  align-items: stretch;

  padding: 42px;

  border-radius: var(--radius-lg);

  border: 1px solid rgba(255,255,255,0.07);

  background:

    radial-gradient(circle at top left, rgba(89, 207, 255, 0.08), transparent 30%),

    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));

  box-shadow: var(--shadow);

  overflow: hidden;

}



.contact-box::after {

  content: "";

  position: absolute;

  top: -1px;

  left: 10%;

  width: 180px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(89, 207, 255, 0.34), transparent);

}



.contact-card {

  padding: 30px;

  background:

    radial-gradient(circle at top right, rgba(89, 207, 255, 0.08), transparent 42%),

    linear-gradient(180deg, rgba(14, 25, 41, 0.95), rgba(9, 17, 29, 0.98));

}



.contact-item + .contact-item {

  margin-top: 20px;

  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,0.06);

}



.contact-label {

  display: block;

  margin-bottom: 8px;

  font-size: 0.74rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: #8edfff;

  font-weight: 700;

}



.contact-card strong,

.contact-card a,

.contact-card span:not(.contact-label) {

  color: var(--heading);

  font-size: 1rem;

}



.contact-card a {

  transition: color var(--transition), opacity var(--transition);

}



.contact-card a:hover,

.contact-card a:focus-visible {

  color: #abebff;

}



.footer {

  position: relative;

  border-top: 1px solid rgba(255,255,255,0.05);

  background: rgba(4, 9, 15, 0.9);

}



.footer::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(89, 207, 255, 0.18), transparent);

}



.footer-inner {

  min-height: 84px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

}



.footer p,

.footer a {

  color: var(--muted);

  font-size: 0.92rem;

}



.footer a:hover,

.footer a:focus-visible {

  color: var(--text);

}



.section-orbit {

  position: absolute;

  width: 380px;

  height: 380px;

  right: -120px;

  top: 30px;

  border-radius: 50%;

  border: 1px solid rgba(89, 207, 255, 0.07);

  opacity: 0.5;

  pointer-events: none;

}



.section-orbit::before,

.section-orbit::after {

  content: "";

  position: absolute;

  inset: 24px;

  border-radius: 50%;

  border: 1px solid rgba(89, 207, 255, 0.05);

}



.section-orbit::after {

  inset: 60px;

  border-color: rgba(89, 207, 255, 0.04);

}



@keyframes heroPulse {

  0%, 100% {

    transform: translate3d(0, 0, 0) scale(1);

    opacity: 0.82;

  }

  50% {

    transform: translate3d(-2%, 2%, 0) scale(1.04);

    opacity: 1;

  }

}



@keyframes sweepLine {

  0% {

    transform: translateX(-12%) scaleX(0.8);

    opacity: 0.15;

  }

  50% {

    transform: translateX(8%) scaleX(1);

    opacity: 0.42;

  }

  100% {

    transform: translateX(18%) scaleX(0.82);

    opacity: 0.15;

  }

}



@keyframes slowDrift {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(120px);

  }

}



@keyframes aboutGlow {

  0%, 100% {

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);

    opacity: 1;

  }

  50% {

    box-shadow:

      inset 0 1px 0 rgba(255,255,255,0.03),

      inset 0 0 0 1px rgba(89, 207, 255, 0.05);

    opacity: 1;

  }

}



@keyframes networkShift {

  0%, 100% {

    transform: translate3d(0, 0, 0);

    opacity: 0.28;

  }

  50% {

    transform: translate3d(12px, -8px, 0);

    opacity: 0.46;

  }

}



@keyframes networkShiftAlt {

  0%, 100% {

    transform: translate3d(0, 0, 0);

    opacity: 0.18;

  }

  50% {

    transform: translate3d(-10px, 10px, 0);

    opacity: 0.34;

  }

}



@keyframes waveMove {

  0%, 100% {

    transform: translate3d(0, 0, 0) rotate(-3deg);

  }

  50% {

    transform: translate3d(3%, -8px, 0) rotate(-1deg);

  }

}



@keyframes waveMoveAlt {

  0%, 100% {

    transform: translate3d(0, 0, 0) rotate(2deg);

  }

  50% {

    transform: translate3d(-2%, 10px, 0) rotate(4deg);

  }

}



@keyframes progressFlow {

  0% {

    transform: translateX(-80px);

  }

  100% {

    transform: translateX(120px);

  }

}



@media (max-width: 1080px) {

  .hero-grid,

  .content-grid,

  .status-grid,

  .contact-box {

    grid-template-columns: 1fr;

  }



  .hero {

    min-height: auto;

  }



  .hero-panel {

    max-width: 760px;

  }



  .contact-box {

    gap: 24px;

  }

}



@media (max-width: 760px) {

  .container {

    width: min(var(--container), calc(100% - 28px));

  }



  .site-frame {

    inset: 10px;

    border-radius: 18px;

  }



  .section {

    padding: 92px 0;

  }



  .header-inner {

    min-height: 74px;

  }



  .nav {

    display: none;

  }



  .nav-toggle {

    display: inline-block;

  }



  .mobile-menu.is-open {

    display: block;

  }



  .hero {

    padding-top: 86px;

    padding-bottom: 80px;

  }



  .hero-grid {

    gap: 30px;

  }



  .hero-visual-a {

    width: 90vw;

    height: 90vw;

    right: -28vw;

    top: -20vw;

  }



  .hero-actions {

    flex-direction: column;

    align-items: stretch;

  }



  .btn {

    width: 100%;

  }



  .card,

  .card-large,

  .panel,

  .contact-card,

  .contact-box {

    padding: 24px;

  }



  .footer-inner {

    min-height: auto;

    padding: 22px 0;

    flex-direction: column;

    align-items: flex-start;

  }

}



@media (max-width: 520px) {

  h1 {

    font-size: 2.8rem;

  }



  h2 {

    font-size: 2rem;

  }



  .brand-text small {

    max-width: 180px;

  }



  .eyebrow {

    font-size: 0.68rem;

    letter-spacing: 0.12em;

  }



  .hero-lead {

    font-size: 1.08rem;

  }

}



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    animation: none !important;

    transition: none !important;

  }

}

/* HERO BASE */

.hero {

  position: relative;

  overflow: hidden;

}



/* ANIMATION WRAPPER */

.hero-animation {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

}



/* LINES – ultra subtle */

.hero-animation .line {

  position: absolute;

  top: 40%;

  left: -50%;

  width: 200%;

  height: 1px;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(73, 198, 255, 0.08),

    transparent

  );

  opacity: 0.3;

}



/* different vertical positions */

.hero-animation .line-2 {

  top: 55%;

}



.hero-animation .line-3 {

  top: 70%;

}



/* GLOWING BITS */

.hero-animation .line::after {

  content: "";

  position: absolute;

  top: -2px;

  left: 0%;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #49c6ff;

  box-shadow:

    0 0 6px rgba(73, 198, 255, 0.6),

    0 0 12px rgba(73, 198, 255, 0.4),

    0 0 20px rgba(73, 198, 255, 0.2);

  opacity: 0.8;



  animation: bitFlow 12s linear infinite;

}



/* každá linka jiná rychlost */

.hero-animation .line-2::after {

  animation-duration: 16s;

}



.hero-animation .line-3::after {

  animation-duration: 20s;

}



/* BIT ANIMATION */

@keyframes bitFlow {

  0% {

    left: 0%;

    opacity: 0;

  }

  10% {

    opacity: 0.6;

  }

  50% {

    opacity: 1;

  }

  90% {

    opacity: 0.6;

  }

  100% {

    left: 100%;

    opacity: 0;

  }

}



/* TEXT ABOVE */

.hero-grid {

  position: relative;

  z-index: 2;

}