/* ============================================
   vestadesign — UI 2026 Motion Layer
   Glass · Mesh · Cinematic intro · Micro-motion
   ============================================ */

:root {
  --mesh-1: rgba(0, 201, 167, 0.22);
  --mesh-2: rgba(91, 124, 250, 0.18);
  --mesh-3: rgba(123, 97, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glow-cyan: 0 0 40px rgba(0, 201, 167, 0.35);
  --glow-blue: 0 0 48px rgba(91, 124, 250, 0.3);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- Noise film (premium texture) ----- */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----- Scroll progress ----- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 10001;
  background: linear-gradient(90deg, #00c9a7, #5b7cfa, #7b61ff);
  box-shadow: var(--glow-cyan);
  transform-origin: left;
  transition: width 0.05s linear;
}

/* ----- Preloader 2026 cinematic ----- */
.preloader {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, var(--mesh-1), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 70%, var(--mesh-2), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, var(--mesh-3), transparent 45%),
    #060b16;
  transition: opacity 0.7s var(--ease-out-expo), visibility 0.7s, transform 0.7s var(--ease-out-expo);
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  pointer-events: none;
}

.preloader-inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

.preloader-logo {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 20px 60px rgba(0, 201, 167, 0.25),
    0 0 0 1px rgba(91, 124, 250, 0.2);
  animation: logoBreath 2s ease-in-out infinite, logoIn 0.8s var(--ease-out-expo) both;
}

.preloader-brand {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: 0.12em;
  color: #f8fafc;
  text-transform: lowercase;
  opacity: 0;
  animation: fadeUp 0.7s 0.25s var(--ease-out-expo) forwards;
}

.preloader-brand .accent {
  background: linear-gradient(135deg, #00e0c0, #7b9cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.preloader-tagline {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.65);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 0.7s 0.4s var(--ease-out-expo) forwards;
}

.preloader-bar {
  width: min(220px, 60vw);
  height: 4px;
  margin: 1.75rem auto 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.preloader-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #00c9a7, #5b7cfa, #a78bfa);
  background-size: 200% 100%;
  animation: loadBar 1.5s var(--ease-out-expo) forwards, shimmer 1.2s linear infinite;
  box-shadow: 0 0 16px rgba(0, 201, 167, 0.6);
}

.preloader-pct {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: rgba(148, 163, 184, 0.9);
  opacity: 0;
  animation: fadeUp 0.5s 0.35s var(--ease-out-expo) forwards;
}

.preloader-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.preloader-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: orbFloat 8s ease-in-out infinite;
}

.preloader-orbs span:nth-child(1) {
  width: 280px;
  height: 280px;
  background: #00c9a7;
  top: 10%;
  left: 15%;
}

.preloader-orbs span:nth-child(2) {
  width: 320px;
  height: 320px;
  background: #5b7cfa;
  bottom: 5%;
  right: 10%;
  animation-delay: -3s;
}

.preloader-orbs span:nth-child(3) {
  width: 200px;
  height: 200px;
  background: #7b61ff;
  top: 40%;
  right: 30%;
  animation-delay: -5s;
}

@keyframes logoIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes logoBreath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes loadBar {
  to {
    width: 100%;
  }
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -24px) scale(1.08);
  }
}

/* ----- Intro reveal (after preloader) ----- */
body:not(.intro-done) .header {
  opacity: 0;
  transform: translateY(-16px);
}

body.intro-done .header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo),
    background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

body:not(.intro-done) .hero-text > *,
body:not(.intro-done) .hero-visual {
  opacity: 0;
  transform: translateY(36px);
}

body.intro-done .hero-text > * {
  animation: heroIn 0.9s var(--ease-out-expo) both;
}

body.intro-done .hero-text .hero-badge {
  animation-delay: 0.05s;
}
body.intro-done .hero-text h1 {
  animation-delay: 0.15s;
}
body.intro-done .hero-text .hero-desc {
  animation-delay: 0.28s;
}
body.intro-done .hero-text .hero-actions {
  animation-delay: 0.4s;
}
body.intro-done .hero-text .hero-stats {
  animation-delay: 0.52s;
}
body.intro-done .hero-visual {
  animation: heroVisualIn 1.1s 0.2s var(--ease-out-expo) both;
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: translateY(48px) rotateX(8deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
  }
}

/* ----- Header glass 2026 ----- */
.header {
  backdrop-filter: blur(0px);
}

.header.scrolled {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(15, 27, 51, 0.06);
}

.header-cta {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 184, 160, 0.28);
}

.header-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: none;
}

.header-cta:hover::after {
  animation: ctaShine 0.8s var(--ease-out-expo);
}

