:root{ --bg:#0b1224; --card:#0f1730; --ink:#eaf4ff; --accent:#14f1ff; }
*{ box-sizing:border-box }
body{ margin:0; font-family:system-ui, Segoe UI, Inter, Roboto; background:var(--bg); color:var(--ink); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Hero video background */
#hero-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* makes sure it fills screen without distortion */
  z-index: -1;          /* keep it behind content */
  opacity: 0.25;        /* faint so text/images pop above */
}

/* Centered container */
.hero{
  width:min(95vw, 1180px);
  margin:18px auto 10px;
}
.hero *{ background:transparent !important; }

/* Aspect-ratio frame prevents cropping */
.hero-media{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;          /* <- change to 21/9 if you prefer wider */
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* Image and video fill the frame but NEVER crop the image */
.hero-media img,
#hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;            /* ensures full image is visible */
}

/* Slide images framed, not cropped */
.hero-media img {
  max-width: 85%;          /* Bigger, but not full screen */
  max-height: 85vh;
  object-fit: contain;      /* Keep proportions */
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
}

/* Bottom-right holo watermark */
.watermark-holo {
  position: fixed;
  bottom: 90px;    /* was 20px → now sits above CTA */
  right: 20px;
  font-size: 24px; /* a little smaller so it's subtle */
  font-weight: bold;
  color: cyan;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
  font-family: 'Orbitron', sans-serif;
  opacity: 0.85;
  z-index: 1000;
  animation: pulse 3s infinite ease-in-out;
}

/* Video sits behind image for ambience - now handled by full-screen background */
.hero-media img{ z-index:1; filter:brightness(1.08) contrast(1.05) saturate(1.06); }

/* Web3 CV holo */
#web3-holo{
  position:absolute; left:50%; top:12%; transform:translateX(-50%);
  width:150px; z-index:2; pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(20,241,255,.9));
  animation:spin 22s linear infinite, pulse 4s ease-in-out infinite;
}
#web3-holo img{ width:100%; height:auto; display:block; }
@keyframes spin{ from{ transform:translateX(-50%) rotate(0) } to{ transform:translateX(-50%) rotate(360deg) } }
@keyframes pulse{ 0%,100%{ opacity:.72; transform:translateX(-50%) scale(1) } 50%{ opacity:1; transform:translateX(-50%) scale(1.08) } }

/* Caption (no white box) */
.caption{
  position:relative;
  margin:10px auto 0;
  display:inline-block;
  left:50%; transform:translateX(-50%);
  color:var(--ink); text-align:center;
  padding:10px 14px; border:1px solid #1a2d55;
  border-radius:12px; background:rgba(6,16,36,.75); backdrop-filter: blur(6px);
  opacity:0; transition:opacity .35s ease;
}
.caption.show{ opacity:1; }

/* Controls: clearer visual and larger tap targets */
.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px 0;
  position: relative;
  z-index: 100;            /* above video/image */
}

.controls button {
  background: #061024;
  color: var(--ink);
  border: 1px solid #1a2d55;
  padding: 14px 20px;      /* larger touch area */
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}

.controls button:hover {
  border-color: var(--accent);
  background: #0b1932;
}

.controls button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(20,241,255,.25);
}

/* Safety: hide truly empty images (prevents "white box" if src is missing) */
img:not([src]), img[src=""]{ display:none !important; }

#cta {
  position: absolute;
  bottom: 15%;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.cta-button {
  display: inline-block;
  background: var(--accent);
  color: #001018;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 1.2em;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(20, 241, 255, 0.5);
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(20, 241, 255, 0.8);
}

/* Mobile tweaks */
@media (max-width: 640px){
  #web3-holo{ width:120px; top:10%; }
  .caption{ font-size:.95rem; }
}