:root {
  --primary: #004aad;
  --white: #ffffff;
  --bg-dark: #00132b;
  /*--accent: #ffffff;*/
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: var(--bg-dark);
  color: var(--white);
  overflow-x: hidden;
}

/* ---------- HERO ---------- */

.hero-section {
  min-height: 100vh;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*text-align: center;*/
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-dark), #002249 60%);
}

/* Stars background */

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

.hero-heading {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--white), #426087);
  -webkit-background-clip: text;
  color: transparent;
}

.hero-subtext {
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
  opacity: .9;
}

.cta-btn {
  display: inline-block;
  padding: .75rem 2rem;
  border: 2px solid var(--primary);
  border-radius: 50px;
  font-weight: 600;
  background: transparent;
  color: var(--primary);
  position: relative;
  overflow: hidden;
  transition: .3s;
  z-index: 1;
  margin-bottom: 2.5rem;
}

.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--primary);
  z-index: -1;
  transition: .3s;
}

.cta-btn:hover {
  color: var(--bg-dark);
}

.cta-btn:hover::before {
  width: 100%;
}

/* ---------- ORBITS ---------- */

.tech-orbit {
  position: relative;
  inline-size: 100%;
  max-inline-size: 550px;
  aspect-ratio: 1;
  margin-inline: auto;
}

.orbit {
  --radius-px: 200px;
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  animation: spin 40s linear infinite;
}

.orbit.inner {
  inline-size: min(60vw, 320px);
  block-size: min(60vw, 320px);
  animation-duration: 25s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ----- icon slot (now uses --radius-px) ----------------------------- */

.tech-icon {
  --total: 8;
  position: absolute;
  top: 50%;
  left: 50%;
  inline-size: clamp(40px, 6vw, 60px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(360deg/var(--total)*var(--i))) translateX(var(--radius-px)) rotate(calc(-360deg/var(--total)*var(--i)));
}

.orbit.inner .tech-icon {
  --total: 6;
}

/* visible circle & counter-spin */

.icon-body {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.8rem;
  box-shadow: 0 0 15px rgba(0, 118, 255, .25);
  transition: .3s ease;
  animation: counter var(--spin, 40s) linear infinite;
}

@keyframes counter {
  to {
    transform: rotate(-360deg);
  }
}

.icon-body:hover {
  /*transform: scale(1.15) !important;*/
  box-shadow: 0 0 25px var(--primary);
  color: var(--primary);
}

/* Brand colors for technology icons */
/* .icon-body i.devicon-bootstrap-plain {
  color: #6600ff;
}

.icon-body i.devicon-jquery-plain {
  color: #0095ff;
}

.icon-body i.fab.fa-vuejs {
  color: #00ff8c;
}

.icon-body i.devicon-csharp-plain {
  color: #09ff00;
}

.icon-body i.fab.fa-css3-alt {
  color: #0095ff;
}

.icon-body i.devicon-microsoftsqlserver-plain {
  color: #ff0400;
}

.icon-body i.devicon-ionic-original {
  color: #005eff;
}

.icon-body i.devicon-dotnetcore-plain {
  color: #3700ff;
} */

/* ----- centre logo --------------------------------------------------- */

.company-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 3;
  inline-size: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 118, 255, .3);
  box-shadow: 0 0 30px rgba(0, 118, 255, .2);
}

.company-logo img {
  max-inline-size: 70%;
  filter: drop-shadow(0 0 10px rgba(0, 118, 255, .7));
}

@media (max-width:576px) {
  .hero-heading {
    font-size: 2.4rem;
  }
}

@media (max-width:576px) {
  .icon-body {
    font-size: 1.4rem;
  }
}