:root {
  --bg: #03050b;
  --bg-2: #050812;
  --panel: #0a1020cf;
  --panel-strong: #0d1528f0;
  --text: #eef2ff;
  --muted: #9aa6c4;
  --line: #ffffff20;
  --orange: #ff5f1f;
  --orange-soft: #ff8c5f;
  --blue: #4b8bff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 700px at 50% -20%, #121c38 0%, var(--bg) 60%);
  overflow-x: hidden;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(#ffffff08 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.3;
}

.mouse-glow {
  position: fixed;
  width: 440px;
  height: 440px;
  left: -220px;
  top: -220px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #4b8bff25 0%, #ff5f1f1f 35%, transparent 70%);
  filter: blur(20px);
  transform: translate3d(0, 0, 0);
}

.page {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 18px 58px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 12px;
  background: linear-gradient(170deg, #0f1730b8 0%, #0a1020cc 70%);
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 36px #00000070,
    inset 0 1px 0 #ffffff12;
}

.hero {
  text-align: center;
  padding: 16px 24px 32px;
  background:
    radial-gradient(700px 300px at 20% 0%, #4b8bff26 0%, transparent 65%),
    radial-gradient(700px 320px at 90% 0%, #ff5f1f2c 0%, transparent 66%),
    linear-gradient(165deg, #111b35d6 0%, #0c1428f0 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sc-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 180px;
}

.sc-icon-spin {
  position: relative;
  z-index: 3;
  animation: sc-rotate-y 6.2s linear infinite, sc-jump-loop 5.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  filter: drop-shadow(0 8px 18px #ff5f1f66);
  transform-style: preserve-3d;
}

@keyframes sc-rotate-y {
  0% { transform: rotateY(0deg) rotateX(4deg) translateY(var(--jy, 0px)); }
  100% { transform: rotateY(360deg) rotateX(4deg) translateY(var(--jy, 0px)); }
}

@keyframes sc-jump-loop {
  0%, 12%, 100% { --jy: 0px; }
  16% { --jy: -16px; }
  22% { --jy: -10px; }
  28% { --jy: -14px; }
  36% { --jy: -3px; }
  44% { --jy: -7px; }
  52% { --jy: 0px; }
}

.sc-icon {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  object-fit: cover;
  backface-visibility: hidden;
}

.godrays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 180px;
  z-index: 5;
  pointer-events: none;
  animation: godrays-sway 12s ease-in-out infinite;
}

@keyframes godrays-sway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  50% { transform: translate(-50%, -50%) rotate(1.5deg); }
}

.godrays::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 270deg at 50% 100%,
    transparent 0deg,
    rgba(255, 160, 80, 0.08) 8deg,
    rgba(255, 200, 150, 0.18) 16deg,
    rgba(255, 230, 200, 0.12) 22deg,
    transparent 30deg,
    transparent 38deg,
    rgba(255, 160, 80, 0.06) 45deg,
    rgba(255, 200, 150, 0.16) 52deg,
    rgba(255, 230, 200, 0.10) 58deg,
    transparent 66deg,
    transparent 74deg,
    rgba(255, 160, 80, 0.09) 82deg,
    rgba(255, 200, 150, 0.20) 89deg,
    rgba(255, 230, 200, 0.14) 95deg,
    transparent 103deg,
    transparent 111deg,
    rgba(255, 160, 80, 0.07) 118deg,
    rgba(255, 200, 150, 0.17) 125deg,
    rgba(255, 230, 200, 0.11) 131deg,
    transparent 139deg,
    transparent 147deg,
    rgba(255, 160, 80, 0.08) 154deg,
    rgba(255, 200, 150, 0.19) 161deg,
    rgba(255, 230, 200, 0.13) 167deg,
    transparent 175deg,
    transparent 183deg,
    rgba(255, 160, 80, 0.06) 190deg,
    rgba(255, 200, 150, 0.15) 197deg,
    rgba(255, 230, 200, 0.10) 203deg,
    transparent 211deg,
    transparent 219deg,
    rgba(255, 160, 80, 0.08) 226deg,
    rgba(255, 200, 150, 0.18) 233deg,
    rgba(255, 230, 200, 0.12) 239deg,
    transparent 247deg,
    transparent 255deg,
    rgba(255, 160, 80, 0.05) 262deg,
    rgba(255, 200, 150, 0.14) 269deg,
    rgba(255, 230, 200, 0.09) 275deg,
    transparent 283deg
  );
  mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, black 0%, transparent 70%);
}

.godrays::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 270deg at 50% 100%,
    transparent 0deg,
    rgba(255, 100, 60, 0.12) 10deg,
    rgba(255, 180, 130, 0.22) 20deg,
    transparent 30deg,
    transparent 40deg,
    rgba(255, 100, 60, 0.10) 50deg,
    rgba(255, 180, 130, 0.20) 60deg,
    transparent 70deg,
    transparent 80deg,
    rgba(255, 100, 60, 0.14) 90deg,
    rgba(255, 180, 130, 0.24) 100deg,
    transparent 110deg,
    transparent 120deg,
    rgba(255, 100, 60, 0.08) 130deg,
    rgba(255, 180, 130, 0.18) 140deg,
    transparent 150deg,
    transparent 160deg,
    rgba(255, 100, 60, 0.12) 170deg,
    rgba(255, 180, 130, 0.22) 180deg,
    transparent 190deg,
    transparent 200deg,
    rgba(255, 100, 60, 0.10) 210deg,
    rgba(255, 180, 130, 0.20) 220deg,
    transparent 230deg,
    transparent 240deg,
    rgba(255, 100, 60, 0.14) 250deg,
    rgba(255, 180, 130, 0.24) 260deg,
    transparent 270deg,
    transparent 280deg,
    rgba(255, 100, 60, 0.08) 290deg,
    rgba(255, 180, 130, 0.18) 300deg,
    transparent 310deg,
    transparent 320deg,
    rgba(255, 100, 60, 0.12) 330deg,
    rgba(255, 180, 130, 0.22) 340deg,
    transparent 350deg,
    transparent 360deg
  );
  mask-image: radial-gradient(ellipse 80% 120% at 50% 100%, black 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 80% 120% at 50% 100%, black 0%, transparent 65%);
  animation: godrays-pulse 4s ease-in-out infinite alternate;
  opacity: 0.7;
}

