:root {
  --bg: #FAFAFA;
  --text: #0E1020;
  --accent: #4F3DF5;
  --accent-light: #8B7CFF;
  --gray-50: #F7F7F9;
  --gray-100: #EEF0F5;
  --gray-300: #D8D9E3;
  --gray-400: #9CA0AE;
  --gray-500: #6B6F80;
  --line: #E5E6ED;
}

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

html, body {
  overflow: hidden; /* travado durante o hero0 (intro) — liberado via JS quando o hero1 aparece */
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  text-align: center;
  padding: 0 1.5rem;
  background: var(--bg);
  transition: opacity 0.8s ease;
}

.hero.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero1 {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero1.is-visible {
  opacity: 1;
}

.hero__title {
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2ch;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero__title.is-fading {
  opacity: 0;
  transform: translateY(0.4em);
}

.hero__title--final {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
}

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

.hero__rotator {
  display: inline-block;
  text-align: center;
}

.hero__word {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero__word.is-hidden {
  opacity: 0;
  transform: translateY(0.4em);
}

.hero__word--glow {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.6));
}

/* ---------- hero1 ---------- */

.nav1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 3rem;
}

.nav1__logo {
  height: 40px;
  width: auto;
}

.nav1__links {
  display: flex;
  gap: 2.25rem;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav1__links a {
  color: #374151;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav1__links a:hover {
  color: var(--accent);
}

.nav1__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav1__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav1__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav1__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav1__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav1__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(20, 20, 40, 0.14);
}

.btn--outline-accent {
  padding: 0.55rem 1.1rem;
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn--primary {
  padding: 0.85rem 1.4rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
}

.btn--secondary {
  padding: 0.85rem 1.4rem;
  background: #fff;
  color: var(--text);
  border: 1.5px solid var(--gray-300);
}

.hero1__content {
  display: grid;
  grid-template-columns: minmax(320px, 500px) 1fr;
  grid-template-rows: auto auto;
  column-gap: 3rem;
  row-gap: 2rem;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 3rem 3rem;
}

.hero1__left {
  grid-column: 1;
  grid-row: 1;
}

.hero1__features {
  grid-column: 1;
  grid-row: 2;
}

.hero1__right {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero1__title {
  font-size: clamp(2.5rem, 3.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

.hero1__sub {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--gray-500);
  max-width: 44ch;
}

.hero1__ctas {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.hero1__features {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}

.feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.feature__text {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--gray-500);
}

.feature__text strong {
  color: var(--text);
  font-weight: 400;
}

/* video hero1 */

.hero1__video {
  width: 100%;
  margin-top: 0.85rem;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.hero1__video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.diagram__banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  background: var(--gray-100);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.diagram__banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  flex-shrink: 0;
}

.diagram__banner p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* ---------- section 2 ---------- */

.accent {
  color: var(--accent);
}

.section2 {
  padding: 7rem 3rem 6rem;
}

.section2__container {
  max-width: 1240px;
  margin: 0 auto;
}

.section2__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 1.5rem;
  background: var(--gray-100);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.section2__title {
  text-align: center;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.reasons {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 3.5rem 0;
}

.reason {
  flex: 1;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 0 1.5rem;
  color: var(--gray-500);
  border-left: 1px solid var(--line);
}

.reason:first-child {
  border-left: none;
}

.reason span {
  font-size: 0.85rem;
  line-height: 1.4;
}

.section2__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}

.section2-video,
.insights-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.section2-video {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.section2-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.insights-card {
  align-self: stretch;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}

.insight-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
}

.insight-row__num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
}

.insight-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.insight-row p {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

.tag--red {
  background: #FEECEC;
  color: #DC2626;
}

.tag--orange {
  background: #FFF1E0;
  color: #C2691A;
}

.tag--accent {
  background: var(--gray-100);
  color: var(--accent);
}

.section2__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--gray-100);
  border-radius: 12px;
  padding: 1.1rem 1.5rem;
}

.section2__banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  flex-shrink: 0;
}

.section2__banner p {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------- section 3 ---------- */

.section3 {
  padding: 3rem 3rem 6rem;
}

.section3__container {
  max-width: 1300px;
  margin: 0 auto;
}

.section3__sub {
  text-align: center;
  font-size: 1.05rem;
  color: var(--gray-500);
  margin-top: 1rem;
}

.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0 2.5rem;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-500);
}

