/* KwunjAI marketing site — shared stylesheet (all pages) */

:root {
  --color-bg: #0f1420;
  --color-surface: #000000;
  --color-surface-alt: #1c2438;
  --color-border: #2a3350;
  --color-text: #eaedf5;
  --color-text-muted: #ededed;
  --color-primary: #4f7cff;
  --color-primary-dark: #3a5fe0;
  --color-accent: var(--color-primary);
  --color-bg-overlay: rgb(0 0 0 / 50%);
  --header-bg: rgba(15, 20, 32, 0.9);
  --radius: 14px;
  --max-width: 1120px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.5 14.6a8.5 8.5 0 0 1-11-11 8.5 8.5 0 1 0 11 11Z'/%3E%3Cpath d='M18.5 3.5l.6 1.6 1.6.6-1.6.6-.6 1.6-.6-1.6-1.6-.6 1.6-.6.6-1.6Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
}

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

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

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1320px;
  margin: 0 auto;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.brand-logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.footer-brand-logo .brand-logo-icon {
  width: 22px;
  height: 22px;
}

.brand span {
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-actions .btn {
  white-space: nowrap;
}

.nav-links a {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-links a:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.nav-links a.active {
  color: var(--color-primary);
  /* background: var(--color-surface-alt); */
}

/* Mobile hamburger toggle: hidden on desktop, shown + collapses nav-links
   and nav-actions into a stacked dropdown below 860px (see media query
   further down this file). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.navbar.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .navbar {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: flex;
    order: 2;
  }

  .nav-links,
  .nav-actions {
    display: none;
    width: 100%;
  }

  .navbar.nav-open .nav-links,
  .navbar.nav-open .nav-actions {
    display: flex;
  }

  .nav-links {
    order: 3;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
  }

  .nav-links a {
    display: block;
    padding: 12px;
  }

  .nav-actions {
    order: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
  }

  .nav-actions .mode-switch {
    align-self: flex-start;
  }

  .nav-actions .btn {
    text-align: center;
  }
}

/* Page header (non-home pages) */
.page-header {
  padding: 56px 0 24px;
  text-align: center;
}

.page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 12px;
  font-weight: 800;
}

.page-header p {
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Site-wide light preview: the Dark/Light switch in the header toggles this
   class on <body>. Overriding the shared root variables here — instead of
   only styling one section — repaints the header, nav, and every section's
   text/cards/borders light too, since the rest of this file builds every
   surface off var(--color-*). */
body.page-light-preview {
  --color-bg: #f6f4fc;
  --color-surface: #fbf9ff;
  --color-surface-alt: #f2effa;
  --color-border: #e3ddf3;
  --color-text: #1a1628;
  --color-text-muted: #55506b;
  --color-primary: #ec2f7d;
  --color-primary-dark: #c2246a;
  --color-accent: var(--color-primary);
  --color-bg-overlay: rgb(246 244 252 / 55%);
  --header-bg: rgba(246, 244, 252, 0.8);
  transition: background-color 0.3s ease;
}

/* Single global Dark/Light switch: one sliding pill instead of a button pair
   repeated per section — the knob and track invert together, with the label
   always sitting opposite the knob. Frosted-glass track with a sun/moon SVG
   glyph glowing inside the knob, matching a Day/Night toggle reference. */
.mode-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 104px;
  height: 34px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
  flex-direction: row;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mode-switch[data-mode="light"] {
  flex-direction: row-reverse;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.mode-switch-knob {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6fa4ff, #2f5fe0);
  box-shadow: 0 0 14px 4px rgba(79, 124, 255, 0.65);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.mode-switch-knob::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: #fff;
  -webkit-mask: var(--icon-moon) center / contain no-repeat;
          mask: var(--icon-moon) center / contain no-repeat;
  transition: background-color 0.3s ease;
}

.mode-switch[data-mode="light"] .mode-switch-knob {
  background: radial-gradient(circle at 35% 35%, #ffb84d, #f4881f);
  box-shadow: 0 0 14px 4px rgba(244, 136, 31, 0.65);
}

.mode-switch[data-mode="light"] .mode-switch-knob::before {
  inset: 6px;
  -webkit-mask: var(--icon-sun) center / contain no-repeat;
          mask: var(--icon-sun) center / contain no-repeat;
}

.mode-switch-label {
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-text);
  transition: color 0.3s ease;
  font-family: 'IBM Plex Sans Thai';
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 12px 26px rgba(79, 124, 255, 0.45);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--color-surface-alt);
}

/* Sections */
.section {
  padding: 56px 0;
}

.section-alt {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background-image: linear-gradient(var(--color-bg-overlay), var(--color-bg-overlay)), url(/img/BG_26.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.section h2 {
  font-size: clamp(1.5rem, 3.5vw, 1.9rem);
  text-align: center;
  margin: 0 0 8px;
  font-weight: 800;
}

.section-intro {
  text-align: center;
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto 36px;
}
.section-contact {
    background-image: radial-gradient(circle, rgba(216, 70, 200, 0.42), transparent 70%), radial-gradient(circle, rgba(79, 124, 255, 0.4), transparent 70%), radial-gradient(circle, rgba(34, 211, 168, 0.32), transparent 70%), radial-gradient(circle, rgba(168, 85, 247, 0.36), transparent 70%);
    background-repeat: repeat-y;
    background-size: 55% 55%, 50% 50%, 55% 55%, 60% 60%;
    background-position: 10% 15%, 88% 10%, 15% 88%, 85% 85%;
}

hr.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Problem list */
.problem-list {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 0;
  list-style: none;
}

.problem-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  color: var(--color-text-muted);
  border-bottom: 1px dashed var(--color-border);
}

.problem-list li:last-child {
  border-bottom: none;
}

.problem-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 10px;
  color: #ff6b6b;
  font-weight: 700;
}

.lead-callout {
  text-align: center;
  font-size: 1.1rem;
  max-width: 680px;
  margin: 0 auto;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card-grid.card-grid-4up {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {
  .card-grid.card-grid-4up {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.25s ease;
}

.card-media {
  margin: -24px -24px 16px;
  padding: 6%;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--color-bg);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border: none;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

/* Dark mode only: glowing purple card borders, matching the reference look */
body:not(.page-light-preview) .card {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15), 0 8px 30px rgba(168, 85, 247, 0.12);
}

body:not(.page-light-preview) .card:hover {
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.3), 0 12px 36px rgba(168, 85, 247, 0.28);
}

.card .icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
  display: block;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Audience */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.audience-grid .card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text);
  font-size: 1.05rem;
}

/* Table */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--color-surface-alt);
}

