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

:root {
  /* Colors */
  --white: #FFFFFF;
  --black: #000000;
  --dark-text: #2E3033;
  --beige: #F5F3F0;
  --light-gray: #EBEDF0;
  --light-blue: #EBF5FA;
  --medium-gray: #646566;
  --black-75: rgba(0, 0, 0, 0.75);
  --black-7: rgba(0, 0, 0, 0.07);
  --white-75: rgba(255, 255, 255, 0.75);
  --white-50: rgba(255, 255, 255, 0.50);
  --white-20: rgba(255, 255, 255, 0.20);

  /* Typography */
  --font-display: 'Cardo', serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --letter-spacing-display: -0.03em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-semibold-sm: -0.01em;
}

html {
  scroll-behavior: auto;
  background: var(--black);
}

body {
  font-family: var(--font-body);
  color: var(--dark-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

/* ===== TYPOGRAPHY ===== */
.h1 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 4.5rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
}

.h2 {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
}

.h3 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 3.5rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
}

.h4 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
}

.body-large {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
}

.body-medium {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

.body-small {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}


/* ===== HERO SECTION ===== */
.hero-wrapper {
  height: 225vh;
  position: relative;
}

.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 110%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* Header */
.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6.5rem;
  padding: 0 2.5rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-header .header-logo img {
  width: auto;
  height: 1.25rem;
  transition: filter 0.4s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.header-signin-btn {
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  cursor: pointer;
  padding: 0;
  transition: color 0.4s ease;
}

.header-cta-btn {
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 1.5rem;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: var(--letter-spacing-semibold-sm);
  border: 0.0625rem solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.header-cta-btn:hover {
  border-color: var(--white);
}

/* Scrolled state — below hero */
.hero-header.scrolled .header-logo img {
  filter: brightness(0);
}

.hero-header.scrolled .header-signin-btn {
  color: var(--black);
}

.hero-header.scrolled .header-cta-btn {
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.1);
}

.hero-header.scrolled .header-cta-btn:hover {
  border-color: rgba(0, 0, 0, 0.4);
}

/* Hero center */
.hero-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-center-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 45rem;
  position: relative;
}

.hero-center-inner::before {
  content: '';
  position: absolute;
  top: -5rem;
  bottom: -5rem;
  left: 0;
  right: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* Fixed-height text area so CTA doesn't move */
.hero-text-area {
  position: relative;
  width: 100%;
}

.hero-center .hero-title {
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-center .hero-subtitle {
  color: var(--white);
}

.hero-center .hero-cta {
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 1.5rem;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: var(--letter-spacing-semibold-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.hero-center .hero-cta:hover {
  background: rgba(255, 255, 255, 0.95);
}

/* Before/after scroll states */
.hero-state-before,
.hero-state-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-state-before {
  transition: opacity 0.4s ease;
}

.hero-state-after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-state-after .hero-subtitle {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-state-after .hero-subtitle.visible {
  opacity: 1;
}

.hero.scrolled .hero-state-before {
  opacity: 0;
  pointer-events: none;
}

.hero.scrolled .hero-state-after {
  visibility: visible;
  pointer-events: auto;
}

/* Typewriter effect */
[data-typewriter] .char,
#hero-typewriter .char,
.steps-heading .char,
.testimonial-quote .char {
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-typewriter] .char.visible,
#hero-typewriter .char.visible,
.steps-heading .char.visible,
.testimonial-quote .char.visible {
  opacity: 1;
}

/* Body text fade-in after typewriter completes */
.tw-body-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tw-body-fade.visible {
  opacity: 1;
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 3;
  transition: opacity 0.4s ease;
}

.scroll-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--white);
  text-align: center;
}

.scroll-wheel {
  animation: scrollWheel 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scrollWheel {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  25% {
    transform: translateY(0.625rem);
    opacity: 1;
  }
  45% {
    transform: translateY(0.875rem);
    opacity: 0;
  }
  46% {
    transform: translateY(-0.25rem);
    opacity: 0;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Hero bottom */
.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 2.5rem;
  transition: opacity 0.4s ease;
}

/* Testimonial — right aligned box */
.hero-testimonial-box {
  width: 25rem;
  background: var(--white);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-right: -2.5rem;
  margin-bottom: -2.5rem;
}

.hero-testimonial-quote {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--dark-text);
  width: 20rem;
}

.hero-testimonial-attr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-testimonial-attr .avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  object-fit: cover;
}

.hero-testimonial-attr .name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--dark-text);
}

/* ===== CONTENT AREA ===== */
.content {
  position: relative;
  z-index: 3;
  background: transparent;
}


.content-inner {
  background: var(--white);
  position: relative;
}

/* ===== SECTION 1 - INTRO ===== */
.section-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 10rem 15rem;
}

.intro-text-wrap {
  width: 100%;
  max-width: 57.5rem;
}

.section-intro .intro-text {
  text-align: center;
  color: var(--dark-text);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
}

/* ===== SELLING POINTS ===== */
.section-selling-points {
  display: none;
  padding: 0 0 5rem;
  background: var(--white);
}

.sp-row {
  display: flex;
  gap: 2.5rem;
  padding: 0 5rem;
}

.sp-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 2.5rem;
}

