/* ============================================
   RESTROY Cinematic Preloader
   Namespace: .restroy-intro
   ============================================ */
@import url("responsive.css");

/* === Prevent any flash: hide body overflow default handled by JS === */

/* === Preloader Overlay === */
.restroy-intro {
  /* Shared motion + brand color tokens (equal grade everywhere) */
  --rest-900: #7f1d1d;
  --rest-800: #991b1b;
  --rest-700: #b91c1c;
  --rest-grade: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 42%, #991b1b 78%, #7f1d1d 100%);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-window: cubic-bezier(0.77, 0, 0.175, 1);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: transparent;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  perspective: 1600px;
}
/* Animated red window panels — identical grade, mirrored motion */
.restroy-intro::before,
.restroy-intro::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  z-index: 0;
  background-color: var(--rest-900);
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    linear-gradient(135deg, #7f1d1d 0%, #b91c1c 42%, #991b1b 78%, #7f1d1d 100%);
  background-size: 200vw 200vh, 200vw 200vh;
  transition: transform 0.95s var(--ease-window), opacity 0.95s var(--ease-soft);
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
.restroy-intro::before {
  left: 0;
  transform-origin: left center;
  animation: restIntroRedBgL 5.2s ease-in-out infinite;
}
.restroy-intro::after {
  right: 0;
  transform-origin: right center;
  animation: restIntroRedBgR 5.2s ease-in-out infinite;
}
@keyframes restIntroRedBgL {
  0%, 100% { background-position: 0 50%, 0 50%; filter: brightness(1) saturate(1); }
  50% { background-position: -10vw 50%, -10vw 50%; filter: brightness(1.05) saturate(1.04); }
}
@keyframes restIntroRedBgR {
  0%, 100% { background-position: -50vw 50%, -50vw 50%; filter: brightness(1) saturate(1); }
  50% { background-position: -60vw 50%, -60vw 50%; filter: brightness(1.05) saturate(1.04); }
}

/* Body scroll lock while intro is active */
body.restroy-intro-active {
  overflow: hidden;
  height: 100%;
}

/* === 3D Stage === */
.restroy-intro__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: 1400px;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* === Logo === */
.restroy-intro__logo {
  position: absolute;
  z-index: 100;
  text-align: center;
  opacity: 0;
  transform: scale(0.86) translateY(16px);
  animation: restroyLogoIn 1.15s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.08s forwards;
  transition: opacity 0.7s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.7s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform, opacity;
}
/* Soft halo behind logo for richer grade */
.restroy-intro__logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 280%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14) 0%, transparent 62%);
  pointer-events: none;
  z-index: -1;
  animation: restLogoHalo 3.6s ease-in-out infinite;
}
/* Fade logo out while card images take over (red bg stays till exit) */
.restroy-intro.is-cards-entering .restroy-intro__logo {
  opacity: 0 !important;
  transform: scale(1.08) translateY(-8px) !important;
  animation: none !important;
  pointer-events: none;
}
.restroy-intro__logo img {
  display: block;
  height: 96px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.12));
}
@keyframes restroyLogoIn {
  0% { opacity: 0; transform: translateY(22px) scale(0.78); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes restroyLogoBreath {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 1; }
}
@keyframes restLogoHalo {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.06); }
}

/* === Card Base State (hidden, off-screen) === */
.restroy-intro__card {
  --card-s: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(280px, 32vw, 560px);
  aspect-ratio: 16 / 10;
  transform-origin: center center;
  border-radius: 18px;
  overflow: hidden;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  /* Same brand grade as red panels so screenshots match */
  background-color: #7f1d1d;
  background-image: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 42%, #991b1b 78%, #7f1d1d 100%);
  background-size: cover;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .25);
  opacity: 0;
  filter: blur(8px) saturate(1.05);
  transform: translate3d(-50%, -50%, 0) translate3d(var(--e-x, -120vw), var(--e-y, 0), 0) rotate(var(--e-r, -15deg)) scale(calc(var(--e-s, .65) * var(--card-s, 1)));
  transition:
    transform 1.15s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)) var(--delay, 0s),
    opacity 0.95s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)) var(--delay, 0s),
    filter 0.95s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)) var(--delay, 0s),
    box-shadow 0.95s ease var(--delay, 0s);
}
.restroy-intro__card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  animation: float 20s ease-in-out infinite;
  /* Keep red bg visible if image fails/loads late */
  background: transparent;
}
/* Equal color grade — soft red wash ties every screenshot to panel palette */
.restroy-intro__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.42) 0%, rgba(185, 28, 28, 0.22) 42%, rgba(153, 27, 27, 0.4) 100%),
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
  mix-blend-mode: soft-light;
  opacity: 0.85;
  transition: opacity 0.7s ease;
}
.restroy-intro.is-cards-scatter .restroy-intro__card::after {
  opacity: 0.45;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-14px) scale(1.015); }
}