@keyframes ctaShine {
  to {
    transform: translateX(120%);
  }
}

/* ----- Hero mesh & particles ----- */
.hero {
  position: relative;
  isolation: isolate;
  perspective: 1200px;
}

.hero-bg {
  background:
    radial-gradient(ellipse 90% 70% at 10% 20%, rgba(0, 201, 167, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 10%, rgba(91, 124, 250, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 50% at 60% 90%, rgba(123, 97, 255, 0.1), transparent 50%);
}

.hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 201, 167, 0.12), transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(91, 124, 250, 0.1), transparent 40%);
  animation: meshPulse 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes meshPulse {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.hero-particles i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c9a7, #5b7cfa);
  opacity: 0.35;
  animation: particleRise linear infinite;
  box-shadow: 0 0 12px rgba(0, 201, 167, 0.5);
}

@keyframes particleRise {
  0% {
    transform: translateY(20px) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }
}

.hero-badge {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 184, 160, 0.2);
  box-shadow: 0 8px 24px rgba(30, 55, 100, 0.06);
}

.hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hero h1 .gradient-text {
  background-size: 200% auto;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* Hero card 3D */
.hero-visual {
  transform-style: preserve-3d;
}

.hero-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(30, 55, 100, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s;
  will-change: transform;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%, transparent 60%, rgba(91, 124, 250, 0.08));
  pointer-events: none;
}

.hero-card:hover {
  box-shadow:
    0 32px 80px rgba(30, 55, 100, 0.18),
    var(--glow-blue);
}

.hero-card img {
  transition: transform 0.8s var(--ease-out-expo);
}

.hero-card:hover img {
  transform: scale(1.05);
}

.floating-tag {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 28px rgba(15, 27, 51, 0.12);
  animation: tagFloat 4s ease-in-out infinite;
}

.floating-tag.tag-2 {
  animation-delay: -1.2s;
}
.floating-tag.tag-3 {
  animation-delay: -2.4s;
}

@keyframes tagFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Magnetic / shine buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.35) 50%, transparent 75%);
  transform: translateX(-100%);
}

.btn-primary:hover::before {
  animation: ctaShine 0.75s var(--ease-out-expo);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 184, 160, 0.35);
}

/* Enhanced scroll reveals */
html.js [data-reveal]:not(.revealed) {
  opacity: 0;
  transform: translateY(48px) scale(0.98);
  filter: blur(4px);
  transition: none;
}

html.js [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.85s var(--ease-out-expo),
    transform 0.85s var(--ease-out-expo),
    filter 0.85s var(--ease-out-expo);
}

html.js [data-reveal][data-delay="1"].revealed {
  transition-delay: 0.08s;
}
html.js [data-reveal][data-delay="2"].revealed {
  transition-delay: 0.16s;
}
html.js [data-reveal][data-delay="3"].revealed {
  transition-delay: 0.24s;
}
html.js [data-reveal][data-delay="4"].revealed {
  transition-delay: 0.32s;
}
html.js [data-reveal][data-delay="5"].revealed {
  transition-delay: 0.4s;
}

/* Service / price cards lift */
.service-card,
.price-card,
.portfolio-item,
.process-step,
.testimonial-card {
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s, border-color 0.3s;
}

.service-card:hover,
.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(30, 55, 100, 0.12);
}

.service-card.featured:hover {
  box-shadow: 0 28px 64px rgba(0, 184, 160, 0.2);
}

.service-icon {
  transition: transform 0.45s var(--ease-spring);
}

.service-card:hover .service-icon {
  transform: scale(1.12) rotate(-4deg);
}

/* Portfolio image zoom */
.portfolio-item img,
.portfolio-thumb img {
  transition: transform 0.7s var(--ease-out-expo);
}

.portfolio-item:hover img,
.portfolio-item:hover .portfolio-thumb img {
  transform: scale(1.08);
}

/* Clients marquee smoother */
.clients-slide {
  animation-duration: 32s !important;
}

.clients {
  position: relative;
  overflow: hidden;
}

.clients::before,
.clients::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.clients::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.clients::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

/* Scroll hint bounce */
.scroll-hint {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(10px);
    opacity: 1;
  }
}

/* Section tag pulse line */
.section-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0, 184, 160, 0.5);
  animation: pulseDot 2s ease-out infinite;
}

@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 184, 160, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 184, 160, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 184, 160, 0);
  }
}

/* Stat counters glow on intro */
body.intro-done .hero-stats .stat strong {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Float buttons soft entrance */
.float-btns,
.float-btn,
#backToTop {
  transition: transform 0.35s var(--ease-spring), opacity 0.35s, box-shadow 0.35s;
}

