:root { 
  --ring: 0 0% 100%; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 
}

/* Fancy underline for links */
.link-underline { 
  background-image: linear-gradient(currentColor, currentColor); 
  background-size: 0% 2px; 
  background-position: 0 100%; 
  background-repeat: no-repeat; 
  transition: background-size .3s ease; 
}

.link-underline:hover { 
  background-size: 100% 2px; 
}

/* Phone build animation pieces */
.phone-stage { 
  perspective: 1200px; 
}

.phone-piece { 
  transform-style: preserve-3d; 
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease; 
  opacity: .0; 
}

.phone-piece.show { 
  opacity: 1; 
}

.piece-frame { 
  transform: translateZ(0px); 
}

.piece-screen { 
  transform: translateZ(8px) rotateX(0deg); 
}

.piece-camera { 
  transform: translateZ(12px); 
}

.piece-icons { 
  transform: translateZ(16px) scale(.98); 
}

.assemble .piece-frame { 
  transform: translateZ(0) rotateX(0deg); 
}

.assemble .piece-screen { 
  transform: translateZ(8px) rotateX(0deg); 
}

.assemble .piece-camera { 
  transform: translateZ(12px) 
}

.assemble .piece-icons { 
  transform: translateZ(16px) 
}

.shadow-glow { 
  box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 0 0 6px rgba(59,130,246,.15); 
}

/* Simple fade+slide */
.reveal { 
  opacity: 0; 
  transform: translateY(14px); 
  transition: opacity .7s ease, transform .7s ease; 
}

.reveal.in { 
  opacity: 1; 
  transform: translateY(0); 
}