th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

th {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
}

td {
  color: var(--color-text-muted);
}

tr:last-child td {
  border-bottom: none;
}

.table-wrap.pricing td, .table-wrap.pricing th {
  text-align: center;
}

.table-wrap.pricing td:first-child,
.table-wrap.pricing th:first-child {
  text-align: left;
}

/* The table is wider than the viewport below 640px and scrolls horizontally
   (min-width:560px above) — a static edge fade hints there's more to the
   right, since nothing else here signals the table is scrollable. */
@media (max-width: 640px) {
  .table-wrap {
    position: relative;
  }

  .table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--color-surface-alt));
    pointer-events: none;
  }
}

/* Feature blocks (features page) */
.feature-block {
  padding: 48px 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 100px;
}

.feature-block:last-of-type {
  border-bottom: none;
}

.feature-block h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  text-align: left;
  margin: 0 0 10px;
}

.feature-block .feature-num {
  color: var(--color-primary);
  font-weight: 800;
}

.feature-block p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 860px;
}

.feature-block ul {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 860px;
  padding-left: 20px;
}

.feature-block img {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  margin: 18px 0;
}

/* Full-bleed glowing showcase frame for a feature screenshot */
.feature-screen-frame {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin: 32px 0 40px;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 56px 24px;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(79, 124, 255, 0.22), transparent 70%),
    var(--color-bg);
}

