@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ========== FIX 1: Gradient covers EVERYTHING (kills the bottom band) ========== */
html,
body {
  min-height: 100%;
  margin: 0;
  background: linear-gradient(
    180deg,
    #7096D1 0%,
    #a7c7e7 30%,
    #d0e3ff 60%,
    #f5f9ff 100%
  );
}

body {
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #132042;
}

/* Keyframes */
@keyframes appear{
  0%{ top:0; transform-origin:5rem 0; }
  100%{ top:-25rem; transform-origin:5rem 25rem; }
}
@keyframes menu-rotation{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(359deg); } }
@keyframes scaling{ 0%{ transform:scale(1); } 50%{ transform:scale(1.2);} 100%{ transform:scale(1);} }

/* Orbital menu base */
.orbital-menu{ 
  position:relative; 
  --orbit: clamp(150px, 20vw, 200px); /* controls orbit radius */
  --center-offset-x: 0px;   /* manual nudge horizontally (+right / -left) */
  --center-offset-y: 0px;   /* manual nudge vertically   (+down  / -up)   */
  --angle-1: 0deg;
  --angle-2: 90deg;
  --angle-3: 180deg;
  --angle-4: 270deg;
}

/* List (rotating ring) */
.orbital-menu__list{
  position:absolute;
  top:50%;
  left:50%;
  animation:menu-rotation linear 60s infinite;
  transform: translate(-50%, -50%);
  width:0;
  height:0;
}
.orbital-menu__list:hover{ animation-play-state:paused; }
.orbital-menu__list:hover .orbital-menu__link > *{ animation-play-state:paused; }

/* Items placed around circle */
.orbital-menu__item{
  position:absolute;
  animation:appear 2s forwards;
  left:-5rem;
  top:0;
  transform-origin:5rem 0;
}

/* Expanded Sass @for (2..8) */
.orbital-menu__item:nth-child(2){ animation-delay:0.1s; transform:rotate(45deg); }
.orbital-menu__item:nth-child(2) .orbital-menu__link{ transform:rotate(-45deg); }
.orbital-menu__item:nth-child(2) .orbital-menu__link:before{ background:white; animation-delay:0.33s; }