.sp-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sp-item-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.sp-item-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  color: var(--dark-text);
}

.sp-item-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--dark-text);
}

/* ===== SECTIONS 2-6 - HOW IT WORKS (SCROLL-FIXED WITH SNAP) ===== */
/* ===== STICKY STEPS ===== */
.steps-wrapper {
  position: relative;
  z-index: 1;
  height: 500vh;
  background: var(--beige);
  padding-right: 1rem;
}

.steps-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  gap: 10rem;
  overflow: hidden;
}

.steps-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5rem 0 5rem 5rem;
  background: var(--beige);
  position: relative;
}

.steps-sidebar-text {
  position: absolute;
  top: 5rem;
  left: 5rem;
  width: 15rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--dark-text);
}


.steps-text-area {
  width: 25rem;
}

.steps-text-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
}

.steps-heading {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: var(--dark-text);
}

.steps-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--dark-text);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.steps-body.visible {
  opacity: 1;
}

.steps-right {
  flex: 1;
  position: relative;
  padding: 1rem 1rem 1rem 1rem;
}

.steps-phone-bg {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 0;
  bottom: 1rem;
  background: #0B0D0C;
}

.steps-phone-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../public/images/floral-pattern.png');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.steps-messages {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 50%;
  transform: translateX(calc(-50% - 0.5rem));
  width: 20rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
}

.steps-msg {
  max-width: 16.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--white);
  opacity: 0;
  transform: translateY(2.5rem) scale(0.95);
  white-space: pre-line;
}

.steps-msg--user {
  background: #F5F3F0;
  color: var(--black);
  position: relative;
  margin-right: 0.5rem;
  min-width: 4rem;
}

.steps-msg--user::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url('../public/images/message-tip.svg') no-repeat;
  background-size: contain;
}

.steps-msg--calmo {
  background: #303331;
  color: var(--white);
  align-self: flex-end;
  margin-right: 3rem;
}

.steps-msg.msg-enter-up {
  animation: msgEnterUp 0.35s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

.steps-msg.msg-exit-up {
  animation: msgExitUp 0.25s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.steps-msg.msg-enter-down {
  animation: msgEnterDown 0.35s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

.steps-msg.msg-exit-down {
  animation: msgExitDown 0.25s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.steps-msg-loader {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #242626;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
}

.steps-msg-loader.visible {
  opacity: 1;
}

.steps-msg-loader span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: loaderBounce 1.2s ease-in-out infinite;
}

.steps-msg-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.steps-msg-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loaderBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-0.25rem); opacity: 1; }
}

@keyframes msgEnterUp {
  0% {
    transform: translateY(2.5rem) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes msgExitUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-2.5rem) scale(0.95);
    opacity: 0;
  }
}

@keyframes msgEnterDown {
  0% {
    transform: translateY(-2.5rem) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes msgExitDown {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(2.5rem) scale(0.95);
    opacity: 0;
  }
}

.steps-dots {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2.5rem;
  width: 1.5rem;
  height: 4.75rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}

.steps-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.steps-dot.active {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--white);
}



/* ===== FEEDBACK SECTION ===== */
.section-feedback {
  padding: 5rem 0 10rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.feedback-header {
  padding: 0 5rem;
}

.feedback-sidebar-text {
  width: 15rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--dark-text);
}

.feedback-row {
  display: flex;
  gap: 2.5rem;
  padding: 0 5rem;
}

.feedback-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.feedback-card-preview {
  height: 30rem;
  background: #0B0D0C;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.feedback-card-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../public/images/floral-pattern.png');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.feedback-messages {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 17.5rem;
}

.feedback-msg {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--white);
  max-width: 15.25rem;
}

.feedback-msg--calmo {
  background: #303331;
  align-self: flex-start;
}

.feedback-msg--user {
  background: #F5F3F0;
  color: var(--black);
  align-self: flex-end;
}

.feedback-msg--user.has-tip {
  position: relative;
  margin-right: 0.5rem;
}

