/* Milotask / Task Delegate System - Landing Page Styles */

:root {
  --primary: #fc730f;
  --secondary: #fff8f6;
  --third: #fff;
  --primary-dark: #c45600;
  --primary-darker: #a34400;
  --primary-light: #f5a04d;
  --primary-bg: #fff0e8;
  --primary-bg-soft: #fff8f6;
  --surface-soft: #fff8f6;
  --surface-tint: #ffe8d6;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --white: #fff;
  --border: #e5e7eb;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(232, 101, 0, 0.12);
  --shadow-lg: 0 10px 40px rgba(232, 101, 0, 0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --max-width: 1290px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--text-dark);
  /* background-color: #FFF0EB; */
  /* background-image: url(../images/home-bg2-top.webp); */
  background-position: 5% 0%;
  background-repeat: no-repeat;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: 110px;
  overflow-x: hidden;
  background: radial-gradient(900px 520px at 50% 0, #ffe0d1, transparent 72%), #fff3ee;
}

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

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

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

.btn {
  font-family: var(--font);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: var(--white);
  color: var(--text-dark);
  border: 1.5px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--primary-light);
  color: var(--primary);
}

.btn-white {
  background: var(--white);
  color: var(--primary-dark);
}

.btn-white:hover {
  background: var(--secondary);
}

.btn-dark {
  background: #111827;
  color: var(--white);
}

.btn-dark:hover {
  background: #1f2937;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 16px;
}

.btn-hero {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  min-width: 180px;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-white {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

/* Section */
.section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 12px;
  letter-spacing: -0.03em;
  color: #111827;
}

.section-header p {
  color: var(--text-muted);
  font-size: 17px;
}

.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}

.text-primary {
  color: var(--primary);
}

/* ========== HOW IT WORKS ========== */
.how-it-works {
  background: var(--third);
}

.how-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.how-step-card {
  background: var(--secondary);
  border: 1px solid #f5ebe6;
  border-radius: var(--radius-xl);
  padding: 36px 28px 32px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.how-step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.how-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(232, 101, 0, 0.25);
}

.how-step-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.how-step-card p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* ========== HEADER ========== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  pointer-events: none;
  transition: padding 0.3s ease;
  background: none;
  border: 0;
  backdrop-filter: none;
}

.header .container {
  pointer-events: auto;
}

.header-bar {
  /* old:
  display: flex;
  justify-content: space-between;
  height: auto;
  padding: 9px 10px 9px 20px;
  */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 78px;
  padding: 0 12px 0 20px;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(28, 32, 48, 0.05);
  border-radius: 999px;
  box-shadow: 0 10px 30px -14px rgba(28, 32, 48, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}

.header.scrolled {
  padding: 10px 0;
}

.header.scrolled .header-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(28, 32, 48, 0.06);
  box-shadow: 0 12px 32px -14px rgba(28, 32, 48, 0.22);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1c2030;
  white-space: nowrap;
  justify-self: start;
}

.logo img {
  /* old: height: 54px; max-width: 200px; */
  height: 76px;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.footer-logo img {
  height: 100px;
  width: auto;
  object-fit: contain;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* old: gap: 28px; */
  gap: 36px;
  justify-self: center;
}

.nav a {
  /* old: font-size: 15px; font-weight: 500; color: #5d6477; */
  position: relative;
  font-size: 17px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
  transition: color 0.25s ease, transform 0.25s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary, #fc730f);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav a:hover,
.nav a.is-active {
  color: var(--primary, #fc730f);
}

.nav a:hover::after,
.nav a.is-active::after {
  transform: scaleX(1);
}

.nav a.nav-blog {
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav a.nav-blog::after {
  display: none;
}

.nav a.nav-blog:hover,
.nav a.nav-blog.is-active {
  color: #fff;
  background: linear-gradient(135deg, #fc730f 0%, #ff9440 100%);
  box-shadow:
    0 10px 22px -12px rgba(252, 115, 15, 0.65),
    0 0 0 3px rgba(252, 115, 15, 0.14);
  transform: translateY(-2px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border: 1.5px solid #f6c8ad;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.header-login:hover {
  color: var(--primary-dark);
  background: var(--primary-bg);
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(252, 115, 15, 0.14);
  transform: translateY(-1px);
}

.btn-get-started {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--primary);
  color: var(--white);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-get-started:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-arrow-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 4px;
}

/* ========== HERO ========== */
.hero {
  padding: 48px 0 0;
  background:
    radial-gradient(900px 520px at 50% 0, #ffe0d1, transparent 72%),
    #fff3ee;
  /* visible required for sticky phone-pin scroll scrub */
  overflow: visible;
  position: relative;
}

/* Hero stage — lady + phone + floating status cards (from new design) */
.hero-stage {
  position: relative;
  max-width: 1100px;
  margin: 8px auto 0;
  padding-bottom: 0;
  line-height: 0;
}

.hero-stage-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(680px, 100%);
  height: min(680px, 100%);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffc9a8 0, rgba(255, 201, 168, 0) 68%);
  pointer-events: none;
}

.hero-stage-visual {
  position: relative;
  width: min(860px, 100%);
  margin: 0 auto;
  line-height: 0;
  z-index: 1;
}

.hero-stage-lady {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* Auto screen slider inside hero phone bezel */
.hero-phone-slider {
  position: absolute;
  left: 56.64%;
  top: 13.28%;
  width: 35.4%;
  height: 80.81%;
  z-index: 2;
  border-radius: 12% / 5.6%;
  overflow: hidden;
  background: #f7f8fc;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}

.hero-phone-slider__viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-phone-slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  display: block;
  background: #f7f8fc;
}

.hero-phone-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}

@media (max-width: 600px) {
  .hero-phone-slider {
    border-radius: 10% / 4.8%;
  }
}

.hero-fc {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 14px 34px -14px rgba(28, 32, 48, 0.3);
  border: 1px solid #e6e8ee;
  will-change: transform;
  animation: tds-float-y 4.8s ease-in-out infinite;
}

.hero-fc i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.hero-fc b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #1c2030;
}

.hero-fc span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
}

.hero-fc--1 { left: 0; top: 16%; animation-delay: 0s; }
.hero-fc--2 { left: -4%; top: 50%; animation-delay: 0.6s; }
.hero-fc--3 { right: 0; top: 22%; animation-delay: 1.1s; }
.hero-fc--4 { right: 2%; top: 58%; animation-delay: 1.7s; }

/* Shared Play Store badge animation (sitewide) */
.play-badge-anim {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e6e8ee;
  box-shadow:
    0 12px 28px -14px rgba(28, 32, 48, 0.32),
    0 0 0 0 rgba(252, 115, 15, 0.35);
  text-decoration: none;
  line-height: 0;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, box-shadow;
  animation:
    tds-play-float 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
    tds-play-pulse 2.4s ease-in-out infinite;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, filter 0.28s ease;
}

.play-badge-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.15) 42%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 58%,
    transparent 72%
  );
  transform: translateX(-140%) skewX(-12deg);
  animation: tds-play-shine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.play-badge-anim::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(252, 115, 15, 0.35), rgba(255, 180, 80, 0.15), transparent 60%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: tds-play-glow 2.4s ease-in-out infinite;
}

.play-badge-anim img {
  position: relative;
  z-index: 2;
  height: 52px;
  width: auto;
  display: block;
}

.play-badge-anim:hover {
  transform: translateY(-6px) scale(1.06);
  background: #fff;
  filter: drop-shadow(0 10px 18px rgba(252, 115, 15, 0.22));
  box-shadow:
    0 20px 44px -14px rgba(28, 32, 48, 0.45),
    0 0 0 8px rgba(252, 115, 15, 0.12);
  animation-play-state: paused;
}

.play-badge-anim:hover::before {
  animation: tds-play-shine 0.65s ease forwards;
}

.play-badge-anim:hover::after {
  opacity: 0.55;
  animation: none;
}

@keyframes tds-play-float {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-9px) scale(1.02); }
  70% { transform: translateY(-4px) scale(1.01); }
}

@keyframes tds-play-pulse {
  0%, 100% {
    box-shadow:
      0 12px 28px -14px rgba(28, 32, 48, 0.32),
      0 0 0 0 rgba(252, 115, 15, 0.35);
  }
  50% {
    box-shadow:
      0 14px 32px -12px rgba(28, 32, 48, 0.36),
      0 0 0 14px rgba(252, 115, 15, 0);
  }
}

@keyframes tds-play-shine {
  0%, 18% { transform: translateX(-140%) skewX(-12deg); }
  48% { transform: translateX(140%) skewX(-12deg); }
  100% { transform: translateX(140%) skewX(-12deg); }
}

@keyframes tds-play-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.4; }
}

/* Hero left placement for Play badge */
.hero-play-float {
  position: absolute;
  left: 2%;
  top: 68%;
  z-index: 4;
}

.hero-play-float.play-badge-anim img {
  width: min(168px, 38vw);
  height: auto;
}

@media (max-width: 900px) {
  .hero-fc {
    display: none;
  }

  .hero-play-float {
    left: 50%;
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
  }

  .hero-play-float.play-badge-anim {
    animation:
      tds-play-float-center 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
      tds-play-pulse 2.4s ease-in-out infinite;
  }

  .hero-play-float.play-badge-anim:hover {
    transform: translateX(-50%) translateY(-5px) scale(1.05);
    animation-play-state: paused;
  }
}

@keyframes tds-play-float-center {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  40% { transform: translateX(-50%) translateY(-9px) scale(1.02); }
  70% { transform: translateX(-50%) translateY(-4px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .play-badge-anim,
  .play-badge-anim::before,
  .play-badge-anim::after,
  .hero-play-float.play-badge-anim {
    animation: none !important;
  }
}
.hero-mobile {
  padding: 10px 0 25px;
  /*background: #FFF0EB;*/
  overflow: hidden;
  position: relative;
  background-image: url(../images/home-bg1-top.webp);
    --background-overlay: '';
    background-position: 20% -56%;
    background-repeat: no-repeat;
}

.hero-content {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--secondary);
  border: 1px solid #f0e4df;
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.hero-badge-new {
  background: var(--primary);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-badge-new::before {
  content: '✦';
  font-size: 10px;
}

.hero-badge-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0 14px 0 10px;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  color: #111827;
}

.hero-content p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

.hero-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hero Visual Scene */
.hero-visual {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  min-height: 520px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero-bg-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 420px;
  height: 420px;
  background: radial-gradient(ellipse, var(--secondary) 0%, rgba(255, 248, 246, 0.4) 55%, transparent 75%);
  border-radius: 50%;
  z-index: 0;
}

.hero-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
  opacity: 0.7;
}

.hero-cloud-1 {
  width: 280px;
  height: 180px;
  background: var(--secondary);
  top: 5%;
  left: -5%;
}

.hero-cloud-2 {
  width: 320px;
  height: 200px;
  background: #fff0eb;
  top: 10%;
  right: -8%;
}

.hero-cloud-3 {
  width: 200px;
  height: 140px;
  background: var(--primary-bg);
  bottom: 15%;
  left: 20%;
  opacity: 0.5;
}

.hero-float-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 1;
}