.monitor-mockup {
  width: 100%;
  max-width: 1080px;
}

.monitor-screen {
  position: relative;
  padding: 16px 16px 20px;
  background: linear-gradient(180deg, #262a3a, #191c28);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.15), 0 20px 60px rgba(79, 124, 255, 0.3), 0 0 120px rgba(34, 211, 168, 0.15);
}

.monitor-screen::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}

.monitor-screen img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 8px;
}

.monitor-stand {
  width: 18px;
  height: 46px;
  margin: 0 auto;
  background: linear-gradient(180deg, #262a3a, #191c28);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.monitor-base {
  width: 200px;
  height: 14px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(180deg, #262a3a, #191c28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.monitor-callout {
  position: absolute;
  z-index: 2;
  top: 44%;
  right: -12px;
  display: flex;
  align-items: center;
}

.monitor-callout-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 10px 2px rgba(79, 124, 255, 0.8);
}

.monitor-callout-line {
  width: 56px;
  height: 1px;
  background: rgba(79, 124, 255, 0.6);
}

.monitor-callout-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(11, 14, 24, 0.85);
  border: 1px solid rgba(79, 124, 255, 0.5);
  box-shadow: 0 0 24px rgba(79, 124, 255, 0.3);
}

.monitor-callout-icon {
  font-size: 1.1rem;
}

.monitor-callout-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

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

.monitor-neon {
  position: relative;
  width: 100%;
  max-width: 480px;
  transform: rotateY(-14deg) rotateX(4deg) rotateZ(1deg);
  transform-style: preserve-3d;
}

.monitor-neon-glow-ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 95%;
  height: 60px;
  background: radial-gradient(ellipse, rgba(79, 124, 255, 0.6), rgba(34, 211, 168, 0.25) 55%, transparent 75%);
  filter: blur(18px);
}

.monitor-neon-screen {
  position: relative;
  z-index: 1;
  padding: 4px;
  border-radius: 16px;
  background: #0b0e18;
  border: 2px solid rgba(79, 124, 255, 0.85);
  box-shadow:
    0 0 12px rgba(79, 124, 255, 0.7),
    0 0 40px rgba(79, 124, 255, 0.45),
    0 0 90px rgba(34, 211, 168, 0.3);
}

.monitor-neon-screen img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 12px;
}

