/* ================= STORY (scroll-driven) ================= */
.story{padding:0;background:#0b151b;color:#fff;position:relative}
.story-track{height:calc(100vh * 7.4);height:calc(100svh * 7.4);position:relative}
.story-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.story-sticky::before{content:"";position:absolute;left:-140px;top:-120px;width:420px;height:484px;background:var(--green);clip-path:var(--hex);opacity:.9}
.story-sticky::after{content:"";position:absolute;right:-110px;bottom:-140px;width:360px;height:416px;background:var(--yellow);clip-path:var(--hex)}
.story-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center;width:min(1200px,100% - 40px);margin-inline:auto;padding-top:70px}
.story .eyebrow{color:var(--yellow)}
.stxt{position:relative;min-height:380px;margin-top:14px}
.sstep{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(26px);pointer-events:none;transition:opacity .7s,transform .7s}
.sstep.on{opacity:1;transform:none;pointer-events:auto}
.sno{display:inline-block;font:700 .78rem Inter,Cairo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#111;background:var(--yellow);padding:5px 14px;border-radius:999px;margin-bottom:16px}
.sstep h2,.sstep h3{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.12;margin:0 0 16px;color:#fff}
.sstep p{font-size:1.1rem;color:rgba(255,255,255,.84);max-width:520px}
.sstep .slinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sstep .slinks a,.sstep .slinks button{font:600 .88rem Inter,Cairo,sans-serif;padding:10px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08);cursor:pointer;transition:.2s}
.sstep .slinks a:hover,.sstep .slinks button:hover{background:var(--yellow);color:#111;border-color:var(--yellow)}
.sstep .slinks .gold{background:var(--yellow);color:#111;border-color:var(--yellow)}
.story-vis{position:relative;display:grid;place-items:center}
#bsvg{width:min(100%,560px);height:auto;max-height:calc(100svh - 110px);border-radius:28px;box-shadow:0 40px 80px -30px #000}
.sdots{position:absolute;z-index:3;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.sdots button{width:11px;height:12px;border:0;padding:0;background:rgba(255,255,255,.3);clip-path:var(--hex);cursor:pointer;transition:.3s}
.sdots button.on{background:var(--yellow);transform:scale(1.5)}
.sbar{position:absolute;z-index:3;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--green),var(--yellow));width:calc(var(--p,0) * 100%)}
.shint{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.shint i{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:drop 1.8s infinite}
.story:not([data-step="0"]) .shint{opacity:0}

/* ---------- SVG scene ---------- */
#bsvg .sky{fill:url(#skyg)}
#bsvg .bld{fill:#182732;stroke:#2d4656;stroke-width:2}
#bsvg .w{fill:#ffcf5a;opacity:.9;transition:fill .7s,opacity .7s}
#bsvg .w.off{opacity:.18}
#bsvg .roof{fill:#22343f}
#bsvg .ground{fill:#0a120e}
#bsvg .gline{stroke:#2fa836;stroke-width:3}
#bsvg .lobby{fill:#101c24;stroke:#2d4656;stroke-width:2}
#bsvg .door{fill:#7ad7ff;opacity:.5;transition:.7s}
#bsvg .ups-room{fill:#0f2218;stroke:#2fa836;stroke-width:2;transition:.7s}
#bsvg .cell{fill:#2fa836;opacity:.35;transition:.7s}
#bsvg .rod{stroke:#cfd8dc;stroke-width:3}
#bsvg .rod-tip{fill:#ffc80a}
#bsvg .hv{fill:#3a5565;stroke:#5b7a8c;stroke-width:1.5}
#bsvg .fan{transform-box:fill-box;transform-origin:center}
#bsvg .fan path{fill:none;stroke:#bfe9f5;stroke-width:2.5;stroke-linecap:round}
#bsvg .moon{fill:#e9f2f5;opacity:.9;transition:.7s}
#bsvg .sun{fill:#ffd24d;opacity:0;transition:.9s}
#bsvg .sunglow{fill:url(#sung);opacity:0;transition:.9s}
#bsvg .flowline,#bsvg .epath,#bsvg .pwr,#bsvg .escape{fill:none;stroke-linecap:round;opacity:0;transition:opacity .6s}
#bsvg .pwr{stroke:#7cff8a;stroke-width:4;stroke-dasharray:3 12}
#bsvg .epath{stroke:#ffc80a;stroke-width:4;stroke-dasharray:6 8}
#bsvg .flowline{stroke:#7ad7ff;stroke-width:4;stroke-dasharray:2 12}
#bsvg .escape{stroke:#3df06a;stroke-width:4;stroke-dasharray:8 10}
#bsvg .earth-rods line{stroke:#ffc80a;stroke-width:4;opacity:.25;transition:.7s}
#bsvg .bolt{fill:#fff7a8;opacity:0}
#bsvg .smoke circle{fill:#9aa5ab;opacity:0}
#bsvg .wave circle{fill:none;stroke:#ff3b30;stroke-width:3;opacity:0}
#bsvg .detector{fill:#ff3b30;opacity:0}
#bsvg .exitsign{fill:#2fd45a;opacity:0;transition:.6s}
#bsvg .runner{fill:#fff;opacity:0}
#bsvg .badge{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:.6s}
#bsvg .badge polygon{fill:var(--green);stroke:#fff;stroke-width:2}
#bsvg .badge use{color:#fff}
#bsvg .stars circle{fill:#fff;opacity:.55}

/* state 0 : calm */
/* state 1 : power failure -> UPS */
.story[data-step="2"] #bsvg .w{fill:#ffcf5a;opacity:.85}
.story[data-step="2"] #bsvg .w.crit{fill:#c9fbff;animation:crit 1.6s ease-in-out infinite alternate}

.story[data-step="2"] #bsvg .ups-room{fill:#164d2c;filter:drop-shadow(0 0 14px #2fa836)}
.story[data-step="2"] #bsvg .cell{opacity:1;animation:cell 1s ease-in-out infinite alternate}
.story[data-step="2"] #bsvg .pwr{opacity:1;animation:dash 1.2s linear infinite}

/* state 2 : fire */
.story[data-step="3"] #bsvg .w{fill:#2a3a45;opacity:1}
.story[data-step="3"] #bsvg .w.f{fill:#ff3b30;animation:fire .45s ease-in-out infinite alternate}
.story[data-step="3"] #bsvg .smoke circle{animation:smoke 2.8s ease-out infinite}
.story[data-step="3"] #bsvg .smoke circle:nth-child(2){animation-delay:.9s}
.story[data-step="3"] #bsvg .smoke circle:nth-child(3){animation-delay:1.8s}
.story[data-step="3"] #bsvg .wave circle{animation:wave 1.8s ease-out infinite}
.story[data-step="3"] #bsvg .wave circle:nth-child(2){animation-delay:.6s}
.story[data-step="3"] #bsvg .wave circle:nth-child(3){animation-delay:1.2s}
.story[data-step="3"] #bsvg .detector{opacity:1;animation:ping 1s ease-in-out infinite alternate}
/* state 3 : escape routes */
.story[data-step="4"] #bsvg .w{fill:#1c2c36;opacity:1}
.story[data-step="4"] #bsvg .exitsign{opacity:1;filter:drop-shadow(0 0 6px #2fd45a)}
.story[data-step="4"] #bsvg .escape{opacity:1;animation:dash 1s linear infinite}
.story[data-step="4"] #bsvg .runner{opacity:1}
.story[data-step="4"] #bsvg .door{opacity:.9;fill:#3df06a}
.story[data-step="4"] #bsvg .ups-room{fill:#164d2c}
/* state 4 : lightning + earthing */
.story[data-step="5"] #bsvg .sky{animation:skyflash 1.8s infinite}
.story[data-step="5"] #bsvg .w{fill:#ffcf5a;opacity:.5}
.story[data-step="5"] #bsvg .bolt{animation:bolt 1.8s infinite}
.story[data-step="5"] #bsvg .epath{opacity:1;animation:dash .7s linear infinite}
.story[data-step="5"] #bsvg .earth-rods line{opacity:1}
.story[data-step="5"] #bsvg .rod-tip{filter:drop-shadow(0 0 10px #ffc80a)}
/* state 5 : comfort & efficiency */
.story[data-step="1"] #bsvg .w{fill:#ffd986;opacity:.95}
.story[data-step="1"] #bsvg .w:nth-child(3n){opacity:.45}
.story[data-step="1"] #bsvg .w:nth-child(5n){opacity:.7;fill:#fff2c4}
.story[data-step="1"] #bsvg .fan{animation:spin 1.1s linear infinite}
.story[data-step="1"] #bsvg .flowline{opacity:1;animation:dash 1.4s linear infinite}
.story[data-step="1"] #bsvg .sun,.story[data-step="1"] #bsvg .sunglow{opacity:1}
.story[data-step="1"] #bsvg .moon{opacity:0}
/* state 6 : all together */
.story[data-step="6"] #bsvg .w{fill:#ffcf5a;opacity:.95}
.story[data-step="6"] #bsvg .w.off{opacity:.55}
.story[data-step="6"] #bsvg .badge{opacity:1;transform:scale(1)}
.story[data-step="6"] #bsvg .badge:nth-of-type(2){transition-delay:.12s}
.story[data-step="6"] #bsvg .badge:nth-of-type(3){transition-delay:.24s}
.story[data-step="6"] #bsvg .badge:nth-of-type(4){transition-delay:.36s}
.story[data-step="6"] #bsvg .badge:nth-of-type(5){transition-delay:.48s}
.story[data-step="6"] #bsvg .badge:nth-of-type(6){transition-delay:.6s}
.story[data-step="6"] #bsvg .fan{animation:spin 2.4s linear infinite}
.story[data-step="6"] #bsvg .door{opacity:.6}
.story[data-step="6"] #bsvg .ups-room{fill:#164d2c}
@keyframes dash{to{stroke-dashoffset:-30}}
@keyframes crit{from{opacity:.75}to{opacity:1}}
@keyframes cell{from{opacity:.55}to{opacity:1}}
@keyframes fire{from{opacity:.55}to{opacity:1}}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.7}100%{opacity:0;transform:translate(10px,-70px) scale(2.1)}}
@keyframes wave{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(3.4)}}
@keyframes ping{from{transform:scale(1)}to{transform:scale(1.5)}}
@keyframes bolt{0%,60%{opacity:0}62%{opacity:1}66%{opacity:.1}70%{opacity:1}100%{opacity:0}}
@keyframes skyflash{0%,60%{filter:none}62%,70%{filter:brightness(2.3)}100%{filter:none}}
@keyframes spin{to{transform:rotate(360deg)}}
#bsvg .smoke circle,#bsvg .wave circle,#bsvg .detector{transform-box:fill-box;transform-origin:center}

