:root {
  --bg: #f2f4f6;
  --bg-2: #e5e9ed;
  --bg-3: #d3d9df;
  --surface: #ffffff;
  --surface-blue: #eef1f4;
  --accent: #788491;
  --accent-strong: #34404c;
  --accent-light: #c5ccd4;
  --text: #18212b;
  --muted: #4d5661;
  --white: #0c1117;
  --border: rgba(24, 33, 43, 0.16);
  --nav-bg: rgba(242, 244, 246, 0.9);
  --shadow: 0 24px 70px rgba(56, 66, 78, 0.18);
  --focus: 0 0 0 3px rgba(120, 132, 145, 0.32);
}

body.light {
  --bg: #f2f4f6;
  --bg-2: #e5e9ed;
  --bg-3: #d3d9df;
  --surface: #ffffff;
  --surface-blue: #eef1f4;
  --text: #18212b;
  --muted: #4d5661;
  --white: #0c1117;
  --border: rgba(24, 33, 43, 0.16);
  --nav-bg: rgba(242, 244, 246, 0.9);
  --shadow: 0 24px 70px rgba(56, 66, 78, 0.18);
}

body:not(.light) {
  --bg: #101923;
  --bg-2: #162432;
  --bg-3: #1b2d3d;
  --surface: #172636;
  --surface-blue: #163147;
  --text: #d8e7f1;
  --muted: #9fb2c2;
  --white: #ffffff;
  --border: rgba(216, 231, 241, 0.14);
  --nav-bg: rgba(16, 25, 35, 0.86);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 64px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
}

body.drawer-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea,
summary {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  box-shadow: var(--focus);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--white);
  font-family: "Raleway", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.08;
}

h1 {
  max-width: 940px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 800;
}

h1 span {
  color: var(--accent);
}

h2 {
  font-size: clamp(25px, 3.4vw, 42px);
  font-weight: 800;
}

h3 {
  font-size: 19px;
  font-weight: 700;
}

p {
  margin: 0;
}

ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  padding-left: 18px;
}

li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "-";
}

section {
  padding: 108px 0;
}

#app:focus {
  outline: none;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--nav-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px) saturate(180%);
}

body.light .site-header {
  border-bottom-color: rgba(38, 53, 70, 0.12);
}

.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(1280px, calc(100% - 32px));
  height: 64px;
  margin: 0 auto;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
}

.nav-links {
  position: relative;
  display: flex;
  justify-self: center;
  align-items: center;
  height: 64px;
  gap: 8px;
}

.nav-links a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 8px 14px;
  color: var(--muted);
  font-family: "Raleway", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: color 220ms ease;
}

.nav-links a:hover {
  color: var(--accent-light);
}

.nav-links a.active {
  color: var(--white);
}

.active-indicator {
  position: absolute;
  top: 13px;
  left: 0;
  width: 0;
  height: 38px;
  border-radius: 18px;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.34, 1.2, 0.64, 1), width 380ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.ring-glow {
  position: absolute;
  inset: -10px;
  border-radius: 26px;
  background: #e8af48;
  filter: blur(18px);
  opacity: 0.15;
}

.ring-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
}

.ring-spin {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    conic-gradient(
      from 0deg,
      #533517 0deg,
      #c49746 40deg,
      #feeaa5 72deg,
      #ffc0cb 76deg,
      #ffffff 81deg,
      #88a8ff 86deg,
      #c49746 90deg,
      #533517 96deg,
      #c49746 132deg,
      #feeaa5 162deg,
      #ffc0cb 166deg,
      #ffffff 171deg,
      #88a8ff 176deg,
      #c49746 180deg,
      #533517 186deg,
      #c49746 220deg,
      #feeaa5 252deg,
      #ffc0cb 256deg,
      #ffffff 261deg,
      #88a8ff 266deg,
      #c49746 270deg,
      #533517 276deg,
      #c49746 312deg,
      #feeaa5 342deg,
      #ffc0cb 346deg,
      #ffffff 351deg,
      #88a8ff 356deg,
      #c49746 360deg
    );
  animation: ringSpin 4.5s linear infinite;
}

.ring-plate {
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(180%);
}

@keyframes ringSpin {
  to {
    transform: rotate(360deg);
  }
}

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

.theme-toggle,
.menu-toggle {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  cursor: pointer;
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1), border-color 220ms ease;
}

.theme-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.theme-toggle:hover,
.menu-toggle:hover {
  border-color: rgba(174, 183, 194, 0.5);
  transform: translateY(-1px);
}