.dot-blue { background: #3b82f6; top: 18%; left: 28%; }
.dot-orange { background: var(--primary); top: 35%; right: 22%; width: 8px; height: 8px; }
.dot-red { background: #ef4444; bottom: 38%; left: 18%; width: 7px; height: 7px; }
.dot-purple { background: #a855f7; top: 55%; right: 15%; width: 9px; height: 9px; }

/* Floating people */
.hero-person {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.hero-person img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.role-pill svg {
  color: var(--primary);
  flex-shrink: 0;
}

.person-1 { top: 8%; left: 2%; }
.person-2 { top: 42%; left: -2%; }
.person-3 { top: 5%; right: 2%; }
.person-4 { top: 38%; right: -1%; }
.person-5 { bottom: 18%; right: 8%; }

/* Phone scene */
.hero-phone-scene {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-phone-device {
  width: 270px;
  background: #111827;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  position: relative;
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #111827;
  border-radius: 20px;
  z-index: 10;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 4px;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-app {
  background: var(--white);
  border-radius: 28px;
  padding: 12px 14px 16px;
  min-height: 400px;
}

.phone-app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-top: 18px;
}

.phone-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.phone-app-logo {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.phone-app-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-bell {
  position: relative;
}

.phone-bell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid var(--white);
}

.phone-greeting {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.phone-sub-greeting {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.phone-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 72px;
  gap: 8px;
  margin-bottom: 16px;
  align-items: stretch;
}

.phone-stat-card {
  border-radius: 12px;
  padding: 10px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
}

.phone-stat-card strong {
  font-size: 16px;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.phone-stat-card span {
  font-size: 9px;
  opacity: 0.9;
  line-height: 1.3;
}

.stat-orange {
  background: linear-gradient(135deg, var(--primary) 0%, #f59e0b 100%);
}

.stat-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}

.phone-progress-ring {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-progress-ring svg {
  width: 72px;
  height: 72px;
}

.phone-progress-text {
  position: absolute;
  text-align: center;
  line-height: 1.1;
}

.phone-progress-text strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary);
}

.phone-progress-text span {
  font-size: 7px;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

.phone-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.phone-count-badge {
  background: #ef4444;
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-task-card {
  display: flex;
  gap: 10px;
  background: #f9fafb;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--border);
}

.phone-task-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c4b5fd 0%, #818cf8 100%);
  flex-shrink: 0;
}

.phone-task-info strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.phone-task-tags {
  display: flex;
  gap: 6px;
}

.ptag {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.ptag.ongoing {
  background: #dbeafe;
  color: #2563eb;
}

.ptag.high {
  background: #fee2e2;
  color: #dc2626;
}

.hero-hand {
  width: 220px;
  margin-top: -18px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08));
}

/* ========== TRUSTED ========== */
.trusted {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

.trusted p {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}

.trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  flex-wrap: wrap;
}

.trusted-logos img {
  height: 28px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
}

.trusted-keywords {
  opacity: 1;
  filter: none;
  max-width: 920px;
  margin: 0 auto;
}

.trusted-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.trusted-chip--do {
  color: #c0392b;
  background: #fff5f4;
  border-color: rgba(232, 76, 61, 0.28);
}

.trusted-chip--schedule {
  color: #e86500;
  background: #fff8f2;
  border-color: rgba(232, 101, 0, 0.28);
}

.trusted-chip--delegate {
  color: #b8860b;
  background: #fffbeb;
  border-color: rgba(240, 160, 0, 0.35);
}

.trusted-chip--eliminate {
  color: #5a9e2f;
  background: #f4faee;
  border-color: rgba(122, 184, 41, 0.3);
}

/* ========== KEY FEATURES (BENTO) ========== */
.key-features {
  background: var(--secondary);
}

.key-features-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.kf-card {
  background: var(--third);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.kf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(232, 101, 0, 0.1);
}

.kf-card-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  padding: 40px;
}

.kf-wide-visual {
  flex: 1;
  min-width: 0;
}

.kf-wide-visual .convert-dash-frame {
  max-width: 100%;
}

.kf-card-wide--content-only {
  justify-content: center;
  text-align: left;
}

.kf-card-wide--content-only .kf-wide-content {
  flex: 1 1 auto;
  max-width: 640px;
  margin: 0 auto;
}

.kf-card-head {
  margin-bottom: 24px;
}

.kf-card-head h3,
.kf-wide-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.kf-card-head p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 340px;
}

/* Integrations hub visual */
.kf-visual {
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kf-integrations {
  position: relative;
  width: 100%;
  height: 240px;
}

.kf-hub-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 2px dashed #f0e4df;
  border-radius: 50%;
  animation: kf-spin 30s linear infinite;
}

@keyframes kf-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.kf-hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: var(--third);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(232, 101, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.kf-hub-center img {
  width: 40px;
  height: 40px;
}

.kf-orbit-icon {
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--third);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

.kf-orbit-icon svg {
  width: 22px;
  height: 22px;
  color: #374151;
}

.kf-orbit-icon img {
  height: 14px;
  width: auto;
  opacity: 0.7;
}

.kf-orbit-icon.o1 { top: 18%; left: 50%; transform: translateX(-50%); }
.kf-orbit-icon.o2 { top: 32%; right: 12%; }
.kf-orbit-icon.o3 { bottom: 32%; right: 12%; }
.kf-orbit-icon.o4 { bottom: 18%; left: 50%; transform: translateX(-50%); }
.kf-orbit-icon.o5 { bottom: 32%; left: 12%; }
.kf-orbit-icon.o6 { top: 32%; left: 12%; }

/* Chart widget */
.kf-chart-widget {
  background: var(--secondary);
  border-radius: 16px;
  padding: 20px;
  flex-direction: column;
  align-items: stretch;
  min-height: auto;
}

.kf-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

.kf-widget-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-bg);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.kf-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 140px;
  padding: 0 4px;
}

.kf-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.kf-bar {
  width: 100%;
  max-width: 32px;
  height: var(--h);
  background: var(--c);
  border-radius: 8px 8px 4px 4px;
  transition: height 0.6s ease;
}

.kf-bar-group span {
  font-size: 10px;
  color: var(--text-light);
  font-weight: 500;
}

.kf-chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0e4df;
}

.kf-chart-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.kf-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Wide card - Web dashboard feature */
.kf-wide-content {
  flex: 0 0 40%;
  max-width: 420px;
}

.kf-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--primary-bg);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.kf-wide-content p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.kf-check-list {
  margin-bottom: 28px;
}

.kf-check-list li {
  font-size: 17px;
  color: var(--text-dark);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kf-check-list li::before {
  content: '✓';
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Kanban dashboard mock */
.kf-dashboard-mock {
  flex: 1;
  background: #f9fafb;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px;
  overflow: hidden;
  min-width: 0;
}

.kf-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.kf-board-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.kf-board-tabs {
  display: flex;
  gap: 4px;
  background: var(--third);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.kf-board-tabs span {
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: default;
}

.kf-board-tabs span.active {
  background: var(--primary);
  color: var(--white);
}

.kf-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kf-column {
  background: var(--third);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  min-height: 200px;
}

.kf-col-head {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kf-col-head em {
  font-style: normal;
  margin-left: auto;
  font-size: 10px;
  color: var(--text-light);
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

.kf-col-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kf-col-head .dot.todo { background: #9ca3af; }
.kf-col-head .dot.progress { background: var(--primary); }
.kf-col-head .dot.done { background: #22c55e; }

.kf-task {
  background: var(--third);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.kf-task.t-orange { border-left-color: var(--primary); }
.kf-task.t-blue { border-left-color: #3b82f6; }
.kf-task.t-green { border-left-color: #22c55e; }
.kf-task.t-muted { border-left-color: #d1d5db; opacity: 0.85; }

.kf-task-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  display: block;
  margin-bottom: 4px;
}

.kf-task strong {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  display: block;
  margin-bottom: 8px;
  line-height: 1.3;
}

.kf-task-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--text-muted);
}

.kf-task-foot img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* ========== STEPS / INTEGRATION ========== */
.steps-section {
  background: var(--secondary);
}

.steps-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-item {
  padding: 20px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid transparent;
}

.step-item:hover {
  background: var(--white);
}

.step-item.active {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.step-item h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.step-item p {
  font-size: 16px;
  opacity: 0.8;
}

.step-item:not(.active) p {
  color: var(--text-muted);
}

.signup-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}

.signup-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.signup-card > p {
  color: var(--text-muted);
  font-size: 17px;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 17px;
  font-family: var(--font);
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 101, 0, 0.1);
}

.signup-card .btn-primary {
  width: 100%;
  padding: 14px;
  margin: 8px 0 20px;
}

.social-signup {
  display: flex;
  gap: 12px;
}

.social-signup .btn {
  flex: 1;
  font-size: 16px;
  padding: 12px;
}

.social-signup img {
  width: 18px;
  height: 18px;
}

/* ========== PRICING ========== */
.pricing-section {
  background: var(--third);
}

.pricing-header {
  text-align: center;
  margin-bottom: 48px;
}

.pricing-header h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 560px;
  margin: 0 auto 28px;
}

.pricing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pricing-toggle {
  display: inline-flex;
  align-items: center;
  background: #f3f4f6;
  border-radius: var(--radius-full);
  padding: 4px;
  border: 1px solid var(--border);
}

.pricing-toggle button {
  padding: 10px 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.25s ease;
  font-family: var(--font);
}

.pricing-toggle button.active {
  background: var(--third);
  color: var(--text-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pricing-toggle button[data-period="yearly"].active {
  color: var(--primary);
}

.pricing-save-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pricing-save-badge.visible {
  opacity: 1;
  transform: translateX(0);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1050px;
  margin: 0 auto;
}

.plan-card {
  background: var(--third);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.plan-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.plan-card-featured {
  background: var(--secondary);
  border-color: #f0e4df;
  box-shadow: 0 12px 40px rgba(232, 101, 0, 0.1);
  transform: scale(1.03);
  z-index: 1;
}

.plan-card-featured:hover {
  box-shadow: 0 16px 48px rgba(232, 101, 0, 0.14);
}

.plan-popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.plan-name {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.plan-card-featured .plan-name {
  color: var(--primary);
}

.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}

.plan-amount {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-period {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-muted);
}

.plan-billing {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 28px;
}

.plan-features {
  flex: 1;
  margin-bottom: 28px;
}

.plan-features li {
  font-size: 17px;
  color: var(--text-muted);
  padding: 9px 0;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-card-featured .plan-features li {
  border-bottom-color: #f0e4df;
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--primary-bg);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e86500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.plan-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 17px;
}

/* ========== PRODUCTIVITY FEATURES (ALTERNATING) ========== */
.productivity-features {
  background: var(--third);
}

.pf-rows {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--secondary);
  border-radius: 28px;
  padding: 48px;
  border: 1px solid #f5ebe6;
}

.pf-row-reverse {
  direction: rtl;
}

.pf-row-reverse > * {
  direction: ltr;
}

.pf-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 14px;
}

.pf-content h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.pf-content p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 440px;
}

.pf-visual-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.pf-visual-bg {
  position: absolute;
  width: 90%;
  height: 85%;
  background: var(--primary-bg);
  border-radius: 24px;
  opacity: 0.6;
  transform: rotate(-2deg);
}

.pf-visual-bg.alt {
  background: #fff0e8;
  transform: rotate(2deg);
}

.pf-mock {
  position: relative;
  z-index: 1;
  background: var(--third);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 380px;
}

/* Calendar mock */
.pf-mock-calendar {
  padding: 20px;
}

.pf-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pf-mock-head strong {
  font-size: 16px;
  color: #111827;
}

.pf-mock-pill {
  font-size: 11px;
  font-weight: 600;
  background: var(--primary);
  color: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.pf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 11px;
  margin-bottom: 16px;
}

.pf-cal-grid span {
  padding: 6px 2px;
  border-radius: 6px;
  color: var(--text-dark);
  font-weight: 500;
}

.pf-cal-grid span.dim {
  color: var(--text-light);
  font-weight: 600;
  font-size: 10px;
}

.pf-cal-grid span.active {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
}

.pf-cal-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-event {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--secondary);
  border-radius: 8px;
}

.pf-event .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pf-event .dot.orange { background: var(--primary); }
.pf-event .dot.blue { background: #3b82f6; }
.pf-event .dot.green { background: #22c55e; }

/* Chat mock */
.pf-mock-chat {
  padding: 16px;
}

.pf-chat-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.pf-chat-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pf-chat-item strong {
  font-size: 12px;
  color: #111827;
  display: block;
}

.pf-chat-item p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0;
}

.pf-chat-item span {
  font-size: 10px;
  color: var(--text-light);
}

.pf-chat-item.highlight {
  background: var(--secondary);
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: 10px;
  border-bottom: none;
}

.pf-chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-light);
}

.pf-chat-input button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: var(--white);
  font-size: 17px;
  cursor: pointer;
}

/* Analytics mock */
.pf-mock-analytics {
  padding: 20px;
}

.pf-analytics-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.pf-analytics-top div {
  background: var(--secondary);
  border-radius: 12px;
  padding: 14px;
}

.pf-analytics-top small {
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.pf-analytics-top strong {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  display: block;
}

.pf-analytics-top em {
  font-size: 11px;
  color: #22c55e;
  font-style: normal;
  font-weight: 600;
}

.pf-line-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding: 0 4px;
}

.pf-chart-bar {
  flex: 1;
  height: var(--h);
  background: var(--primary-bg);
  border-radius: 6px 6px 2px 2px;
  transition: height 0.5s ease;
}

.pf-chart-bar.active {
  background: linear-gradient(180deg, var(--primary) 0%, #f5a04d 100%);
}

.pf-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-light);
  padding: 0 4px;
}

/* ========== FAQ SECTION ========== */
.faq-section {
  background: var(--third);
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: 100px;
}

.faq-intro h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.faq-intro > p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.faq-cta-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--secondary);
  border: 1px solid #f5ebe6;
  border-radius: var(--radius-xl);
}

.faq-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--third);
  border: 1px solid #f5ebe6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.faq-cta-box strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.faq-cta-box p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--secondary);
  border: 1px solid #f5ebe6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-color: rgba(232, 101, 0, 0.25);
  box-shadow: 0 4px 20px rgba(232, 101, 0, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-question:hover {
  color: var(--primary);
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--third);
  border: 1px solid #f5ebe6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: transform 0.3s ease, background 0.2s;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  background: var(--primary);
  color: var(--third);
  border-color: var(--primary);
}

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

.faq-answer.open {
  max-height: 320px;
  padding: 0 24px 20px;
}

.faq-answer p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.faq-answer strong {
  color: var(--primary);
  font-weight: 600;
}

/* ========== APP DAY VIEW + THREE TAPS (from new design) ========== */
.tds-m-view {
  background: #fff;
}

.tds-m-flow-sec {
  background: #f6f7f9;
}

.tds-m-stage {
  display: grid;
  grid-template-columns: 1fr 262px 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.tds-m-side {
  display: grid;
  gap: 34px;
}

.tds-m-side--left .tds-m-co {
  text-align: right;
}

.tds-m-co i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.tds-m-side--left .tds-m-co i {
  margin: 7px 0 0 8px;
  float: right;
}

.tds-m-co b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-dark);
}

.tds-m-co span {
  display: block;
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 4px;
  line-height: 1.45;
}

.tds-m-ph {
  width: 262px;
  margin: 0 auto;
  border: 7px solid #1c2030;
  border-radius: 38px;
  background: #fff;
  padding: 26px 12px 14px;
  box-shadow: 0 30px 60px -26px rgba(28, 32, 48, 0.4);
  position: relative;
  text-align: left;
}

.tds-m-ph::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 70px;
  height: 7px;
  margin-left: -35px;
  border-radius: 6px;
  background: #1c2030;
}

.tds-m-ph--sm {
  width: 238px;
  min-height: 380px;
}

.tds-m-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.tds-m-lg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(#e5484d 0 25%, #f08a0c 0 50%, #f5c60f 0 75%, #1f9d5c 0);
  flex: none;
}

.tds-m-hi {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dark);
}

.tds-m-lb {
  margin: 12px 0 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-dark);
}

.tds-m-t4,
.tds-m-c4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.tds-m-t4 div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 9px;
}

.tds-m-t4 small,
.tds-m-c4 small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
}

.tds-m-t4 b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
}

.tds-m-c4 div {
  border-radius: 10px;
  padding: 9px 10px;
  color: #fff;
  min-height: 62px;
}

.tds-m-c4 small {
  color: inherit;
  opacity: 0.95;
  font-size: 11px;
  font-weight: 600;
}

.tds-m-c4 b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  display: block;
  margin-top: 6px;
}

.tds-m-nav {
  display: flex;
  justify-content: space-around;
  margin-top: 14px;
  padding: 8px;
  border-radius: 18px;
  background: #f6f7f9;
}

.tds-m-nav i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dfe3ea;
}

.tds-m-nav i.on {
  background: var(--primary);
}

.tds-m-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.tds-m-step {
  text-align: center;
}

.tds-m-step h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: var(--text-dark);
}

.tds-m-step h3 s {
  text-decoration: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  font-weight: 700;
}

.tds-m-fld {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text-dark);
  text-align: left;
}

.tds-m-fld small,
.tds-m-fld-label {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  text-align: left;
}

.tds-m-fld-label {
  margin-bottom: 4px;
}

.tds-m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}

.tds-m-chips span {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f6f7f9;
  color: var(--text-muted);
}

.tds-m-chips span.on {
  background: #e5484d;
  color: #fff;
}

.tds-m-btn {
  display: block;
  text-align: center;
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  padding: 11px;
  font-weight: 600;
  font-size: 13px;
  margin-top: 14px;
}

.tds-m-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--text-dark);
}

.tds-m-row.on {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.tds-m-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

.tds-m-row em {
  margin-left: auto;
  font-style: normal;
  color: var(--primary);
  font-weight: 700;
}

.tds-m-ok {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e6f6ef;
  color: #1f9d6b;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  margin: 26px auto 12px;
}

.tds-m-done-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-dark);
}

.tds-m-sum {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  text-align: left;
}

.tds-m-sum b {
  display: block;
  color: var(--text-dark);
  font-size: 14px;
  margin-bottom: 2px;
}

.tds-m-pc {
  text-align: center;
  margin-top: 52px;
}

.tds-m-play:not(.play-badge-anim) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  border: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.tds-m-play:not(.play-badge-anim):hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.tds-m-play img {
  height: 52px;
  width: auto;
  display: block;
}

.tds-m-play.play-badge-anim img {
  height: 52px;
  width: auto;
}

@media (max-width: 900px) {
  .tds-m-stage {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tds-m-side {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .tds-m-side--left .tds-m-co {
    text-align: left;
  }

  .tds-m-side--left .tds-m-co i {
    float: none;
    margin: 0 8px 0 0;
  }

  .tds-m-stage .tds-m-ph {
    order: -1;
  }

  .tds-m-flow {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 520px) {
  .tds-m-side {
    grid-template-columns: 1fr;
  }
}

/* ========== STREAMLINE SECTION ========== */
.streamline-section {
  background: var(--secondary);
}

.streamline-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 32px 40px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 56px;
}

.streamline-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.streamline-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(232, 101, 0, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

.streamline-ring {
  position: absolute;
  width: 340px;
  height: 340px;
  border: 2px dashed rgba(232, 101, 0, 0.2);
  border-radius: 50%;
  animation: spin-slow 40s linear infinite;
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.streamline-phone-img {
  position: relative;
  z-index: 2;
  max-width: 300px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.15));
  object-fit: contain;
}

.streamline-point {
  text-align: left;
  padding: 20px;
  background: var(--third);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.streamline-point:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.streamline-point:nth-child(1) { grid-column: 1; grid-row: 1; }
.streamline-point:nth-child(2) { grid-column: 1; grid-row: 2; }
.streamline-point:nth-child(4) { grid-column: 3; grid-row: 1; }
.streamline-point:nth-child(5) { grid-column: 3; grid-row: 2; }

.streamline-point h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 12px 0 6px;
}

.streamline-point p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.55;
}

.sp-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-bg);
  border: 1px solid #ffe0cc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.streamline-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
  background: var(--third);
  border-radius: 20px;
  border: 1px solid #f5ebe6;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}

.stat-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.stat-item span {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* ========== APP SHOWCASE (MOBILE 2) ========== */
.app-showcase {
  background: linear-gradient(180deg, var(--third) 0%, var(--secondary) 100%);
  overflow: hidden;
}

.app-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.app-showcase-content h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #111827;
  margin: 8px 0 16px;
}

.app-showcase-content > p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.app-showcase-list {
  margin-bottom: 32px;
}

.app-showcase-list li {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-showcase-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.app-showcase-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.app-showcase-visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asv-blob {
  position: absolute;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--primary-bg) 0%, transparent 70%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.asv-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.6;
}

.asv-cloud-1 {
  width: 200px;
  height: 140px;
  background: #fff0e8;
  top: 10%;
  right: 5%;
}

.asv-cloud-2 {
  width: 180px;
  height: 120px;
  background: var(--secondary);
  bottom: 15%;
  left: 0;
}

.asv-phone-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.asv-phone-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.18));
  object-fit: contain;
}

.asv-phone-img--sm {
  max-width: 375px;
}

.asv-float-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--third);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  animation: float-card 5s ease-in-out infinite;
}

.asv-float-card strong {
  display: block;
  font-weight: 700;
  color: #111827;
  font-size: 16px;
}

.asv-float-card small {
  color: var(--text-muted);
  font-size: 11px;
}

.asv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.asv-dot.green { background: #22c55e; }
.asv-dot.orange { background: var(--primary); }

.asv-card-1 { top: 12%; left: 0; animation-delay: 0s; }
.asv-card-2 { top: 45%; right: -10px; animation-delay: 1.2s; }
.asv-card-3 { bottom: 18%; left: 5%; animation-delay: 2.4s; }

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

.asv-float-card img {
  border-radius: 50%;
}

/* ========== KNOW WHAT TO DO NEXT ========== */
.next-action-section {
  background: var(--third);
  padding-top: 40px;
}

.next-action-wrap {
  background: var(--secondary);
  border-radius: 28px;
  padding: 40px 40px 36px;
  border: 1px solid #f5ebe6;
}

.next-action-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.next-action-head h2 {
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.next-learn-link {
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  transition: opacity 0.2s;
}

.next-learn-link:hover {
  opacity: 0.8;
}

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

.next-card {
  background: var(--third);
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.next-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.next-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.next-card-icon.orange {
  background: #fff0e8;
  color: var(--primary);
}

.next-card-icon.red {
  background: #fee2e2;
  color: #dc2626;
}

.next-card-icon.blue {
  background: #dbeafe;
  color: #2563eb;
}

.next-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.next-card p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ========== CONVERT IDEAS SECTION ========== */
.convert-section {
  background: var(--third);
}

.convert-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.convert-visual {
  position: relative;
}

.convert-dash-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.1);
}

.convert-dash-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.convert-dash-chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
}

.convert-dash-chrome span:nth-child(1) { background: #f87171; }
.convert-dash-chrome span:nth-child(2) { background: #fbbf24; }
.convert-dash-chrome span:nth-child(3) { background: #34d399; }

.convert-dash-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.convert-content h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
}

.convert-content > p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.convert-feature-blocks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}

.convert-feature-blocks h3 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin: 0 0 6px;
}

.convert-feature-blocks p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.convert-list {
  margin-bottom: 32px;
}

.convert-list li {
  font-size: 17px;
  color: var(--text-dark);
  padding: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.convert-list li::before {
  content: '✓';
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ========== TASK MATRIX SECTION ========== */
.task-matrix-section {
  background: var(--third);
  overflow: hidden;
}

.matrix-header {
  max-width: 640px;
  margin: 0 auto 40px;
}

.matrix-header .matrix-platform-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--third);
  border: 1px solid #f0e4df;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  box-shadow: var(--shadow-sm);
}

.platform-badge svg {
  color: var(--primary);
}

.matrix-panel {
  position: relative;
  background: var(--secondary);
  border: 1px solid #f5ebe6;
  border-radius: 28px;
  padding: 48px 40px 40px;
  overflow: hidden;
}

.matrix-panel-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232, 101, 0, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.matrix-panel-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 320px;
  background: radial-gradient(ellipse, rgba(232, 101, 0, 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.matrix-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 0 32px;
}

.matrix-axis {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  z-index: 2;
}

.matrix-axis-y-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.matrix-axis-y-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.matrix-axis-x-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.matrix-axis-x-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}

.matrix-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  min-height: 480px;
}

