/* One-page hero — page-specific styles (overrides shared styles.css) */

/* centered "Gozillion" logo header */
.one-logo-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding-top: 105px;
}
.one-logo-bar .container { text-align: center; }

/* Requested: Gozillion = 48pt */
.one-logo {
  font-size: 48pt;
  line-height: 1;
  background: linear-gradient(120deg, #f0f0ff 0%, #c8c4ff 34%, #9fc7ff 68%, #d7b8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 34px rgba(157, 123, 255, 0.22);
}

/* Requested: second and next text sets = 38px */
.hero h1 {
  font-size: 38px;
  line-height: 1.12;
  max-width: 820px;
}

.hero p.lead {
  font-size: 38px;
  line-height: 1.18;
  max-width: 920px;
}

/* Dark purple/blue shifting hero with wide roaming spotlight */
.hero {
  background:
    radial-gradient(1100px 650px at 15% 18%, rgba(52, 32, 116, 0.58), transparent 58%),
    radial-gradient(900px 620px at 88% 72%, rgba(14, 62, 130, 0.46), transparent 60%),
    linear-gradient(135deg, #050716 0%, #0b1230 34%, #160b38 68%, #06112c 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(185, 201, 255, 0.18) 0%,
    rgba(129, 110, 255, 0.12) 24%,
    rgba(70, 96, 180, 0.05) 43%,
    transparent 68%);
  filter: blur(32px);
  mix-blend-mode: screen;
  animation: roamingSpotlight 18s ease-in-out infinite alternate;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(188, 184, 255, 0.06) 44%,
    rgba(132, 180, 255, 0.08) 50%,
    rgba(188, 184, 255, 0.06) 56%,
    transparent 100%);
  opacity: 0.65;
  transform: translateX(-25%) rotate(-8deg);
  animation: spotlightSweep 22s ease-in-out infinite;
}

@keyframes roamingSpotlight {
  0%   { transform: translate(-18%, -10%) scale(1.05) rotate(-8deg); }
  35%  { transform: translate(18%, 6%) scale(1.18) rotate(6deg); }
  70%  { transform: translate(-4%, 20%) scale(1.08) rotate(14deg); }
  100% { transform: translate(22%, -6%) scale(1.22) rotate(-4deg); }
}

@keyframes spotlightSweep {
  0%, 100% { transform: translateX(-45%) rotate(-8deg); opacity: 0.35; }
  50%      { transform: translateX(35%) rotate(-8deg); opacity: 0.72; }
}

@media (max-width: 768px) {
  .one-logo { font-size: 42pt; }
  .hero h1,
  .hero p.lead { font-size: 30px; }
}