.icon {
  position: absolute;
  width: 17px;
  height: 17px;
  opacity: 0;
  transform: rotate(-80deg) scale(0.7);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.sun {
  opacity: 1;
  transform: rotate(0) scale(1);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(174, 183, 194, 0.16);
}

.moon {
  border-radius: 50%;
  background: var(--white);
}

.moon::after {
  position: absolute;
  top: -1px;
  left: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  content: "";
}

body.light .sun {
  opacity: 0;
  transform: rotate(80deg) scale(0.7);
}

body.light .moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.menu-toggle span {
  width: 17px;
  height: 2px;
  margin: 2px 0;
  border-radius: 2px;
  background: var(--white);
}

.mobile-drawer {
  position: fixed;
  top: 64px;
  right: 0;
  display: none;
  width: min(320px, 86vw);
  height: calc(100vh - 64px);
  padding: 28px;
  background: rgba(38, 53, 70, 0.97);
  transform: translateX(100%);
  transition: transform 320ms ease;
}

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

.mobile-drawer a {
  display: block;
  padding: 16px 0;
  color: #ffffff;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
}

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(174, 183, 194, 0.18), transparent 26%),
    radial-gradient(circle at 78% 38%, rgba(229, 233, 238, 0.1), transparent 25%),
    linear-gradient(135deg, var(--bg), var(--bg-3));
}

.hero {
  display: grid;
  min-height: calc(100vh - 64px);
  place-items: center;
  padding: 88px 0;
}

.page-hero {
  padding: 118px 0 94px;
}

.page-hero .container {
  display: grid;
  gap: 24px;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at center, #000 0, transparent 74%);
  opacity: 0.6;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  align-items: center;
  gap: 56px;
}

.hero-copy {
  display: grid;
  gap: 26px;
}

.hero-sub {
  max-width: 790px;
  color: var(--text);
  font-size: 18px;
}

.eyebrow {
  color: var(--accent);
  font-family: "Lato", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(174, 183, 194, 0.24);
  border-radius: 999px;
  background: rgba(174, 183, 194, 0.08);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(174, 183, 194, 0.4); }
  50% { box-shadow: 0 0 0 9px rgba(174, 183, 194, 0); }
}

.hero-actions,
.pricing-controls,
.sim-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 22px;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  color: #07131a;
  box-shadow: 0 16px 35px rgba(174, 183, 194, 0.22);
}

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

.btn-dark {
  background: #07131a;
  color: #ffffff;
}

.text-link {
  display: inline-flex;
  width: fit-content;
  border-bottom: 2px solid var(--accent);
  color: var(--white);
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.4;
}

.ops-visual {
  min-height: 480px;
  padding: 24px;
  border: 1px solid rgba(229, 233, 238, 0.2);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(237, 248, 255, 0.78));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.visual-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.visual-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.visual-top strong {
  margin-left: auto;
  color: var(--white);
  font-family: "Raleway", Arial, sans-serif;
}

.visual-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.visual-status div,
.visual-list,
.visual-meter {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(38, 53, 70, 0.42);
}

.visual-status div {
  padding: 16px;
}

.visual-status small {
  display: block;
  color: var(--muted);
}

.visual-status b {
  color: var(--white);
}

.visual-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
}

.visual-list p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.visual-list span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.ok {
  background: #61d394;
}

.warn {
  background: var(--accent);
}

.visual-meter {
  height: 14px;
  margin-top: 28px;
  overflow: hidden;
}

.visual-meter span {
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.stat-strip {
  padding: 62px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.metric-card {
  display: grid;
  gap: 10px;
}

.metric-value {
  color: var(--accent);
  font-family: "Raleway", Arial, sans-serif;
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 800;
  line-height: 1;
}

.metric-card p:not(.metric-value) {
  max-width: 310px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.band {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
}

.compact {
  padding: 82px 0;
}

.section-heading {
  display: grid;
  max-width: 850px;
  gap: 18px;
  margin-bottom: 44px;
}

.section-heading p {
  color: var(--text);
}

.card-grid,
.pillar-grid,
.feature-detail,
.pricing-grid,
.included-grid,
.footer-grid,
.about-intro {
  display: grid;
  gap: 22px;
}

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

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

.info-card,
.pillar-card,
.detail-group,
.pricing-card,
.markets article,
.contact-form,
.overage,
.statement,
.sim-phone,
.sim-work,
.sim-crm {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.12);
}

.info-card,
.detail-group,
.markets article,
.statement {
  padding: 25px;
}

.info-card,
.pillar-card,
.pricing-card {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.info-card:hover,
.pillar-card:hover,
.pricing-card:hover {
  border-color: rgba(174, 183, 194, 0.55);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(174, 183, 194, 0.05);
  transform: translateY(-5px);
}

.source-note {
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.insight-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 34px;
  background: rgba(237, 248, 255, 0.78);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.insight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.insight-card:hover {
  border-color: rgba(174, 183, 194, 0.42);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

.insight-card:hover::before {
  transform: scaleX(1);
}

.insight-stat {
  margin-bottom: 16px;
  color: rgba(174, 183, 194, 0.24);
  font-family: "Raleway", Arial, sans-serif;
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 800;
  line-height: 0.95;
}

.insight-card p:not(.insight-stat) {
  color: var(--text);
  font-size: 17px;
}

.insight-card small {
  display: block;
  margin-top: 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.pillar-grid,
.home-pillar-grid,
.feature-detail,
.markets,
.about-intro {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pillar-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
}

.home-pillars {
  padding: 96px 0;
}

.section-heading.narrow {
  max-width: 720px;
}

.home-pillars .section-heading {
  margin-bottom: 42px;
}

.home-pillars .section-heading h2 {
  max-width: 720px;
}

.home-pillar-grid {
  display: grid;
  gap: 22px;
}

.home-pillar-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 248, 255, 0.82));
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.12);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.home-pillar-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 260ms ease, transform 260ms ease;
  content: "";
}

.home-pillar-card:hover {
  border-color: rgba(174, 183, 194, 0.48);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(174, 183, 194, 0.05);
  transform: translateY(-5px);
}

.home-pillar-card:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.home-pillar-card h3 {
  margin-bottom: 16px;
  color: var(--white);
  font-size: clamp(19px, 2vw, 24px);
}

.home-pillar-card p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
}

.pillar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.pillar-card-top .card-icon {
  margin-bottom: 0;
}

.pillar-card-top .eyebrow {
  margin: 0;
  font-size: 10px;
}

.pillar-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
  content: "";
}

