:root {
  --cs3-bg-0: #0a1017;
  --cs3-bg-1: #101824;
  --cs3-bg-2: #182431;
  --cs3-white: rgba(242, 245, 248, 0.97);
  --cs3-muted: rgba(202, 210, 220, 0.48);
  --cs3-accent: #b4e3ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #0a1017;
}

body {
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.cs3-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(50rem 22rem at 50% 30%, rgba(83, 115, 143, 0.16), transparent 62%),
    radial-gradient(24rem 14rem at 68% 24%, rgba(139, 176, 205, 0.08), transparent 60%),
    linear-gradient(180deg, var(--cs3-bg-2) 0%, var(--cs3-bg-1) 58%, var(--cs3-bg-0) 100%);
}

.cs3-atmosphere {
  position: absolute;
  inset: 0;
  opacity: 0.22;
}

.cs3-atmosphere-a {
  background: linear-gradient(98deg, transparent 18%, rgba(180, 227, 255, 0.1) 49%, transparent 78%);
  transform: translateY(-13%) rotate(-6deg);
}

.cs3-atmosphere-b {
  background: linear-gradient(82deg, transparent 28%, rgba(255, 255, 255, 0.06) 50%, transparent 72%);
  transform: translateY(25%) rotate(5deg);
}

.cs3-dot-field {
  position: absolute;
  left: 50%;
  width: min(82vw, 84rem);
  height: 12rem;
  transform: translateX(-50%);
  opacity: 0.52;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.cs3-dot-field::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(191, 205, 219, 0.16) 0 1.8rem,
    transparent 1.8rem 2.6rem
  );
  background-size: 100% 1px;
  background-repeat: repeat-y;
}

.cs3-dot-field-top {
  top: 8.8rem;
}

.cs3-dot-field-bottom {
  bottom: 8.4rem;
}

.cs3-logo-wrap {
  position: absolute;
  left: 50%;
  top: 33.5%;
  transform: translate(-50%, -50%);
  width: min(68vw, 64rem);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.05));
}

.cs3-logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
}

.cs3-logo-glint {
  position: absolute;
  inset: 14% 9%;
  z-index: 3;
  background: linear-gradient(100deg, transparent 24%, rgba(255, 255, 255, 0.015) 43%, rgba(255, 255, 255, 0.52) 50%, rgba(255, 255, 255, 0.015) 57%, transparent 76%);
  mix-blend-mode: screen;
  filter: blur(1px);
  transform: translateX(-124%) skewX(-11deg);
  animation: cs3-logo-glint 8.2s cubic-bezier(.42, 0, .18, 1) infinite;
}

.cs3-divider {
  position: absolute;
  left: 50%;
  top: 50.8%;
  width: min(32rem, 44vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(210, 218, 226, 0.6), transparent);
}

.cs3-capability-block {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  width: min(76rem, 86vw);
  text-align: center;
  padding: 0 1.5rem;
}

.cs3-line {
  position: relative;
  margin: 0.44rem 0;
  color: var(--cs3-muted);
  text-transform: uppercase;
  letter-spacing: 0.31em;
  font-size: clamp(0.8rem, 1.02vw, 1.02rem);
  font-weight: 500;
}

.cs3-line span {
  position: relative;
  z-index: 1;
}

.cs3-line-focus {
  margin-top: 1.08rem;
  color: var(--cs3-white);
  font-size: clamp(1.16rem, 1.62vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-shadow: 0 0 24px rgba(180, 227, 255, 0.18);
}

.cs3-line-glint {
  position: absolute;
  inset: -18% -2%;
  z-index: 2;
  background: linear-gradient(104deg, transparent 34%, rgba(180, 227, 255, 0.0) 44%, rgba(180, 227, 255, 0.24) 49%, rgba(255, 255, 255, 0.92) 50%, rgba(180, 227, 255, 0.24) 51%, rgba(180, 227, 255, 0.0) 56%, transparent 66%);
  mix-blend-mode: screen;
  filter: blur(1px);
  transform: translateX(-136%);
  animation: cs3-focus-sweep 6.2s ease-in-out infinite;
}

.cs3-node {
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--cs3-accent);
  box-shadow: 0 0 0 0.42rem rgba(180, 227, 255, 0.05), 0 0 0.9rem rgba(180, 227, 255, 0.5);
  animation: cs3-node-pulse 5.4s ease-in-out infinite;
}

