:root {
  --deep: #062333;
  --ocean: #075f73;
  --lagoon: #10a4a6;
  --navy: #1b3a5c;
  --gold: #f5c842;
  --foam: #e8fbfb;
  --paper: #f5fbfa;
  --white: #ffffff;
  --ink: #10242b;
  --muted: #60757c;
  --line: #d6e7e7;
  --coral: #f06f4f;
  --sand: #f2cc7f;
  --kelp: #0f7a5b;
  --warn: #b96d18;
  --danger: #b42318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(16,164,166,.08), transparent 32%),
    var(--paper);
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 6vw;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--ocean), var(--lagoon));
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 750;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

nav a:hover {
  color: var(--navy);
  border-color: var(--gold);
}

.hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 460px);
  align-items: center;
  gap: 34px;
  padding: 92px 6vw 86px;
  color: white;
  background:
    linear-gradient(110deg, rgba(6,35,51,.94), rgba(7,95,115,.50)),
    url("https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1900&q=82");
  background-size: cover;
  background-position: center;
}

.pitch-hero {
  min-height: 640px;
}

.pitch-note {
  color: var(--muted);
  line-height: 1.55;
  font-size: 17px;
}

.water-layer {
  position: absolute;
  inset: auto -10% -140px -10%;
  height: 330px;
  opacity: .82;
  background:
    radial-gradient(90% 75% at 10% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(70% 55% at 75% 30%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(135deg, rgba(16,164,166,.58), rgba(6,35,51,.3));
  border-radius: 48% 52% 0 0;
  transform: rotate(-2deg);
}

.water-layer::before,
.water-layer::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  height: 90px;
  border-radius: 50%;
  background: rgba(232,251,251,.28);
}

.water-layer::before { top: -18px; }
.water-layer::after { top: 46px; opacity: .18; transform: translateX(8%); }

.hero-content,
.live-card {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--coral);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero .eyebrow { color: var(--sand); }

h1, h2, h3, p { letter-spacing: 0; }

h1 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: .98;
}

h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.06;
}

h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.hero-text {
  max-width: 650px;
  color: rgba(255,255,255,.88);
  font-size: 20px;
  line-height: 1.5;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-proof span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 13px;
  font-weight: 850;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--deep);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.trust-strip div {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 22px 6vw;
  border-right: 1px solid rgba(255,255,255,.12);
}

.trust-strip div:last-child { border-right: 0; }

.trust-strip strong {
  font-size: 30px;
  line-height: 1;
}

.trust-strip span {
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.primary, .secondary, button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.primary, button {
  color: white;
  background: var(--navy);
}

.primary.small { min-height: 40px; }

.secondary {
  color: white;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.34);
}

.live-card,
.phone,
.triage-panel,
.module-card,
.dashboard-preview,
.board,
.flow div {
  border: 1px solid rgba(214,231,231,.9);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(6,35,51,.18);
}

.live-card { padding: 24px; }

.simple-phone {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.message {
  padding: 14px;
  border-radius: 8px;
  line-height: 1.45;
  border: 1px solid var(--line);
}

.message.incoming {
  background: var(--foam);
}

.message.ai {
  color: white;
  background: var(--ocean);
  border-color: var(--ocean);
}

.message.team {
  background: #fff7ed;
  border-color: #fed7aa;
}

.card-topline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kelp);
  box-shadow: 0 0 0 8px rgba(15,122,91,.16);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 20px 0;
}

.stats div {
  padding: 14px 10px;
  background: var(--foam);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.stats strong {
  display: block;
  font-size: 28px;
}

.stats span, .reef-feed p, .section-head p, dt, .flow p, .task-list small, .module-card li, .board p {
  color: var(--muted);
}

.reef-feed {
  display: grid;
  gap: 10px;
}

.reef-feed p {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
}

.value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: white;
}

.value-strip article {
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid var(--line);
}

.value-strip article:last-child { border-right: 0; }

.value-strip span {
  color: var(--coral);
  font-weight: 950;
}

.value-strip h2 {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.16;
}

.value-strip p {
  color: var(--muted);
  line-height: 1.48;
}

.assistant-section, .pitch-section, .ai-showcase, .modules, .planner-section, .owner-section, .workflow, .fit-section, .plans-section, .market-section, .simple-section, .ai-proof-section, .lead-section, .professional-section, .app-section {
  padding: 86px 6vw;
}

.professional-section {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.professional-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 470px);
  gap: 28px;
  align-items: stretch;
}

.professional-grid p {
  max-width: 780px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.56;
}