.step__pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.step__pill svg {
  color: var(--accent);
}

.step__line {
  position: relative;
  width: 90px;
  height: 2px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__line svg {
  position: relative;
  background: var(--bg);
  color: var(--accent);
  padding: 0 3px;
}

.mockups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.mockup {
  background: var(--gray-50);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  height: 380px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.mockup:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 32px rgba(20, 20, 40, 0.12);
}

.mockup-caption {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}

/* web mockup */

.mockup__topbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

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

.dot--red { background: #F87171; }
.dot--yellow { background: #FBBF24; }
.dot--green { background: #34D399; }

.mockup__urlbar {
  width: 55%;
  max-width: 220px;
  height: 14px;
  margin-left: 0.5rem;
  background: var(--gray-100);
  border-radius: 999px;
}

.mockup__body {
  padding: 1.1rem 1.1rem 1rem;
}

.web__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 0.9rem;
}

.web__hero {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.web__hero-text {
  flex: 1;
  min-width: 0;
}

.web__hero-text h4 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.9rem;
}

.btn--sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
}

.btn--sm:hover {
  transform: none;
  box-shadow: none;
}

.web__hero-photo {
  flex-shrink: 0;
  width: 132px;
  height: 148px;
  border-radius: 10px;
  overflow: hidden;
}

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

.web__pills {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.web__pills span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gray-500);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  background: #fff;
}

/* automate mockup */

.mockup--automate {
  position: relative;
  padding: 1.5rem 1.25rem;
}

.flow {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
}

.flow::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: var(--line);
  z-index: 0;
}

.flow__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  position: relative;
  z-index: 1;
}

.flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.flow__text {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.flow__text strong {
  color: var(--text);
  font-size: 0.9rem;
}

.flow__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
  margin-left: auto;
  flex-shrink: 0;
}

.flow__row {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.flow__card--grow {
  flex: 1;
  min-width: 0;
}

.flow__stat {
  flex-shrink: 0;
  width: 108px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  box-shadow: 0 4px 14px rgba(20, 20, 40, 0.06);
}

.flow__stat span {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: 0.02em;
}

.flow__stat strong {
  font-size: 1.4rem;
  color: var(--text);
}

/* ai mockup */

.mockup--ai {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.ai__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.ai__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.ai__header-text {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.ai__header-text strong {
  color: var(--text);
  font-size: 0.9rem;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0;
  flex: 1;
}

.chat__bubble {
  max-width: 78%;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  line-height: 1.4;
}

.chat__bubble small {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 0.2rem;
}

.chat__bubble--in {
  align-self: flex-start;
  background: var(--gray-100);
  color: var(--text);
  border-bottom-left-radius: 3px;
}

.chat__bubble--out {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border-bottom-right-radius: 3px;
}

.ai__lead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gray-50);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

.ai__avatars {
  display: flex;
}

.ai__avatars span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-300);
  border: 2px solid #fff;
  margin-left: -8px;
}

.ai__avatars span:first-child {
  margin-left: 0;
}

.ai__avatars--right {
  margin-left: auto;
  align-items: center;
}

.ai__avatars--right small {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  color: var(--gray-400);
  font-weight: 700;
}

.ai__lead-text {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.ai__lead-text strong {
  color: var(--text);
  font-size: 0.9rem;
}

/* footer bar */

.section3__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  background: var(--gray-50);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.section3__footer:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 32px rgba(20, 20, 40, 0.12);
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.footer-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.footer-item__icon--solid {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
}

.footer-arrow {
  color: var(--gray-400);
  flex-shrink: 0;
}

.footer-divider {
  width: 1px;
  height: 44px;
  background: var(--line);
}

.footer-item--highlight {
  line-height: 1.3;
}

/* ---------- section 4 ---------- */

.section4 {
  padding: 6rem 0;
  overflow: hidden;
}

.section4__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: minmax(340px, 480px) 1fr;
  gap: 4rem;
  align-items: center;
}

