/* ============ Linktree minimalista ============ */
:root {
  --bg: #0a0a0c;
  --surface: #131318;
  --surface-hover: #1a1a21;
  --border: #23232c;
  --border-strong: #33333e;
  --ink: #f4f1ea;
  --ink-mute: #9a9690;
  --ink-faint: #5a5760;
  --accent: #f4f1ea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body {
  /* very subtle warm vignette so it doesn't feel like a flat black PDF */
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(244, 241, 234, 0.04) 0%, transparent 60%),
    var(--bg);
}
a { color: inherit; text-decoration: none; }

.lt {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 40px;
}

.lt-shell {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ===== Header (PORT / FOLIO) ===== */
.lt-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 8px 0 4px;
}

.lt-eyebrow {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
}

.lt-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 22vw, 112px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.lt-title .lt-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.lt-title .lt-row-port {
  /* no longer the bird's positioning context — the title itself is */
}
.lt-title .lt-letter {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.lt-title .lt-row-folio {
  margin-top: -0.04em;
  letter-spacing: -0.045em;
}

/* ===== Hummingbird — single layer through the title =====
   One image, sits IN FRONT of base letters (z-index 1). The head lands
   on the O of PORT; the long tail drapes down-right across the FOLIO row.
   Letters with .lt-letter-over (FOLIO's I + last O) are bumped to z-index 3
   so they cover the tail, leaving only the tip of the lowest feather poking
   past the right side of the last O — the eye reads it as the feather
   threading through the letter. */
.lt-bird {
  position: absolute;
  /* Centered horizontally over the entire title, sitting across the seam
     between PORT and FOLIO so the bird visually splits the wordmark. */
  width: 115%;
  max-width: none;
  height: auto;
  left: 51%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35))
    contrast(1.05)
    saturate(1.08);
}

/* Letters that sit IN FRONT of the bird (FOLIO's I + last O — they cover
   the tail so only the lowest feather's tip pokes past the right side
   of the last O). */
.lt-title .lt-letter-over {
  z-index: 3;
}

.lt-name {
  margin: 0;
  /* same family as the PORTFOLIO title — but ultra-thin so it sits as a
     subordinate counterweight to the bold wordmark. */
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 200;
  font-size: 22px;
  /* tight letters within each word, normal space between words */
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  color: var(--ink);
  text-align: center;
}

/* Bio: 5 short sentences under the PORTFOLIO wordmark. Single Inter family
   to stay coherent with the rest of the system; light weight (300) creates
   the contrast against the heavy 800 of titles. Each sentence is its own
   <p> so it wraps naturally per viewport instead of being forced by \n. */
.lt-bio {
  margin: 0 auto;
  max-width: 32ch;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 4.6vw, 19px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
}
.lt-bio p {
  margin: 0 0 10px;
}
.lt-bio p:last-child {
  margin: 0;
}

/* Name + icons paired together: name hugs the icons (~1mm gap) */
.lt-id-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 3px;
}

/* ===== Icon row (5 circular buttons) ===== */
.lt-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.lt-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-icon-btn:hover,
.lt-icon-btn:focus-visible {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.lt-icon-btn:active {
  transform: scale(0.92);
}

/* ===== Section block: heading hugged tight against its marquee ===== */
.lt-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* ~1mm separation between title and the strip below */
  gap: 3px;
}

.lt-section-title {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 11vw, 56px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-align: left;
  margin: 0;
}

/* ===== Marquee 16:9 (edge-to-edge, auto-scroll right, infinite loop) =====
   Track holds [A B C A B C]. Animates from translateX(-50%) → 0,
   so panels visually drift to the right. The duplicate triplet means
   the jump back is seamless (positions match). Pause on hover for
   inspection (desktop only). When real images replace the placeholder
   gradients, just swap the background on each .lt-marquee-item. */