.professional-card {
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  background: #f7f9fc;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.professional-card span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.professional-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.professional-card li {
  color: var(--muted);
  line-height: 1.5;
}

.section-head {
  max-width: 820px;
  margin-bottom: 32px;
}

.section-head p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.55;
}

.pitch-section {
  background:
    linear-gradient(135deg, rgba(6,35,51,.96), rgba(7,95,115,.88)),
    url("https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  color: white;
}

.pitch-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 470px);
  gap: 32px;
  align-items: center;
}

.pitch-grid p {
  max-width: 780px;
  color: rgba(255,255,255,.82);
  font-size: 18px;
  line-height: 1.56;
}

.pitch-card {
  padding: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 28px 80px rgba(6,35,51,.28);
}

.pitch-card p,
.pitch-card li {
  color: var(--muted);
  font-size: 15px;
}

.pitch-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 9px;
}

.section-head.compact {
  max-width: 900px;
}

.plans-section {
  background:
    radial-gradient(circle at 100% 0%, rgba(240,111,79,.10), transparent 30%),
    #ffffff;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 18px;
}

.plan-card {
  min-height: 510px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fbfefe;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.plan-card.highlight {
  color: white;
  background:
    linear-gradient(150deg, rgba(6,35,51,.97), rgba(7,95,115,.92)),
    url("https://images.unsplash.com/photo-1582967788606-a171c1080cb0?auto=format&fit=crop&w=900&q=80");
  background-size: cover;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 28px 80px rgba(6,35,51,.22);
}

.plan-card span {
  color: var(--coral);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.plan-card.highlight span { color: var(--sand); }

.plan-card p {
  color: var(--muted);
  line-height: 1.5;
}

.plan-card.highlight p,
.plan-card.highlight li { color: rgba(255,255,255,.82); }

.plan-card .price-line {
  margin: 0;
  color: var(--ocean);
  font-size: 20px;
  font-weight: 950;
}

.plan-card.highlight .price-line { color: var(--sand); }

.plan-card ul {
  margin: 0 0 auto;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.fit-section {
  background:
    linear-gradient(180deg, #ffffff, #f3fbfb);
  border-bottom: 1px solid var(--line);
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
}

.fit-grid article {
  min-height: 245px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.fit-grid span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--ocean);
  background: var(--foam);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.fit-grid h3 {
  margin-top: 18px;
}

.fit-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.simple-section,
.market-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(16,164,166,.12), transparent 30%),
    #ffffff;
}

.simple-flow,
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
}

.simple-flow article,
.market-grid article,
.ai-proof-grid article {
  min-height: 235px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.simple-flow article {
  min-height: 220px;
}

.simple-flow span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: var(--coral);
  font-weight: 950;
}

.simple-flow h3 {
  margin-top: 18px;
}

.simple-flow p {
  color: var(--muted);
  line-height: 1.55;
}

.market-grid span {
  color: var(--coral);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.market-grid h3 {
  margin-top: 14px;
}

.market-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.ai-proof-section {
  color: white;
  background:
    linear-gradient(135deg, rgba(6,35,51,.96), rgba(7,95,115,.9)),
    url("https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
}

.ai-proof-section .section-head p:not(.eyebrow) {
  color: rgba(255,255,255,.78);
}

.ai-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 16px;
}

.ai-proof-grid article {
  min-height: 180px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}

.ai-proof-grid b {
  display: block;
  margin-bottom: 12px;
  color: var(--sand);
  font-size: 20px;
}

.ai-proof-grid span {
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}

.ai-showcase {
  background:
    radial-gradient(circle at 85% 0%, rgba(240,111,79,.12), transparent 30%),
    linear-gradient(180deg, #ffffff, #effafa);
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
}

.ai-card {
  min-height: 245px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.ai-card.featured {
  grid-row: span 2;
  min-height: 508px;
  color: white;
  background:
    linear-gradient(145deg, rgba(6,35,51,.96), rgba(7,95,115,.9)),
    url("https://images.unsplash.com/photo-1582967788606-a171c1080cb0?auto=format&fit=crop&w=900&q=80");
  background-size: cover;
  background-position: center;
  box-shadow: 0 28px 80px rgba(6,35,51,.20);
}

.ai-card span {
  color: var(--coral);
  font-weight: 950;
}

.ai-card.featured span {
  color: var(--sand);
}

.ai-card h3 {
  margin-top: 12px;
}

.ai-card p,
.ai-card li {
  color: var(--muted);
  line-height: 1.52;
}

.ai-card.featured p,
.ai-card.featured li {
  color: rgba(255,255,255,.84);
}

.ai-card ul {
  margin-top: 22px;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.assistant-grid {
  display: grid;
  grid-template-columns: minmax(330px, 500px) minmax(320px, 1fr);
  gap: 28px;
  align-items: stretch;
}

.phone {
  overflow: hidden;
  background: #0d2934;
  box-shadow: 0 28px 80px rgba(6,35,51,.22);
}

.phone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  padding: 14px 16px;
  background: rgba(255,255,255,.08);
}

.phone-bar small { color: #9ee3dc; }

.chat-log {
  height: 390px;
  padding: 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(16,164,166,.28), transparent 28%),
    linear-gradient(180deg, #0d2934, #073849);
}

.bubble {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 8px;
  line-height: 1.42;
  font-size: 15px;
}

.bubble.bot {
  align-self: flex-start;
  background: white;
  color: var(--ink);
}

.bubble.user {
  align-self: flex-end;
  background: var(--sand);
  color: #33240d;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  background: white;
  border-top: 1px solid var(--line);
}

.chat-form input,
.quick-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.chat-form input {
  min-width: 0;
  padding: 12px;
  color: var(--ink);
}

.quick-actions {
  padding: 0 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: white;
}

.quick-actions button {
  min-height: 36px;
  color: var(--ocean);
  background: var(--foam);
  padding: 0 10px;
  font-size: 13px;
}

.triage-panel {
  padding: 24px;
  display: grid;
  gap: 18px;
}

.triage-meter {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eeee;
}

.triage-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--lagoon), var(--kelp));
  transition: width .28s ease;
}

dl {
  margin: 0;
  display: grid;
  gap: 12px;
}

dl div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

dt {
  font-weight: 800;
}

dd {
  margin: 0;
  font-weight: 800;
}

.guardrail {
  padding: 16px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.guardrail p { margin-bottom: 0; }

.lead-packet {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: var(--foam);
  border: 1px solid var(--line);
}

.lead-packet span {
  display: block;
  color: var(--ocean);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-packet ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}

.modules { background: linear-gradient(180deg, #eefafa, #f8fcfc); }

.planner-section {
  background:
    linear-gradient(180deg, #f8fcfc, #eef7f7);
}

.module-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}

.module-tabs button {
  background: white;
  color: var(--ocean);
  border: 1px solid var(--line);
}

.module-tabs button.active {
  color: white;
  background: var(--ocean);
  border-color: var(--ocean);
}

.module-stage {
  display: grid;
  grid-template-columns: minmax(300px, .68fr) minmax(360px, 1fr);
  gap: 28px;
}

.module-card {
  padding: 24px;
  min-height: 360px;
}

.module-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 9px;
}

.dashboard-preview {
  overflow: hidden;
  min-height: 360px;
}

.dashboard-top, .board-head {
  min-height: 58px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-top span, .board-head span {
  font-weight: 900;
}

.dashboard-top button {
  min-height: 36px;
  padding: 0 12px;
}

.dashboard-content {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.offer-builder {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) auto minmax(280px, .9fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 0% 0%, rgba(16,164,166,.18), transparent 34%),
    white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.ops-demo-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 18px;
}

.mini-demo {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.mini-demo p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.5;
}

.cabin-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 10px;
  padding: 18px;
}

.seat {
  min-height: 64px;
  color: var(--ocean);
  background: var(--foam);
  border: 1px solid var(--line);
}

.seat.filled {
  color: white;
  background: var(--ocean);
}

.seat.review {
  color: #33240d;
  background: var(--sand);
}

.timeline-demo {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.timeline-demo div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #fbfefe;
  border: 1px solid var(--line);
}

.timeline-demo b {
  color: var(--coral);
}

.timeline-demo span {
  color: var(--muted);
  font-weight: 800;
}

.pricing-section {
  margin-top: 26px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 420px);
  gap: 20px;
  align-items: start;
}

.pricing-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.pricing-controls label {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfefe;
  color: var(--ink);
  font-weight: 850;
}

.pricing-controls input {
  width: 18px;
  height: 18px;
}

.discount-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.discount-strip span {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  color: var(--ocean);
  background: var(--foam);
  border: 1px solid var(--line);
  font-weight: 900;
  text-align: center;
}

.price-card {
  padding: 22px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, var(--deep), var(--ocean));
}

.price-card span {
  color: var(--sand);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.price-card strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  line-height: 1.1;
}

.price-card p {
  color: rgba(255,255,255,.78);
  line-height: 1.48;
}

.compare-table {
  margin-top: 22px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.compare-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.compare-row:last-child { border-bottom: 0; }

.compare-row span {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--muted);
  font-weight: 750;
  border-right: 1px solid var(--line);
}

.compare-row span:last-child { border-right: 0; }

.compare-row.head {
  background: var(--deep);
}

.compare-row.head span {
  color: white;
  font-weight: 950;
}

.offer-copy p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.offer-actions {
  display: grid;
  gap: 8px;
}

.offer-actions button {
  min-width: 134px;
  background: var(--ocean);
}

.offer-result {
  padding: 16px;
  border-radius: 8px;
  background: var(--deep);
  color: white;
}

.offer-result span:first-child {
  color: var(--sand);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.offer-result strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.offer-result p {
  color: rgba(255,255,255,.8);
  line-height: 1.45;
}

.offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.offer-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: white;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 900;
}

.row-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfefe;
}

.row-card b { display: block; }

.planner-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
}

