:root {
    color-scheme: light;
    --ink: #19162e;
    --muted: #686477;
    --pink: #f51b8a;
    --violet: #560fc1;
    --cyan: #45bfdf;
    --paper: #faf9fd;
    --line: #e8e4ef;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--violet); outline-offset: 6px; }
::selection { background: #ead8ff; color: #34116a; }
.skip-link { position: fixed; z-index: 10; top: 16px; left: 20px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: white; border-radius: 8px; }
.skip-link:focus { width: auto; height: auto; padding: 12px 20px; clip-path: none; border: 2px solid var(--violet); }
.ambient { position: absolute; z-index: -1; inset: 0 0 auto; height: 900px; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 84% 38%, #e8e0ff70, transparent 43%), radial-gradient(ellipse at 13% 80%, #ffe5f230, transparent 38%); }
.page-shell { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; min-height: 112px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; gap: 18px; align-items: center; }
.wordmark-name { font-size: 47px; font-weight: 800; letter-spacing: -5px; line-height: 1; }
.brand-dot { color: var(--pink); }
.wordmark-divider { height: 30px; width: 1px; background: #d9d3e4; margin-left: 3px; }
.wordmark-label { font-size: 11px; line-height: 1.45; letter-spacing: 2px; font-weight: 650; }
nav { display: flex; align-items: center; gap: 36px; font-size: 13px; font-weight: 600; }
.nav-link { color: var(--muted); transition: color .2s; }
.nav-link:hover { color: var(--violet); }
.nav-cta { display: inline-flex; gap: 22px; align-items: center; border: 1px solid #d8d1e4; padding: 13px 20px; border-radius: 100px; transition: border-color .2s, background .2s; }
.nav-cta:hover { background: white; border-color: var(--violet); }
.nav-cta span { font-size: 19px; color: var(--violet); }
.hero { min-height: 710px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; padding-block: 72px 85px; }
.hero-copy { position: relative; z-index: 2; animation: rise-in .8s ease-out both; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; line-height: 1.6; font-weight: 700; letter-spacing: 2px; color: var(--muted); margin: 0 0 24px; }
.status-dot { width: 7px; height: 7px; flex: 0 0 7px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 5px #f51b8a10; animation: pulse 3s ease-in-out infinite; }
h1 { margin: 0; font-size: clamp(46px, 5.6vw, 78px); line-height: 1.05; letter-spacing: -4px; font-weight: 700; max-width: 650px; }
.gradient-text { background: linear-gradient(100deg, var(--pink), var(--violet) 58%, #368bc9); color: var(--violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.title-dot { color: var(--pink); }
.hero-description { max-width: 420px; font-size: 16px; line-height: 1.8; color: var(--muted); margin: 25px 0 29px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; padding: 17px 23px; border-radius: 9px; font-size: 13px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.button-primary { color: white; background: var(--violet); box-shadow: 0 6px 18px #560fc11c; }
.button-primary:hover { transform: translateY(-3px); box-shadow: 0 9px 24px #560fc132; }
.button span { font-size: 19px; line-height: 1; }
.button-text { display: inline-flex; gap: 14px; font-size: 12px; font-weight: 600; }
.button-text:hover { color: var(--violet); }
.availability { display: flex; align-items: center; gap: 9px; margin-top: 30px; font-size: 11px; color: var(--muted); }
.availability-icon { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #d6cbe6; border-radius: 50%; font-size: 10px; color: var(--violet); }
.brand-stage { position: relative; display: grid; place-items: center; min-width: 0; height: 490px; isolation: isolate; animation: rise-in 1s .12s ease-out both; }
.brand-stage::before { content: ''; position: absolute; z-index: -2; width: 94%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #fff9 38%, #ede5ff50 63%, transparent 72%); }
.brand-art { position: relative; z-index: 1; width: 100%; animation: float 7s ease-in-out infinite; }
.brand-image { display: block; width: 100%; height: auto; }
.orbit { position: absolute; z-index: -1; width: 91%; aspect-ratio: 1; border: 1px solid #cbbce44f; border-radius: 50%; animation: orbit 40s linear infinite; }
.orbit-two { width: 108%; border-style: dashed; border-color: #d6cbe34d; animation-duration: 65s; animation-direction: reverse; }
.orbit span { position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 5px #f51b8a0a; }
.orbit-two span { background: var(--cyan); width: 6px; height: 6px; }
.spark { position: absolute; color: var(--pink); font-weight: 300; font-size: 25px; animation: float 5s ease-in-out infinite; }
.spark-one { top: 9%; left: 15%; }
.spark-two { right: 4%; bottom: 21%; color: var(--violet); animation-delay: -2s; }
.spark-three { bottom: 9%; left: 13%; color: var(--cyan); font-size: 18px; animation-delay: -4s; }
.integration-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; border: 1px solid #e6dfef; padding: 11px 16px; background: #ffffffed; box-shadow: 0 8px 22px #37245308; border-radius: 100px; font-size: 11px; font-weight: 600; animation: float 6s ease-in-out infinite; }
.tag-meta { top: 9%; right: 9%; animation-delay: -2s; }
.tag-zendesk { left: 0; top: 13%; animation-delay: -4s; }
.tag-api { right: 7%; bottom: 0; animation-delay: -1s; }
.tag-dot { height: 6px; width: 6px; border-radius: 50%; }
.pink { background: var(--pink); }
.violet { background: var(--violet); }
.cyan { background: var(--cyan); }
.stage-caption { position: absolute; bottom: -35px; text-align: center; font-size: 8px; letter-spacing: 1.8px; color: #82798d; }
.explore-section { border-top: 1px solid var(--line); padding-block: 64px 72px; scroll-margin-top: 30px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; align-items: end; }
.section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 17px; font-size: 9px; }
h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -1.5px; line-height: 1.15; font-weight: 650; margin: 0; }
.section-intro > p:last-child { max-width: 380px; justify-self: end; color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; gap: 34px; }
.principle { border-top: 1px solid var(--line); padding-top: 19px; }
.principle-number { display: flex; align-items: center; justify-content: space-between; color: #8c829c; font-size: 10px; letter-spacing: 1px; }
.principle-number span { font-size: 18px; }
h3 { font-size: 25px; letter-spacing: -.8px; margin: 23px 0 11px; font-weight: 600; }
.principle p { color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 290px; margin: 0; }
.pink-text { color: var(--pink); }
.violet-text { color: var(--violet); }
.cyan-text { color: #2588ac; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.site-footer p { margin: 0; }
.site-footer strong { color: var(--ink); font-size: 12px; }
.footer-plus { color: var(--pink); margin-inline: 12px; }
.footer-right { display: flex; align-items: center; gap: 26px; }
.motion-toggle { border: 0; padding: 7px 0; background: none; color: var(--muted); cursor: pointer; font-size: 10px; }
.motion-toggle:hover { color: var(--violet); }
.motion-icon { font-size: 12px; display: inline-block; min-width: 16px; }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation-play-state: paused !important; }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px #f51b8a05; } }
@media (min-width: 1500px) { .hero { min-height: 760px; } }
@media (max-width: 1050px) {
    .page-shell { width: calc(100% - 64px); }
    .hero { min-height: 650px; gap: 22px; }
    h1 { font-size: 60px; letter-spacing: -3px; }
    .brand-stage { height: 420px; }
    .hero-actions { gap: 20px; }
    .tag-zendesk { left: -5%; }
}
@media (max-width: 760px) {
    .page-shell { width: calc(100% - 40px); }
    .site-header { min-height: 89px; }
    .wordmark-name { font-size: 39px; }
    .wordmark { gap: 13px; }
    .wordmark-label { font-size: 9px; }
    nav { gap: 16px; }
    .nav-link { display: none; }
    .nav-cta { font-size: 11px; gap: 14px; padding: 10px 14px; }
    .hero { grid-template-columns: 1fr; padding-block: 56px 42px; gap: 30px; }
    h1 { font-size: clamp(43px, 9.5vw, 70px); max-width: 620px; letter-spacing: -2.5px; }
    .hero-description { font-size: 15px; max-width: 470px; }
    .hero-copy .eyebrow { font-size: 9px; }
    .brand-stage { width: min(100%, 500px); height: 390px; justify-self: center; }
    .orbit-two { width: 93%; }
    .orbit-one { width: 76%; }
    .brand-image { width: 90%; margin-inline: auto; }
    .tag-meta { top: 8%; right: 9%; }
    .tag-zendesk { left: 0; }
    .tag-api { right: 6%; bottom: 9%; }
    .stage-caption { bottom: -6px; font-size: 7px; letter-spacing: 1px; }
    .section-intro { grid-template-columns: 1fr; gap: 20px; }
    .section-intro .eyebrow { margin-bottom: 0; }
    .section-intro > p:last-child { justify-self: start; }
    .explore-section { padding-block: 44px; }
    .principles { grid-template-columns: 1fr; gap: 26px; margin-top: 32px; }
    h3 { margin-top: 12px; }
    .principle p { max-width: 440px; }
    .site-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
    .footer-right { justify-content: space-between; width: 100%; }
}
@media (max-width: 380px) {
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .brand-stage { height: 330px; }
    .integration-tag { font-size: 10px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .motion-toggle { display: none; }
}