.feedback-msg--user.has-tip::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url('../public/images/message-tip.svg') no-repeat;
  background-size: contain;
}

.feedback-translation-group {
  position: relative;
  align-self: center;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shift wrapper so line+msg composition stays visually centered */
.feedback-translation-group.line-right {
  transform: translateX(-1.5rem);
}

.feedback-translation-group.line-left {
  transform: translateX(1.5rem);
}

.feedback-translation-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.0625rem;
  height: 10rem;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  opacity: 0;
  transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-messages.in-view .feedback-translation-line {
  opacity: 1;
}

/* Feedback message entrance animation */
.feedback-messages .feedback-msg {
  opacity: 0;
  transform: translateY(2.5rem) scale(0.95);
}

.feedback-messages.in-view .feedback-msg {
  animation: msgEnterUp 0.35s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

.feedback-messages.in-view .feedback-msg:nth-child(1) { animation-delay: 0s; }
.feedback-messages.in-view .feedback-msg:nth-child(2) { animation-delay: 0.3s; }
.feedback-messages.in-view .feedback-msg:nth-child(3) { animation-delay: 0.6s; }

.feedback-messages.in-view .feedback-translation-group .feedback-msg {
  animation-delay: 0s;
}

.feedback-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 5rem;
}

.feedback-card-title {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: var(--dark-text);
}

.feedback-card-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--dark-text);
}

/* ===== SECTION 7 - TESTIMONIAL ===== */
.section-testimonial {
  padding: 0;
  background: #EEF5EB;
  position: relative;
  overflow: hidden;
}

.section-testimonial .testimonial-layout {
  display: flex;
  align-items: flex-start;
  padding: 0 10rem 0 5rem;
  gap: 5rem;
}

.section-testimonial .testimonial-sidebar {
  flex: 1;
  min-width: 0;
  padding-top: 5rem;
}

.section-testimonial .testimonial-sidebar-text {
  max-width: 15rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--dark-text);
}

.section-testimonial .testimonial-content {
  width: 45rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 12.5rem 0;
}

.section-testimonial .testimonial-quote {
  color: var(--dark-text);
}

.section-testimonial .testimonial-attribution {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-testimonial .testimonial-attribution .avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--light-gray);
  object-fit: cover;
}

.section-testimonial .testimonial-attribution .info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.section-testimonial .testimonial-attribution .author-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--black);
}

.section-testimonial .testimonial-attribution .author-location {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--medium-gray);
}

/* Testimonial slider */
.testimonial-slider {
  position: relative;
}

.testimonial-slide {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  transform: translateX(100vw);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
  transform: translateX(0);
}

.testimonial-slide.exit-left {
  opacity: 1;
  transform: translateX(-100vw);
}

.testimonial-slide.exit-right {
  opacity: 1;
  transform: translateX(100vw);
}

.testimonial-slide.enter-left {
  transform: translateX(-100vw);
}

.testimonial-slide.enter-right {
  transform: translateX(100vw);
}

/* Arrow buttons */
.testimonial-arrows {
  position: absolute;
  bottom: 5rem;
  right: 5rem;
  display: flex;
  gap: 1rem;
}

.testimonial-arrow {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0.0625rem solid rgba(0, 0, 0, 0.1);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dark-text);
  transition: background 0.2s ease;
}

.testimonial-arrow:hover {
  border-color: var(--black);
}

/* Next button — border replaced by SVG progress circle */
.testimonial-arrow--next {
  border: none;
  position: relative;
}

.testimonial-arrow--next:hover {
  box-shadow: inset 0 0 0 0.0625rem var(--black);
}

.testimonial-arrow--next:hover .testimonial-progress {
  opacity: 0;
}

.testimonial-progress {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.testimonial-arrow-icon {
  position: relative;
  z-index: 1;
}


/* ===== PROJECTS SECTION ===== */
.section-projects {
  padding: 5rem 0 0;
  background: var(--white);
}

.projects-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 0 5rem;
}

.projects-header {
  display: flex;
  justify-content: space-between;
}

.projects-sidebar-text {
  width: 15rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 400;
  color: var(--dark-text);
}

.projects-slider {
  position: relative;
}

.projects-slide {
  display: flex;
  gap: 2.5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100vw);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.projects-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
  transform: translateX(0);
}

.projects-slide.exit-left {
  opacity: 1;
  transform: translateX(-100vw);
}

.projects-slide.exit-right {
  opacity: 1;
  transform: translateX(100vw);
}

.projects-slide.enter-left {
  transform: translateX(-100vw);
}