/* Page ambient after load */
body.intro-done {
  animation: pageAmbient 0.01s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preloader-logo,
  .preloader-bar span,
  .hero-particles i,
  .hero-mesh,
  .floating-tag,
  .scroll-hint,
  .section-tag::before,
  body.intro-done .hero-text > *,
  body.intro-done .hero-visual {
    animation: none !important;
  }

  html.js [data-reveal]:not(.revealed),
  html.js [data-reveal].revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body:not(.intro-done) .header,
  body:not(.intro-done) .hero-text > *,
  body:not(.intro-done) .hero-visual {
    opacity: 1;
    transform: none;
  }
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .preloader-logo {
    width: 96px;
    height: 96px;
  }

  .hero-particles {
    display: none;
  }

  body::before {
    opacity: 0.02;
  }

  .service-card:hover,
  .price-card:hover {
    transform: translateY(-4px);
  }
}

/* ============================================
   Hero showcase — multi image + effects 2026
   ============================================ */
.hero-visual {
  position: relative;
  z-index: 2;
  min-height: 420px;
}

.hero-showcase {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.02;
  perspective: 1400px;
}

.hero-glow-ring {
  position: absolute;
  inset: 8% 4% 12% 4%;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 201, 167, 0.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(91, 124, 250, 0.3), transparent 50%);
  filter: blur(28px);
  z-index: 0;
  animation: glowPulse 5s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from { opacity: 0.65; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.04); }
}

/* Main browser mockup */
.hero-card-main {
  position: relative;
  z-index: 3;
  width: 88%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: #0f172a;
  box-shadow:
    0 30px 70px rgba(15, 27, 51, 0.18),
    0 0 0 1px rgba(0, 184, 160, 0.08),
    0 0 60px rgba(91, 124, 250, 0.12);
  transform: rotateY(-6deg) rotateX(4deg);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s;
  will-change: transform;
}

.hero-showcase:hover .hero-card-main {
  transform: rotateY(-2deg) rotateX(2deg) translateY(-6px);
  box-shadow:
    0 40px 90px rgba(15, 27, 51, 0.22),
    0 0 80px rgba(0, 201, 167, 0.15);
}

.hero-card-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-card-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #475569;
}

.hero-card-chrome span:nth-child(1) { background: #ff5f57; }
.hero-card-chrome span:nth-child(2) { background: #febc2e; }
.hero-card-chrome span:nth-child(3) { background: #28c840; }

.hero-card-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #0b1220;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
  z-index: 1;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: kenBurns 14s ease-in-out infinite alternate;
}

.hero-slide.is-active img {
  animation-play-state: running;
}

@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.1) translate(-2%, -1.5%); }
}

/* Shine sweep on main image */
.hero-shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 62%
  );
  transform: translateX(-130%);
  animation: shineSweep 5.5s ease-in-out infinite;
}

@keyframes shineSweep {
  0%, 55% { transform: translateX(-130%); }
  75%, 100% { transform: translateX(130%); }
}

.hero-card-main .hero-card-overlay {
  z-index: 5;
  background: linear-gradient(to top, rgba(15, 27, 51, 0.5) 0%, transparent 50%);
}

.hero-card-main .floating-tag {
  z-index: 6;
  pointer-events: none;
}

/* Dots */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(15, 27, 51, 0.35);
  backdrop-filter: blur(8px);
}

.hero-dots button {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: width 0.3s, background 0.3s;
}

.hero-dots button.is-active {
  width: 22px;
  background: linear-gradient(90deg, #00c9a7, #5b7cfa);
}

/* Phone mockup */
.hero-phone {
  position: absolute;
  right: -2%;
  bottom: 4%;
  z-index: 5;
  width: clamp(110px, 28%, 150px);
  aspect-ratio: 9 / 18.5;
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 24px 48px rgba(15, 27, 51, 0.35),
    0 0 0 1px rgba(0, 201, 167, 0.15),
    0 0 40px rgba(91, 124, 250, 0.2);
  overflow: hidden;
  animation: phoneFloat 5s ease-in-out infinite;
  transform: rotate(8deg);
}

.hero-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
  display: block;
  background: #0f172a;
}

.hero-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 10px;
  border-radius: 99px;
  background: #020617;
  z-index: 2;
}

.hero-phone-glow {
  position: absolute;
  inset: auto -20% -20% -20%;
  height: 50%;
  background: radial-gradient(circle, rgba(0, 201, 167, 0.45), transparent 65%);
  filter: blur(16px);
  pointer-events: none;
}

@keyframes phoneFloat {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-12px); }
}