.monitor-neon-stand {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 34px;
  margin: 0 auto;
  background: linear-gradient(180deg, #333850, #14172400 120%), linear-gradient(180deg, #2b2f42, #14172a);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.monitor-neon-base {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 20px;
  margin: -2px auto 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a3f58, #14172a 80%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05) inset, 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Combined report section: peek carousel that scroll-snaps between screenshots */
.report-carousel {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin: 24px 0 8px;
  margin-left: -50vw;
  margin-right: -50vw;
}

.report-carousel-track {
  display: flex;
  gap: 24px;
  padding: 20px calc(50vw - min(31vw, 600px) - 8vw);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.report-carousel-track::-webkit-scrollbar {
  display: none;
}

.report-carousel-slide {
  flex: 0 0 auto;
  width: min(62vw, 1200px);
  scroll-snap-align: center;
  opacity: 0.35;
  cursor: pointer;
  transform: scale(0.88);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* The track's padding is intentionally short of what's needed to fully
   center an edge slide (that's what creates the peek on the open side) —
   without this, the browser clamps scrollLeft at 0 instead of going
   negative, and the first/last slide lands off-center. Add back exactly
   the amount the padding was shorted, but only on the missing side. */
.report-carousel-slide:first-child {
  margin-left: 8vw;
}

.report-carousel-slide:last-child {
  margin-right: 8vw;
}

.report-carousel-slide.active {
  opacity: 1;
  cursor: default;
  transform: scale(1);
}

.report-carousel-media {
  position: relative;
}

.report-carousel-slide img {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
  border: none;
  box-shadow: none;
}

/* Decorative dashed line + center dot across the image's own vertical
   middle, matching the reference "product spotlight" look. */
.report-carousel-media::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 4%;
  right: 4%;
  border-top: 2px dashed rgba(255, 255, 255, 0.4);
  z-index: 1;
  pointer-events: none;
}

.report-carousel-media::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  transform: translate(-50%, 50%);
  z-index: 2;
  pointer-events: none;
}

body.page-light-preview .report-carousel-media::before {
  border-top-color: rgba(36, 31, 56, 0.3);
}

.report-carousel-caption {
  margin-top: 34px;
  text-align: center;
}

.report-carousel-caption h3 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  color: var(--color-text);
}

.report-carousel-caption p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.report-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.report-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.report-carousel-dot.active {
  background: var(--color-primary);
  transform: scale(1.3);
}

@media (max-width: 720px) {
  .report-carousel-track {
    padding: 16px 5vw;
    /* "mandatory" (desktop default above) forces a snap the instant
       horizontal scroll stops — on a touch swipe that isn't perfectly
       vertical, that can catch and force a horizontal snap while the user
       is just trying to scroll the page past this carousel, making the
       page scroll itself feel like it's catching/locking here. "proximity"
       only snaps when already near a slide, so an incidental horizontal
       nudge during a vertical swipe no longer gets grabbed. */
    scroll-snap-type: x proximity;
  }

  .report-carousel-slide {
    width: 90vw;
  }
}

/* Contact */
.contact-block {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.contact-email {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent);
}

.contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-info-list svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: inherit;
}

.contact-info-list a {
  font-size: 0.82rem;
}

.checklist {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.checklist li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--color-text-muted);
  border-bottom: 1px dashed var(--color-border);
}

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

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.steps {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 10px 0 10px 42px;
  color: var(--color-text-muted);
  border-bottom: 1px dashed var(--color-border);
}

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

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA band */
.cta-band {
  text-align: center;
  padding: 56px 0;
}

.cta-band h2 {
  margin-bottom: 12px;
}