.lt-marquee {
  /* break out of the .lt-shell padding to span the full viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  /* subtle edge fade for cinematic feel */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.lt-marquee-track {
  display: flex;
  width: max-content;
  animation: lt-marquee-right 88s linear infinite;
  will-change: transform;
  /* drag UX: hint a grab cursor and let JS take over horizontal swipe */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.lt-marquee-track:active { cursor: grabbing; }
/* Pause hover only when JS drag isn't in charge (data-drag-init is set by JS) */
.lt-marquee-track[data-drag-init] { animation: none; }

/* Per-marquee desync — strips speed up as you scroll down. The --alt
   strip (Strategic Capabilities) runs noticeably faster and in reverse. */
.lt-marquee--alt .lt-marquee-track { animation-duration: 22s; }
.lt-marquee--c   .lt-marquee-track { animation-duration: 66s; }
.lt-marquee--d   .lt-marquee-track { animation-duration: 55s; }

.lt-marquee:hover .lt-marquee-track {
  animation-play-state: paused;
}

.lt-marquee-item {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  /* placeholder visual cleanup so the test gradients aren't too loud */
  filter: saturate(0.9) brightness(0.85);
  /* when an item is a link, keep it acting like an image, not underlined text */
  text-decoration: none;
  color: inherit;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

/* Real screenshots/images: full vibrancy, no dim filter */
.lt-marquee-item--photo {
  filter: none;
}

/* ===== Marquee item overlay (label preview during drag) =====
   Sits on top of the slide content. Hidden by default; the JS marks the
   track with data-dragging="1" while the user drags, which fades the
   overlay in. Gradient is fully black at the bottom (~80%) and fades to
   transparent at the top, so the slide image is still visible up top. */
.lt-marquee-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.65) 50%,
    rgba(0, 0, 0, 0.30) 78%,
    rgba(0, 0, 0, 0)    100%);
  opacity: 0;
  /* Fade-out slowly (1.5s) so the label lingers smoothly after release. */
  transition: opacity 1500ms ease;
  pointer-events: none;
  z-index: 5;
}
.lt-marquee-item--active .lt-marquee-overlay {
  opacity: 1;
  /* Fade-in fast (220ms) when the user touches the slide. */
  transition: opacity 220ms ease;
}

/* Hold the slide static while the user keeps a finger on it — pause the
   internal frame carousel so they can read what's on screen. */
.lt-marquee-item--active .lt-mission-frame {
  animation-play-state: paused;
}

.lt-marquee-label {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(28px, 7vw, 44px);
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  color: #ffffff;
  text-align: center;
  padding: 0 24px;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-select: none;
}

/* Video slide: black box with video filling near edge-to-edge. The 4px
   horizontal padding on the container leaves a ~1mm sliver of black on
   each side. iOS Safari has flake with calc() on <video> sizing, so we
   keep dimensions simple (100% width/height) and rely on padding. */
.lt-marquee-item--video {
  filter: none;
  background: #000;
  overflow: hidden;
  padding: 0 4px;
}
.lt-marquee-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Neon-green filter — pushes whatever the video shows toward a Matrix /
   blockchain-terminal aesthetic. A green wash on top via mix-blend-mode
   adds the "glow" without losing detail. */
.lt-marquee-item--neon-green { background: #001a08; overflow: hidden; }
.lt-marquee-item--neon-green > .lt-marquee-video {
  object-fit: cover;
  /* grayscale flattens original colors, sepia adds a yellow base,
     hue-rotate shifts that base to green, saturate makes it vivid neon. */
  filter:
    grayscale(1)
    sepia(1)
    hue-rotate(70deg)
    saturate(4)
    brightness(1)
    contrast(1.2);
}
.lt-marquee-item--neon-green::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.05) 60%, transparent 100%),
    linear-gradient(rgba(0, 255, 100, 0.12), rgba(0, 255, 100, 0.20));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* ===== Mission Control slide — image carousel inside one marquee frame =====
   8 stacked images, CSS animation cycles each one for 2.5s with a quick
   crossfade. Pure CSS — no JS state, no remount risk. Total cycle = 20s. */