.matrix-card {
  position: relative;
  background: var(--third);
  border: 1px solid #f0e4df;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.matrix-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.mq-do-first {
  border-top: 3px solid var(--primary);
}

.mq-do-first:hover {
  border-color: rgba(232, 101, 0, 0.35);
}

.mq-schedule {
  border-top: 3px solid #2563eb;
}

.mq-schedule:hover {
  border-color: rgba(37, 99, 235, 0.35);
}

.mq-delegate {
  border-top: 3px solid #d97706;
}

.mq-delegate:hover {
  border-color: rgba(217, 119, 6, 0.35);
}

.mq-eliminate {
  border-top: 3px solid #9ca3af;
}

.mq-eliminate:hover {
  border-color: rgba(107, 114, 128, 0.35);
}

.matrix-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 10px;
}

.matrix-card-body h3 {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.matrix-card-body > p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 92%;
}

.matrix-card-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.matrix-card-tasks li {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  padding: 5px 10px;
  background: var(--secondary);
  border: 1px solid #f0e4df;
  border-radius: var(--radius-full);
}

.mq-do-first .matrix-card-tasks li { border-color: rgba(232, 101, 0, 0.2); color: var(--primary); }
.mq-schedule .matrix-card-tasks li { border-color: rgba(37, 99, 235, 0.2); color: #2563eb; }
.mq-delegate .matrix-card-tasks li { border-color: rgba(217, 119, 6, 0.2); color: #d97706; }
.mq-eliminate .matrix-card-tasks li { border-color: rgba(107, 114, 128, 0.2); color: #6b7280; }

.matrix-card-visual {
  position: absolute;
  right: 16px;
  bottom: 16px;
  opacity: 0.9;
}

/* Do First visual */
.mcv-urgent {
  width: 88px;
  padding: 10px;
  background: var(--secondary);
  border: 1px solid #f0e4df;
  border-radius: 12px;
  position: relative;
}

.mcv-bar {
  height: 6px;
  background: #f0e4df;
  border-radius: 3px;
  margin-bottom: 6px;
}

.mcv-bar-active {
  background: linear-gradient(90deg, var(--primary), #f97316);
  width: 100%;
}

.mcv-bar-short {
  width: 55%;
}

.mcv-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 9px;
  font-weight: 800;
  background: var(--primary);
  color: var(--white);
  padding: 3px 7px;
  border-radius: var(--radius-full);
}

/* Schedule visual */
.mcv-calendar {
  width: 80px;
  background: var(--secondary);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  overflow: hidden;
}

.mcv-cal-head {
  height: 14px;
  background: #2563eb;
}

.mcv-cal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
}

.mcv-cal-grid span {
  aspect-ratio: 1;
  background: #eff6ff;
  border-radius: 3px;
}

.mcv-cal-grid span.active {
  background: #2563eb;
}

/* Delegate visual */
.mcv-team {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--secondary);
  border: 1px solid #fef3c7;
  border-radius: 12px;
}

.mcv-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--third);
}

.mcv-avatar.a1 { background: #fbbf24; }
.mcv-avatar.a2 { background: #60a5fa; }
.mcv-avatar.a3 { background: #34d399; }

.mcv-arrow {
  color: #d97706;
  display: flex;
}

/* Eliminate visual */
.mcv-drop {
  padding: 10px 12px;
  background: var(--secondary);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  position: relative;
}

.mcv-strike {
  display: block;
  font-size: 9px;
  color: #9ca3af;
  text-decoration: line-through;
  margin-bottom: 4px;
}

.mcv-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: #6b7280;
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-promo-row {
  margin-top: 32px;
}

.matrix-bottom-bar {
  padding: 24px 32px;
  background: var(--third);
  border: 1px solid #f5ebe6;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.matrix-bottom-text {
  flex: 1;
  min-width: 240px;
}

.matrix-bottom-bar p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.matrix-bottom-bar strong {
  color: var(--primary);
  font-weight: 700;
}

.matrix-bottom-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.matrix-phone-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.matrix-phone-preview img {
  width: 110px;
  border-radius: 18px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.12));
  animation: float-device 5s ease-in-out infinite;
}

.device-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
}

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

/* ========== TESTIMONIALS CREATIVE ========== */
.testimonials-creative {
  position: relative;
  background: var(--secondary);
  overflow: hidden;
  padding-bottom: 100px;
}

.t-deco {
  position: absolute;
  color: #d4c4bc;
  pointer-events: none;
  z-index: 1;
}

.t-deco-plus {
  top: 48px;
  left: 8%;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.t-deco-circle {
  top: 120px;
  right: 10%;
  width: 18px;
  height: 18px;
  border: 2px solid #d4c4bc;
  border-radius: 50%;
}

.t-deco-zigzag {
  bottom: 80px;
  right: 12%;
  opacity: 0.7;
}

.t-deco-hook {
  bottom: 100px;
  left: 6%;
  opacity: 0.7;
}

.testimonials-creative-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}

.testimonials-quote-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8957a;
  margin-bottom: 12px;
}

.testimonials-creative-header h2 {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 12px;
}

.scribble-word {
  position: relative;
  display: inline-block;
}

.scribble-word::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -2px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c18-6 36 6 54 0s36-6 54 2' fill='none' stroke='%23e86500' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.testimonials-creative-header p {
  font-size: 16px;
  color: var(--text-muted);
}

.testimonials-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-height: 380px;
  padding: 20px 0 40px;
  position: relative;
  z-index: 2;
}

.testimonials-creative .testimonial-card.tc-card {
  position: relative;
  flex: 0 0 260px;
  width: 260px;
  background: var(--third);
  border-radius: 16px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, z-index 0s;
  margin: 0 -28px;
  overflow: visible;
}

.testimonials-creative .tc-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-radius: 0 16px 0 0;
  z-index: 2;
}

.tc-fold-teal::before { border-color: transparent #14b8a6 transparent transparent; }
.tc-fold-gold::before { border-color: transparent #f59e0b transparent transparent; }
.tc-fold-green::before { border-color: transparent #22c55e transparent transparent; }
.tc-fold-blue::before { border-color: transparent #38bdf8 transparent transparent; }
.tc-fold-orange::before { border-color: transparent var(--primary) transparent transparent; }

.testimonials-creative .tc-card:nth-child(1) {
  transform: rotate(-7deg) translateY(28px);
  z-index: 1;
}

.testimonials-creative .tc-card:nth-child(2) {
  transform: rotate(-3deg) translateY(10px);
  z-index: 2;
}

.testimonials-creative .tc-card:nth-child(3) {
  transform: rotate(0deg) translateY(-8px);
  z-index: 5;
}

.testimonials-creative .tc-card:nth-child(4) {
  transform: rotate(3deg) translateY(8px);
  z-index: 3;
}

.testimonials-creative .tc-card:nth-child(5) {
  transform: rotate(7deg) translateY(24px);
  z-index: 2;
}

.testimonials-creative .tc-card:hover {
  transform: rotate(0deg) translateY(-16px) scale(1.04);
  z-index: 10;
  box-shadow: 0 20px 48px rgba(232, 101, 0, 0.15);
}

.testimonials-creative .testimonial-stars {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.testimonials-creative .testimonial-card .quote {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}

.testimonials-creative .testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

.testimonials-creative .testimonial-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonials-creative .testimonial-author h4 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.testimonials-creative .testimonial-author span {
  font-size: 11px;
  color: var(--text-muted);
}

/* ========== CTA BANNER ========== */
.cta-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin: 0 24px;
  max-width: calc(var(--max-width) + 48px);
  margin-left: auto;
  margin-right: auto;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/cloud-pattern.svg') center/cover no-repeat;
  opacity: 0.15;
}

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

.cta-banner h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin: 16px 0 12px;
}

.cta-banner p {
  font-size: 17px;
  opacity: 0.9;
  max-width: 520px;
  margin: 0 auto 28px;
}

.app-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.app-buttons img {
  height: 48px;
  cursor: pointer;
  transition: transform 0.2s;
}

.app-buttons img:hover {
  transform: scale(1.05);
}

/* ========== FOOTER ========== */
.footer {
  padding: 64px 0 0;
  background: var(--secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 48px;
  padding-bottom: 8px;
}

.footer-brand p {
  font-size: 17px;
  color: var(--text-muted);
  margin: 16px 0 20px;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 12px;
}

.tds-social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tds-social-links__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-size, 48px);
  height: var(--social-size, 48px);
  border-radius: 50%;
  background: #fff0e8;
  color: #fc730f;
  border: 1px solid #ffd9bd;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  line-height: 0;
}

.tds-social-links__icon {
  display: block;
  width: calc(var(--social-size, 48px) * 0.46);
  height: calc(var(--social-size, 48px) * 0.46);
}

.tds-social-links__item img {
  display: block;
  width: 48px;
  height: 48px;
}

.tds-social-links__item:hover {
  transform: translateY(-2px);
  background: #fc730f;
  color: #ffffff;
  border-color: #fc730f;
  box-shadow: 0 8px 18px rgba(252, 115, 15, 0.28);
}

.tds-social-links--bar {
  gap: 10px;
}

.tds-social-links--contact {
  margin-top: 14px;
}

.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--third);
  border: 1px solid #f0e4df;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.social-links a:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.social-links a:hover img {
  filter: brightness(0) invert(1);
}

.footer-col h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #111827;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul a {
  font-size: 17px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-col ul a:hover {
  color: var(--primary);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 17px;
  color: var(--text-muted);
}

.contact-item img {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Footer bottom floating bar */
.footer-sub {
  /*background: #111827;*/
  padding: 28px 0 32px;
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 78px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 12px 28px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
}

.footer-bar-left,
.footer-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-copy,
.footer-rights {
  font-size: 16px;
  color: var(--text-muted);
  white-space: nowrap;
}

.footer-legal-link {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  transition: color 0.2s;
  white-space: nowrap;
}

.footer-legal-link:hover {
  color: var(--primary);
}

.footer-bar-social {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-bar-social a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-bar-social img {
  display: block;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
  .nav,
  .header-login,
  .btn-get-started {
    display: none;
  }

  .header-bar {
    grid-template-columns: 1fr auto;
    height: 72px;
    padding: 0 8px 0 12px;
  }

  .logo {
    justify-self: start;
    min-width: 0;
  }

  .header-actions {
    justify-self: end;
    gap: 6px;
    flex-shrink: 0;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  .logo img {
    height: 56px;
    width: auto;
    max-width: none;
  }
}
@media (max-width: 1024px) {
  .nav {
    gap: 20px;
  }

  .nav a {
    font-size: 16px;
  }

  .header-login {
    display: none;
  }

  .key-features-bento {
    grid-template-columns: 1fr;
  }

  .kf-card-wide {
    flex-direction: column;
    padding: 32px;
  }

  .kf-wide-content {
    flex: none;
    max-width: 100%;
  }

  .kf-kanban {
    grid-template-columns: 1fr;
  }

  .how-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-layout {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .plan-card-featured {
    transform: none;
    order: -1;
  }

  .pf-row,
  .pf-row-reverse {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    direction: ltr;
  }

  .pf-content p {
    max-width: 100%;
  }

  .testimonials-fan {
    flex-wrap: wrap;
    gap: 20px;
    min-height: auto;
    padding-bottom: 20px;
  }

  .testimonials-creative .testimonial-card.tc-card {
    flex: 0 0 calc(50% - 20px);
    width: auto;
    margin: 0;
    transform: none !important;
  }

  .testimonials-creative .tc-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
  }

  .next-cards {
    grid-template-columns: 1fr;
  }

  .convert-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .streamline-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .streamline-visual {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    min-height: 320px;
  }

  .streamline-point:nth-child(1),
  .streamline-point:nth-child(2),
  .streamline-point:nth-child(4),
  .streamline-point:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
  }

  .streamline-stats {
    flex-direction: column;
    gap: 20px;
  }

  .stat-divider {
    width: 80%;
    height: 1px;
  }

  .app-showcase-grid {
    grid-template-columns: 1fr;
  }

  .matrix-panel {
    padding: 36px 24px 28px;
  }

  .matrix-2x2 {
    min-height: 420px;
    gap: 16px;
  }

  .matrix-axis-x-left,
  .matrix-axis-x-right {
    display: none;
  }

  .matrix-bottom-bar {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .matrix-bottom-text {
    text-align: center;
  }

  .matrix-bottom-actions {
    justify-content: center;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-intro {
    position: static;
    text-align: center;
  }

  .faq-cta-box {
    align-items: center;
    text-align: center;
  }

  .app-showcase-visual {
    min-height: 400px;
    order: -1;
  }

  .asv-float-card {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    padding: 16px 24px;
    border-radius: 40px;
  }

  .footer-bar-left,
  .footer-bar-right {
    justify-content: center;
  }

  .footer-copy,
  .footer-rights {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 100px;
  }

  body {
    padding-top: 96px;
  }

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

  .how-step-card {
    padding: 28px 22px 24px;
  }

  .container {
    padding: 0 20px;
  }

  .section {
    padding: 56px 0;
  }

  .section-header {
    margin-bottom: 36px;
  }

  .header {
    padding: 10px 12px;
  }

  .header .container {
    padding: 0;
  }

  .header-bar {
    grid-template-columns: 1fr auto;
    height: 68px;
    min-height: 0;
    padding: 0 6px 0 10px;
    border-radius: 999px;
  }

  .logo img {
    height: 52px;
    width: auto;
    max-width: none;
  }

  .header-actions {
    gap: 4px;
    justify-self: end;
    flex-shrink: 0;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: background 0.2s;
  }

  .mobile-menu-btn:hover,
  .mobile-menu-btn:focus-visible {
    background: var(--secondary);
  }

  .nav,
  .header-login,
  .btn-get-started {
    display: none;
  }

  /* Hero */
  .hero {
    padding: 32px 0 0;
  }

  .hero-content {
    margin-bottom: 28px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-visual {
    min-height: 420px;
    transform: scale(0.9);
    transform-origin: top center;
  }

  .hero-person img {
    width: 40px;
    height: 40px;
  }

  .role-pill {
    font-size: 8px;
    padding: 3px 6px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .person-1 { top: 2%; left: 2%; }
  .person-2 { top: 38%; left: 0; }
  .person-3 { top: 0; right: 2%; }
  .person-4 { top: 36%; right: 0; }
  .person-5 { bottom: 12%; right: 4%; }

  .hero-phone-device {
    width: 220px;
  }

  .btn-hero {
    min-width: 100%;
    width: 100%;
    max-width: 320px;
  }

  /* Trusted */
  .trusted-logos {
    gap: 10px 12px;
  }

  .trusted-chip {
    font-size: 12px;
    padding: 7px 12px;
  }

  /* Streamline */
  .streamline-point h4 {
    font-size: 17px;
  }

  /* App showcase */
  .app-showcase-content h2 {
    font-size: 26px;
  }

  .app-showcase-btns {
    flex-wrap: wrap;
  }

  /* Key features */
  .key-features-bento {
    gap: 16px;
  }

  .kf-card {
    padding: 24px 20px;
  }

  .kf-card-wide {
    padding: 28px 20px;
  }

  .kf-kanban {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pf-visual-wrap {
    min-height: 200px;
  }

  /* Steps */
  .steps-layout {
    gap: 32px;
  }

  .signup-card {
    padding: 28px 24px;
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .plan-card-featured {
    transform: none;
    order: -1;
  }

  .pricing-header h2 {
    font-size: 28px;
  }

  /* FAQ */
  .faq-layout {
    gap: 32px;
  }

  .faq-question {
    font-size: 16px;
    padding: 18px 16px;
  }

  /* Matrix */
  .matrix-panel {
    padding: 28px 16px 24px;
    border-radius: 20px;
  }

  .matrix-frame {
    padding: 20px 0 24px;
  }

  .matrix-axis {
    font-size: 9px;
  }

  .matrix-2x2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    gap: 14px;
  }

  .matrix-card {
    min-height: auto;
    padding: 20px;
  }

  .matrix-card-body > p {
    max-width: 100%;
    padding-right: 80px;
  }

  .matrix-axis-y-top,
  .matrix-axis-y-bottom {
    display: none;
  }

  .matrix-bottom-bar {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .matrix-bottom-text {
    text-align: center;
  }

  .matrix-bottom-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .matrix-phone-preview {
    width: 100%;
  }

  /* Testimonials */
  .testimonials-fan {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: auto;
    padding: 0 8px 20px;
  }

  .testimonials-creative .testimonial-card.tc-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 340px;
    margin: 0;
    transform: none !important;
  }

  .testimonials-creative .tc-card:hover {
    transform: translateY(-6px) !important;
  }

  .t-deco-plus,
  .t-deco-circle,
  .t-deco-zigzag,
  .t-deco-hook {
    display: none;
  }

  /* Next / Convert */
  .next-action-wrap {
    padding: 28px 20px;
  }

  .next-action-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .convert-layout {
    gap: 32px;
  }

  .convert-dash-frame {
    max-width: 520px;
    margin: 0 auto;
  }

  .streamline-phone-img {
    max-width: 260px;
  }

  .kf-integrations {
    height: 200px;
  }

  .kf-hub-ring {
    width: 160px;
    height: 160px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
    width: 100%;
    padding: 20px 20px;
    gap: 14px;
    border-radius: 24px;
  }

  .footer-sub .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-bar-left,
  .footer-bar-right {
    width: 100%;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .footer-bar-social {
    width: 100%;
  }

  .footer-bar-social .tds-social-links--bar {
    justify-content: center;
    gap: 10px;
  }

  .footer-copy,
  .footer-rights,
  .footer-legal-link {
    white-space: normal;
    font-size: 14px;
    line-height: 1.45;
  }

  .cta-banner {
    padding: 48px 24px;
    margin: 0 16px;
  }

  .social-signup {
    flex-direction: column;
  }

  img,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}

.mobile-nav.open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mobile-nav.open .mobile-nav-backdrop {
  opacity: 1;
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 100%);
  max-width: 100%;
  background: var(--third);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav.open .mobile-nav-panel {
  transform: translateX(0);
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mobile-nav-logo img {
  height: 70px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--secondary);
  border: 1px solid #f0e4df;
  border-radius: 12px;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.mobile-nav-close:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
}

.mobile-nav-links a {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
  padding: 16px 12px;
  border-radius: 12px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
}

.mobile-nav-links a:last-child {
  border-bottom: none;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible {
  background: var(--secondary);
  color: var(--primary);
  padding-left: 18px;
}

.mobile-nav-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
  background: var(--secondary);
  flex-shrink: 0;
}

.mobile-nav-login {
  width: 100%;
  justify-content: center;
  color: var(--primary);
  border-color: rgba(252, 115, 15, 0.35);
  font-weight: 600;
}

.mobile-nav-login:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.mobile-nav-footer .btn-get-started {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .section {
    padding: 48px 0;
  }

  .section-header {
    margin-bottom: 32px;
  }

  .section-header h2,
  .testimonials-creative-header h2,
  .pricing-header h2,
  .matrix-header h2 {
    font-size: 26px;
  }

  .section-header p,
  .testimonials-creative-header p {
    font-size: 17px;
  }

  /* Hero */
  .hero {
    padding: 24px 0 0;
  }

  .hero-content {
    margin-bottom: 20px;
  }

  .hero-badge {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-badge-text {
    font-size: 11px;
    padding: 6px 10px;
  }

  .hero-content h1 {
    font-size: 28px;
  }

  .hero-content p {
    font-size: 16px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .hero-visual {
    min-height: 360px;
    transform: scale(0.82);
    margin: 0 -8px;
  }

  .hero-person.person-2,
  .hero-person.person-4,
  .hero-person.person-5 {
    display: none;
  }

  .hero-phone-device {
    width: 200px;
  }

  .hero-float-dot,
  .hero-cloud {
    display: none;
  }

  /* Trusted */
  .trusted {
    padding: 32px 0;
  }

  .trusted-logos {
    gap: 8px 10px;
  }

  .trusted-chip {
    font-size: 11px;
    padding: 6px 10px;
  }

  /* Streamline */
  .streamline-layout {
    margin-bottom: 32px;
  }

  .streamline-visual {
    min-height: 260px;
  }

  .streamline-phone-img {
    max-width: 220px;
  }

  .streamline-point {
    padding: 16px;
  }

  .streamline-stats {
    padding: 20px 16px;
  }

  /* App showcase */
  .app-showcase-visual {
    min-height: 300px;
  }

  .app-showcase-btns {
    flex-direction: column;
  }

  .app-showcase-btns .btn {
    width: 100%;
  }

  /* Next action */
  .next-action-wrap {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .next-card {
    padding: 20px 16px;
  }

  /* Convert */
  .convert-content .btn {
    width: 100%;
  }

  /* Matrix */
  .matrix-panel {
    padding: 24px 12px 20px;
  }

  .matrix-card-body > p {
    padding-right: 70px;
    font-size: 12px;
  }

  .matrix-card-body h3 {
    font-size: 17px;
  }

  .matrix-bottom-actions {
    flex-direction: column;
    width: 100%;
  }

  .matrix-bottom-actions .btn {
    width: 100%;
  }

  .matrix-phone-preview img {
    width: 90px;
  }

  /* Key features */
  .kf-card {
    padding: 20px 16px;
  }

  .kf-card-wide {
    padding: 24px 16px;
  }

  .kf-card-head h3,
  .kf-wide-content h3 {
    font-size: 17px;
  }

  .kf-integrations {
    height: 180px;
  }

  /* Productivity */
  .pf-row,
  .pf-row-reverse {
    padding: 24px 16px;
    gap: 24px;
  }

  .pf-content h3 {
    font-size: 20px;
  }

  /* Steps / signup */
  .signup-card {
    padding: 24px 20px;
  }

  .step-item {
    padding: 16px 18px;
  }

  /* Pricing */
  .pricing-grid {
    max-width: 100%;
  }

  .plan-card {
    padding: 28px 20px;
  }

  .pricing-toggle-wrap {
    flex-direction: column;
    gap: 12px;
  }

  .pricing-toggle button {
    padding: 10px 20px;
    font-size: 16px;
  }

  /* FAQ */
  .faq-question {
    font-size: 17px;
    padding: 16px;
    gap: 12px;
  }

  .faq-answer.open {
    padding: 0 16px 16px;
  }

  .faq-cta-box {
    padding: 20px 16px;
  }

  /* Testimonials */
  .testimonials-creative {
    padding-bottom: 64px;
  }

  .testimonials-creative .testimonial-card.tc-card {
    max-width: 100%;
    padding: 20px 18px;
  }

  /* CTA */
  .cta-banner {
    padding: 40px 20px;
    margin: 0 12px;
    border-radius: 20px;
  }

  .cta-banner h2 {
    font-size: 24px;
  }

  /* Footer */
  .footer {
    padding: 48px 0 20px;
  }

  .footer-grid {
    gap: 28px;
  }

  .footer-sub {
    padding: 20px 0 24px;
  }

  .footer-sub .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer-bottom-bar {
    border-radius: 20px;
    margin: 0;
    padding: 18px 14px;
    gap: 12px;
  }

  .footer-copy,
  .footer-rights,
  .footer-legal-link {
    font-size: 13px;
  }

  .footer-bar-social .tds-social-links--bar .tds-social-links__item {
    --social-size: 36px;
  }

  .footer-bar-right {
    gap: 6px 12px;
  }

  /* Mobile nav */
  .mobile-nav-panel {
    width: 100%;
  }

  .mobile-nav-head {
    padding: 14px 16px;
  }

  .mobile-nav-footer {
    padding: 14px 16px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .mobile-nav-panel {
    width: min(380px, 42vw);
  }
}

/* Contact Page */
.contact-page-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.contact-page-hero .section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.contact-page-hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.contact-page-hero h1 span {
  color: var(--primary);
}

.contact-page-hero p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}

.contact-page-section {
  padding: 24px 0 72px;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.contact-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 20px 16px;
  overflow: hidden;
}

.contact-visual__img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.14));
}

.contact-info-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-help-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-md);
}

.contact-help-panel__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-bg);
  border-radius: 999px;
  padding: 5px 10px;
  margin-bottom: 12px;
}

.contact-help-panel h2,
.contact-office-block > h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: #111827;
  line-height: 1.28;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.contact-help-panel__lead {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 20px;
}

.contact-help-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.contact-help-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fffaf5;
  border: 1px solid #ffe0c7;
  border-radius: 16px;
  padding: 16px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.contact-help-block:hover {
  border-color: #ffc896;
  box-shadow: 0 8px 20px rgba(252, 115, 15, 0.08);
  transform: translateY(-1px);
}

.contact-help-block__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-help-block__body {
  min-width: 0;
}

.contact-help-block h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
  line-height: 1.35;
}

.contact-help-block p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.contact-help-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.contact-help-link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-help-link-chip:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.contact-help-link-chip--outline {
  background: transparent;
  color: var(--text-dark) !important;
  border: 1.5px solid var(--border);
}

.contact-help-link-chip--outline:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
  background: #fff7f0;
}

.contact-office-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}

.contact-info-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.contact-info-card__icon img {
  width: 22px;
  height: 22px;
}

.contact-info-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.contact-info-card p,
.contact-info-card a:not(.tds-social-links__item) {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-info-card a:not(.tds-social-links__item):hover {
  color: var(--primary);
}

.contact-info-card--social .tds-social-links__item {
  color: var(--primary);
  background: #fff0e8;
  border-color: #ffd9bd;
}

.contact-info-card--social .tds-social-links__item:hover {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

.contact-hours {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-light);
}

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 28px 32px;
  box-shadow: var(--shadow-md);
}

.contact-form-card h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
}