@keyframes godrays-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1.04); }
}

.sc-icon-spin {
  position: relative;
  z-index: 3;
  animation: sc-rotate-y 6.2s linear infinite, sc-jump-loop 5.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  filter: drop-shadow(0 8px 18px #ff5f1f66);
  transform-style: preserve-3d;
}

@keyframes sc-rotate-y {
  0% { transform: rotateY(0deg) rotateX(4deg) translateY(var(--jy, 0px)); }
  100% { transform: rotateY(360deg) rotateX(4deg) translateY(var(--jy, 0px)); }
}

@keyframes sc-jump-loop {
  0%, 12%, 100% { --jy: 0px; }
  16% { --jy: -16px; }
  22% { --jy: -10px; }
  28% { --jy: -14px; }
  36% { --jy: -3px; }
  44% { --jy: -7px; }
  52% { --jy: 0px; }
}

.sc-icon {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  object-fit: cover;
  backface-visibility: hidden;
}

.kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

h1 {
  margin: 10px 0;
  font-size: clamp(34px, 7vw, 68px);
  line-height: 1.03;
  text-shadow: 0 0 38px #4b8bff4d;
}

h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.8vw, 34px);
}

h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.subtitle {
  margin: 0 auto;
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.55;
}

.hero-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  background: #ffffff08;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #ffffff45;
  box-shadow: 0 0 22px #4b8bff30;
}

.btn-primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(98deg, var(--orange), var(--orange-soft));
  box-shadow: 0 0 32px #ff5f1f52;
}

.section-note {
  margin: 0 0 16px;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.feature {
  padding: 16px;
  border: 1px solid #ffffff21;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff08, #ffffff03);
}

.feature p,
.panel p,
.list li,
.muted {
  color: var(--muted);
  line-height: 1.6;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.panel {
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
}

.list {
  margin: 0;
  padding-left: 18px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tags span {
  border: 1px solid #ffffff2c;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: #dce5ff;
  background: #ffffff08;
}

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shots img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #ffffff1f;
  box-shadow: 0 20px 50px #00000080;
  cursor: zoom-in;
}

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: #050812e8;
  backdrop-filter: blur(8px);
}

.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lightbox img {
  max-width: min(1200px, 92vw);
  max-height: 78vh;
  border-radius: 14px;
  border: 1px solid #ffffff30;
  box-shadow: 0 24px 60px #000000a6;
}

.lightbox img.is-animating {
  will-change: transform, opacity;
}

.lightbox-meta {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.lightbox p {
  margin: 10px 0 0;
  color: #dbe4ff;
  font-size: 14px;
}

#shot-lightbox-index {
  color: #a8b6da;
  font-size: 13px;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff3a;
  border-radius: 999px;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  background: #0b1226cf;
}

.lightbox-nav {
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff3a;
  border-radius: 999px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  background: #0b1226d9;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.lightbox-nav:hover {
  transform: scale(1.06);
  background: #14214cd9;
  border-color: #ffffff66;
}

.footer {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 12px;
}

.footer a {
  color: #c0d5ff;
  text-decoration: none;
  border-bottom: 1px dotted #c0d5ff70;
}

.footer a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.glow-card {
  position: relative;
}

.glow-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px 80px at 0% 0%, #4b8bff30, transparent 60%);
  opacity: 0.7;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 920px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .sc-icon-wrapper {
    width: 200px;
    height: 180px;
  }

  .sc-icon {
    width: 84px;
    height: 84px;
  }

  .godrays {
    width: 280px;
    height: 140px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }

  .lightbox-stage {
    gap: 8px;
  }

  .feature-grid,
  .split,
  .shots {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 18px;
    border-radius: 18px;
  }

  .hero {
    padding: 30px 16px;
  }
}