/* ════════════════════════════════════════
   BASE
════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-deep:   #0d0014;
  --bg-mid:    #1a0030;
  --purple-text: #b884ff;
  --purple-soft: #8a5cd1;
  --white:     #ffffff;
  --nav-height: 72px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--white);
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}


/* ════════════════════════════════════════
   BACKGROUND CANVAS
════════════════════════════════════════ */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


/* ════════════════════════════════════════
   NAVIGATION
   Floating pill that physically stretches its BACKGROUND to full
   width on scroll. The inner content (logo, links, CTA) stays in
   the exact same position in both states — only the dark bar
   behind it grows outward to the screen edges.
   
   Achieved by separating the structure:
   - <nav> is full-width and contains the dark band as a ::before
     pseudo-element that grows from pill-width to full-width
   - .nav-inner holds the content and is sized to the pill bounds
     in both states (so logo/CTA never move)
════════════════════════════════════════ */
#main-nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* Material Design standard easing — gentle acceleration into a
     fast middle, with a soft decelerated landing. Feels natural
     and responsive without being too dramatic at the edges. */
  transition: top 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: top;
}

/* The bar/background — physically stretches from pill width to
   full width on scroll. This is the element the eye watches grow. */
#main-nav::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* Pill state: matches .nav-inner's width and is centred */
  left: 50%;
  width: calc(100% - 80px);
  max-width: 1400px;
  transform: translateX(-50%);
  /* Pill visuals */
  background: rgba(20, 5, 40, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(184, 132, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: none;
  transition:
    width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width, max-width, border-radius, background-color, border-color, box-shadow;
}

/* Scrolled — the bar stretches edge-to-edge, loses its pill shape
   and rounded corners, and shifts to a solid colour with a thin
   bottom line. */
#main-nav.scrolled::before {
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-color: transparent;
  background-color: #0e0017;
  box-shadow: 0 1px 0 rgba(184, 132, 255, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#main-nav.scrolled {
  top: 0;
}

/* The content layer — stays in EXACTLY the same position in both
   pill and scrolled states. The bar grows around it without moving
   the logo, nav links, or CTA. */
.nav-inner {
  position: relative;
  pointer-events: auto;
  width: calc(100% - 80px);
  max-width: 1400px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 10px 16px 10px 28px;
  min-height: var(--nav-height);
}

.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  padding: 2px 6px;
  min-width: 140px;
  position: relative;
}

.nav-logo .pulse-word {
  display: inline-flex;
  position: relative;
  --nav-pulse-size: 28px;
}

.nav-sub {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--purple-text);
  margin-top: 2px;
  padding-left: 2px;
}

