:root {
  --navy-950: #0a1f33;
  --navy-900: #102d4a;
  --navy-800: #163d63;
  --navy-700: #1e4f7c;
  --steel-600: #3a6c93;
  --steel-500: #5a86a9;
  --steel-400: #7da2c0;
  --silver-700: #5c6975;
  --silver-600: #8693a0;
  --silver-500: #b1bcc6;
  --silver-400: #cdd6df;
  --silver-300: #e2e8ef;
  --silver-200: #eef2f6;
  --silver-100: #f5f7fa;
  --graphite: #2c333b;
  --muted: #5c6975;
  --line: #dde3eb;
  --surface: #ffffff;
  --soft: #f5f7fa;
  --soft-blue: #eaf1f8;
  --success: #2d8c71;
  --danger: #b3261e;
  --shadow: 0 22px 60px rgba(10, 31, 51, 0.12);
  --radius: 8px;
  --container: 1180px;
  --header-height: 82px;
}

.product-page {
  background: #fff;
}

.product-titlebar {
  padding: 54px 0 38px;
  background: #e4f2f2;
}

.product-breadcrumb {
  margin-bottom: 14px;
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-titlebar h1 {
  max-width: 1040px;
  margin: 0;
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
}

.product-content {
  padding: 34px 0 82px;
}

.product-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.product-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 18px);
  display: grid;
  gap: 0;
  padding: 14px 0;
  background: #f2fbfb;
  border-left: 6px solid #c9e5d9;
}

.product-sidebar a {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  color: #7f9aa1;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.product-sidebar a.is-active,
.product-sidebar a:hover {
  color: #f05125;
}

.product-sidebar i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.product-sidebar i::before {
  position: absolute;
  inset: 4px 2px;
  content: "";
  border: 2px solid currentColor;
  border-radius: 3px;
}

.product-sidebar i::after {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

.product-main {
  min-width: 0;
  padding: 0 0 0 8px;
}

.product-meta {
  float: right;
  margin: 0 0 20px 28px;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 17px;
  line-height: 1.9;
  text-align: right;
}

.product-intro {
  max-width: 850px;
  margin-bottom: 34px;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.9;
}

.product-detail {
  clear: both;
  padding: 0 0 42px;
  margin-bottom: 42px;
  border-bottom: 1px solid #e6eeee;
  scroll-margin-top: calc(var(--header-height) + 28px);
}

.product-detail h2 {
  margin-bottom: 18px;
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
}

.product-detail p,
.product-detail li {
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.9;
}

.product-detail ul {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.product-detail li {
  padding-left: 6px;
}

.product-detail-media {
  margin-top: 24px;
}

.product-detail-media img {
  width: min(100%, 800px);
  max-height: 620px;
  object-fit: contain;
  object-position: left center;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--graphite);
  font-family: "Roboto Condensed", "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--surface);
}

body.nav-open {
  overflow: hidden;
}

/* Form controls không kế thừa font từ body theo mặc định, cần reset rõ ràng. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

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

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--navy-950);
  line-height: 1.12;
  letter-spacing: 0;
}

h1 {
  max-width: 740px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 60px;
  font-weight: 800;
  margin-bottom: 22px;
}

h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 18px;
}

h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

p {
  color: var(--muted);
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.narrow-container {
  width: min(100% - 40px, 880px);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 12px 26px rgba(7, 29, 51, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 28px;
}

.site-brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.site-logo,
.custom-logo {
  width: auto;
  max-width: 240px;
  max-height: 56px;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menu,
.footer-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--navy-950);
  font-weight: 700;
  font-size: 15px;
  transition: color 0.25s ease;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--steel-600);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.menu a:hover,
.menu a.is-active,
.footer-menu a:hover {
  color: var(--steel-600);
}

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

/* ── Dropdown menu ── */
.menu-item-has-children {
  position: relative;
}

.menu-arrow {
  display: block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.25s ease;
}

.menu-item-has-children:hover .menu-arrow {
  transform: translateY(1px) rotate(-135deg);
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(10, 31, 51, 0.14), 0 2px 8px rgba(10, 31, 51, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.sub-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sub-menu li {
  margin: 0;
}

.sub-menu a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: var(--navy-950);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.sub-menu a::after {
  display: none;
}

.sub-menu a:hover {
  color: var(--steel-600);
  background: var(--soft-blue);
}

.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  line-height: 1.15;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.nav-cta,
.button-primary {
  color: #fff;
  background: var(--navy-900);
  box-shadow: 0 14px 30px rgba(11, 45, 77, 0.22);
}

.button-secondary {
  color: var(--navy-900);
  background: #fff;
  border-color: var(--line);
}

.nav-cta:hover,
.button:hover {
  transform: translateY(-2px);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--navy-950);
}

.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  padding: 48px 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(61, 135, 184, 0.16), transparent 34%),
    linear-gradient(135deg, #f8fbfd 0%, #eef5fa 52%, #ffffff 100%);
}

.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.96;
}

.hero-section::before {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  content: "";
  background: var(--line);
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-grid,
.split-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  gap: 56px;
  align-items: center;
}

.reverse {
  grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1fr);
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--steel-600);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}