.contact-form-card > p {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.contact-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-dark);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(252, 115, 15, 0.12);
}

.contact-field textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.contact-form-note {
  font-size: 13px;
  color: var(--text-light);
}

.nav a.is-active {
  color: var(--primary);
  font-weight: 700;
}

.mobile-nav-links a.is-active {
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 900px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

/* Static Pages (About, Privacy, Terms, Refund, Blog, Contact) */
.static-landing-page {
  background-color: #FFF0EB;
}

.static-page-hero-v2 {
  position: relative;
  padding: 40px 0 42px;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.static-page-hero-v2__bg {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.static-page-hero-v2__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.static-page-hero-v2 .tds-breadcrumb {
  text-align: center;
  margin-bottom: 0;
}

.static-page-hero-v2 .tds-breadcrumb__item span {
  max-width: none;
}

.subpage-breadcrumb-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.subpage-hero-meta {
  text-align: center;
  margin-bottom: 22px;
}

.subpage-hero-meta .subpage-breadcrumb-wrap {
  margin-bottom: 0;
}

.subpage-breadcrumb-wrap .tds-breadcrumb__list {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.static-page-hero-v2__inner .section-label,
.subpage-hero-meta .section-label {
  display: inline-block;
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 auto 4px;
  line-height: 1.3;
}

.subpage-breadcrumb-wrap .tds-breadcrumb {
  margin-bottom: 0;
}

.subpage-breadcrumb-wrap .tds-breadcrumb__item {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
}

.subpage-breadcrumb-wrap .tds-breadcrumb__item span {
  max-width: min(520px, 85vw);
  white-space: normal;
}

.blog-detail-hero-v3 .subpage-breadcrumb-wrap .tds-breadcrumb__item span {
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  text-align: center;
}

.blog-detail-hero-v3 .subpage-breadcrumb-wrap .tds-breadcrumb__list {
  justify-content: center;
}

.subpage-hero-v2 {
  padding-top: 40px;
}

.static-page-hero-v2__inner .section-label,
.subpage-hero-meta .section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.static-page-hero-v2__inner h1 {
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 14px 0 16px;
}

.static-page-hero-v2__inner h1 span {
  color: var(--primary);
}

.static-page-hero-v2__inner p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto;
}

.static-page-body {
  padding: 10px 0 88px;
}

.static-page-shell {
  max-width: 1240px;
}

.static-page-layout {
  display: grid;
  gap: 28px;
  align-items: start;
}

.static-page-layout--wide {
  grid-template-columns: 1fr;
}

.static-page-layout--wide .static-sidebar {
  display: none;
}

.static-page-layout--with-sidebar {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.static-page-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 42px 48px;
  box-shadow: var(--shadow-md);
}

.static-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: #fff4eb;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
}

.static-intro-banner {
  padding: 22px 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8f2 0%, #ffffff 100%);
  border: 1px solid #ffe2cc;
  margin-bottom: 28px;
}

.static-intro-banner p {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-dark);
}

.about-intro-banner__extra {
  margin-top: 14px !important;
}

.about-section-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.about-story-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  margin-bottom: 34px;
  align-items: start;
}

.about-story-copy h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 14px;
}

.about-story-copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
}

.about-story-copy p:last-child {
  margin-bottom: 0;
}

.about-story-panel {
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
  border: 1px solid #ffe2cc;
  border-radius: 20px;
  padding: 24px 22px;
}

.about-story-panel h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 14px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.about-value-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  background: #fcfcfd;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-value-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.about-value-card h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.about-value-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.about-process-list {
  margin-top: 18px;
}

.about-trust-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 24px;
}

.about-trust-block {
  background: #fffaf5;
  border: 1px solid #ffe6d2;
  border-radius: 16px;
  padding: 18px 16px;
}

.about-trust-block h3 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin: 0 0 8px;
}

.about-trust-block p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.about-cta-box h2 {
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 10px;
}

.about-cta-box .about-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.static-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.static-stat-card {
  background: #fffaf5;
  border: 1px solid #ffe6d2;
  border-radius: 18px;
  padding: 20px 18px;
  text-align: center;
}

.static-stat-card strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.static-stat-card span {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}

.static-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.static-feature-card {
  background: #fcfcfd;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.static-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.static-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.static-feature-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.static-feature-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.static-prose {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.8;
}

.static-prose > *:first-child {
  margin-top: 0;
}

.static-prose h2 {
  color: var(--text-dark);
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.static-prose h3 {
  color: var(--text-dark);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}

.static-prose p {
  margin: 0 0 16px;
}

.static-section-block {
  padding: 22px 0;
  border-bottom: 1px solid #f0f2f5;
  margin-bottom: 8px;
}

.static-section-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.static-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.static-check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.static-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff1e6;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.static-highlight-box {
  margin-top: 28px;
  padding: 26px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff4eb 0%, #ffffff 100%);
  border: 1px solid #ffd9bd;
}

.static-highlight-box p:last-child {
  margin-bottom: 0;
}

.static-highlight-box .btn {
  margin-top: 14px;
}

.static-terms-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.static-term-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fcfcfd;
}

.static-term-item__num {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
}

.static-term-item h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.static-term-item p {
  margin: 0;
}

.static-refund-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.static-refund-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  background: #fcfcfd;
}

.static-refund-card h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.static-refund-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.static-refund-card--positive {
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
  border-color: #ffd7b8;
}

.static-refund-card--muted {
  background: #f8fafc;
}

.static-sidebar__card,
.static-sidebar__cta {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.static-sidebar__cta {
  margin-top: 16px;
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
}

.static-sidebar__card h2,
.static-sidebar__cta h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 14px;
}

.static-sidebar__cta p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.static-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.static-sidebar__nav a {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  background: #f8fafc;
  transition: background 0.2s ease, color 0.2s ease;
}

.static-sidebar__nav a:hover {
  background: #fff4eb;
  color: var(--primary);
}

.static-sidebar__nav a.is-active {
  background: var(--primary);
  color: var(--white);
}

.static-prose a {
  color: var(--primary);
  font-weight: 600;
}

.static-prose a.btn,
.static-highlight-box a.btn {
  color: var(--white);
  text-decoration: none;
}

.static-prose a.btn-outline,
.static-highlight-box a.btn-outline {
  color: var(--text-dark);
}

.static-prose a.btn:hover,
.static-highlight-box a.btn:hover {
  text-decoration: none;
}

.static-prose a:not(.btn):hover {
  text-decoration: underline;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .static-page-layout--with-sidebar {
    grid-template-columns: 1fr;
  }

  .static-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .static-sidebar__cta {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .static-stats-row,
  .static-feature-grid,
  .static-refund-grid,
  .about-values-grid,
  .about-story-split {
    grid-template-columns: 1fr 1fr;
  }

  .about-story-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .static-page-hero-v2 {
    padding: 28px 0 30px;
  }

  .static-page-hero-v2__inner .section-label,
  .subpage-hero-meta .section-label {
    font-size: 12px;
  }

  .subpage-breadcrumb-wrap {
    margin-top: 8px;
    margin-bottom: 16px;
  }

  .subpage-breadcrumb-wrap .tds-breadcrumb__item {
    font-size: 12px;
  }

  .static-page-card {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .static-stats-row,
  .static-feature-grid,
  .static-refund-grid,
  .about-values-grid,
  .about-trust-blocks,
  .static-sidebar {
    grid-template-columns: 1fr;
  }

  .static-term-item {
    grid-template-columns: 1fr;
  }

  .static-term-item__num {
    width: 44px;
    height: 44px;
  }
}

/* Blog */
.blog-home-section {
  padding-top: 40px;
}

.blog-home-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}

.blog-home-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.blog-grid {
  display: grid;
  gap: 24px;
}

.blog-grid--home {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-grid--listing {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  transform: translateX(-130%);
  opacity: 0;
}

.blog-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(252, 115, 15, 0.35);
  box-shadow:
    0 22px 44px -24px rgba(252, 115, 15, 0.35),
    0 12px 28px -18px rgba(28, 32, 48, 0.25);
}

.blog-card:hover::before {
  opacity: 1;
  animation: tds-card-shine 0.7s ease forwards;
}

@keyframes tds-card-shine {
  to { transform: translateX(130%); }
}

.blog-card__image-wrap {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #fff4eb 0%, #ffe8d6 100%);
  overflow: hidden;
  position: relative;
}

.blog-card__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.18) 100%);
  pointer-events: none;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.blog-card__title {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  margin-bottom: 10px;
}

.blog-card__title a {
  color: var(--text-dark);
}

.blog-card__title a:hover {
  color: var(--primary);
}

.blog-card__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.blog-card__author img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.blog-card__author strong {
  display: block;
  font-size: 14px;
  color: var(--text-dark);
}

.blog-card__author span {
  display: block;
  font-size: 13px;
  color: var(--text-light);
}

.blog-card__link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.blog-card__link:hover {
  text-decoration: none;
  color: var(--primary-dark);
}

.blog-listing-section {
  padding: 8px 0 72px;
}

.blog-listing-intro {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 20px;
  margin-bottom: 28px;
  align-items: stretch;
}

.blog-listing-intro__copy,
.blog-listing-intro__cta {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px 22px;
}

.blog-listing-intro__copy h2,
.blog-listing-intro__cta h2,
.blog-listing-head h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: #111827;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.blog-listing-intro__copy > p,
.blog-listing-intro__cta > p,
.blog-listing-head > p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 16px;
}

.blog-listing-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.blog-listing-topic {
  background: #fffaf5;
  border: 1px solid #ffe0c7;
  border-radius: 14px;
  padding: 14px;
}

.blog-listing-topic h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin: 0 0 6px;
}

.blog-listing-topic p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.blog-listing-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-listing-intro__actions .btn {
  min-height: 42px;
}

.blog-listing-head {
  margin-bottom: 20px;
}

.blog-detail-product-cta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}

.blog-detail-product-cta a {
  color: var(--primary);
  font-weight: 600;
}

.blog-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.blog-pagination {
  margin-top: 36px;
}

.blog-pagination__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.blog-pagination__list a,
.blog-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 600;
}

.blog-pagination__list a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.blog-pagination__current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.blog-detail-hero {
  padding: 40px 0 20px;
}