.section4__badge {
  display: inline-block;
  background: var(--gray-100);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.section4__title {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

.section4__text {
  font-size: 1rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-top: 1.1rem;
  max-width: 46ch;
}

.section4__bold {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.5rem;
}

.section4__underline-wrap {
  position: relative;
  color: var(--accent);
  display: inline-block;
}

.section4__underline {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: auto;
}

.mini-features {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 2.25rem;
}

.mini-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.mini-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
}

.mini-feature__icon svg {
  width: 17px;
  height: 17px;
}

.mini-feature span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.section4__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.section4__cta-arrow {
  flex-shrink: 0;
  transform: scaleX(-1);
}

.section4__cta-note {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  line-height: 1.4;
}

/* device mockup */

.section4__right {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 460px;
}

.device-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 55% 45%, #000 30%, transparent 72%);
  z-index: 0;
}

.device-dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}

.device-dot--1 {
  top: 12%;
  left: 8%;
  width: 10px;
  height: 10px;
  background: var(--accent-light);
  opacity: 0.7;
}

.device-dot--2 {
  top: 62%;
  left: 4%;
  width: 6px;
  height: 6px;
  background: var(--accent);
  opacity: 0.6;
}

.device-dot--3 {
  top: 20%;
  right: 6%;
  width: 8px;
  height: 8px;
  background: var(--accent-light);
  opacity: 0.55;
}

.device-glow {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 560px;
  height: 560px;
  background:
    radial-gradient(circle, rgba(139, 124, 255, 0.45), transparent 60%),
    radial-gradient(circle, rgba(79, 61, 245, 0.3), transparent 70%);
  filter: blur(30px);
  transform: translateX(-50%);
  z-index: 0;
}

.device-ground-glow {
  position: absolute;
  bottom: -4%;
  left: 50%;
  width: 70%;
  height: 60px;
  background: radial-gradient(ellipse, rgba(79, 61, 245, 0.35), transparent 75%);
  filter: blur(16px);
  transform: translateX(-50%);
  z-index: 0;
}

.laptop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
}

.laptop__screen {
  position: relative;
  background: #17181f;
  border: 2px solid #33343d;
  border-radius: 14px 14px 4px 4px;
  padding: 10px;
  box-shadow: 0 40px 70px rgba(20, 20, 40, 0.3);
  overflow: hidden;
}

.laptop__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, transparent 28%, transparent 72%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
  z-index: 5;
}

.laptop__base {
  position: relative;
  height: 16px;
  background: linear-gradient(180deg, #f0f1f5, #c3c5d0);
  border-radius: 0 0 12px 12px;
  margin: 0 -18px;
  box-shadow: 0 16px 26px rgba(20, 20, 40, 0.2);
}

.laptop__base::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 6px;
  background: #b3b5c0;
  border-radius: 0 0 8px 8px;
}

.phone {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: -4%;
  width: 148px;
}

.phone__screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  background: #17181f;
  border: 2px solid #33343d;
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 24px 44px rgba(20, 20, 40, 0.25);
  overflow: hidden;
}

.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
  z-index: 5;
}

.phone__screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: #000;
  z-index: 3;
}

.phone__screen .lumina {
  height: 100%;
}

/* lumina demo site */

.lumina {
  background: #fdfdfc;
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.lumina__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #eee;
}

.lumina__logo {
  display: flex;
  flex-direction: column;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  line-height: 1.1;
}

.lumina__logo small {
  font-family: 'Inter', sans-serif;
  font-size: 0.45rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #999;
}

.lumina__links {
  display: flex;
  gap: 1.25rem;
  font-size: 0.7rem;
  color: #444;
}

.lumina__btn {
  display: inline-block;
  background: #111;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 5px;
  white-space: nowrap;
}

.lumina__link {
  font-size: 0.7rem;
  font-weight: 600;
  color: #111;
}

.lumina__hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 1.25rem;
}

.lumina__hero-text {
  flex: 1;
  min-width: 0;
}

.lumina__eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: 0.6rem;
}

.lumina__hero-text h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: #1a1a1a;
  margin-bottom: 0.6rem;
}

.lumina__hero-text p {
  font-size: 0.72rem;
  color: #777;
  line-height: 1.5;
  max-width: 34ch;
  margin-bottom: 1rem;
}

