/* e-demos — /demos : glass hero chooser, three staged device sections (light / dark / light), numbered rail.
   Scoped to main.demos-v3. The React islands (phones) are only framed from outside — their internals are untouched. */

/* ───────── hero ───────── */
html body main.demos-v3:not(#v2) .demos-v3-hero{padding-block:clamp(64px,7vw,116px) clamp(56px,6vw,96px)!important}
html body main.demos-v3:not(#v2) .demos-v3-hero h1{font-size:clamp(40px,6vw,98px)!important;max-width:14ch;unicode-bidi:normal!important}
html body main.demos-v3:not(#v2) .demos-v3-hero .wrap>span:first-child{background:#52e3a414!important;border:1px solid #52e3a440!important;padding:7px 14px!important;border-radius:999px;color:var(--v2-mint)!important;font-size:15px!important}
html body main.demos-v3:not(#v2) .demos-v3-hero .wrap>p{max-width:60ch;font-size:clamp(16px,1.35vw,21px)!important;line-height:1.7!important;margin-top:clamp(20px,2.4vw,32px)!important}
html body main.demos-v3:not(#v2) .demo-route-grid{margin-top:clamp(36px,5vw,72px)!important;gap:clamp(14px,1.6vw,22px)!important;counter-reset:ed}
html body main.demos-v3:not(#v2) .demo-route-grid>a{
  --mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;min-height:clamp(210px,17vw,248px);padding:clamp(22px,2.2vw,32px)!important;gap:10px!important;border-radius:var(--v2-radius)!important;
  color:#fff!important;text-decoration:none;
  background:linear-gradient(160deg,#ffffff17,#ffffff07)!important;border:1px solid #ffffff26!important;
  box-shadow:0 1px 0 #ffffff22 inset,0 40px 70px -40px #000!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  transition:transform .6s var(--v2-ease),border-color .4s,box-shadow .6s var(--v2-ease)!important;
}
html body main.demos-v3:not(#v2) .demo-route-grid>a:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(380px circle at var(--mx) var(--my),#52e3a43d,transparent 62%);opacity:0;transition:opacity .4s}
html body main.demos-v3:not(#v2) .demo-route-grid>a:hover{transform:translateY(-8px)!important;border-color:#52e3a4a0!important;box-shadow:0 1px 0 #ffffff33 inset,0 50px 80px -34px #000,0 0 60px #52e3a429!important}
html body main.demos-v3:not(#v2) .demo-route-grid>a:hover:before{opacity:1}
html body main.demos-v3:not(#v2) .demo-route-grid>a:after{content:counter(ed,decimal-leading-zero);counter-increment:ed;position:absolute;inset-inline-end:clamp(16px,1.8vw,26px);inset-block-end:-.22em;font-size:clamp(96px,9vw,150px);font-weight:800;letter-spacing:-.06em;line-height:1;color:#52e3a40f;pointer-events:none;z-index:-1;transition:transform .8s var(--v2-ease),color .4s}
html body main.demos-v3:not(#v2) .demo-route-grid>a:hover:after{transform:translateY(-12px);color:#52e3a41c}
html body main.demos-v3:not(#v2) .demo-route-grid small{font-size:14px!important;font-weight:500;color:var(--v2-mint)!important}
html body main.demos-v3:not(#v2) .demo-route-grid strong{font-size:clamp(24px,2.2vw,34px)!important;font-weight:800!important;letter-spacing:-.03em;line-height:1.12;color:#fff!important}
html body main.demos-v3:not(#v2) .demo-route-grid span{font-size:15px!important;line-height:1.6!important;color:var(--v2-on-dark-muted)!important}
html body main.demos-v3:not(#v2) .demo-route-grid i{margin-top:auto!important;display:inline-flex;align-items:center;gap:8px;font-size:15px!important;font-weight:600;color:var(--v2-mint)!important;transition:gap .4s var(--v2-ease)}
html body main.demos-v3:not(#v2) .demo-route-grid>a:hover i{gap:16px}

/* ───────── shared section type ───────── */
html body main.demos-v3:not(#v2) .section{padding-block:clamp(72px,8vw,136px)!important;position:relative}
html body main.demos-v3:not(#v2) :is(.bot-demo-copy,.voice-v3-copy,.commerce-copy)>span{
  display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;padding:7px 14px;border-radius:999px;font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--v2-green-2)!important;background:#087d430d!important;border:1px solid #087d4330!important}
html body main.demos-v3:not(#v2) :is(.bot-demo-copy,.voice-v3-copy,.commerce-copy) h2{
  font-size:clamp(34px,4.4vw,68px)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.04!important;color:var(--v2-ink)!important;margin:22px 0 clamp(20px,2.4vw,30px)!important;text-wrap:balance;unicode-bidi:normal!important}
html body main.demos-v3:not(#v2) :is(.bot-demo-copy,.voice-v3-copy,.commerce-copy) h2 :is(b,span):not(.v2-w):not(.v2-wi){color:var(--v2-green-2)!important}
html body main.demos-v3:not(#v2) :is(.bot-demo-copy,.voice-v3-copy,.commerce-copy)>p:not(.demo-boundary):not(.voice-v3-note){font-size:clamp(16px,1.3vw,20px)!important;line-height:1.75!important;color:var(--v2-muted)!important;max-width:54ch}

/* device stages: soft orb + slow dashed ring behind each device (pure decoration on the container) */
.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid){position:relative}
.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid)>*{position:relative;z-index:1}
.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):before,
.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):after{content:'';position:absolute;z-index:0;border-radius:50%;pointer-events:none;top:50%}
.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):before{width:780px;height:780px;margin-top:-390px;background:radial-gradient(circle,#52e3a42e,#52e3a410 42%,transparent 68%)}
.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):after{width:640px;height:640px;margin-top:-320px;border:1px dashed #087d4333;animation:ed-spin 90s linear infinite}
.demos-v3 .bot-demo-layout:before{inset-inline-end:-195px}.demos-v3 .bot-demo-layout:after{inset-inline-end:-125px}
.demos-v3 .voice-demo-v3:before{inset-inline-end:-8px}.demos-v3 .voice-demo-v3:after{inset-inline-end:58px}
.demos-v3 .commerce-grid:before{inset-inline-end:-30px}.demos-v3 .commerce-grid:after{inset-inline-end:40px}
@keyframes ed-spin{to{transform:rotate(360deg)}}

/* device frames */
html body main.demos-v3:not(#v2) .bot-phone{border:0!important;border-radius:36px!important;
  box-shadow:0 0 0 9px #0b1a12,0 0 0 10px #ffffff2e,0 0 0 12px #52e3a422,0 60px 110px -30px #06140d99,0 0 100px #52e3a42e!important}
html body main.demos-v3:not(#v2) .commerce-phone{border:0!important;border-radius:40px!important;
  box-shadow:0 0 0 9px #0b1a12,0 0 0 10px #ffffff2e,0 0 0 12px #52e3a422,0 60px 110px -30px #06140d99,0 0 100px #52e3a42e!important}
html body main.demos-v3:not(#v2) .voice-v3-console{border:1px solid #52e3a455!important;border-radius:32px!important;
  box-shadow:0 0 0 8px #ffffff10,0 0 0 9px #52e3a433,0 60px 120px -30px #000,0 0 130px #52e3a43d!important}

/* ───────── 01 · bot (light) ───────── */
html body main.demos-v3:not(#v2) .bot-demo-v3{background:transparent!important}
html body main.demos-v3:not(#v2) .bot-demo-facts{display:grid;gap:10px;margin-top:clamp(22px,2.4vw,34px)}
html body main.demos-v3:not(#v2) .bot-demo-facts span{display:flex;align-items:center;gap:14px;padding:14px 18px!important;font-size:15px!important;font-weight:500;color:var(--v2-text)!important;background:#fff!important;border:1px solid var(--v2-line)!important;border-radius:18px!important;box-shadow:0 18px 36px -28px #10261a55;transition:transform .5s var(--v2-ease),border-color .3s}
html body main.demos-v3:not(#v2) .bot-demo-facts span:before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--v2-mint);box-shadow:0 0 0 5px #52e3a426}
html body main.demos-v3:not(#v2) .bot-demo-facts span:hover{transform:translateX(calc(var(--e-dir,1) * -6px));border-color:#52e3a480!important}
html[dir=ltr] .demos-v3{--e-dir:-1}
html body main.demos-v3:not(#v2) :is(.demo-boundary,.voice-v3-note){position:relative;padding-inline-start:18px;font-size:14px!important;line-height:1.8!important;color:var(--v2-muted)!important}
html body main.demos-v3:not(#v2) :is(.demo-boundary,.voice-v3-note):before{content:'';position:absolute;inset-inline-start:0;top:.7em;width:7px;height:7px;border-radius:50%;background:#e0a93a}

/* ───────── 02 · voice (dark section) ───────── */
html body main.demos-v3:not(#v2) .demo-voice-section{
  background:radial-gradient(900px 520px at 85% 0%,#145833c0,transparent 64%),radial-gradient(700px 420px at 5% 110%,#0c6b4a66,transparent 62%),var(--v2-ink)!important;
  border-radius:clamp(28px,4vw,64px);color:var(--v2-on-dark);overflow:hidden;isolation:isolate;margin-block:clamp(8px,2vw,28px)}
html body main.demos-v3:not(#v2) .demo-voice-section:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(#9bf0c829 1px,transparent 1.4px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 5%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 5%,transparent 78%)}
html body main.demos-v3:not(#v2) .demo-voice-section>.wrap{position:relative;z-index:1}
html body main.demos-v3:not(#v2) .voice-v3-copy>span{color:var(--v2-mint)!important;background:#52e3a414!important;border-color:#52e3a440!important}
html body main.demos-v3:not(#v2) .voice-v3-copy h2{color:#fff!important}
html body main.demos-v3:not(#v2) .voice-v3-copy>p:not(.voice-v3-note){color:var(--v2-on-dark-muted)!important}
html body main.demos-v3:not(#v2) .voice-v3-note{color:#8aa89a!important}
html body main.demos-v3:not(#v2) .voice-prompt-list{background:linear-gradient(160deg,#ffffff14,#ffffff06)!important;border:1px solid #ffffff22!important;border-radius:24px!important;padding:clamp(20px,2vw,28px)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html body main.demos-v3:not(#v2) .voice-prompt-list b{color:#fff!important;font-weight:700}
html body main.demos-v3:not(#v2) .voice-prompt-list span{color:#d4ecdf!important;background:#52e3a40f!important;border-inline-start:3px solid var(--v2-mint)!important;border-radius:12px!important;transition:background .3s,transform .5s var(--v2-ease)}
html body main.demos-v3:not(#v2) .voice-prompt-list span:hover{background:#52e3a424!important;transform:translateX(calc(var(--e-dir,1) * -5px))}
.demos-v3 .voice-demo-v3:after{border-color:#52e3a440}
.demos-v3 .voice-demo-v3:before{background:radial-gradient(circle,#52e3a44d,#0c6b4a22 42%,transparent 68%)}

/* ───────── 03 · commerce (light) ───────── */
html body main.demos-v3:not(#v2) .whatsapp-commerce{background:linear-gradient(180deg,transparent,#eaf3ec 70%,#e4efe7)!important}
html body main.demos-v3:not(#v2) .whatsapp-commerce:before{display:none!important}
html body main.demos-v3:not(#v2) .commerce-benefits{display:grid;gap:12px;margin-top:clamp(22px,2.4vw,34px)}
html body main.demos-v3:not(#v2) .commerce-benefits article{border:1px solid var(--v2-line)!important;border-radius:22px!important;padding:18px 20px!important;background:#fff!important;box-shadow:0 22px 44px -32px #10261a66;transition:transform .6s var(--v2-ease),border-color .3s,box-shadow .6s var(--v2-ease)}
html body main.demos-v3:not(#v2) .commerce-benefits article:hover{transform:translateY(-4px);border-color:#52e3a480!important;box-shadow:0 34px 60px -34px #0f4b2466}
html body main.demos-v3:not(#v2) .commerce-benefits b{font-size:clamp(17px,1.4vw,20px)!important;font-weight:700!important;color:var(--v2-ink)!important}
html body main.demos-v3:not(#v2) .commerce-live-note{border:1px solid #087d4333!important;background:#fff!important;color:var(--v2-green)!important;box-shadow:0 14px 30px -22px #0f4b2466}

/* ───────── numbered rail + ghost numerals (JS-injected, decorative) ───────── */
.ed-ghost{position:absolute;inset-block-start:clamp(10px,2vw,30px);inset-inline-start:max(var(--v2-gutter),calc((100% - 1280px) / 2));font-size:clamp(110px,15vw,240px);font-weight:800;letter-spacing:-.07em;line-height:.8;color:#0f4b2409;pointer-events:none;user-select:none;z-index:0;will-change:transform}
.demo-voice-section .ed-ghost{color:#52e3a40d}
.ed-rail{position:fixed;inset-inline-end:22px;inset-block-start:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:0;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .5s var(--v2-ease)}
.ed-rail.on{opacity:1}
.ed-rail i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-style:normal;font-size:12px;font-weight:700;color:#5a6f62;background:#fffffff0;border:1px solid var(--v2-line);box-shadow:0 10px 24px -14px #10261a66;transition:background .5s var(--v2-ease),color .4s,border-color .4s,transform .5s var(--v2-ease)}
.ed-rail i.on{background:var(--v2-ink);color:var(--v2-mint);border-color:var(--v2-mint);transform:scale(1.18);box-shadow:0 0 0 5px #52e3a41f}
.ed-rail u{display:block;width:2px;height:28px;background:linear-gradient(var(--v2-mint) var(--f,0%),#0f4b2422 var(--f,0%));border-radius:2px}
.ed-rail.dark i:not(.on){background:#0b1a12f0;color:#9db8a9;border-color:#ffffff22}

/* ───────── CTA ───────── */
html body main.demos-v3:not(#v2) .cta{padding-block:clamp(72px,9vw,150px)!important}
html body main.demos-v3:not(#v2) .cta>.wrap{display:flex!important;align-items:center;justify-content:space-between;gap:clamp(28px,5vw,80px)}
html body main.demos-v3:not(#v2) .cta h2{font-size:clamp(32px,4.4vw,68px)!important;max-width:16ch;text-wrap:balance;margin:0 0 18px!important;unicode-bidi:normal!important}
html body main.demos-v3:not(#v2) .cta p{max-width:46ch;font-size:clamp(16px,1.3vw,20px)!important;line-height:1.7!important}
html body main.demos-v3:not(#v2) .cta .btn{white-space:nowrap;flex:none;background:var(--v2-mint)!important;border-color:var(--v2-mint)!important;color:var(--v2-ink)!important;box-shadow:0 14px 44px #52e3a444!important}

/* ───────── responsive ───────── */
@media(max-width:1100px){
  .demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):before,.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):after{display:none}
  .ed-rail{display:none}
}
@media(max-width:700px){
  html body main.demos-v3:not(#v2) .demo-route-grid>a{min-height:0}
  html body main.demos-v3:not(#v2) .cta>.wrap{flex-direction:column;align-items:flex-start}
  html body main.demos-v3:not(#v2) .bot-phone,html body main.demos-v3:not(#v2) .commerce-phone{box-shadow:0 0 0 6px #0b1a12,0 0 0 7px #ffffff2e,0 40px 80px -30px #06140d99,0 0 70px #52e3a433!important}
  .ed-ghost{font-size:120px}
}
@media(prefers-reduced-motion:reduce){.demos-v3 :is(.bot-demo-layout,.voice-demo-v3,.commerce-grid):after{animation:none}}
.demos-v3 :is(#communication-demo,#store-demo){position:relative}
html body main.demos-v3{overflow-x:clip}
html body main.demos-v3:not(#v2) :is(.bot-demo-copy,.voice-v3-copy,.commerce-copy){text-align:start!important}

/* ───────── 02 · phone voice bot (*2035) ───────── */
html body main.demos-v3:not(#v2) .voice-dial-demo .voice-v3-copy h2 bdi{color:var(--v2-mint)}
.voice-dial-demo .voice-v3-avatar{display:grid;place-items:center;color:#0a5939;animation:dial-ring 2.4s ease-out infinite}
.voice-dial-demo .voice-v3-avatar svg{width:46px;height:46px}
@keyframes dial-ring{0%{box-shadow:0 14px 35px #0d573b30,0 0 0 0 #37b47766}70%,100%{box-shadow:0 14px 35px #0d573b30,0 0 0 24px #37b47700}}
.voice-dial-demo .voice-v3-stage .voice-dial-number{margin-top:4px;font-size:clamp(40px,4.4vw,56px);font-weight:800;line-height:1.1;letter-spacing:.02em}
.voice-dial-steps{list-style:none;counter-reset:dial;display:grid;gap:10px;margin:0 20px 16px;padding:14px 16px;background:#fff;border:1px solid #e1ece4;border-radius:13px}
.voice-dial-steps li{counter-increment:dial;display:flex;align-items:center;gap:10px;color:#315b42;font-size:14px}
.voice-dial-steps li:before{content:counter(dial);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eaf7ed;color:#086547;font-size:12px;font-weight:700}
.voice-v3-controls .voice-dial-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:10px;background:#086547;color:#fff;font-size:16px;font-weight:700;text-decoration:none;transition:background .2s}
.voice-v3-controls .voice-dial-cta:hover{background:#0a5137}
.voice-v3-controls .voice-dial-cta svg{width:18px;height:18px}
.voice-dial-desktop{display:none;margin:-6px 20px 18px;color:#557266;font-size:13px;text-align:center}
@media(hover:hover) and (pointer:fine){.voice-dial-desktop{display:block}}
@media(prefers-reduced-motion:reduce){.voice-dial-demo .voice-v3-avatar,.voice-dial-demo .voice-v3-wave i{animation:none}}