.projects-slide.enter-right {
  transform: translateX(100vw);
}

.projects-img {
  flex: 1;
  height: 30rem;
  overflow: hidden;
}

.projects-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.projects-arrows {
  display: flex;
  gap: 1rem;
}

.projects-arrow {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0.0625rem solid rgba(0, 0, 0, 0.1);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dark-text);
  transition: border-color 0.2s ease;
}

.projects-arrow:hover {
  border-color: var(--black);
}

.projects-arrow--next {
  border: none;
  position: relative;
}

.projects-arrow--next:hover {
  box-shadow: inset 0 0 0 0.0625rem var(--black);
}

.projects-arrow--next:hover .projects-progress {
  opacity: 0;
}

.projects-progress {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.projects-arrow-icon {
  position: relative;
  z-index: 1;
}

/* ===== SECTION 8 - DIVIDER VIDEO ===== */
.divider-video {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.divider-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== SECTION 9 - PRICING ===== */
.section-pricing {
  padding: 10rem 10rem;
  background: var(--white);
  max-width: 90rem;
  margin: 0 auto;
}

.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 5rem;
}

.pricing-header .pricing-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pricing-title {
  max-width: 45rem;
}

.pricing-header .pricing-subtitle {
  color: var(--black);
}

.pricing-toggle {
  display: flex;
  align-items: center;
  height: 3rem;
  padding: 0.25rem;
  border: 0.0625rem solid var(--white-20);
  border-radius: 2.5rem;
  background: var(--beige);
  position: relative;
}

.pricing-toggle .toggle-bg {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  border-radius: 2.5rem;
  background: var(--white);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pricing-toggle button {
  height: 100%;
  padding: 0 1.5rem;
  border: none;
  border-radius: 2.5rem;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--black-75);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.25s ease, font-weight 0.25s ease;
}

.pricing-toggle button.active {
  font-weight: 600;
  color: var(--black);
  letter-spacing: var(--letter-spacing-semibold-sm);
}

.pricing-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.pricing-card {
  flex: 1;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 2.5rem;
  border: 0.0625rem solid var(--light-gray);
  border-radius: 0;
}

.pricing-card--premium {
  background: var(--beige);
  border: none;
}

.pricing-card--business {
  background: var(--light-blue);
  border: none;
}

.pricing-card .card-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pricing-card .card-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
}

.pricing-card .card-name {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--black);
}

.pricing-card .card-badge {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  color: var(--black-75);
  text-align: right;
}

.pricing-card .card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.pricing-card .card-price {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 4.5rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: var(--dark-text);
}

.pricing-card .card-price-period {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--black-75);
}

.pricing-card .card-description {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--black);
}

.pricing-card .card-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.pricing-card .card-btn {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
}

.pricing-card .card-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.pricing-card .card-cancel {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--black-75);
  text-align: center;
}

.pricing-card .card-divider {
  height: 0.0625rem;
  background: var(--light-gray);
}

.pricing-card--premium .card-divider,
.pricing-card--business .card-divider {
  background: var(--black-7);
}

.pricing-card .card-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pricing-card .feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pricing-card .feature svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.pricing-card .feature span {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--black-75);
}

.pricing-footer {
  display: flex;
  justify-content: center;
}

.pricing-footer a {
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 1.5rem;
  border: 0.0625rem solid var(--black-7);
  border-radius: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  color: var(--black);
  transition: border-color 0.2s ease;
}

.pricing-footer a:hover {
  border-color: var(--black);
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--black);
  color: var(--white);
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5rem 5rem;
}

.footer-logo img {
  height: 1.25rem;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: var(--white);
}

.footer-middle {
  display: flex;
  justify-content: space-between;
  padding: 0 5rem 5rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.footer-contact .footer-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--white-75);
  margin-bottom: 1rem;
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-contact-links a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--white);
}

.footer-newsletter .footer-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--white-75);
  margin-bottom: 1rem;
}

.footer-email-form {
  display: flex;
  align-items: center;
  height: 3.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: 2.5rem;
  padding: 0.25rem;
}

.footer-email-form input {
  flex: 1;
  height: 100%;
  padding: 0 1.5rem;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--white);
}

.footer-email-form input::placeholder {
  color: var(--white-50);
}

.footer-email-form button {
  height: 100%;
  padding: 0 1.5rem;
  border-radius: 2.5rem;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.footer-email-form button:hover {
  background: rgba(255, 255, 255, 0.95);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 5rem;
}

.footer-bottom .copyright {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--white);
}

.footer-bottom .legal {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom .legal a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--white);
}