.pillar-card:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid rgba(174, 183, 194, 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-family: "Raleway", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.feature-pillar {
  padding: 82px 0;
}

.feature-pillar-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.feature-pillar-heading .card-icon {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.feature-pillar-heading h2 {
  color: var(--white);
  font-size: clamp(24px, 3vw, 34px);
}

.feature-pillar-heading .eyebrow {
  margin-bottom: 5px;
}

.feature-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.feature-tile {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  background: var(--surface);
  transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.feature-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms ease;
}

.feature-tile:hover {
  border-color: rgba(174, 183, 194, 0.42);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

.feature-tile:hover::before {
  transform: scaleX(1);
}

.tile-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border: 1px solid rgba(174, 183, 194, 0.2);
  border-radius: 8px;
  color: var(--accent);
  background: rgba(174, 183, 194, 0.08);
  font-family: "Raleway", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.feature-tile h3 {
  margin-bottom: 10px;
  color: var(--white);
  font-size: 15px;
}

.feature-tile p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.pillar-card h3,
.detail-group h3,
.pricing-card h3,
.info-card h3 {
  margin-bottom: 12px;
}

.pillar-link {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  color: var(--accent);
  font-family: "Raleway", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.pillar-link:hover {
  color: var(--accent-light);
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.steps::before {
  position: absolute;
  top: 25px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(174, 183, 194, 0.35);
  content: "";
}

.step {
  position: relative;
  display: grid;
  gap: 12px;
}

.step span {
  z-index: 1;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #07131a;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 800;
}

.simulation {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 0.8fr) minmax(260px, 1fr);
  gap: 18px;
}

.sim-phone,
.sim-work,
.sim-crm {
  padding: 22px;
}

.sim-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--white);
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 800;
}

.sim-title small {
  color: var(--muted);
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
}

.sim-message {
  min-height: 210px;
  border-radius: 8px;
  border-top-left-radius: 2px;
  padding: 18px;
  background: rgba(174, 183, 194, 0.12);
  color: var(--text);
}

.sim-work {
  display: grid;
  gap: 12px;
}

.sim-stage {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 3px 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 220ms ease, background-color 220ms ease;
}

.sim-stage span {
  display: grid;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(174, 183, 194, 0.12);
  color: var(--accent);
  font-weight: 800;
}

.sim-stage strong {
  color: var(--white);
}

.sim-stage small {
  color: var(--muted);
}

.sim-stage.active,
.sim-stage.complete {
  border-color: rgba(174, 183, 194, 0.55);
  background: rgba(174, 183, 194, 0.08);
}

.sim-crm dl,
.demo-panel dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.sim-crm dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px;
}

.sim-crm dt {
  color: var(--muted);
}

.sim-crm dd {
  margin: 0;
  color: var(--white);
  font-weight: 700;
  text-align: right;
}

.demo-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.sim-controls {
  grid-column: 1 / -1;
}

.usage-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.usage-controls span,
.included-grid span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  transition: border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.crm-band {
  overflow: hidden;
}

.crm-marquee {
  --crm-gap: 56px;
  --crm-loop-nudge: 14px;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 34px;
}

.crm-marquee::before,
.crm-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: min(96px, 22vw);
  pointer-events: none;
}

.crm-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-2), rgba(237, 248, 255, 0));
}

.crm-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg-2), rgba(237, 248, 255, 0));
}

.crm-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--crm-gap);
  animation: crmMarquee 28s linear infinite;
  will-change: transform;
}

