:root {
  color-scheme: dark;
  --background: #071b35;
  --surface: #102d50;
  --text: #edf3f9;
  --muted: #b2c9e3;
  --line: #29425f;
  --accent: #a6ccf4;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 76% 43%, #205a943d 0%, #205a941a 38%, transparent 72%), linear-gradient(155deg, #072b59 0%, #0b3974 36%, #103f79 58%, #092c57 82%, #082448 100%); color: var(--text); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: #28598d; color: white; }
a { color: inherit; text-underline-offset: 5px; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.page { position: relative; isolation: isolate; min-height: 100svh; padding: 0 clamp(24px, 5vw, 88px); display: grid; grid-template-rows: auto 1fr auto; }
header { min-height: 100px; display: flex; align-items: center; gap: 32px; padding: 24px 0; border-bottom: 0; }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { display: block; width: 165px; height: auto; }
.edition { margin: 0 auto 0 6px; font-size: 13px; color: var(--muted); }
.header-contact { margin-left: auto; display: flex; align-items: center; gap: 18px; min-height: 44px; text-decoration: none; font-size: 14px; }
main { display: flex; align-items: flex-start; padding: clamp(44px, 8vh, 96px) 0 110px; }
.intro { position: relative; width: 100%; }
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: .025em; margin: 0 0 24px; }
h1 { font-size: clamp(46px, 6.3vw, 98px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; margin: 0 0 30px; }
h1 span { color: #accef1; }
.description { max-width: 490px; color: #d0e0f1; font-size: 17px; line-height: 1.55; letter-spacing: -.01em; margin: 0 0 30px; }
 .actions { display: flex; align-items: flex-start; gap: 45px; max-width: 800px; }
.demo-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 27px; flex-shrink: 0; text-decoration: none; border-bottom: 1px solid #a6c9ef; font-size: 15px; font-weight: 500; }
.agent-setup { flex: 1; min-width: 0; max-width: 560px; }
.agent-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 12px; font-weight: 500; color: #c5d8ed; }
.agent-heading a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.agent-command { display: flex; align-items: center; gap: 15px; border-block: 1px solid #a6c9ef55; background: linear-gradient(105deg, #071f4099 0%, #0c305973 60%, #10376140 100%); padding: 10px 0 10px 15px; }
.agent-command p { margin: 0; font: 400 14px/1.5 var(--font); letter-spacing: -.005em; overflow-wrap: anywhere; user-select: all; }
.agent-command button { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; align-self: stretch; min-height: 44px; padding: 0 15px; border: 0; border-left: 1px solid #a6c9ef33; background: transparent; color: #edf3f9; font-size: 12px; cursor: pointer; }
#copy-status { min-height: 20px; font-size: 11px; color: #c5d8ed; margin: 4px 0 0; }
@media (hover: hover) { .demo-link:hover, .agent-heading a:hover { color: white; border-color: white; } .agent-command button:hover { background: #ffffff12; } }
@media (max-width: 760px) { .actions { flex-direction: column; gap: 22px; } .demo-link { margin-top: 0; } .agent-setup { width: 100%; } .agent-command p { font-size: 12px; } .agent-command { gap: 8px; padding-left: 10px; } .agent-command button { padding-inline: 10px; } }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 19px; border: 1px solid transparent; border-radius: 5px; font: 500 14px/1.5 var(--font); text-decoration: none; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
.primary { background: #dfebf7; color: #122131; }
.secondary { background: #103e73; border-color: #8eafd278; color: var(--text); }
/* One continuous perspective field belongs to the page, not a framed illustration. */
.landscape { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.cover-grid { position: absolute; width: 100%; height: 54%; bottom: 0; color: #99c3ed; opacity: .28; mask-image: linear-gradient(to bottom, transparent 0%, #0003 18%, #0009 35%, #000b 48%, #0008 62%, #0003 76%, transparent 92%); }
.grid-field { fill: #185ba2; fill-opacity: .45; }
footer { padding: 14px 0 22px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 25px; }
.signature { margin: 0; font-size: 13px; color: #c5d8ed; }
.compatibility { margin: 0; font-size: 12px; font-weight: 500; color: #c5d8ed; }
.compatibility span { padding: 0 10px; color: #586779; }
nav { display: flex; gap: 23px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 12px; font-weight: 500; color: #c5d8ed; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px; font-size: 10px; color: var(--muted); margin-top: 3px; }
@media (hover: hover) {
  .primary:hover { background: #fff; }
  .secondary:hover { background: #123152; border-color: #6b829b; }
  nav a:hover, .header-contact:hover { color: #fff; }
}
@media (min-width: 761px) and (max-height: 760px) {
  header { min-height: 92px; padding-block: 17px; }
  main { padding-block: 24px 28px; }
  h1 { font-size: clamp(48px, 6vw, 82px); margin-bottom: 24px; }
  .eyebrow { margin-bottom: 18px; }
  .description { margin-bottom: 24px; font-size: 16px; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  main { padding-top: 52px; }
  h1 { font-size: 64px; }
  .edition { font-size: 12px; }
  .button { padding-inline: 14px; font-size: 13px; gap: 14px; }
}
@media (max-width: 760px) {
  .page { padding-inline: 24px; }
  header { min-height: 89px; padding-block: 20px; }
  .brand img { width: 150px; }
  .edition { display: none; }
  .header-contact { margin-left: auto; font-size: 12px; gap: 10px; }
  main { align-items: center; padding-block: 42px 64px; }
  .cover-grid { height: 44%; opacity: .24; }
  h1 { font-size: clamp(37px, 8.8vw, 64px); margin-bottom: 24px; overflow-wrap: normal; }
  .eyebrow { font-size: 12px; margin-bottom: 23px; }
  .description { font-size: 16px; max-width: 440px; }
  .button { font-size: 12px; gap: 12px; padding-inline: 14px; }
  .footer-row { gap: 8px 16px; }
  .signature { font-size: 12px; }
  .compatibility { font-size: 11px; }
  .compatibility span { padding-inline: 4px; }
  nav { gap: 20px; }
  nav a { font-size: 11px; }
  .legal { font-size: 10px; }
  dialog { padding: 27px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Extend colour beneath Safari chrome while keeping controls inside safe areas. */
html { background: #072b59; }
.page { padding-top: env(safe-area-inset-top, 0px); padding-left: max(clamp(24px, 5vw, 88px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(24px, 5vw, 88px), env(safe-area-inset-right, 0px)); }
footer { padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) { .page { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }