:root {
  --bg: #0a2038;
  --bg-soft: #123455;
  --card: rgba(255,255,255,.075);
  --card-strong: rgba(255,255,255,.12);
  --text: #f5f8ff;
  --muted: #a9b9cf;
  --blue: #45c7ff;
  --blue-2: #1777ff;
  --green: #34d399;
  --line: rgba(255,255,255,.12);
  --shadow: 0 28px 80px rgba(0,0,0,.32);
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(69,199,255,.30), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(23,119,255,.27), transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(28,139,205,.16), transparent 42%),
    linear-gradient(180deg, #0d2b49 0%, #0a213b 52%, #0b2947 100%);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(69,199,255,.38); outline-offset: 3px; }

.shell {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(8,29,51,.82);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 900;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  color: #03111f;
}

.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.nav-links a {
  text-decoration: none;
}

.nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #03111f;
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
}

.hero {
  padding: 86px 0 48px;
}

.hero-animated {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .76fr);
  gap: clamp(56px, 5vw, 88px);
  align-items: center;
  min-height: 590px;
  padding: 86px 0 58px;
}

.hero-copy { position: relative; z-index: 2; animation: detailFadeUp .7s cubic-bezier(.22,1,.36,1) both; }

.detail-visual {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1.08;
  justify-self: end;
  border: 1px solid rgba(69,199,255,.22);
  border-radius: 36px;
  background: linear-gradient(rgba(69,199,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(69,199,255,.04) 1px, transparent 1px), radial-gradient(circle at 50% 42%, rgba(69,199,255,.16), transparent 62%), rgba(8,30,52,.48);
  background-size: 30px 30px, 30px 30px, auto, auto;
  box-shadow: 0 32px 90px rgba(0,0,0,.28), 0 0 70px rgba(23,119,255,.1);
  overflow: hidden;
  pointer-events: none;
  animation: detailVisualIn .8s cubic-bezier(.22,1,.36,1) .15s both, detailFloat 16s ease-in-out 1s infinite alternate;
}

.detail-visual::before, .detail-visual::after, .detail-visual span { content: ""; position: absolute; display: block; }

.visual-web::before { inset: 18% 12% 21%; border: 1px solid rgba(69,199,255,.48); border-radius: 15px; background: linear-gradient(rgba(69,199,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(69,199,255,.07) 1px, transparent 1px); background-size: 24px 24px; box-shadow: 0 0 42px rgba(69,199,255,.1); }
.visual-web::after { left: 19%; right: 19%; top: 29%; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--green), transparent); box-shadow: 0 34px 0 rgba(69,199,255,.22), 0 58px 0 rgba(69,199,255,.13), 0 82px 0 rgba(52,211,153,.1); transform-origin: left; animation: detailCodeBuild 5s ease-in-out infinite alternate; }
.visual-web span { width: 92px; height: 64px; right: 8%; bottom: 12%; border: 1px solid rgba(52,211,153,.4); border-radius: 12px; background: rgba(7,30,52,.7); box-shadow: -18px -18px 0 -1px rgba(7,30,52,.7), -18px -18px 0 rgba(69,199,255,.2); animation: detailCardFloat 7s ease-in-out infinite alternate; }

.visual-support::before { width: 56%; height: 38%; left: 11%; top: 28%; border: 2px solid rgba(69,199,255,.48); border-radius: 14px; background: linear-gradient(135deg, rgba(69,199,255,.1), transparent); box-shadow: 0 16px 0 -12px rgba(69,199,255,.45), 0 0 46px rgba(69,199,255,.1); }
.visual-support::after { width: 112px; height: 112px; right: 7%; top: 18%; border: 3px solid transparent; border-top-color: rgba(69,199,255,.68); border-right-color: rgba(52,211,153,.42); border-radius: 50%; animation: detailSignal 6s ease-in-out infinite; }
.visual-support span { width: 14px; height: 14px; right: calc(7% + 49px); top: calc(18% + 49px); border-radius: 50%; background: var(--green); box-shadow: 0 0 24px rgba(52,211,153,.62), -90px 92px 0 -3px var(--blue), -90px 92px 22px rgba(69,199,255,.42); }