.crm-marquee-set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--crm-gap);
  align-items: center;
}

.crm-marquee-set span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  transition: color 500ms ease, text-shadow 500ms ease;
}

.crm-marquee-set span:hover {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(174, 183, 194, 0.22);
}

@keyframes crmMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-25% - var(--crm-loop-nudge)), 0, 0);
  }
}

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

.skyline-divider {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
  user-select: none;
}

.skyline-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(38, 53, 70, 0), var(--bg));
}

.skyline-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: rgba(174, 183, 194, 0.12);
}

.tower {
  position: absolute;
  bottom: 5px;
  left: var(--tower-left);
  width: var(--tower-width);
  height: var(--tower-height);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 9px 7px;
  padding: 15px 8px 0;
  border: 1px solid rgba(174, 183, 194, 0.1);
  border-radius: 2px 2px 0 0;
  background: #dfe4e8;
  opacity: 0.84;
  transition-delay: var(--tower-delay);
}

.tower::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 28%;
  width: 44%;
  height: 7px;
  border-radius: 1px 1px 0 0;
  background: #07131a;
}

.tower span {
  height: clamp(5px, calc(var(--tower-height) / 18), 11px);
  border-radius: 1px;
  background: rgba(174, 183, 194, 0.06);
}

.tower span.lit {
  background: rgba(174, 183, 194, 0.55);
  box-shadow: 0 0 14px rgba(174, 183, 194, 0.18);
  animation: windowPulse 4.5s ease-in-out infinite;
  animation-delay: calc(var(--window-row) * 450ms);
}

@keyframes windowPulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.28;
  }
}

.waitlist-section {
  padding: 34px 0 86px;
  background: var(--bg);
}

.waitlist-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(174, 183, 194, 0.22);
  border-radius: 12px;
  padding: 34px;
  background: linear-gradient(135deg, rgba(174, 183, 194, 0.1), rgba(174, 183, 194, 0.035));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2);
}

.waitlist-panel h2 {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: clamp(24px, 3vw, 36px);
}

.waitlist-panel p:not(.eyebrow) {
  max-width: 790px;
  color: var(--text);
}

.waitlist-panel .btn {
  white-space: nowrap;
}

.pricing-controls {
  justify-content: space-between;
  margin-bottom: 18px;
}

.segmented {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.segmented button,
.currency-switch {
  border: 0;
  color: var(--text);
  cursor: pointer;
  background: transparent;
}

.segmented button {
  min-height: 44px;
  padding: 9px 16px;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 800;
}

.segmented button.active {
  background: var(--accent);
  color: #07131a;
}

.currency-switch {
  border-bottom: 1px solid var(--accent);
  padding: 6px 0;
}

.pricing-label {
  margin-bottom: 18px;
  color: var(--muted);
}

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

.pricing-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 26px;
}

.pricing-card.popular {
  border-color: rgba(174, 183, 194, 0.58);
}

.popular-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(174, 183, 194, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.price {
  margin: 16px 0 6px;
  color: var(--white);
  font-family: "Raleway", Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
}

.billing-note,
.plan-tagline {
  color: var(--muted);
  font-size: 15px;
}

.pricing-card ul {
  flex: 1;
  margin-bottom: 22px;
}

.overage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 30px;
  margin-top: 26px;
  padding: 28px;
}

.overage-table {
  width: 100%;
  border-collapse: collapse;
}

.overage-table caption {
  margin-bottom: 8px;
  color: var(--muted);
  text-align: left;
}

.overage-table td {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  color: var(--text);
}

.overage-table td:last-child {
  color: var(--white);
  text-align: right;
  font-weight: 700;
}

.usage-controls {
  margin-top: 18px;
}

.included,
.faq {
  margin-top: 56px;
}

.included h3,
.faq h3 {
  margin-bottom: 18px;
}

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

.included-grid span {
  border-radius: 8px;
}