.lumina__hero-ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lumina__photo {
  flex-shrink: 0;
  width: 220px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

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

.lumina__stats {
  display: flex;
  justify-content: space-around;
  background: #f4f4f2;
  padding: 1rem 1.25rem;
}

.lumina__stats div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #999;
}

.lumina__stats strong {
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 700;
}

.lumina__stats span {
  font-size: 0.6rem;
  color: #999;
  display: block;
}

/* mobile lumina inside phone */

.lumina--mobile .lumina__nav {
  padding: 0.7rem 0.9rem;
}

.lumina--mobile .lumina__logo {
  font-size: 0.6rem;
}

.lumina--mobile .lumina__hero-text {
  padding: 1rem 0.9rem 0;
}

.lumina--mobile .lumina__hero-text h3 {
  font-size: 1rem;
}

.lumina--mobile .lumina__hero-text p {
  font-size: 0.6rem;
}

.lumina--mobile .lumina__btn {
  font-size: 0.6rem;
  margin-right: 0.5rem;
}

.lumina--mobile .lumina__link {
  font-size: 0.6rem;
}

.lumina__stats--mobile {
  justify-content: flex-start;
  padding: 0.8rem 0.9rem;
  margin-top: 0.75rem;
}

/* ---------- section 5 (dark) ---------- */

.section5 {
  position: relative;
  background: #0A0A0F;
  padding: 5rem 3rem 6rem;
  overflow: hidden;
}

.section5__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 65%);
  z-index: 0;
}

.section5__container {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.section5__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem;
  background: rgba(139, 124, 255, 0.12);
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.section5__title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.section5__sub {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: #9A9AA8;
}

/* ---------- carousel ---------- */

.carousel {
  position: relative;
  margin-top: 4.5rem;
  height: min(58vw, 700px);
  min-height: 340px;
  perspective: 1800px;
  outline: none;
}

.carousel__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 760px;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--glow, rgba(139, 124, 255, 0.35)), transparent 70%);
  filter: blur(50px);
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: opacity 0.6s ease;
  z-index: 0;
  pointer-events: none;
}

.carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  touch-action: pan-y;
}

.carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  cursor: grab;
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel__slide:active {
  cursor: grabbing;
}

.carousel__slide.is-dragging {
  transition: none;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.carousel__hotspot {
  position: absolute;
  top: 50%;
  left: 18%;
  width: 7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 20;
}

.carousel__hotspot--next {
  left: 82%;
}

.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.carousel__dot {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease;
}

.carousel__dot.is-active {
  width: 44px;
  background: var(--glow, #8B7CFF);
}

@media (max-width: 900px) {
  .carousel__slide {
    width: 82%;
  }

  .carousel__hotspot {
    left: 11.5%;
  }

  .carousel__hotspot--next {
    left: 88.5%;
  }
}

@media (max-width: 600px) {
  .carousel {
    height: 70vw;
  }

  .carousel__slide {
    width: 94%;
  }

  .carousel__hotspot {
    left: 6%;
  }

  .carousel__hotspot--next {
    left: 94%;
  }
}

/* ---------- section 6 (system builder) ---------- */

.section6 {
  padding: 6rem 3rem 7rem;
}

.section6__container {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.section6__eyebrow {
  display: inline-block;
  background: var(--gray-100);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.section6__title {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.section6__sub {
  margin-top: 0.9rem;
  font-size: 1.05rem;
  color: var(--gray-500);
}

.section6__accent {
  margin-top: 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.section6__helper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--gray-400);
}

.section6__helper svg {
  color: var(--gray-300);
}

/* services grid */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  text-align: left;
}

.service-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.service-tile:hover {
  border-color: var(--accent-light);
  transform: translateY(-2px);
}

.service-tile.is-selected {
  border-color: var(--accent);
  background: #F5F4FF;
}

.service-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.service-tile__name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.service-tile__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.service-tile__price small {
  font-weight: 500;
  color: var(--gray-400);
  font-size: 0.7rem;
}

.service-tile__check {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.service-tile__check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.service-tile.is-selected .service-tile__check {
  background: var(--accent);
  border-color: var(--accent);
}

.service-tile.is-selected .service-tile__check::after {
  opacity: 1;
}

/* tooltip */

.service-tooltip {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 16px 32px rgba(20, 20, 40, 0.12);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-tooltip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.service-tooltip strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.service-tooltip p {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.4;
}

/* complexity slider */

.complexity {
  position: relative;
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 2rem 1.75rem;
  text-align: left;
}

.complexity__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.complexity__current {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}

.complexity__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.complexity__end {
  font-size: 0.85rem;
  color: var(--gray-500);
  flex-shrink: 0;
}

.complexity__track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--gray-100);
}

.complexity__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.complexity__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.complexity__input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(79, 61, 245, 0.4);
  cursor: pointer;
}

.complexity__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(79, 61, 245, 0.4);
  cursor: pointer;
}

.complexity__input::-moz-range-track {
  background: transparent;
}

.complexity__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* summary bar */

.summary-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem 1.75rem;
  box-shadow: 0 20px 40px rgba(20, 20, 40, 0.06);
  text-align: left;
  flex-wrap: wrap;
}