/* Per-card position / timing variables (wider, smoother stagger) */
.restroy-intro__card:nth-child(1) { --delay: 0.00s; --e-x: -120vw; --e-y: -10vh; --e-r: -15deg; --e-s: .65; --st-x: -100px; --st-y: 30px; --st-r: -8deg; --st-s: .82; --rw-x: -700px; --rw-y: 40px; --rw-r: -8deg; --sc-x: -120vw; --sc-y: -100vh; --sc-r: -35deg; }
.restroy-intro__card:nth-child(2) { --delay: 0.07s; --e-x: 120vw; --e-y: 5vh; --e-r: 15deg; --e-s: .65; --st-x: 80px; --st-y: -20px; --st-r: 7deg; --st-s: .82; --rw-x: -520px; --rw-y: -20px; --rw-r: -5deg; --sc-x: 0vw; --sc-y: -120vh; --sc-r: 30deg; }
.restroy-intro__card:nth-child(3) { --delay: 0.14s; --e-x: -10vw; --e-y: -120vh; --e-r: -10deg; --e-s: .65; --st-x: -40px; --st-y: -80px; --st-r: -5deg; --st-s: .88; --rw-x: -340px; --rw-y: 10px; --rw-r: -3deg; --sc-x: 120vw; --sc-y: -100vh; --sc-r: 40deg; }
.restroy-intro__card:nth-child(4) { --delay: 0.21s; --e-x: 10vw; --e-y: 120vh; --e-r: 10deg; --e-s: .65; --st-x: 30px; --st-y: 70px; --st-r: 6deg; --st-s: .86; --rw-x: -160px; --rw-y: -10px; --rw-r: -1deg; --sc-x: 120vw; --sc-y: 0vh; --sc-r: 35deg; }
.restroy-intro__card:nth-child(5) { --delay: 0.28s; --e-x: -100vw; --e-y: -100vh; --e-r: -20deg; --e-s: .60; --st-x: -130px; --st-y: -30px; --st-r: -12deg; --st-s: .78; --rw-x: 40px; --rw-y: 0px; --rw-r: 0deg; --sc-x: 100vw; --sc-y: 100vh; --sc-r: -35deg; }
.restroy-intro__card:nth-child(6) { --delay: 0.35s; --e-x: 100vw; --e-y: -100vh; --e-r: 20deg; --e-s: .60; --st-x: 130px; --st-y: 20px; --st-r: 12deg; --st-s: .78; --rw-x: 240px; --rw-y: 10px; --rw-r: 2deg; --sc-x: 0vw; --sc-y: 120vh; --sc-r: 30deg; }
.restroy-intro__card:nth-child(7) { --delay: 0.42s; --e-x: -100vw; --e-y: 100vh; --e-r: 18deg; --e-s: .60; --st-x: -60px; --st-y: 100px; --st-r: -7deg; --st-s: .75; --rw-x: 440px; --rw-y: -15px; --rw-r: 5deg; --sc-x: -100vw; --sc-y: 100vh; --sc-r: -40deg; }
.restroy-intro__card:nth-child(8) { --delay: 0.49s; --e-x: 100vw; --e-y: 100vh; --e-r: -18deg; --e-s: .60; --st-x: 70px; --st-y: -100px; --st-r: 8deg; --st-s: .75; --rw-x: 640px; --rw-y: 30px; --rw-r: 8deg; --sc-x: -120vw; --sc-y: 0vh; --sc-r: -30deg; }

/* ============================================
   PHASE: Cards enter / fly toward center
   ============================================ */
.restroy-intro.is-cards-entering .restroy-intro__card {
  opacity: 1;
  filter: blur(0) saturate(1.05);
  transition-duration: 1.15s, 0.95s, 0.95s, 0.95s;
  transition-timing-function: var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  transform: translate3d(-50%, -50%, 0) translate3d(var(--st-x, 0), var(--st-y, 0), 0) rotate(var(--st-r, 0deg)) scale(var(--st-s, .8));
}

