/* TensorFit landing — design tokens */
:root {
  --bg: #050912;
  --bg-deep: #020409;
  --bg-purple: #1a0c2e;
  --surface: #0b1420;
  --surface-2: #111a28;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #e7eef9;
  --muted: #8a96ac;
  --dim: #5a6479;
  --pink: #ff4d8f;
  --pink-2: #ff7eb0;
  --pink-glow: rgba(255, 77, 143, 0.45);
  --cyan: #5ed4ff;
  --cyan-2: #a6e9ff;
  --cyan-deep: #00d2ff;
  --amber: #ffb148;
  --green: #5be9b9;
  --violet: #b59cff;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(0, 210, 255, 0.18), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(255, 77, 143, 0.12), transparent 60%),
    radial-gradient(1000px 800px at 10% 80%, rgba(116, 79, 219, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 40%, #0c0c24 100%);
  min-height: 100dvh;
}

::selection {
  background: var(--pink);
  color: white;
}

/* Display / wordmark */
.display {
  font-family: 'Bebas Neue', 'Public Sans', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.92;
}

.wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* Subtle line grid background like the app screenshots */
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(180deg, transparent, transparent),
    repeating-linear-gradient(0deg, transparent 0, transparent 80px, rgba(255, 255, 255, 0.025) 80px, rgba(255, 255, 255, 0.025) 81px);
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(110deg, transparent 0px, transparent 90px, rgba(94, 212, 255, 0.04) 90px, rgba(94, 212, 255, 0.04) 91px),
    repeating-linear-gradient(70deg, transparent 0px, transparent 140px, rgba(181, 156, 255, 0.03) 140px, rgba(181, 156, 255, 0.03) 141px);
}

/* Shiny gradient text */
.shiny {
  background-image: linear-gradient(
    100deg,
    #2a1538 0%,
    #4a1d6e 12%,
    #ff4d8f 28%,
    #ffb1d2 42%,
    #ffffff 50%,
    #a6e9ff 60%,
    #00d2ff 74%,
    #1a4d8a 88%,
    #0a1530 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shiny 7s linear infinite;
}

@keyframes shiny {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.shiny-cyan {
  background-image: linear-gradient(100deg, #1a3a5e 0%, #5ed4ff 30%, #ffffff 50%, #5ed4ff 70%, #1a3a5e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shiny 8s linear infinite;
}

.shiny-pink {
  background-image: linear-gradient(100deg, #3a0c20 0%, #ff4d8f 30%, #ffd5e4 50%, #ff4d8f 70%, #3a0c20 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shiny 8s linear infinite;
}

/* Liquid glass card */
.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    0 30px 60px -30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    rgba(255, 255, 255, 0.35) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Pink accent glow */
.glow-pink {
  box-shadow: 0 20px 60px -10px var(--pink-glow), 0 0 0 1px rgba(255, 77, 143, 0.3) inset;
}

/* Pill chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

/* Buttons */
.btn-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #ff5d9b 0%, #ff3a82 100%);
  color: white;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow:
    0 10px 30px -10px rgba(255, 77, 143, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -10px 16px -10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(.22,1,.36,1), filter 0.2s;
  text-decoration: none;
}
.btn-pink:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-pink:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* iPhone frame */
.phone {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1185 / 2580;
  background: #050505;
  border-radius: 50px;
  padding: 10px;
  /* Force GPU compositing at full resolution and prevent browser from
     de-promoting the texture after motion settles (which causes blur). */
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 0 0 1.5px #2a2d36,
    0 0 0 4px #0a0b10,
    0 0 0 5.5px #2a2d36,
    0 40px 80px -20px rgba(0, 0, 0, 0.7),
    0 20px 40px -10px rgba(20, 30, 60, 0.5);
}

.phone-md { max-width: 260px; border-radius: 42px; padding: 8px; }
.phone-md .phone-screen { border-radius: 36px; }
.phone-sm { max-width: 200px; border-radius: 36px; padding: 7px; }
.phone-sm .phone-screen { border-radius: 30px; }

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #030713;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reflection / shine */
.phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
}

@media (max-width: 640px) {
  .phone { max-width: 280px; border-radius: 40px; padding: 8px; }
  .phone-screen { border-radius: 34px; }
  .phone-md { max-width: 220px; border-radius: 36px; padding: 7px; }
  .phone-md .phone-screen { border-radius: 30px; }
}



@media (max-width: 720px) {
  /* On narrow screens, lay the pair out side-by-side without overlap so the
     two phones read as two separate screens, not one tilted stack. */
  .phone-pair {
    min-height: 0;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 16px 0;
  }
  .phone-pair__back, .phone-pair__front {
    position: relative;
    width: 150px;
    transform: none !important;
    opacity: 1;
  }
  .phone-pair__back .phone, .phone-pair__front .phone { max-width: 150px !important; }
}
@media (max-width: 480px) {
  .phone-pair { gap: 10px; }
  .phone-pair__back, .phone-pair__front { width: 135px; }
  .phone-pair__back .phone, .phone-pair__front .phone {
    max-width: 135px !important;
    border-radius: 26px;
    padding: 5px;
  }
  .phone-pair__back .phone .phone-screen,
  .phone-pair__front .phone .phone-screen { border-radius: 22px; }
}

/* Coach pair wrapper sizes to its content (the phones) so floating cards
   anchor directly to the visible phones, not a stretched grid column. */
.coach-pair-wrap {
  align-items: center;
}

/* Coach pair — axis-aligned 2D layout matching phone-pair */
.coach-pair {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 620px;
  min-height: 580px;
  padding: 24px 0;
}
.coach-pair__back {
  position: absolute;
  width: 310px;
  transform: translate(62px, 42px) translateZ(0);
  opacity: 0.95;
  z-index: 1;
}
.coach-pair__front {
  position: relative;
  width: 310px;
  transform: translate(-34px, -24px) translateZ(0);
  z-index: 2;
}
.coach-float {
  position: absolute;
  z-index: 4;
  background: rgba(15, 20, 32, 0.9) !important;
  backdrop-filter: blur(20px) saturate(160%);
}
.coach-float--score {
  top: 4%;
  right: -8px;
}
.coach-float--cue {
  bottom: 4%;
  left: -8px;
}
@media (max-width: 720px) {
  .coach-pair {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 16px 0;
  }
  .coach-pair__back, .coach-pair__front {
    position: relative;
    width: 150px;
    transform: none !important;
    opacity: 1;
  }
  .coach-pair__back .phone, .coach-pair__front .phone { max-width: 150px !important; }
  .coach-float--score { right: 2%; top: 4%; }
  .coach-float--cue { left: 2%; bottom: 4%; }
}
@media (max-width: 480px) {
  .coach-pair { gap: 10px; }
  .coach-pair__back, .coach-pair__front { width: 135px; }
  .coach-pair__back .phone, .coach-pair__front .phone {
    max-width: 135px !important;
    border-radius: 26px;
    padding: 5px;
  }
  .coach-pair__back .phone .phone-screen,
  .coach-pair__front .phone .phone-screen { border-radius: 22px; }
  .coach-float { font-size: 11px; padding: 8px 10px !important; }
  .coach-float--score { min-width: 110px !important; }
  .coach-float--score .display { font-size: 32px !important; }
  .coach-float--cue { max-width: 130px !important; }
}

/* Hexagonal logo */
.hex-logo {
  width: 38px;
  height: 38px;
  position: relative;
  filter: drop-shadow(0 0 12px rgba(94, 212, 255, 0.35));
}

/* Section eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-2);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

/* Wordmark breathing */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.breathe { animation: breathe 4s ease-in-out infinite; }

/* Floating — use opacity instead of transform to avoid continuous
   subpixel rasterization which blurs screenshots inside transformed elements. */
@keyframes floaty {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Glow blob */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Bottom tab nav preview (footer fake) */
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* Number stat */
.stat-num {
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

/* Pose dot animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.pose-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Scroll-snap horizontal carousel for phones */
.phone-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-rail::-webkit-scrollbar { display: none; }
.phone-rail > * { scroll-snap-align: center; flex: 0 0 auto; }

/* Section divider */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line-strong) 50%, transparent 100%);
  width: 100%;
  margin: 60px 0;
}

/* Reveal animation */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.9s cubic-bezier(.22,1,.36,1) both; }

/* Scroll-triggered phone-pair entrance — fade-in + subtle slide-up.
   Pure opacity once settled, so screenshots stay pixel-sharp. */
.phone-pair__back,
.phone-pair__front,
.coach-pair__back,
.coach-pair__front {
  animation: pair-enter 1.1s cubic-bezier(.22,1,.36,1) both;
}
.phone-pair__back { animation-delay: 0.05s; }
.phone-pair__front { animation-delay: 0.18s; }
.coach-pair__back { animation-delay: 0.05s; }
.coach-pair__front { animation-delay: 0.18s; }

@keyframes pair-enter {
  from { opacity: 0; }
  to   { opacity: var(--enter-opacity, 1); }
}
.phone-pair__back, .coach-pair__back { --enter-opacity: 0.96; }
.phone-pair__front, .coach-pair__front { --enter-opacity: 1; }