.cta-band p {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: rgba(24, 26, 34, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* Rounded floating-card footer, matching the homepage's look — the
   homepage gets its own rounded corners a different way (its footer wraps
   a looping background video via .footer-bg-overlay2, radius handled
   there instead), so this is scoped to every other page to avoid
   double-applying/conflicting with that video-footer treatment. */
body:not(.has-closing-cta) .site-footer {
  margin: 40px 20px 20px;
  border-radius: 32px;
}

body:not(.page-light-preview) .site-footer {
  border: 1px solid rgba(124, 158, 255, 0.3);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(79, 124, 255, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .footer-brand-logo,
.site-footer .footer-col-title {
  color: #fff;
}

.site-footer .footer-social a {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.site-footer .footer-social a:hover {
  border-color: #fff;
  color: #fff;
}

.site-footer .footer-top,
.site-footer .footer-bottom {
  border-color: rgba(255, 255, 255, 0.15);
}

body.page-light-preview .site-footer {
  background: rgba(246, 244, 252, 0.2);
  box-shadow: 0 24px 60px rgba(36, 31, 56, 0.2);
  color: rgba(36, 31, 56, 0.7);
}

body.page-light-preview .site-footer a {
  color: rgba(36, 31, 56, 0.7);
}

body.page-light-preview .site-footer a:hover {
  color: #241f38;
}

body.page-light-preview .site-footer .footer-brand-logo,
body.page-light-preview .site-footer .footer-col-title {
  color: #241f38;
}

body.page-light-preview .site-footer .footer-social a {
  border-color: rgba(36, 31, 56, 0.18);
  background: rgba(246, 244, 252, 0.18);
  color: #241f38;
}

body.page-light-preview .site-footer .footer-social a:hover {
  border-color: #241f38;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: 24px;
  padding: 28px 0 20px;
}

.footer-top > *:not(:first-child) {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

body.page-light-preview .footer-top > *:not(:first-child) {
  border-left-color: rgba(36, 31, 56, 0.14);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 800;
}

.footer-brand-logo span {
  color: var(--color-primary);
}

.footer-col-title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.footer-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-size: 0.82rem;
}

.footer-social {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body:not(.page-light-preview) .footer-social a {
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.2), 0 0 20px rgba(79, 124, 255, 0.45);
}

.footer-social svg {
  width: 14px;
  height: 14px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
}

.footer-bottom a {
  color: inherit;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }

  .footer-top > * {
    padding-left: 0;
    border-left: none;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-social {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  /* The homepage footer floats its content over a looping background video
     (.footer-bg-overlay2, 38% opacity) — fine on a large desktop display,
     but on a smaller mobile screen (often viewed in brighter, less
     controlled lighting) that same transparency lets the video show
     through enough to hurt the footer text's contrast. Opaqued up only
     here rather than touching the frosted-glass look desktop was tuned for.
     (The light-mode half of this lives further down, right after
     body.page-light-preview .footer-bg-overlay2's own rule — same
     selector specificity, so source order decides the winner, and this
     block would otherwise lose to that later rule.) */
  body:not(.page-light-preview) .footer-bg-overlay2 {
    background-color: rgba(20, 22, 30, 0.86);
  }
}

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Footer background video (video spans the whole footer card) ---------- */
.footer-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.3s ease;
}

body.page-light-preview .footer-bg-overlay {
  background: rgba(246, 244, 252, 0.15);
}

.footer-bg-overlay2 {
  width: 98%;
  position: relative;
  z-index: 1;
  margin: 15px auto;
  padding: 0px 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgb(59 59 59 / 38%);
  border-radius: 32px;
  opacity: 1;
  transform: none;
}

body.page-light-preview .footer-bg-overlay2 {
  background-color: rgba(246, 244, 252, 0.16);
}

/* Mobile contrast fix (see the max-width:900px block above for the
   dark-mode half) — same selector specificity as the rule right above,
   so this has to come after it in source order to win. */
@media (max-width: 900px) {
  body.page-light-preview .footer-bg-overlay2 {
    background-color: rgba(246, 244, 252, 0.88);
  }
}

.site-footer.has-footer-video .footer-top,
.site-footer.has-footer-video .footer-bottom {
  position: relative;
  z-index: 1;
}

/* ---------- Closing CTA (full-bleed, video background) ---------- */
.closing-cta {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 160px;
  overflow: hidden;
}

.closing-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 20, 32, 0.55) 0%, rgba(15, 20, 32, 0.3) 45%, rgba(15, 20, 32, 0.4) 100%);
  transition: background 0.3s ease;
}

body.page-light-preview .closing-cta-overlay {
  background: linear-gradient(180deg, rgba(246, 244, 252, 0.5) 0%, rgba(246, 244, 252, 0.25) 45%, rgba(246, 244, 252, 0.35) 100%);
}

.closing-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-cta-content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--color-text);
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-actions-bottom {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 40px;
}

/* Pages with a closing-cta: footer floats as a frosted glass card over the video */
body.has-closing-cta .closing-cta {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 90px 0 70px;
  justify-content: center;
}

/* Homepage: closing-cta is just a content wrapper now — the video is the footer's own background */
body.page-home.has-closing-cta .closing-cta {
  position: relative;
  z-index: 1;
  margin-top: 0;
  height: auto;
  min-height: 0;
  padding: 90px 0 60px;
  justify-content: center;
  overflow: visible;
}

body.has-closing-cta .cta-actions-bottom {
  position: static;
  margin-top: 36px;
}

.closing-cta-qr {
  position: relative;
  z-index: 1;
  margin: 24px auto 0;
  width: 160px;
  height: 160px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

body.page-light-preview .closing-cta-qr {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.closing-cta-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Pull the footer up so it overlaps the closing-cta video like a floating card */
body.has-closing-cta .site-footer {
  margin-top: -72px;
}

/* Homepage: footer sits directly under the (now content-sized) video, rounded corners only */
body.page-home.has-closing-cta .site-footer {
  margin-top: 0;
}

.cta-actions-frosted .btn {
  background: rgba(24, 26, 34, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.cta-actions-frosted .btn:hover {
  background: rgba(34, 37, 48, 0.35);
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
  transform: translateY(-2px);
}

body.page-light-preview .cta-actions-frosted .btn {
  background: rgba(246, 244, 252, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(36, 31, 56, 0.18);
  color: #241f38;
  box-shadow: 0 8px 24px rgba(36, 31, 56, 0.15);
}

body.page-light-preview .cta-actions-frosted .btn:hover {
  background: rgba(246, 244, 252, 0.3);
  border-color: rgba(36, 31, 56, 0.32);
  color: #241f38;
}

/* About page design principles */
.principle {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.principle:last-child {
  border-bottom: none;
}

.principle h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--color-primary);
}

.principle p {
  margin: 0;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .section {
    padding: 40px 0;
  }
}

/* ---------- Mobile signup CTA + onboarding modal ---------- */
.signup-cta {
  margin: 40px 0 0;
  text-align: center;
}

.signup-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(79, 124, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.signup-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(79, 124, 255, 0.45);
}

body.page-light-preview .signup-cta-btn {
  box-shadow: 0 14px 30px rgba(124, 108, 240, 0.35);
}

body.page-light-preview .signup-cta-btn:hover {
  box-shadow: 0 18px 36px rgba(124, 108, 240, 0.45);
}

.signup-cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.signup-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 12, 20, 0.6);
  backdrop-filter: blur(4px);
}

.signup-modal-overlay[hidden] {
  display: none;
}

.signup-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.signup-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-modal-eyebrow {
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.signup-modal h2 {
  text-align: center;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.signup-qr-card {
  background: var(--color-surface-alt);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 24px;
}

.signup-qr-heading {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 20px;
}

.signup-qr-image-wrap {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  padding: 12px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.15);
}

.signup-qr-image-wrap img {
  width: 100%;
  height: 100%;
}

.signup-qr-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.signup-qr-note strong {
  color: var(--color-text);
}

.signup-steps-intro {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 0 24px;
}

.signup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.signup-step {
  display: flex;
  gap: 16px;
}

.signup-step-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-step-body h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.signup-step-body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.signup-step-bullets {
  list-style: none;
  margin: 6px 0;
  padding: 0;
}

.signup-step-bullets li {
  position: relative;
  padding-left: 16px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.signup-step-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.signup-step-note {
  margin-top: 6px !important;
  color: var(--color-text-muted) !important;
  font-size: 0.86rem !important;
  opacity: 0.75;
}

.signup-step-success {
  margin-top: 8px !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  .signup-modal {
    padding: 32px 20px;
  }
}

/* ---------- About page: intro text sized to match the enlarged device mockup below ---------- */
.about-intro-section h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.about-intro-section .section-intro {
  font-size: 1.2rem;
  max-width: 880px !important;
}

.about-intro-section .lead-callout {
  font-size: 1.3rem;
  max-width: 780px;
}

.about-devices-bg {
  display: flex;
  width: 1440px;
  max-width: 100%;
  margin: 50px auto;
  flex-direction: column;
}

/* ---------- About page: layered monitor + phone device mockup ---------- */
.about-devices-section {
  position: relative;
  padding: 20px 0 60px;
  background: var(--color-bg);
  overflow: hidden;
}

.about-devices-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 620px 460px at 12% 15%, rgba(110, 225, 195, 0.35), transparent 62%),
    radial-gradient(ellipse 680px 500px at 88% 85%, rgba(150, 120, 255, 0.35), transparent 62%);
  filter: blur(30px);
}

.about-devices {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px 72px;
}

.about-devices-monitor {
  width: 100%;
  display: block;
  margin: 0;
  border: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.3));
}

.about-devices-phone {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 24%;
  display: block;
  margin: 0;
  border: none;
  transform: rotate(-4deg);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.35));
}