.lt-mission { position: relative; overflow: hidden; background: #000; }
.lt-mission-frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  animation: lt-mission-step 17.5s linear infinite;
  /* Uniform crop for all frames — pulls 5% in from every edge so Chrome
     bars at top and window padding at sides are clipped consistently. */
  transform: scale(1.10);
  transform-origin: center center;
}
.lt-mission-frame:nth-child(1) { animation-delay: 0s; }
.lt-mission-frame:nth-child(2) { animation-delay: 2.5s; }
.lt-mission-frame:nth-child(3) { animation-delay: 5s; }
.lt-mission-frame:nth-child(4) { animation-delay: 7.5s; }
.lt-mission-frame:nth-child(5) { animation-delay: 10s; }
.lt-mission-frame:nth-child(6) { animation-delay: 12.5s; }
.lt-mission-frame:nth-child(7) { animation-delay: 15s; }

@keyframes lt-mission-step {
  0%    { opacity: 1; }
  13.7% { opacity: 1; }
  14.3% { opacity: 0; }
  100%  { opacity: 0; }
}

/* Love Protocol slide — 4 frames over a 10s cycle (no dead negro filler).
   No 1.10 scale either, so text inside the screenshots isn't cropped at the edges.
   contain ensures every full screenshot stays visible (with letterbox if needed). */
.lt-love .lt-mission-frame {
  animation: lt-love-step 10s linear infinite;
  transform: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0b0b0f;
}
.lt-love .lt-mission-frame:nth-child(1) { animation-delay: 0s; }
.lt-love .lt-mission-frame:nth-child(2) { animation-delay: 2.5s; }
.lt-love .lt-mission-frame:nth-child(3) { animation-delay: 5s; }
.lt-love .lt-mission-frame:nth-child(4) { animation-delay: 7.5s; }

@keyframes lt-love-step {
  0%   { opacity: 1; }
  24%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

.lt-marquee-tag {
  position: absolute;
  bottom: 14px;
  left: 18px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes lt-marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lt-marquee-track { animation-duration: 240s; }
}

/* ===== Pricing — safe-dial concept =====
   Static text on the left + a half-moon dial peeking in from the right.
   Auto-advances every ~5.8s. The dial keeps rotating in one direction so
   it accumulates angle (no rewind jump). Each lock plays a small thump
   on the text container (and an Android haptic if the API exists). */
.lt-pricing {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Fixed height — accommodates the longest service so changing copy
     never shifts what's below (Communities, CTA, etc.). Anchored at
     the top so titles always start at the same Y regardless of desc length. */
  height: 460px;
  padding: 36px 22px 28px;
  /* visible so the pointer's neon glow can spill outside without being clipped */
  overflow: visible;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
}

.lt-pricing-content {
  position: relative;
  z-index: 2;
  width: 56%;
  max-width: 240px;
  /* Reserve the vertical space of the longest service so descriptions
     never push siblings around — short descs leave (invisible) whitespace below. */
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lt-pricing-title {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.lt-pricing-price {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(15px, 4.2vw, 19px);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 8px;
}

.lt-pricing-desc {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-mute);
  margin: 0;
}

/* The thump animation re-runs each time React remounts the content via
   key={idx} — that means every time the dial crosses a major tick, even
   mid-drag. The keyframe scales up briefly and settles for a tactile pop. */
.lt-pricing-content {
  animation: lt-pricing-thump 220ms cubic-bezier(0.22, 1.65, 0.42, 1);
  transform-origin: left center;
  will-change: transform;
}
@keyframes lt-pricing-thump {
  0%   { transform: scale(0.86); }
  35%  { transform: scale(1.16); }
  68%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Half-moon: a square dial pushed past the right edge so only the left
   half is visible. */
.lt-pricing-dial-wrap {
  position: absolute;
  right: -42%;
  top: 50%;
  transform: translateY(-50%);
  width: 78%;
  max-width: 380px;
  aspect-ratio: 1;
  z-index: 1;
  /* The dial owns every gesture inside its area: when a finger lands on
     the half-moon, page scroll is suppressed and the touch is delivered
     to the JS handler, which spins the wheel. To scroll the page, the
     user starts the gesture from the text column on the left. */
  pointer-events: auto;
  touch-action: none;
  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.7))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.lt-pricing-dial {
  width: 100%;
  height: 100%;
  /* Detente snap easing — soft overshoot for that real-knob settle feel. */
  transition: transform 0.85s cubic-bezier(0.32, 1.45, 0.55, 1);
  will-change: transform;
}
/* While dragging, the angle is driven directly — no transition. */
.lt-pricing-dial--dragging { transition: none; }

.lt-pricing-dial svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Phosphorescent drag-hint — pulses on the visible rim until the user
   first touches the ring. Sits ABOVE the rotating dial so it stays still. */

/* Pointer notch on the inner-left of the half-moon, pointing toward the text.
   Vivid neon body + multi-layer drop-shadow that follows the arrow's clip-path
   (no rectangular cutoff). Animates a subtle pulse continuously. */
.lt-pricing-pointer {
  position: absolute;
  left: 4%;
  top: 50%;
  width: 14px;
  height: 18px;
  background: #34f5e0;
  transform: translateY(-50%);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  filter:
    drop-shadow(0 0 3px rgba(52, 245, 224, 1))
    drop-shadow(0 0 8px rgba(52, 245, 224, 0.95))
    drop-shadow(0 0 18px rgba(52, 245, 224, 0.7))
    drop-shadow(0 0 30px rgba(52, 245, 224, 0.45));
  animation: lt-pointer-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lt-pointer-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(52, 245, 224, 1))
      drop-shadow(0 0 8px rgba(52, 245, 224, 0.9))
      drop-shadow(0 0 18px rgba(52, 245, 224, 0.65))
      drop-shadow(0 0 30px rgba(52, 245, 224, 0.4));
  }
  50% {
    filter:
      drop-shadow(0 0 4px rgba(52, 245, 224, 1))
      drop-shadow(0 0 12px rgba(52, 245, 224, 1))
      drop-shadow(0 0 24px rgba(52, 245, 224, 0.85))
      drop-shadow(0 0 40px rgba(52, 245, 224, 0.55));
  }
}