.summary__block--setup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.summary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--accent);
  flex-shrink: 0;
}

.summary__label {
  display: block;
  font-size: 0.72rem;
  color: var(--gray-500);
}

.summary__block--setup strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  transition: opacity 0.15s ease;
}

.summary__block--monthly strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.summary__block--monthly small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-400);
}

.summary__list {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.82rem;
  color: var(--text);
}

.summary__list-empty {
  color: var(--gray-400);
}

.summary__list-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.summary__list-item svg {
  color: var(--accent);
  flex-shrink: 0;
}

.summary__list-more {
  color: var(--accent);
  font-weight: 600;
}

.summary__complexity strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
}

.summary__cta {
  flex-shrink: 0;
  padding: 0.85rem 1.4rem;
}

.section6__disclaimer {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gray-500);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-tooltip {
    width: calc(100% - 2rem);
  }
}

/* ---------- section 7 (final CTA) ---------- */

.section7 {
  position: relative;
  padding: 6rem 3rem 7rem;
  overflow: hidden;
  background: linear-gradient(160deg, #FAFAFA 55%, #EFEDFF 100%);
}

.section7__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 65%;
  z-index: 0;
}

.section7__waves g use {
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}

.section7__container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.section7__eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto;
  background: var(--gray-100);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.section7__title {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.section7__sub {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: var(--gray-500);
  line-height: 1.6;
}

.section7__cta {
  margin-top: 2.5rem;
  padding: 1.1rem 2rem;
  font-size: 1rem;
  box-shadow: 0 20px 45px rgba(79, 61, 245, 0.3);
}

.section7__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.section7__trust span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--gray-500);
  padding-right: 1.5rem;
  border-right: 1px solid var(--line);
}

.section7__trust span:last-child {
  border-right: none;
  padding-right: 0;
}

.section7__trust svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

/* footer */

.site-footer {
  background: #EFEDFF;
  border-top: 1px solid var(--line);
}

.site-footer__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__legal {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--gray-500);
}

.site-footer__legal-links {
  display: flex;
  gap: 1.5rem;
}

.site-footer__legal-links a {
  color: var(--gray-500);
  text-decoration: none;
}