details {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

details:last-child {
  border-bottom: 1px solid var(--border);
}

summary {
  color: var(--white);
  cursor: pointer;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
}

details p {
  margin-top: 10px;
}

.statement {
  display: grid;
  gap: 16px;
}

.about-story {
  display: grid;
  max-width: 920px;
  gap: 22px;
  border-left: 4px solid var(--accent);
  padding: 10px 0 10px 28px;
}

.about-story p {
  color: var(--text);
  font-size: 16px;
}

.story-signoff {
  color: var(--white) !important;
  font-family: "Raleway", Arial, sans-serif;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 800;
  line-height: 1.2;
}

.statement h2 {
  font-size: clamp(22px, 2.6vw, 32px);
}

.market-label {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.culture .info-card {
  min-height: 180px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: 44px;
  align-items: start;
}

.contact-email a {
  color: var(--accent);
  font-weight: 700;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 28px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--white);
  font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
}

body.light .contact-form input,
body.light .contact-form select,
body.light .contact-form textarea {
  background: #ffffff;
}

.contact-form textarea {
  resize: vertical;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.legal-summary,
.legal-content {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.12);
}

.legal-summary {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  padding: 24px;
}

.legal-summary p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.legal-summary a,
.legal-content a {
  color: var(--accent-light);
  font-weight: 700;
}

.legal-content {
  display: grid;
  gap: 0;
  padding: 10px 30px;
}

.legal-block {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}

.legal-block:last-child {
  border-bottom: 0;
}

.legal-block h2 {
  margin-bottom: 14px;
  color: var(--white);
  font-size: clamp(20px, 2.2vw, 28px);
}

.legal-block p {
  margin: 12px 0;
  color: var(--text);
  font-size: 16px;
}

.full {
  grid-column: 1 / -1;
}

.form-success {
  display: none;
  border: 1px solid rgba(174, 183, 194, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(174, 183, 194, 0.1);
  color: var(--white);
  font-weight: 700;
}

.form-success.visible {
  display: block;
}

/* Sky blue brand system */
.site-header {
  border-bottom-color: rgba(38, 53, 70, 0.1);
  box-shadow: 0 12px 36px rgba(83, 96, 110, 0.12);
}

body:not(.light) .site-header {
  border-bottom-color: rgba(24, 33, 43, 0.12);
  background: rgba(242, 244, 246, 0.94);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

body:not(.light) .ring-plate {
  background: rgba(242, 244, 246, 0.94);
}

.nav-links a:hover {
  color: var(--accent-strong);
}

.nav-links a.active {
  color: var(--white);
}

.ring-glow {
  background: var(--accent);
  opacity: 0.18;
}

.ring-spin {
  background:
    conic-gradient(
      from 0deg,
      #505861 0deg,
      #9aa5b1 45deg,
      #f3f5f7 74deg,
      #ffffff 80deg,
      #d9edf6 86deg,
      #b8c1cb 96deg,
      #505861 180deg,
      #9aa5b1 225deg,
      #f3f5f7 254deg,
      #ffffff 260deg,
      #d9edf6 266deg,
      #b8c1cb 276deg,
      #505861 360deg
    );
}

.theme-toggle,
.menu-toggle {
  background: rgba(174, 183, 194, 0.08);
}

.theme-toggle:hover,
.menu-toggle:hover {
  border-color: rgba(174, 183, 194, 0.5);
}

.sun {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(174, 183, 194, 0.14);
}

.mobile-drawer {
  background: rgba(247, 250, 253, 0.97);
}

body:not(.light) .mobile-drawer {
  background: rgba(16, 25, 35, 0.97);
}

.mobile-drawer a {
  color: var(--white);
}

.hero,
.page-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(174, 183, 194, 0.2), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(229, 233, 238, 0.22), transparent 25%),
    linear-gradient(135deg, #fbfcfd 0%, #f0f2f4 48%, #e3e7eb 100%);
}

body:not(.light) .hero,
body:not(.light) .page-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(174, 183, 194, 0.22), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(229, 233, 238, 0.1), transparent 25%),
    linear-gradient(135deg, var(--bg), var(--bg-3));
}

.hero-grid {
  background-image:
    linear-gradient(rgba(95, 111, 127, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 111, 127, 0.07) 1px, transparent 1px);
}

.badge {
  border-color: rgba(174, 183, 194, 0.28);
  background: rgba(174, 183, 194, 0.09);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(174, 183, 194, 0.34); }
  50% { box-shadow: 0 0 0 9px rgba(174, 183, 194, 0); }
}

.btn-primary,
.segmented button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #07131a;
  box-shadow: 0 16px 35px rgba(174, 183, 194, 0.24);
}

.btn-secondary,
.segmented {
  background: rgba(174, 183, 194, 0.06);
}

.btn-dark {
  background: #111827;
  color: #ffffff;
}

.text-link {
  color: var(--white);
}

.ops-visual {
  border-color: rgba(174, 183, 194, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(237, 248, 255, 0.9));
}

body:not(.light) .ops-visual {
  background: linear-gradient(145deg, rgba(23, 38, 54, 0.95), rgba(22, 49, 71, 0.82));
}

.visual-status div,
.visual-list,
.visual-meter,
.sim-stage,
.usage-controls span,
.included-grid span {
  background: rgba(174, 183, 194, 0.06);
}

.warn {
  background: var(--accent);
}

.visual-meter span {
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-light));
}

.stat-strip,
.band {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
}

.info-card:hover,
.pillar-card:hover,
.pricing-card:hover,
.feature-tile:hover,
.home-pillar-card:hover,
.insight-card:hover {
  border-color: rgba(174, 183, 194, 0.46);
  box-shadow: 0 22px 55px rgba(83, 96, 110, 0.16), 0 0 0 1px rgba(174, 183, 194, 0.06);
}