@media(max-width:900px){
  .story-track{height:calc(100svh * 7.8)}
  .story-grid{grid-template-columns:1fr;gap:6px;padding-top:70px;align-content:start}
  .story-vis{order:-1}
  #bsvg{max-height:calc(46svh)}
  .stxt{min-height:240px;margin-top:4px}
  .sstep h2,.sstep h3{font-size:1.55rem;margin-bottom:8px}
  .sstep p{font-size:.98rem}
  .sno{margin-bottom:8px}
  .sdots{right:8px}
  .story-sticky{align-items:flex-start}
  .story .eyebrow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .story-track{height:auto}.story-sticky{position:static;height:auto;display:block;padding:80px 0}
  .stxt{min-height:0}.sstep{position:static;opacity:1;transform:none;margin-bottom:34px}
  .sdots,.sbar,.shint{display:none}
  .story[data-step] #bsvg .w{fill:#ffcf5a;opacity:.9}
}
[dir=rtl] .sdots{right:auto;left:22px}
[dir=rtl] .story-sticky::before{left:auto;right:-140px}
[dir=rtl] .story-sticky::after{right:auto;left:-110px}
[dir=rtl] .sstep{text-align:right}

/* ================= CHATBOT ================= */
.cbtn{position:fixed;z-index:90;right:22px;bottom:22px;width:68px;height:76px;border:0;padding:0;cursor:pointer;background:transparent;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));transition:transform .25s}
.cbtn:hover{transform:translateY(-4px) scale(1.05)}
.cbtn .hx6{position:absolute;inset:0;clip-path:var(--hex);background:linear-gradient(145deg,#3dbb44,#1f7f26);display:grid;place-items:center;color:#fff}
.cbtn svg{width:30px;height:30px}
.cbtn .dot{position:absolute;right:6px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--yellow);border:2px solid #fff;animation:ping 1.2s ease-in-out infinite alternate}
.cbtn .tip{position:absolute;right:78px;top:50%;transform:translateY(-50%);background:#fff;color:#1b1f22;font:600 .84rem Inter,Cairo,sans-serif;padding:9px 14px;border-radius:12px;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);animation:tipin .6s .8s both}
.cbtn .tip::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-left-color:#fff;border-right:0}
.cbtn.open .tip,.cbtn.seen .tip{display:none}
@keyframes tipin{from{opacity:0;transform:translateY(-50%) translateX(10px)}to{opacity:1;transform:translateY(-50%)}}
.cpanel{position:fixed;z-index:95;right:22px;bottom:110px;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 140px));background:var(--card);color:var(--ink);border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.cpanel.on{display:flex;animation:fade .25s}
.chead{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(120deg,#1c7a24,#2fa836);color:#fff}
.chead .av{width:40px;height:44px;clip-path:var(--hex);background:#fff;display:grid;place-items:center;flex:none}
.chead .av img{width:30px;height:auto}
.chead b{font:700 1rem Sora,Cairo,sans-serif;display:block;line-height:1.2}
.chead small{font-size:.74rem;opacity:.92;display:flex;align-items:center;gap:6px}
.chead small::before{content:"";width:8px;height:8px;border-radius:50%;background:#b6ff9e}
.chead .cx{margin-inline-start:auto;background:rgba(255,255,255,.18);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer;line-height:1}
.cmsgs{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.55;animation:fade .3s}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
[dir=rtl] .msg.bot{border-bottom-left-radius:16px;border-bottom-right-radius:4px}
[dir=rtl] .msg.user{border-bottom-right-radius:16px;border-bottom-left-radius:4px}
.msg .btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.msg .btns button,.chips button{font:600 .8rem Inter,Cairo,sans-serif;border:1.5px solid var(--green);color:var(--green-d);background:transparent;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s}
.msg .btns button:hover,.chips button:hover{background:var(--green);color:#fff}
.msg .btns button.gold{background:var(--yellow);border-color:var(--yellow);color:#111}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:ping .6s ease-in-out infinite alternate}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.chips{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px 4px;background:var(--soft)}
.cform{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.cform input{flex:1;margin:0;border-radius:999px;padding:11px 16px;font-size:.92rem}
.cform button{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--green);color:#fff;cursor:pointer;display:grid;place-items:center}
.cform button svg{width:20px;height:20px}
[dir=rtl] .cform button svg{transform:scaleX(-1)}
.cnote{font-size:.68rem;color:var(--mute);text-align:center;padding:0 12px 8px;background:var(--card)}
[dir=rtl] .cbtn{right:auto;left:22px}[dir=rtl] .cpanel{right:auto;left:22px}
[dir=rtl] .cbtn .tip{right:auto;left:78px}[dir=rtl] .cbtn .tip::after{right:auto;left:-6px;border-left:0;border-right-color:#fff;border-right-width:6px;border-right-style:solid}
@media(max-width:700px){
  .cbtn{right:14px;bottom:88px;width:58px;height:66px}
  .cbtn .tip{display:none}
  .cpanel{right:8px;left:8px;width:auto;bottom:162px;height:min(520px,calc(100vh - 190px))}
  [dir=rtl] .cbtn{left:14px;right:auto}[dir=rtl] .cpanel{left:8px;right:8px}
}

/* --- v2 additions --- */
#bsvg .elight{fill:#fff;opacity:0;transition:opacity .6s}
#bsvg .elglow{fill:url(#elg);opacity:0;transition:opacity .6s}
.story[data-step="2"] #bsvg .elight,.story[data-step="4"] #bsvg .elight,.story[data-step="2"] #bsvg .elglow,.story[data-step="4"] #bsvg .elglow{opacity:1}
.story[data-step="4"] #bsvg .elglow{animation:cell 1.2s ease-in-out infinite alternate}
#bsvg .upsi{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:.6s}
#bsvg .upsi polygon{fill:#164d2c;stroke:#7cff8a;stroke-width:2}
#bsvg .upsi text{fill:#fff;font:600 13px Inter,Cairo,sans-serif;text-anchor:middle}
.story[data-step="2"] #bsvg .upsi{opacity:1;transform:scale(1)}
.story[data-step="2"] #bsvg .upsi:nth-of-type(2){transition-delay:.12s}
.story[data-step="2"] #bsvg .upsi:nth-of-type(3){transition-delay:.24s}
.story[data-step="2"] #bsvg .upsi:nth-of-type(4){transition-delay:.36s}
.story[data-step="2"] #bsvg .upsi:nth-of-type(5){transition-delay:.48s}
.story[data-step="1"] #bsvg .w:nth-child(4n){opacity:.6}
.story[data-step="1"] #bsvg .moon{opacity:0}
.story[data-step="4"] #bsvg .w{fill:#1c2c36;opacity:1}

.skip-story{position:absolute;z-index:4;top:98px;right:26px;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:var(--yellow);color:#111;font:700 .86rem Inter,Cairo,sans-serif;box-shadow:0 10px 28px -10px rgba(0,0,0,.6);transition:.25s}
.skip-story:hover{transform:translateY(-2px);filter:brightness(1.06)}
[dir=rtl] .skip-story{right:auto;left:26px}
@media(max-width:900px){.skip-story{top:76px;right:12px;padding:8px 14px;font-size:.78rem}[dir=rtl] .skip-story{right:auto;left:12px}}
@media(prefers-reduced-motion:reduce){.skip-story{position:static;display:inline-flex;margin:0 20px 20px}}