.orbital-menu__item:nth-child(3){ animation-delay:0.2s; transform:rotate(90deg); }
.orbital-menu__item:nth-child(3) .orbital-menu__link{ transform:rotate(-90deg); }
.orbital-menu__item:nth-child(3) .orbital-menu__link:before{ background:#D0E3FF; animation-delay:0.66s; }

.orbital-menu__item:nth-child(4){ animation-delay:0.3s; transform:rotate(135deg); }
.orbital-menu__item:nth-child(4) .orbital-menu__link{ transform:rotate(-135deg); }
.orbital-menu__item:nth-child(4) .orbital-menu__link:before{ background:#7096D1; animation-delay:0.99s; }

.orbital-menu__item:nth-child(5){ animation-delay:0.4s; transform:rotate(180deg); }
.orbital-menu__item:nth-child(5) .orbital-menu__link{ transform:rotate(-180deg); }
.orbital-menu__item:nth-child(5) .orbital-menu__link:before{ background:hsl(180deg 100% 65%); animation-delay:1.32s; }

.orbital-menu__item:nth-child(6){ animation-delay:0.5s; transform:rotate(225deg); }
.orbital-menu__item:nth-child(6) .orbital-menu__link{ transform:rotate(-225deg); }
.orbital-menu__item:nth-child(6) .orbital-menu__link:before{ background:hsl(225deg 100% 65%); animation-delay:1.65s; }

.orbital-menu__item:nth-child(7){ animation-delay:0.6s; transform:rotate(270deg); }
.orbital-menu__item:nth-child(7) .orbital-menu__link{ transform:rotate(-270deg); }
.orbital-menu__item:nth-child(7) .orbital-menu__link:before{ background:hsl(270deg 100% 65%); animation-delay:1.98s; }

.orbital-menu__item:nth-child(8){ animation-delay:0.7s; transform:rotate(315deg); }
.orbital-menu__item:nth-child(8) .orbital-menu__link{ transform:rotate(-315deg); }
.orbital-menu__item:nth-child(8) .orbital-menu__link:before{ background:hsl(315deg 100% 65%); animation-delay:2.31s; }

/* Link (circle + inner content) */
.orbital-menu__link{ position:relative; display:block; height:10rem; width:10rem; }
.orbital-menu__link:before{
  content:""; position:absolute; inset:0; background:#334EAC; border-radius:50%; animation:scaling linear 3s infinite;
}
.orbital-menu__link > *{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; animation: none; transition:250ms ease all;
}
.orbital-menu__link-text{ opacity:0; text-align:center; color:#fff; }
.orbital-menu__link-icon{ color:rgba(0,0,0,0.8); }
.orbital-menu__link:hover:before{ animation-play-state:paused; filter:brightness(0.7); }
.orbital-menu__link:hover .orbital-menu__link-text{ opacity:1; }
.orbital-menu__link:hover .orbital-menu__link-icon{ opacity:0; }

/* Center picture */
.orbital-menu__center-pic{ 
  position:relative; 
  width:22rem; 
  height:22rem;               /* fixed to logo image box */
  overflow:visible; 
  border-radius:4rem; 
  text-align: center;
}
.orbital-menu__center-pic > img{ 
  position: static; 
  display:block;
  margin:0 auto; 
  max-width:100%; 
  height:auto; 
  transition:500ms ease all; 
}

.orbital-menu__center-pic .orbital-menu__tagline{
  position: absolute;
  top: calc(100% + 4px);    /* move it closer under the logo */
  left: 50%;
  transform: translateX(-50%);
  max-width: 80rem;         /* constrains width so it wraps to ~2 lines */
  line-height: 1.2;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 24px);
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  margin: 0;
}

.orbital-menu__center-pic:hover > img:last-child{ 
  opacity:0; 
}

.index-hero {
  min-height: 100vh;            /* take full viewport height */
  display: flex;                
  flex-direction: column;       /* stack heading, text, menu */
  align-items: center;          /* center horizontally */
  justify-content: center;      /* center vertically */
  text-align: center;
}

/* === Layout overrides for even spacing and proper tagline placement === */
.orbital-menu{ 
  --orbit: clamp(180px, 20vw, 280px);
  display:grid;
  place-items:center;
}

/* Position list items around the center */
.orbital-menu__list{ 
  position:absolute; 
  top:50%; 
  left:50%; 
  transform: translate(calc(-50% + var(--center-offset-x)), calc(-50% + var(--center-offset-y)));
  list-style:none; margin:0; padding:0; width:0; height:0;
}

.orbital-menu__item{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center center;
  animation:none; /* stop the initial appear layout trick */
}
.orbital-menu__item::marker{ content: none; }
/* Four evenly spaced positions */
.orbital-menu__item:nth-child(1){
  transform: translate(-50%, -50%) rotate(var(--angle-1)) translate(var(--orbit)) rotate(calc(-1 * var(--angle-1)));
}
.orbital-menu__item:nth-child(2){
  transform: translate(-50%, -50%) rotate(var(--angle-2)) translate(var(--orbit)) rotate(calc(-1 * var(--angle-2)));
}
.orbital-menu__item:nth-child(3){
  transform: translate(-50%, -50%) rotate(var(--angle-3)) translate(var(--orbit)) rotate(calc(-1 * var(--angle-3)));
}
.orbital-menu__item:nth-child(4){
  transform: translate(-50%, -50%) rotate(var(--angle-4)) translate(var(--orbit)) rotate(calc(-1 * var(--angle-4)));
}

/* Ensure orbiting elements are circular and centered */
.orbital-menu__link{
  display:grid;
  place-items:center;
  width: clamp(90px, 10vw, 140px);
  height: clamp(90px, 10vw, 140px);
  border-radius:50%;
}