.planner-decision {
  grid-column: 1 / -1;
}

.planner-board,
.planner-decision {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.planner-board .board-head button {
  min-height: 36px;
  padding: 0 12px;
  background: var(--ocean);
}

.site-list,
.boat-plan {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.site-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 0% 0%, rgba(16,164,166,.12), transparent 30%),
    #fbfefe;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.site-card.rough {
  border-color: #f8c18f;
  background:
    radial-gradient(circle at 0% 0%, rgba(240,111,79,.15), transparent 34%),
    #fffaf5;
}

.site-card.rough .site-score {
  background: linear-gradient(135deg, var(--warn), var(--coral));
}

.site-card b,
.boat-card b {
  display: block;
}

.site-meta,
.boat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.site-meta span,
.boat-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--foam);
  font-size: 12px;
  font-weight: 850;
}

.site-score {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, var(--lagoon), var(--kelp));
  font-weight: 950;
}

.boat-card {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fbfefe;
}

.planner-decision {
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(6,35,51,.94), rgba(7,95,115,.9)),
    url("https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=900&q=80");
  background-size: cover;
  color: white;
}

.planner-decision p,
.planner-decision li {
  color: rgba(255,255,255,.8);
  line-height: 1.5;
}

.planner-decision ul {
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--kelp);
  background: #def7ec;
  font-size: 12px;
  font-weight: 900;
}