.nav-links {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: 36px;
}
.nav-links a {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
  position: relative;
  padding: 6px 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--purple-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.nav-links a:hover {
  color: var(--purple-text);
}
.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-cta {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #15001f;
  background: var(--white);
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(184, 132, 255, 0.5), 0 0 60px rgba(184, 132, 255, 0.25);
}


/* ════════════════════════════════════════
   PULSE WORD — shared by nav + (future hero)
════════════════════════════════════════ */
.pulse-word {
  display: inline-flex;
  gap: 0;
  position: relative;
}

.pulse-word::before,
.pulse-word::after {
  content: 'PULSE';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  font-family: 'Bitcount Single', monospace;
  font-size: var(--nav-pulse-size, clamp(50px, 10vw, 100px));
  font-weight: 300;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s;
  white-space: nowrap;
}
.pulse-word::before {
  color: rgba(210, 80, 255, 0.5);
  transform: translateX(-3px) translateY(-1px);
}
.pulse-word::after {
  color: rgba(110, 0, 220, 0.45);
  transform: translateX(3px) translateY(1px);
}
.pulse-word.chroma::before,
.pulse-word.chroma::after { opacity: 1; }

.pulse-letter {
  font-family: 'Bitcount Single', monospace;
  font-size: var(--nav-pulse-size, clamp(50px, 10vw, 100px));
  font-weight: 300;
  color: #fff;
  display: inline-block;
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s ease;
  text-shadow:
    0 0 5px  var(--g1),
    0 0 12px var(--g1),
    0 0 22px var(--g2),
    0 0 40px var(--g3);
  animation: glow-pulse 4.5s ease-in-out infinite;
}
.pulse-letter.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pulse-letter.lit {
  animation: none !important;
  text-shadow:
    0 0 6px  var(--g0),
    0 0 16px var(--g1),
    0 0 32px var(--g1),
    0 0 60px var(--g2),
    0 0 90px var(--g3) !important;
}

@keyframes glow-pulse {
  0% {
    opacity: 0.1;
    text-shadow: 0 0 3px var(--g2), 0 0 8px var(--g3);
  }
  38% {
    opacity: 1;
    text-shadow:
      0 0 8px  var(--g0),
      0 0 18px var(--g1),
      0 0 35px var(--g2),
      0 0 65px var(--g3),
      0 0 100px var(--g3);
  }
  62% {
    opacity: 1;
    text-shadow:
      0 0 8px  var(--g0),
      0 0 18px var(--g1),
      0 0 35px var(--g2),
      0 0 65px var(--g3),
      0 0 100px var(--g3);
  }
  100% {
    opacity: 0.1;
    text-shadow: 0 0 3px var(--g2), 0 0 8px var(--g3);
  }
}

@keyframes letter-glitch {
  0%   { filter: blur(0px);   transform: translateX(0px);  opacity: 1;    }
  8%   { filter: blur(4px);   transform: translateX(2px);  opacity: 0.3;  }
  15%  { filter: blur(2px);   transform: translateX(-1px); opacity: 0.65; }
  22%  { filter: blur(0px);   transform: translateX(0px);  opacity: 1;    }
  100% { filter: blur(0px);   transform: translateX(0px);  opacity: 1;    }
}


/* ════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════ */
.hero {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - var(--nav-height));
  /* Reduced ~7% from original 140/80 to bring content slightly up while
     preserving the open, full-screen feel of the hero. */
  padding: 130px 40px 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.hero-copy {
  max-width: 560px;
}

.hero-headline {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 26px;
}
.hero-headline span {
  display: block;
  white-space: nowrap;
}

.hero-body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin-bottom: 44px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.btn-primary {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: #15001f;
  background: var(--white);
  text-decoration: none;
  padding: 20px 44px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 30px rgba(184, 132, 255, 0.35), 0 0 70px rgba(184, 132, 255, 0.18);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(184, 132, 255, 0.6), 0 0 100px rgba(184, 132, 255, 0.3);
}

.btn-text {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--white);
  text-decoration: none;
  padding: 20px 36px;
  position: relative;
  display: inline-block;
  border-radius: 999px;
  overflow: hidden;
  z-index: 0;
  transition: color 0.35s ease, box-shadow 0.35s ease;
}
.btn-text::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(184, 132, 255, 0.35);
  transition: border-color 0.35s ease;
  z-index: -2;
}
.btn-text::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(184, 132, 255, 0.95), rgba(138, 92, 209, 0.95));
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  z-index: -1;
}
.btn-text:hover {
  color: #15001f;
  box-shadow: 0 0 30px rgba(184, 132, 255, 0.35);
}
.btn-text:hover::before {
  border-color: transparent;
}
.btn-text:hover::after {
  transform: scale(1);
  opacity: 1;
}


/* hero visual (laptop) */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.laptop {
  width: 100%;
  max-width: 720px;
  height: auto;
  animation: laptop-float 6s ease-in-out infinite;
  filter: drop-shadow(0 0 60px rgba(154, 80, 220, 0.15));
}

@keyframes laptop-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}


/* ════════════════════════════════════════
   CONTENT SECTIONS
   Each variant applies its own tint wash.
   Content aligns with the hero's max-width edge.
════════════════════════════════════════ */
.content-section {
  position: relative;
  z-index: 10;
  /* Reduced ~7% from original 120/80vh to bring content slightly up
     while keeping the airy, open feel of each section. */
  padding: 110px 40px;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-inner {
  width: 100%;
  /* Match the hero's outer container width (1400px) so left edges
     of section content align with the hero's left edge. Internal
     copy widths are managed on the text elements themselves. */
  max-width: 1400px;
  margin: 0 auto;
}

.section-eyebrow {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--purple-text);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.section-heading {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 28px;
  max-width: 720px;
}

.section-body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 640px;
}