.insight-card,
.home-pillar-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(237, 248, 255, 0.86));
}

body:not(.light) .insight-card,
body:not(.light) .home-pillar-card {
  background: linear-gradient(145deg, rgba(23, 38, 54, 0.94), rgba(22, 49, 71, 0.82));
}

.insight-stat {
  color: rgba(174, 183, 194, 0.24);
}

.card-icon,
.tile-icon {
  border-color: rgba(174, 183, 194, 0.24);
  background: rgba(174, 183, 194, 0.08);
}

.steps::before {
  background: rgba(174, 183, 194, 0.34);
}

.step span,
.sim-stage span {
  background: rgba(174, 183, 194, 0.14);
  color: var(--accent-strong);
}

.sim-message {
  background: rgba(174, 183, 194, 0.1);
}

.sim-stage.active,
.sim-stage.complete {
  border-color: rgba(174, 183, 194, 0.48);
  background: rgba(174, 183, 194, 0.1);
}

.crm-marquee::before {
  background: linear-gradient(90deg, var(--bg-2), rgba(238, 244, 248, 0));
}

.crm-marquee::after {
  background: linear-gradient(270deg, var(--bg-2), rgba(238, 244, 248, 0));
}

.crm-marquee-set span {
  color: rgba(38, 53, 70, 0.38);
}

body:not(.light) .crm-marquee-set span {
  color: rgba(216, 231, 241, 0.34);
}

.crm-marquee-set span:hover {
  color: var(--accent-strong);
  text-shadow: 0 0 22px rgba(174, 183, 194, 0.22);
}

.skyline-divider {
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
}

.skyline-divider::after {
  background: linear-gradient(180deg, rgba(247, 250, 253, 0), var(--bg));
}

body:not(.light) .skyline-divider::after {
  background: linear-gradient(180deg, rgba(16, 25, 35, 0), var(--bg));
}

.skyline-ground {
  background: rgba(174, 183, 194, 0.16);
}

.tower {
  border-color: rgba(174, 183, 194, 0.16);
  background: #dfe4e8;
}

.tower::before {
  background: #c7cdd4;
}

.tower span {
  background: rgba(174, 183, 194, 0.12);
}

.tower span.lit {
  background: rgba(174, 183, 194, 0.55);
  box-shadow: 0 0 14px rgba(174, 183, 194, 0.22);
}

body:not(.light) .tower {
  background: #172636;
}

body:not(.light) .tower::before {
  background: #101923;
}

.waitlist-panel {
  border-color: rgba(174, 183, 194, 0.22);
  background: linear-gradient(135deg, rgba(174, 183, 194, 0.12), rgba(255, 255, 255, 0.72));
  box-shadow: 0 22px 60px rgba(83, 96, 110, 0.16);
}

body:not(.light) .waitlist-panel {
  background: linear-gradient(135deg, rgba(174, 183, 194, 0.12), rgba(174, 183, 194, 0.035));
}

.pricing-card.popular {
  border-color: rgba(174, 183, 194, 0.58);
}

.popular-tag,
.form-success {
  background: rgba(174, 183, 194, 0.12);
  color: var(--accent-strong);
}

.currency-switch {
  border-bottom-color: var(--accent);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(174, 183, 194, 0.05);
}