.tag.warn { color: var(--warn); background: #fff3d8; }
.tag.danger { color: var(--danger); background: #fee4e2; }
.tag.blue { color: var(--ocean); background: var(--foam); }

.owner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 22px;
}

.board {
  padding-bottom: 18px;
  min-height: 260px;
}

.board > h3, .board > p, .board > a {
  margin-left: 18px;
  margin-right: 18px;
}

.task-list {
  display: grid;
  gap: 10px;
  padding: 16px 18px 0;
}

.task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #fbfefe;
  border: 1px solid var(--line);
}

.task-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lagoon);
}

.task-dot.warn { background: var(--warn); }
.task-dot.danger { background: var(--danger); }

.checklist {
  padding: 16px 18px 0;
  display: grid;
  gap: 12px;
}

.checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
}

.checklist input { width: 18px; height: 18px; }

.review-sim p {
  margin: 16px 18px;
  line-height: 1.5;
}

.rating-buttons {
  display: flex;
  gap: 8px;
  padding: 0 18px;
}

.rating-buttons button {
  min-height: 38px;
  padding: 0 12px;
  background: var(--ocean);
}

.review-result {
  margin: 14px 18px 0;
  padding: 12px;
  border-radius: 8px;
  color: var(--muted);
  background: #fbfefe;
  border: 1px solid var(--line);
}

.board.accent {
  padding: 22px 0;
  background:
    linear-gradient(135deg, rgba(7,95,115,.96), rgba(16,164,166,.88)),
    url("https://images.unsplash.com/photo-1682686581264-c47e25e61d95?auto=format&fit=crop&w=900&q=80");
  background-size: cover;
  color: white;
}

.board.accent p { color: rgba(255,255,255,.86); }

.app-section {
  background:
    radial-gradient(circle at 95% 0%, rgba(245,200,66,.16), transparent 28%),
    linear-gradient(180deg, #ffffff, #f3fbfb);
  border-top: 1px solid var(--line);
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(320px, 1fr);
  gap: 28px;
  align-items: stretch;
}

.app-phone {
  min-height: 560px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(27,58,92,.18);
  background: #0d1b2a;
  box-shadow: 0 28px 80px rgba(6,35,51,.22);
}

.app-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: white;
  padding: 8px 8px 18px;
}

.app-status span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.app-screen {
  min-height: 480px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #f7f9fc;
}

.app-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.app-metric {
  padding: 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
}

.app-metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.app-metric b {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 24px;
}

.app-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
}

