@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,700&display=swap');

@font-face {
  font-family: 'Aeonik';
  src: url('Assets/fonnts.com-Aeonik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Aeonik';
  src: url('Assets/fonnts.com-Aeonik-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* ========== INTERACTION TOKENS ========== */
:root {
  --int-fast: 140ms;
  --int-base: 220ms;
  --int-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --focus-ring: 0 0 0 3px rgba(124, 58, 247, 0.55);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ========== UTILITIES ========== */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.accent-yellow {
  color: #FFCD29;
}

.accent-white {
  color: #fff;
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 11px;
  font-family: 'Aeonik', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: transform var(--int-base) var(--int-ease),
              opacity var(--int-base) var(--int-ease),
              box-shadow var(--int-base) var(--int-ease);
}

.btn:hover {
  opacity: 0.94;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--int-fast);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Universal focus-visible ring for everything else interactive */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.faq-question:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

.btn-pink {
  background: #E8175D;
  color: #fff;
}

.btn-purple {
  background: #7C3AED;
  color: #fff;
}

.btn-yellow {
  background: #FFCD29;
  color: #000;
}

.btn-nav {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 9px;
}

/* ========== NAVIGATION ========== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 24px 0;
  background: transparent;
  transition: padding 0.25s ease;
}

.navbar.is-scrolled {
  padding: 16px 0;
}

/* Logo fades out once the user has scrolled past the hero — the giant TOREC
   wordmark in the hero replaces it visually, and below the hero the menu
   pill carries the brand presence on its own. */
.logo {
  cursor: pointer;
  transition: opacity 0.25s ease,
              transform var(--int-base) var(--int-ease);
}

.logo:hover { transform: scale(1.06); }
.logo:active { transform: scale(0.96); }

.navbar.is-scrolled .logo {
  opacity: 0;
  pointer-events: none;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match the hero-text edge padding so logo aligns with TOREC's left edge
     and the nav-links pill aligns with the tagline's right edge */
  padding: 0 64px;
}

.logo {
  display: flex;
  align-items: center;
  line-height: 0;
}

.logo-mark {
  width: 96px;
  height: 96px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 6px 6px 6px 24px;
  background: rgba(15, 15, 20, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.nav-links a:not(.btn) {
  font-size: 14px;
  color: #ccc;
  transition: color var(--int-fast) var(--int-ease);
}

.nav-links a:not(.btn):hover {
  color: #fff;
}

/* The CTA button is also an <a> inside .nav-links — keep its label white. */
.nav-links a.btn {
  color: #fff;
}

/* ========== HERO ========== */
.hero {
  padding-top: 120px;
  position: relative;
  overflow: visible;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 900px;
  background: radial-gradient(circle, rgba(123, 47, 247, 0.35) 0%, rgba(123, 47, 247, 0.1) 40%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.hero-text {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding: 0 64px;
}

.hero h1 {
  font-size: clamp(90px, 13vw, 180px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -4px;
  color: #fff;
}

.hero-tagline {
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1px;
  text-align: left;
  align-self: flex-end;
  width: fit-content;
  margin-top: 80px;
  color: #fff;
}

.hero-screenshot {
  margin-top: 50px;
  width: 100%;
  overflow: hidden;
}

.hero-screenshot img {
  width: 100%;
  display: block;
}

/* ========== SUB-HERO ========== */
.sub-hero {
  padding: 60px 0 80px;
  text-align: center;
}

.sub-hero p {
  font-size: clamp(22px, 2.2vw, 30px);
  color: #fff;
  line-height: 1.35;
  font-weight: 500;
  max-width: 720px;
  margin: 0 auto 32px;
}

/* ========== WORKFLOW ========== */
.workflow {
  padding: 80px 0 60px;
}

/* Narrower inner column — image centers in the container, heading + paragraph
   share the image's left edge so everything reads as one aligned column. */
.workflow > .container > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.workflow h2 {
  font-size: clamp(56px, 8vw, 104px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2px;
  margin-bottom: 28px;
}

.workflow > .container > p {
  font-size: clamp(26px, 2.6vw, 36px);
  color: #ccc;
  line-height: 1.35;
  font-weight: 500;
  max-width: 1180px;
  margin-bottom: 50px;
}

.workflow > .container > p {
  /* keep the paragraph readable: cap text width but leave the box at 1180
     so the visible left edge still aligns with the image */
}

.dashboard-screenshot {
  overflow: hidden;
  text-align: center;
}

.dashboard-screenshot img {
  margin: 0 auto;
}

/* ========== RECORDING FEATURES ========== */
.recording-features {
  padding: 100px 0 60px;
}

.recording-features h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  text-align: center;
  color: #FFCD29;
  max-width: 820px;
  margin: 0 auto 24px;
}

.recording-features > .container > p {
  text-align: center;
  font-size: clamp(20px, 1.9vw, 26px);
  color: #ccc;
  line-height: 1.45;
  font-weight: 500;
  max-width: 1100px;
  margin: 0 auto 60px;
}

.features-stagger {
  position: relative;
  min-height: 700px;
}

.features-stagger .feature-card {
  width: 34%;
}

/* :nth-child(2) because .timeline-connector is the actual first child */
.features-stagger .feature-card:nth-child(2) {
  float: left;
  clear: both;
  margin-left: 8%;
  margin-top: 60px;
}

.features-stagger .feature-card:nth-child(3) {
  float: right;
  margin-top: 380px;
  margin-right: 8%;
  clear: right;
}

.features-stagger {
  min-height: 900px;
}

/* Glowing LED-style connector — single PNG trail with dots baked in. */
.timeline-connector {
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  width: 60px;
}

.timeline-connector .timeline-trail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  /* Scroll-reveal: trail draws top→bottom when section enters viewport */
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.timeline-connector.in-view .timeline-trail {
  transform: scaleY(1);
}

/* Reduced-motion users get everything statically visible */
.motion-reduced .timeline-connector .timeline-trail {
  transform: none;
  transition: none;
}

/* ===========================================================================
   REVEAL UTILITY — opt-in scroll-reveal for any element.
   Default: fade + slide-up 30px. Variants:
     .reveal-scale    → fade + scale 0.96 → 1 (use for large images)
   Stagger children with inline style="--i:N" on each child (80ms per index).
   The IntersectionObserver below adds .in-view when the element enters view.
   =========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  /* Reveal uses 0.8s for opacity/transform; interactive props (shadow,
     border, background, color) use the standard --int-base so hover/focus
     feedback isn't stuck behind the slow reveal duration. */
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow var(--int-base) var(--int-ease),
              border-color var(--int-base) var(--int-ease),
              background var(--int-fast) var(--int-ease),
              color var(--int-fast) var(--int-ease);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  /* Once the reveal has played, downshift to fast timing so hover/focus
     transforms on the same element (e.g. button lift) don't lag at 0.8s. */
  transition-duration: var(--int-base);
}

.reveal-scale {
  transform: scale(0.96);
}

.reveal-scale.in-view {
  transform: scale(1);
}

/* Per-child stagger delay via inline --i custom property */
.reveal[style*="--i"] {
  transition-delay: calc(var(--i) * 80ms);
}

.motion-reduced .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Disable interaction transforms for reduced-motion users.
   Color/border/shadow changes still happen — they're not motion. */
.motion-reduced .btn,
.motion-reduced .feature-card,
.motion-reduced .testimonial-card,
.motion-reduced .logo {
  transition-property: opacity, box-shadow, border-color, background, color;
}

.motion-reduced .btn:hover,
.motion-reduced .btn:active,
.motion-reduced .feature-card:hover,
.motion-reduced .testimonial-card:hover,
.motion-reduced .logo:hover,
.motion-reduced .logo:active {
  transform: none;
}

/* ========== FEATURE CARDS ========== */
.feature-card {
  background: #0A0A0A;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  /* No transition here — .reveal owns the transition list for both interactive
     (border, shadow) and animation (opacity, transform) properties. Cards
     without .reveal won't animate on hover, but every card on this site does
     have .reveal so coverage is complete. */
}

.feature-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Scroll-reveal: side cards slide up + fade in once their section enters
   the viewport. Second card in each pair animates with a slight delay so
   the diagonal stagger reads visually as a sequence. */
.features-stagger .feature-card,
.analytics-stagger .feature-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.features-stagger .feature-card.in-view,
.analytics-stagger .feature-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.features-stagger .feature-card:nth-child(3),
.analytics-stagger .feature-card:nth-child(3) {
  transition-delay: 0.2s;
}

.motion-reduced .features-stagger .feature-card,
.motion-reduced .analytics-stagger .feature-card {
  opacity: 1;
  transform: none;
  transition: none;
}

.feature-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #0D0D0D;
  border-radius: 11px 11px 0 0;
}

.feature-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Per-card image framing — shift focus to a different region of the same
   source screenshot so cards that reuse Recordings_Edit don't look identical. */
.feature-img-pos-right  img { object-position: right center; }
.feature-img-pos-left   img { object-position: left center; }
.feature-img-pos-bottom img { object-position: center bottom; }

/* The invoice modal is wider than tall — frame it without clipping the form. */
.feature-img-invoice img { object-fit: contain; background: #0A0A0A; padding: 18px; }

.feature-card-body {
  padding: 28px;
}

.feature-card-body h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.feature-card-body p {
  font-size: 15px;
  color: #888;
  line-height: 1.6;
}

/* Glowing tail with a dot — hangs below the first card and above the
   second card in each staggered pair, indicating where the trail meets
   the card. Yellow for recording-features, red (#FF0054) for analytics.
   On scroll-reveal the tail draws from the dot end outward (clip-path). */
.features-stagger .feature-card::after,
.analytics-stagger .feature-card::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 42px;
  height: 140px;
  background-image: url('Assets/Underbanner_Label.svg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  /* Hidden until card reveals — clip starts at the dot end (bottom of the
     SVG box, which becomes the top visually for flipped second card) */
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s,
              -webkit-clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}

.features-stagger .feature-card.in-view::after,
.analytics-stagger .feature-card.in-view::after {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Second card's tail waits until after the second card itself finishes
   its slide-in (which is delayed 0.2s) */
.features-stagger .feature-card:nth-child(3)::after,
.analytics-stagger .feature-card:nth-child(3)::after {
  transition-delay: 0.55s;
}

.motion-reduced .features-stagger .feature-card::after,
.motion-reduced .analytics-stagger .feature-card::after {
  clip-path: none;
  -webkit-clip-path: none;
  transition: none;
}

/* First card (top of stagger): tail BELOW pointing down */
.features-stagger .feature-card:nth-child(2)::after,
.analytics-stagger .feature-card:nth-child(2)::after {
  top: 100%;
  transform: translateX(-50%);
}

/* Second card (right side of stagger): tail still BELOW the card, but
   rotated 180° — dot ends up at the top (next to card), line extends down */
.features-stagger .feature-card:nth-child(3)::after,
.analytics-stagger .feature-card:nth-child(3)::after {
  top: 100%;
  transform: translateX(-50%) scaleY(-1);
}

/* Analytics variant uses the red-recolored SVG (exact #FF0054) */
.analytics-stagger .feature-card::after {
  background-image: url('Assets/Underbanner_Label_Red.svg');
}

/* ========== MORE FEATURES ========== */
.more-features {
  padding: 80px 0 100px;
  clear: both;
}

/* Start recording on PC button — flush with container content edge so it
   aligns with the heading + the full-width features-grid cards above. */
.more-features > .container > .btn {
  display: block;
  width: fit-content;
  margin-left: 0;
  margin-right: 0;
  margin-top: 40px;
}

.more-features h2 {
  font-size: clamp(56px, 8vw, 104px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2px;
  margin-bottom: 24px;
}

.more-features > .container > p {
  font-size: clamp(26px, 2.6vw, 36px);
  color: #ccc;
  line-height: 1.35;
  font-weight: 500;
  max-width: 760px;
  margin-bottom: 50px;
}

.features-grid {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.features-grid .feature-card {
  flex: 1;
  min-width: 0;
}

/* ========== ANALYTICS ========== */
.analytics {
  padding: 60px 0 60px;
  position: relative;
  overflow: hidden;
}

/* Upper-left orange wash — designer-supplied PNG (Gradient 1.png) sits
   behind the heading ONLY. Sized small enough that it doesn't reach the
   widget marquee below — keeps the orange strictly in the heading region.
   TODO: re-derive as pure CSS once positioning is dialed in. */
.analytics::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -120px;
  width: 1000px;
  height: 700px;
  background-image: url('Assets/Gradient 1.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none;
}

.analytics .container {
  position: relative;
  z-index: 1;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 50px;
  gap: 40px;
  /* Full-bleed — no container constraint, sits flush against viewport edges
     with only minimal side padding so text doesn't kiss the screen */
  padding: 0 64px;
  position: relative;
  z-index: 1;
}

.analytics-header h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.gradient-text {
  background: linear-gradient(135deg, #FF6B35, #E8175D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.analytics-header p {
  font-size: clamp(22px, 2.2vw, 30px);
  color: #ccc;
  line-height: 1.35;
  font-weight: 500;
  max-width: 560px;
  padding-top: 10px;
}

/* Full-bleed infinite horizontal scroll of the widget collage. The track
   contains two copies of the image; translating to -50% shows the seam
   exactly at the wrap point so the loop is invisible. */
.analytics-marquee {
  width: 100%;
  margin-bottom: 50px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Bottom fade — widgets dissolve into the page background, matching the
   PDF where the lower half of the widget set is nearly invisible. */
.analytics-marquee::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(180deg, transparent 0%, #000 85%);
  pointer-events: none;
  z-index: 2;
}

.analytics-marquee-track {
  display: flex;
  width: max-content;
  animation: analytics-marquee 60s linear infinite;
}

.analytics-marquee-track img {
  display: block;
  height: 480px;
  width: auto;
  flex-shrink: 0;
  padding-right: 48px;
  /* Fixed height + padding so each copy is identical in width; loop math
     (translate to -50% of the track) lands cleanly on the next copy.
     48px = the original 80px reduced by 40% per design. */
}

@keyframes analytics-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect users who'd rather not see motion. */
@media (prefers-reduced-motion: reduce) {
  .analytics-marquee-track { animation: none; }
}

.analytics-stagger {
  position: relative;
  min-height: 900px;
  margin-top: 180px;
  margin-bottom: 80px;
}

.analytics-stagger .feature-card {
  width: 34%;
}

/* :nth-child(2) because .timeline-connector is the actual first child */
.analytics-stagger .feature-card:nth-child(2) {
  float: left;
  clear: both;
  margin-left: 8%;
  margin-top: 60px;
}

.analytics-stagger .feature-card:nth-child(3) {
  float: right;
  margin-top: 400px;
  margin-right: 8%;
  clear: right;
}

/* ========== INVOICES ========== */
.invoices {
  padding: 80px 0;
  clear: both;
  position: relative;
}

/* Narrower inner column so the heading, paragraph, button and screenshot
   all share the same left edge (image centers in the wider container). */
.invoices > .container > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.invoices-header {
  max-width: 1280px;
}

.invoices h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 20px;
  white-space: nowrap;
}

.invoices > .container > p {
  font-size: 18px;
  color: #999;
  line-height: 1.7;
  max-width: 1280px;
  margin-bottom: 32px;
}

.invoices > .container > .invoice-screenshot img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Available on PC button — pulled right to align with the centered 1280px
   content column so it sits at the same left edge as the heading + image. */
.invoices > .container > .btn {
  display: block;
  width: fit-content;
  margin-left: max(0px, calc((100% - 1280px) / 2));
}


.invoice-screenshot {
  margin-top: 50px;
  overflow: hidden;
  text-align: center;
}

.invoice-screenshot img {
  margin: 0 auto;
  max-width: 100%;
  width: auto;
}

.invoice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 50px;
}

/* ========== GAMIFICATION ========== */
.gamification {
  padding: 100px 0 40px;
}

.gamification h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  color: #FFCD29;
  margin-bottom: 20px;
}

.gamification > .container > p {
  font-size: 17px;
  color: #999;
  line-height: 1.7;
  max-width: 620px;
}

/* ========== XP SYSTEM ========== */
.xp-system {
  padding: 80px 0 100px;
  position: relative;
}

.xp-badge {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #FFCD29;
  border-radius: 8px;
  color: #FFCD29;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}

.xp-system h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 50px;
}

.xp-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.xp-text-side {
  padding-top: 40px;
}

.xp-visual-side {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.xp-card {
  background: #0A0A0A;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.xp-card img {
  width: 100%;
}

.mission-card {
  background: #0D0D0D;
  border-radius: 11px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.06);
}

.mission-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.mission-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mission-card h3 {
  font-size: 20px;
  font-weight: 700;
}

.mission-card p {
  font-size: 15px;
  color: #888;
  line-height: 1.6;
}

/* Trailing duplicate card that fades out — gives the impression the list
   continues into the dark, matching the PDF reference. */
.mission-card-fade {
  position: relative;
  margin-top: -10px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 90%);
  pointer-events: none;
}

/* Yellow trail running through the XP system section, positioned between the
   text column and the visual column. */
.xp-system { position: relative; }
.xp-system .container { position: relative; }
.xp-system .xp-content { position: relative; }
.xp-timeline {
  left: 50%;
  width: 50px;
  top: 8%;
  bottom: 8%;
}

/* ========== TESTIMONIALS ========== */
.testimonials {
  padding: 100px 0;
}

.testimonials h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 60px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-card {
  background: #0D0D0D;
  border-radius: 11px;
  padding: 28px 28px 32px;
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  /* Transitions inherited from .reveal (every testimonial-card has it) */
}

.testimonial-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.testimonial-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Aeonik', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  user-select: none;
  flex-shrink: 0;
}

.testimonial-avatar-dark { color: #0A0A0A; }

.testimonial-name {
  font-size: 15px;
  font-weight: 700;
}

.testimonial-card p {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
}

/* ========== FAQ ========== */
.faq {
  padding: 100px 0;
}

.faq-header {
  margin-bottom: 50px;
  text-align: center;
}

.faq-header h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
}

.faq-header p {
  font-size: 17px;
  color: #999;
  line-height: 1.6;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #1A1A1A;
  padding: 28px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 20px;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
  transition: background var(--int-fast) var(--int-ease);
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.04);
}

.faq-question h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.faq-toggle {
  font-size: 24px;
  color: #666;
  flex-shrink: 0;
  transition: transform 0.3s;
  width: 30px;
  text-align: center;
  user-select: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer p {
  font-size: 15px;
  color: #888;
  line-height: 1.7;
  padding-top: 16px;
}

.faq-item.active .faq-answer {
  max-height: 200px;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

/* ========== CTA ========== */
.cta {
  padding: 120px 0 60px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1200px 700px at 50% 0%, rgba(140, 70, 255, 0.55) 0%, rgba(80, 30, 180, 0.25) 45%, transparent 75%),
    linear-gradient(180deg, #1A0B3E 0%, #14082E 60%, #0A0420 100%);
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(180, 120, 255, 0.35) 0%, rgba(123, 47, 247, 0.12) 50%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.cta .container {
  position: relative;
  z-index: 1;
}

.cta h2 {
  font-size: clamp(60px, 10vw, 140px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -3px;
  margin-bottom: 32px;
}

.cta-sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.cta-sub p {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  text-align: right;
}

.cta-screenshot {
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ========== FOOTER ========== */
.footer {
  padding: 80px 0 40px;
  border-top: 1px solid #111;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.footer-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 12px;
  transition: color var(--int-fast) var(--int-ease);
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  font-size: 13px;
  color: #444;
}

/* ========== RESPONSIVE ========== */
/* ===========================================================================
   RESPONSIVE — tablet (≤1024px) and mobile (≤768px / ≤480px)
   Stack staggered floats, hide trail decorations, shrink hero, condense spacing
   =========================================================================== */

/* ---------- TABLET ≤1024px ---------- */
@media (max-width: 1024px) {
  .container {
    padding: 0 32px;
  }

  /* Match shrunk navbar + hero edge padding */
  .nav-container,
  .hero-text,
  .analytics-header {
    padding: 0 32px;
  }

  /* Hero: TOREC + tagline stack vertically, tagline left-aligned under it */
  .hero {
    padding-top: 100px;
  }

  .hero-tagline {
    align-self: flex-start;
    text-align: left;
    margin-top: 40px;
  }

  /* Workflow / invoices: inner column collapses to container width */
  .workflow > .container > *,
  .invoices > .container > *,
  .invoices-header,
  .workflow > .container > p,
  .invoices > .container > p {
    max-width: 100%;
  }

  .invoices h2 {
    white-space: normal;   /* let it wrap at narrow widths */
  }

  .invoices > .container > .btn {
    margin-left: 0;
  }

  /* Side-by-side analytics header → stacked */
  .analytics-header {
    flex-direction: column;
    gap: 24px;
  }

  /* Staggered feature cards → single full-width column */
  .features-stagger,
  .analytics-stagger {
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .features-stagger .feature-card,
  .analytics-stagger .feature-card,
  .features-stagger .feature-card:nth-child(2),
  .features-stagger .feature-card:nth-child(3),
  .analytics-stagger .feature-card:nth-child(2),
  .analytics-stagger .feature-card:nth-child(3) {
    width: 100%;
    float: none;
    clear: both;
    margin: 0 0 40px 0;
  }

  /* Hide all timeline trails + card tail dots — only meaningful when staggered */
  .timeline-connector,
  .features-stagger .feature-card::after,
  .analytics-stagger .feature-card::after {
    display: none;
  }

  /* More-features grid → single column */
  .features-grid {
    flex-direction: column;
    gap: 24px;
  }

  .features-grid .feature-card {
    width: 100%;
  }

  .more-features > .container > .btn {
    margin-left: 0;
  }

  /* XP system: heading and visual stack */
  .xp-content {
    grid-template-columns: 1fr;
  }
}

/* ---------- MOBILE ≤768px ---------- */
@media (max-width: 768px) {
  .container,
  .nav-container,
  .hero-text,
  .analytics-header {
    padding: 0 20px;
  }

  /* Navbar: smaller logo, collapse menu links so only Download CTA shows */
  .navbar {
    padding: 16px 0;
  }

  .logo-mark {
    width: 48px;
    height: 48px;
  }

  .nav-links {
    gap: 14px;
    padding: 4px 4px 4px 16px;
  }

  .nav-links a:not(.btn) {
    display: none;
  }

  /* Hero: shrink the giant TOREC and tagline */
  .hero {
    padding-top: 90px;
  }

  .hero h1 {
    font-size: clamp(64px, 18vw, 100px);
    letter-spacing: -2px;
  }

  .hero-tagline {
    font-size: clamp(28px, 7vw, 40px);
    margin-top: 28px;
    letter-spacing: -0.5px;
  }

  .hero-screenshot {
    margin-top: 32px;
  }

  /* Sub-hero */
  .sub-hero {
    padding: 40px 0 50px;
  }

  .sub-hero p {
    font-size: clamp(18px, 4.5vw, 22px);
  }

  /* Section headings + paragraphs */
  .workflow h2,
  .more-features h2,
  .analytics-header h2,
  .invoices h2 {
    font-size: clamp(32px, 7vw, 44px);
    letter-spacing: -1px;
  }

  .recording-features h2 {
    font-size: clamp(30px, 6.5vw, 40px);
  }

  .workflow > .container > p,
  .more-features > .container > p,
  .recording-features > .container > p,
  .analytics-header p,
  .invoices > .container > p {
    font-size: clamp(16px, 4vw, 19px);
    line-height: 1.5;
  }

  /* Buttons: a touch smaller, more reasonable padding */
  .btn {
    padding: 12px 24px;
    font-size: 15px;
  }

  /* Workflow / dashboard image: section padding tightens */
  .workflow {
    padding: 50px 0 30px;
  }

  /* Recording-features: tighter padding */
  .recording-features,
  .more-features {
    padding: 50px 0 40px;
  }

  /* Analytics: collapse vertical rhythm */
  .analytics {
    padding: 40px 0;
  }

  .analytics-marquee {
    margin-bottom: 30px;
  }

  .analytics-marquee-track img {
    height: 320px;
    padding-right: 24px;
  }

  .analytics-marquee::after {
    height: 50%;
  }

  /* XP system */
  .xp-system h2 {
    font-size: clamp(36px, 8vw, 50px);
  }

  .xp-content {
    gap: 32px;
  }

  /* Invoices */
  .invoices {
    padding: 60px 0;
  }

  .invoice-screenshot {
    margin-top: 28px;
  }

  /* CTA / JOIN TOREC */
  .cta {
    padding: 60px 0;
  }

  .cta h2 {
    font-size: clamp(48px, 13vw, 88px);
    letter-spacing: -2px;
  }

  .cta-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .cta-sub p {
    text-align: left;
    font-size: 18px;
  }

  /* Testimonials: single column */
  .testimonials {
    padding: 60px 0;
  }

  .testimonials h2 {
    font-size: clamp(32px, 7vw, 44px);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* FAQ: tighter */
  .faq {
    padding: 60px 0;
  }

  .faq-header h2 {
    font-size: clamp(32px, 7vw, 44px);
  }

  /* Footer: 2 columns then 1 on small */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* ---------- SMALL MOBILE ≤480px ---------- */
@media (max-width: 480px) {
  .container,
  .nav-container,
  .hero-text,
  .analytics-header {
    padding: 0 16px;
  }

  .logo-mark {
    width: 40px;
    height: 40px;
  }

  .hero {
    padding-top: 80px;
  }

  .hero h1 {
    font-size: clamp(56px, 17vw, 80px);
  }

  .hero-tagline {
    font-size: 26px;
    margin-top: 20px;
  }

  /* Tighten signup modal */
  .signup-card {
    padding: 28px 20px;
  }

  /* Footer collapses to single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===========================================================================
   SIGNUP MODAL — Email gate for "Join now" / "Download for PC" buttons.
   Submits to ConvertKit and reveals the download link on success.
   =========================================================================== */
.signup-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(6px);
  padding: 20px; opacity: 0; transition: opacity 0.2s ease;
}
.signup-modal.open { display: flex; opacity: 1; }
.signup-card {
  background: #14141B; color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  padding: 40px 36px;
  max-width: 460px; width: 100%;
  position: relative;
  font-family: 'Aeonik', sans-serif;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.signup-modal.open .signup-card { transform: scale(1); }
.signup-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06); border: none;
  color: rgba(255,255,255,0.6);
  border-radius: 50%; cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.signup-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.signup-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.signup-sub   { font-size: 14px; color: rgba(255,255,255,0.55); margin: 0 0 24px; line-height: 1.5; }
.signup-form  { display: flex; flex-direction: column; gap: 12px; }
.signup-form label { font-size: 12px; color: rgba(255,255,255,0.55); display: block; margin-bottom: 6px; }
.signup-form input[type="email"], .signup-form input[type="text"] {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #fff; font-size: 15px; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.signup-form input:focus {
  outline: none;
  border-color: #E8175D;
  background: rgba(255,255,255,0.06);
}
.signup-form input::placeholder { color: rgba(255,255,255,0.3); }
.signup-submit {
  margin-top: 8px;
  padding: 14px 24px;
  background: #E8175D; color: #fff;
  border: none; border-radius: 100px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.signup-submit:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.signup-submit:disabled { opacity: 0.5; cursor: wait; }
.signup-fineprint {
  font-size: 11px; color: rgba(255,255,255,0.3);
  margin: 14px 0 0; line-height: 1.5;
}
.signup-fineprint a { color: rgba(255,255,255,0.5); text-decoration: underline; }
.signup-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(232,23,93,0.12);
  border: 1px solid rgba(232,23,93,0.3);
  border-radius: 8px;
  color: #ff9bb8; font-size: 13px;
  display: none;
}
.signup-error.show { display: block; }

/* Success state — replaces the form */
.signup-success { display: none; text-align: center; padding: 8px 0; }
.signup-card.success .signup-form,
.signup-card.success .signup-fineprint { display: none; }
.signup-card.success .signup-success { display: block; }
.signup-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFCD29, #E6B324);
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.signup-success h3 { font-size: 20px; margin: 0 0 8px; }
.signup-success p  { color: rgba(255,255,255,0.55); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.signup-download {
  display: inline-block;
  padding: 14px 28px;
  background: #FFCD29; color: #000;
  border-radius: 11px; text-decoration: none;
  font-weight: 700; font-size: 15px;
  transition: opacity 0.15s, transform 0.15s;
}
.signup-download:hover { opacity: 0.92; transform: translateY(-1px); }