/* ============================================
   PHASE: Cards gather / overlap at center (settle + breathe)
   ============================================ */
.restroy-intro.is-cards-gathered .restroy-intro__card {
  --delay: 0s;
  opacity: 1;
  filter: none;
  transition-duration: 0.85s, 0.65s, 0.65s, 0.65s;
  transition-timing-function: var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  animation: restStackPulse 2.4s ease-in-out 0.25s infinite;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--st-x, 0), var(--st-y, 0), 0) rotate(var(--st-r, 0deg)) scale(var(--st-s, .82));
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .28);
}
@keyframes restStackPulse {
  0%, 100% { box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .28); }
  50% { box-shadow: 0 48px 112px rgba(0, 0, 0, .52), 0 14px 36px rgba(0, 0, 0, .32); }
}

/* ============================================
   PHASE: Horizontal arrangement
   ============================================ */
.restroy-intro.is-cards-horizontal .restroy-intro__card {
  --delay: 0s;
  opacity: 1;
  animation: none;
  filter: none;
  transition-duration: 0.85s, 0.65s, 0.65s, 0.65s;
  transition-timing-function: var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  transform: translate3d(-50%, -50%, 0) translate3d(var(--rw-x, 0), var(--rw-y, 0), 0) rotate(var(--rw-r, 0deg)) scale(1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25);
}
/* Center card slightly dominant */
.restroy-intro.is-cards-horizontal .restroy-intro__card:nth-child(5) {
  transform: translate3d(-50%, -50%, 0) translate3d(var(--rw-x, 0), var(--rw-y, 0), 0) rotate(var(--rw-r, 0deg)) scale(1.08);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .32);
}

/* ============================================
   PHASE: Horizontal hold (subtle light sweep)
   ============================================ */
.restroy-intro.is-cards-hold .restroy-intro__card {
  --delay: 0s;
  transition-duration: 0.85s, 0.65s, 0.65s, 0.65s;
  animation: restHoldPulse 2.8s ease-in-out infinite;
}
@keyframes restHoldPulse {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.05) saturate(1.06); }
}

/* ============================================
   PHASE: Zoom forward (scale 1 -> 1.3)
   ============================================ */
.restroy-intro.is-cards-zoom .restroy-intro__card {
  --card-s: 1.3;
  --delay: 0s;
  opacity: 1;
  animation: none;
  transition-duration: 0.85s, 0.65s, 0.65s, 0.65s;
  transition-timing-function: var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  transform: translate3d(-50%, -50%, 0) translate3d(var(--rw-x, 0), var(--rw-y, 0), 0) rotate(var(--rw-r, 0deg)) scale(calc(var(--rw-s, 1) * var(--card-s, 1.3)));
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6), 0 16px 40px rgba(0, 0, 0, .35);
}
.restroy-intro.is-cards-zoom .restroy-intro__card:nth-child(5) {
  --card-s: 1.4;
  z-index: 40;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--rw-x, 0), var(--rw-y, 0), 0) rotate(var(--rw-r, 0deg)) scale(calc(var(--rw-s, 1) * var(--card-s, 1.4)));
  box-shadow: 0 60px 140px rgba(0, 0, 0, .7), 0 20px 48px rgba(0, 0, 0, .4);
}

/* ============================================
   PHASE: Large zoom (scale -> 1.65)
   ============================================ */
.restroy-intro.is-cards-bigzoom .restroy-intro__card {
  --card-s: 1.65;
  --delay: 0s;
  opacity: 1;
  animation: none;
  transition-duration: 0.9s, 0.7s, 0.7s, 0.7s;
  transition-timing-function: var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  transform: translate3d(-50%, -50%, 0) translate3d(var(--rw-x, 0), var(--rw-y, 0), 0) rotate(var(--rw-r, 0deg)) scale(calc(var(--rw-s, 1) * var(--card-s, 1.65)));
  box-shadow: 0 70px 160px rgba(0, 0, 0, .75), 0 24px 56px rgba(0, 0, 0, .45);
}
.restroy-intro.is-cards-bigzoom .restroy-intro__card:nth-child(5) {
  --card-s: 1.85;
  z-index: 50;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--rw-x, 0), var(--rw-y, 0), 0) rotate(var(--rw-r, 0deg)) scale(calc(var(--rw-s, 1) * var(--card-s, 1.85)));
  box-shadow: 0 80px 180px rgba(0, 0, 0, .85), 0 30px 64px rgba(0, 0, 0, .5);
}