/* Floating project cards */
.hero-float-card {
  position: absolute;
  z-index: 4;
  width: clamp(120px, 34%, 168px);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px rgba(15, 27, 51, 0.16);
  backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
}

.hero-float-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
}

.hero-float-card:hover img {
  transform: scale(1.08);
}

.hero-float-meta {
  padding: 0.45rem 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-float-meta strong {
  font-size: 0.78rem;
  color: #0f1b33;
  font-weight: 700;
}

.hero-float-meta span {
  font-size: 0.68rem;
  color: #64748b;
}

.hero-float-a {
  top: 6%;
  left: -6%;
  animation: floatA 6s ease-in-out infinite;
  transform: rotate(-6deg);
}

.hero-float-b {
  top: 42%;
  left: -10%;
  animation: floatB 7s ease-in-out infinite;
  transform: rotate(4deg);
  z-index: 6;
}

.hero-float-c {
  top: 12%;
  right: -4%;
  width: clamp(100px, 28%, 140px);
  animation: floatC 5.5s ease-in-out infinite;
  transform: rotate(7deg);
  z-index: 2;
}

@keyframes floatA {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-10px); }
}

@keyframes floatB {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(12px); }
}

@keyframes floatC {
  0%, 100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(9deg) translateY(-14px); }
}

.hero-float-card:hover {
  z-index: 8;
  box-shadow: 0 22px 50px rgba(0, 184, 160, 0.22);
}

/* Intro for showcase pieces */
body.intro-done .hero-card-main {
  animation: heroMainIn 1s 0.15s var(--ease-out-expo) both;
}
body.intro-done .hero-phone {
  animation: phoneFloat 5s ease-in-out infinite, heroPhoneIn 1s 0.35s var(--ease-out-expo) both;
}
body.intro-done .hero-float-a {
  animation: floatA 6s ease-in-out infinite, heroFloatIn 0.9s 0.45s var(--ease-out-expo) both;
}
body.intro-done .hero-float-b {
  animation: floatB 7s ease-in-out infinite, heroFloatIn 0.9s 0.55s var(--ease-out-expo) both;
}
body.intro-done .hero-float-c {
  animation: floatC 5.5s ease-in-out infinite, heroFloatIn 0.9s 0.65s var(--ease-out-expo) both;
}

@keyframes heroMainIn {
  from { opacity: 0; transform: rotateY(-12deg) rotateX(8deg) translateY(40px) scale(0.92); }
  to { opacity: 1; transform: rotateY(-6deg) rotateX(4deg) translateY(0) scale(1); }
}

@keyframes heroPhoneIn {
  from { opacity: 0; transform: rotate(12deg) translateY(50px) scale(0.85); }
  to { opacity: 1; transform: rotate(8deg) translateY(0) scale(1); }
}

@keyframes heroFloatIn {
  from { opacity: 0; transform: translateY(24px) scale(0.9); }
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .hero-showcase {
    max-width: 480px;
    aspect-ratio: auto;
    min-height: 380px;
  }
  .hero-card-main {
    width: 92%;
    transform: none;
  }
  .hero-showcase:hover .hero-card-main {
    transform: translateY(-4px);
  }
  .hero-float-c { display: none; }
}

@media (max-width: 640px) {
  .hero-visual { min-height: 0; }
  .hero-showcase {
    max-width: 100%;
    min-height: 0;
    padding-bottom: 1rem;
  }
  .hero-card-main {
    width: 100%;
    transform: none !important;
  }
  .hero-phone {
    width: 86px;
    right: 4%;
    bottom: 8%;
  }
  .hero-float-a {
    width: 96px;
    left: 0;
    top: auto;
    bottom: 6%;
  }
  .hero-float-b,
  .hero-float-c {
    display: none;
  }
  .hero-card-main .floating-tag.tag-1,
  .hero-card-main .floating-tag.tag-2 {
    display: flex;
  }
  .hero-card-main .floating-tag.tag-3 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide img,
  .hero-shine,
  .hero-phone,
  .hero-float-a,
  .hero-float-b,
  .hero-float-c,
  .hero-glow-ring,
  body.intro-done .hero-card-main,
  body.intro-done .hero-phone,
  body.intro-done .hero-float-a,
  body.intro-done .hero-float-b,
  body.intro-done .hero-float-c {
    animation: none !important;
  }
  .hero-slide { transition: opacity 0.3s; transform: none; }
  .hero-slide.is-active { transform: none; }
}

/* Fix conflict with base .hero-card img aspect-ratio */
.hero-card-main img,
.hero-phone img,
.hero-float-card img {
  aspect-ratio: auto;
  height: 100%;
}
.hero-slide img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.hero-float-card img {
  height: auto;
}