/* ===== RATES MODAL ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rem;
  background: rgba(51, 51, 51, 0);
  visibility: hidden;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.4s;
}

.modal-backdrop.open {
  background: rgba(51, 51, 51, 0.9);
  visibility: visible;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}

.modal-card {
  background: var(--white);
  padding: 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.98);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open .modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 1.875rem;
  right: 1.875rem;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--dark-text);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-subtitle {
  color: var(--black-75);
}

.modal-table {
  display: flex;
  flex-direction: column;
}

.modal-row {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 0.0625rem solid var(--black-7);
}

.modal-row span {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--black-75);
}

.modal-row--header {
  padding-top: 0;
}

.modal-row--header span {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}

.modal-disclaimer {
  max-width: 45rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--black-75);
}

/* ===== SIGN-IN / SIGN-UP MODALS ===== */
.signin-modal {
  padding: 0;
  display: block;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.4s;
}

.signin-modal.open {
  background: var(--white);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}

.signin-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.signin-modal.open .signin-page {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.signin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6.5rem;
  padding: 0.5rem 2.5rem;
  flex-shrink: 0;
}

.signin-logo img {
  width: auto;
  height: 1.25rem;
  filter: brightness(0);
}

.signin-header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.signin-header-question {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--black-75);
}

.signin-header-action {
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 1.5rem;
  background: transparent;
  color: var(--black);
  border: 0.0625rem solid rgba(0, 0, 0, 0.1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.signin-header-action:hover {
  border-color: var(--black);
}

.signin-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 0 5rem;
}

.signin-form-wrap {
  width: 40rem;
  max-width: 100%;
  padding: 0 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.signin-titles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.signin-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 3.5rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: var(--dark-text);
}

.signin-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--black-75);
}

.signin-form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.signin-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.signin-form-row {
  display: flex;
  gap: 1rem;
}

.signin-form-row .form-group {
  flex: 1;
  min-width: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}

.form-input {
  height: 3.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.07);
  border-radius: 2.5rem;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--dark-text);
  font-weight: 400;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.form-input:hover {
  border-color: var(--black);
}

.form-input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.10);
}

.signin-btn {
  align-self: flex-start;
  height: 2.75rem;
  padding: 0 1.5rem;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.signin-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.signin-testimonial-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25rem;
  padding: 2.5rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.signin-testimonial-box.visible {
  opacity: 1;
}

.signin-testimonial-quote {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--black);
}

.signin-testimonial-attr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.signin-testimonial-attr .avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  object-fit: cover;
}

.signin-testimonial-attr .name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.00875rem;
  color: var(--black);
}

/* ===== BREAKPOINTS ===== */
/* Two intermediate breakpoints between desktop (>1280px) and tablet (≤768px).
   Larger (≤1280px): leans desktop — horizontal layouts preserved, spacing reduced.
   Smaller (≤1024px): leans mobile — selected sections stack vertically.
   Only values >24px are reduced; all reductions stay on the 8px grid. */

/* ----- Larger intermediate: ≤1280px ----- */
@media (max-width: 80rem) {
  .section-intro {
    padding: 7.5rem 5rem;
  }

  .steps-sticky {
    gap: 5rem;
  }

  .steps-left {
    padding: 4rem 0 4rem 4rem;
  }

  .steps-sidebar-text {
    top: 4rem;
    left: 4rem;
  }

  .section-feedback {
    padding: 4rem 0 7.5rem;
    gap: 4rem;
  }

  .feedback-header {
    padding: 0 4rem;
  }

  .feedback-row {
    padding: 0 4rem;
    gap: 2rem;
  }

  .feedback-card {
    gap: 2rem;
  }

  .feedback-card-text {
    padding-right: 4rem;
  }

  .section-testimonial .testimonial-layout {
    padding: 0 5rem 0 4rem;
    gap: 4rem;
  }

  .section-testimonial .testimonial-sidebar {
    padding-top: 4rem;
  }

  .section-testimonial .testimonial-content {
    padding: 7.5rem 0;
  }

  .testimonial-arrows {
    bottom: 4rem;
    right: 4rem;
  }

  .section-projects {
    padding: 4rem 0 0;
  }

  .projects-inner {
    padding: 0 4rem;
    gap: 2rem;
  }

  .projects-slide {
    gap: 2rem;
  }

  .section-pricing {
    padding: 7.5rem 5rem;
  }

  .pricing-header {
    margin-bottom: 4rem;
    gap: 2rem;
  }

  .pricing-card {
    padding: 2rem;
    gap: 2rem;
  }

  .footer-top {
    padding: 4rem;
  }

  .footer-middle {
    padding: 0 4rem 4rem;
  }

  .footer-bottom {
    padding: 2rem 4rem;
  }

  .modal-backdrop {
    padding: 0 5rem;
  }

  .modal-card {
    padding: 4rem;
    gap: 2rem;
  }

  .signin-form-wrap {
    padding: 0 4rem;
  }
}