@media (max-width: 640px) {
  .about-devices {
    padding: 0 24px 56px;
  }

  .about-devices-phone {
    width: 28%;
    right: 4px;
  }
}

/* ---------- Products page: platform overview monitor mockup ---------- */
.products-hero-device {
  text-align: center;
  max-width: 1080px;
  margin: 32px auto 8px;
}

.products-hero-device img {
  display: inline-block;
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  margin: 0;
  border: none;
}

.products-hero-img-main {
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.3));
}

/* Products page dark mode: deeper near-black background with a pink/magenta
   primary accent, matching the actual KwunjAI app's dark theme tone. */
body.theme-products:not(.page-light-preview) {
  --color-bg: #0a0a14;
  --color-surface: #14141f65;
  --color-surface-alt: #191927;
  --color-border: #262638;
  --color-primary: #ec2f7d;
  --color-primary-dark: #c2246a;
  --color-accent: #ec2f7d;
}

/* Site-wide dark mode: same pink/magenta primary accent as products.html,
   applied on pages that don't already set their own dark accent (about,
   contact, home). Only the accent changes here — background/surface stay
   each page's existing dark palette. */
body.theme-brand-accent:not(.page-light-preview) {
  --color-primary: #ec2f7d;
  --color-primary-dark: #c2246a;
  --color-accent: #ec2f7d;
}