/* ===== Communities — 4 round buttons in a row ===== */
.lt-communities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  padding: 0 4px;
}
.lt-community-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-community-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}
.lt-community-btn:hover,
.lt-community-btn:focus-visible {
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.lt-community-btn:active { transform: scale(0.94); }

/* ===== Coffee CTA wrapper (button + hidden date picker) ===== */
.lt-cta-wrap { position: relative; }
.lt-cta-date {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* ===== Final CTA — inverted button to lift it as the page's last beat ===== */
.lt-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 22px 28px;
  background: var(--ink);
  color: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-cta:hover,
.lt-cta:focus-visible {
  background: #ffffff;
}
.lt-cta:active {
  transform: scale(0.985);
  opacity: 0.92;
}
.lt-cta-emoji {
  font-size: 22px;
  line-height: 1;
  /* tiny upward tweak so the emoji sits optically aligned with the text baseline */
  transform: translateY(-1px);
}

/* ===== QR — almost edge-to-edge with ~1mm gutter on every side =====
   Breaks out of the .lt-shell padding horizontally, and uses negative
   vertical margins to eat into the shell's 40px gap so the QR sits
   ~4px (≈1mm) from the CTA above and the footer below. */
.lt-qr {
  width: calc(100vw - 8px);
  margin-left: calc(50% - 50vw + 4px);
  margin-top: -36px;
  margin-bottom: -36px;
}
.lt-qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ===== Footer ===== */
.lt-foot {
  text-align: center;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 0 8px;
}

/* ===== Desktop polish ===== */
@media (min-width: 600px) {
  .lt-shell { gap: 48px; }
  .lt-icon-btn { width: 56px; height: 56px; flex-basis: 56px; }
}


/* ===== Desktop: full responsive adaptation ===== */
.lt-desktop-block { display: none !important; }

@media (min-width: 1024px) {
  body {
    display: flex;
    justify-content: center;
    background: var(--bg);
  }

  /* ── Main container: wider, centered with subtle depth ── */
  .lt {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 40px 56px;
    min-height: 100vh;
  }

  .lt-shell {
    max-width: 780px;
    gap: 56px;
  }

  /* ── Header / Title ── */
  .lt-header {
    gap: 18px;
    padding: 16px 0 8px;
  }

  .lt-title {
    font-size: clamp(96px, 10vw, 140px) !important;
  }

  .lt-name {
    font-size: 26px;
  }

  /* ── Bio: wider measure for desktop reading ── */
  .lt-bio {
    max-width: 52ch;
    font-size: 19px;
  }

  /* ── Icon row: bigger touch targets, more spacing ── */
  .lt-icons {
    gap: 14px;
    justify-content: center;
    padding: 0;
  }
  .lt-icon-btn {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  }
  .lt-icon-btn:hover {
    transform: scale(1.08);
  }

  /* ── Section titles scale up ── */
  .lt-section-title {
    font-size: clamp(48px, 5vw, 64px);
  }

  /* ── Marquee: constrained width, show ~2 cards, rounded corners ── */
  .lt-marquee {
    width: 100%;
    margin-left: 0;
    border-radius: 16px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .lt-marquee-item {
    flex: 0 0 50%;
    width: 50%;
    border-radius: 12px;
  }

  /* ── Marquee labels scale for desktop ── */
  .lt-marquee-label {
    font-size: clamp(22px, 2.5vw, 32px);
  }

  /* ── Pricing dial: side-by-side layout, proper proportions ── */
  .lt-pricing {
    width: 100%;
    margin-left: 0;
    height: 480px;
    padding: 40px 32px 32px;
    border-radius: 20px;
    background: rgba(19, 19, 24, 0.4);
    border: 1px solid var(--border);
  }

  .lt-pricing-content {
    width: 50%;
    max-width: 340px;
    min-height: 340px;
    gap: 12px;
  }

  .lt-pricing-title {
    font-size: clamp(26px, 3vw, 36px);
  }
  .lt-pricing-price {
    font-size: clamp(17px, 2vw, 21px);
  }
  .lt-pricing-desc {
    font-size: 14.5px;
    line-height: 1.6;
  }

  .lt-pricing-dial-wrap {
    right: -32%;
    width: 68%;
    max-width: 420px;
  }

  /* ── Pricing CTA bar ── */
  .lt-pricing-cta-bar {
    font-size: clamp(24px, 2.5vw, 32px);
    padding: 24px 32px;
    transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
  }
  .lt-pricing-cta-bar:hover {
    opacity: 1;
    box-shadow: 0 8px 32px rgba(244, 241, 234, 0.12);
  }

  /* ── Clients logo ── */
  .lt-clients {
    border-radius: 20px;
  }

  /* ── Communities grid: bigger circles ── */
  .lt-communities {
    gap: 18px;
    padding: 0;
    max-width: 400px;
    margin: 0 auto;
  }
  .lt-community-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  }

  /* ── Coffee CTA: hover effects ── */
  .lt-cta {
    font-size: clamp(24px, 2.5vw, 32px);
    padding: 24px 32px;
    max-width: 560px;
    margin: 0 auto;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  .lt-cta:hover {
    box-shadow: 0 8px 32px rgba(244, 241, 234, 0.15);
    transform: scale(1.015);
  }

  /* ── QR: constrained, centered ── */
  .lt-qr {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -28px;
    margin-bottom: -28px;
  }
  .lt-qr img {
    border-radius: 16px;
  }

  /* ── Lead sheet → centered modal on desktop ── */
  .lt-sheet {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%) scale(0.95);
    width: min(520px, 92vw);
    max-height: 85vh;
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  }
  .lt-sheet-root--open .lt-sheet {
    transform: translate(-50%, 50%) scale(1);
  }
  .lt-sheet-handle-area {
    cursor: default;
  }
  .lt-sheet-handle {
    display: none;
  }
  .lt-sheet-form {
    padding: 12px 32px 32px;
    gap: 14px;
  }
  .lt-sheet-title {
    font-size: 34px;
  }
  .lt-sheet-sub {
    font-size: 14.5px;
  }

  /* ── Footer ── */
  .lt-foot {
    font-size: 11px;
    padding: 8px 0 16px;
  }
}

/* ===== Extra-wide: cap max widths ===== */
@media (min-width: 1440px) {
  .lt {
    max-width: 960px;
  }
  .lt-shell {
    max-width: 860px;
  }
  .lt-marquee-item {
    flex: 0 0 40%;
    width: 40%;
  }
  .lt-pricing {
    height: 520px;
  }
  .lt-pricing-content {
    max-width: 380px;
  }
}

/* Pricing → CTA bar (outside the dial; full-width pill below the wheel) */
.lt-pricing-cta-bar {
  display: block;
  width: 100%;
  margin: 18px 0 4px;
  padding: 22px 28px;
  background: var(--ink);
  color: #0b0b0f;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-pricing-cta-bar:active { transform: scale(0.985); }
.lt-pricing-cta-bar:hover { opacity: 0.92; }

/* Trusted-by clients logo grid (single image, full width with rounded corners) */
.lt-clients {
  width: 100%;
  margin-top: 4px;
  background: #fafafa;
  border-radius: 16px;
  overflow: hidden;
}
.lt-clients img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* Lead Capture Bottom Sheet */
.lt-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.lt-sheet-root--open { pointer-events: auto; }

.lt-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 360ms ease;
}
.lt-sheet-root--open .lt-sheet-backdrop { opacity: 1; }

.lt-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  background: #11111a;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(100%);
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.lt-sheet-root--open .lt-sheet { transform: translateY(0); }

.lt-sheet-handle-area {
  padding: 10px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.lt-sheet-handle-area:active { cursor: grabbing; }
.lt-sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.22);
}

.lt-sheet-form {
  padding: 8px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}

.lt-sheet-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  margin-top: 2px;
}
.lt-sheet-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2px 0 0;
}
.lt-sheet-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0 0 4px;
}