/* ============================================
   PHASE: Scatter outward
   ============================================ */
.restroy-intro.is-cards-scatter .restroy-intro__card {
  --delay: 0s;
  opacity: 0;
  animation: none;
  filter: blur(8px) saturate(1.08);
  transition-duration: 0.7s, 0.65s, 0.65s, 0.65s;
  transition-timing-function: var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  transform: translate3d(-50%, -50%, 0) translate3d(var(--sc-x, 0), var(--sc-y, 0), 0) rotate(var(--sc-r, 0deg)) scale(calc(var(--st-s, .8) * .72));
  box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
}

/* ============================================
   PHASE: Exit — window open (panels swing out)
   ============================================ */
.restroy-intro.is-exiting {
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.95s;
}
.restroy-intro.is-exiting::before {
  animation: none;
  transform: translate3d(-106%, 0, 0) rotateY(-32deg);
}
.restroy-intro.is-exiting::after {
  animation: none;
  transform: translate3d(106%, 0, 0) rotateY(32deg);
}
.restroy-intro.is-exiting .restroy-intro__stage {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.4s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.55s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ============================================
   Debug mode (cards static + outlined)
   ============================================ */
.restroy-intro.is-debug .restroy-intro__stage {
  animation: none !important;
}
.restroy-intro.is-debug .restroy-intro__card {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  outline: 2px solid #ff4757;
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
  transform: translate3d(-50%, -50%, 0) translate3d(var(--st-x, 0), var(--st-y, 0), 0) rotate(var(--st-r, 0deg)) scale(var(--st-s, .82)) !important;
}
.restroy-intro.is-debug .restroy-intro__logo { opacity: 1 !important; transform: scale(1) !important; animation: none !important; }

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .restroy-intro {
    transition-duration: 0.25s;
  }
  .restroy-intro::before,
  .restroy-intro::after {
    animation: none !important;
  }
  .restroy-intro.is-exiting::before,
  .restroy-intro.is-exiting::after {
    transform: none !important;
    opacity: 0;
    transition-duration: 0.25s;
  }
  .restroy-intro__logo {
    animation: restroyLogoIn 0.35s ease-out 0.05s both;
  }
  .restroy-intro.is-cards-entering .restroy-intro__card,
  .restroy-intro.is-cards-gathered .restroy-intro__card,
  .restroy-intro.is-cards-horizontal .restroy-intro__card,
  .restroy-intro.is-cards-zoom .restroy-intro__card,
  .restroy-intro.is-cards-bigzoom .restroy-intro__card,
  .restroy-intro.is-cards-hold .restroy-intro__card {
    transition-duration: 0.25s !important;
    animation: none !important;
  }
  .restroy-intro.is-reduced-motion .restroy-intro__card {
    opacity: 0 !important;
    transform: translate3d(-50%, -50%, 0) scale(0.85);
  }
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
  .restroy-intro__card {
    width: clamp(220px, 50vw, 420px);
  }
  .restroy-intro__logo img { height: 72px; }
  .restroy-intro__card:nth-child(1) { --rw-x: -300px; }
  .restroy-intro__card:nth-child(2) { --rw-x: -170px; }
  .restroy-intro__card:nth-child(3) { --rw-x: -40px; }
  .restroy-intro__card:nth-child(4) { --rw-x: 90px; }
  .restroy-intro__card:nth-child(5) { --rw-x: 250px; }
  .restroy-intro__card:nth-child(6) { --rw-x: 410px; }
  .restroy-intro__card:nth-child(7) { --rw-x: 570px; }
  .restroy-intro__card:nth-child(8) { --rw-x: 730px; }
  /* reduce scatter distance on mobile */
  .restroy-intro__card:nth-child(1) { --sc-x: -80vw; --sc-y: -60vh; }
  .restroy-intro__card:nth-child(2) { --sc-x: 0vw; --sc-y: -80vh; }
  .restroy-intro__card:nth-child(3) { --sc-x: 80vw; --sc-y: -60vh; }
  .restroy-intro__card:nth-child(4) { --sc-x: 80vw; --sc-y: 0vh; }
  .restroy-intro__card:nth-child(5) { --sc-x: 80vw; --sc-y: 60vh; }
  .restroy-intro__card:nth-child(6) { --sc-x: 0vw; --sc-y: 80vh; }
  .restroy-intro__card:nth-child(7) { --sc-x: -80vw; --sc-y: 80vh; }
  .restroy-intro__card:nth-child(8) { --sc-x: -80vw; --sc-y: 0vh; }
}
@media (max-width: 480px) {
  .restroy-intro__card {
    width: clamp(170px, 68vw, 300px);
  }
  .restroy-intro__card:nth-child(1) { --rw-x: -230px; --sc-x: -70vw; --sc-y: -50vh; }
  .restroy-intro__card:nth-child(2) { --rw-x: -90px; --sc-x: 0vw; --sc-y: -70vh; }
  .restroy-intro__card:nth-child(3) { --rw-x: 50px; --sc-x: 70vw; --sc-y: -50vh; }
  .restroy-intro__card:nth-child(8) { --sc-x: -70vw; --sc-y: 0vh; }
}

