*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p { margin: 0; }

/* Typography scale */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  padding: 0.375rem 0.875rem;
  border: 1px solid hsl(195 85% 55%);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 20px -4px hsl(195 90% 50% / 0.35);
}
.eyebrow--light {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.section-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  padding-bottom: 0.15em;
  margin-top: 1.25rem;
  background: linear-gradient(135deg, #0a0a0a 0%, #1e3a8a 55%, #06b6d4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: translateZ(0);
  filter:
    drop-shadow(0 10px 20px rgba(10, 10, 10, 0.18))
    drop-shadow(0 2px 4px rgba(10, 10, 10, 0.12));
}
.section-title--light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 10px 20px rgba(255, 255, 255, 0.12))
    drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}

.section-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.72);
  max-width: 64rem;
  margin: 1.5rem auto 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 999px;
  transition: all var(--t-base);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-lg { padding: 0.95rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--foreground);
  color: var(--dark-foreground);
}
.btn-primary:hover {
  background: #27272a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  background: var(--muted);
  border-color: var(--foreground);
}

.btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
}
.btn-ghost:hover { color: var(--foreground); }

.btn-light {
  background: #ffffff;
  color: var(--foreground);
}
.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.18);
  color: var(--foreground);
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 32px rgba(0, 0, 0, 0.08);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

/* ===================== GLOWING SHADOW CTA ===================== */
@property --glow-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
  background: #0a0e1a;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background-image:
    linear-gradient(#0a0e1a, #0a0e1a),
    linear-gradient(135deg, #0a0a0a 0%, #1e3a8a 55%, #06b6d4 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: btn-frame-glow 3s ease-in-out infinite;
  transition:
    box-shadow 0.4s ease,
    transform var(--t-base);
}
@keyframes btn-frame-glow {
  0%, 100% {
    box-shadow:
      0 0 12px -2px rgba(30, 58, 138, 0.5),
      0 0 24px -6px rgba(6, 182, 212, 0.35);
  }
  50% {
    box-shadow:
      0 0 22px -1px rgba(30, 58, 138, 0.85),
      0 0 44px -4px rgba(6, 182, 212, 0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow { animation: none; }
}
.btn-glow.btn-lg {
  padding: 1.05rem 2.2rem;
  font-size: 1rem;
}
.btn-glow.btn-block { width: 100%; }

.btn-glow:hover {
  box-shadow:
    0 0 24px -2px rgba(30, 58, 138, 0.45),
    0 0 48px -6px rgba(6, 182, 212, 0.35);
  transform: translateY(-1px);
}
.btn-glow:active {
  transform: translateY(0);
}
.btn-glow > span {
  animation: btn-glow-pulse 3.5s ease-in-out infinite;
}
@keyframes btn-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(30, 58, 138, 0.4),
      0 0 16px rgba(6, 182, 212, 0.25);
  }
  50% {
    text-shadow:
      0 0 14px rgba(30, 58, 138, 0.7),
      0 0 28px rgba(6, 182, 212, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow > span { animation: none; }
}

@keyframes btn-glow-hue {
  to { --glow-hue: 360; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-glow { animation: none !important; }
}

/* ===================== SHINY CTA BUTTON ===================== */
@property --shiny-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --shiny-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --shiny-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --shiny-shine-color {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.btn-shiny {
  --shiny-bg: #0a0a0a;
  --shiny-bg-subtle: #1a1818;
  --shiny-fg: #ffffff;
  --shiny-highlight: #3b82f6;
  --shiny-highlight-subtle: #8484ff;
  --shiny-duration: 3s;
  --shiny-shadow-size: 2px;
  --shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  outline-offset: 4px;
  padding: 0.95rem 1.9rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--shiny-fg);
  white-space: nowrap;
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--shiny-angle) - var(--shiny-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--shiny-percent),
      var(--shiny-shine-color) calc(var(--shiny-percent) * 2),
      var(--shiny-highlight) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle);
  transition:
    var(--shiny-transition),
    transform var(--t-base);
  transition-property: --shiny-angle-offset, --shiny-percent, --shiny-shine-color, transform;
}

.btn-shiny.btn-lg {
  padding: 1.1rem 2.25rem;
  font-size: 1rem;
}

.btn-shiny::before,
.btn-shiny::after,
.btn-shiny > span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.btn-shiny:active { translate: 0 1px; }

/* Dots pattern */
.btn-shiny::before {
  --dot-size: calc(100% - var(--shiny-shadow-size) * 3);
  --dot-pos: 2px;
  --dot-space: calc(var(--dot-pos) * 2);
  width: var(--dot-size);
  height: var(--dot-size);
  background: radial-gradient(
      circle at var(--dot-pos) var(--dot-pos),
      white calc(var(--dot-pos) / 4),
      transparent 0
    ) padding-box;
  background-size: var(--dot-space) var(--dot-space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(
    from calc(var(--shiny-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  mask-image: conic-gradient(
    from calc(var(--shiny-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}

/* Inner shimmer */
.btn-shiny::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-highlight),
    transparent
  );
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.btn-shiny > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-shiny > span::before {
  --glow-size: calc(100% + 1rem);
  width: var(--glow-size);
  height: var(--glow-size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: shiny-breathe linear calc(var(--shiny-duration) * 1.5) infinite;
}

.btn-shiny,
.btn-shiny::before,
.btn-shiny::after {
  animation:
    shiny-rotate linear var(--shiny-duration) infinite,
    shiny-rotate linear calc(var(--shiny-duration) / 0.4) infinite reverse paused;
  animation-composition: add;
}

.btn-shiny:hover,
.btn-shiny:focus-visible {
  --shiny-percent: 20%;
  --shiny-angle-offset: 95deg;
  --shiny-shine-color: var(--shiny-highlight-subtle);
}

.btn-shiny:hover,
.btn-shiny:focus-visible,
.btn-shiny:hover::before,
.btn-shiny:focus-visible::before,
.btn-shiny:hover::after,
.btn-shiny:focus-visible::after {
  animation-play-state: running;
}

.btn-shiny:hover > span::before,
.btn-shiny:focus-visible > span::before {
  opacity: 1;
}

@keyframes shiny-rotate {
  to { --shiny-angle: 360deg; }
}
@keyframes shiny-breathe {
  from, to { scale: 1; }
  50% { scale: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-shiny,
  .btn-shiny::before,
  .btn-shiny::after,
  .btn-shiny > span::before {
    animation: none !important;
  }
}

/* Reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}