.blog-detail-page {
  background-color: #FFF0EB;
  background-image: url(../images/home-bg2-top.webp);
  background-position: 5% 0%;
  background-repeat: no-repeat;
}

.tds-breadcrumb {
  margin-bottom: 18px;
}

.tds-breadcrumb__list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.tds-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.tds-breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: #cbd5e1;
  font-weight: 500;
}

.tds-breadcrumb__item a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.tds-breadcrumb__item a:hover {
  color: var(--primary);
}

.tds-breadcrumb__item span {
  color: var(--text-dark);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-detail-hero-v3 {
  padding-top: 34px;
  padding-bottom: 28px;
}

.blog-detail-page .static-page-hero-v2 {
  padding-bottom: 18px;
}

.blog-detail-page .subpage-breadcrumb-wrap {
  margin-bottom: 0;
}

.blog-detail-feature-card {
  margin-bottom: 28px;
}

.blog-detail-hero-v3 .static-page-shell {
  position: relative;
  z-index: 1;
}

.blog-detail-body-v3 {
  padding-top: 0;
}

.blog-detail-body-v3 .blog-detail-main {
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}

.blog-detail-body-v3 .blog-detail-content {
  padding: 38px 42px 44px;
}

.blog-detail-hero-v2 {
  padding: 36px 0 28px;
}

.blog-detail-hero-v2__shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.blog-detail-hero-v2__media {
  position: relative;
  min-height: 360px;
  background: linear-gradient(135deg, #fff4eb 0%, #ffe8d6 100%);
}

.blog-detail-hero-v2__image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.blog-detail-hero-v2__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.blog-detail-hero-v2__content {
  padding: 34px 34px 34px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-detail-hero-v2__content h1 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
}

.blog-detail-hero-v2__excerpt {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.blog-detail-hero-v2__author {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.blog-detail-layout {
  padding: 0 0 56px;
}

.blog-detail-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.blog-detail-main {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.blog-detail-content {
  padding: 34px 36px 40px;
}

.blog-detail-sidebar__card {
  position: sticky;
  top: 104px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.blog-detail-sidebar__card h2 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
}

.blog-detail-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-side-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-decoration: none;
  padding: 8px;
  border-radius: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.blog-side-item:hover {
  background: #fff7f0;
  transform: translateX(2px);
}

.blog-side-item__thumb {
  display: block;
  width: 72px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff4eb;
}

.blog-side-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-side-item__content time {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}

.blog-side-item__content strong {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dark);
}

.blog-detail-sidebar__all {
  display: inline-flex;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.blog-detail-sidebar__all:hover {
  text-decoration: underline;
}

.blog-detail-more {
  padding: 0 0 80px;
}

.blog-detail-more__panel {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f2 100%);
  border: 1px solid #ffe4cf;
  border-radius: 28px;
  padding: 40px 36px 44px;
  box-shadow: var(--shadow-md);
}

.blog-detail-more__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}

.blog-detail-more__head h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  margin: 10px 0 12px;
  letter-spacing: -0.02em;
}

.blog-detail-more__head p {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
}

.blog-grid--related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.blog-card--related {
  border-color: #ffe4cf;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.blog-card--related .blog-card__image-wrap {
  aspect-ratio: 16 / 11;
}

.blog-card--related .blog-card__body {
  padding: 20px 22px 24px;
}

.blog-card--related .blog-card__title {
  font-size: 19px;
  min-height: 52px;
}

.blog-card--minimal .blog-card__excerpt {
  -webkit-line-clamp: 2;
  margin-bottom: 12px;
}

.blog-card--minimal .blog-card__link {
  margin-top: 4px;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.blog-back-link:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .blog-grid--home,
  .blog-grid--listing,
  .blog-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-listing-intro {
    grid-template-columns: 1fr;
  }

  .blog-detail-hero-v2__shell {
    grid-template-columns: 1fr;
  }

  .blog-detail-hero-v2__content {
    padding: 24px;
  }

  .blog-detail-layout__grid {
    grid-template-columns: 1fr;
  }

  .blog-detail-sidebar__card {
    position: static;
  }
}

@media (max-width: 700px) {
  .blog-grid--home,
  .blog-grid--listing,
  .blog-grid--related {
    grid-template-columns: 1fr;
  }

  .blog-listing-topics {
    grid-template-columns: 1fr;
  }

  .blog-detail-more__panel {
    padding: 28px 18px 32px;
    border-radius: 22px;
  }

  .blog-card--related .blog-card__title {
    min-height: 0;
  }

  .blog-detail-content {
    padding: 22px 20px 28px;
  }

  .blog-detail-hero-v2__media,
  .blog-detail-hero-v2__image {
    min-height: 240px;
  }
}

/* Front float stack — WhatsApp + App QR + Scroll top */
.front-float-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.footer {
  position: relative;
  z-index: 50;
}

.footer-sub,
.footer-bottom-bar,
.footer-legal-link {
  position: relative;
  z-index: 51;
  pointer-events: auto;
}

.whatsapp-float {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
  color: #fff;
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  display: block;
}

.app-download-float {
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  pointer-events: none;
}

.app-download-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.app-download-float.is-dismissed {
  display: none;
}

.app-download-float-close {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 12px rgba(252, 115, 15, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.app-download-float-close svg {
  width: 12px;
  height: 12px;
  display: block;
}

.app-download-float-close:hover {
  transform: scale(1.08);
  background: #e86500;
}

.app-download-float-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  max-width: 240px;
  font-family: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-download-float-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.app-download-float-qr {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 4px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.app-download-float-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.app-download-float-text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.scroll-top-btn {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(252, 115, 15, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: #e86500;
  box-shadow: 0 12px 28px rgba(232, 101, 0, 0.4);
}

.scroll-top-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.scroll-top-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.app-download-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-download-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app-download-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.app-download-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  text-align: center;
  transform: scale(0.92) translateY(14px);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.app-download-modal.is-open .app-download-modal-dialog {
  transform: scale(1) translateY(0);
}

.app-download-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 16px;
}

.app-download-modal-logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.app-download-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-download-modal-close svg {
  width: 16px;
  height: 16px;
}

.app-download-modal-close:hover {
  background: var(--primary);
  color: #fff;
}

.app-download-modal-dialog h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}

.app-download-modal-dialog > p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #64748b;
}

.app-download-modal-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 8px 24px rgba(252, 115, 15, 0.15);
}

.app-download-modal-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.app-download-modal-play {
  display: inline-flex;
  justify-content: center;
}

.app-download-modal-play img {
  height: 52px;
  width: auto;
}

.app-download-modal-cta {
  display: inline-flex;
}

@media (max-width: 640px) {
  .front-float-stack {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }

  .app-download-float-card {
    max-width: 210px;
    padding: 8px 12px 8px 8px;
    gap: 10px;
  }

  .app-download-float-qr {
    width: 46px;
    height: 46px;
  }

  .app-download-float-text {
    font-size: 12px;
  }

  .scroll-top-btn {
    width: 44px;
    height: 44px;
  }
}

/* ========== New design block (scoped) ========== */
.nds-block{
  --nds-bg:#fff;--nds-soft:#f6f7f9;--nds-ink:#1c2030;--nds-mute:#5d6477;--nds-line:#e6e8ee;
  --nds-brand:#f26a1b;--nds-brand-d:#d9560c;--nds-brand-t:#fff1e8;
  --nds-green:#1f9d6b;--nds-green-t:#e6f6ef;--nds-blue:#3b6ef5;--nds-blue-t:#e9efff;--nds-grey-t:#eef0f4;
  /* aliases matching source var() names */
  --bg:var(--nds-bg);--soft:var(--nds-soft);--ink:var(--nds-ink);--mute:var(--nds-mute);--line:var(--nds-line);
  --brand:var(--nds-brand);--brand-d:var(--nds-brand-d);--brand-t:var(--nds-brand-t);
  --green:var(--nds-green);--green-t:var(--nds-green-t);--blue:var(--nds-blue);--blue-t:var(--nds-blue-t);--grey-t:var(--nds-grey-t);
  color:var(--ink);
  font:400 16px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;
  background:#fff;
  overflow:hidden;
}
.nds-block *,.nds-block *::before,.nds-block *::after{box-sizing:border-box}
.nds-block img{max-width:100%;height:auto;display:block}
.nds-block .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.nds-block h1,.nds-block h2,.nds-block h3{font-family:"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.15;margin:0;letter-spacing:-.02em;color:var(--ink)}
.nds-block a{color:inherit;text-decoration:none}
.nds-block section{padding:88px 0}
.nds-block ul{list-style:none;margin:0;padding:0}
.nds-block button{font:inherit}
.nds-block .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;border:1.5px solid var(--ink);background:#fff;cursor:pointer;font-size:15px}
.nds-block .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.nds-block .checks{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:12px}
.nds-block .checks li{padding-left:30px;position:relative;color:var(--ink)}
.nds-block .checks li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--green-t);color:var(--green);font-size:12px;line-height:20px;text-align:center;font-weight:700}
.nds-block .sh{max-width:640px;margin-bottom:48px}
.nds-block .sh.h-c,.nds-block .sh.m-c,.nds-block .sh.w-c{margin-left:auto;margin-right:auto;text-align:center}
.nds-block .sh h2{font-size:clamp(28px,4vw,44px);font-weight:800}
.nds-block .sh p{color:var(--mute);font-size:18px;margin:14px 0 0}
.nds-block .lead,.nds-block p.lead{color:var(--mute);font-size:18px;margin:16px 0 0;max-width:46ch}
.nds-block .m-c{text-align:center;margin-left:auto;margin-right:auto}
.nds-block .nds-final-wrap{max-width:1160px;margin:0 auto;padding:0 24px 48px}
.nds-block .final{background:var(--brand);color:#fff;border-radius:28px;padding:64px 48px;margin:0;text-align:center}
.nds-block .final h2{font-size:clamp(30px,4vw,48px);font-weight:800;max-width:18ch;margin:0 auto;color:#fff}
.nds-block .final p{color:#ffe6d6;max-width:46ch;margin:16px auto 28px;font-size:18px}
.nds-block .final .m-play:not(.play-badge-anim){background:transparent;display:inline-flex;padding:0}
.nds-block .banner{padding:24px 0 48px}
.nds-block .banner figure{margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(28,32,48,.35)}
.nds-block .banner img{width:100%;height:auto;display:block}
.nds-block .ic{
  width:56px !important;
  height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center;
  margin-bottom:18px;
  flex:none;
  overflow:hidden;
}
.nds-block .ic svg{
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  display:block;
}
.nds-block .bar{height:10px;border-radius:6px;background:#2d3348;margin-top:10px;overflow:hidden}
.nds-block .bar > i{display:block;height:100%;width:auto;max-width:100%;background:var(--brand);border-radius:6px}
.nds-block .row{display:flex;justify-content:space-between;font-size:14px;color:#c4c9d8;margin-top:16px}
.nds-block .pil{min-width:0}
.nds-block .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);align-items:start}
.nds-block .feat .big .bar{height:10px}
.nds-block .m-bars{height:190px;align-items:end}
.nds-block .m-bars i{width:40%;max-width:24px;display:block;border-radius:6px 6px 0 0}
.nds-block .m-play svg{display:none}
.nds-block .alist i{width:12px;height:12px;border-radius:50%;margin-top:8px;flex:none;display:block}
@media(max-width:900px){
  .nds-block section{padding:56px 0}
  .nds-block .final{padding:44px 28px}
  .nds-block .pgrid{grid-template-columns:1fr 1fr}
  .nds-block .feat{grid-template-columns:1fr}
  .nds-block .steps{grid-template-columns:1fr 1fr;row-gap:36px}
}
@media(max-width:520px){
  .nds-block .pgrid,.nds-block .steps,.nds-block .stats .wrap{grid-template-columns:1fr}
}

/* sourced rules */
.nds-block .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.nds-block .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;border:1.5px solid var(--ink);background:var(--bg);cursor:pointer;font-size:15px;transition:transform .15s,background .15s}
.nds-block .btn:hover{transform:translateY(-2px)}
.nds-block .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.nds-block .btn.primary:hover{background:var(--brand-d)}
.nds-block .hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.nds-block .hero p.lead{font-size:19px;color:var(--mute);max-width:46ch;margin:22px 0 32px}
.nds-block .matrix{background:var(--soft);border:1px solid var(--line);border-radius:24px;padding:18px}
.nds-block .mhead{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mute);margin:0 4px 12px}
.nds-block .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nds-block .q{border-radius:16px;padding:14px;min-height:150px;background:var(--bg);border:1px solid var(--line);border-top-width:4px}
.nds-block .q h3{font-size:16px;display:flex;justify-content:space-between}
.nds-block .q small{display:block;color:var(--mute);font-size:12px;margin:2px 0 10px}
.nds-block .q.do{border-top-color:var(--brand)}
.nds-block .q.sch{border-top-color:var(--green)}
.nds-block .q.del{border-top-color:var(--blue)}
.nds-block .q.eli{border-top-color:#9aa1b2}
.nds-block .chips{display:flex;flex-direction:column;gap:6px}
.nds-block .chip{font:500 13px "DM Sans",sans-serif;text-align:left;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;color:var(--ink);transition:transform .2s,box-shadow .2s}
.nds-block .chip:hover{transform:translateX(3px);box-shadow:0 2px 8px rgba(28,32,48,.12)}
.nds-block .do .chip{background:var(--brand-t)}
.nds-block .sch .chip{background:var(--green-t)}
.nds-block .del .chip{background:var(--blue-t)}
.nds-block .eli .chip{background:var(--grey-t)}
.nds-block .hint{font-size:12.5px;color:var(--mute);margin:12px 4px 0}
.nds-block .stats{border-block:1px solid var(--line);background:var(--soft)}
.nds-block .stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);text-align:left}
.nds-block .stat{padding:34px 24px;border-left:1px solid var(--line)}
.nds-block .stat:first-child{border-left:0;padding-left:0}
.nds-block .stat b{display:block;font:800 40px "Bricolage Grotesque",sans-serif;color:var(--brand)}
.nds-block .stat span{color:var(--mute);font-size:15px}
.nds-block .sh{max-width:640px;margin-bottom:48px}
.nds-block .sh h2{font-size:clamp(30px,4vw,46px);font-weight:800}
.nds-block .sh p{color:var(--mute);font-size:18px;margin:14px 0 0}
.nds-block .feat{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.nds-block .big{background:var(--ink);color:#fff;border-radius:24px;padding:40px;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;min-height:380px}
.nds-block .big h3{font-size:30px}
.nds-block .big p{color:#c4c9d8;max-width:40ch}
.nds-block .bar{height:10px;border-radius:6px;background:#2d3348;margin-top:10px;overflow:hidden}
.nds-block .bar i{display:block;height:100%;background:var(--brand);border-radius:6px}
.nds-block .row{display:flex;justify-content:space-between;font-size:14px;color:#c4c9d8;margin-top:16px}
.nds-block .small{border:1px solid var(--line);border-radius:24px;padding:30px}
.nds-block .small h3{font-size:22px;margin-bottom:8px}
.nds-block .small p{color:var(--mute);margin:0}
.nds-block .small.tint{background:var(--brand-t);border-color:#ffd9c2}
.nds-block .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:2px solid var(--ink)}
.nds-block .step{padding:28px 24px 0 0;position:relative}
.nds-block .step::before{counter-increment:s;content:counter(s);position:absolute;top:-17px;left:0;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font:700 15px/32px "Bricolage Grotesque",sans-serif;text-align:center}
.nds-block .step h3{font-size:20px;margin-top:10px}
.nds-block .step p{color:var(--mute);font-size:15px}
.nds-block .mobile .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.nds-block .phone .g{font:700 18px "Bricolage Grotesque",sans-serif;margin-bottom:14px}
.nds-block .checks{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:12px}
.nds-block .checks li{padding-left:30px;position:relative}
.nds-block .checks li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--green-t);color:var(--green);font-size:12px;line-height:20px;text-align:center;font-weight:700}
.nds-block .faq{max-width:780px}
.nds-block .final{background:var(--brand);color:#fff;border-radius:28px;padding:64px 48px;margin-bottom:96px}
.nds-block .final h2{font-size:clamp(30px,4vw,48px);font-weight:800;max-width:16ch}
.nds-block .final p{color:#ffe6d6;max-width:46ch;margin:16px 0 28px;font-size:18px}
.nds-block .final .btn{background:#fff;border-color:#fff;color:var(--ink)}
.nds-block footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media(max-width:900px){.nds-block nav{display:none}.nds-block .hero .wrap,.nds-block .mobile .wrap,.nds-block .feat{grid-template-columns:1fr}.nds-block .steps{grid-template-columns:1fr 1fr;row-gap:36px}.nds-block .stats .wrap{grid-template-columns:1fr}.nds-block .stat{border-left:0;border-top:1px solid var(--line);padding-left:0}.nds-block .stat:first-child{border-top:0}.nds-block .final{padding:44px 28px}.nds-block section{padding:64px 0}}
@media(max-width:520px){.nds-block .steps{grid-template-columns:1fr}.nds-block .mgrid{grid-template-columns:1fr}}
.nds-block .explain{padding:88px 0}
.nds-block .explain .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.nds-block .photo{margin:0;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(28,32,48,.35);aspect-ratio:1/1}
.nds-block .photo img{width:100%;height:100%;object-fit:cover;display:block}
.nds-block .explain h2{font-size:clamp(30px,4vw,46px);font-weight:800}
.nds-block .explain p.lead2{color:var(--mute);font-size:18px;margin:16px 0 36px;max-width:46ch;line-height:1.55}
.nds-block .explain-grid > div > .lead2,
.nds-block .explain-grid > div > p{margin:14px 0 40px;max-width:46ch;line-height:1.55;color:var(--mute);font-size:18px}
.nds-block .cats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.nds-block .cat{border-radius:16px;padding:16px 18px;color:#fff;cursor:default}
.nds-block .cat b{display:block;font:700 17px "Bricolage Grotesque",sans-serif}
.nds-block .cat span{font-size:14px;opacity:.95}
.nds-block .cat.r{background:#e5484d}
.nds-block .cat.o{background:#f08a0c}
.nds-block .cat.y{background:#f5c60f;color:var(--ink)}
.nds-block .cat.g{background:#1f9d5c}
@media(max-width:900px){.nds-block .explain .wrap{grid-template-columns:1fr}.nds-block .explain{padding:56px 0}}
@media(max-width:520px){.nds-block .cats{grid-template-columns:1fr}}
.nds-block .banner{padding:72px 0 0}
.nds-block .banner figure{margin:0;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(28,32,48,.35)}
.nds-block .banner img{width:100%;height:auto;display:block}
.nds-block .pillars{padding:88px 0}
.nds-block .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.nds-block .pil{padding:32px 28px 0 0}
.nds-block .pil+.pil{padding-left:28px;border-left:1px solid var(--line)}
.nds-block .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
.nds-block .ic svg{width:28px;height:28px}
.nds-block .pil h3{font-size:21px;margin-bottom:6px}
.nds-block .pil p{color:var(--mute);margin:0;font-size:15px}
.nds-block .app .wrap{display:grid;grid-template-columns:0.95fr 1.15fr;gap:40px;align-items:center}
.nds-block .app h2{font-size:clamp(30px,4vw,46px);font-weight:800}
.nds-block .alist{list-style:none;padding:0;margin:28px 0}
.nds-block .alist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.nds-block .alist i{width:12px;height:12px;border-radius:50%;margin-top:8px;flex:none}
.nds-block .alist b{display:block;font:700 18px "Bricolage Grotesque",sans-serif}
.nds-block .alist span{color:var(--mute);font-size:15px}
.nds-block .ov{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:28px}
.nds-block .ov h3{font-size:17px;margin-bottom:12px}
.nds-block .ov div{display:grid;grid-template-columns:96px 1fr 28px;gap:12px;align-items:center;font-size:14px;margin-top:10px;color:var(--mute)}
.nds-block .ov div i{height:8px;border-radius:5px;background:#e3e6ec;overflow:hidden;display:block}
.nds-block .ov div i s{display:block;height:100%;border-radius:5px}
.nds-block .ov div b{color:var(--ink);text-align:right}
.nds-block .appimg{margin:0;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;width:100%;max-width:none;justify-self:stretch;align-self:center}
.nds-block .appimg img{width:100%;max-width:100%;height:auto;aspect-ratio:715 / 770;display:block;margin:0;background:transparent;object-fit:contain}
.nds-block .promise{padding:0 0 96px}
.nds-block .promise .box{border:1px solid var(--line);border-radius:28px;padding:56px 40px;text-align:center;background:linear-gradient(180deg,#fff,var(--soft))}
.nds-block .promise .box img{width:96px;height:96px;border-radius:50%;margin-bottom:20px}
.nds-block .promise h2{font-size:clamp(28px,4vw,44px);font-weight:800;max-width:20ch;margin:0 auto}
.nds-block .promise p{color:var(--mute);font-size:18px;margin:14px auto 28px;max-width:48ch}
.nds-block .promise .btn{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:900px){.nds-block .pgrid{grid-template-columns:1fr 1fr}.nds-block .pil{padding:28px 20px 0 0}.nds-block .pil+.pil{padding-left:0;border-left:0}.nds-block .pil:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}.nds-block .app .wrap{grid-template-columns:1fr}.nds-block .banner{padding-top:48px}.nds-block .pillars{padding:56px 0}.nds-block .promise .box{padding:40px 24px}}
@media(max-width:520px){.nds-block .pgrid{grid-template-columns:1fr}.nds-block .pil:nth-child(even){padding-left:0;border-left:0}.nds-block .ov div{grid-template-columns:84px 1fr 24px}}
.nds-block .acts .btn{padding:11px 20px;border-radius:999px}
.nds-block .btn.login{border-color:#f6c8ad;color:var(--brand);background:#fff}
.nds-block .btn.lg{padding:16px 30px;border-radius:999px;border-color:#f0e1d8;background:#fff}
.nds-block .btn.primary.lg{border-color:var(--brand);background:var(--brand)}
.nds-block .fc{position:absolute;display:flex;gap:12px;align-items:center;text-align:left;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 14px 34px -14px rgba(28,32,48,.3);border:1px solid var(--line);z-index:2}
.nds-block .fc i{width:12px;height:12px;border-radius:50%;flex:none}
.nds-block .fc b{display:block;font:700 15px "Bricolage Grotesque",sans-serif}
.nds-block .fc span{font-size:13px;color:var(--mute)}
@media(max-width:900px){.nds-block .fc{display:none}.nds-block .top{padding-top:130px}}
@media(max-width:640px){.nds-block .btn.login{display:none}.nds-block .pn{padding-left:14px}}
.nds-block .logo,.nds-block .acts .btn,.nds-block .pill b{white-space:nowrap}
@media(max-width:640px){.nds-block .logo{font-size:14px}.nds-block .logo img{width:28px;height:28px}.nds-block .acts .btn{padding:9px 14px;font-size:14px}.nds-block .go{display:none}.nds-block .pn{padding:8px 8px 8px 12px}.nds-block .pill{font-size:12.5px;padding-right:12px;text-align:left}.nds-block .top .sub{font-size:16px}.nds-block .btn.lg{padding:14px 24px}}
.nds-block .m-c{text-align:center;margin-left:auto;margin-right:auto}
.nds-block .m-soft{background:var(--soft)}
.nds-block .m-peach{background:#fff6f1}
.nds-block .m-ph{width:262px;margin:0 auto;border:7px solid var(--ink);border-radius:38px;background:#fff;padding:26px 12px 14px;box-shadow:0 30px 60px -26px rgba(28,32,48,.4);position:relative;text-align:left}
.nds-block .m-ph::before{content:"";position:absolute;top:8px;left:50%;width:70px;height:7px;margin-left:-35px;border-radius:6px;background:var(--ink)}
.nds-block .m-ph.sm{width:238px;min-height:380px}
.nds-block .m-top{display:flex;align-items:center;gap:8px;font:700 14px "Bricolage Grotesque",sans-serif;margin-bottom:10px}
.nds-block .m-lg{width:20px;height:20px;border-radius:50%;background:conic-gradient(#e5484d 0 25%,#f08a0c 0 50%,#f5c60f 0 75%,#1f9d5c 0)}
.nds-block .m-hi{margin:0 0 8px;font-weight:600;font-size:13px}
.nds-block .m-lb{margin:12px 0 6px;font-weight:600;font-size:12px}
.nds-block .m-t4,.nds-block .m-c4{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.nds-block .m-t4 div{border:1px solid var(--line);border-radius:10px;padding:8px 9px}
.nds-block .m-t4 small,.nds-block .m-c4 small{display:block;font-size:10px;color:var(--mute)}
.nds-block .m-t4 b{font:700 18px "Bricolage Grotesque",sans-serif}
.nds-block .m-c4 div{border-radius:10px;padding:9px 10px;color:#fff;min-height:62px}
.nds-block .m-c4 small{color:inherit;opacity:.95;font-size:11px;font-weight:600}
.nds-block .m-c4 b{font:700 20px "Bricolage Grotesque",sans-serif;display:block;margin-top:6px}
.nds-block .m-nav{display:flex;justify-content:space-around;margin-top:14px;padding:8px;border-radius:18px;background:var(--soft)}
.nds-block .m-nav i{width:22px;height:22px;border-radius:50%;background:#dfe3ea}
.nds-block .m-nav i.on{background:var(--brand)}
.nds-block .m-stage{display:grid;grid-template-columns:1fr 262px 1fr;gap:44px;align-items:center}
.nds-block .m-side{display:grid;gap:34px}
.nds-block .m-l .m-co{text-align:right}
.nds-block .m-co i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}
.nds-block .m-l .m-co i{margin:0 0 0 8px;float:right;margin-top:7px}
.nds-block .m-co b{font:700 19px "Bricolage Grotesque",sans-serif}
.nds-block .m-co span{display:block;color:var(--mute);font-size:15px;margin-top:4px}
.nds-block .m-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.nds-block .m-step{text-align:center}
.nds-block .m-step h3{font-size:20px;margin-bottom:18px;display:flex;gap:10px;justify-content:center;align-items:center}
.nds-block .m-step h3 s{text-decoration:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:15px;line-height:30px}
.nds-block .m-fld{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;margin-bottom:10px}
.nds-block .m-fld small{display:block;color:var(--mute);font-size:10px}
.nds-block .m-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.nds-block .m-chips span{font-size:11px;font-weight:600;border-radius:999px;padding:5px 10px;background:var(--soft);color:var(--mute)}
.nds-block .m-chips span.on{background:#e5484d;color:#fff}
.nds-block .m-btn{display:block;text-align:center;background:var(--brand);color:#fff;border-radius:12px;padding:11px;font-weight:600;font-size:13px;margin-top:14px}
.nds-block .m-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:13px;font-weight:500}
.nds-block .m-row.on{border-color:var(--brand);background:var(--brand-t)}
.nds-block .m-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;flex:none}
.nds-block .m-row em{margin-left:auto;font-style:normal;color:var(--brand);font-weight:700}
.nds-block .m-ok{width:64px;height:64px;border-radius:50%;background:var(--green-t);color:var(--green);display:grid;place-items:center;font-size:30px;font-weight:700;margin:26px auto 12px}
.nds-block .m-sum{border:1px solid var(--line);border-radius:12px;padding:12px;font-size:12px;color:var(--mute);margin-top:12px}
.nds-block .m-sum b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.nds-block .m-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.nds-block .m-2 h2{font-size:clamp(30px,4vw,44px);font-weight:800}
.nds-block .m-2 .lead{color:var(--mute);font-size:18px;margin:16px 0 0;max-width:46ch}
.nds-block .m-nf{display:grid;gap:12px;max-width:440px;margin:0 auto;width:100%}
.nds-block .m-n{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 12px 30px -20px rgba(28,32,48,.3)}
.nds-block .m-n:nth-child(odd){margin-left:24px}
.nds-block .m-n:nth-child(even){margin-right:24px}
.nds-block .m-n .ic2{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.nds-block .m-n b{display:block;font-size:15px}
.nds-block .m-n span{font-size:13px;color:var(--mute)}
.nds-block .m-n u{margin-left:auto;text-decoration:none;font-size:11px;font-weight:700;color:var(--brand);background:var(--brand-t);border-radius:999px;padding:3px 9px}
.nds-block .m-tabs{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line);margin-bottom:40px}
.nds-block .m-tabs button{font:600 15px "DM Sans",sans-serif;border:0;background:none;border-radius:999px;padding:10px 22px;cursor:pointer;color:var(--mute)}
.nds-block .m-tabs button[aria-selected=true]{background:var(--brand);color:#fff}
.nds-block .m-role{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:center;text-align:left;max-width:860px;margin:0 auto}
.nds-block .m-role h3{font-size:28px;margin-bottom:10px}
.nds-block .m-role p{color:var(--mute);margin:0 0 18px}
.nds-block .m-role ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nds-block .m-role li{padding-left:28px;position:relative}
.nds-block .m-role li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:700}
.nds-block .m-tk{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;font-size:13px;font-weight:500;display:flex;justify-content:space-between;gap:8px;align-items:center}
.nds-block .m-tk em{font-style:normal;font-size:10px;font-weight:700;border-radius:999px;padding:3px 8px;color:#fff;white-space:nowrap}
.nds-block .m-chart{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px}
.nds-block .m-chart h3{font-size:18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.nds-block .m-chart h3 span{font:500 13px "DM Sans",sans-serif;color:var(--mute)}
.nds-block .m-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;height:190px;align-items:end;border-bottom:1px solid var(--line)}
.nds-block .m-bars div{display:flex;gap:4px;align-items:end;justify-content:center;height:100%}
.nds-block .m-bars i{display:block;width:40%;border-radius:6px 6px 0 0}
.nds-block .m-days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;text-align:center;font-size:12px;color:var(--mute);margin-top:8px}
.nds-block .m-leg{display:flex;gap:18px;font-size:13px;color:var(--mute);margin-top:14px}
.nds-block .m-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.nds-block .m-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;border-top:1px solid var(--line)}
.nds-block .m-kpi div{padding:18px 16px 0 0}
.nds-block .m-kpi div+div{padding-left:16px;border-left:1px solid var(--line)}
.nds-block .m-kpi b{display:block;font:800 36px "Bricolage Grotesque",sans-serif}
.nds-block .m-kpi span{font-size:14px;color:var(--mute)}
.nds-block .m-inst{padding:0 0 96px}
.nds-block .m-box{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;border-radius:32px;background:linear-gradient(135deg,#ffe3d4,#fff3ee 60%);border:1px solid #f6d6c4;padding:56px 56px 0;overflow:hidden}
.nds-block .m-box h2{font-size:clamp(30px,4vw,46px);font-weight:800;max-width:14ch}
.nds-block .m-box p{color:var(--mute);font-size:18px;margin:16px 0 26px;max-width:42ch}
.nds-block .m-play:not(.play-badge-anim){display:inline-flex;align-items:center;justify-content:center;background:transparent;padding:0;border:0}
.nds-block .m-play img{height:52px;width:auto;display:block}
.nds-block .m-play.play-badge-anim img{height:52px;width:auto}
.nds-block .m-play svg,.nds-block .m-play small,.nds-block .m-play b{display:none}
.nds-block .m-ass{display:flex;gap:20px;flex-wrap:wrap;margin:22px 0 56px;font-size:14px;color:var(--mute)}
.nds-block .m-ass span::before{content:"\2713 ";color:var(--green);font-weight:700}
.nds-block .m-box .m-ph{margin-bottom:-120px}
@media(max-width:900px){.nds-block .m-stage{grid-template-columns:1fr;gap:32px}.nds-block .m-side{grid-template-columns:1fr 1fr;gap:20px}.nds-block .m-l .m-co{text-align:left}.nds-block .m-l .m-co i{float:none;margin:0 8px 0 0}.nds-block .m-stage .m-ph{order:-1}.nds-block .m-flow{grid-template-columns:1fr;gap:44px}.nds-block .m-2,.nds-block .m-role,.nds-block .m-box{grid-template-columns:1fr;gap:36px}.nds-block .m-box{padding:40px 24px 0}.nds-block .m-ass{margin-bottom:36px}.nds-block .m-box .m-ph{margin-bottom:-150px}.nds-block .m-role{text-align:left}}
@media(max-width:520px){.nds-block .m-side{grid-template-columns:1fr}.nds-block .m-tabs{display:flex;width:100%}.nds-block .m-tabs button{flex:1;padding:10px 6px;font-size:14px}.nds-block .m-kpi b{font-size:28px}.nds-block .m-n:nth-child(n){margin:0}}
.nds-block .w-c{text-align:center;margin-left:auto;margin-right:auto}
.nds-block .w-stage{position:relative;max-width:1060px;margin:0 auto}
.nds-block .w-br{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 40px 80px -36px rgba(28,32,48,.45)}
.nds-block .w-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.nds-block .w-bar i{width:11px;height:11px;border-radius:50%;background:#d6dae2}
.nds-block .w-bar span{flex:1;max-width:340px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 12px;font-size:12.5px;color:var(--mute);text-align:center}
.nds-block .w-shot{position:relative}
.nds-block .w-shot img{display:block;width:100%;height:auto}
.nds-block .w-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(rgba(255,255,255,0),#fff)}
.nds-block .w-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.nds-block .w-q{
  --wq-accent:#fc730f;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    border-color .3s ease;
}
.nds-block .w-q::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:opacity .2s ease;
  z-index:2;
}
.nds-block .w-q::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--wq-accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:3;
}
.nds-block .w-grid > .w-q:nth-child(1){--wq-accent:#e5484d}
.nds-block .w-grid > .w-q:nth-child(2){--wq-accent:#f08a0c}
.nds-block .w-grid > .w-q:nth-child(3){--wq-accent:#e6b400}
.nds-block .w-grid > .w-q:nth-child(4){--wq-accent:#1f9d5c}
@media (hover:hover) and (pointer:fine){
  .nds-block .w-q:hover{
    transform:translateY(-8px);
    border-color:var(--wq-accent);
    box-shadow:
      0 22px 44px -24px rgba(28,32,48,.28),
      0 0 0 1px color-mix(in srgb,var(--wq-accent) 35%,transparent);
  }
  .nds-block .w-q:hover::before{
    opacity:1;
    animation:tds-wq-shine .7s ease forwards;
  }
  .nds-block .w-q:hover::after{transform:scaleY(1)}
  .nds-block .w-q:hover .w-qh em{
    transform:scale(1.1) rotate(-6deg);
    box-shadow:0 8px 18px -10px color-mix(in srgb,var(--wq-accent) 50%,transparent);
  }
  .nds-block .w-q:hover .w-qf a{letter-spacing:.02em}
  .nds-block .w-q:hover .w-t{
    border-color:color-mix(in srgb,var(--wq-accent) 28%,#e6e8ee);
    transform:translateX(2px);
  }
}
@keyframes tds-wq-shine{to{transform:translateX(120%)}}
.nds-block .w-qh{padding:18px 20px;border-bottom:1px solid var(--line);position:relative}
.nds-block .w-qh em{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.nds-block .w-t{transition:border-color .3s ease,transform .3s ease}
.nds-block .w-qf a{transition:letter-spacing .25s ease,color .25s ease}
.nds-block .w-tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:3px 9px}
.nds-block .w-qh b{display:block;font:700 18px "Bricolage Grotesque",sans-serif;margin-top:10px}
.nds-block .w-qh span{font-size:13px;color:var(--mute)}
.nds-block .w-qh em{position:absolute;right:20px;top:18px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px;font-weight:700}
.nds-block .w-ts{padding:14px 20px 6px}
.nds-block .w-ts small{font-size:12px;font-weight:600;color:var(--mute)}
.nds-block .w-t{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px}
.nds-block .w-t b{display:block;font-size:14px}
.nds-block .w-t span{font-size:12px;color:var(--mute)}
.nds-block .w-t u{text-decoration:none;font-size:11px;font-weight:700;color:#e5484d;background:#fdecec;border-radius:999px;padding:3px 9px;flex:none}
.nds-block .w-qf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 20px;font-size:12px}
.nds-block .w-qf span{border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-right:6px;color:var(--mute);display:inline-block}
.nds-block .w-qf a{color:var(--brand);font-weight:700}
.nds-block .w-side{width:100%;max-width:280px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 14px;box-shadow:0 30px 60px -34px rgba(28,32,48,.35)}
.nds-block .w-side small{display:block;font-size:12px;color:var(--mute);font-weight:600;margin:14px 8px 6px}
.nds-block .w-it{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:500;color:#3a4152;transition:background .2s,color .2s}
.nds-block .w-it.on{background:var(--brand-t);color:var(--brand);font-weight:700}
.nds-block .w-it i{width:8px;height:8px;border-radius:50%}
.nds-block .w-it em{margin-left:auto;background:#e5484d;color:#fff;font-style:normal;font-size:11px;border-radius:999px;padding:1px 7px;font-weight:700}
.nds-block .w-fl{display:grid;gap:10px;margin-top:28px}
.nds-block .w-fl button{font:inherit;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.nds-block .w-fl button b{display:block;font:700 17px "Bricolage Grotesque",sans-serif}
.nds-block .w-fl button span{color:var(--mute);font-size:14px}
.nds-block .w-fl button[aria-pressed=true]{border-color:var(--brand);background:var(--brand-t)}
.nds-block .w-sync{position:relative;max-width:940px;margin:0 auto;padding-bottom:70px}
.nds-block .w-sync .w-br{width:80%}
.nds-block .w-sync .m-ph{position:absolute;right:0;bottom:0}
.nds-block .w-st{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px;background:var(--soft)}
.nds-block .w-st div{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;padding:12px 14px;position:relative}
.nds-block .w-st small{display:block;font-size:12px;color:var(--mute)}
.nds-block .w-st b{font:700 26px "Bricolage Grotesque",sans-serif}
.nds-block .w-st em{position:absolute;right:12px;top:12px;font-style:normal;font-size:10px;font-weight:700;background:#f1e8e3;color:var(--mute);border-radius:6px;padding:2px 7px}
.nds-block .w-sy{position:absolute;left:62%;top:34%;z-index:2;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;box-shadow:0 12px 30px -14px rgba(28,32,48,.35)}
.nds-block .w-sy::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:8px}
.nds-block .w-3{display:grid;grid-template-columns:repeat(3,1fr);max-width:940px;margin:56px auto 0;border-top:1px solid var(--line);text-align:left}
.nds-block .w-3 div{padding:24px 24px 0 0}
.nds-block .w-3 div+div{padding-left:24px;border-left:1px solid var(--line)}
.nds-block .w-3 b{display:block;font:700 19px "Bricolage Grotesque",sans-serif;margin-bottom:4px}
.nds-block .w-3 span{color:var(--mute);font-size:15px}
@media(max-width:900px){.nds-block .w-grid{grid-template-columns:1fr}.nds-block .w-sync{padding-bottom:0}.nds-block .w-sync .w-br{width:100%}.nds-block .w-sync .m-ph{position:static;margin-top:28px}.nds-block .w-sy{position:static;display:inline-block;margin-top:20px}.nds-block .w-3{grid-template-columns:1fr}.nds-block .w-3 div,.nds-block .w-3 div+div{padding:20px 0 0;border-left:0}}
.nds-block .w-chips{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:-26px;position:relative;z-index:2}
.nds-block .w-chips .fc{position:static;display:flex}
.nds-block .w-sync .w-br{width:70%}
.nds-block .w-sy{left:0;top:auto;bottom:14px}
@media(max-width:900px){.nds-block .w-sync .w-br{width:100%}.nds-block .w-chips{margin-top:20px}}
.nds-block .x-pad{padding:24px}
.nds-block .x-h{font:700 20px "Bricolage Grotesque",sans-serif;margin:0 0 4px}
.nds-block .x-sub{font-size:13px;color:var(--mute);margin:0 0 6px}
.nds-block .x-lb{display:block;font-size:12px;font-weight:600;color:var(--mute);margin:14px 0 6px}
.nds-block .x-in{width:100%;font:500 14px "DM Sans",sans-serif;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink)}
.nds-block .x-in:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.nds-block .x-cr{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.nds-block .x-2c{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nds-block .x-qs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nds-block .x-qp{font:inherit;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;gap:10px;align-items:center;transition:border-color .2s,background .2s}
.nds-block .x-qp i{width:10px;height:10px;border-radius:50%;flex:none}
.nds-block .x-qp b{display:block;font-size:14px}
.nds-block .x-qp span{font-size:12px;color:var(--mute)}
.nds-block .x-qp[aria-pressed=true]{border-color:var(--brand);background:var(--brand-t)}
.nds-block .x-go{margin-top:20px;border:0;background:var(--brand);color:#fff;font:600 15px "DM Sans",sans-serif;border-radius:12px;padding:13px 22px;cursor:pointer;width:100%}
.nds-block .x-go:hover{background:var(--brand-d)}
.nds-block .x-pvw{position:sticky;top:96px}
.nds-block .x-pvt{font-size:13px;font-weight:600;color:var(--mute);margin:0 0 10px}
.nds-block .x-pv{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(28,32,48,.4)}
.nds-block .x-pvh{padding:16px 18px}
.nds-block .x-pvh b{display:block;margin-top:10px;font:700 20px "Bricolage Grotesque",sans-serif;overflow-wrap:anywhere}
.nds-block .x-tg{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px}
.nds-block .x-pvb{padding:6px 18px 14px}
.nds-block .x-pvr{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.nds-block .x-pvr:last-child{border:0}
.nds-block .x-pvr span{color:var(--mute)}
.nds-block .x-pill{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;display:inline-block;white-space:nowrap}
.nds-block .x-tb{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.nds-block .x-fl{display:flex;gap:6px;flex-wrap:wrap}
.nds-block .x-fl button{font:600 13px "DM Sans",sans-serif;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--mute)}
.nds-block .x-fl button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.nds-block .x-se{max-width:220px}
.nds-block .x-tbl{overflow-x:auto}
.nds-block .x-tbl table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;text-align:left}
.nds-block .x-tbl th{font-size:12px;color:var(--mute);font-weight:600;padding:12px 20px;background:var(--soft)}
.nds-block .x-tbl td{padding:13px 20px;border-top:1px solid var(--line)}
.nds-block .x-own{display:flex;align-items:center;gap:8px}
.nds-block .x-ct{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
.nds-block .x-ft{padding:12px 20px;font-size:13px;color:var(--mute);border-top:1px solid var(--line)}
.nds-block .x-life{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 30px 60px -36px rgba(28,32,48,.35)}
.nds-block .x-life .x-tc{margin-bottom:8px}
.nds-block .x-life .x-go{margin-top:22px}
.nds-block .x-pvb .x-pvr{min-height:42px;align-items:center}
.nds-block .x-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-bottom:22px}
.nds-block .x-steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:3px;background:var(--line)}
.nds-block .x-sp{position:relative;text-align:center;font-size:12.5px;color:var(--mute);font-weight:500}
.nds-block .x-sp i{display:block;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--line);margin:0 auto 8px;position:relative;z-index:1;transition:border-color .25s,background .25s}
.nds-block .x-sp.done i{background:var(--green);border-color:var(--green)}
.nds-block .x-sp.on i{border-color:var(--brand);background:var(--brand-t)}
.nds-block .x-sp.on{color:var(--ink);font-weight:700}
.nds-block .x-tc{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.nds-block .x-tc b{display:block}
.nds-block .x-tc span{font-size:13px;color:var(--mute)}
.nds-block .x-lg{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink)}
.nds-block .x-lg li{display:flex;gap:10px;align-items:flex-start}
.nds-block .x-lg li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:7px;flex:none}
@media(max-width:900px){.nds-block .x-cr{grid-template-columns:1fr}.nds-block .x-pvw{position:static}}
@media(max-width:520px){.nds-block .x-2c,.nds-block .x-qs{grid-template-columns:1fr}.nds-block .x-sp{font-size:11px}.nds-block .x-life{padding:18px}}
.nds-block .m-pc{text-align:center;margin-top:52px}
.nds-block .final .m-play:not(.play-badge-anim){background:transparent;padding:0}


/* ========== Landing layout polish (unified sections) ========== */
.hero {
  margin-bottom: 0;
  padding-bottom: 0;
}

.tds-m-view {
  background: #fff;
  padding-top: 72px;
}

.tds-m-flow-sec {
  background: #f6f7f9;
}

.tds-m-view .section-header,
.tds-m-flow-sec .section-header {
  margin-bottom: 40px;
}

.tds-m-pc {
  margin-top: 40px;
}

.nds-block {
  background: #fff;
  overflow: visible;
}

.nds-block #w-dash {
  background: #fff;
}

.nds-block .nds-section,
.nds-block > section {
  padding: 80px 0;
}

.nds-block .wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.nds-block .section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.nds-block .section-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  margin: 8px 0 12px;
  letter-spacing: -0.03em;
  color: #111827;
}

.nds-block .section-header p {
  color: var(--text-muted);
  font-size: 17px;
  margin: 0;
}

.nds-block .section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}

.nds-block .m-soft { background: #f6f7f9; }
.nds-block .m-peach { background: #fff6f1; }

.nds-block .explain-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}

.nds-block .explain-grid > div h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin: 8px 0 16px;
}

.nds-block .app-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 40px;
  align-items: center;
}

.nds-block .app-grid > div > h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin: 8px 0 8px;
}

.nds-block .m-2 > div > h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin: 8px 0 14px;
}

.nds-block .stats {
  border-block: 1px solid var(--nds-line, #e6e8ee);
  background: #f6f7f9;
}

.nds-block .stats .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
}

.nds-block .stat {
  padding: 40px 24px;
  border-left: 1px solid var(--nds-line, #e6e8ee);
}

.nds-block .stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.nds-block .stat b {
  display: block;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.nds-block .stat span {
  color: var(--text-muted);
  font-size: 15px;
}

.nds-block.nds-app-download {
  background: #fff;
  padding: 0;
}

.nds-block.nds-app-download .m-inst {
  padding: 48px 24px 64px;
  background: #fff;
}

.nds-block.nds-app-download .wrap {
  max-width: var(--max-width);
}

.nds-block .m-inst {
  padding: 48px 0 96px;
  background: transparent;
}

.nds-block .m-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: end;
  border-radius: 32px;
  background: linear-gradient(135deg, #ffe3d4, #fff3ee 60%);
  border: 1px solid #f6d6c4;
  padding: 56px 56px 0;
  overflow: hidden;
}

.nds-block .m-box h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  max-width: 14ch;
  margin: 8px 0 0;
}

.nds-block .m-box > div > p {
  color: var(--text-muted);
  font-size: 18px;
  margin: 16px 0 26px;
  max-width: 42ch;
}

.nds-block .m-box .m-ph {
  margin-bottom: -24px;
  justify-self: center;
}

.nds-block .m-play.play-badge-anim {
  color: inherit;
}

.nds-block .m-play:not(.play-badge-anim) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.nds-block .m-play:not(.play-badge-anim):hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.nds-block .m-play img {
  height: 52px;
  width: auto;
  display: block;
}

.nds-block .m-play.play-badge-anim img {
  height: 52px;
  width: auto;
}

.nds-block .w-stage {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 8px;
}

.nds-block .w-chips {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -32px;
  position: relative;
  z-index: 3;
}

.nds-block .w-chips .fc {
  position: static;
  display: flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 14px 34px -14px rgba(28, 32, 48, 0.3);
}

.nds-block .m-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.nds-block .m-role {
  max-width: 860px;
  margin: 0 auto;
}

.nds-block .pgrid {
  max-width: 1000px;
  margin: 0 auto;
}

.nds-block .steps {
  max-width: 1000px;
  margin: 0 auto;
}

.nds-block .w-grid {
  max-width: 1000px;
  margin: 0 auto;
}

.footer {
  margin-top: 0;
}

@media (max-width: 900px) {
  .nds-block .explain-grid,
  .nds-block .app-grid,
  .nds-block .m-box {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .nds-block .m-box {
    padding: 40px 24px 0;
    text-align: center;
  }

  .nds-block .m-box h2 {
    max-width: none;
  }

  .nds-block .m-box > div > p {
    margin-left: auto;
    margin-right: auto;
  }

  .nds-block .m-box .m-ph {
    margin-bottom: -40px;
  }

  .nds-block .stats .wrap {
    grid-template-columns: 1fr;
  }

  .nds-block .stat {
    border-left: 0;
    border-top: 1px solid var(--nds-line, #e6e8ee);
    padding-left: 0;
  }

  .nds-block .stat:first-child {
    border-top: 0;
  }

  .nds-block .nds-section,
  .nds-block > section {
    padding: 56px 0;
  }

  .tds-m-view,
  .tds-m-flow-sec {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ========== Home page motion (modern, light, responsive) ========== */
@keyframes tds-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes tds-hero-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content > * {
  opacity: 0;
  animation: tds-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.14s; }
.hero-content > *:nth-child(3) { animation-delay: 0.24s; }
.hero-content > *:nth-child(4) { animation-delay: 0.34s; }

.hero-stage-visual {
  opacity: 0;
  animation: tds-hero-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

.tds-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.tds-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.tds-reveal-left {
  transform: translateX(-28px);
}

.tds-reveal-right {
  transform: translateX(28px);
}

.tds-reveal-left.is-in,
.tds-reveal-right.is-in {
  transform: translateX(0);
}

.tds-reveal-scale {
  transform: translateY(18px) scale(0.97);
}

.tds-reveal-scale.is-in {
  transform: translateY(0) scale(1);
}

.btn-hero,
.btn-get-started,
.btn-primary,
.nds-block .btn.primary {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-hero:hover,
.btn-get-started:hover,
.btn-primary:hover,
.nds-block .btn.primary:hover {
  transform: translateY(-2px);
}

.nds-block .step,
.nds-block .alist li,
.nds-block .ov,
.convert-feature-blocks > div,
.faq details,
.blog-card,
.tds-m-co,
.stat {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nds-block .step:hover,
  .blog-card:hover,
  .tds-m-co:hover,
  .convert-feature-blocks > div:hover {
    transform: translateY(-4px);
  }
}

/* --- Trending extras: orbs, shimmer, shine, tilt, bars --- */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  animation: tds-orb-drift 12s ease-in-out infinite alternate;
}

.hero-orb--1 {
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  left: -8%;
  top: 8%;
  background: radial-gradient(circle, rgba(252, 115, 15, 0.35), transparent 70%);
}

.hero-orb--2 {
  width: min(360px, 60vw);
  height: min(360px, 60vw);
  right: -6%;
  top: 18%;
  background: radial-gradient(circle, rgba(255, 180, 120, 0.4), transparent 70%);
  animation-delay: -4s;
  animation-duration: 15s;
}

.hero-orb--3 {
  width: min(280px, 50vw);
  height: min(280px, 50vw);
  left: 40%;
  bottom: 4%;
  background: radial-gradient(circle, rgba(255, 200, 160, 0.35), transparent 70%);
  animation-delay: -7s;
  animation-duration: 18s;
}

@keyframes tds-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18px, -22px) scale(1.08); }
}

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

.hero .text-primary,
.section-header .text-primary,
.faq-intro .text-primary,
.convert-content .text-primary {
  background: linear-gradient(110deg, #fc730f 0%, #ff9a4a 42%, #fc730f 58%, #e85d00 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tds-shimmer 4.5s ease-in-out infinite;
}

@keyframes tds-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.section-label {
  position: relative;
}

.section-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transform: scaleX(0.35);
  opacity: 0.7;
  animation: tds-label-pulse 2.8s ease-in-out infinite;
}

@keyframes tds-label-pulse {
  0%, 100% { transform: scaleX(0.35); opacity: 0.45; }
  50% { transform: scaleX(1); opacity: 1; }
}

.btn-hero.btn-primary,
.btn-get-started,
.btn-primary,
.nds-block .btn.primary {
  position: relative;
  overflow: hidden;
}

.btn-hero.btn-primary::after,
.btn-get-started::after,
.btn-primary::after,
.nds-block .btn.primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.btn-hero.btn-primary:hover::after,
.btn-get-started:hover::after,
.btn-primary:hover::after,
.nds-block .btn.primary:hover::after {
  animation: tds-shine 0.75s ease forwards;
}

@keyframes tds-shine {
  to { left: 140%; }
}

.nds-block .ov div i s {
  width: 0 !important;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.nds-block .ov.is-bars-in div i s {
  width: var(--bar-w, 0%) !important;
}

.stat b {
  font-variant-numeric: tabular-nums;
}

.tds-tilt {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.hero-badge {
  box-shadow: 0 0 0 0 rgba(252, 115, 15, 0.25);
  animation: tds-badge-glow 2.6s ease-in-out infinite;
}

@keyframes tds-badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 115, 15, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(252, 115, 15, 0); }
}

.faq-item,
.nds-block .step,
.blog-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .faq-item:hover,
  .nds-block .step:hover {
    box-shadow: 0 16px 36px -22px rgba(28, 32, 48, 0.35);
  }

  .nds-block .appimg.tds-tilt:hover,
  .hero-stage-visual.tds-tilt:hover {
    /* tilt applied via JS */
  }
}

@media (max-width: 900px) {
  .tds-reveal,
  .tds-reveal-left,
  .tds-reveal-right,
  .tds-reveal-scale {
    transform: translateY(18px);
  }

  .hero-content > *,
  .hero-stage-visual {
    animation-duration: 0.55s;
  }

  .hero-orb {
    opacity: 0.35;
    filter: blur(48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fc,
  .hero-content > *,
  .hero-stage-visual,
  .hero-orb,
  .hero .text-primary,
  .section-header .text-primary,
  .faq-intro .text-primary,
  .convert-content .text-primary,
  .section-label::after,
  .hero-badge {
    animation: none !important;
  }

  .hero-content > *,
  .hero-stage-visual,
  .tds-reveal,
  .tds-reveal-left,
  .tds-reveal-right,
  .tds-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nds-block .ov div i s {
    width: var(--bar-w, 0%) !important;
    transition: none !important;
  }

  .btn-hero:hover,
  .btn-get-started:hover,
  .btn-primary:hover,
  .nds-block .btn.primary:hover,
  .nds-block .step:hover,
  .blog-card:hover,
  .tds-m-co:hover,
  .convert-feature-blocks > div:hover {
    transform: none !important;
  }

  .btn-hero.btn-primary::after,
  .btn-get-started::after,
  .btn-primary::after,
  .nds-block .btn.primary::after {
    display: none;
  }

  .hero .text-primary,
  .section-header .text-primary,
  .faq-intro .text-primary,
  .convert-content .text-primary {
    background: none;
    color: var(--primary);
    -webkit-background-clip: unset;
    background-clip: unset;
  }
}

/* ========== Home fancy hovers (varied per section) ========== */
@media (hover: hover) and (pointer: fine) {
  /* 1) Matrix category pills — scale + glow */
  .nds-block .cat {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, filter 0.3s ease;
  }
  .nds-block .cat.r:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 32px -14px rgba(229, 72, 77, 0.55);
  }
  .nds-block .cat.o:hover {
    transform: translateY(-5px) rotate(-1deg);
    box-shadow: 0 16px 32px -14px rgba(240, 138, 12, 0.5);
  }
  .nds-block .cat.y:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 16px 32px -14px rgba(245, 198, 15, 0.55);
  }
  .nds-block .cat.g:hover {
    transform: translateY(-5px) rotate(1deg);
    box-shadow: 0 16px 32px -14px rgba(31, 157, 92, 0.5);
  }

  /* 2) Matrix team board quadrants — lift + soft border */
  .nds-block .q {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.3s ease;
  }
  .nds-block .q:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px -22px rgba(28, 32, 48, 0.35);
    background: #fff;
  }
  .nds-block .chip {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .nds-block .chip:hover {
    transform: translateX(6px) scale(1.02);
    box-shadow: 0 6px 16px -8px rgba(28, 32, 48, 0.25);
  }

  /* 3) Floating feature chips (New task / Live counts) — bounce shadow */
  .nds-block .fc,
  .nds-block .w-chips .fc {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  }
  .nds-block .fc:hover,
  .nds-block .w-chips .fc:hover {
    transform: translateY(-7px) scale(1.04);
    box-shadow: 0 22px 40px -18px rgba(252, 115, 15, 0.35);
  }

  /* 4) Hero floating status cards — tilt + glow */
  .hero-fc {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease;
  }
  .hero-fc:hover {
    animation-play-state: paused;
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(252, 115, 15, 0.4);
    box-shadow: 0 22px 40px -16px rgba(252, 115, 15, 0.35);
    z-index: 5;
  }

  /* 5) Mobile day-view callouts */
  .tds-m-co {
    padding: 12px 14px;
    border-radius: 14px;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  }
  .tds-m-co:hover {
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 14px 28px -18px rgba(28, 32, 48, 0.3);
  }

  /* 6) Quick-delegate phone steps */
  .tds-m-ph,
  .nds-block .m-ph {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }
  .tds-m-flow .tds-m-ph:hover,
  .nds-block .m-flow .m-ph:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 36px 60px -28px rgba(252, 115, 15, 0.35);
  }

  /* 7) Lifecycle card */
  .nds-block .x-life {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  }
  .nds-block .x-life:hover {
    transform: translateY(-6px);
    border-color: rgba(252, 115, 15, 0.35);
    box-shadow: 0 28px 56px -30px rgba(252, 115, 15, 0.35);
  }
  .nds-block .x-go {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .nds-block .x-go:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(252, 115, 15, 0.55);
  }

  /* 8) Create-form priority buttons — different per state */
  .nds-block .x-qp {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.25s ease, background 0.25s ease;
  }
  .nds-block .x-qp:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -14px rgba(28, 32, 48, 0.28);
  }
  .nds-block .x-qp[aria-pressed="true"]:hover {
    box-shadow: 0 12px 26px -12px rgba(252, 115, 15, 0.45);
  }
  .nds-block .x-pv {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .nds-block .x-pv:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 50px -28px rgba(28, 32, 48, 0.4);
  }

  /* 9) Pillars — icon spin-lite + lift */
  .nds-block .pil {
    transition: transform 0.35s ease, background 0.3s ease;
    border-radius: 16px;
  }
  .nds-block .pil:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.7);
  }
  .nds-block .pil:hover .ic {
    transform: scale(1.12) rotate(-8deg);
  }
  .nds-block .ic {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* 10) Process steps — number pulse */
  .nds-block .step {
    transition: transform 0.3s ease;
  }
  .nds-block .step:hover {
    transform: translateY(-5px);
  }
  .nds-block .step:hover::before {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(252, 115, 15, 0.18);
  }
  .nds-block .step::before {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* 11) App feature list + overview bars */
  .nds-block .alist li {
    border-radius: 12px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 -10px;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .nds-block .alist li:hover {
    background: #fff6f1;
    transform: translateX(6px);
  }
  .nds-block .ov {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .nds-block .ov:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -22px rgba(28, 32, 48, 0.3);
  }
  .nds-block .appimg {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
  }
  .nds-block .appimg:hover {
    transform: translateY(-8px) scale(1.02);
    filter: drop-shadow(0 18px 30px rgba(252, 115, 15, 0.2));
  }

  /* 12) Convert / key features */
  .convert-dash-frame {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .convert-dash-frame:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -28px rgba(28, 32, 48, 0.35);
  }
  .convert-list li {
    border-radius: 10px;
    padding: 6px 8px;
    margin: 0 -8px;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .convert-list li:hover {
    background: #fff6f1;
    transform: translateX(5px);
  }
  .convert-feature-blocks > div {
    border-radius: 14px;
    padding: 12px;
    margin: 0 -12px;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .convert-feature-blocks > div:hover {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -18px rgba(252, 115, 15, 0.25);
  }

  /* 13) Header login / get started extra polish */
  .header-login {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .header-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -12px rgba(252, 115, 15, 0.45);
  }
  .btn-get-started:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -12px rgba(252, 115, 15, 0.55);
  }

  /* 14) Download banner mini cards */
  .nds-block .m-tk,
  .app-download-banner .m-tk {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .nds-block .m-tk:hover,
  .app-download-banner .m-tk:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 14px -8px rgba(28, 32, 48, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nds-block .cat:hover,
  .nds-block .q:hover,
  .nds-block .fc:hover,
  .hero-fc:hover,
  .tds-m-co:hover,
  .tds-m-ph:hover,
  .nds-block .pil:hover,
  .nds-block .step:hover,
  .nds-block .appimg:hover,
  .convert-dash-frame:hover {
    transform: none !important;
  }
}

/* ========== Sticky scroll hero (.hv) — ported from reference HTML ========== */
.hv {
  --bg: #fff;
  --soft: #f6f7f9;
  --ink: #1c2030;
  --mute: #5d6477;
  --line: #e6e8ee;
  --brand: #f26a1b;
  --brand-d: #d9560c;
  --brand-t: #fff1e8;
  --green: #1f9d6b;
  --green-t: #e6f6ef;
  position: relative;
  height: calc(100vh + 360vh);
  background: #fff3ee;
  margin-top: -110px;
  color: var(--ink);
}
.hv .hs {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  /* Match .header .container edges (max-width 1290 + 24px gutters) */
  padding: 104px max(24px, calc((100vw - var(--max-width)) / 2 + 24px)) 28px;
  background: radial-gradient(900px 520px at 72% 25%, #ffe0d1, transparent 72%), #fff3ee;
  overflow: hidden;
}
.hv-l { text-align: left; position: relative; z-index: 1; }
.hv h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, min(4vw, 6.8vh), 56px);
  font-weight: 800;
  margin: 22px 0 0;
  letter-spacing: -0.035em;
  text-wrap: balance;
  line-height: 1.08;
  color: var(--ink);
}
.hv h1 span { color: var(--brand); display: block; }
.hv .sub {
  max-width: 46ch;
  margin: 18px 0 26px;
  font-size: clamp(15px, 2.2vh, 18px);
  color: var(--mute);
}
.hv .pill {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #f3dfd4;
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  font-size: 14px;
  color: var(--mute);
  box-shadow: 0 6px 20px -12px rgba(28, 32, 48, 0.35);
}
.hv .pill b {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  flex: none;
  font-weight: 700;
}
.hv .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hv .hv-btn {
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 600;
}
.hv-play {
  display: inline-flex;
  margin-top: 16px;
  width: fit-content;
  max-width: 180px;
}
.hv-play img {
  height: 52px;
  width: auto;
  display: block;
}
.hv-bars { display: flex; gap: 8px; margin: 34px 0 14px; max-width: 420px; }
.hv-bars button {
  flex: 1;
  height: 6px;
  border: 0;
  border-radius: 4px;
  background: #f1d3c2;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.25s;
}
.hv-bars button::after { content: ""; position: absolute; inset: -10px 0; }
.hv-bars button.done { background: #f7a877; }
.hv-bars button.on { background: var(--brand); }
.hv-cap { min-height: 56px; }
.hv-cap b {
  display: block;
  font: 700 19px var(--font-display), sans-serif;
  color: var(--ink);
}
.hv-cap span { color: var(--mute); font-size: 15px; }
.hv-r {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: end;
  margin-bottom: -28px;
  min-width: 0;
}
.hv-gl {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(520px, 100%);
  height: min(520px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffbf99 0, rgba(255, 191, 153, 0) 68%);
  animation: hvGl 1.3s ease-out 0.6s both;
}
.hv-w {
  position: relative;
  width: 300px;
  height: 610px;
  z-index: 1;
  flex: none;
  animation: hvDrop 1.3s both, hvBob 5s ease-in-out 1.4s infinite;
}
.hv-ph {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 610px;
  transform-origin: top left;
  border: 8px solid var(--ink);
  border-radius: 44px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(28, 32, 48, 0.5);
}
.hv-ph::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 80px;
  height: 8px;
  margin-left: -40px;
  border-radius: 6px;
  background: var(--ink);
  z-index: 2;
}
.hv-tr { display: flex; height: 100%; will-change: transform; }
.hv.auto .hv-tr { transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.hv-scr {
  flex: 0 0 100%;
  height: 100%;
  padding: 34px 14px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.hv-scr .m-nav { margin-top: auto; }
.hv-n {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
}
.hv-n i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 700;
  flex: none;
}
.hv-n b { display: block; font-size: 13px; }
.hv-n span { color: var(--mute); font-size: 11.5px; }
.hv-hint {
  position: absolute;
  left: max(24px, calc((100vw - var(--max-width)) / 2 + 24px));
  bottom: 22px;
  font-size: 13px;
  color: var(--mute);
  transition: opacity 0.3s;
  animation: hvUp 0.6s ease 1.7s backwards;
}
.hv-tilt { position: absolute; inset: 0; }
.hv-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  border: 3px solid var(--brand);
  border-radius: 50%;
  opacity: 0;
  animation: hvRing 1s ease-out 0.72s forwards;
  pointer-events: none;
}
.hv-l > * { animation: hvUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hv-l > :nth-child(1) { animation-delay: 0.05s; }
.hv-l > :nth-child(2) { animation-delay: 0.15s; }
.hv-l > :nth-child(3) { animation-delay: 0.25s; }
.hv-l > :nth-child(4) { animation-delay: 0.35s; }
.hv-l > :nth-child(5) { animation-delay: 0.45s; }
.hv-l > :nth-child(6) { animation-delay: 0.55s; }
.hv-l > :nth-child(7) { animation-delay: 0.62s; }
.hv-lady {
  position: relative;
  z-index: 0;
  display: block;
  flex: none;
  width: auto;
  height: 780px;
  max-width: none;
  animation: hvDropL 1.3s 0.16s both;
}
@keyframes hvDrop {
  0% { transform: translateY(-115vh) rotate(-10deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  55% { transform: translateY(0) rotate(3deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  70% { transform: translateY(-26px) rotate(-1.5deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  84% { transform: translateY(0) rotate(0.6deg); animation-timing-function: ease-out; }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes hvBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes hvGl {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes hvRing {
  0% { opacity: 0.6; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes hvUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes hvDropL {
  0% { transform: translateY(-120vh); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  55% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  70% { transform: translateY(-18px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  84% { transform: translateY(0); animation-timing-function: ease-out; }
  100% { transform: translateY(0); }
}
.hv-scr > * { opacity: 0; transform: translateY(16px); transition: opacity 0.45s, transform 0.45s; }
.hv-scr.act > * { opacity: 1; transform: none; }
.hv-scr.act > :nth-child(2) { transition-delay: 0.06s; }
.hv-scr.act > :nth-child(3) { transition-delay: 0.12s; }
.hv-scr.act > :nth-child(4) { transition-delay: 0.18s; }
.hv-scr.act > :nth-child(5) { transition-delay: 0.24s; }
.hv-scr.act > :nth-child(6) { transition-delay: 0.3s; }
.hv-scr.act > :nth-child(7) { transition-delay: 0.36s; }
.hv-scr.act > :nth-child(8) { transition-delay: 0.42s; }
.hv-scr .m-bars i { transform-origin: bottom; transform: scaleY(0); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hv-scr.act .m-bars i { transform: scaleY(1); }
.hv-scr.act .m-bars div:nth-child(2) i { transition-delay: 0.5s; }
.hv-scr.act .m-bars div:nth-child(3) i { transition-delay: 0.58s; }
.hv-scr.act .m-bars div:nth-child(4) i { transition-delay: 0.66s; }
.hv-scr.act .m-bars div:nth-child(5) i { transition-delay: 0.74s; }
.hv-scr.act .m-bars div:nth-child(6) i { transition-delay: 0.82s; }
.hv-scr.act .m-bars div:nth-child(7) i { transition-delay: 0.9s; }
.hv-scr.act .m-bars div:nth-child(1) i { transition-delay: 0.42s; }
.hv-scr .hv-n { transform: translateX(30px); }
.hv-scr.act .hv-n { transform: none; }

/* Phone UI inside .hv (scoped) */
.hv .m-top { display: flex; align-items: center; gap: 8px; font: 700 14px var(--font-display), sans-serif; margin-bottom: 10px; }
.hv .m-lg { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#e5484d 0 25%, #f08a0c 0 50%, #f5c60f 0 75%, #1f9d5c 0); }
.hv .m-hi { margin: 0 0 8px; font-weight: 600; font-size: 13px; }
.hv .m-lb { margin: 12px 0 6px; font-weight: 600; font-size: 12px; }
.hv .m-t4, .hv .m-c4 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hv .m-t4 div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; }
.hv .m-t4 small, .hv .m-c4 small { display: block; font-size: 10px; color: var(--mute); }
.hv .m-t4 b { font: 700 18px var(--font-display), sans-serif; }
.hv .m-c4 div { border-radius: 10px; padding: 9px 10px; color: #fff; min-height: 62px; }
.hv .m-c4 small { color: inherit; opacity: 0.95; font-size: 11px; font-weight: 600; }
.hv .m-c4 b { font: 700 20px var(--font-display), sans-serif; display: block; margin-top: 6px; }
.hv .m-nav { display: flex; justify-content: space-around; margin-top: 14px; padding: 8px; border-radius: 18px; background: var(--soft); }
.hv .m-nav i { width: 22px; height: 22px; border-radius: 50%; background: #dfe3ea; }
.hv .m-nav i.on { background: var(--brand); }
.hv .m-fld { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 13px; margin-bottom: 10px; }
.hv .m-fld small { display: block; color: var(--mute); font-size: 10px; }
.hv .m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.hv .m-chips span { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 5px 10px; background: var(--soft); color: var(--mute); }
.hv .m-chips span.on { background: #e5484d; color: #fff; }
.hv .m-btn { display: block; text-align: center; background: var(--brand); color: #fff; border-radius: 12px; padding: 11px; font-weight: 600; font-size: 13px; margin-top: 14px; }
.hv .m-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.hv .m-row.on { border-color: var(--brand); background: var(--brand-t); }
.hv .m-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.hv .m-row em { margin-left: auto; font-style: normal; color: var(--brand); font-weight: 700; }
.hv .m-tk { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.hv .m-tk em { font-style: normal; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 3px 8px; color: #fff; white-space: nowrap; }
.hv .m-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 190px; align-items: end; border-bottom: 1px solid var(--line); }
.hv .m-bars div { display: flex; gap: 4px; align-items: end; justify-content: center; height: 100%; }
.hv .m-bars i { display: block; width: 40%; border-radius: 6px 6px 0 0; }
.hv .m-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; font-size: 12px; color: var(--mute); margin-top: 8px; }

@media (max-width: 900px) {
  .hv { height: auto; margin-top: -90px; }
  .hv .hs {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 120px 24px 56px;
    gap: 36px;
  }
  .hv-hint { display: none; }
  .hv-w { margin: 0 auto; }
  .hv-r { margin-bottom: -56px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv *::before { animation: none !important; transition: none !important; }
  .hv-scr > *, .hv-scr .m-bars i { opacity: 1 !important; transform: none !important; }
  .hv-ring { display: none; }
}

/* Sticky scroll needs non-hidden overflow on ancestors */
html { overflow-x: clip; }
body { overflow-x: clip; }