/* ----- Smaller intermediate: ≤1024px ----- */
@media (max-width: 64rem) {
  .section-intro {
    padding: 5rem 3rem;
  }

  .steps-sticky {
    gap: 3rem;
  }

  .steps-left {
    padding: 3rem 0 3rem 3rem;
  }

  .steps-sidebar-text {
    top: 3rem;
    left: 3rem;
    width: 12rem;
  }

  .steps-text-area {
    width: 20rem;
  }

  .section-feedback {
    padding: 3rem 0 5rem;
    gap: 3rem;
  }

  .feedback-header {
    padding: 0 3rem;
  }

  .feedback-row {
    flex-direction: column;
    padding: 0 3rem;
    gap: 2.5rem;
  }

  .feedback-card {
    gap: 1.5rem;
  }

  .feedback-card-text {
    padding-right: 0;
  }

  .section-testimonial .testimonial-layout {
    flex-direction: column;
    padding: 0 3rem;
    gap: 2rem;
  }

  .section-testimonial .testimonial-sidebar {
    padding-top: 3rem;
  }

  .section-testimonial .testimonial-content {
    width: 100%;
    padding: 0 0 5rem;
  }

  .testimonial-arrows {
    position: static;
    margin-top: 2rem;
  }

  .section-projects {
    padding: 3rem 0 0;
  }

  .projects-inner {
    padding: 0 3rem;
    gap: 2rem;
  }

  .projects-slide {
    gap: 2rem;
  }

  .projects-img {
    height: 24rem;
  }

  .section-pricing {
    padding: 5rem 3rem;
  }

  .pricing-header {
    margin-bottom: 3rem;
    gap: 1.5rem;
  }

  .pricing-cards {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .pricing-card {
    width: 100%;
    max-width: 30rem;
    padding: 2rem;
    gap: 2rem;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem;
    gap: 2rem;
  }

  .footer-middle {
    flex-direction: column;
    padding: 0 3rem 3rem;
    gap: 2.5rem;
  }

  .footer-bottom {
    padding: 2rem 3rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .modal-backdrop {
    padding: 0 3rem;
  }

  .modal-card {
    padding: 3rem;
    gap: 2rem;
  }

  .signin-form-wrap {
    padding: 0 3rem;
  }

  .signin-testimonial-box {
    display: none;
  }
}

/* ===== STEPS MOBILE BLOCKS ===== */
/* Default: hidden on desktop. Shown only at the mobile breakpoint below. */
.steps-mobile {
  display: none;
}

/* ----- Mobile: ≤768px ----- */
@media (max-width: 48rem) {
  /* Header */
  .hero-header {
    height: 5rem;
    padding: 0 2.5rem;
  }

  .header-actions {
    gap: 1rem;
  }

  .header-cta-btn {
    height: 2.5rem;
    padding: 0 1rem;
  }

  /* Hero */
  .hero-center {
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    padding: 0 2.5rem;
  }

  .hero-center-inner {
    width: 100%;
    max-width: 100%;
    padding: 0;
    gap: 1.5rem;
  }

  .hero-center .hero-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: 3rem;
    line-height: 3.5rem;
  }

  .hero-bottom {
    display: none;
  }

  /* Largest titles (48px+) → 40px on mobile. .h3/.h4 untouched. */
  .h1,
  .h2,
  .section-intro .intro-text {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  /* Intro */
  .section-intro {
    padding: 5rem 2.5rem;
  }

  .section-intro .intro-text {
    text-align: center;
  }

  /* Sticky steps → mobile static stack */
  .steps-wrapper {
    display: none;
  }

  .steps-mobile {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 5rem 2.5rem;
    background: var(--beige);
  }

  .steps-mobile-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .steps-mobile-preview {
    height: 320px;
    max-height: 320px;
    background: #0B0D0C;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .steps-mobile-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../public/images/floral-pattern.png');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
  }

  .steps-mobile-messages {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    width: 20rem;
    transform: scale(0.5);
    transform-origin: center center;
  }

  .steps-mobile-messages .steps-msg {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .steps-mobile-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .steps-mobile-heading {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 2.75rem;
    font-weight: 400;
    letter-spacing: var(--letter-spacing-display);
    color: var(--dark-text);
  }

  .steps-mobile-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--dark-text);
  }

  /* Feedback */
  .section-feedback {
    padding: 5rem 0;
    gap: 2.5rem;
  }

  .feedback-sidebar-text {
    display: none;
  }

  .feedback-header {
    padding: 0 2.5rem;
  }

  .feedback-row {
    flex-direction: column;
    padding: 0 2.5rem;
    gap: 2.5rem;
  }

  .feedback-card {
    gap: 1rem;
  }

  .feedback-card-preview {
    height: 320px;
    max-height: 320px;
  }

  .feedback-messages {
    transform: scale(0.5);
    transform-origin: center center;
  }

  .feedback-card-text {
    padding-right: 0;
  }

  .feedback-card-title {
    font-size: 2rem;
    line-height: 2.75rem;
  }

  /* Testimonial */
  .section-testimonial .testimonial-sidebar {
    display: none;
  }

  .section-testimonial .testimonial-layout {
    flex-direction: column;
    padding: 5rem 2.5rem;
    gap: 2rem;
  }

  .section-testimonial .testimonial-content {
    width: 100%;
    padding: 0;
  }

  .testimonial-arrows {
    position: static;
    margin-top: 2.5rem;
  }

  /* Projects */
  .section-projects {
    padding: 5rem 0;
  }

  .projects-inner {
    padding: 0 2.5rem;
    gap: 2.5rem;
  }

  .projects-slide {
    gap: 0;
  }

  .projects-slide .projects-img:nth-child(n+2) {
    display: none;
  }

  .projects-img {
    height: 20rem;
  }

  /* Pricing */
  .section-pricing {
    padding: 5rem 2.5rem;
  }

  .pricing-header {
    margin-bottom: 2.5rem;
    gap: 1.5rem;
  }

  .pricing-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .pricing-card {
    max-width: 100%;
    padding: 2rem;
    gap: 1.5rem;
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 2.5rem;
    gap: 3rem;
  }

  .footer-middle {
    flex-direction: column;
    padding: 0 2.5rem 3rem;
    gap: 2rem;
  }

  .footer-bottom {
    padding: 2rem 2.5rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* Modals */
  .modal-backdrop {
    padding: 0 1.5rem;
  }

  .modal-card {
    padding: 2.5rem;
    gap: 1.5rem;
  }

  .signin-header {
    padding: 0.5rem 2.5rem;
  }

  .signin-form-wrap {
    padding: 0 2.5rem;
  }

  .signin-main {
    padding: 3rem 0;
    align-items: center;
  }

  .signin-title {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .signin-form-row {
    flex-direction: column;
    gap: 1rem;
  }

  .signin-testimonial-box {
    display: none;
  }
}

/* ===== DASHBOARD ===== */
.dashboard-body {
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* [hidden] should always win over class-based display rules */
.dashboard-body [hidden] {
  display: none !important;
}

.dashboard {
  position: relative;
  min-height: 100vh;
}

.dash-logo {
  display: inline-block;
  margin-bottom: 5rem;
}

.dash-logo img {
  width: auto;
  height: 1.25rem;
}

/* Sidebar (fixed to viewport) */
.dash-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  flex: 1;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--white);
  opacity: 0.5;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 400;
  transition: opacity 0.2s ease;
  text-align: left;
}

.dash-nav-item:hover {
  opacity: 0.85;
}

.dash-nav-item.active {
  opacity: 1;
  font-weight: 500;
}

.dash-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
}

.dash-signout {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--white);
  opacity: 0.5;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  margin-top: auto;
  margin-left: 1rem;
  transition: opacity 0.2s ease;
}

