@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');
:root{--bg:#fff7fb;--ink:#30172a;--muted:#765a6d;--pink:#e84e9b;--pink2:#ff7eb8;--line:rgba(232,78,155,.16);--card:rgba(255,255,255,.72);--shadow:0 24px 70px rgba(164,53,108,.16);--zalo:#0b94f6;--zalo2:#06b4ee}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
body{background:radial-gradient(circle at 8% 0%,rgba(255,126,184,.30),transparent 28%),radial-gradient(circle at 92% 8%,rgba(143,109,247,.18),transparent 28%),linear-gradient(180deg,#fff7fb 0%,#fff 48%,#fff7fb 100%);overflow-x:hidden}
.nav{position:sticky;top:14px;z-index:50;width:min(1180px,calc(100vw - 28px));margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.78);border:1px solid rgba(232,78,155,.12);backdrop-filter:blur(16px);box-shadow:0 12px 40px rgba(164,53,108,.10)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:900}.brand img{height:38px;background:#fff;border-radius:12px;padding:5px;box-shadow:0 6px 18px rgba(232,78,155,.10)}
.nav nav{display:flex;gap:18px}.nav nav a{color:var(--muted);text-decoration:none;font-weight:800;font-size:14px}.nav-btn{padding:11px 15px;border-radius:999px;text-decoration:none;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(232,78,155,.24);white-space:nowrap}
main{width:min(1180px,calc(100vw - 28px));margin:18px auto 0}.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:stretch}
.hero-copy,.demo-card,.section,.lead,footer{border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.hero-copy{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;justify-content:center;min-height:650px}.eyebrow{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--pink);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900}.eyebrow i{width:8px;height:8px;border-radius:50%;background:#2ad69d;box-shadow:0 0 0 5px rgba(42,214,157,.12)}
.hero h1{margin:20px 0 0;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.07em;color:#2c1225}.hero p{margin:20px 0 0;color:var(--muted);font-size:18px;line-height:1.65}.hero p b{color:#2c1225}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{min-height:52px;border-radius:16px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;text-decoration:none;border:0;cursor:pointer;font-family:inherit}.btn.primary{background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;box-shadow:0 14px 30px rgba(232,78,155,.25)}.btn.ghost{background:#fff;color:var(--pink);border:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.stats div{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}.stats b{display:block;color:var(--pink);font-size:28px}.stats span{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.35}
.demo-card{padding:18px;min-width:0;position:relative}.demo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.demo-head small{display:block;text-transform:uppercase;letter-spacing:.12em;color:var(--pink);font-size:11px;font-weight:900}.demo-head strong{display:block;font-size:22px;margin-top:3px}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tabs button{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:9px 11px;font-weight:900;cursor:pointer}.tabs button.active{background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff}
.demo-body{display:grid;grid-template-columns:minmax(300px,420px) minmax(220px,1fr);gap:16px;align-items:stretch}.phone{width:100%;height:650px;align-self:center;justify-self:center;border-radius:30px;background:#fff;color:#111;overflow:hidden;box-shadow:0 28px 70px rgba(164,53,108,.20),0 0 0 8px rgba(255,255,255,.55);display:flex;flex-direction:column;border:1px solid rgba(232,78,155,.12)}
.phone-status{height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;font-size:11px;font-weight:900}.phone-status b{font-size:14px}.chat-head{height:60px;flex:0 0 60px;background:linear-gradient(90deg,#1599f5,#0fb9ef);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.phone.messenger .chat-head{background:#fff;color:#111;border-bottom:1px solid #edf0f5}.phone.widget .chat-head{height:66px;flex-basis:66px;background:linear-gradient(90deg,#10b7ef,#08aee6)}
.chat-left{display:flex;align-items:center;gap:8px;min-width:0}.back{font-size:30px;line-height:1;font-weight:300}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;font-weight:900;flex:0 0 auto}.phone.widget .avatar{width:40px;height:40px;background:#e7f9ff;font-size:22px}.chat-left b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.chat-left small{display:block;font-size:10px;opacity:.85}.chat-actions{font-size:15px;white-space:nowrap}.phone.messenger .chat-actions,.phone.messenger .back{color:#0866ff}
.chat-area{flex:1 1 auto;min-height:0;overflow:hidden;padding:9px;display:flex;flex-direction:column;gap:7px;background:#edf2fb}.phone.messenger .chat-area{background:#fff}.phone.widget .chat-area{background:#eef2f8}.date{align-self:center;color:#7d8795;font-size:9px;font-weight:900;margin:1px 0 2px}.msg-row{display:flex;opacity:0;transform:translateY(8px) scale(.98);animation:in .25s ease forwards}.msg-row.user{justify-content:flex-end}.msg-row.ai{justify-content:flex-start}@keyframes in{to{opacity:1;transform:translateY(0) scale(1)}}.msg{max-width:86%;padding:7px 9px;border-radius:13px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);line-height:1.32}.msg-row.user .msg{background:#dcefff;border-bottom-right-radius:5px}.phone.messenger .msg-row.user .msg{background:#0866ff;color:#fff}.phone.widget .msg-row.user .msg{background:#d9efff}.msg-row.ai .msg{border-bottom-left-radius:5px}.phone.messenger .msg-row.ai .msg{background:#f0f0f4}.msg em{display:block;color:#e14b86;font-weight:900;font-size:9px;font-style:normal;margin-bottom:2px}.phone.messenger .msg em,.phone.widget .msg em{display:none}.msg-text{font-size:11.2px;white-space:pre-line;overflow-wrap:anywhere}.msg small{display:block;margin-top:3px;color:#7f8998;font-size:8.5px}.phone.messenger .msg-row.user small{color:rgba(255,255,255,.72)}
.dots{display:flex;gap:5px;padding:2px 0}.dots i{width:6px;height:6px;border-radius:50%;background:#8792a4;animation:dot 1s infinite ease-in-out}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.38}40%{transform:translateY(-3px);opacity:1}}
.booking{padding:7px;border-radius:11px;background:linear-gradient(180deg,#fff8fb,#fff);border:1px solid #ffd8e9;margin-top:2px}.booking b{display:block;margin-bottom:4px;color:#30172a;font-size:11px}.booking div{display:flex;justify-content:space-between;gap:7px;border-top:1px solid #f4e4ec;padding-top:4px;margin-top:4px;font-size:9.5px;color:#6d5565}.booking strong{color:#111;text-align:right}
.composer{min-height:48px;flex:0 0 48px;display:flex;align-items:center;gap:7px;padding:6px 9px;background:#fff;border-top:1px solid #e9edf5;color:#7f8ca0}.phone.widget .composer{min-height:54px;flex-basis:54px}.composer>span{font-size:13px;white-space:nowrap}.input{height:32px;flex:1;display:flex;align-items:center;padding:0 10px;border-radius:17px;background:#f4f6fa;font-size:11px;overflow:hidden}.phone.zalo .input{background:#fff}.phone.messenger .input{background:#f0f2f5}.phone.widget .input{border-radius:4px;background:#fff;height:38px}.input i{display:none;width:2px;height:15px;background:var(--pink);margin-left:2px;animation:blink 1s steps(1) infinite}.input.typing i{display:inline-block}@keyframes blink{50%{opacity:0}}#typedText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.send-active{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pink);color:#fff;font-size:12px}
.side{display:grid;gap:14px;align-content:center}.crm,.mini-flow{padding:16px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(164,53,108,.10)}.label-row{display:flex;justify-content:space-between;gap:10px}.label-row span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--pink);font-weight:900}.label-row b{font-size:11px;padding:7px 9px;border-radius:999px;background:#fff2f8;color:var(--pink)}.label-row b.synced{background:#eafbf4;color:#0da976}.profile{display:flex;align-items:center;gap:12px;margin:16px 0}.profile>div{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;font-weight:900}.profile.premium>div{width:54px;height:54px;border-radius:17px;font-size:24px}.profile b{display:block;font-size:22px}.profile small{color:var(--muted)}.crm dl{display:grid;gap:8px;margin:0}.crm dl div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #f2dce8;padding-top:8px}.crm dt{color:var(--muted)}.crm dd{margin:0;font-weight:900;text-align:right;color:var(--ink)}
.mini-flow{display:grid;gap:8px}.flow-step{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#fff8fb;border:1px solid #f4ddea;opacity:.6}.flow-step i{width:11px;height:11px;border-radius:50%;background:#d6a6bf}.flow-step span{font-weight:900;color:var(--ink)}.flow-step.active{opacity:1;border-color:#ffb9d8;background:#fff0f7}.flow-step.active i{background:var(--pink);box-shadow:0 0 0 4px rgba(232,78,155,.13)}.flow-step.done{opacity:1;background:#f0fff8;border-color:#b8f1d8}.flow-step.done i{background:#18d79d}
.section,.lead{margin-top:22px;padding:clamp(22px,3vw,34px)}.section-title{max-width:820px}.section-title.center{text-align:center;margin:0 auto}.section-title span,.pricing-box span,.lead span{color:var(--pink);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.section-title h2,.lead h2{margin:10px 0 0;font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-.045em}.section-desc{margin:12px auto 0;color:var(--muted);max-width:760px;line-height:1.6}
.cards{display:grid;gap:16px;margin-top:24px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.features{grid-template-columns:repeat(4,1fr)}.cards article,.workflow-line div{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(164,53,108,.08)}.cards b{color:var(--pink)}.cards h3{font-size:21px;margin:10px 0 8px}.cards p{color:var(--muted);line-height:1.55;margin:0}.cards i{width:46px;height:46px;border-radius:16px;background:#fff0f7;display:grid;place-items:center;font-size:24px;font-style:normal}.workflow-line{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px}.workflow-line b{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;margin-bottom:10px}.workflow-line strong{display:block;font-size:19px}.workflow-line span{display:block;color:var(--muted);margin-top:5px;line-height:1.4}

/* Premium 5-industry Zalo section */
.industry-premium{position:relative;overflow:hidden}
.industry-premium:before{content:"";position:absolute;inset:auto -120px -160px auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,126,184,.26),transparent 65%);pointer-events:none}
.industry-nav{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px}
.industry-nav button{text-align:left;border:1px solid var(--line);background:#fff;border-radius:18px;padding:14px 15px;cursor:pointer;box-shadow:0 10px 28px rgba(164,53,108,.08);transition:.2s ease}
.industry-nav button:hover{transform:translateY(-2px)}
.industry-nav button.active{background:linear-gradient(135deg,#fff,#fff0f7);border-color:rgba(232,78,155,.36);box-shadow:0 18px 44px rgba(232,78,155,.16)}
.industry-nav b{display:block;color:var(--ink);font-size:17px}.industry-nav small{display:block;margin-top:4px;color:var(--muted);font-weight:700}
.premium-demo-grid{position:relative;display:grid;grid-template-columns:minmax(320px,450px) minmax(0,1fr);gap:22px;margin-top:22px;align-items:stretch}
.zalo-stage{display:grid;gap:14px;align-content:start}.zalo-shell{width:100%;height:700px;border-radius:34px;background:#fff;color:#111;overflow:hidden;box-shadow:0 34px 90px rgba(18,91,150,.20),0 0 0 10px rgba(255,255,255,.60);border:1px solid rgba(14,143,238,.14);display:flex;flex-direction:column}
.zalo-status{height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;font-size:11px;font-weight:900}.zalo-status b{font-size:14px}.zalo-header{height:64px;flex:0 0 64px;background:linear-gradient(90deg,var(--zalo),var(--zalo2));display:flex;align-items:center;justify-content:space-between;padding:8px 12px;color:#fff}.zalo-left{display:flex;align-items:center;gap:9px;min-width:0}.zalo-back{font-size:32px;line-height:1;font-weight:300}.zalo-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b7fd2;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.12)}.zalo-left b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.zalo-left small{font-size:10px;opacity:.86}.zalo-actions{font-size:18px}
.zalo-oa-banner{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:linear-gradient(180deg,#eef8ff,#fff);border-bottom:1px solid #dceffd}.zalo-oa-banner span{font-size:11px;color:#0b88da;font-weight:900}.zalo-oa-banner b{font-size:13px;color:#24445d;text-align:right}
.zalo-chat{flex:1 1 auto;min-height:0;background:#edf4fb;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}.zalo-date{align-self:center;color:#758293;font-size:9px;font-weight:900;margin:1px 0 2px}.zalo-msg-row{display:flex;opacity:0;transform:translateY(8px) scale(.98);animation:in .25s ease forwards}.zalo-msg-row.user{justify-content:flex-end}.zalo-msg-row.ai{justify-content:flex-start}.zalo-msg{max-width:86%;padding:8px 10px;border-radius:14px;background:#fff;box-shadow:0 2px 9px rgba(36,68,93,.07);line-height:1.32}.zalo-msg-row.user .zalo-msg{background:#dcefff;border-bottom-right-radius:5px}.zalo-msg-row.ai .zalo-msg{border-bottom-left-radius:5px}.zalo-msg em{display:block;color:#e14b86;font-weight:900;font-size:9px;font-style:normal;margin-bottom:2px}.zalo-msg-text{font-size:11.5px;white-space:pre-line;overflow-wrap:anywhere}.zalo-msg small{display:block;margin-top:4px;color:#7f8998;font-size:8.5px}
.zalo-composer{height:50px;flex:0 0 50px;display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fff;border-top:1px solid #e4edf6;color:#758293}.zalo-input{height:34px;flex:1;border:1px solid #e6edf5;border-radius:18px;display:flex;align-items:center;padding:0 10px;font-size:11px;overflow:hidden;background:#fff}.zalo-input i{width:1px;height:16px;background:#7f8ca0;margin-left:2px;animation:blink 1s step-end infinite}.zalo-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line)}.zalo-tools button{min-height:42px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--pink);font-weight:900;cursor:pointer}.zalo-tools span{color:var(--muted);font-size:14px;font-weight:800;text-align:right}
.industry-panel{display:grid;gap:16px}.industry-copy-card,.industry-crm-card,.industry-flow{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 14px 34px rgba(164,53,108,.10)}.chip{display:inline-block;padding:8px 11px;border-radius:999px;background:#fff2f8;color:var(--pink);font-size:11px;letter-spacing:.12em;font-weight:900}.industry-copy-card h3{margin:12px 0 0;font-size:34px;line-height:1.05;letter-spacing:-.045em}.industry-copy-card p{margin:12px 0 0;color:var(--muted);line-height:1.6}.outcome-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.outcome-grid div{padding:14px;border-radius:16px;background:#fff8fb;border:1px solid #f7dfeb}.outcome-grid small{display:block;color:var(--pink);text-transform:uppercase;letter-spacing:.08em;font-weight:900;font-size:10px}.outcome-grid b{display:block;margin-top:6px;line-height:1.35}.industry-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.industry-flow-step{display:grid;justify-items:center;text-align:center;gap:6px;padding:10px 4px;border-radius:14px;background:#fff8fb;border:1px solid #f4ddea;opacity:.58}.industry-flow-step i{width:11px;height:11px;border-radius:50%;background:#d6a6bf}.industry-flow-step span{font-size:12px;font-weight:900}.industry-flow-step.active{opacity:1;border-color:#ffb9d8;background:#fff0f7}.industry-flow-step.active i{background:var(--pink);box-shadow:0 0 0 4px rgba(232,78,155,.13)}.industry-flow-step.done{opacity:1;background:#f0fff8;border-color:#b8f1d8}.industry-flow-step.done i{background:#18d79d}

.pricing-box{display:grid;grid-template-columns:1.2fr 1fr auto;gap:20px;align-items:center}.pricing-box h2{font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.045em;margin:10px 0}.pricing-box p{color:var(--muted);line-height:1.55}.pricing-box ul{margin:0;color:var(--muted);line-height:1.8}.pricing-box a{padding:14px 18px;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;text-decoration:none;font-weight:900;text-align:center;white-space:nowrap}.faq-list{display:grid;gap:12px;max-width:860px;margin:24px auto 0}.faq-list details{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line)}.faq-list summary{cursor:pointer;font-weight:900;font-size:18px}.faq-list p{color:var(--muted);line-height:1.55}.lead{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-bottom:22px}.lead p{color:var(--muted);font-size:18px;line-height:1.55}.lead form{display:grid;gap:12px}.lead input{height:54px;border:1px solid var(--line);background:#fff;border-radius:16px;padding:0 16px;color:var(--ink);font-size:15px;outline:none}.lead button{height:56px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;font-weight:900;font-size:16px;cursor:pointer}footer{width:min(1180px,calc(100vw - 28px));margin:0 auto 30px;padding:22px;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.toast{position:fixed;right:20px;top:92px;z-index:100;padding:9px 10px;border-radius:12px;background:linear-gradient(135deg,#18d79d,#a1f1ca);color:#063521;font-size:11px;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.12);animation:toast .25s ease forwards,toastOut .25s ease forwards 1.8s}@keyframes toast{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateY(-7px)}}

@media(max-width:1120px){.hero{grid-template-columns:1fr}.demo-body{grid-template-columns:1fr}.phone{max-width:430px}.side{grid-template-columns:1fr 1fr}.cards.three,.cards.features{grid-template-columns:repeat(2,1fr)}.workflow-line{grid-template-columns:repeat(2,1fr)}.premium-demo-grid{grid-template-columns:1fr}.zalo-stage{justify-items:center}.zalo-shell{max-width:450px}.industry-nav{grid-template-columns:repeat(3,1fr)}.pricing-box,.lead{grid-template-columns:1fr}.nav nav{display:none}}
@media(max-width:760px){.nav{top:8px;width:min(100vw - 20px,94vw);border-radius:18px}.brand img{height:32px}.brand span{font-size:16px}.nav-btn{padding:10px 12px;font-size:13px}main,footer{width:min(100vw - 20px,94vw)}.hero-copy,.demo-card,.section,.lead{padding:18px;border-radius:24px}.hero h1{font-size:38px}.hero p{font-size:16px}.hero-actions{display:grid}.btn{width:100%}.stats{grid-template-columns:1fr}.demo-head{display:grid}.tabs{display:grid;grid-template-columns:repeat(3,1fr)}.tabs button{font-size:12px;padding:8px 6px}.side{grid-template-columns:1fr}.phone{height:640px}.cards.three,.cards.features,.workflow-line{grid-template-columns:1fr}.industry-nav{grid-template-columns:repeat(2,1fr)}.industry-nav button:last-child{grid-column:1/-1}.zalo-shell{height:660px}.outcome-grid{grid-template-columns:1fr}.industry-flow{grid-template-columns:1fr}.section-title h2,.lead h2,.industry-copy-card h3{font-size:32px}.pricing-box h2{font-size:32px}footer{display:grid;gap:8px}.zalo-tools{display:grid;text-align:center}.zalo-tools span{text-align:center}}
@media(max-width:430px){.hero h1{font-size:34px}.eyebrow{font-size:10px}.phone{height:610px;border-radius:24px}.msg-text{font-size:10.4px}.chat-left b{max-width:155px}.composer>span{font-size:12px}.zalo-shell{height:620px;border-radius:26px}.zalo-msg-text{font-size:10.5px}.zalo-left b{max-width:160px}.industry-nav button{padding:12px}.industry-nav b{font-size:15px}.industry-nav small{font-size:11px}.outcome-grid div{padding:12px}.lead input,.lead button{height:50px}.faq-list summary{font-size:16px}}


/* Production lead form */
.lead-form label{
  display:grid;
  gap:7px;
}
.lead-form label span{
  color:var(--muted);
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  font-weight:800;
}
.lead-form select{
  height:54px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:0 16px;
  color:var(--ink);
  font-size:15px;
  outline:none;
  font-family:inherit;
}
.form-note{
  margin:0;
  color:var(--muted);
  font-size:12px!important;
  line-height:1.45!important;
}
.form-message{
  margin:0;
  min-height:20px;
  font-size:13px!important;
  font-weight:800;
}
.form-message.success{color:#0d9455}
.form-message.error{color:#c72c64}
.lead-form button[disabled]{
  opacity:.7;
  cursor:not-allowed;
}
@media(max-width:720px){
  .lead-form select{height:50px}
}


/* Premium visual workflow section */
.visual-workflow{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 8% 28%, rgba(255,126,184,.16), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(255,214,231,.45), transparent 26%),
    rgba(255,255,255,.78);
}
.workflow-visual{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:18px;
  margin-top:34px;
  padding:10px 0 4px;
}
.workflow-connector{
  position:absolute;
  top:64px;
  left:7%;
  right:7%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(232,78,155,.10), rgba(232,78,155,.62), rgba(255,126,184,.20));
  box-shadow:0 0 24px rgba(232,78,155,.22);
  z-index:0;
}
.workflow-connector:before,
.workflow-connector:after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  border-top:3px solid rgba(232,78,155,.72);
  border-right:3px solid rgba(232,78,155,.72);
}
.workflow-connector:before{left:24%}
.workflow-connector:after{right:24%}
.visual-step{
  position:relative;
  z-index:1;
  min-height:338px;
  padding:30px 18px 20px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,252,.92));
  border:1px solid rgba(232,78,155,.18);
  box-shadow:
    0 18px 48px rgba(164,53,108,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .22s ease, box-shadow .22s ease;
}
.visual-step:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 60px rgba(164,53,108,.16);
}
.step-badge{
  position:absolute;
  top:-18px;
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--pink), var(--pink2));
  color:#fff;
  font-weight:900;
  font-size:20px;
  box-shadow:0 12px 28px rgba(232,78,155,.28);
}
.step-visual{
  width:100%;
  height:160px;
  display:grid;
  place-items:center;
  margin-top:10px;
  margin-bottom:16px;
}
.visual-step h3{
  margin:0;
  font-size:24px;
  letter-spacing:-.035em;
  color:var(--ink);
}
.visual-step p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.4;
}
.status-chip{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 14px;
  border-radius:999px;
  background:#fff0f7;
  color:var(--pink);
  font-size:13px;
  font-style:normal;
  font-weight:900;
  border:1px solid rgba(232,78,155,.16);
}
.status-chip:before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-right:6px;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  font-size:11px;
}
.mini-chat-bubble{
  width:88%;
  min-height:82px;
  padding:14px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(232,78,155,.13);
  box-shadow:0 16px 36px rgba(164,53,108,.10);
  display:flex;
  align-items:center;
  gap:12px;
}
.mini-avatar{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,#ffd6e7,#fff);
  border:2px solid #fff;
  box-shadow:0 6px 16px rgba(232,78,155,.20);
}
.mini-chat-bubble p{
  margin:0;
  font-size:13px;
  color:var(--ink);
  text-align:left;
}
.channel-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.channel-row i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#0b8de3;
  font-style:normal;
  font-weight:900;
  font-size:10px;
  box-shadow:0 10px 24px rgba(16,151,245,.15);
  border:1px solid rgba(16,151,245,.16);
}
.ai-visual{
  position:relative;
}
.bot-orb{
  width:112px;
  height:112px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:
    radial-gradient(circle at 35% 25%,#fff,rgba(255,255,255,.35) 20%,transparent 38%),
    linear-gradient(135deg,#ffbee0,#ff75b3 50%,#7d55f4);
  box-shadow:0 18px 48px rgba(232,78,155,.24);
}
.bot-orb span{
  width:58px;
  height:38px;
  border-radius:18px;
  background:#351b55;
  position:absolute;
  box-shadow:inset 0 0 16px rgba(255,126,184,.35);
}
.bot-orb span:before,
.bot-orb span:after{
  content:"";
  position:absolute;
  top:13px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
}
.bot-orb span:before{left:16px}
.bot-orb span:after{right:16px}
.bot-orb b{
  position:absolute;
  bottom:-22px;
  color:var(--pink);
  font-size:12px;
}
.typing-pill{
  position:absolute;
  right:22px;
  top:22px;
  display:flex;
  gap:4px;
  padding:9px 12px;
  border-radius:18px 18px 18px 4px;
  background:#fff;
  box-shadow:0 10px 28px rgba(164,53,108,.12);
}
.typing-pill i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pink);
  opacity:.55;
}
.calendar-card{
  position:relative;
  width:86%;
  min-height:132px;
  padding:14px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 16px 36px rgba(164,53,108,.10);
}
.calendar-head{
  font-weight:900;
  font-size:13px;
  margin-bottom:10px;
}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  color:var(--muted);
  font-size:10px;
}
.calendar-grid b{
  height:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#fff7fb;
}
.calendar-grid b.active{
  background:var(--pink);
  color:#fff;
}
.booking-pop{
  position:absolute;
  right:-12px;
  bottom:12px;
  min-width:150px;
  padding:10px 12px;
  border-radius:15px;
  background:#fff;
  color:#0b72c8;
  font-weight:900;
  font-size:12px;
  box-shadow:0 14px 34px rgba(164,53,108,.16);
}
.booking-pop small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}
.crm-profile-card{
  width:88%;
  padding:14px;
  border-radius:20px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 16px 36px rgba(164,53,108,.10);
}
.crm-photo{
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffd6e7,#fff);
  border:2px solid #fff;
  box-shadow:0 6px 16px rgba(232,78,155,.20);
}
.crm-profile-card b,
.crm-profile-card small{
  display:block;
  text-align:left;
}
.crm-profile-card b{font-size:13px}
.crm-profile-card small{color:var(--muted);font-size:11px;margin-top:3px}
.crm-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}
.crm-tags span{
  padding:8px 10px;
  border-radius:999px;
  background:#fff0f7;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.crm-lines{
  width:78%;
  display:grid;
  gap:8px;
  margin-top:14px;
}
.crm-lines i{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#ffe4f0,rgba(255,228,240,.25));
}
.timeline{
  width:90%;
  display:grid;
  gap:12px;
  position:relative;
}
.timeline:before{
  content:"";
  position:absolute;
  left:22px;
  top:18px;
  bottom:18px;
  width:2px;
  background:#ffd6e7;
}
.timeline div{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px 10px 0;
}
.timeline i{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  display:grid;
  place-items:center;
  font-style:normal;
  box-shadow:0 10px 24px rgba(232,78,155,.20);
  z-index:1;
}
.timeline span{
  flex:1;
  padding:12px;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(164,53,108,.10);
  text-align:left;
}
.workflow-bottom-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:max-content;
  max-width:100%;
  margin:26px auto 0;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff,#fff0f7);
  border:1px solid rgba(232,78,155,.14);
  color:var(--muted);
  box-shadow:0 16px 40px rgba(164,53,108,.10);
}
.workflow-bottom-note span{
  color:var(--pink);
  font-size:20px;
}
.workflow-bottom-note b{
  font-size:14px;
}
@media(max-width:1120px){
  .workflow-visual{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .workflow-connector{
    display:none;
  }
  .visual-step{
    min-height:320px;
  }
}
@media(max-width:760px){
  .workflow-visual{
    grid-template-columns:1fr;
    gap:26px;
  }
  .visual-step{
    min-height:auto;
    padding:28px 18px 18px;
  }
  .step-visual{
    height:145px;
  }
  .workflow-bottom-note{
    width:100%;
    border-radius:22px;
    text-align:center;
    align-items:flex-start;
  }
}
@media(max-width:430px){
  .visual-step h3{
    font-size:22px;
  }
  .step-visual{
    height:136px;
  }
  .booking-pop{
    right:0;
    min-width:138px;
  }
}


/* Premium visualized hero command center */
.hero-visualized{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.18fr);
}
.hero-mini-proof{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:12px;
  margin-top:18px;
}
.hero-mini-proof div{
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#fff7fb);
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(164,53,108,.08);
}
.hero-mini-proof span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.hero-mini-proof b{
  display:block;
  color:var(--ink);
  margin-top:4px;
  font-size:15px;
}
.hero-command{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 8%,rgba(255,126,184,.18),transparent 28%),
    radial-gradient(circle at 86% 16%,rgba(10,148,246,.10),transparent 24%),
    rgba(255,255,255,.76);
}
.hero-command:before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-160px;
  bottom:-160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,126,184,.22),transparent 66%);
  pointer-events:none;
}
.command-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(310px,430px) minmax(250px,1fr);
  gap:22px;
  align-items:stretch;
}
.command-phone-zone{
  position:relative;
  display:grid;
  place-items:center;
  min-height:674px;
}
.command-phone-zone .phone{
  height:640px;
  max-width:400px;
  z-index:2;
  box-shadow:
    0 34px 90px rgba(10,148,246,.16),
    0 0 0 10px rgba(255,255,255,.62),
    0 20px 70px rgba(164,53,108,.16);
}
.floating-kpi{
  position:absolute;
  z-index:4;
  width:124px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 18px 42px rgba(164,53,108,.14);
  backdrop-filter:blur(14px);
}
.floating-kpi small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.floating-kpi b{
  display:block;
  color:var(--pink);
  font-size:24px;
  margin-top:4px;
  letter-spacing:-.04em;
}
.floating-kpi span{
  display:block;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  margin-top:2px;
}
.kpi-left{
  left:-28px;
  top:34px;
}
.kpi-right{
  right:-28px;
  bottom:48px;
}
.command-side{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:14px;
  align-content:start;
  min-width:0;
}
.conversion-map,
.command-crm,
.insight-strip{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 16px 40px rgba(164,53,108,.10);
}
.conversion-map{
  padding:18px;
}
.map-title span{
  display:block;
  color:var(--pink);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.map-title b{
  display:block;
  color:var(--ink);
  margin-top:6px;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.035em;
}
.map-flow{
  position:relative;
  display:grid;
  gap:10px;
  margin-top:16px;
}
.map-flow:before{
  content:"";
  position:absolute;
  left:23px;
  top:20px;
  bottom:20px;
  width:2px;
  background:linear-gradient(180deg,rgba(232,78,155,.18),rgba(232,78,155,.52),rgba(24,215,157,.22));
}
.map-node{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:17px;
  background:#fff8fb;
  border:1px solid #f4ddea;
  opacity:.64;
  transition:.2s ease;
}
.map-node i{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#fff;
  font-style:normal;
  box-shadow:0 8px 18px rgba(164,53,108,.08);
}
.map-node b{
  display:block;
  color:var(--ink);
  font-size:15px;
}
.map-node small{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}
.map-node.active{
  opacity:1;
  background:linear-gradient(135deg,#fff,#fff0f7);
  border-color:rgba(232,78,155,.32);
  transform:translateX(4px);
  box-shadow:0 14px 32px rgba(232,78,155,.12);
}
.map-node.done{
  opacity:1;
  background:#f0fff8;
  border-color:#b8f1d8;
}
.map-node.done i{
  background:#e8fff4;
}
.command-crm{
  padding:16px;
}
.insight-strip{
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.insight-strip div{
  padding:12px;
  border-radius:16px;
  background:#fff8fb;
  border:1px solid #f4ddea;
}
.insight-strip small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.insight-strip b{
  display:block;
  color:var(--ink);
  margin-top:4px;
  font-size:14px;
}
.hero-command .crm dl div{
  padding-top:10px;
}
.hero-command .profile{
  margin:14px 0;
}

/* Make old hero mini-flow hidden only in visualized command if any remains */
.hero-command .mini-flow{
  display:none;
}

@media(max-width:1120px){
  .hero-visualized{
    grid-template-columns:1fr;
  }
  .command-grid{
    grid-template-columns:1fr;
  }
  .command-phone-zone{
    min-height:auto;
  }
  .command-phone-zone .phone{
    max-width:420px;
    height:640px;
  }
  .command-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .conversion-map{
    grid-column:1/-1;
  }
  .insight-strip{
    grid-column:1/-1;
  }
  .kpi-left{
  left:-28px;
  top:34px;
}
  .kpi-right{
  right:-28px;
  bottom:48px;
}
}
@media(max-width:760px){
  .hero-mini-proof{
    grid-template-columns:1fr;
  }
  .command-grid{
    gap:16px;
  }
  .command-phone-zone .phone{
    height:610px;
    max-width:100%;
  }
  .floating-kpi{
  position:absolute;
  z-index:4;
  width:124px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 18px 42px rgba(164,53,108,.14);
  backdrop-filter:blur(14px);
}
  .command-side{
    grid-template-columns:1fr;
  }
  .conversion-map{
    padding:16px;
  }
  .map-title b{
    font-size:18px;
  }
  .insight-strip{
    grid-template-columns:1fr;
  }
}
@media(max-width:430px){
  .command-phone-zone .phone{
    height:585px;
  }
  .map-node{
    padding:9px;
  }
  .map-node i{
    width:34px;
    height:34px;
  }
}

/* fixed floating KPI overlap: moved outward and upward/downward */


/* Slim premium KPI badges - replace large floating cards */
.hero-command .floating-kpi{
  position:absolute;
  z-index:4;
  width:auto;
  min-width:158px;
  max-width:188px;
  min-height:48px;
  padding:7px 10px 7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(232,78,155,.18);
  box-shadow:
    0 12px 32px rgba(164,53,108,.12),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:8px;
  row-gap:0;
  align-items:center;
}
.hero-command .floating-kpi:before{
  content:"";
  grid-row:1 / span 2;
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  box-shadow:0 8px 18px rgba(232,78,155,.22);
}
.hero-command .floating-kpi small{
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-command .floating-kpi b{
  display:inline;
  color:var(--pink);
  font-size:19px;
  line-height:1;
  margin:0;
  letter-spacing:-.05em;
}
.hero-command .floating-kpi span{
  display:inline;
  color:var(--ink);
  font-size:10.5px;
  line-height:1.1;
  font-weight:900;
  margin:0;
}
.hero-command .kpi-left{
  left:12px;
  top:16px;
}
.hero-command .kpi-right{
  right:12px;
  bottom:18px;
}
.hero-command .kpi-left:after{
  content:"";
  position:absolute;
  left:22px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#2ad69d;
  box-shadow:0 0 0 5px rgba(42,214,157,.14);
}
.hero-command .kpi-right:after{
  content:"";
  position:absolute;
  left:22px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#0b94f6;
  box-shadow:0 0 0 5px rgba(11,148,246,.12);
}
@media(max-width:1120px){
  .hero-command .kpi-left{
    left:calc(50% - 210px);
    top:14px;
  }
  .hero-command .kpi-right{
    right:calc(50% - 210px);
    bottom:18px;
  }
}
@media(max-width:760px){
  .hero-command .floating-kpi{
    display:none;
  }
}


/* merged hero revision: previous hero-right + new hero-left */
.hero-copy-merged{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  min-height:720px;
  padding:46px 42px;
}
.hero-copy-merged h1{
  margin:28px 0 0;
  font-size:clamp(56px,6.2vw,92px);
  line-height:.94;
  letter-spacing:-.075em;
  max-width:640px;
  color:#2b1226;
}
.hero-copy-merged h1 span,
.hero-copy-merged h1 strong{ display:block; }
.hero-copy-merged h1 strong{
  color:var(--pink);
  background:linear-gradient(135deg,var(--pink),#ff71b1 52%,#cf58e7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy-merged p{
  max-width:640px;
  margin:28px 0 0;
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
}
.hero-copy-merged .hero-actions{ margin-top:34px; }
.hero-copy-merged .btn{ min-height:58px; padding:0 26px; }
.hero-copy-merged .btn.ghost{ background:rgba(255,255,255,.86); }
.merged-stats{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:34px;
}
.merged-stats div{
  min-height:138px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px 22px 20px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 22px 52px rgba(194,126,165,.10);
}
.merged-stats b{
  font-size:56px;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--pink);
}
.merged-stats span{
  font-size:14px;
  color:var(--muted);
  margin-top:8px;
}

.demo-head-merged{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  margin-bottom:18px;
}
.hero-right-tabs{
  width:100%;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(232,78,155,.16);
  padding:8px;
  border-radius:28px;
  box-shadow:0 12px 28px rgba(160,77,126,.08);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.hero-right-tabs button{
  min-height:54px;
  border-radius:20px;
  border:1.6px solid transparent;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#6d5567;
  font-weight:800;
}
.hero-right-tabs button span{
  font-size:13px;
  opacity:.9;
}
.hero-right-tabs button.active{
  border-color:rgba(232,78,155,.5);
  background:#fff;
  color:var(--pink);
  box-shadow:0 10px 22px rgba(232,78,155,.16);
}
.hero-right-subtitle{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:0 4px;
}
.hero-right-subtitle small{
  color:var(--pink);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
}
.hero-right-subtitle strong{
  font-size:22px;
  letter-spacing:-.03em;
  color:#341627;
}

@media (max-width: 1200px){
  .hero-copy-merged{ min-height:auto; }
  .hero-copy-merged h1{ font-size:clamp(50px,8vw,78px); max-width:none; }
}
@media (max-width: 860px){
  .hero-copy-merged{ padding:34px 22px; }
  .hero-copy-merged h1{ font-size:clamp(44px,11vw,66px); line-height:.98; }
  .hero-copy-merged p{ font-size:16px; }
  .merged-stats{ grid-template-columns:repeat(3,1fr); }
  .merged-stats div{ min-height:116px; padding:18px; }
  .merged-stats b{ font-size:42px; }
}
@media (max-width: 640px){
  .hero-copy-merged{ padding:30px 18px; }
  .hero-copy-merged h1{ margin-top:20px; font-size:clamp(42px,12vw,62px); }
  .hero-copy-merged p{ margin-top:20px; }
  .hero-copy-merged .hero-actions{ display:grid; grid-template-columns:1fr; gap:12px; }
  .hero-copy-merged .btn{ width:100%; }
  .merged-stats{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .merged-stats div{ min-height:96px; padding:14px; border-radius:20px; }
  .merged-stats b{ font-size:28px; }
  .hero-right-tabs{ grid-template-columns:1fr 1fr 1fr; padding:6px; gap:6px; }
  .hero-right-tabs button{ min-height:46px; border-radius:16px; font-size:14px; }
  .hero-right-subtitle strong{ font-size:18px; }
}
@media (max-width: 420px){
  .merged-stats{ grid-template-columns:1fr; }
  .merged-stats div{ min-height:auto; }
  .hero-right-tabs button{ font-size:13px; gap:6px; }
}


/* polish pass: spacing, luxury buttons/cards, smoother mobile, refined font */
html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body, button, input, select, textarea{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;
}
.hero{
  gap:26px;
  align-items:stretch;
}
.hero-copy-merged{
  padding:54px 48px 42px;
}
.hero-copy-merged .eyebrow{
  padding:11px 15px;
  font-size:12px;
  letter-spacing:.11em;
  box-shadow:0 10px 24px rgba(164,53,108,.06);
}
.hero-copy-merged h1{
  margin-top:30px;
  max-width:680px;
}
.hero-copy-merged p{
  max-width:590px;
  margin-top:24px;
}
.hero-copy-merged .hero-actions{
  gap:14px;
  margin-top:30px;
}
.hero-copy-merged .btn{
  min-height:60px;
  padding:0 28px;
  border-radius:18px;
  font-size:17px;
  letter-spacing:-.01em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hero-copy-merged .btn:hover{
  transform:translateY(-2px);
}
.hero-copy-merged .btn.primary{
  background:linear-gradient(135deg,#f05ca9 0%, #eb5ca6 40%, #ff79bc 100%);
  box-shadow:0 18px 40px rgba(232,78,155,.22), inset 0 1px 0 rgba(255,255,255,.24);
}
.hero-copy-merged .btn.primary:hover{
  box-shadow:0 24px 46px rgba(232,78,155,.28), inset 0 1px 0 rgba(255,255,255,.24);
}
.hero-copy-merged .btn.ghost{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(232,78,155,.18);
  box-shadow:0 12px 28px rgba(164,53,108,.08);
}
.hero-copy-merged .btn.ghost:hover{
  background:#fff;
  border-color:rgba(232,78,155,.28);
}
.merged-stats{
  gap:18px;
  margin-top:36px;
}
.merged-stats div{
  position:relative;
  overflow:hidden;
  padding:20px 20px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,252,.92));
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 18px 42px rgba(194,126,165,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.merged-stats div::before{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:#fff3f8;
  border:1px solid rgba(232,78,155,.10);
  color:#9b7289;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  margin-bottom:14px;
}
.merged-stats div:nth-child(1)::before{content:'Always on';}
.merged-stats div:nth-child(2)::before{content:'Omni-channel';}
.merged-stats div:nth-child(3)::before{content:'Unified CRM';}
.merged-stats div::after{
  content:'';
  position:absolute;
  right:-10px;
  bottom:-26px;
  width:86px;
  height:86px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,126,184,.18), rgba(255,126,184,0));
  pointer-events:none;
}
.merged-stats b{
  font-size:52px;
  line-height:.96;
}
.merged-stats span{
  margin-top:10px;
  font-size:14px;
}
.demo-card.hero-command{
  padding:22px;
}
.hero-right-tabs{
  padding:9px;
  border-radius:30px;
}
.hero-right-tabs button{
  min-height:56px;
  border-radius:18px;
  font-size:15px;
  transition:all .2s ease;
}
.hero-right-tabs button:hover{
  background:rgba(255,255,255,.72);
}
.hero-right-tabs button.active{
  box-shadow:0 10px 22px rgba(232,78,155,.16);
}
.hero-right-subtitle{padding:2px 4px 0;}
.hero-right-subtitle strong{
  font-size:24px;
}
@media (max-width: 1100px){
  .hero-copy-merged{
    min-height:auto;
    padding:42px 36px 36px;
  }
  .hero-copy-merged h1{max-width:none;}
}
@media (max-width: 760px){
  .hero{gap:18px;}
  .hero-copy-merged{
    padding:30px 22px 24px;
    border-radius:26px;
  }
  .hero-copy-merged .eyebrow{
    font-size:11px;
    padding:10px 13px;
  }
  .hero-copy-merged h1{
    margin-top:22px;
    font-size:clamp(42px, 13vw, 58px);
    line-height:.96;
    letter-spacing:-.072em;
  }
  .hero-copy-merged p{
    margin-top:18px;
    font-size:16px;
    line-height:1.62;
  }
  .hero-copy-merged .hero-actions{
    margin-top:24px;
    display:grid;
    grid-template-columns:1fr;
  }
  .hero-copy-merged .btn{
    width:100%;
    min-height:56px;
    font-size:16px;
  }
  .merged-stats{
    gap:12px;
    margin-top:24px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .merged-stats div{
    min-height:116px;
    padding:16px 14px 14px;
    border-radius:20px;
  }
  .merged-stats div::before{
    min-height:22px;
    padding:0 8px;
    margin-bottom:10px;
    font-size:9px;
  }
  .merged-stats b{
    font-size:34px;
  }
  .merged-stats span{
    margin-top:6px;
    font-size:12px;
    line-height:1.35;
  }
  .hero-right-tabs{
    padding:6px;
    gap:6px;
  }
  .hero-right-tabs button{
    min-height:46px;
    font-size:13px;
    padding:0 8px;
  }
  .hero-right-subtitle{
    align-items:center;
  }
  .hero-right-subtitle strong{
    font-size:18px;
  }
}
@media (max-width: 420px){
  .hero-copy-merged{
    padding:26px 18px 22px;
  }
  .hero-copy-merged h1{
    font-size:clamp(38px, 14vw, 52px);
  }
  .hero-copy-merged p{
    font-size:15px;
  }
  .merged-stats{
    grid-template-columns:1fr;
  }
  .merged-stats div{
    min-height:auto;
    padding:15px 16px;
  }
  .hero-right-tabs button span{display:none;}
}


/* Compact visual hero left - cleaner and less text-heavy */
.hero-copy-compact{
  position:relative;
  overflow:hidden;
  min-height:720px;
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,126,184,.15), transparent 32%),
    radial-gradient(circle at 100% 78%, rgba(11,148,246,.06), transparent 28%),
    rgba(255,255,255,.76);
}
.hero-copy-compact:before{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,126,184,.16), transparent 66%);
  pointer-events:none;
}
.hero-copy-compact:after{
  content:"";
  position:absolute;
  left:-100px;
  bottom:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,231,.52), transparent 64%);
  pointer-events:none;
}
.compact-hero-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 124px;
  gap:18px;
  align-items:start;
  margin-top:26px;
}
.compact-kicker{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:#fff0f7;
  border:1px solid rgba(232,78,155,.12);
  color:var(--pink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hero-copy-compact h1{
  margin:16px 0 0;
  max-width:560px;
  color:#2c1225;
  font-size:clamp(42px,4.7vw,62px);
  line-height:1.02;
  letter-spacing:-.07em;
}
.hero-copy-compact h1 strong{
  background:linear-gradient(135deg,var(--pink),#ff72b5 58%,#cc58dd);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy-compact p{
  max-width:560px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.62;
}
.compact-orb{
  width:124px;
  height:124px;
  border-radius:36px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.95),rgba(255,255,255,.20) 26%,transparent 38%),
    linear-gradient(135deg,#fff0f7,#fff 46%,#ffe4f2);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 22px 52px rgba(164,53,108,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
.compact-orb span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-weight:900;
  font-size:22px;
  box-shadow:0 14px 30px rgba(232,78,155,.24);
}
.compact-orb small{
  margin-top:-26px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.compact-flow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}
.compact-flow article{
  position:relative;
  min-height:146px;
  padding:18px 16px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(232,78,155,.13);
  box-shadow:0 16px 38px rgba(164,53,108,.09), inset 0 1px 0 rgba(255,255,255,.9);
}
.compact-flow article:not(:last-child):after{
  content:"";
  position:absolute;
  right:-11px;
  top:50%;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  box-shadow:0 10px 24px rgba(232,78,155,.22);
  z-index:3;
}
.compact-flow article:not(:last-child):before{
  content:"›";
  position:absolute;
  right:-5px;
  top:50%;
  transform:translateY(-56%);
  z-index:4;
  color:#fff;
  font-weight:900;
  font-size:18px;
}
.compact-flow i{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:16px;
  background:#fff0f7;
  border:1px solid rgba(232,78,155,.10);
  font-style:normal;
  font-size:20px;
}
.compact-flow b{
  display:block;
  margin-top:14px;
  color:var(--ink);
  font-size:16px;
  letter-spacing:-.02em;
}
.compact-flow span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
}
.compact-result-card{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,240,247,.86));
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 18px 44px rgba(164,53,108,.10);
}
.result-copy small{
  display:block;
  color:var(--pink);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.result-copy b{
  display:block;
  margin-top:6px;
  color:var(--ink);
  font-size:18px;
  letter-spacing:-.025em;
}
.result-mini-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.result-mini-stats span{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.12);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.result-mini-stats strong{
  color:var(--pink);
  font-size:16px;
}
.compact-actions{
  position:relative;
  z-index:1;
  margin-top:24px!important;
}
.compact-actions .btn{
  min-height:56px!important;
  border-radius:18px!important;
}
.hero-copy-compact .stats,
.hero-copy-compact .merged-stats,
.hero-copy-compact .hero-mini-proof,
.hero-copy-compact .hero-b-metrics,
.hero-copy-compact .hero-b-showcase,
.hero-copy-compact .hero-outcome-panel{
  display:none!important;
}
@media(max-width:1120px){
  .hero-copy-compact{
    min-height:auto;
    padding:42px 36px;
  }
  .compact-hero-head{
    grid-template-columns:1fr auto;
  }
}
@media(max-width:760px){
  .hero-copy-compact{
    padding:30px 22px;
    border-radius:26px;
  }
  .compact-hero-head{
    grid-template-columns:1fr;
    margin-top:22px;
  }
  .compact-orb{
    display:none;
  }
  .hero-copy-compact h1{
    font-size:40px;
    line-height:1.04;
    letter-spacing:-.06em;
  }
  .hero-copy-compact p{
    font-size:15.5px;
  }
  .compact-flow{
    grid-template-columns:1fr;
    margin-top:24px;
  }
  .compact-flow article{
    min-height:auto;
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:12px;
    align-items:center;
    padding:14px;
  }
  .compact-flow article:before,
  .compact-flow article:after{
    display:none;
  }
  .compact-flow b{
    margin-top:0;
  }
  .compact-flow span{
    grid-column:2;
    margin-top:-6px;
  }
  .compact-result-card{
    grid-template-columns:1fr;
  }
  .result-mini-stats{
    justify-content:flex-start;
  }
  .compact-actions{
    display:grid!important;
  }
  .compact-actions .btn{
    width:100%;
  }
}
@media(max-width:430px){
  .hero-copy-compact{
    padding:26px 18px;
  }
  .hero-copy-compact h1{
    font-size:36px;
  }
  .compact-kicker{
    font-size:10px;
    letter-spacing:.06em;
  }
  .result-copy b{
    font-size:16px;
  }
}


/* Replaced problem section: premium spa visual */
.problem-redesign{
  position:relative;
  overflow:hidden;
  padding:34px!important;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,126,184,.20), transparent 26%),
    radial-gradient(circle at 100% 8%, rgba(255,214,231,.52), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,247,251,.78));
}
.problem-redesign:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(255,255,255,.35) 42%, transparent 62%),
    radial-gradient(circle at 16% 76%, rgba(232,78,155,.07), transparent 28%);
  pointer-events:none;
}
.problem-redesign-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.45fr);
  gap:24px;
  align-items:stretch;
}
.problem-redesign-copy{
  position:relative;
  min-height:520px;
  padding:36px 34px;
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,249,252,.62));
  border:1px solid rgba(232,78,155,.12);
  overflow:hidden;
}
.problem-pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 16px 34px rgba(164,53,108,.10);
  color:var(--pink);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:13px;
}
.problem-pill i{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-style:normal;
}
.problem-redesign-copy h2{
  margin:34px 0 0;
  max-width:580px;
  color:#2c1225;
  font-size:clamp(42px,4.4vw,64px);
  line-height:1.02;
  letter-spacing:-.06em;
}
.problem-redesign-copy h2 strong{
  display:block;
  color:var(--pink);
}
.problem-redesign-copy p{
  margin:22px 0 0;
  max-width:500px;
  color:var(--muted);
  font-size:17.5px;
  line-height:1.6;
}
.problem-spa-visual{
  position:absolute;
  left:34px;
  right:34px;
  bottom:28px;
  height:188px;
  pointer-events:none;
}
.lotus{
  position:absolute;
  left:18px;
  bottom:28px;
  width:118px;
  height:84px;
  background:
    radial-gradient(ellipse at 50% 100%, #ffb6d4 0 36%, transparent 37%),
    radial-gradient(ellipse at 22% 70%, #ffd9e9 0 32%, transparent 33%),
    radial-gradient(ellipse at 78% 70%, #ffd9e9 0 32%, transparent 33%);
  filter:drop-shadow(0 16px 26px rgba(232,78,155,.16));
}
.towels{
  position:absolute;
  left:0;
  bottom:0;
  width:156px;
  height:62px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#ffe9f4);
  box-shadow:
    0 -18px 0 -8px #fff,
    0 -34px 0 -18px #ffe9f4,
    0 18px 36px rgba(164,53,108,.12);
}
.candle-soft{
  position:absolute;
  left:186px;
  bottom:6px;
  width:72px;
  height:78px;
  border-radius:22px 22px 28px 28px;
  background:linear-gradient(180deg,#ffe2ef,#fff);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 18px 34px rgba(232,78,155,.15);
}
.candle-soft:before{
  content:"";
  position:absolute;
  top:-24px;
  left:50%;
  width:17px;
  height:32px;
  transform:translateX(-50%);
  border-radius:50% 50% 45% 45%;
  background:linear-gradient(180deg,#fff4a4,#ff7eb8);
  filter:drop-shadow(0 0 16px rgba(255,126,184,.72));
}
.chat-ghost{
  position:absolute;
  left:286px;
  bottom:28px;
  width:162px;
  height:86px;
  border-radius:28px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(232,78,155,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 20px 42px rgba(164,53,108,.08);
}
.chat-ghost b{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffb1d2;
}
.clock-dot{
  position:absolute;
  left:418px;
  bottom:98px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-size:28px;
  font-weight:900;
  box-shadow:0 20px 42px rgba(232,78,155,.24);
}
.problem-redesign-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.problem-card{
  position:relative;
  min-height:520px;
  padding:26px 24px 24px;
  border-radius:32px;
  background:linear-gradient(180deg,#fff,#fff7fb);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 26px 64px rgba(164,53,108,.12);
  overflow:hidden;
}
.problem-num{
  position:absolute;
  top:24px;
  left:24px;
  z-index:4;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-size:21px;
  font-weight:900;
  box-shadow:0 18px 38px rgba(232,78,155,.28);
}
.problem-illustration{
  height:238px;
  position:relative;
  display:grid;
  place-items:center;
  margin:10px 0 22px;
}
.night-phone{
  position:relative;
  width:138px;
  height:216px;
  border-radius:32px;
  background:linear-gradient(180deg,#2d2149,#76579f);
  box-shadow:0 26px 56px rgba(64,48,110,.24);
  overflow:hidden;
}
.night-phone:before{
  content:"";
  position:absolute;
  top:16px;
  right:28px;
  width:54px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
}
.moon{
  position:absolute;
  top:58px;
  left:42px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ffe989;
  box-shadow:0 0 24px rgba(255,233,137,.46);
}
.phone-line{
  position:absolute;
  left:28px;
  right:28px;
  bottom:20px;
  height:82px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
}
.phone-msg{
  position:absolute;
  left:-34px;
  right:-34px;
  bottom:48px;
  padding:16px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 20px 44px rgba(64,48,110,.18);
}
.phone-msg span{
  display:block;
  font-size:11px;
  color:#6d5567;
  font-weight:900;
}
.phone-msg p{
  margin:8px 0 0;
  color:#2c1225;
  font-size:12.5px;
  line-height:1.38;
}
.phone-msg small{
  display:block;
  text-align:right;
  color:#9d8596;
  font-size:10px;
}
.time-bubble{
  position:absolute;
  right:30px;
  top:82px;
  width:70px;
  height:70px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#fff,#fff0f7);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 18px 38px rgba(232,78,155,.20);
  color:var(--pink);
  font-size:28px;
}
.data-cloud{
  position:relative;
  width:240px;
  height:205px;
}
.data-cloud:before{
  content:"";
  position:absolute;
  inset:48px 36px 30px;
  border:2px dashed rgba(204,126,235,.28);
  border-radius:42px;
}
.data-app{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#fff;
  box-shadow:0 22px 44px rgba(95,86,175,.15);
  font-weight:900;
}
.data-app.zalo{
  left:20px;
  top:18px;
  width:76px;
  height:76px;
  color:#0b94f6;
  transform:rotate(-8deg);
}
.data-app.msg{
  right:18px;
  top:26px;
  width:76px;
  height:76px;
  color:#fff;
  background:linear-gradient(135deg,#5079ff,#b44cff);
  transform:rotate(8deg);
}
.data-app.web{
  left:72px;
  bottom:16px;
  width:98px;
  height:82px;
  color:var(--pink);
  transform:rotate(8deg);
}
.data-cloud span{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffc5dc;
}
.data-cloud span:nth-of-type(1){left:26px;bottom:66px}
.data-cloud span:nth-of-type(2){right:42px;bottom:76px}
.data-cloud span:nth-of-type(3){left:126px;top:18px}
.follow-calendar{
  position:relative;
  width:184px;
  min-height:192px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(232,78,155,.18);
  box-shadow:0 26px 56px rgba(232,78,155,.16);
  overflow:hidden;
  padding:58px 18px 18px;
}
.calendar-top{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:48px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
}
.calendar-top:before,
.calendar-top:after{
  content:"";
  position:absolute;
  top:-12px;
  width:10px;
  height:28px;
  border-radius:999px;
  background:#ffb8d5;
}
.calendar-top:before{left:38px}
.calendar-top:after{right:38px}
.client-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid #f2dce8;
}
.client-row div{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffd7e8,#fff);
}
.client-row span{
  color:#2c1225;
  font-size:12px;
  line-height:1.3;
  font-weight:800;
}
.follow-calendar button{
  width:100%;
  height:42px;
  margin-top:18px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-weight:900;
}
.bell-bubble{
  position:absolute;
  right:42px;
  top:60px;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#fff0f7);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 18px 38px rgba(232,78,155,.20);
  font-size:28px;
}
.problem-card-text h3{
  margin:0;
  color:var(--ink);
  font-size:24px;
  line-height:1.18;
  letter-spacing:-.03em;
}
.problem-card-text i{
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  margin:18px 0 18px;
  background:linear-gradient(90deg,var(--pink),rgba(232,78,155,.08));
}
.problem-card-text p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:15.5px;
}
@media(max-width:1180px){
  .problem-redesign-grid{
    grid-template-columns:1fr;
  }
  .problem-redesign-copy{
    min-height:420px;
  }
}
@media(max-width:900px){
  .problem-redesign-cards{
    grid-template-columns:1fr;
  }
  .problem-card{
    min-height:auto;
    display:grid;
    grid-template-columns:230px 1fr;
    gap:20px;
    align-items:center;
  }
  .problem-illustration{
    height:220px;
    margin:0;
  }
  .problem-card-text{
    padding-top:38px;
  }
}
@media(max-width:760px){
  .problem-redesign{
    padding:18px!important;
  }
  .problem-redesign-copy{
    min-height:auto;
    padding:24px;
  }
  .problem-redesign-copy h2{
    font-size:36px;
  }
  .problem-redesign-copy p{
    font-size:16px;
  }
  .problem-spa-visual{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    height:150px;
    margin-top:22px;
  }
  .problem-card{
    grid-template-columns:1fr;
    padding:22px;
  }
  .problem-card-text{
    padding-top:0;
  }
  .problem-illustration{
    height:200px;
    margin:12px 0 10px;
  }
}
@media(max-width:430px){
  .problem-redesign-copy h2{
    font-size:31px;
  }
  .problem-card-text h3{
    font-size:22px;
  }
  .chat-ghost{
    display:none;
  }
}


/* Problem section fixed: stable layout, no overlap */
.problem-fixed{
  position:relative;
  overflow:hidden;
  padding:36px!important;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,126,184,.16), transparent 28%),
    radial-gradient(circle at 100% 8%, rgba(255,214,231,.46), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,248,252,.80));
}
.problem-fixed *{
  box-sizing:border-box;
}
.problem-fixed-inner{
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(0,1.42fr);
  gap:24px;
  align-items:stretch;
}
.problem-fixed-copy{
  min-height:430px;
  padding:34px 34px 30px;
  border-radius:32px;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,126,184,.13), transparent 30%),
    rgba(255,255,255,.72);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 24px 60px rgba(164,53,108,.10);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.problem-fixed-pill{
  width:max-content;
  max-width:100%;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 14px 32px rgba(164,53,108,.08);
  color:var(--pink);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:900;
}
.problem-fixed-pill i{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-style:normal;
}
.problem-fixed-copy h2{
  margin:34px 0 0;
  max-width:560px;
  color:#2c1225;
  font-size:clamp(40px,4vw,58px);
  line-height:1.04;
  letter-spacing:-.06em;
}
.problem-fixed-copy h2 strong{
  display:block;
  color:var(--pink);
}
.problem-fixed-copy p{
  margin:22px 0 0;
  max-width:500px;
  color:var(--muted);
  font-size:17px;
  line-height:1.62;
}

.problem-fixed-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.problem-fixed-cards article{
  position:relative;
  min-height:430px;
  padding:24px 22px 24px;
  border-radius:32px;
  background:linear-gradient(180deg,#fff,#fff8fb);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 24px 60px rgba(164,53,108,.11);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.fixed-num{
  position:absolute;
  top:22px;
  left:22px;
  z-index:5;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-weight:900;
  font-size:21px;
  box-shadow:0 16px 34px rgba(232,78,155,.26);
}
.fixed-visual{
  height:190px;
  position:relative;
  margin:6px 0 18px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.fixed-phone{
  position:relative;
  width:128px;
  height:178px;
  border-radius:30px;
  background:linear-gradient(180deg,#2d2149,#76579f);
  box-shadow:0 24px 50px rgba(64,48,110,.22);
  overflow:visible;
}
.fixed-phone:before{
  content:"";
  position:absolute;
  top:16px;
  right:26px;
  width:52px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
}
.fixed-phone .moon{
  position:absolute;
  top:52px;
  left:38px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#ffe989;
  box-shadow:0 0 24px rgba(255,233,137,.46);
}
.chat-card{
  position:absolute;
  left:-30px;
  right:-30px;
  bottom:22px;
  padding:14px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 40px rgba(64,48,110,.18);
}
.chat-card b{
  display:block;
  color:#2c1225;
  font-size:11px;
}
.chat-card span{
  display:block;
  color:#2c1225;
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
}
.chat-card small{
  display:block;
  text-align:right;
  color:#9d8596;
  font-size:10px;
  margin-top:4px;
}
.time-chip{
  position:absolute;
  right:34px;
  bottom:42px;
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#fff,#fff0f7);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 18px 38px rgba(232,78,155,.20);
  font-size:24px;
}
.channel-visual{
  width:100%;
}
.dashed-path{
  position:absolute;
  inset:54px 42px 38px;
  border:2px dashed rgba(200,126,235,.25);
  border-radius:42px;
}
.channel-card{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  border-radius:22px;
  font-weight:900;
  box-shadow:0 22px 44px rgba(95,86,175,.15);
}
.channel-card.zalo{
  left:16%;
  top:20px;
  width:76px;
  height:76px;
  background:#fff;
  color:#0b94f6;
  transform:rotate(-8deg);
}
.channel-card.messenger{
  right:13%;
  top:28px;
  width:76px;
  height:76px;
  background:linear-gradient(135deg,#5079ff,#b44cff);
  color:#fff;
  transform:rotate(8deg);
}
.channel-card.web{
  left:33%;
  bottom:14px;
  width:106px;
  height:82px;
  background:#fff;
  color:var(--pink);
  transform:rotate(8deg);
}
.follow-visual-fixed{
  width:100%;
}
.mini-calendar{
  width:176px;
  height:178px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(232,78,155,.18);
  box-shadow:0 24px 52px rgba(232,78,155,.15);
  overflow:hidden;
}
.cal-top{
  height:50px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
}
.cal-body{
  padding:18px;
  display:grid;
  gap:11px;
}
.avatar-line{
  width:48px;
  height:24px;
  border-radius:999px;
  background:
    radial-gradient(circle at 12px 50%, #ffd7e8 0 9px, transparent 10px),
    linear-gradient(90deg, transparent 0 32px, #f1d6e4 32px 100%);
}
.cal-body b{
  color:#2c1225;
  font-size:12px;
  line-height:1.3;
}
.cal-body small{
  color:var(--muted);
  font-size:11px;
}
.cal-body button{
  height:38px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-weight:900;
}
.bell-chip{
  position:absolute;
  right:34px;
  top:46px;
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#fff,#fff0f7);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 18px 38px rgba(232,78,155,.20);
  font-size:26px;
}
.problem-fixed-cards h3{
  margin:0;
  color:var(--ink);
  font-size:23px;
  line-height:1.16;
  letter-spacing:-.03em;
}
.problem-fixed-cards em{
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  margin:16px 0;
  background:linear-gradient(90deg,var(--pink),rgba(232,78,155,.08));
  font-style:normal;
}
.problem-fixed-cards p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
@media(max-width:1180px){
  .problem-fixed-inner{
    grid-template-columns:1fr;
  }
  .problem-fixed-copy{
    min-height:auto;
  }
}
@media(max-width:920px){
  .problem-fixed-cards{
    grid-template-columns:1fr;
  }
  .problem-fixed-cards article{
    min-height:auto;
    display:grid;
    grid-template-columns:220px 1fr;
    column-gap:22px;
    align-items:center;
  }
  .fixed-visual{
    grid-row:1 / span 4;
    margin:0;
  }
  .problem-fixed-cards h3{
    padding-top:30px;
  }
}
@media(max-width:760px){
  .problem-fixed{
    padding:18px!important;
  }
  .problem-fixed-copy{
    padding:24px;
    border-radius:26px;
  }
  .problem-fixed-copy h2{
    font-size:36px;
  }
  .problem-fixed-copy p{
    font-size:16px;
  }
  .problem-fixed-cards article{
    grid-template-columns:1fr;
    border-radius:26px;
    padding:22px;
  }
  .fixed-visual{
    grid-row:auto;
    height:180px;
    margin:10px 0 16px;
  }
  .problem-fixed-cards h3{
    padding-top:0;
  }
}
@media(max-width:430px){
  .problem-fixed-copy h2{
    font-size:31px;
  }
  .problem-fixed-cards h3{
    font-size:21px;
  }
  .channel-card.zalo{left:8%}
  .channel-card.messenger{right:6%}
  .channel-card.web{left:26%}
}


/* Visual Pilot section */
.pilot-visual{
  position:relative;
  overflow:hidden;
  padding:36px!important;
  background:
    radial-gradient(circle at 10% 100%, rgba(255,126,184,.16), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,203,227,.34), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,248,252,.82));
}
.pilot-visual *{box-sizing:border-box}
.pilot-shell{
  display:grid;
  grid-template-columns:minmax(320px,1.05fr) minmax(320px,1fr) minmax(280px,.72fr);
  gap:22px;
  align-items:stretch;
}
.pilot-copy,
.pilot-highlights,
.pilot-cta-card{
  border-radius:30px;
  border:1px solid rgba(232,78,155,.14);
  background:linear-gradient(180deg,#fff,#fff8fb);
  box-shadow:0 20px 52px rgba(164,53,108,.10);
}
.pilot-copy{
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,126,184,.10), transparent 30%),
    linear-gradient(180deg,#fff,#fff8fb);
}
.pilot-kicker{
  color:var(--pink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
}
.pilot-copy h2{
  margin:16px 0 0;
  color:var(--ink);
  font-size:clamp(34px,3.4vw,54px);
  line-height:1.05;
  letter-spacing:-.05em;
  max-width:540px;
}
.pilot-copy p{
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  max-width:560px;
}
.pilot-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}
.pilot-chip-row span{
  height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 10px 24px rgba(164,53,108,.06);
  color:#6f5a68;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
}
.pilot-highlights{
  padding:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.pilot-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(232,78,155,.10);
}
.pilot-item i{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:26px;
  background:linear-gradient(180deg,#fff0f7,#fff);
  box-shadow:0 14px 28px rgba(232,78,155,.11);
}
.pilot-item strong{
  display:block;
  color:var(--ink);
  font-size:18px;
  line-height:1.28;
}
.pilot-item p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.pilot-cta-card{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:center;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,126,184,.10), transparent 22%),
    linear-gradient(180deg,#fff,#fff8fb);
}
.pilot-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.pilot-status b{
  color:var(--ink);
  font-size:18px;
}
.pilot-status span{
  height:32px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#f1fff9;
  border:1px solid rgba(24,215,157,.18);
  color:#18b37a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pilot-preview-stack{
  display:grid;
  gap:12px;
}
.pilot-preview-line{
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(232,78,155,.10);
}
.pilot-preview-line small{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.pilot-preview-line strong{
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
}
.pilot-preview-arrow{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin:0 auto;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-weight:900;
  box-shadow:0 14px 28px rgba(232,78,155,.22);
}
.pilot-cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:900;
  box-shadow:0 18px 36px rgba(232,78,155,.22);
}
.pilot-note{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
@media (max-width:1180px){
  .pilot-shell{grid-template-columns:1fr 1fr}
  .pilot-cta-card{grid-column:1 / -1}
}
@media (max-width:860px){
  .pilot-visual{padding:20px!important}
  .pilot-shell{grid-template-columns:1fr}
  .pilot-copy,.pilot-highlights,.pilot-cta-card{border-radius:24px}
  .pilot-copy{padding:24px}
  .pilot-copy h2{font-size:36px}
  .pilot-copy p{font-size:16px}
}
@media (max-width:520px){
  .pilot-copy h2{font-size:32px}
  .pilot-item{grid-template-columns:50px 1fr;padding:14px}
  .pilot-item i{width:50px;height:50px;border-radius:16px;font-size:22px}
  .pilot-item strong{font-size:17px}
}


/* Visual FAQ section */
.faq-visual{
  position:relative;
  overflow:hidden;
  padding:36px!important;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,126,184,.14), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(255,214,231,.46), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,248,252,.80));
}
.faq-visual *{box-sizing:border-box}
.faq-visual-layout{
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(0,1.34fr);
  gap:24px;
  align-items:stretch;
}
.faq-visual-copy{
  position:relative;
  min-height:520px;
  padding:34px;
  border-radius:32px;
  background:
    radial-gradient(circle at 16% 86%, rgba(255,126,184,.13), transparent 30%),
    linear-gradient(180deg,#fff,#fff8fb);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 24px 60px rgba(164,53,108,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.faq-visual-copy:before{
  content:"?";
  position:absolute;
  right:-26px;
  top:-42px;
  color:rgba(232,78,155,.07);
  font-size:230px;
  font-weight:900;
  line-height:1;
}
.faq-kicker{
  width:max-content;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.14);
  color:var(--pink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  box-shadow:0 14px 32px rgba(164,53,108,.08);
}
.faq-visual-copy h2{
  position:relative;
  z-index:1;
  margin:24px 0 0;
  max-width:520px;
  color:#2c1225;
  font-size:clamp(42px,4.4vw,64px);
  line-height:1.02;
  letter-spacing:-.06em;
}
.faq-visual-copy p{
  position:relative;
  z-index:1;
  max-width:470px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.62;
}
.faq-mini-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:74px 1fr;
  gap:14px;
  align-items:center;
  margin-top:34px;
  padding:18px;
  border-radius:26px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 18px 44px rgba(164,53,108,.10);
}
.faq-bot-orb{
  width:74px;
  height:74px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-size:23px;
  font-weight:900;
  box-shadow:0 18px 36px rgba(232,78,155,.24);
}
.faq-chat-preview b,
.faq-chat-preview span{
  display:block;
}
.faq-chat-preview b{
  color:var(--ink);
  font-size:18px;
}
.faq-chat-preview span{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.faq-visual-list{
  display:grid;
  gap:14px;
  align-content:center;
}
.faq-visual-list details{
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#fff9fc);
  border:1px solid rgba(232,78,155,.15);
  box-shadow:0 18px 44px rgba(164,53,108,.09);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.faq-visual-list details:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 54px rgba(164,53,108,.13);
}
.faq-visual-list summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:58px 1fr 42px;
  gap:14px;
  align-items:center;
  min-height:88px;
  padding:18px 22px;
}
.faq-visual-list summary::-webkit-details-marker{
  display:none;
}
.faq-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#fff0f7,#fff);
  border:1px solid rgba(232,78,155,.12);
  font-size:25px;
  box-shadow:0 14px 30px rgba(232,78,155,.11);
}
.faq-visual-list summary strong{
  color:var(--ink);
  font-size:22px;
  line-height:1.22;
  letter-spacing:-.025em;
}
.faq-visual-list summary i{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff0f7;
  border:1px solid rgba(232,78,155,.14);
  position:relative;
}
.faq-visual-list summary i:before,
.faq-visual-list summary i:after{
  content:"";
  position:absolute;
  width:14px;
  height:3px;
  border-radius:999px;
  background:var(--pink);
  transition:.2s ease;
}
.faq-visual-list summary i:after{
  transform:rotate(90deg);
}
.faq-visual-list details[open] summary i{
  background:linear-gradient(135deg,var(--pink),var(--pink2));
}
.faq-visual-list details[open] summary i:before,
.faq-visual-list details[open] summary i:after{
  background:#fff;
}
.faq-visual-list details[open] summary i:after{
  transform:rotate(0deg);
  opacity:0;
}
.faq-answer{
  padding:0 22px 22px 94px;
}
.faq-answer p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
  max-width:860px;
}
.faq-visual .faq-list{
  display:none!important;
}
@media(max-width:1080px){
  .faq-visual-layout{
    grid-template-columns:1fr;
  }
  .faq-visual-copy{
    min-height:auto;
  }
}
@media(max-width:760px){
  .faq-visual{
    padding:18px!important;
  }
  .faq-visual-copy{
    padding:24px;
    border-radius:26px;
  }
  .faq-visual-copy h2{
    font-size:36px;
  }
  .faq-mini-panel{
    grid-template-columns:54px 1fr;
    padding:14px;
  }
  .faq-bot-orb{
    width:54px;
    height:54px;
    border-radius:18px;
    font-size:18px;
  }
  .faq-visual-list summary{
    grid-template-columns:46px 1fr 36px;
    gap:12px;
    min-height:76px;
    padding:14px;
  }
  .faq-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    font-size:20px;
  }
  .faq-visual-list summary strong{
    font-size:18px;
  }
  .faq-visual-list summary i{
    width:36px;
    height:36px;
  }
  .faq-answer{
    padding:0 14px 18px 72px;
  }
  .faq-answer p{
    font-size:15px;
  }
}
@media(max-width:430px){
  .faq-visual-copy h2{
    font-size:31px;
  }
  .faq-visual-list summary{
    grid-template-columns:1fr 34px;
  }
  .faq-icon{
    display:none;
  }
  .faq-answer{
    padding:0 14px 18px;
  }
}


/* Visual lead section */
.lead-visual{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(320px,.92fr) minmax(420px,1.08fr);
  gap:24px;
  align-items:stretch;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,126,184,.12), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,214,231,.44), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,252,.88));
}
.lead-visual *{box-sizing:border-box}
.lead-visual-copy{
  position:relative;
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lead-kicker{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  width:max-content;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.14);
  color:var(--pink)!important;
  box-shadow:0 12px 30px rgba(164,53,108,.08);
}
.lead-visual-copy h2{
  margin:18px 0 0;
  max-width:620px;
  font-size:clamp(40px,4.5vw,64px);
  line-height:1.02;
  letter-spacing:-.055em;
  color:#2d1525;
}
.lead-visual-copy h2 strong{
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead-visual-copy p{
  max-width:620px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}
.lead-visual-points{
  display:grid;
  gap:12px;
  margin-top:28px;
}
.lead-visual-points article{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:14px;
  align-items:start;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 18px 36px rgba(164,53,108,.08);
}
.lead-visual-points i{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-style:normal;
  font-size:24px;
  background:linear-gradient(180deg,#fff0f7,#fff);
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 14px 28px rgba(232,78,155,.10);
}
.lead-visual-points b{
  display:block;
  color:var(--ink);
  font-size:18px;
  line-height:1.2;
}
.lead-visual-points span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  text-transform:none!important;
  letter-spacing:0!important;
}
.lead-visual-ticket{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:14px;
  align-items:center;
  margin-top:24px;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,244,249,.94));
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 22px 44px rgba(164,53,108,.10);
}
.ticket-orb{
  width:74px;
  height:74px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-size:24px;
  font-weight:900;
  box-shadow:0 18px 36px rgba(232,78,155,.22);
}
.ticket-copy small{
  display:block;
  color:var(--pink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ticket-copy b{
  display:block;
  margin-top:6px;
  color:var(--ink);
  font-size:18px;
  line-height:1.35;
}
.ticket-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.ticket-tags span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.12);
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:800;
  text-transform:none!important;
  letter-spacing:0!important;
}
.lead-form-panel{
  position:relative;
  padding:22px;
  border-radius:32px;
  background:linear-gradient(180deg,#ffffff,#fff7fb);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 26px 56px rgba(164,53,108,.12);
}
.lead-panel-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:18px;
}
.lead-panel-head small{
  display:block;
  color:var(--pink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.lead-panel-head h3{
  margin:8px 0 0;
  color:var(--ink);
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.04em;
}
.lead-head-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.lead-head-badges span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#fff0f7;
  border:1px solid rgba(232,78,155,.12);
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:800;
  text-transform:none!important;
  letter-spacing:0!important;
}
.lead-form{
  display:grid;
  gap:14px;
}
.lead-form-grid.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.lead-form label{
  display:grid;
  gap:8px;
}
.lead-form label span{
  color:var(--ink);
  font-size:13px;
  font-weight:800;
}
.lead-form input,
.lead-form select{
  height:56px;
  border:1px solid rgba(232,78,155,.16);
  background:#fff;
  border-radius:18px;
  padding:0 18px;
  color:var(--ink);
  font-size:16px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lead-form input:focus,
.lead-form select:focus{
  border-color:rgba(232,78,155,.52);
  box-shadow:0 0 0 4px rgba(232,78,155,.10);
}
.lead-submit-row{
  display:grid;
  grid-template-columns:minmax(220px,280px) 1fr;
  gap:14px;
  align-items:center;
  margin-top:4px;
}
.lead-form button{
  height:58px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-weight:900;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 20px 36px rgba(232,78,155,.24);
}
.lead-inline-note{
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(232,78,155,.12);
}
.lead-inline-note b,
.lead-inline-note span{
  display:block;
}
.lead-inline-note b{
  color:var(--ink);
  font-size:14px;
}
.lead-inline-note span{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  text-transform:none!important;
  letter-spacing:0!important;
}
.lead-visual .form-note{
  margin:0;
  color:var(--muted);
  font-size:12px!important;
}
@media(max-width:1120px){
  .lead-visual{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .lead-visual-copy{
    padding:0;
  }
  .lead-visual-copy h2{
    font-size:36px;
  }
  .lead-panel-head,
  .lead-submit-row,
  .lead-form-grid.two-col{
    grid-template-columns:1fr;
    display:grid;
  }
  .lead-head-badges{
    justify-content:flex-start;
  }
  .lead-form-panel{
    padding:18px;
    border-radius:24px;
  }
  .lead-visual-points article,
  .lead-visual-ticket{
    grid-template-columns:1fr;
  }
  .ticket-orb{
    width:60px;
    height:60px;
    border-radius:18px;
    font-size:20px;
  }
}
@media(max-width:430px){
  .lead-visual-copy h2{
    font-size:32px;
  }
  .lead-visual-points article{
    padding:14px;
  }
  .lead-form input,
  .lead-form select,
  .lead-form button{
    height:52px;
    font-size:15px;
  }
  .lead-panel-head h3{
    font-size:24px;
  }
}


/* Final polish: typography, rhythm, package visual, responsive QA */
:root{
  --soft-card: rgba(255,255,255,.86);
  --pink-soft: rgba(232,78,155,.12);
}
body{
  letter-spacing:-.012em;
}
main{
  width:min(1220px,calc(100vw - 28px));
}
.section{
  margin-top:26px;
}
.section h2,
.hero h1,
.lead h2{
  text-wrap:balance;
}
.section p,
.lead p,
.hero p{
  text-wrap:pretty;
}
.btn,
.nav-btn,
.package-card a,
.pilot-cta-btn,
.lead-form button{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover,
.nav-btn:hover,
.package-card a:hover,
.pilot-cta-btn:hover,
.lead-form button:hover{
  transform:translateY(-2px);
}

/* Package / pricing visual */
.package-visual{
  position:relative;
  overflow:hidden;
  padding:36px!important;
  background:
    radial-gradient(circle at 8% 100%, rgba(255,126,184,.18), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,214,231,.46), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,248,252,.86));
}
.package-visual *{
  box-sizing:border-box;
}
.package-header{
  max-width:860px;
  margin:0 auto 28px;
  text-align:center;
}
.package-kicker{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.14);
  color:var(--pink)!important;
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.14em!important;
  font-weight:900!important;
  box-shadow:0 14px 30px rgba(164,53,108,.08);
}
.package-header h2{
  margin:16px auto 0;
  color:var(--ink);
  font-size:clamp(36px,4vw,58px);
  line-height:1.04;
  letter-spacing:-.06em;
}
.package-header p{
  margin:16px auto 0;
  max-width:720px;
  color:var(--muted);
  font-size:17px;
  line-height:1.62;
}
.package-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  align-items:stretch;
}
.package-card{
  position:relative;
  flex:1 1 300px;
  max-width:360px;
  min-height:560px;
  padding:24px;
  border-radius:30px;
  background:linear-gradient(180deg,#fff,#fff8fb);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 24px 60px rgba(164,53,108,.11);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.package-card:before{
  content:"";
  position:absolute;
  right:-58px;
  top:-58px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,126,184,.18),transparent 68%);
  pointer-events:none;
}
.package-card.featured{
  border-color:rgba(232,78,155,.36);
  box-shadow:0 30px 76px rgba(232,78,155,.18);
  transform:translateY(-8px);
}
.popular-badge{
  position:absolute;
  top:18px;
  right:18px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 14px 28px rgba(232,78,155,.24);
}
.package-label{
  display:inline-flex;
  width:max-content;
  min-height:34px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:#fff0f7;
  border:1px solid rgba(232,78,155,.13);
  color:var(--pink)!important;
  font-size:11px!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  font-weight:900!important;
}
.package-top h3{
  margin:18px 0 0;
  color:var(--ink);
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.045em;
}
.package-top p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size:15.5px;
}
.package-price{
  margin:22px 0 0;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(232,78,155,.12);
}
.package-price b{
  display:block;
  color:var(--pink);
  font-size:34px;
  line-height:1;
  letter-spacing:-.05em;
}
.package-price span{
  display:block;
  margin-top:8px;
  color:var(--muted)!important;
  font-size:13px!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-weight:800!important;
}
.package-card ul{
  display:grid;
  gap:12px;
  padding:0;
  margin:22px 0 0;
  list-style:none;
}
.package-card li{
  position:relative;
  padding-left:28px;
  color:var(--muted);
  line-height:1.45;
  font-size:15px;
}
.package-card li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff0f7;
  color:var(--pink);
  font-size:12px;
  font-weight:900;
}
.package-card a{
  margin-top:auto;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 18px 36px rgba(232,78,155,.22);
}
.package-card:not(.featured) a{
  background:#fff;
  color:var(--pink);
  border:1px solid rgba(232,78,155,.18);
  box-shadow:0 14px 30px rgba(164,53,108,.08);
}
.package-bottom-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}
.package-bottom-strip span{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(232,78,155,.12);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(164,53,108,.06);
}