/* ── HERO BOTTOM WAVE ──
   The hero section is not tinted, but it still has a hard horizontal
   edge where it meets the first tinted section. To eliminate that
   seam, we apply a wave mask to a full-bleed pseudo-element on the
   first tinted section that extends UP into the hero by 130px.
   See `.section-wave-into-hero` below. */

/* ── TINT VARIANTS ──
   Each section's tint is a wave-shaped wash. Two key tricks make
   the boundary look like one continuous wave with no straight lines:
   
   1. The tint pseudo-element extends 130px PAST the bottom of its
      own section box (using `bottom: -130px`). This means the tint
      bleeds into the top of the next section.
   2. The mask shapes the tint with a wavy bottom, so the bleed
      ends on a curve — not a line.
   
   Result: when you look at a section boundary, you see one single
   wave (the previous section's bottom) sitting cleanly on top of
   the next section's tint. No second straight line, no flat top
   on the next section visible because the previous tint already
   covers that area on the wave curve. */

.section-tint-a,
.section-tint-b,
.section-tint-c {
  position: relative;
}

.section-tint-a::before,
.section-tint-b::before,
.section-tint-c::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Extend 130px past the section's own bottom — this creates the
     wave-into-next-section bleed. */
  bottom: -130px;
  z-index: -2;
  pointer-events: none;

  /* Wave-bottom mask — solid white at the top, transitioning to a
     wave curve at the bottom of the masked area. The wave occupies
     the bottom 130px of the masked area regardless of section height. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,940 C1000,1000 800,870 600,940 C400,1010 200,870 0,940 Z' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,940 C1000,1000 800,870 600,940 C400,1010 200,870 0,940 Z' fill='white'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Tint colours */
.section-tint-a::before { background: rgba(30, 0, 55, 0.60); }
.section-tint-b::before { background: rgba(8, 0, 20, 0.72); }
.section-tint-c::before { background: rgba(40, 10, 70, 0.40); }

/* The tinted sections all need a wave-up ribbon extending into the
   section above them. This creates the dual-wave transition where
   the previous section's tint curves down AND the current section's
   tint curves up — meeting in the middle as one continuous wave.
   
   Section A bleeds up into the hero (which has no tint of its own).
   Sections B and C bleed up into the previous tinted section, where
   their wave-up ribbon sits on top of the previous section's
   wave-down bleed for a perfectly seamless cooperative transition. */
.section-tint-a::after,
.section-tint-b::after,
.section-tint-c::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;       /* sits directly above the section */
  height: 130px;      /* extends 130px up into the previous section */
  z-index: -2;
  pointer-events: none;
  /* Same wave mask but flipped (we want solid at bottom, wave at top) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'><path d='M0,70 C200,0 400,140 600,70 C800,0 1000,140 1200,70 L1200,130 L0,130 Z' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'><path d='M0,70 C200,0 400,140 600,70 C800,0 1000,140 1200,70 L1200,130 L0,130 Z' fill='white'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Each ::after gets its own section's tint colour — so the wave
   entering from above matches the section it belongs to. */
.section-tint-a::after { background: rgba(30, 0, 55, 0.60); }
.section-tint-b::after { background: rgba(8, 0, 20, 0.72); }
.section-tint-c::after { background: rgba(40, 10, 70, 0.40); }

/* (Old `.wave-edge` overlay system removed — the wavy section
   boundary is now produced by the section's own tint mask above.
   No more overlay divs needed in the HTML.) */


/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; gap: 20px; }
  .nav-cta { padding: 12px 22px; font-size: 12px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-copy { margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero { padding: 120px 24px 60px; }
}

@media (max-width: 600px) {
  #main-nav { width: calc(100% - 24px); top: 12px; }
  .nav-inner { padding-left: 16px; padding-right: 8px; }
  .nav-logo .pulse-word { --nav-pulse-size: 22px; }
  .nav-sub { font-size: 10px; }
  .hero-headline { font-size: 36px; }
  .hero-body { font-size: 18px; }
  .content-section { padding: 80px 24px; }
  .section-heading { font-size: 32px; }
  .section-body { font-size: 17px; }
}