.hero-copy p {
  max-width: 650px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.hero-button {
  min-height: 38px;
  padding: 10px 20px;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid var(--navy-900);
  border-radius: 999px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  font-weight: 800;
  box-shadow: none;
}

.hero-button:hover {
  color: #fff;
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.hero-visual {
  position: relative;
}

.help-blocks-section {
  padding: 62px 0;
  background: #fff;
}

.help-blocks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.help-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 364px;
  padding: 28px;
  overflow: hidden;
  color: #033939;
  background: #f5f9fb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: "Roboto Condensed", sans-serif;
  box-shadow: 0 18px 46px rgba(7, 29, 51, 0.08);
}

.help-card::after {
  position: absolute;
  inset: auto -40px -70px auto;
  width: 220px;
  height: 220px;
  content: "";
  background: radial-gradient(circle, rgba(47, 111, 159, 0.16), transparent 66%);
  pointer-events: none;
}

.help-card-intro {
  background:
    linear-gradient(135deg, rgba(237, 245, 251, 0.92), rgba(255, 255, 255, 0.88)),
    repeating-linear-gradient(-45deg, rgba(47, 111, 159, 0.1) 0 2px, transparent 2px 12px);
}

.help-kicker {
  display: block;
  margin-bottom: 22px;
  color: var(--steel-600);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.help-card h2 {
  margin-bottom: 22px;
  color: var(--steel-600);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 35px;
  font-weight: 800;
  line-height: 1.22;
}

.help-card h3 {
  min-height: 58px;
  margin: 0 0 28px 76px;
  color: var(--steel-600);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
}

.help-card p {
  flex: 1;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 2.05;
}

.help-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 28px;
  color: #fff;
  background: linear-gradient(90deg, var(--steel-600) 50%, #1a3a5c 50%);
  background-size: 200% 100%;
  background-position: left center;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.help-card a:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 58, 92, 0.3);
}

.help-card a:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 12px rgba(26, 58, 92, 0.2);
}

.help-icon {
  position: absolute;
  top: 24px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background: linear-gradient(135deg, #7f75d6, #b07bcf);
  border-radius: 50%;
}

.icon-stack,
.icon-chat {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
}

.icon-stack::before,
.icon-stack::after {
  position: absolute;
  content: "";
  border: 3px solid currentColor;
  border-radius: 2px;
}

.icon-stack::before {
  inset: 0 8px 8px 0;
}

.icon-stack::after {
  inset: 8px 0 0 8px;
  box-shadow: -8px -8px 0 -3px currentColor;
}

.icon-chat {
  border: 3px solid currentColor;
  border-radius: 4px;
}

.icon-chat::before {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 7px;
  height: 3px;
  content: "";
  background: currentColor;
  box-shadow: 0 8px 0 currentColor;
}

.icon-chat::after {
  position: absolute;
  left: 6px;
  bottom: -9px;
  width: 10px;
  height: 10px;
  content: "";
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: skewY(-36deg);
}

.device-panel,
.overview-card,
.app-visual {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.device-panel {
  position: relative;
  padding: 0;
  background: linear-gradient(135deg, #0A1F33, #163D63);
  border: 0;
  /*
   * Tỉ lệ 5:4 khớp với ảnh hero default (900x720).
   * Đặt aspect-ratio để box giữ kích thước ổn định trước khi ảnh tải xong,
   * tránh CLS và tạo skeleton mượt.
   */
  aspect-ratio: 5 / 4;
}

/* Skeleton shimmer hiển thị trong khi ảnh đang tải */
.device-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 100%;
  animation: pms-hero-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.device-panel img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Khi ảnh đã load xong, ẩn shimmer (browser tự set complete=true) */
.device-panel img[loading="eager"] ~ * {
  display: none;
}

@keyframes pms-hero-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .device-panel::before {
    animation: none;
  }
}

.page-section {
  padding: 88px 0;
}

.overview-section,
.pricing-section {
  background: var(--soft);
}

.overview-header {
  text-align: center;
  margin-bottom: 56px;
}

.overview-header h2 {
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
  margin-bottom: 24px;
}

.overview-header p {
  max-width: 800px;
  margin: 0 auto;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.85;
}

.overview-showcase {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.overview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 62px;
  align-items: center;
}

.overview-row:nth-child(even) {
  /* Alternating row pattern looks beautiful! (Wait, the user said "1 trên 1 dưới đối xứng với ký tự bên kia", uniform alignment is safer and matches typical symmetry, but let's keep it uniform first unless alternating is requested. Let's make it uniform first as defined in template) */
}

.overview-media {
  width: 80%;
  justify-self: center;
}

.overview-row .overview-feature-list article {
  border: 0;
  padding: 0;
}

.overview-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #dff0f1;
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(10, 31, 51, 0.12);
}

.overview-shot img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.overview-shot-dashboard {
  aspect-ratio: 565 / 372;
}

.overview-shot-app {
  aspect-ratio: 565 / 464;
}

.overview-feature-list {
  display: grid;
  gap: 0;
}

.overview-feature-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.overview-feature-list article:last-child {
  border-bottom: 1px solid var(--line);
}

.overview-feature-list h3 {
  margin-bottom: 12px;
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.overview-feature-list p {
  margin: 0;
  color: #285d67;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 17px;
  line-height: 1.85;
}

.overview-feature-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  color: #f2752b;
}

.overview-feature-icon-card::before {
  position: absolute;
  width: 26px;
  height: 20px;
  border: 3px solid currentColor;
  border-radius: 3px;
  content: "";
}

.overview-feature-icon-card::after {
  position: absolute;
  top: 13px;
  left: 9px;
  width: 10px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
  content: "";
}

.overview-feature-icon-resident::before {
  position: absolute;
  top: 4px;
  left: 12px;
  width: 10px;
  height: 10px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 50%;
}

.overview-feature-icon-resident::after {
  position: absolute;
  left: 6px;
  bottom: 5px;
  width: 22px;
  height: 11px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 8px 8px 3px 3px;
}

.overview-dashboard-placeholder,
.overview-app-placeholder {
  position: absolute;
  inset: 28px;
  display: grid;
  gap: 14px;
}

.overview-dashboard-placeholder {
  grid-template-columns: 0.8fr 1fr 0.85fr;
}

.overview-dashboard-placeholder span,
.overview-app-placeholder span {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(58, 108, 147, 0.22);
  border-radius: var(--radius);
}

.overview-dashboard-placeholder span:first-child {
  grid-row: span 2;
  background: rgba(16, 45, 74, 0.16);
}

.overview-app-placeholder {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
}

.overview-app-placeholder span {
  min-height: 78%;
  border-radius: 18px;
}

.overview-app-placeholder span:nth-child(2) {
  min-height: 88%;
}

.overview-app-placeholder span:nth-child(3) {
  min-height: 100%;
}

.overview-app-placeholder span:nth-child(4) {
  min-height: 92%;
}

.interaction-section {
  background: #fff;
}

.interaction-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.78fr);
  gap: 76px;
  align-items: center;
}

