/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Ambient grain */
.noise-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.03;
  pointer-events: none;
  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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glow spots */
.glow-spot {
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: breathe 10s infinite ease-in-out;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Reveal text */
.reveal-text {
  animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-h1 { animation-delay: 2s; }
.delay-h1-cta { animation-delay: 2.2s; }
@keyframes slideUpFade {
  to { opacity: 1; transform: translateY(0); }
}

/* ── H1 "Every. Single. Call." C8 Animation ── */
.h1-animated {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.85;
  position: relative;
}
.h1-animated::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  animation: h1GlowPulse 1.5s ease forwards 1.9s;
}
@keyframes h1GlowPulse {
  0% { opacity: 0; transform: scale(0.8); }
  40% { opacity: 1; }
  100% { opacity: 0.5; transform: scale(1.2); }
}

.h1-word {
  font-size: clamp(4rem, 12vw, 12rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  display: block;
  position: relative;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12);
  opacity: 0;
}

/* Ghost outlines appear immediately, staggered */
.h1-word:nth-child(1) { animation: h1ShowOutline 0.3s ease forwards 0s, h1BumpScale 0.3s ease forwards 0.4s; }
.h1-word:nth-child(2) { animation: h1ShowOutline 0.3s ease forwards 0.1s, h1BumpScale 0.3s ease forwards 0.9s; }
.h1-word:nth-child(3) { animation: h1ShowOutline 0.3s ease forwards 0.2s, h1BumpScale 0.3s ease forwards 1.4s; }

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

/* Fill reveals left-to-right */
.h1-word::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #ffffff, #777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  clip-path: inset(0 100% 0 0);
}
.h1-word:nth-child(1)::before { animation: h1FillReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s; }
.h1-word:nth-child(2)::before { animation: h1FillReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.9s; }
.h1-word:nth-child(3)::before { animation: h1FillReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.4s; }

@keyframes h1FillReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

@keyframes h1BumpScale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Scanner line */
.h1-word::after {
  content: '';
  position: absolute;
  top: 5%;
  height: 90%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6), transparent);
  left: 0%;
  opacity: 0;
  pointer-events: none;
}
.h1-word:nth-child(1)::after { animation: h1ScanLine 0.45s ease forwards 0.4s; }
.h1-word:nth-child(2)::after { animation: h1ScanLine 0.45s ease forwards 0.9s; }
.h1-word:nth-child(3)::after { animation: h1ScanLine 0.45s ease forwards 1.4s; }

@keyframes h1ScanLine {
  0%   { left: 0%; opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Accordion */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep .3s ease-in-out; }
@keyframes sweep {
  0% { opacity: 0; margin-top: -10px; }
  100% { opacity: 1; margin-top: 10px; }
}

/* Pro card */
.pro-card-glow {
  box-shadow: 0 0 40px rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── Scroll reveal animations ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children: cards, steps, list items */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}
/* Keep children hidden until parent is revealed */
[data-reveal-stagger]:not(.revealed) > * {
  opacity: 0;
  transform: translateY(24px);
}

/* Scale-up variant for screenshots/browser frames */
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.95) translateY(24px);
}
[data-reveal="scale"].revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Icon fallbacks (no external icon font) */
.icon { font-style: normal; font-weight: 700; }

/* ── Scroll reveal animations ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 0.12s; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 0.16s; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 0.24s; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 0.32s; }
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.95) translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="scale"].revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}