.dash-signout:hover {
  opacity: 0.85;
}

/* Main (offset from fixed sidebar) */
.dash-main {
  margin-left: 30rem;
  padding: 8.75rem 5rem 5rem 0;
  min-width: 0;
}

.dash-view {
  display: none;
  flex-direction: column;
  gap: 2.5rem;
}

.dash-view.active {
  display: flex;
}

.dash-view-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dash-view-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: var(--white);
}

.dash-view-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--white);
}

/* Empty state */
.dash-empty-homes {
  display: flex;
  justify-content: flex-start;
}

/* Buttons */
.dash-btn {
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  border: 0.0625rem solid transparent;
}

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

.dash-btn-primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.9);
}

.dash-btn-primary:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
  cursor: not-allowed;
}

.dash-btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.25);
}

.dash-btn-secondary:hover {
  border-color: var(--white);
}

.dash-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: transparent;
}

.dash-btn-ghost:hover,
.dash-password-row:hover .dash-btn-ghost {
  background: rgba(255, 255, 255, 0.2);
}

/* Table */
.dash-table {
  display: flex;
  flex-direction: column;
}

.dash-table-head,
.dash-table-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.dash-table-head {
  padding-bottom: 1rem;
}

.dash-th {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: var(--letter-spacing-semibold-sm);
}