/* ---------- Products page: let the 8-module grid use more of the section's width ---------- */
.products-modules-section .container {
  max-width: 1440px;
}

/* Colorful glow background, matching the "ครบทุกงาน HR ในระบบเดียว" section */
.products-modules-section {
  border-top: none;
  background-image:
    radial-gradient(circle, rgba(216, 70, 200, 0.42), transparent 70%),
    radial-gradient(circle, rgba(79, 124, 255, 0.4), transparent 70%),
    radial-gradient(circle, rgba(34, 211, 168, 0.32), transparent 70%),
    radial-gradient(circle, rgba(168, 85, 247, 0.36), transparent 70%);
  background-repeat: no-repeat;
  background-size: 55% 55%, 50% 50%, 55% 55%, 60% 60%;
  background-position: 10% 15%, 88% 10%, 15% 88%, 85% 85%;
}

/* Products page: platform overview, laid out text-left / image-right like
   the homepage dashboard section — no page-header title above it anymore,
   so padding is tightened to keep everything in view without scrolling. */
.products-overview-section {
  position: relative;
  padding-top: 24px;
  padding-bottom: 220px;
  overflow: hidden;
}

.products-overview-section .container {
  max-width: 1640px;
}

.curve-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 150px;
  fill: var(--color-surface);
}

.products-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  align-items: center;
  gap: 48px;
}

.products-overview-text h2 {
  text-align: left;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin: 0 0 16px;
}

.products-overview-text p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 460px;
}

.products-overview-media .products-hero-device {
  max-width: none;
  margin: 0;
}

.products-overview-media .products-hero-device img {
  max-height: 75vh;
}

@media (max-width: 900px) {
  .products-overview-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .products-overview-text h2,
  .products-overview-text p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Contact page: info card + form ---------- */
/* ---------- Contact page: full-width signup guide card ---------- */
.signup-guide-card {
    background: #ffffff3f;
    /* border: 1px solid var(--color-border); */
    border-radius: 24px;
    /* box-shadow: var(--shadow); */
    padding: 44px 48px;
}
.signup-guide-scan {
  max-width: 420px;
  margin: 0 auto 36px;
  text-align: center;
  background: var(--color-surface-alt);
  border-radius: 18px;
  padding: 32px 28px;
}

.signup-guide-scan .signup-qr-heading {
  margin-bottom: 20px;
}

.signup-guide-scan .signup-qr-note {
  margin-bottom: 20px;
}

.signup-guide-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.signup-guide-app-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(79, 124, 255, 0.4);
}