/* Final responsive QA fixes */
@media(max-width:1180px){
  main{
    width:min(1120px,calc(100vw - 24px));
  }
  .package-grid{
    grid-template-columns:1fr;
  }
  .package-card,
  .package-card.featured{
    min-height:auto;
    transform:none;
  }
  .package-card ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
  }
}
@media(max-width:900px){
  .hero-visualized,
  .clean-hero,
  .lead-visual,
  .faq-visual-layout,
  .problem-fixed-inner{
    grid-template-columns:1fr!important;
  }
  .command-grid{
    grid-template-columns:1fr!important;
  }
  .command-side{
    grid-template-columns:1fr!important;
  }
  .premium-demo-grid{
    grid-template-columns:1fr!important;
  }
  .solution-flow-cards{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:760px){
  main{
    width:min(100vw - 18px,94vw);
  }
  .section,
  .lead,
  .package-visual,
  .faq-visual,
  .pilot-visual,
  .problem-fixed{
    padding:18px!important;
    border-radius:24px!important;
  }
  .package-header h2{
    font-size:34px;
  }
  .package-header p{
    font-size:15.5px;
  }
  .package-card{
    padding:20px;
    border-radius:24px;
  }
  .package-top h3{
    font-size:26px;
  }
  .package-card ul{
    grid-template-columns:1fr;
  }
  .package-price b{
    font-size:30px;
  }
  .lead-form-grid.two-col{
    grid-template-columns:1fr!important;
  }
  .lead-submit-row{
    grid-template-columns:1fr!important;
  }
  .lead-visual-copy h2,
  .faq-visual-copy h2,
  .problem-fixed-copy h2{
    font-size:34px!important;
  }
  .hero-copy-compact h1{
    font-size:38px!important;
  }
  .hero-right-tabs{
    grid-template-columns:repeat(3,1fr)!important;
  }
  .hero-right-tabs button{
    font-size:12px!important;
    min-height:44px!important;
  }
}
@media(max-width:430px){
  main{
    width:calc(100vw - 14px);
  }
  .package-visual,
  .faq-visual,
  .lead-visual,
  .problem-fixed{
    padding:14px!important;
  }
  .package-header h2{
    font-size:30px;
  }
  .package-card{
    padding:18px;
  }
  .package-bottom-strip{
    justify-content:flex-start;
  }
  .lead-visual-points article,
  .lead-visual-ticket,
  .faq-mini-panel{
    grid-template-columns:1fr!important;
  }
  .phone{
    max-width:100%!important;
  }
}


/* Premium header + footer redesign */
.nav-premium{
  position:sticky;
  top:14px;
  z-index:80;
  width:min(1220px,calc(100vw - 28px));
  min-height:66px;
  padding:10px 12px 10px 14px;
  border-radius:24px;
  /* Opaque so the floating nav looks identical on every page (no see-through to the page bg) */
  background:#fdf4f9;
  border:1px solid rgba(232,78,155,.14);
  box-shadow:
    0 18px 44px rgba(164,53,108,.10),
    inset 0 1px 0 rgba(255,255,255,.80);
  backdrop-filter:blur(20px);
}
.brand-premium{
  min-width:150px;
}
.brand-premium img{
  height:52px;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.brand-premium span{
  font-size:19px;
  letter-spacing:-.03em;
}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,240,247,.55);
  border:1px solid rgba(232,78,155,.08);
}
.nav-links a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  border-radius:999px;
  color:#6d5567!important;
  text-decoration:none;
  white-space:nowrap;
  font-weight:800;
  font-size:13px!important;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a:hover{
  background:#fff;
  color:var(--pink)!important;
  transform:translateY(-1px);
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-link-soft{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  color:var(--pink);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 10px 22px rgba(164,53,108,.06);
}
.nav-premium .nav-btn{
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  box-shadow:0 14px 30px rgba(232,78,155,.24);
}

/* Footer */
.footer-premium{
  width:min(1220px,calc(100vw - 28px));
  margin:28px auto 30px;
  padding:0;
  display:block;
  color:var(--muted);
  border-radius:34px;
  background:
    radial-gradient(circle at 10% 100%, rgba(255,126,184,.18), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,214,231,.42), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,248,252,.86));
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 24px 70px rgba(164,53,108,.12);
  overflow:hidden;
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(420px,1.2fr) minmax(280px,.78fr);
  gap:24px;
  padding:32px;
}
.footer-brand-col p{
  margin:16px 0 0;
  max-width:360px;
  color:var(--muted);
  line-height:1.62;
  font-size:15px;
}
.footer-brand img{
  height:46px;
}
.footer-brand span{
  font-size:22px;
}
.footer-socials{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.footer-socials a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(232,78,155,.12);
  color:var(--pink);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.footer-links h4{
  margin:0 0 12px;
  color:var(--ink);
  font-size:15px;
  letter-spacing:-.01em;
}
.footer-links a{
  display:block;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  line-height:1.6;
  margin:8px 0;
  transition:color .2s ease, transform .2s ease;
}
.footer-links a:hover{
  color:var(--pink);
  transform:translateX(2px);
}
.footer-cta-card{
  padding:22px;
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#fff7fb);
  border:1px solid rgba(232,78,155,.14);
  box-shadow:0 18px 44px rgba(164,53,108,.10);
}
.footer-cta-card span{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:#fff0f7;
  color:var(--pink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.footer-cta-card h3{
  margin:14px 0 0;
  color:var(--ink);
  font-size:24px;
  line-height:1.14;
  letter-spacing:-.04em;
}
.footer-cta-card p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.footer-cta-card a{
  margin-top:18px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 16px 32px rgba(232,78,155,.22);
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 32px;
  border-top:1px solid rgba(232,78,155,.10);
  background:rgba(255,255,255,.48);
}
.footer-bottom p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.footer-bottom div{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.footer-bottom a{
  color:var(--pink);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}

@media(max-width:1120px){
  .nav-premium{
    width:min(100vw - 24px,1120px);
  }
  .nav-links{
    gap:2px;
  }
  .nav-links a{
    padding:0 9px;
    font-size:12px!important;
  }
  .footer-main{
    grid-template-columns:1fr;
  }
  .footer-links{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:820px){
  /* nav layout on mobile is owned entirely by the .bv-burger dropdown block below */
  .nav-premium{
    top:8px;
    border-radius:20px;
  }
  .footer-premium{
    width:min(100vw - 18px,94vw);
    border-radius:26px;
  }
  .footer-main{
    padding:24px;
  }
  .footer-links{
    grid-template-columns:1fr;
  }
  .footer-bottom{
    display:grid;
    padding:18px 24px;
  }
}
@media(max-width:430px){
  .nav-premium{
    width:calc(100vw - 14px);
    padding:9px;
  }
  .brand-premium{
    min-width:auto;
  }
  .brand-premium img{
    height:36px;
  }
  .brand-premium span{
    font-size:17px;
  }
  .nav-premium .nav-btn{
    min-height:40px;
    padding:0 14px;
    font-size:13px;
  }
  .nav-links a{
    min-height:36px;
    padding:0 10px;
  }
  .footer-main{
    padding:20px;
  }
  .footer-cta-card{
    padding:18px;
  }
  .footer-cta-card h3{
    font-size:21px;
  }
}


/* =========================================================
   FINAL MOBILE-FIRST RESPONSIVE PASS
   Goal: make the whole landing page stable and comfortable
   on 360px–430px mobile, tablet, and desktop.
   ========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}
body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img,
svg,
video,
canvas{
  max-width:100%;
}
*{
  min-width:0;
}
main,
footer,
.nav-premium{
  max-width:100%;
}

/* Global rhythm */
main{
  width:min(1220px,calc(100vw - 28px));
}
.hero,
.section,
.lead,
.footer-premium{
  scroll-margin-top:110px;
}
.section,
.lead,
.package-visual,
.faq-visual,
.pilot-visual,
.problem-fixed{
  isolation:isolate;
}

/* Tablet and below */
@media(max-width:1024px){
  main{
    width:min(100vw - 24px, 960px);
  }

  .nav-premium{
    width:calc(100vw - 24px);
    left:auto;
    right:auto;
  }

  .hero-visualized,
  .clean-hero,
  .lead-visual,
  .problem-fixed-inner,
  .faq-visual-layout,
  .pilot-shell,
  .package-grid,
  .footer-main{
    grid-template-columns:1fr!important;
  }

  .hero-copy-compact,
  .demo-card.hero-command,
  .section,
  .lead,
  .package-visual,
  .faq-visual,
  .pilot-visual,
  .problem-fixed,
  .footer-premium{
    border-radius:28px!important;
  }

  .command-grid,
  .premium-demo-grid,
  .solution-flow-cards,
  .workflow-visual,
  .problem-fixed-cards{
    grid-template-columns:1fr!important;
  }

  .command-side{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto!important;
  }

  .conversion-map{
    grid-column:1 / -1;
  }

  .industry-nav{
    display:flex!important;
    overflow-x:auto;
    gap:10px;
    padding:2px 2px 8px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .industry-nav::-webkit-scrollbar{
    display:none;
  }
  .industry-nav button{
    flex:0 0 min(220px,62vw);
    scroll-snap-align:start;
  }

  .package-card,
  .package-card.featured{
    min-height:auto;
    transform:none!important;
  }
}

/* Mobile: 768 and below */
@media(max-width:768px){
  :root{
    --shadow:0 18px 44px rgba(164,53,108,.10);
  }

  body{
    background:
      radial-gradient(circle at 50% -10%, rgba(255,126,184,.22), transparent 32%),
      linear-gradient(180deg,#fff4fa,#fff);
  }

  main{
    width:calc(100vw - 18px);
  }

  /* nav layout on mobile is owned entirely by the .bv-burger dropdown block below */
  .nav-premium{
    top:8px;
    width:calc(100vw - 18px);
    min-height:auto;
    padding:8px;
    border-radius:20px!important;
  }
  .brand-premium{
    gap:8px;
  }
  .brand-premium img{
    height:34px!important;
    padding:4px;
  }
  .brand-premium span{
    font-size:16px!important;
  }

  .hero,
  .section,
  .lead,
  .package-visual,
  .faq-visual,
  .pilot-visual,
  .problem-fixed{
    margin-top:16px!important;
  }

  .hero-copy-compact,
  .demo-card.hero-command,
  .section,
  .lead,
  .package-visual,
  .faq-visual,
  .pilot-visual,
  .problem-fixed{
    padding:18px!important;
    border-radius:24px!important;
  }

  /* Hero left */
  .hero-copy-compact{
    min-height:auto!important;
  }
  .compact-hero-head{
    display:block!important;
    margin-top:18px!important;
  }
  .compact-orb{
    display:none!important;
  }
  .hero-copy-compact h1{
    font-size:clamp(34px,10.5vw,44px)!important;
    line-height:1.04!important;
    letter-spacing:-.055em!important;
    margin-top:14px!important;
  }
  .hero-copy-compact p{
    font-size:15px!important;
    line-height:1.58!important;
    margin-top:14px!important;
  }
  .compact-flow{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:18px!important;
  }
  .compact-flow article{
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:42px 1fr!important;
    gap:0 12px!important;
    align-items:center!important;
    padding:13px!important;
    border-radius:18px!important;
  }
  .compact-flow article:before,
  .compact-flow article:after{
    display:none!important;
  }
  .compact-flow i{
    width:40px!important;
    height:40px!important;
    grid-row:1 / span 2;
  }
  .compact-flow b{
    margin-top:0!important;
    font-size:15px!important;
  }
  .compact-flow span{
    grid-column:2!important;
    margin-top:2px!important;
    font-size:12px!important;
  }
  .compact-result-card{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:14px!important;
    margin-top:12px!important;
    border-radius:18px!important;
  }
  .result-copy b{
    font-size:15px!important;
  }
  .result-mini-stats{
    justify-content:flex-start!important;
  }
  .compact-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:16px!important;
  }
  .compact-actions .btn{
    width:100%!important;
    min-height:50px!important;
  }

  /* Hero right / demo */
  .hero-right-tabs{
    grid-template-columns:repeat(3,1fr)!important;
    padding:5px!important;
    gap:5px!important;
    border-radius:18px!important;
  }
  .hero-right-tabs button{
    min-height:40px!important;
    border-radius:14px!important;
    font-size:11.5px!important;
    padding:0 6px!important;
  }
  .hero-right-tabs button span{
    display:none;
  }
  .hero-right-subtitle{
    align-items:center!important;
  }
  .hero-right-subtitle small{
    font-size:10px!important;
  }
  .hero-right-subtitle strong{
    font-size:16px!important;
  }
  .command-grid{
    gap:14px!important;
  }
  .command-phone-zone{
    min-height:auto!important;
  }
  .command-phone-zone .phone,
  .phone{
    width:100%!important;
    max-width:370px!important;
    height:560px!important;
    border-radius:26px!important;
    margin:0 auto!important;
  }
  .floating-kpi{
    display:none!important;
  }
  .command-side{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .conversion-map,
  .command-crm,
  .insight-strip{
    border-radius:20px!important;
    padding:14px!important;
  }
  .map-title b{
    font-size:17px!important;
  }
  .map-node{
    padding:9px!important;
    border-radius:14px!important;
  }
  .map-node i{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
  }

  /* Problem */
  .problem-fixed-copy{
    padding:20px!important;
    min-height:auto!important;
  }
  .problem-fixed-copy h2{
    font-size:clamp(30px,9vw,36px)!important;
    line-height:1.08!important;
  }
  .problem-fixed-copy p{
    font-size:15px!important;
  }
  .problem-fixed-cards article{
    display:block!important;
    min-height:auto!important;
    padding:18px!important;
    border-radius:22px!important;
  }
  .fixed-num{
    width:48px!important;
    height:48px!important;
    font-size:18px!important;
  }
  .fixed-visual{
    height:160px!important;
    width:200px!important;
    max-width:100%!important;
    margin:8px auto 14px!important;
  }
  .problem-fixed-cards h3{
    padding-top:0!important;
    font-size:20px!important;
  }

  /* Solution / workflow */
  .solution-flow-cards article{
    min-height:auto!important;
    grid-template-columns:56px 1fr!important;
    padding:16px!important;
    border-radius:22px!important;
  }
  .solution-flow-cards article:after,
  .workflow-connector{
    display:none!important;
  }
  .solution-icon{
    width:56px!important;
    height:56px!important;
    border-radius:18px!important;
    font-size:24px!important;
  }
  .visual-step{
    min-height:auto!important;
    padding:24px 16px 16px!important;
  }
  .step-visual{
    height:128px!important;
  }
  .workflow-bottom-note{
    width:100%!important;
    border-radius:18px!important;
    align-items:flex-start!important;
  }

  /* Industry demo */
  .industry-nav button{
    flex-basis:155px!important;
    max-width:155px!important;
    min-width:155px!important;
  }
  .zalo-shell{
    width:100%!important;
    max-width:370px!important;
    height:560px!important;
    border-radius:26px!important;
  }
  .industry-copy-card,
  .industry-crm,
  .industry-flow{
    border-radius:20px!important;
  }
  .industry-flow{
    grid-template-columns:1fr!important;
  }

  /* Package / FAQ / Lead */
  .package-header h2,
  .faq-visual-copy h2,
  .lead-visual-copy h2{
    font-size:clamp(30px,8.8vw,36px)!important;
    line-height:1.08!important;
  }
  .package-card{
    padding:18px!important;
    border-radius:22px!important;
  }
  .package-top h3{
    font-size:24px!important;
  }
  .package-price b{
    font-size:28px!important;
  }
  .faq-visual-copy,
  .lead-form-panel{
    padding:18px!important;
    border-radius:22px!important;
  }
  .faq-mini-panel,
  .lead-visual-ticket,
  .lead-visual-points article{
    grid-template-columns:1fr!important;
  }
  .faq-visual-list summary{
    grid-template-columns:1fr 34px!important;
    min-height:auto!important;
    padding:14px!important;
  }
  .faq-icon{
    display:none!important;
  }
  .faq-answer{
    padding:0 14px 16px!important;
  }
  .lead-form-grid.two-col,
  .lead-submit-row{
    grid-template-columns:1fr!important;
  }
  .lead-panel-head{
    display:grid!important;
  }
  .lead-head-badges{
    justify-content:flex-start!important;
  }
  .lead-form input,
  .lead-form select,
  .lead-form button{
    height:50px!important;
    font-size:14px!important;
    border-radius:15px!important;
  }

  /* Footer */
  .footer-premium{
    width:calc(100vw - 18px)!important;
    margin-top:18px!important;
    border-radius:24px!important;
  }
  .footer-main{
    grid-template-columns:1fr!important;
    padding:20px!important;
    gap:18px!important;
  }
  .footer-links{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .footer-cta-card{
    padding:18px!important;
    border-radius:20px!important;
  }
  .footer-bottom{
    display:grid!important;
    padding:16px 20px!important;
  }
}

/* Small mobile: 430 and below */
@media(max-width:430px){
  main{
    width:calc(100vw - 14px);
  }
  .nav-premium{
    width:calc(100vw - 14px)!important;
  }
  .section,
  .lead,
  .hero-copy-compact,
  .demo-card.hero-command,
  .package-visual,
  .faq-visual,
  .pilot-visual,
  .problem-fixed{
    padding:14px!important;
    border-radius:20px!important;
  }
  .eyebrow,
  .compact-kicker,
  .package-kicker,
  .faq-kicker,
  .lead-kicker{
    font-size:10px!important;
    letter-spacing:.07em!important;
  }
  .phone,
  .command-phone-zone .phone,
  .zalo-shell{
    height:520px!important;
  }
  .chat-head,
  .zalo-header{
    min-height:auto!important;
  }
  .msg-text,
  .zalo-msg-text{
    font-size:10.5px!important;
  }
  .composer,
  .zalo-composer{
    min-height:48px!important;
  }
  .fixed-phone{
    transform:scale(.88);
  }
  .mini-calendar{
    transform:scale(.88);
  }
  .channel-card{
    transform:scale(.88)!important;
  }
  .channel-card.zalo{
    left:7%!important;
  }
  .channel-card.messenger{
    right:4%!important;
  }
  .channel-card.web{
    left:27%!important;
  }
  .package-bottom-strip{
    justify-content:flex-start!important;
  }
}

/* Very small devices */
@media(max-width:370px){
  .hero-copy-compact h1{
    font-size:32px!important;
  }
  .phone,
  .command-phone-zone .phone,
  .zalo-shell{
    height:500px!important;
  }
  .hero-right-tabs button{
    font-size:10.5px!important;
  }
  .nav-premium .nav-btn{
    padding:0 10px!important;
  }
}


/* =========================================================
   Layout hotfixes - based on QA screenshots (mobile-first)
   ========================================================= */

/* Header CTA: avoid clipped text and keep buttons vertically centered */
.nav-premium .nav-btn,
.nav-link-soft{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  line-height:1.08 !important;
  overflow:visible !important;
}
.nav-premium .nav-btn{
  padding-top:2px !important;
  padding-bottom:2px !important;
}

/* Workflow step badges and top area: no clipping */
.visual-workflow,
.workflow-visual{
  overflow:visible !important;
}
.workflow-visual{
  padding-top:18px !important;
}

/* Workflow channel pills: readable text instead of clipped circles */
.channel-row{
  flex-wrap:wrap;
  gap:8px !important;
}
.channel-row i{
  width:auto !important;
  min-width:0 !important;
  height:38px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  font-size:12px !important;
  letter-spacing:-.01em;
}

/* Workflow follow-up illustration: keep bubbles inside card */
.follow-visual{
  align-items:flex-start !important;
  justify-content:center !important;
  height:auto !important;
  min-height:146px;
}
.timeline{
  width:100% !important;
  max-width:170px;
  gap:10px !important;
}
.timeline:before{
  left:18px !important;
  top:18px !important;
  bottom:18px !important;
}
.timeline div{
  gap:10px !important;
  padding:0 !important;
  align-items:flex-start !important;
}
.timeline i{
  width:36px !important;
  height:36px !important;
  font-size:14px !important;
}
.timeline span{
  padding:10px 12px !important;
  border-radius:16px !important;
  font-size:12px !important;
  line-height:1.25 !important;
  max-width:124px;
}

/* Problem cards: decorative chips must not cover text */
.fixed-visual{
  overflow:visible !important;
}
.fixed-phone{
  width:122px !important;
  height:170px !important;
}
.chat-card{
  left:-8px !important;
  right:-8px !important;
  bottom:10px !important;
  padding:12px 14px 10px !important;
}
.chat-card b{
  font-size:10.5px !important;
}
.chat-card span{
  margin-top:5px !important;
  padding-right:34px !important;
  font-size:10.8px !important;
  line-height:1.38 !important;
}
.time-chip,
.bell-chip{
  z-index:4 !important;
  width:52px !important;
  height:52px !important;
  font-size:20px !important;
  right:10px !important;
}
.time-chip{
  top:76px !important;
  bottom:auto !important;
}
.bell-chip{
  top:46px !important;
}
.channel-visual{
  min-height:182px;
}
.channel-card{
  font-size:11px !important;
}
.channel-card.zalo{
  left:10% !important;
  top:18px !important;
  width:72px !important;
  height:72px !important;
}
.channel-card.messenger{
  right:9% !important;
  top:22px !important;
  width:72px !important;
  height:72px !important;
}
.channel-card.web{
  left:28% !important;
  bottom:16px !important;
  width:100px !important;
  height:76px !important;
}
.mini-calendar{
  width:164px !important;
  height:172px !important;
}
.cal-body{
  padding:16px !important;
  gap:10px !important;
}
.cal-body b{
  font-size:11.5px !important;
}

/* Lead form select arrow: keep visible on small screens */
.lead-form select{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:46px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M2 2.25L7 7.25L12 2.25' stroke='%23412A39' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
  background-size:14px 10px !important;
}

@media (max-width: 760px){
  .nav-premium .nav-btn{
    min-height:42px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .visual-step{
    min-height:auto !important;
    padding:84px 18px 18px !important;
    overflow:hidden !important;
  }
  .step-badge{
    top:16px !important;
    left:16px !important;
    width:52px !important;
    height:52px !important;
    border-radius:50% !important;
  }
  .step-visual{
    margin-top:0 !important;
    margin-bottom:14px !important;
    min-height:126px !important;
    height:auto !important;
  }
  .problem-fixed-cards article{
    overflow:hidden !important;
  }
}

@media (max-width: 430px){
  .nav-premium .nav-btn{
    min-height:40px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    font-size:13px !important;
  }
  .channel-row i{
    height:36px !important;
    padding:0 12px !important;
    font-size:11px !important;
  }
  .timeline{
    max-width:100% !important;
  }
  .timeline span{
    max-width:none !important;
    flex:1;
  }
  .problem-fixed-cards article{
    padding:20px 18px !important;
  }
  .fixed-visual{
    height:168px !important;
    width:188px !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .fixed-num{
    top:14px !important;
    left:14px !important;
    width:54px !important;
    height:54px !important;
    font-size:18px !important;
  }
  .fixed-phone{
    width:116px !important;
    height:164px !important;
  }
  .chat-card{
    left:-6px !important;
    right:-6px !important;
  }
  .time-chip{
    right:8px !important;
    top:72px !important;
    width:46px !important;
    height:46px !important;
    font-size:18px !important;
  }
  .channel-card.zalo,
  .channel-card.messenger{
    width:68px !important;
    height:68px !important;
  }
  .channel-card.web{
    width:94px !important;
    height:72px !important;
    left:25% !important;
  }
  .bell-chip{
    width:50px !important;
    height:50px !important;
    right:8px !important;
    top:42px !important;
    font-size:20px !important;
  }
  .mini-calendar{
    width:156px !important;
    height:168px !important;
  }
}


/* =========================================================
   iPhone 17 Pro visual system for both live chat mockups
   Applies to: #phone and #industryPhone
   ========================================================= */

.iphone17-pro{
  position:relative!important;
  isolation:isolate;
  border-radius:46px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  outline:1px solid rgba(232,78,155,.16);
  box-shadow:
    0 36px 88px rgba(164,53,108,.18),
    0 16px 44px rgba(91,69,119,.12),
    inset 0 0 0 8px rgba(255,255,255,.72),
    inset 0 0 0 10px rgba(245,236,246,.76)!important;
  background:#fff!important;
  overflow:hidden!important;
}

/* titanium frame glow */
.iphone17-pro:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.88),
    inset 0 0 0 11px rgba(255,246,251,.70),
    inset 0 -18px 38px rgba(232,78,155,.045);
}

/* dynamic island */
.iphone17-pro:after{
  content:"";
  position:absolute;
  z-index:42;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  width:112px;
  height:31px;
  border-radius:999px;
  background:
    radial-gradient(circle at 78% 50%, #1c1c1f 0 5px, transparent 6px),
    linear-gradient(180deg,#0c0c10,#1c1c21);
  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 1px rgba(255,255,255,.10);
  pointer-events:none;
}

.iphone17-pro .phone-status,
.iphone17-pro .zalo-status{
  position:relative;
  z-index:35;
  min-height:52px!important;
  height:52px!important;
  flex-basis:52px!important;
  padding:12px 32px 0!important;
  background:#fff!important;
  font-size:12px!important;
}
.iphone17-pro .phone-status b,
.iphone17-pro .zalo-status b{
  font-size:15px!important;
  letter-spacing:-.02em;
}
.iphone17-pro .phone-status span,
.iphone17-pro .zalo-status span{
  font-size:12px!important;
  font-weight:900;
}

/* Better iOS-like chat header */
.iphone17-pro .chat-head,
.iphone17-pro .zalo-header{
  position:relative;
  z-index:5;
  min-height:76px!important;
  height:76px!important;
  flex-basis:76px!important;
  padding:12px 20px!important;
}
.iphone17-pro.phone.messenger .chat-head{
  background:#fff!important;
  border-bottom:1px solid #eef2f6!important;
}
.iphone17-pro.phone.zalo .chat-head,
.iphone17-pro.phone.widget .chat-head,
.iphone17-pro .zalo-header{
  background:linear-gradient(135deg,#1398f2,#18bde8)!important;
}
.iphone17-pro .back,
.iphone17-pro .zalo-back{
  font-size:34px!important;
  font-weight:600!important;
  line-height:1!important;
}
.iphone17-pro .avatar,
.iphone17-pro .zalo-avatar{
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  font-size:20px!important;
}
.iphone17-pro .chat-left b,
.iphone17-pro .zalo-left b{
  font-size:18px!important;
  line-height:1.08;
  max-width:220px!important;
}
.iphone17-pro .chat-left small,
.iphone17-pro .zalo-left small{
  font-size:12px!important;
  margin-top:4px;
}
.iphone17-pro .chat-actions,
.iphone17-pro .zalo-actions{
  font-size:24px!important;
}

/* Chat canvas and bubbles */
.iphone17-pro .chat-area,
.iphone17-pro .zalo-chat{
  background:#edf5ff!important;
  padding:16px 18px!important;
  gap:10px!important;
}
.iphone17-pro.phone.messenger .chat-area{
  background:#fff!important;
}
.iphone17-pro .date,
.iphone17-pro .zalo-date{
  font-size:11px!important;
  color:#788392!important;
  margin:7px auto 10px!important;
}
.iphone17-pro .msg,
.iphone17-pro .zalo-msg{
  max-width:82%!important;
  padding:11px 13px!important;
  border-radius:18px!important;
  box-shadow:0 4px 14px rgba(54,76,105,.05)!important;
}
.iphone17-pro .msg-row.user .msg,
.iphone17-pro .zalo-msg-row.user .zalo-msg{
  border-bottom-right-radius:7px!important;
}
.iphone17-pro .msg-row.ai .msg,
.iphone17-pro .zalo-msg-row.ai .zalo-msg{
  border-bottom-left-radius:7px!important;
}
.iphone17-pro .msg-text,
.iphone17-pro .zalo-msg-text{
  font-size:13px!important;
  line-height:1.36!important;
}
.iphone17-pro .msg small,
.iphone17-pro .zalo-msg small{
  font-size:9.5px!important;
  margin-top:5px!important;
}

/* iOS-like bottom composer */
.iphone17-pro .composer,
.iphone17-pro .zalo-composer{
  min-height:70px!important;
  height:70px!important;
  flex-basis:70px!important;
  padding:10px 18px 16px!important;
  background:#fff!important;
  border-top:1px solid #e8eef6!important;
}
.iphone17-pro .input,
.iphone17-pro .zalo-input{
  height:42px!important;
  border-radius:999px!important;
  background:#f1f4f8!important;
  border:1px solid #e7edf5!important;
  padding:0 16px!important;
  font-size:14px!important;
}
.iphone17-pro .send-active{
  width:32px!important;
  height:32px!important;
  font-size:14px!important;
}

/* Industry Zalo OA banner fits iPhone screen */
.iphone17-pro .zalo-oa-banner{
  min-height:70px!important;
  padding:14px 20px!important;
  background:#f5fbff!important;
  border-bottom:1px solid #d9ecff!important;
}
.iphone17-pro .zalo-oa-banner span,
.iphone17-pro .zalo-oa-banner b{
  font-size:13px!important;
}
.iphone17-pro .zalo-oa-banner b{
  max-width:52%;
  text-align:right;
}

/* Visible typing animation */
#typedText,
#industryTyped{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.input.typing::after,
.zalo-input.typing::after{
  content:"";
  width:2px;
  height:16px;
  display:inline-block;
  margin-left:2px;
  background:var(--pink);
  animation:blink 1s steps(1) infinite;
}
.msg.is-typing .msg-text,
.zalo-msg.is-typing .zalo-msg-text{
  white-space:pre-line;
}

/* Desktop proportions */
.command-phone-zone .iphone17-pro.phone{
  max-width:405px!important;
  height:690px!important;
}
.zalo-stage .iphone17-pro.zalo-shell{
  max-width:430px!important;
  height:720px!important;
}

/* Tablet/mobile proportions */
@media(max-width:768px){
  .command-phone-zone .iphone17-pro.phone,
  .iphone17-pro.phone{
    max-width:390px!important;
    height:640px!important;
    border-radius:42px!important;
  }
  .zalo-stage .iphone17-pro.zalo-shell,
  .iphone17-pro.zalo-shell{
    max-width:390px!important;
    height:660px!important;
    border-radius:42px!important;
  }
  .iphone17-pro:after{
    width:96px;
    height:28px;
    top:13px;
  }
  .iphone17-pro .phone-status,
  .iphone17-pro .zalo-status{
    padding-left:26px!important;
    padding-right:26px!important;
  }
  .iphone17-pro .chat-head,
  .iphone17-pro .zalo-header{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .iphone17-pro .chat-left b,
  .iphone17-pro .zalo-left b{
    max-width:165px!important;
    font-size:17px!important;
  }
  .iphone17-pro .zalo-oa-banner{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px;
    align-items:start!important;
  }
  .iphone17-pro .zalo-oa-banner b{
    max-width:100%;
    text-align:left;
  }
}

@media(max-width:430px){
  .command-phone-zone .iphone17-pro.phone,
  .iphone17-pro.phone{
    max-width:100%!important;
    height:600px!important;
  }
  .zalo-stage .iphone17-pro.zalo-shell,
  .iphone17-pro.zalo-shell{
    max-width:100%!important;
    height:620px!important;
  }
  .iphone17-pro .msg-text,
  .iphone17-pro .zalo-msg-text{
    font-size:12px!important;
  }
  .iphone17-pro .composer,
  .iphone17-pro .zalo-composer{
    min-height:64px!important;
    height:64px!important;
    flex-basis:64px!important;
  }
}


/* =========================================================
   iPhone 17 Pro Hero Polish + chat animation + mobile QA
   ========================================================= */

/* 1) More realistic iPhone Pro frame details */
.iphone17-pro{
  --iphone-edge:#fff7fc;
  --iphone-line:rgba(232,78,155,.16);
}
.iphone17-pro:before{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.95),
    inset 0 0 0 9px rgba(255,246,251,.82),
    inset 0 0 0 11px rgba(231,222,233,.42),
    inset 0 -18px 42px rgba(232,78,155,.045)!important;
}
.iphone17-pro:after{
  width:116px!important;
  height:30px!important;
  top:14px!important;
  background:
    radial-gradient(circle at 79% 50%, #2c2c31 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 65% 50%, #16161a 0 2.3px, transparent 3px),
    linear-gradient(180deg,#050508,#1d1d22)!important;
}

/* subtle side buttons */
.iphone17-pro .phone-status:before,
.iphone17-pro .zalo-status:before{
  content:"";
  position:absolute;
  left:-2px;
  top:92px;
  width:3px;
  height:72px;
  border-radius:999px;
  background:linear-gradient(180deg,#f9ddea,#fff);
  box-shadow:0 0 0 1px rgba(232,78,155,.08);
  pointer-events:none;
}
.iphone17-pro .phone-status:after,
.iphone17-pro .zalo-status:after{
  content:"";
  position:absolute;
  right:-2px;
  top:138px;
  width:3px;
  height:94px;
  border-radius:999px;
  background:linear-gradient(180deg,#f9ddea,#fff);
  box-shadow:0 0 0 1px rgba(232,78,155,.08);
  pointer-events:none;
}

/* home indicator */
.iphone17-pro .composer:after,
.iphone17-pro .zalo-composer:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  width:112px;
  height:4px;
  border-radius:999px;
  background:rgba(48,23,42,.18);
  pointer-events:none;
}
.iphone17-pro .composer,
.iphone17-pro .zalo-composer{
  position:relative;
}

/* Make hero iPhone more like a premium product render */
.hero-command .iphone17-pro.phone{
  transform:translateZ(0);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hero-command:hover .iphone17-pro.phone{
  transform:translateY(-3px);
  box-shadow:
    0 42px 100px rgba(164,53,108,.22),
    0 18px 50px rgba(91,69,119,.14),
    inset 0 0 0 8px rgba(255,255,255,.74),
    inset 0 0 0 10px rgba(245,236,246,.78)!important;
}

/* 2) Restore and polish chat animation */
@keyframes ai360BubbleIn{
  from{opacity:0; transform:translate3d(0,8px,0) scale(.985)}
  to{opacity:1; transform:translate3d(0,0,0) scale(1)}
}
@keyframes ai360CursorBlink{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}
@keyframes ai360SendPop{
  0%{transform:scale(.85); opacity:.4}
  100%{transform:scale(1); opacity:1}
}
.iphone17-pro .msg-row,
.iphone17-pro .zalo-msg-row{
  animation:ai360BubbleIn .32s cubic-bezier(.2,.8,.2,1) both!important;
}
.iphone17-pro .msg.is-typing .msg-text:after,
.iphone17-pro .zalo-msg.is-typing .zalo-msg-text:after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:2px;
  vertical-align:-.12em;
  background:var(--pink);
  border-radius:999px;
  animation:ai360CursorBlink .9s steps(1) infinite;
}
.iphone17-pro .input.typing,
.iphone17-pro .zalo-input.typing{
  box-shadow:0 0 0 4px rgba(232,78,155,.08);
  border-color:rgba(232,78,155,.26)!important;
}
.iphone17-pro .send-active{
  animation:ai360SendPop .18s ease both;
}
.iphone17-pro .dots i{
  animation:dot .9s infinite ease-in-out!important;
}
.iphone17-pro .dots i:nth-child(2){animation-delay:.13s!important}
.iphone17-pro .dots i:nth-child(3){animation-delay:.26s!important}

/* Better chat content density for hero */
.hero-command .iphone17-pro .chat-area{
  min-height:0!important;
}
.hero-command .iphone17-pro .msg{
  word-break:normal;
  overflow-wrap:break-word;
}
.hero-command .iphone17-pro .booking{
  border-radius:16px!important;
  padding:11px 12px!important;
}
.hero-command .iphone17-pro .booking b{
  font-size:13px!important;
}
.hero-command .iphone17-pro .booking div{
  font-size:11px!important;
}

/* 3) Hero responsive QA */
@media(max-width:1180px){
  .hero-visualized{
    grid-template-columns:1fr!important;
  }
  .hero-copy-compact{
    min-height:auto!important;
  }
  .hero-command{
    overflow:hidden!important;
  }
  .command-grid{
    grid-template-columns:minmax(280px,420px) minmax(280px,1fr)!important;
    align-items:center!important;
  }
  .command-phone-zone{
    justify-content:center!important;
  }
}

@media(max-width:920px){
  .command-grid{
    grid-template-columns:1fr!important;
  }
  .command-side{
    grid-template-columns:1fr!important;
  }
  .floating-kpi{
    display:none!important;
  }
  .hero-command .iphone17-pro.phone{
    margin-inline:auto!important;
  }
}

@media(max-width:768px){
  .hero-copy-compact{
    padding:20px!important;
  }
  .hero-copy-compact h1{
    font-size:clamp(34px,10vw,42px)!important;
    line-height:1.04!important;
  }
  .hero-copy-compact p{
    font-size:15px!important;
    line-height:1.58!important;
  }
  .compact-flow{
    grid-template-columns:1fr!important;
  }
  .compact-result-card{
    grid-template-columns:1fr!important;
  }
  .compact-actions{
    grid-template-columns:1fr!important;
  }

  .hero-command{
    padding:14px!important;
  }
  .hero-right-tabs{
    grid-template-columns:repeat(3,1fr)!important;
    gap:5px!important;
  }
  .hero-right-tabs button{
    min-height:42px!important;
    font-size:11.5px!important;
    padding-inline:5px!important;
  }
  .hero-right-tabs button span{
    display:none!important;
  }
  .hero-right-subtitle{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:10px!important;
  }

  .command-phone-zone .iphone17-pro.phone,
  .hero-command .iphone17-pro.phone{
    width:100%!important;
    max-width:390px!important;
    height:640px!important;
    border-radius:42px!important;
  }
  .hero-command .iphone17-pro .phone-status{
    height:50px!important;
    min-height:50px!important;
    flex-basis:50px!important;
  }
  .hero-command .iphone17-pro .chat-head{
    height:72px!important;
    min-height:72px!important;
    flex-basis:72px!important;
  }
  .hero-command .iphone17-pro .chat-area{
    padding:14px!important;
  }
  .hero-command .iphone17-pro .composer{
    height:64px!important;
    min-height:64px!important;
    flex-basis:64px!important;
  }
}

@media(max-width:430px){
  .hero-copy-compact,
  .hero-command{
    border-radius:22px!important;
  }
  .hero-command{
    padding:12px!important;
  }
  .command-phone-zone .iphone17-pro.phone,
  .hero-command .iphone17-pro.phone{
    height:590px!important;
    max-width:100%!important;
  }
  .iphone17-pro:after{
    width:86px!important;
    height:25px!important;
    top:12px!important;
  }
  .hero-command .iphone17-pro .phone-status{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .hero-command .iphone17-pro .chat-left b{
    max-width:145px!important;
    font-size:16px!important;
  }
  .hero-command .iphone17-pro .chat-left small{
    font-size:11px!important;
  }
  .hero-command .iphone17-pro .chat-actions{
    font-size:19px!important;
  }
  .hero-command .iphone17-pro .msg{
    max-width:86%!important;
    padding:9px 11px!important;
  }
  .hero-command .iphone17-pro .msg-text{
    font-size:11.6px!important;
  }
  .hero-command .iphone17-pro .input{
    height:38px!important;
    font-size:13px!important;
  }
}

@media(max-width:370px){
  .command-phone-zone .iphone17-pro.phone,
  .hero-command .iphone17-pro.phone{
    height:560px!important;
  }
  .hero-command .iphone17-pro .chat-area{
    padding:11px!important;
  }
  .hero-command .iphone17-pro .msg-text{
    font-size:11px!important;
  }
  .hero-command .iphone17-pro .composer>span{
    font-size:11px!important;
  }
}


/* ===== Visualized Solution Section ===== */
.solution-visualized{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.94));
}
.solution-visualized:before,
.solution-visualized:after{
  content:"";
  position:absolute;
  inset:auto;
  border-radius:999px;
  pointer-events:none;
  filter:blur(34px);
  opacity:.45;
}
.solution-visualized:before{
  width:260px;height:260px;left:-60px;top:-60px;
  background:radial-gradient(circle at center, rgba(233,96,163,.18), rgba(233,96,163,0));
}
.solution-visualized:after{
  width:280px;height:280px;right:-60px;bottom:-80px;
  background:radial-gradient(circle at center, rgba(120,92,255,.12), rgba(120,92,255,0));
}
.solution-header{
  max-width:920px;
  margin:0 auto 18px;
  text-align:center;
  position:relative;
  z-index:1;
}
.solution-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(232,78,155,.16);
  box-shadow:0 8px 24px rgba(164,53,108,.08);
  color:var(--pink);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.solution-header h2{
  margin:14px 0 10px;
  font-size:clamp(34px,5vw,64px);
  line-height:.98;
  letter-spacing:-.04em;
}
.solution-desc{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}
.solution-top-strip{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:22px auto 28px;
  position:relative;
  z-index:1;
}
.solution-top-strip span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 10px 24px rgba(164,53,108,.06);
  color:var(--muted-dark, var(--text));
  font-size:14px;
  font-weight:700;
}
.solution-top-strip b{color:var(--text)}
.solution-visual-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.solution-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:22px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,247,251,.9));
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 18px 46px rgba(149,64,112,.08);
}
.solution-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,rgba(232,78,155,.16),rgba(232,78,155,.04));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.solution-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.solution-icon-box{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:26px;
  background:linear-gradient(180deg,rgba(245,221,236,.9),rgba(255,255,255,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 28px rgba(164,53,108,.08);
}
.solution-card-head small{
  display:block;
  margin-bottom:4px;
  color:var(--pink);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.solution-card h3{
  margin:0;
  font-size:20px;
  line-height:1.12;
}
.solution-card>p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;
  line-height:1.72;
}
.solution-mini-visual{
  position:relative;
  margin-top:auto;
  min-height:190px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(248,237,244,.68),rgba(255,255,255,.96));
  border:1px solid rgba(232,78,155,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 16px 36px rgba(157,76,121,.08);
}
.chat-pricing-visual{
  padding:16px;
}
.chat-pricing-visual .bubble{
  max-width:85%;
  border-radius:18px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.45;
  box-shadow:0 12px 24px rgba(107,39,85,.07);
}
.chat-pricing-visual .ask-bubble{
  margin-left:auto;
  color:#355071;
  background:linear-gradient(180deg,rgba(217,232,251,.95),rgba(204,224,249,.88));
}
.chat-pricing-visual .answer-bubble{
  margin-top:12px;
  background:rgba(255,255,255,.98);
}
.chat-pricing-visual .answer-bubble em{
  display:block;
  font-style:normal;
  font-weight:800;
  color:var(--pink);
  margin-bottom:8px;
}
.chat-pricing-visual .answer-bubble span{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.chat-pricing-visual .answer-bubble span+span{margin-top:6px}
.chat-pricing-visual .answer-bubble b{color:var(--text)}
.price-chip{
  position:absolute;
  left:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#ef66a8,#d54eb6);
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 12px 26px rgba(214,77,162,.28);
}
.booking-visual-card{padding:16px;min-height:215px!important}
.booking-sheet{
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 30px rgba(109,35,88,.08);
}
.booking-sheet-top{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  margin-bottom:10px;
}
.booking-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  padding:8px 0;
  border-top:1px solid rgba(66,30,53,.08);
}
.booking-row span{color:var(--muted)}
.booking-row b{white-space:nowrap;color:var(--text)}
.time-pill{
  position:absolute;
  right:14px;
  bottom:14px;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(232,78,155,.16);
  color:var(--pink);
  font-weight:800;
  box-shadow:0 12px 26px rgba(214,77,162,.12);
}
.crm-visual-card{padding:16px}
.crm-profile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 26px rgba(117,40,95,.08);
}
.crm-avatar{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#ef66a8,#ff9bc9);color:#fff;font-weight:800;font-size:20px;
}
.crm-meta strong{display:block;font-size:16px}
.crm-meta span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.crm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.crm-tags i{
  display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;
  background:rgba(255,255,255,.88);border:1px solid rgba(232,78,155,.12);font-style:normal;
  color:var(--text);font-size:12px;font-weight:700;
}
.crm-line{margin-top:14px;height:12px;border-radius:999px;background:linear-gradient(90deg,rgba(239,102,168,.65),rgba(122,157,255,.35));opacity:.65}
.followup-visual-card{padding:16px}
.follow-card-ui{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:rgba(255,255,255,.98);
  box-shadow:0 12px 28px rgba(112,38,92,.08);
}
.follow-dot{
  width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,#ffd9ea,#fff);position:relative;
}
.follow-dot:before{content:"";position:absolute;inset:11px;border-radius:50%;background:linear-gradient(135deg,#ef66a8,#ffb98b)}
.follow-content b{display:block;font-size:15px;line-height:1.25}
.follow-content span{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.follow-badge{
  margin-top:12px;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.88);border:1px solid rgba(232,78,155,.14);color:var(--text);font-size:12px;font-weight:800;
}
.follow-arrow{
  position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ef66a8,#d54eb6);color:#fff;font-size:22px;box-shadow:0 14px 28px rgba(214,77,162,.22);
}
.solution-bottom-note{
  position:relative;
  z-index:1;
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,245,250,.9));
  border:1px solid rgba(232,78,155,.12);
  box-shadow:0 14px 34px rgba(164,53,108,.06);
}
.note-orb{
  width:54px;height:54px;border-radius:20px;flex:0 0 54px;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9) 0 18%, rgba(255,255,255,.25) 19%, transparent 20%),
             linear-gradient(135deg,#f174ad,#d65fcb 55%,#9cc9ff);
  box-shadow:0 14px 26px rgba(214,77,162,.18);
}
.solution-bottom-note p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.solution-bottom-note b{color:var(--text)}
@keyframes floatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.solution-card:nth-child(2) .solution-mini-visual,
.solution-card:nth-child(4) .solution-mini-visual{animation:floatSoft 4.8s ease-in-out infinite}
.solution-card:nth-child(1) .price-chip,
.solution-card:nth-child(3) .crm-avatar{animation:floatSoft 5.5s ease-in-out infinite}
@media(max-width:1180px){
  .solution-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .solution-header h2{font-size:36px;line-height:1.02}
  .solution-desc{font-size:15px;line-height:1.7}
  .solution-top-strip{justify-content:flex-start;gap:10px;margin:18px 0 22px}
  .solution-top-strip span{font-size:12px;padding:0 12px;min-height:36px}
  .solution-visual-grid{grid-template-columns:1fr;gap:14px}
  .solution-card{min-height:auto;padding:18px;border-radius:24px}
  .solution-card h3{font-size:22px}
  .solution-card>p{font-size:15px;margin-bottom:14px}
  .solution-mini-visual{min-height:170px;border-radius:20px}
  .solution-bottom-note{align-items:flex-start;padding:16px;border-radius:20px}
  .note-orb{width:46px;height:46px;flex-basis:46px;border-radius:16px}
}


/* Bilingual VI / EN language switch */
.lang-switch{
  display:inline-flex;align-items:center;gap:4px;height:42px;padding:4px;border-radius:999px;
  background:rgba(255,240,247,.72);border:1px solid rgba(232,78,155,.14);
  box-shadow:0 10px 22px rgba(164,53,108,.06)
}
.lang-switch button,.lang-switch a{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  width:38px;height:32px;border:0;border-radius:999px;background:transparent;color:#7a6273;
  font-size:12px;font-weight:900;letter-spacing:.04em;cursor:pointer
}
.lang-switch button.active,.lang-switch a.active{
  background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;
  box-shadow:0 8px 18px rgba(232,78,155,.20)
}
.live-lang-switch{flex:0 0 auto}
@media(max-width:820px){.nav-actions .lang-switch{order:-1}}
@media(max-width:520px){.lang-switch{height:38px;padding:3px}.lang-switch button,.lang-switch a{width:34px;height:30px;font-size:11px}}

/* ===== Pricing coverflow ===== */
.coverflow{
  position:relative;
  margin-top:34px;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.coverflow-track{
  position:relative;
  width:100%;
  max-width:1100px;
  height:580px;
  margin:0 auto;
}
.coverflow .package-card{
  position:absolute;
  top:10px;
  left:50%;
  width:340px;
  max-width:78vw;
  margin-left:-170px;
  height:540px;
  min-height:0;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .4s ease, box-shadow .45s ease;
  will-change:transform,opacity;
  cursor:pointer;
  backface-visibility:hidden;
}
/* In the coverflow the card height is fixed: the feature list flexes and
   clips (with a soft fade) while the CTA stays pinned to the bottom. The
   full list lives in the detail modal, which scrolls. */
.coverflow .package-card ul{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:8px;
  margin-bottom:14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,78,155,.4) transparent;
  overscroll-behavior:contain;
}
.coverflow .package-card ul::-webkit-scrollbar{width:6px}
.coverflow .package-card ul::-webkit-scrollbar-track{background:transparent}
.coverflow .package-card ul::-webkit-scrollbar-thumb{background:rgba(232,78,155,.38);border-radius:999px}
.coverflow .package-card ul::-webkit-scrollbar-thumb:hover{background:rgba(232,78,155,.6)}
.coverflow .package-card.cf-hidden{opacity:0;pointer-events:none}
.coverflow .package-card.cf-active{cursor:zoom-in}
.cf-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--pink);
  font-size:30px;line-height:1;font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(164,53,108,.16);
  transition:transform .2s ease, background .2s ease;
}
.cf-nav:hover{background:#fff0f7}
.cf-nav:active{transform:translateY(-50%) scale(.94)}
.cf-prev{left:6px}
.cf-next{right:6px}

/* ===== Plan detail modal ===== */
.plan-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.plan-modal[hidden]{display:none}
.plan-modal-overlay{
  position:absolute;inset:0;
  background:rgba(48,23,42,.55);
  backdrop-filter:blur(4px);
  animation:cfFade .2s ease;
}
.plan-modal-dialog{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(420px,100%);
  max-height:88vh;
  overflow:hidden;            /* the body scrolls, not the dialog -> close stays put */
  background:linear-gradient(180deg,#fff,#fff8fb);
  border:1px solid rgba(232,78,155,.2);
  border-radius:28px;
  padding:26px 22px;
  box-shadow:0 40px 90px rgba(164,53,108,.3);
  animation:cfPop .28s cubic-bezier(.22,.61,.36,1);
}
.plan-modal-close{
  position:absolute;top:14px;right:14px;
  z-index:2;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid rgba(232,78,155,.16);
  border-radius:50%;
  background:#fff;color:var(--pink);
  font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 6px 16px rgba(164,53,108,.16);
  transition:background .2s ease;
}
.plan-modal-close:hover{background:#fff0f7}
.plan-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,78,155,.45) transparent;
}
.plan-modal-body::-webkit-scrollbar{width:7px}
.plan-modal-body::-webkit-scrollbar-track{background:transparent}
.plan-modal-body::-webkit-scrollbar-thumb{background:rgba(232,78,155,.38);border-radius:999px}
.plan-modal-body::-webkit-scrollbar-thumb:hover{background:rgba(232,78,155,.6)}
.plan-modal-body .package-card{
  position:static;width:auto;height:auto;min-height:0;margin:0;padding:0;overflow:visible;
  background:none;border:0;box-shadow:none;transform:none;
}
.plan-modal-body .package-card ul{
  flex:none;overflow:visible;
  -webkit-mask-image:none;mask-image:none;
}
.plan-modal-body .package-card:before{display:none}
.plan-modal-body .popular-badge{position:static;align-self:flex-start;margin:0 0 14px}
@keyframes cfFade{from{opacity:0}to{opacity:1}}
@keyframes cfPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

@media(max-width:640px){
  .coverflow{min-height:560px}
  .coverflow-track{height:520px}
  /* narrower card + arrows pinned to the track edges so they no longer touch the price card */
  .coverflow .package-card{width:256px;margin-left:-128px;height:500px}
  .cf-nav{width:40px;height:40px;font-size:24px}
  .cf-prev{left:0}
  .cf-next{right:0}
}

/* Channel icons in the demo tabs */
.tabs button .tab-icon{
  width:26px;height:26px;
  vertical-align:-8px;
  margin-right:9px;
}

/* ===== Auth pages (login/register) under the beauty vertical ===== */
.bv-auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 18px 60px}
.bv-auth-logo{display:flex;justify-content:center;margin-bottom:24px}
.bv-auth-logo img{height:54px;width:auto}
.bv-auth-card{width:100%;max-width:520px;background:linear-gradient(180deg,#fff,#fff8fb);border:1px solid rgba(232,78,155,.16);border-radius:30px;box-shadow:0 30px 70px rgba(164,53,108,.14);padding:clamp(26px,4vw,44px)}
.bv-auth-card h2{margin:0 0 6px;text-align:center;font-size:clamp(30px,4vw,40px);font-weight:900;letter-spacing:-.04em;background:linear-gradient(135deg,#e84e9b,#ff7eb8);-webkit-background-clip:text;background-clip:text;color:transparent}
.bv-auth-sub{text-align:center;color:#765a6d;margin:0 0 22px}
.bv-auth-form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.bv-field{position:relative}
.bv-input{width:100%;height:54px;border:1.6px solid rgba(232,78,155,.25);background:#fff;border-radius:16px;padding:0 18px;font-size:15px;color:#30172a;outline:none;transition:border-color .2s ease,box-shadow .2s ease;font-family:inherit}
.bv-input:focus{border-color:#e84e9b;box-shadow:0 0 0 4px rgba(232,78,155,.12)}
.bv-input.has-toggle{padding-right:46px}
.bv-toggle{position:absolute;top:0;bottom:0;right:14px;display:flex;align-items:center;color:#9a8190;cursor:pointer}
.bv-forgot{text-align:right;font-size:14px}
.bv-forgot a,.bv-auth-link{color:#e84e9b;text-decoration:none;font-weight:800}
.bv-forgot a:hover,.bv-auth-link:hover{text-decoration:underline}
.bv-submit{height:56px;border:0;border-radius:16px;background:linear-gradient(135deg,#e84e9b,#ff7eb8);color:#fff;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 14px 30px rgba(232,78,155,.25);position:relative;overflow:hidden;font-family:inherit}
.bv-submit:disabled{opacity:.7;cursor:not-allowed}
.bv-or{display:flex;align-items:center;gap:10px;color:#9a8190;font-size:13px;margin:20px 0 14px}
.bv-or:before,.bv-or:after{content:"";flex:1;height:1px;background:rgba(232,78,155,.16)}
.bv-social{display:flex;justify-content:center;gap:14px}
.bv-social a{width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid rgba(232,78,155,.18);display:flex;align-items:center;justify-content:center;transition:box-shadow .2s ease}
.bv-social a:hover{box-shadow:0 8px 20px rgba(164,53,108,.14)}
.bv-social img{width:24px;height:24px}
.bv-auth-foot{text-align:center;color:#765a6d;font-size:14px;margin-top:18px}
.bv-auth-note{text-align:center;color:#9a8190;font-size:13px;margin:10px 0 0}
.bv-submit.bv-outline{background:none;color:#e84e9b;border:1.6px solid rgba(232,78,155,.5);box-shadow:none}
.bv-submit.bv-outline:hover{background:rgba(232,78,155,.06)}
.bv-note{text-align:center;color:#9a8190;font-size:12px;margin-top:16px;line-height:1.5}
.bv-plan-note{margin:0 0 6px;border-radius:16px;background:#fff0f7;border:1px solid rgba(232,78,155,.2);padding:12px 16px;font-size:14px;color:#a4356c}

/* Logged-in user dropdown in the beauty header */
.bv-user{position:relative}
.bv-user>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(232,78,155,.2);color:#30172a;font-weight:800;font-size:14px;white-space:nowrap}
.bv-user>summary::-webkit-details-marker{display:none}
.bv-user>summary::marker{content:""}
.bv-user-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e84e9b,#ff7eb8);color:#fff;font-size:12px;font-weight:900;flex:0 0 auto}
.bv-user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.bv-user-caret{color:#e84e9b;font-size:11px}
.bv-user-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;background:#fff;border:1px solid rgba(232,78,155,.16);border-radius:18px;box-shadow:0 24px 60px rgba(164,53,108,.18);padding:8px;display:flex;flex-direction:column;z-index:80}
.bv-user-menu a,.bv-user-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:12px;text-decoration:none;color:#5a4150;font-size:14px;font-weight:700;background:none;border:0;cursor:pointer;font-family:inherit}
.bv-user-menu a:hover,.bv-user-menu button:hover{background:#fff0f7;color:#e84e9b}
.bv-user-logout{color:#d63864 !important;border-top:1px solid rgba(232,78,155,.12) !important;margin-top:4px;border-radius:0 0 12px 12px}

/* ===== Recolor shared marketing pages (hardcoded Tailwind blue) to the vertical brand =====
   Only loaded under a vertical, so default pages are unaffected. !important beats the
   pages' inline blue gradients. */
[class*="from-[#2D73FF]"]{--tw-gradient-from:#e84e9b var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(232 78 155 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
[class*="to-[#29A4FF]"]{--tw-gradient-to:#ff7eb8 var(--tw-gradient-to-position) !important}
[class*="from-[#DAEFFF]"]{--tw-gradient-from:#ffe0ef var(--tw-gradient-from-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
[class*="to-[#E8E9FF]"]{--tw-gradient-to:#fff0f7 var(--tw-gradient-to-position) !important}
.text-\[\#2D73FF\]{color:#e84e9b !important}
.border-\[\#0894FF\]{border-color:#e84e9b !important}
.text-blue-400,.text-blue-500,.text-blue-600{color:#e84e9b !important}
.bg-blue-500,.bg-blue-600{background-color:#e84e9b !important}
.border-blue-400{border-color:rgba(232,78,155,.45) !important}
.text-color-primary{color:#30172a !important}
.text-color-third{color:#e84e9b !important}
/* Default blue section backgrounds (inline gradients) → soft pink.
   Covers both the white→blue band (DBE5F7) and the radial blue "blobs". */
[style*="DBE5F7"],
[style*="rgba(161,193,236"],
[style*="rgba(154,188,233"],
[style*="rgba(152,187,233"],
[style*="rgba(193,214,244"],
[style*="rgba(191,216,250"]{
  background:linear-gradient(180deg,#fff 0%,#fff7fb 50%,#ffe9f3 100%) !important;
}

/* ===== Lock the shared header to render identically on every page =====
   (opaque bg + explicit colors so no page-specific stylesheet can shift it) */
.nav-premium{background:#fdf4f9 !important;backdrop-filter:none !important}
.nav-premium .nav-links{background:rgba(255,255,255,.5) !important}
.nav-premium .nav-links a{color:#6d5567 !important}
.nav-premium .nav-links a:hover,.nav-premium .nav-links a.is-active{color:#e84e9b !important}
.nav-premium .nav-link-soft{color:#e84e9b !important;background:#fff !important}
.nav-premium .nav-btn{color:#fff !important;background:linear-gradient(135deg,#e84e9b,#ff7eb8) !important}
.nav-premium .lang-switch a{color:#7a6273 !important;background:transparent !important}
.nav-premium .lang-switch a.active{color:#fff !important;background:linear-gradient(135deg,#e84e9b,#ff7eb8) !important}

/* ===== Beauty content building blocks (shared by every vertical marketing page) =====
   Use these on page overrides so all pages stay visually consistent (rounded cards,
   pink accents, ink headings). */
.bv-page{width:min(1220px,calc(100vw - 28px));margin:0 auto;padding:18px 0 48px;display:flex;flex-direction:column;gap:22px}
.bv-section{position:relative;background:linear-gradient(180deg,#fff,#fff8fb);border:1px solid rgba(232,78,155,.14);border-radius:30px;box-shadow:0 24px 60px rgba(164,53,108,.10);padding:clamp(26px,4vw,48px);overflow:hidden}
/* Hero variant: the side image bleeds flush to the bottom of the rounded card */
.bv-hero:has(.bv-split){padding-bottom:0}
.bv-hero .bv-split{align-items:end}
.bv-hero .bv-split-text{padding:clamp(8px,2vw,24px) 0 clamp(26px,4vw,48px)}
.bv-hero .bv-split img{align-self:end;border-radius:0;width:100%;max-height:560px;object-fit:contain;object-position:bottom}
.bv-section.bv-plain{background:#fff}
.bv-eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:8px 14px;border-radius:999px;background:#fff0f7;border:1px solid rgba(232,78,155,.16);color:#e84e9b;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.bv-section-title{margin:14px 0 0;color:#30172a;font-size:clamp(26px,3.4vw,42px);line-height:1.12;letter-spacing:-.03em;font-weight:900;text-transform:uppercase}
.bv-lead{margin:14px 0 0;color:#765a6d;font-size:clamp(15px,1.6vw,19px);line-height:1.6}
.bv-center{text-align:center}
.bv-center .bv-eyebrow{margin-inline:auto}
.bv-center .bv-lead{margin-inline:auto;max-width:760px}
.bv-grid{display:grid;gap:18px;margin-top:28px}
.bv-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bv-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bv-card{background:#fff;border:1px solid rgba(232,78,155,.14);border-radius:22px;box-shadow:0 14px 34px rgba(164,53,108,.08);padding:24px;text-align:center}
.bv-card img{height:120px;width:auto;object-fit:contain;margin:0 auto 6px}
.bv-card h3{margin:12px 0 8px;color:#30172a;font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.bv-card p{margin:0;color:#765a6d;line-height:1.6;font-size:15px}
.bv-list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bv-list li{position:relative;padding-left:28px;color:#5a4150;line-height:1.55;font-size:16px}
.bv-list li:before{content:"✓";position:absolute;left:0;top:0;color:#e84e9b;font-weight:900}
.bv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Direct contact channels under the landing lead form */
.lead-contact{margin-top:18px;padding:16px 18px;border-radius:18px;background:#fff0f7;border:1px solid rgba(232,78,155,.16)}
.lead-contact-title{display:block;font-weight:900;font-size:13px;letter-spacing:.02em;color:#a4356c;margin-bottom:10px}
.lead-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lead-contact-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#5a4150;line-height:1.45}
.lead-contact-list i{font-style:normal;font-size:16px;line-height:1.4}
.lead-contact-list a{color:#e84e9b;text-decoration:none;font-weight:700;word-break:break-word}
.lead-contact-list a:hover{text-decoration:underline}
.bv-btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:16px;background:linear-gradient(135deg,#e84e9b,#ff7eb8);color:#fff;font-weight:900;text-decoration:none;box-shadow:0 14px 30px rgba(232,78,155,.25);transition:transform .2s ease}
.bv-btn-primary:hover{transform:translateY(-1px)}
.bv-btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:16px;background:#fff;color:#e84e9b;border:1px solid rgba(232,78,155,.3);font-weight:900;text-decoration:none}
.bv-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.bv-split img{width:100%;border-radius:22px;display:block}
.bv-split-text h2{margin:0;color:#30172a;font-size:clamp(22px,2.6vw,34px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.bv-note{text-align:center;color:#765a6d;line-height:1.6;font-size:15px}
@media(max-width:860px){.bv-grid.cols-3,.bv-grid.cols-2,.bv-split{grid-template-columns:1fr}.bv-page{padding:16px 10px 36px}.bv-hero .bv-split img{max-height:360px}}

/* ===== Shared header: desktop inline menu / mobile hamburger dropdown ===== */
.bv-burger{display:none}
.nav-premium .bv-menu{display:flex;flex:1;align-items:center;gap:16px;min-width:0}
.nav-premium .bv-menu .nav-links{flex:1}

@media(max-width:1120px){
  .bv-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;flex:0 0 auto;padding:0 10px;cursor:pointer;
    border:0;background:transparent;
    position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2;
  }
  .bv-burger span{display:block;height:2.5px;border-radius:2px;background:#e84e9b;transition:.25s ease}
  .nav-premium.menu-open .bv-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-premium.menu-open .bv-burger span:nth-child(2){opacity:0}
  .nav-premium.menu-open .bv-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* burger is pinned right (absolute) + menu collapses (absolute) → only the logo
     stays in flow, so center it in the bar. Drop the brand's desktop min-width so
     the link shrinks to the logo's width and centers exactly (no left drift). */
  .nav-premium{display:flex !important;align-items:center;justify-content:center}
  .nav-premium .brand-premium{min-width:0;justify-content:center}

  /* menu collapses into a dropdown panel under the bar */
  .nav-premium .bv-menu{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex:none;flex-direction:column;align-items:stretch;gap:12px;
    background:#fff;border:1px solid rgba(232,78,155,.16);border-radius:22px;
    box-shadow:0 26px 60px rgba(164,53,108,.2);padding:16px;
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .28s ease,opacity .2s ease;
  }
  .nav-premium.menu-open .bv-menu{max-height:80vh;opacity:1;overflow-y:auto;pointer-events:auto}

  /* nav links stacked (override .nav nav{display:none} + the old scroll-row rule) */
  .nav-premium .bv-menu .nav-links{display:flex !important;flex-direction:column;align-items:stretch;gap:2px;background:none;border:0;padding:0;width:auto;overflow:visible;order:0 !important}
  .nav-premium .bv-menu .nav-actions{order:1}
  .nav-premium .bv-menu .nav-links a{justify-content:flex-start;min-height:44px;padding:0 14px;font-size:15px !important;border-radius:12px}
  .nav-premium .bv-menu .nav-links a:hover{background:#fff0f7}

  .nav-premium .nav-actions{flex-direction:column;align-items:stretch;gap:10px}
  .nav-premium .nav-link-soft{display:inline-flex !important;justify-content:center}
  .nav-premium .nav-btn{justify-content:center}
  .nav-premium .lang-switch{align-self:flex-start}
  .nav-premium .bv-user{width:100%}
  .nav-premium .bv-user>summary{width:100%;justify-content:flex-start}
  .nav-premium .bv-user-name{display:inline}
  .nav-premium .bv-user-menu{position:static;box-shadow:none;border:0;border-radius:12px;background:#fff7fb;margin-top:6px;min-width:0}
}

/* ===== Mobile UI fixes (#2, #4, #5) — appended last so they win source order ===== */
@media(max-width:768px){
  /* #2 lead feature cards keep icon beside text (other 1fr!important rules at
        ≤768px / ≤430px would otherwise stack them) */
  .lead-visual-points article{
    grid-template-columns:54px 1fr!important;
  }
}
@media(max-width:480px){
  /* #4 booking popup stays inside the calendar card */
  .calendar-card{
    min-height:160px;
    padding-bottom:56px;
    overflow:visible;
  }
  .booking-pop{
    right:10px!important;
    bottom:10px!important;
    min-width:0!important;
    max-width:calc(100% - 20px)!important;
  }
  /* #5 "Auto pricing" chip no longer overlaps the last price row */
  .chat-pricing-visual .answer-bubble{
    padding-bottom:54px!important;
  }
  .price-chip{
    bottom:12px!important;
    left:12px!important;
  }
}

/* =========================================================
   Demo status toast — contained inside the simulation block
   (no longer a fixed toast floating over the whole page)
   ========================================================= */
.hero-command,
.premium-demo-grid{position:relative}
.demo-toast-host{
  position:absolute;
  top:14px;
  right:14px;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  pointer-events:none;
  max-width:calc(100% - 28px);
}
.demo-toast{
  padding:9px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,#18d79d,#a1f1ca);
  color:#063521;
  font-size:12px;
  font-weight:900;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  animation:demoToastIn .25s ease forwards, demoToastOut .25s ease forwards 1.8s;
}
@keyframes demoToastIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes demoToastOut{to{opacity:0;transform:translateY(-7px)}}

/* =========================================================
   Problem cards — render the visual identically to desktop on
   mobile: a fixed 175x190 box, centered, with the inner mock at
   desktop dimensions. Overrides the earlier shrink/reposition
   mobile rules (higher specificity + !important + later in file).
   ========================================================= */
@media(max-width:768px){
  .problem-fixed-cards .fixed-visual{
    width:175px!important;
    height:190px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
  }
  .problem-fixed-cards .fixed-phone{width:122px!important;height:170px!important;transform:none!important}
  .problem-fixed-cards .chat-card{left:-8px!important;right:-8px!important;top:auto!important;bottom:10px!important;padding:12px 14px 10px!important;transform:none!important}
  .problem-fixed-cards .chat-card span{padding-right:34px!important;font-size:10.8px!important;line-height:1.38!important}
  .problem-fixed-cards .time-chip{right:10px!important;top:76px!important;bottom:auto!important;width:52px!important;height:52px!important;font-size:20px!important}
  .problem-fixed-cards .bell-chip{right:10px!important;top:46px!important;width:52px!important;height:52px!important;font-size:20px!important}
  .problem-fixed-cards .channel-card.zalo{left:10%!important;right:auto!important;top:18px!important;width:72px!important;height:72px!important;transform:rotate(-8deg)!important}
  .problem-fixed-cards .channel-card.messenger{right:9%!important;left:auto!important;top:22px!important;width:72px!important;height:72px!important;transform:rotate(8deg)!important}
  .problem-fixed-cards .channel-card.web{left:28%!important;right:auto!important;bottom:16px!important;width:100px!important;height:76px!important;transform:rotate(8deg)!important}
  .problem-fixed-cards .mini-calendar{width:164px!important;height:172px!important;transform:none!important}
}

/* =========================================================
   Live-demo phone (#phone) — stop the dynamic resize.
   ROOT CAUSE of the width "co dãn": .command-phone-zone is a grid
   with a single AUTO column, so the column sized to the phone's
   max-content. As the AI typed, the chat bubble widened -> the
   column + phone widened; a new short message shrank it again.
   Pin the column to the container width so width is content-independent.
   The height is also hard-locked (min/max) as a guarantee.
   ========================================================= */
.command-phone-zone{grid-template-columns:minmax(0,1fr)!important}
#phone.iphone17-pro{width:100%!important}
@media(max-width:768px){
  #phone.iphone17-pro{height:640px!important;min-height:640px!important;max-height:640px!important}
}
@media(max-width:430px){
  #phone.iphone17-pro{height:590px!important;min-height:590px!important;max-height:590px!important}
}
@media(max-width:370px){
  #phone.iphone17-pro{height:560px!important;min-height:560px!important;max-height:560px!important}
}

/* =========================================================
   Hide the floating reCAPTCHA v3 badge (it eats screen space,
   esp. on mobile). reCAPTCHA still runs; per Google's terms the
   required "protected by reCAPTCHA" notice is shown by the form
   instead (.recaptcha-note).
   ========================================================= */
.grecaptcha-badge{visibility:hidden!important}
.recaptcha-note{
  margin:10px 0 0;
  font-size:12px!important;
  line-height:1.45!important;
  color:var(--muted);
  opacity:.85;
}
.recaptcha-note a{
  color:var(--pink);
  text-decoration:underline;
}

/* SweetAlert2 popups on beauty pages: theme the default box with the beauty
   pink accent + rounded card. Scoped to body.beauty-landing so admin/hotel
   popups stay untouched. (Swal appends .swal2-container to <body>.) */
body.beauty-landing .swal2-popup{
  background:#fff7fb;
  color:#30172a;
  border:1px solid rgba(232,78,155,.18);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(232,78,155,.18);
}
body.beauty-landing .swal2-title{color:#c72c64;font-weight:800}
body.beauty-landing .swal2-html-container,
body.beauty-landing .swal2-content{color:#765a6d}
body.beauty-landing .swal2-actions .swal2-cancel,
body.beauty-landing .swal2-actions .swal2-confirm{
  border-radius:999px;
  font-weight:700;
}
body.beauty-landing .swal2-actions .swal2-cancel{
  background:linear-gradient(135deg,#e84e9b,#ff7eb8);
  color:#fff;
  box-shadow:0 10px 24px rgba(232,78,155,.28);
}
body.beauty-landing .swal2-icon.swal2-error{border-color:rgba(232,78,155,.45)}
body.beauty-landing .swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:#e84e9b}
body.beauty-landing .swal2-icon.swal2-success{border-color:rgba(76,205,140,.5)}

/* Reserve the scrollbar gutter so opening a modal (SweetAlert sets body
   overflow:hidden) never shifts the centered layout. Paired with
   scrollbarPadding:false in alert.js. */
html{scrollbar-gutter:stable}