@font-face {
  font-family: "DM Sans";
  src: url("/assets/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #09070c;
  --white: #f8f6fa;
  --muted: #bcb6c5;
  --purple: #ad41f5;
  --gradient: linear-gradient(105deg, #a637f5 0%, #e21cd7 48%, #ff9b08 100%);
  font-family: "DM Sans", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--ink); color: var(--white); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #e5aaff; outline-offset: 6px; }
p, h1, h2, h3, h4 { margin: 0; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 10; padding: 16px; background: #fff; color: #111; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.site-header { position: relative; z-index: 5; background: #09070c; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 106px; gap: 32px; }
.brand { display: inline-flex; flex-shrink: 0; width: 143px; align-items: center; min-height: 48px; }
.brand img { width: 143px; }
.main-navigation { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 500; }
.main-navigation > a { padding-block: 12px; }
.main-navigation > a:hover, .text-link:hover { color: #e2b1ff; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 56px; padding: 16px 25px; font-size: 15px; line-height: 1.4; font-weight: 650; border: 1px solid transparent; border-radius: 14px; transition: transform .2s, box-shadow .2s; text-align: center; }
.button:hover { transform: translateY(-2px); }
.button-gradient { background: var(--gradient); color: #fff; box-shadow: 0 6px 26px #9a18dc12; }
.button-gradient:hover { box-shadow: 0 8px 35px #ba2de02e; }
.button-outline { border-color: #9e4bc4; background: #120c18; }
.button-small { padding: 10px 17px; min-height: 42px; font-size: 13px; border-radius: 9px; gap: 12px; }
.menu-toggle { display: none; }
.hero { position: relative; overflow: hidden; min-height: 700px; isolation: isolate; }
.hero-art { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #09070cf5 0%, #09070cbb 26%, #09070c36 51%, transparent 74%); }
.hero-inner { position: relative; min-height: 700px; padding-top: 88px; padding-bottom: 150px; }
.hero-copy { max-width: 820px; position: relative; z-index: 1; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; line-height: 1.6; }
.eyebrow::after { display: block; content: ""; margin-top: 19px; width: 38px; height: 3px; background: linear-gradient(90deg, #c353fc, #ed4eda); }
h1 { font-size: clamp(40px, 4.7vw, 68px); letter-spacing: -3px; font-weight: 650; line-height: 1.08; margin-top: 26px; }
.gradient-text { background: var(--gradient); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-description { max-width: 560px; font-size: 21px; line-height: 1.55; color: #d4cddc; margin-top: 27px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 36px; }
.text-link { font-size: 14px; padding-block: 14px; text-decoration: underline; text-underline-offset: 5px; display: inline-flex; gap: 10px; }
.hero-conversation { position: absolute; top: 240px; right: 0; width: 290px; display: flex; flex-direction: column; gap: 15px; }
.floating-message { border: 1px solid #ffffff43; border-radius: 17px; box-shadow: 0 12px 55px #0002, inset 0 1px #ffffff12; background: #34203d8c; backdrop-filter: blur(20px); font-size: 15px; line-height: 1.5; padding: 18px 20px; display: flex; align-items: center; gap: 13px; }
.customer-message { align-self: flex-end; }
.assistant-message { background: linear-gradient(120deg, #7024b3b3, #d21cd46e 70%, #fe971e91); align-self: flex-start; }
.bubble-icon { width: 21px; height: 17px; border: 1.7px solid #fff; border-radius: 5px; position: relative; flex-shrink: 0; }
.bubble-icon::after { content: ""; position: absolute; left: 3px; bottom: -5px; height: 6px; width: 5px; border-left: 1.7px solid #fff; transform: skewY(-40deg); background: #422447; }
.spark { font-size: 33px; line-height: 1; }
.section-space { padding-block: 90px; }
.about-section { color-scheme: light; background: #f7f3f0; color: #16111b; }
.about-section .eyebrow { color: #8127b7; }
h2 { font-size: clamp(32px, 3.7vw, 51px); line-height: 1.12; letter-spacing: -1.8px; font-weight: 650; }
.about-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; margin-top: 35px; }
.about-intro > p { border-left: 1px solid #bd69e8; padding-left: 42px; font-size: 20px; line-height: 1.6; color: #352e3b; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 68px; gap: 36px; }
.benefit { display: flex; align-items: flex-start; gap: 20px; }
.benefit + .benefit { border-left: 1px solid #ddc4e7; padding-left: 34px; }
.benefit h3 { font-size: 22px; font-weight: 650; line-height: 1.18; letter-spacing: -.6px; }
.benefit p { font-size: 15px; color: #514859; line-height: 1.6; margin-top: 17px; }
.benefit-icon { flex: 0 0 31px; color: #ac25ea; margin-top: 3px; }
.chat-symbol { height: 27px; border: 2px solid #ac25ea; border-radius: 8px; position: relative; }
.chat-symbol::after { content: ""; position: absolute; left: 5px; bottom: -6px; height: 7px; width: 8px; border-left: 2px solid #ac25ea; background: #f7f3f0; transform: skewY(-35deg); }
.calendar-symbol { height: 29px; border: 2px solid #ac25ea; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 6px, #ac25ea 6px 9px, transparent 9px 13px) 3px 13px / 23px 3px no-repeat; }
.calendar-symbol::before { content: ""; display: block; border-top: 2px solid #ac25ea; margin-top: 7px; }
.layers-symbol { font-size: 52px; line-height: .6; text-shadow: 0 7px #ac25ea; transform: scaleX(1.1); }
.solutions-section { background: radial-gradient(ellipse at 75% 50%, #240d341f, transparent 70%), var(--ink); }
.solutions-section .eyebrow { color: #da91f4; }
.solutions-section h2 { margin-top: 30px; max-width: 970px; }
.product-card { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 45px; padding: 52px; border: 1px solid #673388; border-radius: 28px; background: radial-gradient(ellipse at 80% 50%, #55218540, transparent 68%), #100b15; overflow: hidden; }
.product-kicker { color: #e9b9fb; font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600; }
.product-copy h3 { margin-top: 27px; margin-bottom: 28px; }
.product-copy h3 img { width: 270px; mix-blend-mode: screen; }
.product-copy h4 { font-size: 27px; font-weight: 600; letter-spacing: -.8px; line-height: 1.2; }
.product-copy > p:not(.product-kicker) { max-width: 380px; color: #c6becd; font-size: 17px; line-height: 1.6; margin-top: 19px; }
.product-tags { padding: 0; margin: 25px 0 30px; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.product-tags li { font-size: 12px; padding: 7px 12px; border: 1px solid #704886; border-radius: 20px; }
.product-visual { position: relative; align-self: center; min-width: 0; height: 430px; }
.calendar-preview { width: 265px; padding: 20px 16px; background: #f9f3ff; border: 1px solid #debeee; box-shadow: 0 0 45px #c05bff40; border-radius: 20px; color: #29143b; transform: rotate(-7deg); position: absolute; left: -8px; top: 58px; }
.preview-title { font-size: 16px; font-weight: 700; padding-bottom: 17px; border-bottom: 1px solid #decde7; }
.preview-title span { color: #992ae0; margin-right: 8px; }
.calendar-preview > p { font-size: 11px; margin: 17px 0 9px; }
.appointment { display: flex; align-items: center; gap: 9px; min-height: 49px; border-bottom: 1px solid #e6d5ed; font-size: 11px; }
.appointment time { padding: 5px 8px; color: #7d18ac; background: #ead7fc; border-radius: 8px; font-weight: 650; }
.appointment i { width: 5px; height: 5px; border-radius: 50%; background: #8833c4; margin-left: auto; }
.preview-caption { font-size: 9px; display: block; margin-top: 15px; color: #8c779a; }
.phone-preview { position: absolute; top: 0; right: 0; width: 231px; height: 405px; border: 5px solid #201529; outline: 1px solid #b871e6; border-radius: 34px; background: #f2e9f7; box-shadow: 0 0 0 3px #62318b, 8px 20px 40px #0007; transform: rotate(5deg); color: #211529; overflow: hidden; }
.phone-camera { width: 62px; height: 7px; border-radius: 0 0 10px 10px; background: #100a16; margin-inline: auto; }
.phone-header { display: flex; align-items: center; gap: 7px; color: #fff; background: #2e173e; padding: 17px 10px 12px; margin-top: -7px; }
.phone-header > span { font-size: 22px; }
.phone-header img { width: 27px; height: 27px; object-fit: contain; }
.phone-header strong { display: block; font-size: 11px; }
.phone-header div span { display: block; font-size: 8px; color: #dcc3eb; margin-top: 3px; }
.phone-header > span:last-child { margin-left: auto; }
.phone-messages { display: flex; flex-direction: column; gap: 12px; padding: 18px 10px; font-size: 10px; line-height: 1.45; }
.phone-message { border-radius: 9px; padding: 9px; max-width: 94%; box-shadow: 0 1px 2px #29113b0f; }
.phone-message small { display: block; font-size: 7px; color: #817887; text-align: right; margin-top: 4px; }
.outgoing { align-self: flex-end; background: #e0f4d5; border-top-right-radius: 2px; }
.incoming { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.phone-input { position: absolute; bottom: 8px; left: 7px; right: 7px; background: #fff; border-radius: 20px; color: #8f849a; display: flex; align-items: center; gap: 7px; padding: 7px; font-size: 9px; }
.phone-input > span:first-child { font-size: 18px; }
.phone-send { margin-left: auto; color: white; background: #a62cf0; border-radius: 50%; padding: 5px; }
.demo-caption { position: absolute; bottom: 0; right: 60px; color: #aaa0b5; font-size: 10px; }
.coming-next { display: flex; align-items: center; gap: 25px; margin: 40px auto 0; color: #bfb3c9; font-size: 16px; text-align: center; font-style: italic; }
.coming-next::before, .coming-next::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #8548a1); }
.coming-next::after { transform: rotate(180deg); }
.contact-section { padding-block: 0 65px; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 42px 44px; border-radius: 26px; background: linear-gradient(110deg, #580b95, #ba0edf 50%, #f0449e 76%, #ff9d08); }
.contact-card h2 { font-size: 29px; letter-spacing: -.9px; }
.contact-card p { font-size: 17px; color: #f8dffa; margin-top: 14px; }
.contact-email { display: flex; align-items: center; justify-content: flex-end; gap: 13px; padding: 15px 0 15px 35px; border-left: 1px solid #ffffff63; font-size: 18px; font-weight: 650; }
.contact-email > span:first-child { font-size: 27px; }
.contact-email:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-footer { padding-top: 10px; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: .85fr 1.55fr .5fr; gap: 42px; padding-bottom: 38px; }
.footer-brand img { width: 125px; }
.footer-brand p { color: #ada4b6; font-size: 11px; margin-top: 15px; max-width: 200px; line-height: 1.7; }
.company-details { font-style: normal; display: flex; flex-direction: column; gap: 6px; color: #bcb2c7; font-size: 12px; line-height: 1.6; border-inline: 1px solid #302736; padding-inline: 35px; }
.company-details strong { font-weight: 600; color: #eee7f5; }
.company-details a { margin-top: 2px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; color: #c9bfce; }
.footer-links a { display: inline-flex; align-items: center; min-height: 34px; text-decoration: underline; text-underline-offset: 4px; }
.footer-links a:hover, .company-details a:hover { color: #edb4ff; }
.footer-bottom { border-top: 1px solid #302736; padding-block: 21px 25px; color: #998ea3; text-align: center; font-size: 11px; }
.legal-header { padding-block: 28px; border-bottom: 1px solid #302736; }
.legal-header .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.legal-main { width: min(800px, calc(100% - 48px)); margin: 65px auto 85px; }
.legal-main h1 { font-size: clamp(33px, 5vw, 48px); letter-spacing: -1.4px; }
.legal-main .legal-intro { font-size: 18px; color: #c9bfce; margin-top: 25px; line-height: 1.8; }
.legal-main h2 { font-size: 23px; letter-spacing: -.6px; margin-top: 35px; }
.legal-main p, .legal-main li { color: #bfb4c9; line-height: 1.85; margin-top: 14px; font-size: 16px; }
.legal-main a { text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (min-width: 1550px) { .hero { min-height: 790px; } .hero-inner { min-height: 790px; padding-top: 120px; } }
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .main-navigation { gap: 22px; }
  .hero-conversation { right: 0; top: 350px; }
  h1 { font-size: 57px; }
  .hero-description { max-width: 520px; }
  .product-card { padding: 36px; }
  .product-visual { transform: scale(.9); transform-origin: center right; }
  .calendar-preview { left: -45px; }
  .contact-email { font-size: 16px; padding-left: 24px; }
  .contact-card { gap: 25px; padding: 35px; }
  .contact-card h2 { font-size: 26px; }
}
@media (max-width: 900px) {
  .header-inner { min-height: 88px; }
  .brand, .brand img { width: 124px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 46px; height: 46px; border: 1px solid #43324f; border-radius: 11px; background: #17101e; cursor: pointer; }
  .menu-toggle span { width: 20px; height: 1.5px; background: #faf5ff; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .main-navigation { display: none; position: absolute; left: 32px; right: 32px; top: 77px; padding: 20px; border: 1px solid #57376c; border-radius: 16px; background: #160f1dfc; box-shadow: 0 15px 30px #0004; }
  .main-navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .main-navigation > a { min-height: 44px; }
  .hero-inner, .hero { min-height: 710px; }
  .hero-inner { padding-top: 55px; }
  .hero-conversation { top: 480px; right: 6%; }
  .hero-art img { object-position: 60% 40%; }
  .hero::after { background: linear-gradient(180deg, #09070c88, #09070c22 80%, #09070c44); }
  .hero-description { max-width: 570px; }
  .about-intro { gap: 35px; }
  .about-intro > p { font-size: 17px; padding-left: 28px; }
  .benefits { gap: 22px; }
  .benefit { display: block; }
  .benefit + .benefit { padding-left: 22px; }
  .benefit-icon { display: block; width: 31px; margin-bottom: 22px; }
  .benefit h3 { font-size: 20px; }
  .benefit p { font-size: 14px; }
  .product-card { grid-template-columns: 1fr; padding: 40px; gap: 45px; }
  .product-copy { max-width: 520px; }
  .product-copy > p:not(.product-kicker) { max-width: 520px; }
  .product-visual { width: 440px; max-width: 100%; margin-inline: auto; transform: none; }
  .calendar-preview { left: 0; }
  .contact-card { flex-direction: column; align-items: flex-start; gap: 20px; }
  .contact-email { border-left: 0; padding: 15px 0 0; border-top: 1px solid #ffffff63; }
  .footer-grid { grid-template-columns: 1fr 1.6fr; gap: 30px; }
  .company-details { border-right: 0; padding-right: 0; }
  .footer-links { flex-direction: row; gap: 24px; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 40px); }
  html { scroll-padding-top: 24px; }
  .header-inner { min-height: 82px; }
  .brand, .brand img { width: 115px; }
  .main-navigation { left: 20px; right: 20px; top: 72px; }
  .hero-inner { padding-top: 42px; padding-bottom: 280px; min-height: 740px; }
  .hero { min-height: auto; }
  .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .hero .eyebrow { max-width: 260px; }
  .eyebrow::after { margin-top: 16px; }
  h1 { font-size: clamp(35px, 8.7vw, 51px); letter-spacing: -1.65px; line-height: 1.12; margin-top: 25px; }
  h1 > br { display: none; }
  .hero-description { font-size: 17px; line-height: 1.65; margin-top: 22px; }
  .hero-actions { gap: 14px; margin-top: 26px; }
  .hero-actions .button { font-size: 14px; min-height: 53px; padding: 15px 19px; gap: 15px; }
  .hero-actions .text-link { font-size: 13px; }
  .hero-art { top: 195px; }
  .hero-art img { object-position: 63% bottom; }
  .hero::after { background: linear-gradient(180deg, #09070c 0%, #09070cdb 32%, #09070c22 65%, #09070c22 90%, #09070c); }
  .hero-conversation { top: auto; bottom: 58px; right: 0; width: 265px; gap: 12px; }
  .floating-message { font-size: 13px; padding: 14px 16px; border-radius: 14px; }
  .section-space { padding-block: 57px; }
  h2 { font-size: 35px; letter-spacing: -1.3px; }
  .about-intro { grid-template-columns: 1fr; gap: 24px; margin-top: 27px; }
  .about-intro > p { padding-left: 18px; font-size: 17px; }
  .benefits { grid-template-columns: 1fr; gap: 27px; margin-top: 37px; }
  .benefit { display: flex; gap: 20px; }
  .benefit-icon { margin-top: 4px; margin-bottom: 0; }
  .benefit h3 { font-size: 21px; }
  .benefit h3 br { display: none; }
  .benefit p { font-size: 15px; margin-top: 10px; }
  .benefit + .benefit { border-left: 0; padding-left: 0; padding-top: 25px; border-top: 1px solid #ddc4e7; }
  .solutions-section h2 { font-size: 33px; margin-top: 25px; }
  .product-card { padding: 28px 23px 20px; border-radius: 22px; margin-top: 32px; gap: 32px; }
  .product-copy h3 img { width: 245px; }
  .product-copy h4 { font-size: 25px; }
  .product-copy > p:not(.product-kicker) { font-size: 16px; }
  .product-tags { gap: 7px; }
  .product-tags li { font-size: 11px; padding: 6px 10px; }
  .product-copy .button { font-size: 13px; padding-inline: 17px; gap: 12px; width: 100%; }
  .product-visual { height: 367px; width: 315px; }
  .phone-preview { width: 200px; height: 350px; right: 4px; border-radius: 28px; }
  .phone-messages { gap: 10px; padding: 12px 8px; font-size: 9px; }
  .phone-header { padding: 15px 8px 10px; }
  .phone-header strong { font-size: 10px; }
  .phone-header img { width: 24px; height: 24px; }
  .calendar-preview { top: 55px; left: -2px; width: 205px; padding: 15px 12px; }
  .calendar-preview > p { font-size: 9px; }
  .preview-title { font-size: 13px; }
  .appointment { font-size: 9px; min-height: 44px; }
  .appointment time { padding-inline: 6px; }
  .preview-caption { font-size: 8px; }
  .demo-caption { right: 36px; font-size: 9px; }
  .coming-next { font-size: 14px; line-height: 1.6; gap: 12px; margin-top: 30px; }
  .coming-next::before, .coming-next::after { min-width: 12px; }
  .contact-section { padding-bottom: 44px; }
  .contact-card { padding: 29px 23px; border-radius: 22px; }
  .contact-card h2 { font-size: 27px; line-height: 1.2; }
  .contact-card h2 br { display: none; }
  .contact-card p { font-size: 15px; line-height: 1.5; }
  .contact-email { font-size: 15px; gap: 10px; flex-wrap: wrap; }
  .contact-email > span:first-child { font-size: 21px; }
  .footer-grid { grid-template-columns: 1fr; gap: 27px; padding-bottom: 25px; }
  .footer-brand p { max-width: none; margin-top: 12px; }
  .company-details { border: 0; padding: 0; font-size: 11px; }
  .footer-links { gap: 22px; flex-wrap: wrap; font-size: 11px; }
  .legal-header .text-link { font-size: 12px; }
  .legal-header img { width: 110px; }
  .legal-main { margin-top: 40px; }
  .legal-main h2 { font-size: 22px; }
}
@media (max-width: 359px) {
  .hero-inner { padding-bottom: 275px; }
  .hero-actions { gap: 6px; }
  .hero-actions .button { width: 100%; }
  .product-card { padding-inline: 17px; }
  .product-visual { height: 337px; }
  .phone-preview { width: 180px; height: 320px; right: 1px; }
  .phone-messages { font-size: 8px; gap: 8px; }
  .phone-header { gap: 4px; }
  .phone-header strong { font-size: 9px; }
  .calendar-preview { width: 182px; left: 0; }
  .appointment { font-size: 8px; }
  .contact-email { font-size: 13px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}