/* Second-pass polish: quieter visuals, more deliberate motion. */

.scroll-progress {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 0 16px rgba(255, 255, 255, .2);
  transition: width .08s linear;
}

.hero h1 span {
  position: relative;
  display: inline-block;
  color: #f4f4f5;
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

.hero h1 span::after {
  content: "";
  position: absolute;
  left: .03em;
  right: .02em;
  bottom: -.09em;
  height: .055em;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.82), rgba(255,255,255,.18));
  transform: scaleX(0);
  transform-origin: left;
  animation: draw-line .9s 1s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes draw-line {
  to { transform: scaleX(1); }
}

.hero-copy.visible > .eyebrow,
.hero-copy.visible > h1,
.hero-copy.visible > .hero-lead,
.hero-copy.visible > .hero-actions,
.hero-copy.visible > .hero-meta {
  animation: hero-in .72s cubic-bezier(.2,.75,.2,1) both;
}

.hero-copy.visible > h1 { animation-delay: .07s; }
.hero-copy.visible > .hero-lead { animation-delay: .14s; }
.hero-copy.visible > .hero-actions { animation-delay: .21s; }
.hero-copy.visible > .hero-meta { animation-delay: .28s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-nav > a:not(.nav-cta) {
  position: relative;
}

.site-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: #c9c9cd;
  transition: right .22s ease;
}

.site-nav > a:not(.nav-cta):hover::after {
  right: 0;
}

.button span {
  display: inline-block;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.button:hover span {
  transform: translate(3px, 2px);
}

.nav-cta,
.button {
  overflow: hidden;
  position: relative;
}

.nav-cta::before,
.button-primary::before,
.button-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.45) 48%, transparent 67%);
  transform: translateX(-130%);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  mix-blend-mode: soft-light;
}

.nav-cta:hover::before,
.button-primary:hover::before,
.button-light:hover::before {
  transform: translateX(130%);
}

.browser-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  isolation: isolate;
  animation: refined-float 7.5s ease-in-out infinite;
  will-change: transform;
}

.browser-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -70% -35%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 43%, rgba(255,255,255,.045) 49%, rgba(255,255,255,.08) 50%, transparent 56%);
  transform: translateX(-45%);
  animation: browser-sheen 8s 1.4s ease-in-out infinite;
}

@keyframes refined-float {
  0%, 100% {
    transform: rotateY(calc(-4deg + var(--tilt-x))) rotateX(calc(1deg + var(--tilt-y))) translateY(0);
  }
  50% {
    transform: rotateY(calc(-3deg + var(--tilt-x))) rotateX(calc(.5deg + var(--tilt-y))) translateY(-9px);
  }
}

@keyframes browser-sheen {
  0%, 68%, 100% { transform: translateX(-50%); opacity: 0; }
  75% { opacity: 1; }
  87% { transform: translateX(48%); opacity: 0; }
}

.stage-grid {
  animation: grid-drift 16s linear infinite;
}

@keyframes grid-drift {
  to { background-position: 38px 38px; }
}

.stage-orb-one {
  animation: orb-breathe 7s ease-in-out infinite;
}

.stage-orb-two {
  animation: orb-breathe 9s 1.2s ease-in-out infinite reverse;
}

@keyframes orb-breathe {
  50% { transform: translate(-7px, 6px) scale(1.06); opacity: .7; }
}

.mini-line {
  transform-origin: left;
  animation: mini-line-pulse 4.5s ease-in-out infinite;
}

@keyframes mini-line-pulse {
  0%, 100% { transform: scaleX(.72); opacity: .55; }
  50% { transform: scaleX(1); opacity: 1; }
}

.project-card,
.price-card {
  position: relative;
  isolation: isolate;
}

.project-card::before,
.price-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255,255,255,.055), transparent 62%);
  transition: opacity .25s ease;
}

.project-card:hover::before,
.price-card:hover::before {
  opacity: 1;
}

.project-card > *,
.price-card > * {
  position: relative;
  z-index: 1;
}

.project-preview::after {
  content: "";
  position: absolute;
  left: -25%;
  bottom: 0;
  width: 24%;
  height: 1px;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 14px rgba(255,255,255,.18);
  transition: left .65s cubic-bezier(.2,.7,.2,1), width .65s cubic-bezier(.2,.7,.2,1);
}

.project-card:hover .project-preview::after {
  left: 100%;
  width: 38%;
}

.feature-card {
  position: relative;
  transition: background .25s ease, transform .25s ease;
}

.feature-card:hover {
  background: rgba(255,255,255,.018);
  transform: translateY(-3px);
}

.feature-card h3,
.process-row h3 {
  transition: color .2s ease, transform .2s ease;
}

.feature-card:hover h3 {
  color: #fff;
  transform: translateX(3px);
}

.process-row {
  position: relative;
  transition: padding-left .25s ease, background .25s ease;
}

.process-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 2px;
  background: #d7d7db;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s ease;
}

.process-row:hover {
  padding-left: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%);
}

.process-row:hover::before {
  transform: scaleY(1);
}

.process-row:hover h3 {
  transform: translateX(3px);
  color: #fff;
}

.contact-card {
  background:
    linear-gradient(120deg, rgba(255,255,255,.025), transparent 34%),
    #111113;
}

.contact-glow {
  opacity: .55;
  animation: contact-drift 10s ease-in-out infinite;
}

@keyframes contact-drift {
  50% { transform: translate(-80px, 55px) scale(.88); }
}

.section-heading h2 {
  max-width: 680px;
}

.section-index {
  letter-spacing: .085em;
}

.price-note,
.project-state,
.floating-note {
  text-transform: none;
  letter-spacing: .02em;
}

/* keep visible copy consistently lowercase across the main site */
.eyebrow,
.section-index,
.ticker-track,
.price-top,
.deposit-bar > span,
.project-info > div > span,
.project-state,
.preview-nav,
.preview-copy small,
.preview-button,
.mini-kicker {
  text-transform: lowercase;
}

@media (hover: none), (pointer: coarse) {
  .project-card::before,
  .price-card::before { display: none; }
  .feature-card:hover,
  .process-row:hover { transform: none; }
  .process-row:hover { padding-left: 0; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy.visible > *,
  .browser-card,
  .browser-card::after,
  .stage-grid,
  .stage-orb-one,
  .stage-orb-two,
  .mini-line,
  .contact-glow,
  .hero h1 span::after {
    animation: none !important;
  }

  .hero h1 span::after {
    transform: scaleX(1);
  }
}

@media (max-width: 760px) {
  .site-nav > a:not(.nav-cta)::after { display: none; }
  .process-row:hover { padding-left: 0; }
  .hero h1 span::after { bottom: -.05em; }
}