.dash-td {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--white);
}

.dash-td-action {
  display: flex;
  justify-content: flex-end;
}

.dash-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--white);
  transition: opacity 0.2s ease;
}

.dash-edit-btn:hover {
  opacity: 0.7;
}

.dash-edit-btn svg {
  width: 1rem;
  height: 1rem;
}

.dash-cta-row {
  display: flex;
  margin-top: 0.5rem;
}

/* Form (dashboard dark variant) */
.dash-form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 40rem;
}

.dash-form > .dash-btn {
  align-self: flex-start;
}

.dash-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dash-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: none;
}

.dash-form-grid .form-group {
  min-width: 0;
}

.dash-form-label {
  color: rgba(255, 255, 255, 0.5);
}

.dash-form-input {
  height: 3.5rem;
  background: transparent;
  color: var(--white);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.dash-form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.dash-form-input:hover:not([readonly]) {
  border-color: var(--white);
}

.dash-form-input:focus:not([readonly]) {
  border-color: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}

.dash-form-input[readonly] {
  cursor: default;
}

.dash-password-row {
  position: relative;
  display: flex;
  align-items: center;
}

.dash-password-row .dash-form-input {
  flex: 1;
  padding-right: 11rem;
}

.dash-password-row .dash-btn-ghost {
  position: absolute;
  right: 0.5rem;
  height: 2.5rem;
}

/* Form header (Add/Edit home) */
.dash-form-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dash-back-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  border-radius: 50%;
  transition: background 0.2s ease;
}

.dash-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dash-form-actions {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

/* Tabs (Home details / Manager) */
.dash-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0 0 0.75rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  transition: color 0.2s ease;
}

.dash-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.dash-tab.active {
  color: var(--white);
}

.dash-tab.active::after {
  content: '';
  position: absolute;
  bottom: -0.0625rem;
  left: 0;
  right: 0;
  height: 0.125rem;
  background: var(--white);
}

.dash-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

.dash-tab-badge svg {
  width: 1rem;
  height: 1rem;
}

.dash-tab-panel {
  display: none;
  flex-direction: column;
  gap: 2.5rem;
}

.dash-tab-panel.active {
  display: flex;
}

.dash-divider {
  height: 0.0625rem;
  background: rgba(255, 255, 255, 0.1);
}

.dash-form-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 32rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
}

.dash-form-hint svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Manager tab specifics */
.dash-add-manager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 1.5rem;
  background: transparent;
  color: var(--white);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-semibold-sm);
  cursor: pointer;
  transition: border-color 0.2s ease;
  margin-top: 1rem;
}

.dash-add-manager:hover {
  border-color: var(--white);
}

.dash-manager-note {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Dashboard responsive */
@media (max-width: 80rem) {
  .dash-sidebar {
    width: 20rem;
  }
  .dash-main {
    margin-left: 20rem;
    padding: 8.75rem 4rem 4rem 0;
  }
}

@media (max-width: 64rem) {
  .dash-sidebar {
    width: 16rem;
    padding: 2rem;
  }
  .dash-logo {
    margin-bottom: 4rem;
  }
  .dash-main {
    margin-left: 16rem;
    padding: 7rem 3rem 3rem 0;
  }
  .dash-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .dash-sidebar {
    position: static;
    width: 100%;
    padding: 2rem 2.5rem;
    height: auto;
  }
  .dash-logo {
    margin-bottom: 2rem;
  }
  .dash-nav {
    padding-left: 0;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    flex: 0 0 auto;
  }
  .dash-nav-item span {
    display: none;
  }
  .dash-signout {
    margin: 2rem 0 0;
  }
  .dash-signout span {
    display: inline;
  }
  .dash-main {
    margin-left: 0;
    padding: 0 2.5rem 5rem;
  }
  .dash-table-head .dash-th:nth-child(n+3),
  .dash-table-row .dash-td:nth-child(n+3):not(.dash-td-action) {
    display: none;
  }
  .dash-form-header {
    flex-wrap: wrap;
  }
  .dash-form-actions {
    width: 100%;
    margin-left: 0;
  }
  .dash-password-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  .dash-password-row .dash-form-input {
    padding-right: 1.25rem;
  }
  .dash-password-row .dash-btn-ghost {
    position: static;
    align-self: flex-start;
  }
}