:root {
    font-family: Inter, 'Segoe UI', Arial, sans-serif;
    color: #132e26;
    background: #f5f8f6;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { text-decoration: none; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #5de2a3; outline-offset: 3px; }
.topbar { position: relative; z-index: 3; height: 83px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 4vw, 66px); background: white; border-bottom: 1px solid #e2ebe6; }
.wordmark { display: flex; align-items: center; gap: 12px; }
.mark { width: 62px; height: 51px; border-radius: 12px; color: white; display: grid; place-items: center; background: #087547; font-size: 21px; font-weight: 1000; letter-spacing: -2px; }
.mark span { color: #9aebbe; }
.wordmark-text strong { display: block; font-size: 22px; letter-spacing: -1px; color: #07573a; }
.wordmark-text small { display: block; color: #6d7a72; font-size: 9px; letter-spacing: 1.5px; font-weight: 800; }
.back-home { padding: 11px 15px; border: 1px solid #d9e6de; border-radius: 12px; font-size: 13px; font-weight: 800; color: #1b4b38; }
.back-home:hover { background: #e8f7ef; }
.layout { min-height: calc(100vh - 83px); display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 57%); }
.story { overflow: hidden; background: radial-gradient(circle at 50% 61%, #147b54 0, transparent 45%), linear-gradient(158deg, #053a2e 0%, #082b24 57%, #061b1a 100%); color: #fff; }
.story-content { max-width: 620px; padding: clamp(36px, 5vw, 76px) clamp(27px, 4.8vw, 80px) 22px; margin: auto; }
.tag { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: 2px; color: #b7efd1; font-weight: 850; }
.status-pip { display: inline-block; width: 8px; height: 8px; background: #3aef94; border-radius: 50%; box-shadow: 0 0 0 5px rgba(55,236,143,.12); flex: none; }
h1 { font-size: clamp(36px, 3.9vw, 65px); line-height: 1.055; letter-spacing: -2.5px; margin: 25px 0 17px; font-weight: 850; }
h1 em { font-style: normal; color: #70eeb1; }
.intro { max-width: 470px; font-size: 16px; color: #c2dbd0; line-height: 1.7; }
.robot-stage { position:relative; width:min(100%,390px); height:385px; margin:16px auto 0; isolation:isolate; display:grid; place-items:center; }
.robot-backdrop { position:absolute; z-index:-1; width:98%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#30b57b85 0%,#07412f 58%,transparent 74%); border:1px solid #d0ffdf26; }
.robot-portrait { display:block; width: min(100%,320px); height:365px; object-fit:cover; object-position:center 24%; border-radius:35px; border:1px solid #a5f9cc40; box-shadow:0 25px 70px #001b1480; background:#daf7e8; }
.robot-fallback { position:absolute; inset:18px 30px; display:grid; align-content:center; justify-items:center; gap:4px; border-radius:35px; border:1px solid #89e9ba55; background:linear-gradient(155deg,#eafff1,#84d7ab); color:#06633e; box-shadow:0 25px 70px #001b1480; font-size:62px; letter-spacing:-4px; font-weight:1000; }
.robot-fallback small { display:block; font-size:20px; letter-spacing:-1px; }
.robot-portrait { position:relative; z-index:1; }
.assistant-brand-avatar { display:grid; place-items:center; position:relative; width:76px; height:76px; flex:none; background:#e0f7e9; border:1px solid #c4e6d2; border-radius:18px; overflow:hidden; color:#087546; font-weight:1000; font-size:22px; }
.assistant-brand-avatar img { position:absolute; inset:0; }
@media(max-width:490px) { .assistant-brand-avatar { width:66px; height:66px; border-radius:13px; font-size:19px; } .robot-fallback { inset:5px 20px; border-radius:18px; font-size:36px; letter-spacing:-2px; } .robot-fallback small { font-size:12px; } }

.robot-spark { position:absolute; z-index:1; color:#90fac2; font-weight:900; text-shadow:0 0 20px #16b36a; }
.spark-one { left:4%; top:25%; font-size:41px; }
.spark-two { right:3%; bottom:17%; font-size:49px; }
.story-foot { display: flex; gap: 10px; justify-content: space-between; padding: 20px 0 5px; border-top: 1px solid #ffffff2b; color: #b4dac8; font-size: 10px; letter-spacing: .4px; font-weight: 800; }
.work { min-width: 0; display: flex; flex-direction: column; background: #f6f9f7; }
.work-inner { width: min(750px, calc(100% - 62px)); margin: 0 auto; padding: 48px 0 40px; flex: 1; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 29px; }
.online { color: #1c563e; font-size: 11px; letter-spacing: 1.4px; font-weight: 900; }
.online .status-pip { margin-right: 8px; }
.online small { display: block; font-size: 12px; letter-spacing: 0; color: #75897e; font-weight: 500; margin: 4px 0 0 19px; }
.private-tag { font-size: 11px; color: #4a8164; padding: 9px 12px; border: 1px solid #d3e9db; border-radius: 100px; white-space: nowrap; }
.intro-card { display: flex; gap: 17px; align-items: start; border: 1px solid #dce9e1; background: #fff; padding: 23px; border-radius: 22px; box-shadow: 0 8px 25px #143c2310; }
.assistant-robot-avatar { flex: none; width: 76px; height: 76px; display: block; object-fit: cover; object-position: center 23%; border-radius: 18px; background: #def8e9; border: 1px solid #c9e8d5; box-shadow: 0 4px 13px #16472f20; }
.intro-card h2 { margin: 2px 0 6px; font-size: 21px; letter-spacing: -.7px; }.intro-card p { margin: 0; line-height: 1.6; color: #64766b; font-size: 14px; }
.progress-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: #638272; margin: 28px 0 9px; }
.progress { height: 6px; width: 100%; background: #e2ece6; border-radius: 20px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#0c8950,#62e89b); border-radius: inherit; transition: width .25s ease; }
.conversation { margin: 28px 0 16px; display: grid; gap: 13px; }
.message-row { display: flex; gap: 10px; align-items: end; }
.message-row.mine { justify-content: flex-end; }
.message-avatar { width: 36px; height: 36px; border-radius: 10px; background: #dbf5e5; display: grid; place-items: center; flex: none; overflow: hidden; } .message-avatar img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 23%; }
.bubble { max-width: min(88%, 470px); padding: 13px 17px; border-radius: 18px 18px 18px 4px; background: #fff; border: 1px solid #e2ebe6; color: #263e31; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mine .bubble { border: 0; background: #087947; color: white; border-radius: 18px 18px 4px 18px; }
.question-area { background: #fff; border: 1px solid #e0ebe3; border-radius: 24px; padding: 25px; box-shadow: 0 12px 32px #17472a10; }
.question-area h3 { margin: 0 0 7px; font-size: clamp(21px,2vw,27px); letter-spacing: -.75px; line-height: 1.2; }
.hint { color: #6b7e73; font-size: 13px; margin: 0 0 21px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option { text-align: left; padding: 13px; background: #f7faf8; color: #164631; border: 1px solid #dce9e1; border-radius: 13px; font-weight: 750; font-size: 13px; line-height: 1.4; min-height: 60px; }
.option:hover,.option:focus-visible { background: #e9f8ee; border-color: #0e9b61; }
.input-label { display: block; font-weight: 800; font-size: 13px; margin: 18px 0 8px; }
.field { width: 100%; min-height: 54px; outline: none; border: 1px solid #cddfd4; padding: 13px 15px; border-radius: 12px; background: #f9fbf9; font-size: 16px; color: #163929; }
.field:focus { border-color: #099655; box-shadow: 0 0 0 3px #12c46c22; }
textarea.field { min-height: 105px; resize: vertical; }
.continue { width: 100%; background: #087b48; color: #fff; min-height: 53px; font-weight: 850; border: 0; border-radius: 13px; margin-top: 15px; }
.continue:hover { background: #065e38; }
.continue:disabled { opacity: .55; cursor: not-allowed; }
.subtle { background: #eaf4ed; color: #13603e; border: 0; border-radius: 12px; padding: 12px 15px; font-size: 13px; font-weight: 800; }
.question-actions { display: flex; justify-content: space-between; gap: 12px; margin: 15px 0; }
.reset { background: none; border: 0; color: #6e8276; font-size: 12px; font-weight: 700; padding: 12px 0; }
.form-error { background: #fff1ec; color: #a03322; border: 1px solid #ffd3c6; padding: 11px 14px; border-radius: 12px; margin: 12px 0; font-size: 13px; }
.privacy { color: #798c80; font-size: 11px; line-height: 1.6; margin: 15px 0 0; }
.contact-strip { border-top: 1px solid #deebe1; padding: 19px max(31px, calc((100% - 750px) / 2)); display: flex; gap: 15px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.contact-strip small { display: block; font-size: 10px; letter-spacing: 1.3px; font-weight: 850; color: #72877b; }.contact-strip strong { font-size: 13px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; }.contact-links a { background: #fff; border: 1px solid #d5e6da; border-radius: 9px; padding: 9px 12px; font-size: 12px; font-weight: 800; color: #136041; }
.summary-grid { display: grid; gap: 10px; margin: 15px 0; }
.summary-line { display: flex; justify-content: space-between; align-items: start; gap: 15px; border-bottom: 1px solid #e7efe9; padding: 8px 0; }
.summary-line div { min-width: 0; flex: 1; }.summary-line small { color: #84988b; display: block; font-size: 11px; }.summary-line strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.edit-btn { background: #e6f6ed; border: 0; padding: 6px 9px; color: #087b48; border-radius: 8px; font-size: 11px; font-weight: 800; flex: none; }
.send-actions { display: grid; gap: 10px; margin-top: 20px; }
.action-link { padding: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 13px; font-size: 15px; font-weight: 850; border: 1px solid #bfdccc; }
.whatsapp { background: #087b48; color: white; border-color: #087b48; }.email-link { background: white; color: #087b48; }.copy-btn { background: #e7f4eb; color: #1b6442; border: 0; }
.fine-print { font-size: 12px; color: #718478; line-height: 1.5; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media(max-width:1080px) { .layout { grid-template-columns: minmax(0,38%) minmax(0,62%); } .story-content { padding-left: 26px; padding-right: 26px; } .story-foot { flex-direction: column; } .robot-stage { transform: scale(.89); transform-origin: top center; height: 322px; } }
@media(max-width:780px) { .layout { display: block; } .story-content { padding: 28px 25px 17px; }.story h1 { max-width: 600px; font-size: clamp(34px,7vw,46px); margin: 15px 0 10px; }.intro { margin: 0; max-width: 600px; font-size: 14px; }.robot-stage { height: 165px; width: 205px; margin: 10px auto 0; transform: none; } .robot-portrait { width:150px; height:160px; border-radius:19px; } .robot-backdrop { width:175px; } .robot-spark { font-size:25px; }.story-foot { display: none; }.work-inner { width: min(650px, calc(100% - 36px)); padding: 26px 0; } .contact-strip { padding: 20px; } .topline { margin-bottom: 17px; } }
@media(max-width:490px) { .topbar { height: 66px; padding: 0 15px; } .mark { width: 42px; height: 42px; font-size: 16px; border-radius: 9px; }.wordmark { gap: 7px; }.wordmark-text strong { font-size: 16px; }.wordmark-text small { display: none; }.back-home { padding: 8px; font-size: 11px; }.story-content { padding: 24px 20px 8px; }.tag { font-size: 10px; }.story h1 { font-size: 34px; letter-spacing: -1.3px; }.robot-stage { height: 145px; width:185px; transform: none; } .robot-portrait { width:130px; height:140px; border-radius:18px; } .robot-backdrop { width:160px; }.topline .private-tag { display: none; }.intro-card { padding: 17px; gap: 11px; }.intro-card h2 { font-size: 18px; }.intro-card p { font-size: 12px; }.assistant-robot-avatar { width: 66px; height: 66px; border-radius: 13px; }.question-area { padding: 19px; }.options { grid-template-columns: 1fr; }.option { min-height: 50px; }.contact-strip { display: block; }.contact-links { margin-top: 13px; } }
@media(prefers-reduced-motion:reduce) { .robot { animation: none; } .progress span { transition: none; } }