:root {
  --canvas: #fbfcfd;
  --surface: #ffffff;
  --surface-hover: #f4f6f8;
  --feature-surface: #fff3ed;
  --feature-border: #f1d7ca;
  --feature-ink: #2b211d;
  --feature-muted: #71645d;
  --hairline: #e6e9ed;
  --hairline-strong: #cdd3da;
  --ink: #17191d;
  --muted: #59616c;
  --muted-soft: #7c8591;
  --primary: #cc4e1f;
  --primary-hover: #b5451b;
  --primary-soft: #f7e4da;
  --primary-contrast: #ffffff;
  --focus-ring: rgb(204 78 31 / 40%);
  --shadow: 0 24px 70px rgb(23 25 29 / 10%);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }

body {
  min-width: 20rem;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
::selection { background: var(--primary-soft); color: var(--ink); }

.site-header {
  position: sticky;
  inset: 0 0 auto;
  z-index: 30;
  min-height: 5rem;
  padding: 0 max(2rem, calc((100vw - 78rem) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid rgb(230 233 237 / 78%);
  background: rgb(251 252 253 / 88%);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.brand img { width: 2rem; height: 2rem; display: block; }
.site-header nav { display: flex; align-items: center; gap: 2.25rem; }
.site-header nav a { color: var(--muted); font-size: 0.8125rem; font-weight: 550; }
.site-header nav a:hover { color: var(--primary); }

.header-action,
.primary-button,
.secondary-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 650;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.header-action { justify-self: end; background: var(--primary); color: white; box-shadow: 0 8px 22px rgb(204 78 31 / 20%); }
.header-action:hover, .primary-button:hover { background: var(--primary-hover); transform: translateY(-1px); }
.primary-button { background: var(--primary); color: white; box-shadow: 0 10px 24px rgb(204 78 31 / 18%); }
.secondary-button { border: 1px solid var(--hairline-strong); background: var(--surface); }
.secondary-button:hover { background: var(--surface-hover); transform: translateY(-1px); }

.hero-section {
  min-height: calc(100vh - 5rem);
  padding: clamp(4rem, 8vw, 7rem) max(2rem, calc((100vw - 78rem) / 2));
  display: grid;
  grid-template-columns: 0.87fr 1.13fr;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 26%, rgb(247 228 218 / 92%), transparent 32rem),
    radial-gradient(circle at 28% 78%, rgb(255 243 237 / 75%), transparent 26rem),
    var(--canvas);
}

.pill-label {
  width: fit-content;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--feature-border);
  border-radius: 999px;
  background: rgb(255 255 255 / 62%);
  padding: 0.45rem 0.8rem;
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.pill-label span { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--primary); }

.hero-copy h1 {
  margin: 1.65rem 0 0;
  color: var(--ink);
  font-size: clamp(5rem, 10.3vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -0.085em;
  line-height: 0.82;
}

.hero-copy h2 {
  max-width: 21ch;
  margin: 2.2rem 0 0;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.hero-copy > p:not(.pill-label):not(.preview-note) { max-width: 35rem; margin: 1.15rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.preview-note { margin: 1.5rem 0 0; color: var(--muted-soft); font-size: 0.72rem; }

.hero-visual { min-height: 39rem; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; width: min(38rem, 78%); aspect-ratio: 1; border-radius: 30%; background: rgb(204 78 31 / 8%); filter: blur(48px); z-index: -2; }
.visual-orbit { position: absolute; z-index: -1; border: 1px solid rgb(204 78 31 / 18%); border-radius: 50%; }
.orbit-one { width: 38rem; height: 38rem; right: -8rem; top: -5rem; }
.orbit-two { width: 8rem; height: 8rem; left: 0; bottom: 1rem; box-shadow: 0 0 42px rgb(204 78 31 / 10%); }

.app-window {
  width: min(43rem, 91%);
  min-height: 31rem;
  padding: 1.5rem;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 34px 80px rgb(23 25 29 / 15%);
  transform: perspective(1000px) rotateY(-4deg) rotateX(1deg);
}

.window-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
.window-bar .brand { font-size: 0.75rem; }
.window-bar .brand img { width: 1.5rem; height: 1.5rem; }
.window-status { color: var(--muted); font-size: 0.65rem; font-weight: 600; }
.window-status i { width: 0.4rem; height: 0.4rem; margin-right: 0.35rem; display: inline-block; border-radius: 50%; background: #3f7a4e; }
.window-heading { margin-top: 1.75rem; display: flex; justify-content: space-between; gap: 1.5rem; }
.page-eyebrow { margin: 0; color: var(--muted-soft); font-size: 0.625rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.window-heading h3 { margin: 0.45rem 0 0; font-size: 1.7rem; letter-spacing: -0.035em; }
.mini-button { height: fit-content; border-radius: 0.5rem; background: var(--primary); padding: 0.6rem 0.8rem; color: white; font-size: 0.65rem; font-weight: 650; }
.window-intro { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.72rem; }
.window-grid { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.window-grid article { min-height: 8.5rem; padding: 0.9rem; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 0.7rem; background: white; }
.window-grid article > span { color: var(--muted-soft); font-size: 0.55rem; font-weight: 700; }
.window-grid b { margin-top: auto; font-size: 0.75rem; }
.window-grid small { margin-top: 0.3rem; color: var(--muted); font-size: 0.58rem; }
.window-security { margin-top: 0.7rem; padding: 1rem; display: grid; grid-template-columns: auto 1fr 1.25fr; align-items: center; gap: 0.8rem; border: 1px solid var(--feature-border); border-radius: 0.7rem; background: var(--feature-surface); }
.security-symbol { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.55rem; background: var(--primary-soft); color: var(--primary); font-size: 0.65rem; font-weight: 800; }
.window-security > div { display: flex; flex-direction: column; }
.window-security b { font-size: 0.68rem; }
.window-security small { margin-top: 0.2rem; color: var(--feature-muted); font-size: 0.55rem; }
.window-security dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.window-security dl div { border-left: 1px solid var(--feature-border); padding-left: 0.65rem; }
.window-security dt { color: var(--feature-muted); font-size: 0.45rem; font-weight: 700; }
.window-security dd { margin: 0.25rem 0 0; font-size: 0.5rem; font-weight: 800; }

.floating-card { position: absolute; z-index: 3; padding: 0.85rem; display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: rgb(255 255 255 / 96%); box-shadow: 0 18px 42px rgb(23 25 29 / 14%); animation: float-card 5s ease-in-out infinite; }
.floating-card div { min-width: 0; display: flex; flex-direction: column; }
.floating-card small { color: var(--muted-soft); font-size: 0.46rem; font-weight: 750; letter-spacing: 0.07em; }
.floating-card b { margin-top: 0.2rem; font-size: 0.68rem; white-space: nowrap; }
.floating-card i { color: var(--muted); font-size: 0.55rem; font-style: normal; white-space: nowrap; }
.float-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 0.5rem; background: var(--primary-soft); color: var(--primary); font-size: 0.58rem; font-weight: 800; }
.floating-room { left: -0.5rem; top: 6rem; }
.floating-proof { right: -0.25rem; bottom: 4.5rem; animation-delay: -2.5s; }

@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.problem-section { padding: 7.5rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.problem-section > img { width: 3.5rem; height: 3.5rem; margin-bottom: 1.75rem; }
.problem-section h2, .centered-heading h2, .preview-section h2 { max-width: 19ch; margin: 1.25rem 0 0; font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1; }
.problem-section > p:not(.pill-label) { max-width: 45rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.standards { width: min(70rem, 100%); margin-top: 3rem; padding: 1rem 1.4rem; display: flex; justify-content: space-between; gap: 1.5rem; overflow: hidden; border: 1px solid var(--hairline); border-radius: 999px; background: white; color: var(--muted); font-size: 0.6rem; font-weight: 750; letter-spacing: 0.07em; white-space: nowrap; box-shadow: 0 12px 36px rgb(23 25 29 / 5%); }

.features-section { padding: 7.5rem max(2rem, calc((100vw - 78rem) / 2)); background: var(--feature-surface); }
.centered-heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.centered-heading > p:last-child { max-width: 42rem; margin: 1.2rem 0 0; color: var(--feature-muted); line-height: 1.7; }
.feature-grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.feature-card { min-width: 0; min-height: 35rem; overflow: hidden; position: relative; display: flex; flex-direction: column; border: 1px solid var(--feature-border); border-radius: 1.5rem; background: rgb(255 255 255 / 65%); }
.feature-copy { padding: 2rem 2rem 1.5rem; }
.feature-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--feature-border); border-radius: 0.75rem; background: white; color: var(--primary); font-size: 0.7rem; font-weight: 800; box-shadow: 0 8px 24px rgb(204 78 31 / 8%); }
.feature-copy .page-eyebrow { margin-top: 1.5rem; color: var(--primary); }
.feature-copy h3 { margin: 0.55rem 0 0; font-size: 1.45rem; letter-spacing: -0.03em; }
.feature-copy > p:last-child { margin: 0.75rem 0 0; color: var(--feature-muted); font-size: 0.875rem; line-height: 1.65; }
.feature-preview { width: calc(100% - 2.5rem); min-height: 17rem; margin: auto auto -2.25rem; padding: 1rem; border: 1px solid var(--hairline); border-radius: 1.1rem 1.1rem 0 0; background: white; box-shadow: 0 24px 55px rgb(23 25 29 / 11%); transform: rotate(-1.5deg); }
.feature-card:nth-child(2) .feature-preview { transform: rotate(1.5deg); }
.preview-top { padding: 0.2rem 0.25rem 0.9rem; display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); font-size: 0.72rem; }
.preview-top span { color: var(--muted-soft); }
.preview-row { min-height: 3.8rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--hairline); }
.preview-row > span { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 0.5rem; background: var(--primary-soft); color: var(--primary); font-size: 0.5rem; font-weight: 800; }
.preview-row b { font-size: 0.65rem; }
.preview-row i { color: #3f7a4e; font-size: 0.5rem; font-style: normal; }

.workflow-section { padding: 8rem max(2rem, calc((100vw - 78rem) / 2)); background: var(--canvas); }
.workflow-grid { margin: 4.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; list-style: none; }
.workflow-grid li { position: relative; text-align: center; }
.workflow-grid li:not(:last-child)::after { content: ""; width: calc(100% - 4.5rem); height: 1px; position: absolute; top: 2.5rem; left: calc(50% + 3rem); background: var(--hairline-strong); }
.workflow-icon { width: 5rem; height: 5rem; margin: 0 auto; display: grid; place-items: center; position: relative; z-index: 1; border: 1px solid var(--feature-border); border-radius: 50%; background: white; color: var(--primary); font-size: 0.8rem; font-weight: 800; box-shadow: 0 15px 38px rgb(204 78 31 / 11%); }
.workflow-grid h3 { margin: 1.5rem 0 0; font-size: 1rem; }
.workflow-grid p { max-width: 18rem; margin: 0.65rem auto 0; color: var(--muted); font-size: 0.8rem; line-height: 1.65; }

.preview-section { width: min(74rem, calc(100% - 4rem)); margin: 0 auto 4rem; padding: clamp(2.5rem, 6vw, 5rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; overflow: hidden; position: relative; border: 1px solid var(--feature-border); border-radius: 1.75rem; background: var(--feature-surface); }
.preview-section::after { content: ""; width: 18rem; height: 18rem; position: absolute; right: -8rem; top: -10rem; border: 1px solid rgb(204 78 31 / 16%); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(204 78 31 / 3%), 0 0 0 8rem rgb(204 78 31 / 2%); }
.preview-section > div { position: relative; z-index: 1; }
.preview-section > div > p:last-child { max-width: 40rem; margin: 1rem 0 0; color: var(--feature-muted); line-height: 1.7; }
.preview-section .primary-button { flex: 0 0 auto; position: relative; z-index: 1; }

footer { min-height: 13rem; padding: 2.5rem max(2rem, calc((100vw - 78rem) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-top: 1px solid var(--hairline); background: white; }
.footer-brand p { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.75rem; }
.footer-links { display: flex; gap: 2rem; color: var(--muted); font-size: 0.75rem; }
.footer-links a:hover { color: var(--primary); }
footer > span { justify-self: end; color: var(--muted); font-size: 0.75rem; }

.consent { position: fixed; z-index: 40; right: 1.25rem; bottom: 1.25rem; width: min(32rem, calc(100vw - 2.5rem)); padding: 1.25rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.25rem; border: 1px solid var(--hairline); border-radius: 0.9rem; background: white; box-shadow: var(--shadow); }
.consent[hidden] { display: none; }
.consent strong { font-size: 0.9375rem; }
.consent p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.6875rem; line-height: 1.5; }
.consent-actions { display: flex; gap: 0.5rem; }
.consent button { min-height: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--hairline-strong); border-radius: 999px; background: white; color: var(--ink); font: 600 0.6875rem/1 var(--font); cursor: pointer; }
.consent button.consent-accept { border-color: var(--primary); background: var(--primary); color: white; }

@media (max-width: 68rem) {
  .hero-section { grid-template-columns: 1fr; }
  .hero-copy { max-width: 48rem; }
  .hero-copy h1 { font-size: clamp(5rem, 18vw, 9rem); }
  .hero-visual { min-height: 36rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 30rem; display: grid; grid-template-columns: 0.75fr 1.25fr; }
  .feature-preview { width: calc(100% - 2rem); margin: auto -2rem -1.5rem 0; align-self: end; }
  .workflow-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
  .workflow-grid li::after { display: none; }
}

@media (max-width: 48rem) {
  .site-header { padding-inline: 1rem; grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero-section, .features-section, .workflow-section { padding-inline: 1.25rem; }
  .hero-visual { min-height: 30rem; }
  .app-window { width: 100%; padding: 1rem; }
  .floating-room { left: -0.75rem; }
  .floating-proof { right: -0.75rem; }
  .problem-section { padding-inline: 1.25rem; }
  .standards { justify-content: flex-start; }
  .feature-card { display: flex; }
  .feature-preview { width: calc(100% - 2.5rem); margin: auto auto -2.25rem; }
  .preview-section { width: calc(100% - 2.5rem); align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; align-items: start; }
  footer > span { justify-self: start; }
}

@media (max-width: 35rem) {
  .header-action { min-height: 2.45rem; padding: 0.6rem 0.85rem; font-size: 0.75rem; }
  .hero-section { padding-top: 3.25rem; }
  .hero-copy h1 { font-size: clamp(4.2rem, 22vw, 6rem); }
  .hero-copy h2 { font-size: 1.85rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-visual { min-height: 26rem; }
  .app-window { transform: none; }
  .window-grid { grid-template-columns: 1fr 1fr; }
  .window-grid article:last-child { display: none; }
  .window-security { grid-template-columns: auto 1fr; }
  .window-security dl { display: none; }
  .floating-card { display: none; }
  .problem-section h2, .centered-heading h2, .preview-section h2 { font-size: 2.55rem; }
  .workflow-grid { grid-template-columns: 1fr; }
  .preview-section { padding: 2rem 1.5rem; }
  .footer-links { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .consent { grid-template-columns: 1fr; }
  .consent-actions { justify-content: flex-end; }
}

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