:root{
  --accent: #f6978d;
  --accent-dark: #f6878d; /* slight variation as requested */
  --bg: transparent;
}

@font-face{
  font-family: 'Darker Grotesque';
  src: url('Assets/DarkerGrotesque-VariableFont_wght.ttf') format('truetype');
  font-weight: 50;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Darker Grotesque', 'Helvetica Neue', Arial, sans-serif;
  /* do not set background here — project pages set their own background-image (tiles) */
  color:white;
}

.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
}

.circle-wrap{
  width:300px;
  height:300px;
  position:relative;
  display:grid;
  place-items:center;
}

.rotor{
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin:50% 50%;
  animation: spin 16s linear infinite;
}

.circular-text{
  fill: var(--accent-dark);
  stroke: none;
  font-size:18px; /* JS may override this to fit the text */
  letter-spacing:1px;
  font-weight:600;
  dominant-baseline:middle;
}

/* center button */
.center-btn{
  position:absolute;
  width:120px;
  height:120px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-family: 'Darker Grotesque';
  font-weight: 400;
  text-transform:uppercase;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 15px;
  text-decoration: none; /* remove underline for anchor */
  /* flat button: no shadows */
  transition:transform .18s ease;
}
.center-btn:active{transform:translateY(2px) scale(.995)}
.center-btn:hover{transform:translateY(-4px) scale(1.02)}

/* Accessible focus ring for keyboard users */
.center-btn:focus-visible{
  outline: 3px solid rgba(246,151,141,0.28);
}

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

/* Responsive smaller screens */
@media (max-width:480px){
  .circle-wrap{width:320px;height:320px}
  .center-btn{width:96px;height:96px;font-size:15px}
  .circular-text{font-size:14px}
}