.final-cta {
  background: linear-gradient(135deg, #f0f2f4, #aeb7c2);
  color: #07131a;
}

.final-cta h2,
.final-cta p {
  color: #07131a;
}

.site-footer {
  background: #111827;
  color: #d8e7f1;
}

.footer-tag,
.site-footer a:hover {
  color: var(--accent-light);
}

.final-cta {
  padding: 70px 0;
  background: var(--accent);
  color: #07131a;
  text-align: center;
}

.final-cta h2,
.final-cta p {
  color: #07131a;
}

.final-cta .container {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.site-footer {
  padding: 58px 0 0;
  background: #111827;
  color: #1f2933;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-grid {
  grid-template-columns: 1.2fr repeat(3, 1fr);
}

.footer-tag {
  margin-top: 14px;
  color: var(--accent-light);
  font-weight: 700;
}

.site-footer h3 {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 16px;
}

.site-footer a {
  display: block;
  margin: 8px 0;
  color: #6d7480;
}

.site-footer a:hover {
  color: var(--accent-light);
}

.footer-bottom {
  margin-top: 44px;
  border-top: 1px solid rgba(208, 216, 238, 0.12);
  padding: 20px;
  color: #6d7480;
  font-size: 14px;
  text-align: center;
}

.footer-bottom a {
  display: inline;
}

.final-cta {
  background: linear-gradient(135deg, #f7f8f9 0%, #c9d0d8 48%, #aeb7c2 100%);
  color: #07131a;
}

.final-cta h2,
.final-cta p {
  color: #07131a;
}

.site-footer {
  border-top: 1px solid rgba(38, 53, 70, 0.1);
  background: #eceff2;
  color: var(--text);
}

body:not(.light) .site-footer {
  border-top-color: rgba(216, 231, 241, 0.12);
  background: #101923;
  color: #d8e7f1;
}

.site-footer h3 {
  color: var(--white);
}

.site-footer a,
.footer-bottom {
  color: var(--muted);
}

.footer-bottom {
  border-top-color: rgba(38, 53, 70, 0.1);
}

body:not(.light) .footer-bottom {
  border-top-color: rgba(216, 231, 241, 0.12);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1120px) {
  .four,
  .pricing-grid,
  .feature-tile-grid,
  .included-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-inner,
  .contact-layout,
  .legal-layout,
  .simulation {
    grid-template-columns: 1fr;
  }

  .legal-summary {
    position: static;
  }

  .ops-visual {
    min-height: 360px;
  }
}

@media (max-width: 900px) {
  .three,
  .pillar-grid,
  .home-pillar-grid,
  .feature-detail,
  .markets,
  .metric-grid,
  .insight-grid,
  .overage,
  .steps,
  .about-intro {
    grid-template-columns: 1fr;
  }

  .metric-card p:not(.metric-value) {
    max-width: none;
  }

  .steps::before {
    top: 0;
    bottom: 0;
    left: 24px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .step {
    grid-template-columns: 50px 1fr;
    column-gap: 16px;
  }

  .step h3,
  .step p {
    grid-column: 2;
  }

  .step span {
    grid-row: 1 / span 2;
  }
}

@media (max-width: 768px) {
  .nav-shell {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }

  .mobile-drawer {
    display: block;
  }

  section {
    padding: 82px 0;
  }

  .hero,
  .page-hero {
    min-height: auto;
    padding: 82px 0;
  }

  .hero-actions .btn,
  .hero-actions .text-link,
  .contact-form .btn,
  .waitlist-panel .btn,
  .pricing-controls,
  .currency-switch,
  .sim-controls .btn {
    width: 100%;
  }

  .pricing-controls {
    align-items: stretch;
  }

  .segmented {
    width: 100%;
  }

  .segmented button {
    flex: 1;
  }

  .crm-marquee {
    --crm-gap: 38px;
    --crm-loop-nudge: 9.5px;
    margin-top: 28px;
  }

  .crm-marquee-track,
  .crm-marquee-set {
    gap: var(--crm-gap);
  }

  .crm-marquee-set span {
    font-size: 16px;
  }

  .crm-marquee::before,
  .crm-marquee::after {
    width: 54px;
  }

  .stat-strip {
    padding: 48px 0;
  }

  .insight-card {
    padding: 26px;
  }

  .skyline-divider {
    height: 220px;
  }

  .tower {
    transform: scale(0.82);
    transform-origin: bottom center;
  }

  .waitlist-panel {
    grid-template-columns: 1fr;
    padding: 26px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

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

  h1 {
    font-size: 32px;
  }

  .four,
  .pricing-grid,
  .feature-tile-grid,
  .included-grid,
  .visual-status,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .ops-visual,
  .info-card,
  .pillar-card,
  .home-pillar-card,
  .feature-tile,
  .detail-group,
  .pricing-card,
  .contact-form,
  .legal-content,
  .legal-summary,
  .overage,
  .sim-phone,
  .sim-work,
  .sim-crm,
  .statement {
    padding: 21px;
  }

  .about-story {
    padding-left: 18px;
  }

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

.eyebrow,
.market-label,
.metric-value,
.contact-email a,
.pillar-link,
.currency-switch {
  color: var(--accent-strong);
}

body:not(.light) .eyebrow,
body:not(.light) .market-label,
body:not(.light) .metric-value,
body:not(.light) .contact-email a,
body:not(.light) .pillar-link,
body:not(.light) .currency-switch {
  color: #d8dde3;
}

.nav-links a {
  color: #4b5561;
}

.nav-links a:hover,
.nav-links a.active {
  color: #0c1117;
}

body:not(.light) .nav-links a {
  color: #b7c0ca;
}

body:not(.light) .nav-links a:hover,
body:not(.light) .nav-links a.active {
  color: #ffffff;
}

.btn-primary,
.segmented button.active {
  background: linear-gradient(135deg, #34404c, #788491);
  color: #ffffff;
  box-shadow: 0 16px 35px rgba(56, 66, 78, 0.24);
}

.btn-secondary {
  background: rgba(120, 132, 145, 0.1);
}

.badge {
  border-color: rgba(52, 64, 76, 0.2);
  background: rgba(120, 132, 145, 0.14);
}

.pulse-dot {
  background: var(--accent-strong);
}

.hero,
.page-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(120, 132, 145, 0.22), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(197, 204, 212, 0.34), transparent 25%),
    linear-gradient(135deg, #f7f8f9 0%, #e9edf1 48%, #d5dbe1 100%);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(52, 64, 76, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 64, 76, 0.08) 1px, transparent 1px);
}

.home-pillar-card,
.insight-card,
.ops-visual {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(229, 233, 237, 0.9));
}

.visual-status div,
.visual-list,
.visual-meter,
.sim-stage,
.usage-controls span,
.included-grid span {
  background: rgba(120, 132, 145, 0.1);
}

.crm-marquee-set span {
  color: rgba(24, 33, 43, 0.52);
}

.crm-marquee-set span:hover {
  color: #34404c;
  text-shadow: 0 0 18px rgba(120, 132, 145, 0.2);
}

.final-cta {
  background: linear-gradient(135deg, #e8ebef 0%, #c3cad2 46%, #8793a0 100%);
}

.final-cta h2,
.final-cta p {
  color: #0c1117;
}

.site-footer {
  background: #e4e8ec;
}

.footer-tag {
  color: #34404c;
}

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

/* ==========================================================================
   Contrast corrections
   --------------------------------------------------------------------------
   The header stays light in dark mode on purpose: the wordmark PNG is pure
   black ink with no light variant (19:1 on the light bar, 1.19:1 on a dark
   one). What was wrong is that the nav text kept dark-mode colours, so light
   sat on light — measured 1.02:1 for the brand and Sign In, 1.24:1 for the
   active tab. Everything here is text; no layout or palette is redesigned.
   ========================================================================== */

/* --accent-strong means "reads against the page". It is used on the light
   header once and on dark page backgrounds three times, so it is redefined
   for dark and the header is given explicit values below. */
body:not(.light) {
  --accent-strong: #dfe9f3;
  --accent-light: #b9c6d4;
  --focus: 0 0 0 3px rgba(216, 231, 241, 0.34);
}

body.light {
  --accent-light: #55606d;
}

/* Header: light bar in both themes, so its contents are dark in both. */
body:not(.light) .nav-links a {
  color: #4b5561;
}

body:not(.light) .nav-links a:hover,
body:not(.light) .nav-links a.active {
  color: #0b1118;
}

body:not(.light) .menu-toggle span {
  background: #0b1118;
}

/* Sign In sits in the header next to the theme toggle. */
.nav-signin {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(11, 17, 24, 0.22);
  border-radius: 17px;
  color: #0b1118;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: background 200ms ease, border-color 200ms ease;
}

.nav-signin:hover {
  border-color: rgba(11, 17, 24, 0.45);
  background: rgba(11, 17, 24, 0.06);
}

.nav-signin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 17, 24, 0.28);
}

body:not(.light) .nav-signin,
body.light .nav-signin {
  color: #0b1118;
}

/* Matches where .nav-links collapses and the drawer takes over; the drawer
   carries its own Sign In link. */
@media (max-width: 768px) {
  .nav-signin {
    display: none;
  }
}

/* The big watermark numbers were a fixed 24% grey in both themes: 1.17:1 on
   a light card, 1.67:1 on a dark one. Kept secondary, now actually legible. */
.insight-stat {
  color: rgba(38, 53, 70, 0.58);
}

body:not(.light) .insight-stat {
  color: rgba(216, 231, 241, 0.44);
}

/* Legal-page links were --accent-light (#c5ccd4) in both themes, which is
   near-invisible on the light surface those pages use. */
.legal-summary a,
.legal-content a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Brand mark: the full lockup, traced whole from the source file
   --------------------------------------------------------------------------
   Traced directly from BWH5g.jpg (icon and wordmark together, as one path)
   and inlined as an SVG with fill="currentColor", so it takes whatever
   colour the context sets — in both themes, at any size — with none of the
   mask/invert workarounds a raster asset needs.

   The visible artwork reads "Alendome": that is what is in the source file.
   The correct name is carried for assistive tech and search by
   aria-label="AIendome home" on the header link and aria-label="AIendome"
   (role="img") on the footer block, both of which override their visible
   children regardless of what the graphic shows. If the wordmark itself
   needs to read correctly, that is a redraw of the source art, not a CSS
   or markup fix — flag it rather than re-solving it here.
   ========================================================================== */

.brand-logo {
  display: block;
  flex-shrink: 0;
  width: 165.9px;
  height: 34px;
  color: #0b1118;
}

.footer-brand .brand-logo {
  width: 185.5px;
  height: 38px;
}

@media (max-width: 600px) {
  .brand-logo {
    width: 146.5px;
    height: 30px;
  }
}

/* Header bar is light in both themes, so its ink stays dark. Footer follows
   the theme: dark ink on the light footer, light ink on the dark one — same
   values used for the rest of the footer's theme-aware text. */
body:not(.light) .footer-brand .brand-logo {
  color: #e8eef7;
}