.visual-care::before { width: 150px; height: 150px; left: 12%; top: 18%; border: 4px solid rgba(69,199,255,.13); border-top-color: rgba(69,199,255,.7); border-right-color: rgba(52,211,153,.42); border-radius: 50%; animation: detailRotate 13s linear infinite; }
.visual-care::after { content: "\2713"; left: calc(12% + 52px); top: calc(18% + 40px); color: rgba(52,211,153,.85); font-size: 44px; font-weight: 900; }
.visual-care span { width: 42%; height: 8px; right: 9%; top: 35%; border-radius: 99px; background: rgba(69,199,255,.4); box-shadow: 0 36px 0 rgba(52,211,153,.26), 0 72px 0 rgba(69,199,255,.18); transform-origin: left; animation: detailStatus 6s ease-in-out infinite alternate; }

.eyebrow {
  margin: 0 0 16px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 900;
}

h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(42px, 7vw, 78px);
  line-height: .96;
  letter-spacing: -.045em;
}

.lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: #dcecff;
  font-size: clamp(18px, 2vw, 22px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.btn {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 900;
}

.btn-primary {
  color: #03111f;
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
}

.btn-secondary {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 32px;
  padding-bottom: 78px;
}

.panel, .side {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  box-shadow: var(--shadow);
}

.panel {
  padding: 34px;
}

.side {
  padding: 26px;
  align-self: start;
  position: sticky;
  top: 98px;
}

h2 {
  margin: 0 0 16px;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.08;
}

h3 {
  margin: 28px 0 12px;
  font-size: 22px;
}

p {
  margin: 0 0 16px;
  color: var(--muted);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  color: #dcecff;
}

li::before {
  content: "✓";
  margin-right: 10px;
  color: var(--green);
  font-weight: 900;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.mini {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
}

.mini strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.mini span {
  color: var(--muted);
}

.service-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.service-list a {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
}

.service-list a:hover {
  color: var(--text);
  border-color: rgba(69,199,255,.36);
}

footer {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: rgba(7,24,43,.76);
}

footer a { color: var(--text); }

@keyframes detailFadeUp { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes detailVisualIn { from { opacity: 0; transform: translate3d(20px,22px,0) scale(.96); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes detailFloat { to { transform: translate3d(0,-10px,0); } }
@keyframes detailCodeBuild { from { transform: scaleX(.42); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }
@keyframes detailCardFloat { to { transform: translate3d(-8px,-8px,0); } }
@keyframes detailSignal { 0%,100% { transform: scale(.8); opacity: .45; } 50% { transform: scale(1.06); opacity: .95; } }
@keyframes detailRotate { to { transform: rotate(360deg); } }
@keyframes detailStatus { from { transform: scaleX(.58); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero-copy, .detail-visual { opacity: 1; transform: none; }
}

@media (min-width: 1440px) {
  :root { --max: 1360px; }
  .hero-animated { grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr); }
  .layout { gap: 40px; }
  .panel { padding: 40px; }
}

@media (max-width: 850px) {
  .nav { align-items: flex-start; flex-direction: column; padding: 16px 0; }
  .nav-links { flex-wrap: wrap; }
  .layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .mini-grid { grid-template-columns: 1fr; }
  .hero-animated { grid-template-columns: 1fr; min-height: auto; gap: 34px; }
  .detail-visual { width: min(100%, 420px); justify-self: center; }
}

@media (max-width: 520px) {
  .shell { width: min(var(--max), calc(100% - 26px)); }
  .panel, .side { padding: 22px; border-radius: 22px; }
  .actions { display: grid; }
  .btn { width: 100%; }
  .hero-animated { padding-top: 58px; }
  .detail-visual { width: min(100%, 320px); border-radius: 28px; }
}