.app-card small {
  color: var(--muted);
  line-height: 1.4;
}

.app-card em {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--kelp);
  background: rgba(15,122,91,.12);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.app-card em.warn {
  color: var(--warn);
  background: rgba(185,109,24,.12);
}

.app-card em.danger {
  color: var(--danger);
  background: rgba(180,35,24,.12);
}

.app-card em.blue {
  color: var(--navy);
  background: rgba(27,58,92,.12);
}

.app-panel {
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.app-tabs button {
  min-height: 40px;
  background: #eef4fb;
  color: var(--navy);
  border: 1px solid var(--line);
}

.app-tabs button.active {
  color: white;
  background: var(--navy);
  border-color: var(--navy);
}

.app-copy p,
.app-feature-list li {
  color: var(--muted);
  line-height: 1.55;
}

.app-copy ul,
.app-feature-list {
  margin: 18px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.app-roadmap {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 14px;
  margin-top: 28px;
  padding: 16px;
  border-radius: 8px;
  background: #f7f9fc;
  border-left: 5px solid var(--gold);
}

.app-roadmap span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.app-roadmap b {
  color: var(--ink);
}

.workflow {
  background: var(--deep);
  color: white;
}

.workflow .section-head p:not(.eyebrow),
.workflow .flow p {
  color: rgba(255,255,255,.72);
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.flow div {
  min-height: 154px;
  padding: 18px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: white;
  box-shadow: none;
}

.flow span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--coral);
  color: white;
  font-weight: 900;
}

.final-cta {
  margin-top: 28px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}

.final-cta h3 {
  max-width: 760px;
}

.final-cta p {
  max-width: 860px;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

.lead-section {
  background:
    radial-gradient(circle at 95% 0%, rgba(240,111,79,.10), transparent 28%),
    #f8fcfc;
}

.lead-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 420px);
  gap: 22px;
  align-items: start;
}

.lead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  padding: 22px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 26px rgba(16,32,38,.06);
}

.lead-form label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 850;
}

.optional {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.lead-form .wide {
  grid-column: 1 / -1;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fbfefe;
}

.lead-form textarea {
  resize: vertical;
  line-height: 1.45;
}

.lead-form .consent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lead-form .consent input {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.lead-form button {
  justify-self: start;
}

.form-status {
  margin: 0;
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.lead-side {
  padding: 24px;
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(145deg, rgba(6,35,51,.96), rgba(7,95,115,.9)),
    url("https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=900&q=80");
  background-size: cover;
  background-position: center;
  box-shadow: 0 28px 80px rgba(6,35,51,.20);
}

.lead-side span {
  color: var(--sand);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-side h3 {
  margin-top: 12px;
}

.lead-side p,
.lead-side li {
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}

.lead-side ul {
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.next-steps {
  margin: 18px 0;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

.next-steps b {
  color: white;
}

.next-steps ol {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.next-steps li {
  color: rgba(255,255,255,.82);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .hero,
  .pitch-grid,
  .assistant-grid,
  .module-stage,
  .owner-grid,
  .offer-builder,
  .pricing-grid,
  .planner-grid,
  .value-strip,
  .ai-grid,
  .fit-grid,
  .plan-grid,
  .ops-demo-grid,
  .trust-strip,
  .market-grid,
  .simple-flow,
  .ai-proof-grid,
  .lead-grid,
  .lead-form,
  .professional-grid,
  .app-grid,
  .app-roadmap,
  .discount-strip {
    grid-template-columns: 1fr;
  }

  .ai-card.featured {
    grid-row: auto;
    min-height: 360px;
  }

  .pain-strip,
  .flow {
    grid-template-columns: repeat(2, 1fr);
  }

  nav { display: none; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 18px; }
  .hero, .assistant-section, .modules, .owner-section, .workflow, .fit-section, .pitch-section, .ai-showcase, .planner-section, .plans-section, .market-section, .simple-section, .ai-proof-section, .lead-section, .professional-section, .app-section { padding-left: 18px; padding-right: 18px; }
  .hero { min-height: 760px; padding-top: 62px; }
  h1 { font-size: 40px; line-height: 1.02; }
  h2 { font-size: 30px; }
  .stats, .flow { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row span { border-right: 0; border-bottom: 1px solid var(--line); }
  .compare-row span:last-child { border-bottom: 0; }
  .trust-strip div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .pricing-controls { grid-template-columns: 1fr; }
  .chat-form { grid-template-columns: 1fr; }
  dl div { grid-template-columns: 1fr; }
  .row-card, .task { grid-template-columns: 1fr; }
  .lead-form .wide { grid-column: auto; }
}