.demo-sms-page{min-height:100vh;background:var(--background);padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:var(--font-mono)}.demo-sms-header{width:100%;max-width:800px;display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.demo-sms-back{font-weight:600;color:var(--foreground-muted);text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:8px}.demo-sms-back:hover{color:var(--primary)}.demo-sms-title-group{text-align:center}.demo-sms-title{font-family:var(--font-display);font-size:24px;font-weight:800;margin-bottom:4px;text-transform:uppercase}.demo-sms-badge{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);padding:4px 12px;border-radius:9999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid color-mix(in srgb,var(--primary) 20%,transparent)}.sms-demo-layout{display:flex;gap:60px;align-items:flex-start;max-width:1000px;width:100%;justify-content:center}.phone-mockup{position:relative;width:320px;height:660px;background:#1a1a1a;border-radius:48px;padding:12px;box-shadow:0 50px 100px -20px rgba(0,0,0,.3),0 30px 60px -30px rgba(0,0,0,.4),inset 0 0 2px 2px rgba(255,255,255,.1);border:4px solid var(--border);flex-shrink:0}.phone-mockup:before{left:-6px;top:100px;height:40px;border-radius:2px 0 0 2px;box-shadow:0 60px 0 #222,0 110px 0 #222}.phone-mockup:after,.phone-mockup:before{content:"";position:absolute;width:3px;background:#222}.phone-mockup:after{right:-6px;top:150px;height:60px;border-radius:0 2px 2px 0}.phone-screen{width:100%;height:100%;background:var(--background);border-radius:38px;overflow:hidden;display:flex;flex-direction:column;position:relative;border:1px solid rgba(0,0,0,.12)}.phone-notch{top:0;width:150px;height:28px;background:#1a1a1a;border-bottom-left-radius:18px;border-bottom-right-radius:18px;z-index:20}.phone-notch,.phone-notch:before{position:absolute;left:50%;transform:translateX(-50%)}.phone-notch:before{content:"";top:10px;width:40px;height:4px;background:#333;border-radius:2px}.phone-top-bar{padding:34px 20px 10px;gap:12px;background:var(--paper);border-bottom:1px solid var(--border);z-index:10}.phone-avatar,.phone-top-bar{display:flex;align-items:center}.phone-avatar{width:36px;height:36px;border-radius:50%;background:transparent;overflow:hidden;color:var(--primary-foreground,#000);justify-content:center;font-weight:800;font-size:10px;box-shadow:0 4px 12px rgba(0,0,0,.18)}.phone-avatar-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.phone-contact-info{display:flex;flex-direction:column}.phone-contact-name{font-size:14px;font-weight:700;color:var(--foreground)}.phone-contact-status{font-size:11px;color:var(--primary);font-weight:600}.phone-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--background)}.sms-bubble-wrapper{display:flex;flex-direction:column;max-width:85%;animation:bubbleAppear .3s cubic-bezier(.16,1,.3,1) forwards}@keyframes bubbleAppear{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.sms-bubble-wrapper.client{align-self:flex-end;align-items:flex-end}.sms-bubble-wrapper.bot{align-self:flex-start;align-items:flex-start}.sms-bubble{padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.4;position:relative}.client .sms-bubble{background:var(--primary);color:var(--primary-foreground,#000);border-bottom-right-radius:4px;font-weight:500}.bot .sms-bubble{background:var(--paper);color:var(--foreground);border-bottom-left-radius:4px;border:1px solid rgba(0,0,0,.12)}.sms-time{font-size:10px;color:var(--foreground-muted);margin-top:4px;font-weight:500}.typing-bubble{display:flex;gap:4px;padding:12px 16px;background:var(--paper);border:1px solid rgba(0,0,0,.12);border-radius:18px;border-bottom-left-radius:4px;width:-moz-fit-content;width:fit-content}.typing-dot{width:6px;height:6px;background:var(--foreground-muted);border-radius:50%;animation:typingPulse 1.4s ease-in-out infinite;opacity:.6}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingPulse{0%,60%,to{opacity:.35}30%{opacity:1}}.phone-input-bar{padding:12px 16px 34px;background:var(--paper);border-top:1px solid var(--border);display:flex;gap:10px;align-items:center}.phone-input{flex:1;background:var(--background);border:1px solid var(--border);border-radius:20px;padding:8px 16px;font-size:14px;outline:none;transition:border-color .2s}.phone-input:focus{border-color:var(--primary)}.phone-send-btn{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--foreground,#fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background-color .2s}.phone-send-btn:hover{filter:brightness(1.1);transform:scale(1.1)}.phone-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.sms-explainer{flex:1;max-width:400px}.explainer-card{background:var(--paper);border:1px solid rgba(0,0,0,.12);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-retro)}.explainer-card h3{font-size:20px;font-weight:800;margin-bottom:16px;color:var(--primary)}.explainer-card p{font-size:15px;line-height:1.6;color:var(--foreground-muted);margin-bottom:20px}.explainer-note{margin-bottom:20px;padding:16px 18px;border-radius:18px;border:1px solid color-mix(in srgb,var(--primary) 24%,rgba(0,0,0,.12));background:color-mix(in srgb,var(--primary) 8%,var(--paper))}.explainer-note strong{display:block;margin-bottom:8px;color:var(--foreground);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.explainer-note p{margin:0;font-size:14px}.explainer-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.explainer-list li{display:flex;gap:12px;font-size:14px;font-weight:500}.explainer-list li:before{content:"✓";color:var(--primary);font-weight:800}.explainer-summary{display:grid;gap:10px;padding-top:20px;border-top:1px solid rgba(0,0,0,.12)}.explainer-summary-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.explainer-summary-row dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--foreground-muted)}.explainer-summary-row dd{margin:0;text-align:right;font-size:13px;font-weight:700;color:var(--foreground)}@media (max-width:850px){.sms-demo-layout{flex-direction:column;align-items:center;gap:40px}.sms-explainer{max-width:320px}}@media (max-width:480px){.phone-mockup{width:280px;height:580px}.demo-sms-header{flex-direction:column;gap:20px}}@media (prefers-reduced-motion:reduce){.typing-dot{animation:none!important}}