.cs3-node-1 { left: 18%; top: 25%; animation-delay: 0.2s; }
.cs3-node-2 { right: 16%; top: 30%; animation-delay: 1.2s; }
.cs3-node-3 { left: 25%; bottom: 25%; animation-delay: 2.1s; }
.cs3-node-4 { right: 22%; bottom: 28%; animation-delay: 3.2s; }

.cs3-corner {
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-color: rgba(255, 255, 255, 0.14);
}

.cs3-corner-tl { left: 3.5rem; top: 3.5rem; border-left: 1px solid; border-top: 1px solid; }
.cs3-corner-tr { right: 3.5rem; top: 3.5rem; border-right: 1px solid; border-top: 1px solid; }
.cs3-corner-bl { left: 3.5rem; bottom: 3.5rem; border-left: 1px solid; border-bottom: 1px solid; }
.cs3-corner-br { right: 3.5rem; bottom: 3.5rem; border-right: 1px solid; border-bottom: 1px solid; }

.cs3-contact {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  width: min(78rem, 88vw);
  text-align: center;
  padding: 0 1rem;
}

.cs3-email,
.cs3-email:visited {
  color: rgba(230, 236, 242, 0.86);
  text-decoration: none;
  font-size: clamp(0.78rem, 0.96vw, 0.96rem);
  letter-spacing: 0.24em;
  text-transform: none;
}

.cs3-email:hover {
  color: rgba(255, 255, 255, 0.98);
}

.cs3-address {
  margin: 0.48rem 0 0;
  color: rgba(202, 210, 220, 0.42);
  font-size: clamp(0.56rem, 0.72vw, 0.72rem);
  letter-spacing: 0.16em;
}

@keyframes cs3-logo-glint {
  0%, 74%, 100% { transform: translateX(-124%) skewX(-11deg); opacity: 0; }
  79% { opacity: 0.18; }
  87% { opacity: 0.62; }
  93% { transform: translateX(124%) skewX(-11deg); opacity: 0.08; }
}

@keyframes cs3-focus-sweep {
  0%, 58%, 100% { transform: translateX(-136%); opacity: 0; }
  66% { opacity: 0.34; }
  74% { opacity: 1; }
  84% { transform: translateX(136%); opacity: 0.08; }
}

@keyframes cs3-node-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.22; }
  50% { transform: scale(1.08); opacity: 0.84; }
}

@media (max-width: 1024px) {
  .cs3-logo-wrap {
    top: 28%;
    width: min(82vw, 54rem);
  }

  .cs3-divider {
    top: 42%;
  }

  .cs3-capability-block {
    top: 48%;
    width: min(92vw, 50rem);
  }

  .cs3-dot-field-top {
    top: 5rem;
  }

  .cs3-dot-field-bottom {
    bottom: 5rem;
  }

  .cs3-contact {
    bottom: 1.7rem;
  }
}

@media (max-width: 640px) {
  .cs3-logo-wrap {
    top: 23%;
    width: 88vw;
  }

  .cs3-divider {
    top: 34%;
    width: 72vw;
  }

  .cs3-capability-block {
    top: 39%;
    width: 94vw;
    padding: 0 1rem;
  }

  .cs3-line {
    letter-spacing: 0.16em;
    font-size: clamp(0.72rem, 2.6vw, 0.88rem);
  }

  .cs3-line-focus {
    letter-spacing: 0.16em;
    font-size: clamp(0.9rem, 3.2vw, 1.1rem);
  }

  .cs3-corner {
    width: 3.75rem;
    height: 3.75rem;
  }

  .cs3-corner-tl { left: 1.25rem; top: 1.25rem; }
  .cs3-corner-tr { right: 1.25rem; top: 1.25rem; }
  .cs3-corner-bl { left: 1.25rem; bottom: 1.25rem; }
  .cs3-corner-br { right: 1.25rem; bottom: 1.25rem; }

  .cs3-dot-field {
    width: 92vw;
    height: 8rem;
    opacity: 0.36;
  }

  .cs3-contact {
    bottom: 1.2rem;
  }

  .cs3-email,
  .cs3-address {
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs3-logo-glint,
  .cs3-line-glint,
  .cs3-node {
    animation: none;
  }
}