/* Base reset */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  color: #fff;

  background: #000 url('banner.jpg') center / cover fixed no-repeat;

  overflow: hidden;

}



/* Dark overlay for readability */

.backdrop {

  position: fixed;

  inset: 0;

  background: radial-gradient(1200px 800px at 70% 10%, rgba(0,0,0,0.25), transparent 60%),

              linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75));

  pointer-events: none;

  z-index: 0;

}



/* Floating colorful blobs */

.animated-shapes { position: fixed; inset: 0; z-index: 1; filter: blur(36px) saturate(140%); opacity: .35; }

.blob {

  --x: 50%;

  --y: 50%;

  --size: 30vmin;

  --hue: 260;

  --delay: 0s;

  position: absolute;

  left: var(--x);

  top: var(--y);

  width: var(--size);

  height: var(--size);

  transform: translate(-50%, -50%);

  background: radial-gradient(circle at 30% 30%, hsl(var(--hue) 80% 60% / .7), transparent 60%),

              radial-gradient(circle at 70% 70%, hsl(calc(var(--hue) + 40) 80% 60% / .6), transparent 60%);

  border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;

  animation: float 16s ease-in-out infinite var(--delay), morph 22s ease-in-out infinite var(--delay);

}



@keyframes float {

  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }

  25%      { transform: translate(-50%, -50%) translate(-2vmin, 3vmin); }

  50%      { transform: translate(-50%, -50%) translate(2vmin, -1vmin); }

  75%      { transform: translate(-50%, -50%) translate(1vmin, 2vmin); }

}

@keyframes morph {

  0%, 100% { border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; }

  50%      { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }

}



/* Centered content */

.content {

  position: relative;

  z-index: 2;

  min-height: 100svh;

  display: grid;

  place-items: center;

  padding: 6vmin 4vmin;

  text-align: center;

}



.brand {

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  margin-bottom: 1rem;

  opacity: .9;

}



.title {

  font-size: clamp(28px, 5.5vw, 64px);

  margin: .25rem 0 .75rem;

  line-height: 1.15;

  text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 24px rgba(255,255,255,.12);

  animation: glow 4s ease-in-out infinite;

}



.subtitle {

  font-size: clamp(14px, 2.1vw, 18px);

  opacity: .9;

  margin: 0 0 1.5rem;

}



@keyframes glow {

  0%, 100% { text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 18px rgba(0, 221, 255, .25), 0 0 36px rgba(0, 221, 255, .15); }

  50%      { text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 28px rgba(255, 0, 179, .35), 0 0 56px rgba(255, 0, 179, .20); }

}



/* Progress bar */

.progress {

  --track: rgba(255,255,255,.18);

  --fill:  linear-gradient(90deg, #00ddff, #ff00b3);

  width: min(560px, 92vw);

  height: 10px;

  background: var(--track);

  border-radius: 999px;

  overflow: hidden;

  margin: 0 auto 1.75rem;

  box-shadow: inset 0 0 14px rgba(0,0,0,.35);

}

.progress .bar {

  display: block;

  width: 70%;

  height: 100%;

  background: var(--fill);

  background-size: 200% 100%;

  animation: moveBar 8s ease-in-out infinite;

}

@keyframes moveBar {

  0%, 100% { background-position: 0% 50%; }

  50%      { background-position: 100% 50%; }

}



/* Contact chips */

.contact {

  list-style: none;

  display: grid;

  grid-template-columns: repeat(1, minmax(0, 1fr));

  gap: .75rem;

  padding: 0;

  margin: 0 0 1.25rem;

}

@media (min-width: 720px) {

  .contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

.chip {

  display: flex;

  align-items: center;

  gap: .6rem;

  padding: .9rem 1rem;

  border-radius: 14px;

  background: rgba(255,255,255,.08);

  color: #fff;

  text-decoration: none;

  border: 1px solid rgba(255,255,255,.12);

  transition: transform .2s ease, background .2s ease, border-color .2s ease;

  backdrop-filter: blur(6px);

}

.chip:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

.chip:active { transform: translateY(0); }

.chip .icon { font-size: 1.1rem; }

.chip .text { font-size: .98rem; line-height: 1.25; }



.footer { opacity: .7; font-size: .9rem; }



/* Accessibility focus */

a:focus-visible { outline: 2px solid #00ddff; outline-offset: 2px; border-radius: 8px; }