.signup-guide-app-btn svg {
  width: 18px;
  height: 18px;
}

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

.signup-steps-timeline .signup-step {
  position: relative;
  flex-direction: column;
  background: var(--color-surface-alt);
  border-radius: 16px;
  padding: 34px 18px 20px;
  text-align: center;
}

.signup-steps-timeline .signup-step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 24px;
  height: 2px;
  background: var(--color-border);
  transform: translateY(-50%);
}

.signup-steps-timeline .signup-step:nth-child(4n)::after,
.signup-steps-timeline .signup-step:last-child::after {
  display: none;
}

.signup-steps-timeline .signup-step-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  box-shadow: 0 0 0 4px var(--color-surface);
}

.signup-steps-timeline .signup-step-body {
  width: 100%;
}

.signup-steps-timeline .signup-step-body h3 {
  text-align: center;
}

.signup-steps-timeline .signup-step-body p,
.signup-steps-timeline .signup-step-note,
.signup-steps-timeline .signup-step-success {
  text-align: center;
}

.signup-steps-timeline .signup-step-bullets {
  display: inline-block;
  text-align: left;
}

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

  .signup-steps-timeline .signup-step:nth-child(4n)::after {
    display: block;
  }

  .signup-steps-timeline .signup-step:nth-child(2n)::after {
    display: none;
  }
}

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

  .signup-steps-timeline .signup-step::after {
    display: none !important;
  }
}

.signup-guide-chip {
  margin: 32px 0 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 780px) {
  .signup-guide-card {
    padding: 32px 24px;
  }

  .signup-guide-scan {
    padding: 28px 20px;
  }
}

/* ---------- Contact page: next-steps as Q&A-style cards ---------- */
.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: qa-step;
}

.qa-grid li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.qa-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}

.qa-grid.qa-check li .qa-icon::before {
  content: "✓";
}

.qa-grid.qa-steps li {
  counter-increment: qa-step;
}

.qa-grid.qa-steps li .qa-icon::before {
  content: counter(qa-step);
}

.qa-body h3 {
  margin: 6px 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
}

.qa-body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .qa-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- Products page: "Why KwunjAI" big heading + numbered list + character art ---------- */
.why-kwunjai-section {
  position: relative;
  overflow: hidden;
}

.why-kwunjai-section::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(216, 70, 200, 0.42), transparent 70%),
    radial-gradient(circle, rgba(79, 124, 255, 0.4), transparent 70%),
    radial-gradient(circle, rgba(34, 211, 168, 0.32), transparent 70%),
    radial-gradient(circle, rgba(168, 85, 247, 0.36), transparent 70%);
  background-repeat: no-repeat;
  background-size: 55% 55%, 50% 50%, 55% 55%, 60% 60%;
  background-position: 10% 15%, 88% 10%, 15% 88%, 85% 85%;
  filter: blur(50px);
}

.why-kwunjai-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 500px;
  align-items: center;
  gap: 32px;
}

.why-kwunjai-text h2 {
  text-align: left;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 24px;
}

.why-kwunjai-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.why-kwunjai-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 16px;
}

.why-kwunjai-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-kwunjai-list p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.why-kwunjai-list strong {
  color: var(--color-text);
}

.why-kwunjai-character {
  align-self: center;
  display: flex;
  justify-content: center;
}

.why-kwunjai-character img {
  width: 100%;
  max-width: 520px;
  filter: drop-shadow(0 20px 44px rgba(216, 70, 200, 0.35));
}

@media (max-width: 900px) {
  .why-kwunjai-grid {
    grid-template-columns: 1fr;
  }

  .why-kwunjai-text h2 {
    text-align: center;
  }

  .why-kwunjai-character {
    order: -1;
  }

  .why-kwunjai-character img {
    max-width: 340px;
  }
}