@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Geist:wght@500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#171829;--muted:#53556c;--purple:#4e37bd;--line:#e5e1f0;--paper:#fcfbff;font:16px "DM Sans",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
:focus-visible{outline:3px solid #7759e6;outline-offset:4px}
[hidden]{display:none!important}
.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.site-header,.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px}
.site-header nav{display:flex;gap:30px;color:var(--muted);font-weight:600}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 23px Geist,sans-serif;letter-spacing:-.06em;width:max-content}
.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--purple);color:white;font:23px sans-serif}
.mark.small{width:28px;height:28px;font-size:16px;border-radius:8px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:13px;min-height:46px;padding:10px 18px;border:1px solid transparent;border-radius:11px;font-weight:700;cursor:pointer}
.button:disabled{opacity:.65;cursor:wait}
.outline{border-color:var(--line);background:white}
.primary{background:var(--purple);color:white}
.primary:hover{background:#3d279c}
.text-link,.back,.switch a{color:var(--purple);font-weight:700}
.hero{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:45px;min-height:550px;padding-block:55px 75px}
.eyebrow{color:var(--purple);font-size:.72rem;letter-spacing:.14em;font-weight:800}
.eyebrow span,.chat-status span{display:inline-block;width:8px;height:8px;background:#7356e7;border-radius:50%;margin-right:6px}
h1,h2,h3{font-family:Geist,sans-serif;margin:0;letter-spacing:-.045em}
.hero h1{font-size:clamp(3rem,6.4vw,5.5rem);line-height:1.01;font-weight:800;margin-block:18px}
.hero h1 em{color:var(--purple);font-style:normal;display:block}
.lede{font-size:1.12rem;line-height:1.65;color:var(--muted);max-width:40ch}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:28px}
.showcase{padding:36px 24px;border-radius:27px;background:radial-gradient(circle at 85% 12%,#e8d5ff,transparent 46%),linear-gradient(145deg,#ddd9ff,#f5eefa);border:1px solid #e0d8f6}
.mock{border:1px solid #e6e1f1;border-radius:16px;background:white;overflow:hidden;box-shadow:0 20px 48px #352b6726}
.mock-top,.chat-name{display:flex;align-items:center;gap:9px;border-bottom:1px solid #eeeaf4;padding:13px 15px}
.sample,.chat-name span{margin-left:auto;color:var(--muted);font-size:.73rem}
.mock-body{display:grid;grid-template-columns:33% 1fr}
.mock-list{background:#faf8fe;border-right:1px solid #eeeaf4;padding:14px 8px;font-size:.78rem}
.mock-list>strong{display:block;margin:0 5px 10px}
.mock-list div{padding:9px 6px;margin-bottom:4px;border-radius:7px;font-weight:700}
.mock-list small{display:block;color:var(--muted);font-weight:400}
.selected,.reply{background:#eee8ff!important;color:#352179}
.chat{padding-bottom:17px;font-size:.82rem}
.bubble{margin:14px 12px 0;padding:10px 11px;border-radius:10px;background:#f2f1f6;width:fit-content;max-width:88%;line-height:1.46}
.reply{margin-left:auto}
.chat-status{margin:10px 12px 0;color:var(--purple);font-size:.7rem;text-align:right}
.features{padding-block:45px 55px;border-top:1px solid var(--line)}
.features h2,.workflow h2{font-size:clamp(1.9rem,4vw,3rem)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}
.feature-grid article{padding:22px;background:white;border:1px solid var(--line);border-radius:16px}
.feature-grid article>span{display:block;color:var(--purple);font-size:1.5rem;margin-bottom:13px}
.feature-grid p,.workflow ol{color:var(--muted);line-height:1.65;margin-bottom:0}
.workflow{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#eee9ff;border-radius:24px;padding:32px}
.workflow ol{padding-left:23px}
.footer{margin-top:30px;border-top:1px solid var(--line)}
.login-layout{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr}
.login-main{display:flex;flex-direction:column;padding:32px clamp(24px,5vw,72px)}
.login-card{width:min(100%,420px);margin:auto;padding-block:36px}
.login-card h1{font-size:clamp(2.3rem,5vw,3.3rem);margin-top:15px}
.login-card p{color:var(--muted);line-height:1.5}
.login-card label{display:block;font-weight:700;margin:14px 0 6px}
.login-card input,.login-card select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cec9df;border-radius:9px;color:var(--ink);background:white}
.login-card fieldset{margin:0;border:0;padding:0}
.password-wrap{position:relative}
.password-wrap input{padding-right:83px}
.password-wrap button{position:absolute;right:7px;top:5px;height:36px;border:0;background:white;color:var(--purple);font-weight:700;border-radius:5px;cursor:pointer}
.login-card .primary{width:100%;margin-top:19px}
.login-card .form-error{color:#a01b30}
.switch{text-align:center}
.login-aside{display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:radial-gradient(circle at 38% 33%,#7155db,#382481 72%);border-radius:25px;margin:16px 16px 16px 0;padding:clamp(23px,5vw,65px);color:white}
.login-aside h2{font-size:clamp(2rem,5vw,4rem);line-height:1.06}
.login-aside p{max-width:350px;color:#ece5ff;line-height:1.6}
.orbit{align-self:center;margin:auto;width:min(26vw,320px);aspect-ratio:1;display:grid;place-items:center;border:1px solid #ffffff60;border-radius:50%;box-shadow:0 0 0 24px #ffffff14,0 0 0 52px #ffffff0d}
.orbit span{font-size:clamp(90px,16vw,220px);line-height:1;color:#d9cfff}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:30px;padding-block:28px 45px}.feature-grid{grid-template-columns:1fr}.login-layout{grid-template-columns:1fr}.login-aside{display:none}}
@media(max-width:520px){.wrap{width:calc(100% - 32px)}.site-header nav{display:none}.showcase{padding:15px 9px}.workflow{align-items:flex-start;flex-direction:column;padding:23px}.login-main{padding:22px}.site-header{gap:12px}.site-header .button{padding-inline:12px}}