/* WPTA landing — custom styles (Tailwind utilities load separately via CDN) */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #FFFBF5;
}
.font-display {
  font-family: 'Google Sans Flex', 'DM Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 32;
}

/* Subtle noise texture overlay */
.noise {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mesh gradient blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}

/* Vibrant brand gradient text — italic descenders/punctuation need extra side padding so background-clip:text doesn't trim glyphs */
.text-gradient-brand,
.text-gradient-orange,
.text-gradient-teal {
  display: inline-block;
  padding-right: 0.12em;
  padding-left: 0.04em;
  padding-bottom: 0.08em;
}
.text-gradient-brand {
  background: linear-gradient(120deg, #FF6B35 0%, #FF8C42 35%, #4A8B9D 70%, #1F4E5F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-orange {
  background: linear-gradient(120deg, #FF8C42 0%, #FF6B35 50%, #E55A2B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-teal {
  background: linear-gradient(120deg, #4A8B9D 0%, #1F4E5F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient border using mask */
.gradient-border {
  position: relative;
  background: white;
  border-radius: 1.25rem;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #FF6B35, #4A8B9D, #1F4E5F);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Glass card */
.glass {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15, 25, 34, 0.08);
  box-shadow: 0 4px 16px -4px rgba(15, 25, 34, 0.08), 0 2px 6px -2px rgba(255, 107, 53, 0.06);
}
.glass-dark {
  background: rgba(15, 25, 34, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hover lift card */
.lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(255, 107, 53, 0.18),
              0 18px 36px -18px rgba(31, 78, 95, 0.15);
}

/* Spotlight cursor effect for feature cards */
.spotlight {
  position: relative;
  overflow: hidden;
}
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 53, 0.10), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }

/* Construction tape stripe */
.tape {
  background: repeating-linear-gradient(
    135deg,
    #FF6B35 0,
    #FF6B35 14px,
    #0F1922 14px,
    #0F1922 28px
  );
}

/* Phone frame */
.phone-frame {
  box-shadow:
    0 0 0 10px #0F1922,
    0 0 0 12px #1F2E3A,
    0 50px 100px -20px rgba(15, 25, 34, 0.4),
    0 0 120px -10px rgba(255, 107, 53, 0.3);
}

/* Ghost number */
.ghost-number {
  font-family: 'Google Sans Flex', 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 22rem;
  line-height: 0.85;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.10), rgba(31, 78, 95, 0.04));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Animated nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #FF6B35, #1F4E5F);
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Logo glow */
.logo-glow {
  filter: drop-shadow(0 0 24px rgba(255, 107, 53, 0.4))
          drop-shadow(0 0 48px rgba(74, 139, 157, 0.25));
}

/* Numbered feature list (editorial style) */
.feat-list { list-style: none; padding: 0; margin: 0; counter-reset: feat; }
.feat-list li {
  counter-increment: feat;
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
  column-gap: 0.875rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(15, 25, 34, 0.07);
  font-size: 0.875rem;
  color: #1F2E3A;
  line-height: 1.45;
}
.feat-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.feat-list li > svg { display: none; }
.feat-list li::before {
  content: counter(feat, decimal-leading-zero);
  font-family: 'Google Sans Flex', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: linear-gradient(120deg, #FF8C42, #FF6B35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.feat-list-teal li::before { background: linear-gradient(120deg, #4A8B9D, #1F4E5F); -webkit-background-clip: text; background-clip: text; }
.feat-list-dark li { border-color: rgba(255, 222, 196, 0.14); color: rgba(254, 251, 245, 0.88); }
.feat-list-dark li::before { background: linear-gradient(120deg, #FFC9AD, #FF8C42); -webkit-background-clip: text; background-clip: text; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}