.lt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.lt-field > span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  font-weight: 500;
}
.lt-field input,
.lt-field select,
.lt-field textarea {
  width: 100%;
  padding: 11px 12px;
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.12);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color 120ms ease, background 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.lt-field textarea {
  resize: none;
  min-height: 64px;
}
.lt-field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(244,241,234,0.55) 50%),
                    linear-gradient(135deg, rgba(244,241,234,0.55) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.lt-field input:focus,
.lt-field select:focus,
.lt-field textarea:focus {
  outline: none;
  border-color: rgba(244, 241, 234, 0.42);
  background: rgba(244, 241, 234, 0.07);
}
.lt-field--err input,
.lt-field--err select,
.lt-field--err textarea {
  border-color: #d96b6b;
}

.lt-field-row {
  display: flex;
  gap: 8px;
}
.lt-field--country { flex: 1.4; min-width: 0; }
.lt-field--ccode { flex: 0.7; min-width: 0; }
.lt-field--phone { flex: 1.6; min-width: 0; }

.lt-sheet-err-msg {
  color: #d96b6b;
  font-size: 12.5px;
  margin-top: -2px;
}

.lt-sheet-submit {
  margin-top: 4px;
  padding: 14px 18px;
  background: var(--ink);
  color: #0b0b0f;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-sheet-submit:active:not([disabled]) { transform: scale(0.985); }
.lt-sheet-submit[disabled] { opacity: 0.6; cursor: not-allowed; }

.lt-sheet-success {
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  text-align: center;
}
.lt-sheet-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(120, 220, 160, 0.18);
  color: #87e3a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}
.lt-sheet-success h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: 28px;
  margin: 4px 0 0;
  color: var(--ink);
}
.lt-sheet-success p {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.lt-sheet-x-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.lt-sheet-x-close:hover,
.lt-sheet-x-close:focus-visible {
  opacity: 1;
  outline: none;
}
.lt-sheet-close-btn {
  margin-top: 8px;
  padding: 10px 22px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(244, 241, 234, 0.25);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}