.site-footer__legal-links a:hover {
  color: var(--accent);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-footer__logo {
  height: 42px;
  width: auto;
}

.site-footer__brand p {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.4;
}

.site-footer__mark {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .section7__trust {
    flex-direction: column;
    gap: 0.75rem;
  }

  .section7__trust span {
    border-right: none;
    padding-right: 0;
  }

  .site-footer__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ============================================================
   MOBILE (desktop layout above stays untouched below 900px)
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- nav ---------- */

  .nav1 {
    position: relative;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
  }

  .nav1__toggle {
    display: flex;
  }

  .nav1__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(20, 20, 40, 0.1);
    z-index: 40;
  }

  .nav1__links.is-open {
    display: flex;
  }

  .nav1__links li {
    width: 100%;
  }

  .nav1__links a {
    display: block;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--line);
  }

  /* ---------- hero0 ---------- */

  .hero {
    padding: 0 1.25rem;
    gap: 2rem;
  }

  /* ---------- hero1 ---------- */

  .hero1__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 1.75rem 1.25rem 3rem;
  }

  .hero1__left {
    order: 1;
  }

  .hero1__right {
    order: 2;
  }

  .hero1__features {
    order: 3;
    flex-wrap: wrap;
    row-gap: 1.5rem;
  }

  .feature {
    flex: 1 1 45%;
  }

  .hero1__ctas {
    flex-wrap: wrap;
  }

  /* ---------- section 2 ---------- */

  .section2 {
    padding: 4.5rem 1.25rem 4rem;
  }

  .reasons {
    flex-wrap: wrap;
    row-gap: 1.5rem;
    margin: 2.5rem 0;
  }

  .reason {
    flex: 1 1 45%;
    max-width: none;
    min-width: 0;
    border-left: none;
    padding: 0;
  }

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

  .section2__cards > * {
    min-width: 0;
  }

  .insight-row p {
    min-width: 0;
  }

  .section2__banner {
    text-align: left;
  }

  /* ---------- section 3 ---------- */

  .section3 {
    padding: 1rem 1.25rem 4rem;
  }

  .steps {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .step__line {
    width: 48px;
  }

  .mockups {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 420px;
    margin: 0 auto;
  }

  .mockups > * {
    min-width: 0;
  }

  .mockup {
    height: auto;
  }

  .section3__footer {
    justify-content: flex-start;
    padding: 1.25rem 1.5rem;
  }

  .footer-divider {
    display: none;
  }

  /* ---------- section 4 ---------- */

  .section4 {
    padding: 4.5rem 0;
  }

  .section4__container {
    grid-template-columns: 1fr;
    padding: 0 1.25rem;
    gap: 3rem;
  }

  .section4__container > * {
    min-width: 0;
  }

  .section4__right {
    min-height: 340px;
  }

  /* the laptop mockup keeps the desktop "lumina" markup, but at mobile
     widths that content needs to shed the nav links and stack instead
     of overflowing the narrower screen */
  .laptop .lumina__links {
    display: none;
  }

  .laptop .lumina__nav {
    padding: 0.65rem 0.75rem;
  }

  .laptop .lumina__logo {
    font-size: 0.65rem;
  }

  .laptop .lumina__btn {
    font-size: 0.62rem;
    padding: 0.45rem 0.75rem;
  }

  .laptop .lumina__hero {
    flex-direction: column;
    align-items: stretch;
    padding: 1.1rem 0.9rem;
    gap: 0.9rem;
  }

  .laptop .lumina__hero-text p {
    max-width: none;
  }

  .laptop .lumina__photo {
    width: 100%;
    height: 150px;
  }

  .laptop .lumina__stats {
    flex-wrap: wrap;
    row-gap: 0.6rem;
    justify-content: flex-start;
    padding: 0.9rem;
  }

  .mini-features {
    flex-wrap: wrap;
    row-gap: 1.25rem;
  }

  .mini-feature {
    flex: 1 1 28%;
  }

  /* ---------- section 5 ---------- */

  .section5 {
    padding: 4rem 1.25rem 4.5rem;
  }

  /* ---------- section 6 ---------- */

  .section6 {
    padding: 4.5rem 1.25rem 5rem;
  }

  .complexity {
    padding: 1.5rem 1.25rem;
  }

  .complexity__current {
    position: static;
    display: block;
    transform: none;
    margin-top: 0.35rem;
  }

  /* ---------- section 7 ---------- */

  .section7 {
    padding: 4.5rem 1.25rem 5rem;
  }

  /* ---------- footer ---------- */

  .site-footer__container,
  .site-footer__legal {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 520px) {
  .hero1__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero1__ctas .btn {
    justify-content: center;
  }

  .reason {
    flex: 1 1 100%;
  }

  .feature {
    flex: 1 1 100%;
  }

  .mini-feature {
    flex: 1 1 45%;
  }

  .insight-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "num icon text"
      "tag tag tag";
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    align-items: start;
  }

  .insight-row__num {
    grid-area: num;
  }

  .insight-row__icon {
    grid-area: icon;
  }

  .insight-row p {
    grid-area: text;
  }

  .insight-row .tag {
    grid-area: tag;
    justify-self: start;
    margin-left: calc(28px + 0.75rem);
  }
}