/* ============================================
   Card Gradient Background Animations
   ============================================ */
@keyframes cardCycle1 { 0%,100%{opacity:1} 33%,66%{opacity:0} }
@keyframes cardCycle2 { 0%,100%{opacity:0} 33%{opacity:1} 66%{opacity:0} }
@keyframes cardCycle3 { 0%,100%{opacity:0} 33%{opacity:0} 66%{opacity:1} }
.card-gradient-bg { position:relative; opacity:0.7; transition:opacity .5s ease; overflow:hidden; }
.card-gradient-bg .cgl { position:absolute; top:0; left:0; right:0; height:65%; border-radius:inherit; mask-image:linear-gradient(to bottom, black 50%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%); }
.card-gradient-bg .cgl1 { animation:cardCycle1 6s ease-in-out infinite; }
.card-gradient-bg .cgl2 { animation:cardCycle2 6s ease-in-out infinite; }
.card-gradient-bg .cgl3 { animation:cardCycle3 6s ease-in-out infinite; }
.group:hover .card-gradient-bg { opacity:1; }
.card-red .cgl1 { background:linear-gradient(135deg,#fee2e2,#fecaca,#fca5a5) }
.card-red .cgl2 { background:linear-gradient(135deg,#fecaca,#fca5a5,#fee2e2) }
.card-red .cgl3 { background:linear-gradient(135deg,#fca5a5,#fee2e2,#fecaca) }
.card-blue .cgl1 { background:linear-gradient(135deg,#dbeafe,#bfdbfe,#93c5fd) }
.card-blue .cgl2 { background:linear-gradient(135deg,#bfdbfe,#93c5fd,#dbeafe) }
.card-blue .cgl3 { background:linear-gradient(135deg,#93c5fd,#dbeafe,#bfdbfe) }
.card-green .cgl1 { background:linear-gradient(135deg,#dcfce7,#bbf7d0,#86efac) }
.card-green .cgl2 { background:linear-gradient(135deg,#bbf7d0,#86efac,#dcfce7) }
.card-green .cgl3 { background:linear-gradient(135deg,#86efac,#dcfce7,#bbf7d0) }
.card-purple .cgl1 { background:linear-gradient(135deg,#f3e8ff,#e9d5ff,#d8b4fe) }
.card-purple .cgl2 { background:linear-gradient(135deg,#e9d5ff,#d8b4fe,#f3e8ff) }
.card-purple .cgl3 { background:linear-gradient(135deg,#d8b4fe,#f3e8ff,#e9d5ff) }
.card-amber .cgl1 { background:linear-gradient(135deg,#fef3c7,#fde68a,#fcd34d) }
.card-amber .cgl2 { background:linear-gradient(135deg,#fde68a,#fcd34d,#fef3c7) }
.card-amber .cgl3 { background:linear-gradient(135deg,#fcd34d,#fef3c7,#fde68a) }
.card-emerald .cgl1 { background:linear-gradient(135deg,#d1fae5,#a7f3d0,#6ee7b7) }
.card-emerald .cgl2 { background:linear-gradient(135deg,#a7f3d0,#6ee7b7,#d1fae5) }
.card-emerald .cgl3 { background:linear-gradient(135deg,#6ee7b7,#d1fae5,#a7f3d0) }
.card-red-blue .cgl1 { background:linear-gradient(135deg,#fee2e2,#e0e7ff,#dbeafe) }
.card-red-blue .cgl2 { background:linear-gradient(135deg,#dbeafe,#fee2e2,#e0e7ff) }
.card-red-blue .cgl3 { background:linear-gradient(135deg,#e0e7ff,#dbeafe,#fee2e2) }

/* ============================================
   Hero Animation & Portfolio Cards
   ============================================ */
.hero-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero-animation-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  width: min(440px, 85vw);
  height: min(440px, 85vw);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: heroGlow 20s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.05); }
}
.portfolio-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* === Central Ring (full circle) === */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  animation: centerPulse 5s ease-in-out infinite;
}
@keyframes centerPulse {
  0%, 100% { border-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, -50%) scale(1); }
  50% { border-color: rgba(0, 0, 0, 0.4); transform: translate(-50%, -50%) scale(1.02); }
}

/* === Side Orbit Container === */
.orbit-side {
  position: absolute;
  top: 50%;
  width: 700px;
  height: 700px;
  transform: translateY(-50%);
}
.orbit-side--left {
  right: 100%;
  margin-right: -250px;
}
.orbit-side--right {
  left: 100%;
  margin-left: -250px;
}

/* === Half Ring Border === */
.orbit-ring-half {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(0, 0, 0, 0.32);
  border-radius: 50%;
}

@keyframes orbitSpinReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* === Outer Ring (counter-clockwise rotation) === */
.orbit-ring-half--outer {
  animation: orbitSpinReverse var(--ring-spin, 10s) linear infinite;
}

/* === Track (counter-clockwise rotation) === */
.orbit-side__track {
  position: absolute;
  inset: 0;
  animation: orbitSpinReverse var(--track-spin, 15s) linear infinite;
}

/* === Orbit Images === */
.orbit-img {
  position: absolute;
  width: 80px;
  height: 100px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  border: none;
  background: transparent;
  opacity: 0.8;
}
.orbit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* === Inner Ring Border === */
.orbit-ring-half--inner {
  border: 2px solid rgba(220, 38, 38, 0.6);
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
}

/* Position images on the circle border edge */
.orbit-img--1 { top: 50%; left: 50%; margin-top: -50px; margin-left: -40px; transform: rotate(0deg) translateY(-350px); }
.orbit-img--2 { top: 50%; left: 50%; margin-top: -50px; margin-left: -40px; transform: rotate(60deg) translateY(-350px); }
.orbit-img--3 { top: 50%; left: 50%; margin-top: -50px; margin-left: -40px; transform: rotate(120deg) translateY(-350px); }
.orbit-img--4 { top: 50%; left: 50%; margin-top: -50px; margin-left: -40px; transform: rotate(180deg) translateY(-350px); }
.orbit-img--5 { top: 50%; left: 50%; margin-top: -50px; margin-left: -40px; transform: rotate(240deg) translateY(-350px); }
.orbit-img--6 { top: 50%; left: 50%; margin-top: -50px; margin-left: -40px; transform: rotate(300deg) translateY(-350px); }

/* === Responsive === */
@media (max-width: 1024px) {
  .orbit-center { width: 220px; height: 220px; }
  .orbit-side { width: 300px; height: 300px; }
  .orbit-side--left { margin-right: -60px; }
  .orbit-side--right { margin-left: -60px; }
  .orbit-img { width: 58px; height: 72px; border-radius: 12px; margin-top: -36px; margin-left: -29px; }
  .orbit-img img { border-radius: 10px; }
  .orbit-img--1 { transform: rotate(0deg) translateY(-150px); }
  .orbit-img--2 { transform: rotate(90deg) translateY(-150px); }
  .orbit-img--3 { transform: rotate(180deg) translateY(-150px); }
  .orbit-img--4 { transform: rotate(270deg) translateY(-150px); }
  .orbit-img--5, .orbit-img--6 { display: none; }
}
@media (max-width: 768px) {
  .orbit-center { width: 170px; height: 170px; }
  .orbit-side {
    width: 240px;
    height: 240px;
    top: 34%;
    --ring-spin: 18s;
    --track-spin: 24s;
  }
  .orbit-side--left { margin-right: -70px; }
  .orbit-side--right { margin-left: -70px; }
  .orbit-img { width: 48px; height: 60px; border-radius: 10px; margin-top: -30px; margin-left: -24px; }
  .orbit-img img { border-radius: 8px; }
  .orbit-img--1 { transform: rotate(0deg) translateY(-120px); }
  .orbit-img--2 { transform: rotate(90deg) translateY(-120px); }
  .orbit-img--3 { transform: rotate(180deg) translateY(-120px); }
  .orbit-img--4 { transform: rotate(270deg) translateY(-120px); }
  .orbit-img--5, .orbit-img--6 { display: none; }
  .hero-glow {
    width: min(300px, 80vw);
    height: min(300px, 80vw);
    filter: blur(60px);
    opacity: 0.32;
    top: 32%;
  }
}
@media (max-width: 480px) {
  .orbit-center { width: 130px; height: 130px; }
  .orbit-side {
    width: 200px;
    height: 200px;
    --ring-spin: 22s;
    --track-spin: 30s;
  }
  .orbit-side--left { margin-right: -60px; }
  .orbit-side--right { margin-left: -60px; }
  .orbit-img { width: 38px; height: 48px; border-radius: 8px; margin-top: -24px; margin-left: -19px; }
  .orbit-img img { border-radius: 6px; }
  .orbit-img--1 { transform: rotate(0deg) translateY(-100px); }
  .orbit-img--2 { transform: rotate(180deg) translateY(-100px); }
  .orbit-img--3, .orbit-img--4, .orbit-img--5, .orbit-img--6 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-side__track { animation: none; }
  .orbit-ring-half--outer { animation: none; }
  .orbit-center { animation: none; }
  .hero-glow { animation: none; }
}

/* ============================================
   RESTROY V2 — Feature Page Redesign
   Animated Color Background & Feature UI
   ============================================ */

/* === Animated color (aurora) background layer === */
.ambient-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(55rem 55rem at 12% 8%,   rgba(239,68,68,.18),   transparent 60%),
    radial-gradient(50rem 50rem at 88% 12%,  rgba(96,165,250,.20),  transparent 60%),
    radial-gradient(60rem 60rem at 84% 88%,  rgba(168,85,247,.18),  transparent 62%),
    radial-gradient(52rem 52rem at 8% 92%,   rgba(16,185,129,.16),  transparent 60%),
    radial-gradient(46rem 46rem at 48% 55%,  rgba(244,63,94,.12),   transparent 62%),
    linear-gradient(125deg, #fffaf7, #fdf2f8 30%, #eff6ff 55%, #f5f3ff 75%, #ecfdf5);
  background-size: 160% 160%, 160% 160%, 160% 160%, 160% 160%, 160% 160%, 200% 200%;
  animation: auroraPan 24s ease-in-out infinite alternate;
}
@keyframes auroraPan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.ambient-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  opacity: .5;
}
.ambient-orb-red    { width: 34rem; height: 34rem; top: -9rem; left: -11rem;    background: radial-gradient(circle, rgba(220,38,38,.45), transparent 66%); animation: ambientDrift1 20s ease-in-out infinite; }
.ambient-orb-blue   { width: 40rem; height: 40rem; right: -13rem; bottom: 6%;   background: radial-gradient(circle, rgba(59,130,246,.42), transparent 66%); animation: ambientDrift2 26s ease-in-out infinite; }
.ambient-orb-pink   { width: 30rem; height: 30rem; top: 30%; left: 30%;         background: radial-gradient(circle, rgba(244,114,182,.38), transparent 66%); animation: ambientDrift3 17s ease-in-out infinite; }
.ambient-orb-green  { width: 26rem; height: 26rem; top: 64%; left: 6%;          background: radial-gradient(circle, rgba(16,185,129,.34), transparent 66%); animation: ambientDrift4 23s ease-in-out infinite; }
.ambient-orb-amber  { width: 24rem; height: 24rem; bottom: -7rem; left: 40%;    background: radial-gradient(circle, rgba(245,158,11,.32), transparent 66%); animation: ambientDrift2 31s ease-in-out infinite reverse; }
.ambient-orb-violet { width: 28rem; height: 28rem; top: 12%; right: 24%;        background: radial-gradient(circle, rgba(139,92,246,.36), transparent 66%); animation: ambientDrift1 29s ease-in-out infinite reverse; }
@keyframes ambientDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.38; } 50% { transform: translate3d(6rem,4rem,0) scale(1.16); opacity:.62; } }
@keyframes ambientDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.32; } 50% { transform: translate3d(-7rem,-4rem,0) scale(1.12); opacity:.58; } }
@keyframes ambientDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.30; } 50% { transform: translate3d(-4rem,3rem,0) scale(1.14); opacity:.52; } }
@keyframes ambientDrift4 { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.28; } 50% { transform: translate3d(5rem,-3rem,0) scale(1.16); opacity:.50; } }

/* === Feature page: animated gradient hero === */
.feature-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  background: linear-gradient(128deg, #7f1d1d 0%, #b91c1c 26%, #111827 62%, #1e1b4b 100%);
  background-size: 260% 260%;
  animation: featureHeroGradient 16s ease-in-out infinite;
  isolation: isolate;
}
@keyframes featureHeroGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.feature-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42rem 24rem at 12% 0%,   rgba(248,113,113,.40), transparent 60%),
    radial-gradient(36rem 22rem at 92% 8%,   rgba(96,165,250,.34),  transparent 60%),
    radial-gradient(40rem 28rem at 85% 100%, rgba(167,139,250,.32), transparent 60%),
    radial-gradient(30rem 20rem at 0% 100%,  rgba(52,211,153,.26),  transparent 60%);
  animation: featureHeroBlobs 13s ease-in-out infinite alternate;
  filter: blur(8px);
}
@keyframes featureHeroBlobs { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(2rem,-1rem,0) scale(1.08); } }
.feature-hero-inner { position: relative; z-index: 1; }

/* === Feature cards === */
.feature-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #fff7f8 55%, #f5f9ff 100%);
  background-size: 220% 220%;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(30,41,59,.10), 0 6px 16px rgba(30,41,59,.05);
  border-color: rgba(220,38,38,.30);
  animation: featureCardShift 8s ease-in-out infinite;
}
@keyframes featureCardShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.feature-card-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #fee2e2, #e9d5ff 50%, #dbeafe);
  background-size: 200% 200%;
  animation: featureCardShift 6s ease-in-out infinite;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 14px rgba(220,38,38,.10);
}

/* === Workflow steps === */
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1;
  background: rgba(254,226,226,.6);
  color: #b91c1c;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(254,202,202,.8);
  transition: all .25s ease;
}
.step-pill:hover {
  transform: translateY(-2px);
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 10px 24px rgba(220,38,38,.30);
}
.step-pill .step-num {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}
.step-pill:hover .step-num { background: #fff; color: #dc2626; }

/* === FAQ items === */
.faq-item {
  border-radius: 1.1rem;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.92);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item:hover { box-shadow: 0 12px 32px rgba(30,41,59,.08); border-color: rgba(220,38,38,.25); }
.faq-item[open] { border-color: rgba(220,38,38,.40); }

/* === CTA band === */
.feature-cta {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  background: linear-gradient(120deg, #111827 0%, #1e1b4b 48%, #7f1d1d 100%);
  background-size: 240% 240%;
  animation: featureHeroGradient 18s ease-in-out infinite;
  isolation: isolate;
}
.feature-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(30rem 18rem at 100% 0%, rgba(244,63,94,.40), transparent 60%),
    radial-gradient(28rem 16rem at 0% 100%, rgba(99,102,241,.36), transparent 60%);
  animation: featureHeroBlobs 11s ease-in-out infinite alternate-reverse;
}

/* === Scroll reveal (progressive enhancement — hidden only when JS is active) === */
html.js-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
html.js-ready .reveal.revealed { opacity: 1; transform: translateY(0); }
html.js-ready .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .6s ease, transform .6s ease; }
html.js-ready .reveal-left.revealed { opacity: 1; transform: translateX(0); }
html.js-ready .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .6s ease, transform .6s ease; }
html.js-ready .reveal-right.revealed { opacity: 1; transform: translateX(0); }
html.js-ready .reveal-scale { opacity: 0; transform: scale(.96); transition: opacity .6s ease, transform .6s ease; }
html.js-ready .reveal-scale.revealed { opacity: 1; transform: scale(1); }
html.js-ready .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js-ready .fade-up.revealed { opacity: 1; transform: translateY(0); }

/* === Card stagger delay helpers === */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; }

/* === Animated black-to-red "Software" wordmark === */
.gradient-software {
  display: inline-block;
  background: linear-gradient(90deg, #111111 0%, #dc2626 50%, #111111 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientSoftware 3.5s ease-in-out infinite;
}
@keyframes gradientSoftware {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* === Reduced motion for all new effects === */
@media (prefers-reduced-motion: reduce) {
  .ambient-background, .ambient-orb, .feature-hero, .feature-cta,
  .feature-hero::before, .feature-cta::before, .feature-card:hover, .feature-card-icon,
  .gradient-software {
    animation: none !important;
  }
  html.js-ready .reveal, html.js-ready .reveal-left, html.js-ready .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}