:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  color: #f5faff;
  background: #142d43;
  --mint: #a2f1db;
  --muted: #b6ccdf;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: clip;
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 78% 28%, #4e66816b, transparent 49%),
    radial-gradient(ellipse at 37% 92%, #49698855, transparent 57%),
    linear-gradient(120deg, #142c40, #293f56 53%, #132e44);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
button:active { transform: translateY(1px); }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-solid { fill: currentColor; stroke: none; }
.page-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.page-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 65%, #83e1cb0b, transparent 45%); }
.ribbons { width: 100%; height: 100%; }
.shell { max-width: 1680px; margin: auto; padding-inline: 56px; overflow: clip; }
.skip-link { position: absolute; top: -80px; left: 20px; padding: 12px 20px; color: #142c40; background: var(--mint); border-radius: 8px; z-index: 10; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 94px; display: flex; align-items: center; gap: 46px; border-bottom: 1px solid #b6d7f221; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { display: block; width: 138px; height: 46px; object-fit: contain; }
.services { display: flex; align-items: center; gap: 10px; }
.service { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 46px; padding: 10px 17px; color: #c3d7e8; font-size: 13px; background: none; border: 1px solid transparent; border-radius: 12px; white-space: nowrap; }
.service .icon { width: 20px; height: 20px; color: #a7c7d6; }
.service.active { color: #f5faff; border-color: #9ad9db42; background: linear-gradient(115deg, #92cadd0f, #a2f1db08); box-shadow: inset 0 1px 0 #ffffff08, 0 6px 18px #09212f1a; }
.service.active .icon { color: var(--mint); }
.service:hover { color: #fff; background-color: #b4dcff08; }
.account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.account button { min-height: 44px; padding: 10px 21px; border-radius: 10px; font-size: 13px; white-space: nowrap; }
.login { color: #dceaf4; background: #b4dcff04; border: 1px solid #91b9c64d; }
.login:hover { background: #b4dcff12; }
.register { color: #153c3c; font-weight: 600; border: 1px solid #b8f6e2; background: linear-gradient(120deg, #a2f1db, #83dece); box-shadow: 0 4px 20px #a2f1db08, inset 0 1px 0 #ffffff55; }
.register:hover { background: #b2f4e1; }
.hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.15fr); gap: 52px; align-items: center; min-height: calc(100svh - 94px); padding-block: 44px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 29px; padding: 9px 14px; border: 1px solid #9bcbda2e; border-radius: 40px; background: #0b263428; color: #c3deef; text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; line-height: 1.4; }
.status-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px #a2f1db0b, 0 0 12px #a2f1db55; }
h1 { margin: 0; font-size: clamp(46px, 4.32vw, 72px); line-height: 1.085; font-weight: 650; letter-spacing: -2.6px; }
h1>span, h1>em { display: block; }
h1>em { font-style: normal; color: var(--mint); background: linear-gradient(100deg, #b2f6df, #81dfd1 80%); background-clip: text; -webkit-text-fill-color: transparent; }
.intro { max-width: 560px; margin: 27px 0 0; color: #c3d7e8; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 32px; }
.primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 31px; min-height: 59px; padding: 16px 25px; border: 1px solid #b7f5df; border-radius: 11px; color: #123735; background: linear-gradient(115deg, #a2f1db, #7edccd); box-shadow: inset 0 1px 0 #ffffff66, 0 12px 36px #06252b28; font-size: 16px; font-weight: 600; transition: background .18s, box-shadow .18s; }
.primary:hover { background: #b2f6e1; box-shadow: 0 12px 32px #9befd519; }
.secondary { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; color: #e4eff7; font-size: 14px; white-space: nowrap; }
.secondary>span:last-child { padding-block: 4px; border-bottom: 1px solid #96d8d366; }
.play-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; border: 1px solid #92c5d976; background: #152f4125; box-shadow: inset 0 1px 0 #ffffff0a; }
.play-icon svg { width: 17px; height: 17px; fill: #e5f6ff; margin-left: 2px; }
.secondary:hover .play-icon { background: #a2f1db18; border-color: var(--mint); }
.clients { margin-top: 42px; }
.clients>p { margin: 0 0 13px; color: #a9c4d8; font-size: 11px; }
.client-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.client-list>span { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 6px 10px; border: 1px solid #a9d7ff22; border-radius: 8px; background: linear-gradient(130deg, #a9d7ff08, #7dc3fa02); color: #dcebf5; font-size: 11px; }
.client-symbol { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--mint); font-size: 21px; font-style: normal; }
.client-symbol.claude { color: #d9ab90; }
.client-symbol.cursor { color: #dceaf2; }
.client-list .any-client { color: #b6cfe1; }
.any-client .icon { width: 17px; height: 17px; color: #9bded4; }
.demo-column { position: relative; min-width: 0; width: 100%; scroll-margin-top: 24px; }
.demo-column::before { content: ""; position: absolute; z-index: -1; inset: 0 -14% -3% -12%; border-radius: 50%; background: radial-gradient(ellipse closest-side, #95d8d820, #729ab610 65%, transparent); filter: blur(28px); }
.demo-orbit { position: absolute; z-index: -1; inset: -18px -25px 14px -33px; border: 1px solid #9ed9e224; border-radius: 50%; }
.demo-orbit::after { content: ""; position: absolute; inset: 25px -25px; border: 1px solid #9ed9e213; border-radius: 50%; }
.demo-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #a2f1db; box-shadow: 0 0 14px #a2f1db70; }
.demo-orbit i:nth-child(1) { left: 2.5%; top: 32%; }
.demo-orbit i:nth-child(2) { right: 14%; top: 9%; opacity: .7; }
.demo-orbit i:nth-child(3) { left: 22%; bottom: 8%; opacity: .5; }
.demo-frame { padding: 0 7px 7px; border: 1px solid #e3f4fa90; border-radius: 20px; background: linear-gradient(130deg, #f6fafc, #e7eef4); box-shadow: 0 28px 75px #03162550, 0 4px 14px #0b26352e, 0 0 0 5px #9dcfdf0d, inset 0 1px 0 #fff; }
.window-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 49px; padding: 0 9px; color: #446174; }
.window-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #db9b94; box-shadow: inset 0 0 0 1px #152d4010; }
.window-dots i:nth-child(2) { background: #dfc68d; }.window-dots i:nth-child(3) { background: #85bca1; }
.window-title { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; }
.window-title .status-dot { width: 5px; height: 5px; background: #5f9f87; box-shadow: none; }
.window-title-detail { color: #798e9e; font-weight: 400; }
.open-demo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #7890a0; }
.open-demo:hover { background: #dce7ec; color: #23475a; }
.open-demo:focus-visible { outline-color: #287a6c; outline-offset: 1px; }
.open-demo .icon { width: 16px; height: 16px; }
/* The original demo document is immutable. Crop only its outer page padding.
   Container queries follow the iframe width, including on narrow desktops. */
.demo-viewport { --chat-height: clamp(470px, calc(100svh - 278px), 690px); container-type: inline-size; height: var(--chat-height); overflow: hidden; border-radius: 12px; background: #fff; }
.demo-iframe { display: block; width: 116.27907%; height: calc(var(--chat-height) + 80px); max-width: none; margin-left: -8.139535%; margin-top: -40px; border: 0; }
@container (max-width: 576px) {
  .demo-iframe { width: calc(100% + 24px); height: calc(var(--chat-height) + 40px); margin-left: -12px; margin-top: -20px; }
}
.demo-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; color: #abc8d9; font-size: 10px; letter-spacing: .15px; }
.demo-caption>span { display: block; width: 15px; height: 1px; background: #8fc5c2; }
.demo-scroll-hint { display: none; }
dialog { width: min(420px, calc(100% - 40px)); padding: 28px; border: 1px solid #a2f1db40; border-radius: 16px; color: #f5faff; background: #203d53; box-shadow: 0 24px 70px #06192688; }
dialog::backdrop { background: #061926aa; backdrop-filter: blur(5px); }
dialog h2 { margin: 0 0 14px; font-size: 23px; } dialog p { color: #c3d7e8; line-height: 1.65; } dialog form { margin-top: 24px; }
@media (min-width: 1550px) {
  .shell { padding-inline: 64px; }.site-header { gap: 56px; }
  .hero { gap: 70px; }.intro { font-size: 19px; }.eyebrow { margin-bottom: 35px; }
  .hero-actions { margin-top: 37px; }.primary { min-height: 64px; padding-inline: 29px; }.secondary { font-size: 16px; }
  .clients { margin-top: 48px; }.client-list>span { font-size: 12px; padding: 7px 12px; }
}
@media (max-width: 1280px) {
  .site-header { gap: 24px; }.services { gap: 4px; }.service { padding-inline: 12px; }
}
@media (max-width: 1200px) {
  .shell { padding-inline: 36px; }.site-header { gap: 24px; }.brand-logo { width: 120px; height: 40px; }
  .service { padding-inline: 12px; font-size: 12px; gap: 8px; }.services { gap: 3px; }.account button { padding-inline: 16px; }
  .hero { gap: 34px; }.intro { font-size: 16px; }.hero-actions { gap: 18px; }.primary { padding-inline: 20px; gap: 20px; font-size: 14px; }.secondary { font-size: 12px; gap: 9px; }.play-icon { width: 38px; height: 38px; }
  .eyebrow { letter-spacing: 1.2px; font-size: 9px; }.clients { margin-top: 32px; }
}
@media (max-width: 1000px) {
  .site-header { flex-wrap: wrap; padding-top: 20px; row-gap: 14px; }.account { margin-left: auto; }
  .services { order: 3; width: 100%; gap: 10px; padding-bottom: 14px; }.service { font-size: 13px; }
  .hero { grid-template-columns: 1fr; gap: 52px; padding-block: 44px 36px; }
  .hero-copy { width: 100%; max-width: 700px; margin-inline: auto; padding: 0; }
  h1 { font-size: 64px; }.intro { font-size: 18px; max-width: 620px; }.eyebrow { font-size: 10px; }
  .hero-actions { gap: 27px; }.primary { font-size: 16px; padding-inline: 25px; gap: 30px; }.secondary { font-size: 14px; gap: 12px; }
  .demo-column { max-width: 760px; margin-inline: auto; }.demo-viewport { --chat-height: 620px; }
  .page-art .ribbons { opacity: .8; }
}
@media (max-width: 600px) {
  .shell { padding-inline: 22px; }.site-header { padding-top: 15px; row-gap: 14px; column-gap: 8px; }
  .brand-logo { width: 105px; height: 35px; }
  .account { gap: 8px; }.account button { min-height: 40px; padding: 9px 12px; font-size: 11px; border-radius: 8px; }.login { background: none; border-color: transparent; }
  .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; padding-bottom: 13px; }.service { justify-content: flex-start; min-height: 42px; padding: 8px 10px; gap: 8px; border-radius: 9px; font-size: 11px; }.service .icon { width: 17px; height: 17px; }
  .hero { padding-block: 34px 25px; gap: 35px; }.eyebrow { font-size: 8px; letter-spacing: 1px; padding: 8px 11px; gap: 8px; margin-bottom: 23px; }
  h1 { font-size: clamp(30px, 8.55vw, 50px); line-height: 1.11; letter-spacing: -1.25px; }
  .intro { margin-top: 22px; font-size: 15px; line-height: 1.7; }.hero-actions { margin-top: 26px; gap: 19px; flex-wrap: wrap; }
  .primary { min-height: 54px; padding: 14px 18px; font-size: 14px; gap: 19px; border-radius: 10px; }.primary .icon { width: 20px; height: 20px; }
  .secondary { font-size: 12px; gap: 8px; }.play-icon { width: 34px; height: 34px; }
  .clients { margin-top: 27px; }.clients>p { font-size: 10px; margin-bottom: 11px; }.client-list { gap: 7px; }.client-list>span { font-size: 10px; min-height: 32px; padding: 5px 9px; }.client-list .any-client { padding-inline: 0; border-color: transparent; background: none; }
  .demo-frame { padding: 0 4px 4px; border-radius: 14px; }.window-toolbar { height: 43px; padding-inline: 6px; gap: 5px; }.window-dots { gap: 4px; }.window-dots i { width: 6px; height: 6px; }.window-title { font-size: 10px; gap: 5px; }.window-title-detail { font-size: 9px; }.open-demo { width: 27px; height: 30px; }
  .demo-viewport { --chat-height: 570px; border-radius: 10px; }.demo-orbit { inset: -15px -9px 0; }.demo-orbit::after { inset: 15px -8px; }.demo-caption { font-size: 9px; margin-top: 14px; gap: 6px; letter-spacing: 0; }
  .page-art .ribbons { width: 150%; margin-left: -25%; opacity: .55; }
  .demo-caption { display: none; }
  .demo-scroll-hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; color: #b6ccdf; font-size: 10px; }
  .demo-scroll-hint>span { font-size: 16px; color: var(--mint); }
}
@media (max-width: 380px) {
  .shell { padding-inline: 16px; }.account { gap: 4px; }.account button { padding-inline: 9px; }
  .service { gap: 7px; padding-inline: 8px; font-size: 11px; }.service .icon { width: 16px; height: 16px; }
  .eyebrow { font-size: 7px; letter-spacing: .85px; }.hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }.primary { width: 100%; }.secondary { justify-content: center; }
  .window-title-detail { display: none; }.demo-caption { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.primary { transition: none; } }