.interaction-content h2 {
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
}

.interaction-content h2::after {
  display: block;
  width: 74px;
  height: 14px;
  margin-top: 4px;
  content: "";
  border-top: 3px solid #f2752b;
  border-radius: 50%;
  transform: rotate(-10deg);
}

.interaction-content > p {
  max-width: 560px;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.9;
}

.interaction-list {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.interaction-list article {
  display: grid;
  min-height: 66px;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid rgba(221, 227, 235, 0.7);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(10, 31, 51, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;
}

.interaction-list article:hover {
  border-left-color: #0c6f77;
  background: rgba(0, 148, 144, 0.04);
  transform: translateX(4px);
}

.interaction-list article.active {
  border-left-color: #0c6f77;
  background: rgba(0, 148, 144, 0.07);
  box-shadow: 0 14px 34px rgba(10, 31, 51, 0.10);
}

.interaction-list h3 {
  margin: 0;
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.interaction-icon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  color: #f2752b;
}

.interaction-icon-board::before {
  position: absolute;
  inset: 5px 3px 7px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 2px;
}

.interaction-icon-board::after {
  position: absolute;
  left: 9px;
  bottom: 2px;
  width: 8px;
  height: 5px;
  content: "";
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.interaction-icon-tools::before,
.interaction-icon-tools::after {
  position: absolute;
  content: "";
  background: currentColor;
}

.interaction-icon-tools::before {
  top: 5px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 11px 0 0 currentColor, 5px 12px 0 currentColor;
}

.interaction-icon-tools::after {
  top: 10px;
  left: 8px;
  width: 14px;
  height: 3px;
  box-shadow: -1px 8px 0 currentColor;
  transform: rotate(28deg);
}

.interaction-icon-chat::before {
  position: absolute;
  inset: 4px 2px 7px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 8px;
}

.interaction-icon-chat::after {
  position: absolute;
  left: 7px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  content: "";
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: skewY(-28deg);
}

.interaction-icon-list::before {
  position: absolute;
  top: 7px;
  left: 10px;
  width: 14px;
  height: 3px;
  content: "";
  background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}

.interaction-icon-list::after {
  position: absolute;
  top: 6px;
  left: 2px;
  width: 5px;
  height: 5px;
  content: "";
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  box-shadow: 0 7px 0 -1px currentColor, 0 14px 0 -1px currentColor;
  transform: rotate(-45deg);
}

.interaction-icon-pay::before {
  position: absolute;
  inset: 7px 2px 6px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 3px;
}

.interaction-icon-pay::after {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 6px;
  height: 6px;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

.interaction-visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 520px;
  padding: 34px;
}

.interaction-visual img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 68px), 400px);
  max-height: 620px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(10, 31, 51, 0.22));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.interaction-visual img.active {
  opacity: 1;
  visibility: visible;
}

.interaction-phone-placeholder {
  width: min(100%, 250px);
  align-self: center;
  padding: 26px 18px;
  background: linear-gradient(180deg, #12344f, #0a1f33);
  border: 10px solid #1b2d3e;
  border-radius: 34px;
  box-shadow: 0 18px 24px rgba(10, 31, 51, 0.22);
}

.interaction-phone-placeholder span {
  display: block;
  height: 48px;
  margin: 12px 0;
  background: linear-gradient(135deg, #ffffff, #d8e6f0);
  border-radius: var(--radius);
}

.operations-section {
  background: #fff;
}

.operations-showcase {
  display: grid;
  grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1fr);
  gap: 78px;
  align-items: center;
}

.operations-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(180deg, #d9eef2, #55a7b5);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(10, 31, 51, 0.14);
}

.operations-visual::after {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 34px;
  height: 46%;
  content: "";
  background: rgba(0, 119, 132, 0.38);
  border-radius: 34px;
}

.operations-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: center bottom;
}

.operations-person-placeholder {
  position: absolute;
  z-index: 1;
  inset: 58px 54px 58px;
}

.operations-head {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 116px;
  height: 116px;
  background: #86a8b9;
  border-radius: 50%;
  transform: translateX(-50%);
}

.operations-body {
  position: absolute;
  left: 50%;
  top: 132px;
  width: 240px;
  height: 300px;
  background: linear-gradient(180deg, #b9ccd6, #7aa5b8);
  border-radius: 120px 120px 24px 24px;
  transform: translateX(-50%);
}

.operations-tablet {
  position: absolute;
  left: 50%;
  bottom: 80px;
  width: 190px;
  height: 128px;
  background: #eaf3f7;
  border: 10px solid #5a8191;
  border-radius: 16px;
  transform: translateX(-50%) rotate(3deg);
}

.operations-card {
  position: absolute;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #18a7a4, #5ed18f);
  border-radius: 50%;
  box-shadow: 0 12px 22px rgba(10, 31, 51, 0.18);
}

.operations-card-one {
  top: 186px;
  left: 26%;
}

.operations-card-two {
  top: 154px;
  right: 27%;
  background: linear-gradient(135deg, #df1b86, #ff476c);
}

.operations-card-three {
  top: 214px;
  right: 18%;
  background: linear-gradient(135deg, #d08a3e, #35c48a);
}

.operations-content h2 {
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
}

.operations-content h2::after {
  display: block;
  width: 74px;
  height: 14px;
  margin-top: 4px;
  content: "";
  border-top: 3px solid #f2752b;
  border-radius: 50%;
  transform: rotate(-10deg);
}

.operations-content > p {
  max-width: 600px;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.9;
}

.operations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px 54px;
  margin-top: 38px;
}

.operations-grid article {
  min-width: 0;
}

.operations-grid h3 {
  margin: 18px 0 12px;
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.operations-grid p {
  margin: 0;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 1.85;
}

.operations-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: linear-gradient(135deg, #d08a3e, #27c18b);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(223, 27, 134, 0.22);
}

.operations-icon-clock,
.operations-icon-shop {
  background: linear-gradient(135deg, #df1b86, #ff476c);
}

.operations-icon::before,
.operations-icon::after {
  position: absolute;
  content: "";
}

.operations-icon-user::before {
  top: 15px;
  width: 12px;
  height: 12px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.operations-icon-user::after {
  bottom: 14px;
  width: 25px;
  height: 15px;
  border: 3px solid currentColor;
  border-radius: 16px 16px 4px 4px;
}

.operations-icon-clock::before {
  width: 26px;
  height: 26px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.operations-icon-clock::after {
  width: 10px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(2px, -2px) rotate(-45deg);
}

.operations-icon-wallet::before {
  width: 28px;
  height: 20px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.operations-icon-wallet::after {
  right: 13px;
  width: 12px;
  height: 10px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.operations-icon-shop::before {
  width: 28px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.operations-icon-shop::after {
  top: 17px;
  left: 19px;
  width: 20px;
  height: 14px;
  border: 3px solid currentColor;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.resident-app-section {
  overflow: hidden;
  background: #fff;
}

.resident-app-showcase {
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1fr);
  gap: 76px;
  align-items: center;
}

.resident-app-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--radius);
}

.resident-app-visual::before {
  display: none;
}

.resident-app-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.resident-app-content h2 {
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
}

.resident-app-content h2::after {
  display: block;
  width: 74px;
  height: 14px;
  margin-top: 4px;
  content: "";
  border-top: 3px solid #f2752b;
  border-radius: 50%;
  transform: rotate(-10deg);
}

.resident-app-content p {
  max-width: 590px;
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.9;
}

.resident-app-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-top: 14px;
  padding: 10px 18px;
  color: #fff;
  background: #2e8ed0;
  border-radius: var(--radius);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(46, 142, 208, 0.25);
}

.resident-app-button span {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.resident-app-button span::after {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  content: "";
  background: currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.resident-app-phone-placeholder {
  position: relative;
  z-index: 1;
  width: min(70%, 250px);
  margin: 48px auto 0;
  padding: 26px 18px;
  background: linear-gradient(180deg, #12344f, #0a1f33);
  border: 10px solid #1b2d3e;
  border-radius: 34px;
  box-shadow: 0 22px 28px rgba(10, 31, 51, 0.26);
  transform: rotate(-18deg);
}

.resident-app-phone-placeholder span {
  display: block;
  height: 58px;
  margin: 12px 0;
  background: linear-gradient(135deg, #ffffff, #d8e6f0);
  border-radius: var(--radius);
}

.section-heading {
  width: min(100%, 760px);
  margin: 0 auto 44px;
  text-align: center;
}

.section-heading p,
.split-grid > div > p {
  font-size: 18px;
}

.audience-grid,
.feature-grid,
.pricing-grid,
.blog-grid {
  display: grid;
  gap: 20px;
}

.audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}

.audience-grid article,
.feature-card,
.pricing-card,
.post-card,
.faq-item,
.process-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.audience-grid article {
  padding: 22px;
}

.audience-grid span,
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-900), var(--steel-600));
  border-radius: var(--radius);
  font-weight: 900;
}

.overview-card,
.app-visual {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.dashboard-placeholder {
  display: grid;
  width: 100%;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.dashboard-placeholder div {
  min-height: 126px;
  background: linear-gradient(135deg, #edf5fb, #ffffff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-group {
  margin-bottom: 56px;
}

.feature-group:last-child {
  margin-bottom: 0;
}

.feature-group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  color: var(--navy-900);
  font-size: 22px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}

.feature-group-title::before {
  content: "";
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-900), var(--steel-500));
  border-radius: 4px;
}

.feature-card h4 {
  margin: 0 0 10px;
  color: var(--navy-950);
  font-size: 18px;
  font-weight: 800;
}

.feature-card {
  padding: 28px;
  min-height: 230px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(7, 29, 51, 0.1);
}

.process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.process-item {
  position: relative;
  min-height: 230px;
  padding: 28px;
}

.process-item span {
  display: block;
  margin-bottom: 34px;
  color: var(--silver-500);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  min-height: 470px;
  flex-direction: column;
  padding: 28px;
}

.pricing-card.is-featured {
  border-color: var(--steel-500);
  box-shadow: var(--shadow);
  transform: translateY(-8px);
}

.plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 10px;
  color: var(--navy-900);
  background: var(--soft-blue);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.plan-price {
  padding: 18px 0;
  margin: 10px 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.plan-price strong {
  display: block;
  color: var(--navy-900);
  font-size: 30px;
  line-height: 1.15;
}

.plan-price span {
  color: var(--muted);
  font-size: 14px;
}

.pricing-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0 0 24px;
  list-style: none;
}

.pricing-card li::before,
.check-list span::before {
  content: "✓";
  margin-right: 8px;
  color: var(--success);
  font-weight: 900;
}

.pricing-card .button {
  margin-top: auto;
}

.phone-placeholder {
  width: min(100%, 280px);
  padding: 24px;
  background: var(--navy-950);
  border-radius: 28px;
  box-shadow: inset 0 0 0 8px #132f4b;
}

.phone-placeholder span {
  display: block;
  height: 58px;
  margin: 14px 0;
  background: linear-gradient(135deg, #ffffff, #d8e6f0);
  border-radius: var(--radius);
}

.check-list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  color: var(--navy-950);
  font-weight: 800;
}

.blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-card {
  overflow: hidden;
}

.post-card > div {
  padding: 22px;
}

.post-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--navy-900), var(--steel-600));
  color: #fff;
  font-weight: 900;
}

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

.post-card time {
  display: block;
  color: var(--steel-600);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 10px;
}

.post-card h3 a:hover {
  color: var(--steel-600);
}

.empty-card {
  padding: 28px;
}

/* ── Pricing Page ── */
.pricing-page-section {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #f6f9fc 0%, #fff 100%);
}

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

.pricing-page-header h1 {
  color: var(--navy-950);
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 900;
  margin-bottom: 12px;
}

.pricing-page-header p {
  color: var(--steel-600);
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto;
}

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

.pricing-table-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-table-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(10, 31, 51, 0.12);
}

.pricing-table-card.is-featured {
  border: 2px solid var(--steel-600);
  box-shadow: 0 12px 40px rgba(10, 31, 51, 0.1);
  transform: scale(1.04);
}

.pricing-table-card.is-featured:hover {
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 24px 56px rgba(10, 31, 51, 0.16);
}

.pricing-ribbon {
  position: absolute;
  top: 16px;
  right: -30px;
  background: linear-gradient(135deg, var(--steel-600), var(--navy-900));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 40px;
  transform: rotate(45deg);
  z-index: 2;
  letter-spacing: 0.5px;
}

.pricing-table-header {
  padding: 32px 28px 24px;
  text-align: center;
}

.pricing-header-free {
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 100%);
}

.pricing-header-basic {
  background: linear-gradient(135deg, #e6f2f3 0%, #d0e8ea 100%);
}

.pricing-header-pro {
  background: linear-gradient(135deg, #0b2d4d 0%, #1a5276 100%);
  color: #fff;
}

.pricing-table-header h2 {
  font-size: 22px;
  font-weight: 800;
  font-family: "Roboto Condensed", sans-serif;
  margin-bottom: 12px;
}

.pricing-header-free h2 { color: var(--navy-950); }
.pricing-header-basic h2 { color: #0c6f77; }
.pricing-header-pro h2 { color: #fff; }

.pricing-table-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.price-amount {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  font-family: "Roboto Condensed", sans-serif;
}

.price-period {
  font-size: 15px;
  font-weight: 700;
  font-family: "Roboto Condensed", sans-serif;
  opacity: 0.7;
}

.pricing-table-note {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.7;
}

.pricing-header-pro .pricing-table-note,
.pricing-header-pro .price-amount,
.pricing-header-pro .price-period {
  color: #fff;
  opacity: 1;
}

.pricing-table-features {
  list-style: none;
  padding: 24px 28px 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-table-features li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.pricing-table-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.pricing-table-features li.included {
  color: var(--navy-950);
}

.pricing-table-features li.included::before {
  background: #0c6f77;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8l3 3 5-5'/%3E%3C/svg%3E");
}

.pricing-table-features li.excluded {
  color: #a0aec0;
}

.pricing-table-features li.excluded::before {
  background: #e2e8f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E");
}

.pricing-page-cta {
  text-align: center;
  margin-top: 56px;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-page-cta p {
  color: var(--navy-950);
  font-size: 17px;
  font-weight: 700;
  font-family: "Roboto Condensed", sans-serif;
  margin-bottom: 20px;
}

.pricing-contact-btn {
  background: linear-gradient(135deg, var(--navy-900), var(--steel-600));
  color: #fff;
  padding: 14px 40px;
  font-size: 16px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 800;
  font-family: "Roboto Condensed", sans-serif;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 31, 51, 0.2);
}

.contact-section {
  padding-top: 44px;
  background: #fff;
}

.contact-panel {
  width: min(100% - 40px, 1170px);
}

.contact-heading {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

.contact-section h2 {
  color: #0c6f77;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
}

.contact-section p {
  color: #033939;
  font-family: "Roboto Condensed", sans-serif;
}

.contact-lines span,
.contact-lines a {
  color: var(--navy-950);
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: 28px 30px 32px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(10, 31, 51, 0.08);
}

.contact-form-wide {
  width: 100%;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: #7a8a98;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.contact-form label span {
  color: #7a8a98;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 6px 18px;
  color: var(--graphite);
  background: #fff;
  border: 1px solid var(--navy-900);
  border-radius: var(--radius);
  font: inherit;
}

.contact-form input {
  min-height: 35px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(16, 45, 74, 0.16);
  border-color: var(--navy-900);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #7a8a98;
  opacity: 1;
}

.contact-form textarea {
  min-height: 125px;
  resize: vertical;
}

.contact-form button {
  width: 100%;
  min-height: 70px;
  margin-top: 4px;
  color: #fff;
  background: linear-gradient(90deg, var(--steel-600) 50%, #1a3a5c 50%);
  background-size: 200% 100%;
  background-position: left center;
  border: none;
  border-radius: 999px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-form button:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 58, 92, 0.35);
}

.contact-form button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 12px rgba(26, 58, 92, 0.2);
}

/* === Trang /lien-he/ : layout 2 cột (Info công ty | Form) === */
.contact-page .contact-heading {
  text-align: center;
  margin-bottom: 40px;
}

.contact-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}

.contact-company-card {
  background: linear-gradient(135deg, #f4f9fb 0%, #e8eff4 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 6px 22px rgba(10, 31, 51, 0.05);
}

.contact-company-card h3 {
  margin: 0 0 22px;
  color: var(--navy-950);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(10, 31, 51, 0.12);
}

.contact-company-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.contact-company-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: baseline;
}

.contact-company-row dt {
  margin: 0;
  color: #5b6b7a;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.contact-company-row dd {
  margin: 0;
  color: var(--navy-950);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  word-break: break-word;
}

.contact-company-row dd a {
  color: var(--navy-900);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.contact-company-row dd a:hover {
  color: var(--steel-600);
}

.contact-form-compact {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 6px 22px rgba(10, 31, 51, 0.05);
}

.contact-form-compact button {
  min-height: 56px;
}

@media (max-width: 860px) {
  .contact-two-col {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .contact-company-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .contact-company-row dt {
    font-size: 13px;
  }
}


.form-note {
  margin-bottom: 0;
  font-size: 13px;
}

.form-success {
  padding: 12px 14px;
  margin-bottom: 0;
  color: #155f48;
  background: #e7f7f1;
  border: 1px solid #bfe8da;
  border-radius: var(--radius);
  font-weight: 800;
}

.form-error {
  padding: 12px 14px;
  margin-bottom: 0;
  color: #7a1c17;
  background: #fdecea;
  border: 1px solid #f3bdb9;
  border-radius: var(--radius);
  font-weight: 800;
}

/* Video section */
.video-section {
  background: linear-gradient(180deg, var(--silver-100), #ffffff);
}

.video-frame {
  position: relative;
  overflow: hidden;
  width: min(100%, 980px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--navy-950);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78);
  transition: transform 0.4s ease, filter 0.3s ease;
}

.video-poster:hover img {
  transform: scale(1.03);
  filter: brightness(0.85);
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 18px 40px rgba(10, 31, 51, 0.35);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.video-poster:hover .video-play {
  transform: translate(-50%, -50%) scale(1.06);
}

.video-play span {
  width: 0;
  height: 0;
  margin-left: 6px;
  border: 14px solid transparent;
  border-left-color: var(--navy-900);
  border-right: 0;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

/* Clients marquee */
.clients-section {
  background: linear-gradient(180deg, #ffffff, var(--silver-100));
}

.clients-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.clients-track {
  display: flex;
  gap: 56px;
  align-items: center;
  width: max-content;
  animation: pms-marquee 40s linear infinite;
}

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

.client-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 0 18px;
  filter: grayscale(0.6) opacity(0.78);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.client-item:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}

.client-item img {
  max-height: 64px;
  width: auto;
  object-fit: contain;
}

.client-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  height: 64px;
  padding: 0 18px;
  color: var(--silver-700);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: 0.02em;
}

@keyframes pms-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
  }
}

/* Store buttons */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.store-button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 168px;
  padding: 10px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  border-radius: var(--radius);
  font-weight: 800;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(10, 31, 51, 0.25);
}

.store-button .store-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.store-button strong {
  font-size: 18px;
}

.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.site-footer {
  color: var(--navy-950);
  background:
    radial-gradient(circle at 78% 18%, rgba(61, 135, 184, 0.16), transparent 34%),
    linear-gradient(135deg, #f8fbfd 0%, #eef5fa 52%, #ffffff 100%);
  border-top: 1px solid var(--line);
  font-family: "Roboto Condensed", sans-serif;
}

.footer-main {
  padding: 72px 0 76px;
  background: transparent;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(180px, 0.72fr) minmax(250px, 0.95fr);
  gap: 72px;
  align-items: start;
}

.site-footer h2,
.site-footer p,
.site-footer a {
  color: var(--navy-950);
  font-family: "Roboto Condensed", sans-serif;
}

.site-footer h2 {
  margin: 0 0 22px;
  color: var(--navy-950);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.site-footer p {
  margin-bottom: 14px;
  color: var(--graphite);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 1.85;
}

.footer-about p:first-of-type {
  max-width: 650px;
}

.footer-about strong {
  color: var(--navy-950);
  font-weight: 800;
}

.site-footer .custom-logo,
.site-footer .site-logo {
  max-width: 220px;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--radius);
}

.footer-company nav {
  display: grid;
  gap: 14px;
}

.footer-company a,
.footer-contact a {
  color: var(--navy-900);
  font-weight: 700;
}

.footer-company a:hover,
.footer-contact a:hover {
  color: var(--steel-600);
}

.footer-contact p {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  font-weight: 700;
}

.footer-contact-icon {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  color: var(--steel-600);
}

.footer-contact-location::before {
  position: absolute;
  left: 6px;
  top: 2px;
  width: 10px;
  height: 10px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 50%;
}

.footer-contact-location::after {
  position: absolute;
  left: 4px;
  bottom: 1px;
  width: 14px;
  height: 7px;
  content: "";
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

.footer-contact-mail::before {
  position: absolute;
  inset: 5px 2px;
  content: "";
  border: 3px solid currentColor;
  border-radius: 3px;
}

.footer-contact-mail::after {
  position: absolute;
  left: 5px;
  top: 8px;
  width: 12px;
  height: 8px;
  content: "";
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
}

.footer-contact-phone::before {
  position: absolute;
  inset: 3px 5px;
  content: "";
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.footer-contact-phone::after {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 3px;
  content: "";
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor;
}

.footer-trade-badge {
  display: grid;
  width: 196px;
  min-height: 64px;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  margin-top: 28px;
  padding: 8px 12px;
  color: #ef3124;
  background: #fff;
  border-radius: 999px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 900;
  line-height: 1;
}

.footer-trade-badge span {
  position: relative;
  grid-row: 1 / 3;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #ef3124;
  border-radius: 50%;
}

.footer-trade-badge span::before {
  position: absolute;
  left: 13px;
  top: 10px;
  width: 20px;
  height: 12px;
  content: "";
  border-left: 5px solid #fff;
  border-bottom: 5px solid #fff;
  transform: rotate(-45deg);
}

.footer-trade-badge strong {
  align-self: end;
  font-size: 20px;
}

.footer-trade-badge small {
  align-self: start;
  font-size: 12px;
  font-weight: 800;
}

.footer-bottom {
  padding: 22px 0;
  color: var(--navy-900);
  background: #dcebf3;
  border-top: 1px solid var(--line);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.prose {
  max-width: 850px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (max-width: 1080px) {
  .help-blocks-grid,
  .feature-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-card-intro {
    grid-column: 1 / -1;
    min-height: 280px;
  }

  .pricing-grid,
  .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-card.is-featured {
    transform: none;
  }

  .pricing-table-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .pricing-table-card.is-featured {
    transform: none;
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 72px;
  }

  .container,
  .narrow-container {
    width: min(100% - 28px, var(--container));
  }

  .nav-toggle {
    display: block;
  }

  .primary-nav {
    position: fixed;
    inset: var(--header-height) 14px auto;
    display: none;
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .menu {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .menu a {
    display: flex;
    padding: 12px;
  }

  .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .sub-menu::before {
    display: none;
  }

  .sub-menu a {
    padding: 10px 12px 10px 28px;
    font-size: 14px;
  }

  .menu-item-has-children:hover > .sub-menu {
    transform: none;
  }

  .site-logo,
  .custom-logo {
    max-width: 188px;
    max-height: 48px;
  }

  .hero-section {
    min-height: auto;
    padding: 36px 0 44px;
  }

  .hero-grid,
  .split-grid,
  .reverse,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .page-section {
    padding: 64px 0;
  }

  .help-blocks-section {
    padding: 52px 0;
  }

  .overview-showcase {
    gap: 48px;
  }

  .overview-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .overview-media {
    width: 100%;
    max-width: 480px;
  }

  .interaction-showcase {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .interaction-visual {
    min-height: 420px;
  }

  .operations-showcase {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .operations-visual,
  .operations-visual img {
    min-height: 520px;
  }

  .resident-app-showcase {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .resident-app-visual {
    min-height: 460px;
  }

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

  .product-sidebar {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 10px;
    border-left: 0;
    border-bottom: 4px solid #c9e5d9;
  }

  .product-sidebar a {
    min-width: 190px;
  }

  .product-meta {
    float: none;
    margin: 0 0 22px;
    text-align: left;
  }

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

@media (max-width: 620px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 30px;
  }

  .hero-actions,
  .button,
  .nav-cta {
    width: 100%;
  }

  .feature-grid,
  .help-blocks-grid,
  .pricing-grid,
  .process-list,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .help-card,
  .help-card-intro {
    min-height: auto;
  }

  .help-card h2 {
    font-size: 34px;
  }

  .help-card h3 {
    margin-left: 70px;
    font-size: 22px;
  }

  .device-panel,
  .overview-card,
  .app-visual {
    min-height: 280px;
    padding: 18px;
  }

  .overview-showcase {
    gap: 36px;
  }

  .overview-row {
    gap: 16px;
  }

  .overview-content > p,
  .overview-feature-list p {
    font-size: 16px;
  }

  .overview-feature-list article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }

  .overview-feature-list h3 {
    font-size: 20px;
  }

  .overview-dashboard-placeholder,
  .overview-app-placeholder {
    inset: 16px;
    gap: 10px;
  }

  .interaction-showcase {
    gap: 30px;
  }

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

  .interaction-list article {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px;
  }

  .interaction-list h3 {
    font-size: 16px;
  }

  .interaction-visual {
    min-height: 360px;
    padding: 22px;
  }

  .interaction-visual img {
    max-height: 500px;
  }

  .operations-showcase {
    gap: 30px;
  }

  .operations-visual,
  .operations-visual img {
    min-height: 430px;
  }

  .operations-person-placeholder {
    inset: 38px 28px 38px;
  }

  .operations-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .operations-content > p,
  .operations-grid p {
    font-size: 16px;
  }

  .resident-app-showcase {
    gap: 30px;
  }

  .resident-app-visual {
    min-height: 380px;
  }

  .resident-app-visual img {
    width: min(78%, 280px);
    max-height: 380px;
  }

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

  .product-titlebar {
    padding: 38px 0 30px;
  }

  .product-content {
    padding: 26px 0 54px;
  }

  .product-sidebar a {
    min-width: 170px;
    font-size: 15px;
  }

  .product-detail p,
  .product-detail li,
  .product-intro {
    font-size: 16px;
  }

  .store-button {
    flex: 1 1 100%;
  }

  .clients-track {
    gap: 32px;
    animation-duration: 28s;
  }

  .client-item {
    height: 64px;
  }

  .client-item img {
    max-height: 48px;
  }

  .video-play {
    width: 64px;
    height: 64px;
  }

  .video-play span {
    border-width: 10px;
  }
}

@media (max-width: 640px) {
  .pricing-table-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pricing-table-card.is-featured {
    max-width: 100%;
  }

  .pricing-page-section {
    padding: 48px 0 64px;
  }

  .pricing-page-cta {
    padding: 28px 20px;
  }
}