/* Scene 2: AI in action (ivory). 1600x900 stage, pinned while the channel sequence scrolls.
   Layout in stage units; the orb artwork (design/orb_light.py) expects the incoming card's right
   edge at x=712 and the lead card's left edge at x=1186. Move those together. */
.scene2-track{position:relative;height:calc(100vh + 6 * 70vh);background:#F3F0EA}
.scene2{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center;color:#142629}

/* soft studio ivory with light falling from the top right */
.s2-plate{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(60% 55% at 58% 60%,rgba(255,255,255,.95),transparent 70%),
  radial-gradient(40% 70% at 100% 30%,rgba(214,222,222,.7),transparent 70%),
  radial-gradient(35% 60% at 0% 40%,rgba(222,226,224,.6),transparent 70%),
  linear-gradient(180deg,#F6F3ED 0%,#EEEAE3 70%,#F4F1EB 100%)}
.beam{position:absolute;top:-20%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:rotate(18deg);filter:blur(18px)}
.beam-1{right:14%;width:160px}.beam-2{right:4%;width:90px;opacity:.7}.beam-3{right:24%;width:60px;opacity:.5}

.orb-light{position:absolute;left:0;top:0;width:1600px;height:900px}
.orb-light #l-halo{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite}
.orb-light .drift{animation:drift 11s ease-in-out infinite alternate}
.orb-light .drift.slow{animation-duration:14s;animation-direction:alternate-reverse}
.orb-light .fil.pulse{stroke-dasharray:70 520;animation:flow var(--dur,7s) linear infinite;animation-delay:var(--delay,0s)}
.orb-light .glint{opacity:0;animation:glint 6s ease-in-out infinite}

/* copy */
.s2-copy{position:absolute;left:250px;top:38px;width:620px}
.s2-copy .eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#142629}
.s2-copy .eyebrow i{width:40px;height:1px;background:#142629;opacity:.45}
.s2-copy h2{font-size:54px;line-height:1.04;letter-spacing:-.03em;font-weight:600;margin-top:18px}
.s2-copy h2 .teal{color:#0F5B5E}
.s2-copy .hl{display:inline-block;white-space:nowrap;transition:opacity .35s,transform .35s}
.s2-copy .hl.swap{opacity:0;transform:translateY(8px)}
.s2-copy .lede{font-size:19px;line-height:1.45;color:#56656A;margin-top:14px;width:470px;transition:opacity .35s}
.s2-copy .lede.swap{opacity:0}

/* channel selector */
.selector{position:absolute;left:44px;top:240px;width:196px;display:flex;flex-direction:column;gap:18px}
.selector::before{content:"";position:absolute;left:35px;top:35px;bottom:35px;width:1.5px;background:linear-gradient(#7FDCD2,#B8C7C8);opacity:.7}
.ch{position:relative;display:flex;align-items:center;gap:14px;height:70px;white-space:nowrap;padding:5px 16px 5px 5px;border:0;border-radius:20px;background:none;cursor:pointer;font:500 16px "IBM Plex Sans",sans-serif;color:#5F6B6D;text-align:left;transition:background .35s,box-shadow .35s,color .35s}
.ch .tile{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;flex:none;background:#F1F2F1;border:1px solid rgba(0,0,0,.04);box-shadow:0 4px 12px -6px rgba(20,40,45,.2);transition:background .35s}
.ch .tile svg{width:36px;height:36px;filter:grayscale(1);opacity:.55;transition:filter .35s,opacity .35s}
.ch[aria-current="true"]{background:#fff;color:#142629;font-weight:600;box-shadow:0 0 0 1px rgba(52,181,164,.28),0 12px 30px -12px rgba(52,181,164,.6),0 0 44px rgba(127,220,210,.45)}
.ch[aria-current="true"] .tile{background:#fff}
.ch[aria-current="true"] .tile svg{filter:none;opacity:1}
.ch:focus-visible{outline:2px solid #34B5A4;outline-offset:3px}

/* incoming card: slight 3D lean with glass layers behind its left edge */
.incoming{position:absolute;left:300px;top:300px;width:412px;height:452px;transition:opacity .4s}
.in2{position:absolute;inset:0;border-radius:24px;background:#fff;padding:24px 26px 20px;overflow:hidden;color:#142629;display:flex;flex-direction:column;
  transform:perspective(1600px) rotateY(9deg);transform-origin:0 50%;   /* leans in towards the orb */
  box-shadow:12px 8px 0 -3px rgba(255,255,255,.75),24px 16px 0 -7px rgba(220,240,238,.5),0 30px 60px -24px rgba(20,40,45,.35),0 2px 8px rgba(0,0,0,.04);
  transition:opacity .45s,translate .45s}
.in2.out{opacity:0;translate:-30px 0}
.in2.in{opacity:0;translate:30px 0}
.c2-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.c2-head .lg{width:40px;height:40px;display:grid;place-items:center}.c2-head .lg svg{width:40px;height:40px}
.c2-head b{font-size:23px;font-weight:600;letter-spacing:-.01em}
.c2-head time{margin-left:auto;font-size:15px;color:#6B7779}
/* email */
.e2-meta{font-size:16px;line-height:1.6;color:#56656A}
.e2-subj{font-size:17px;font-weight:600;margin:16px 0 12px}
.e2-body{font-size:16px;line-height:1.45;color:#1F2F32;display:grid;gap:10px}
.e2-tr{font:italic 13px/1.45 "IBM Plex Sans",sans-serif;color:#66757A;margin-top:10px;padding-top:10px;border-top:1px solid rgba(20,40,45,.08)}
.e2-reply{display:flex;align-items:center;gap:10px;margin-top:auto;padding:11px 14px;border-radius:12px;background:#E3F7F3;color:#0F5B5E;font-size:15px;font-weight:600}
.e2-reply svg{width:18px;height:18px;fill:none;stroke:#0F5B5E;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* chats: whatsapp, instagram, website */
.who2{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(20,40,45,.08)}
.who2 .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:#FCE7D6;color:#9A4B12;flex:none}
.who2 b{display:block;font-size:16px;font-weight:600}.who2 small{font-size:13px;color:#6B7779}
.msgs{display:flex;flex-direction:column;gap:9px;flex:1;min-height:0;overflow:hidden}
.b2{max-width:86%;padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.4;position:relative;flex:none}
.b2 small{display:block;text-align:right;font-size:11.5px;color:#7A8688;margin-top:4px}
.b2[lang="ar"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;font-size:16px;line-height:1.55}
.b2[lang="hi"]{font-family:"IBM Plex Sans Devanagari","IBM Plex Sans",sans-serif;line-height:1.5}
.b2[dir="rtl"] small{text-align:left}
.b2 .tr{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(20,40,45,.08);font:italic 12.5px/1.4 "IBM Plex Sans",sans-serif;color:#66757A;text-align:left}
.b2.c{align-self:flex-start;background:#F1F3F2;border-top-left-radius:4px}
.b2.a{align-self:flex-end;background:#DDF6F0;border-top-right-radius:4px;margin-right:6px;margin-top:6px}
.b2.a::after{content:"";position:absolute;right:-6px;top:-9px;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:#0D3B3F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.6 5.2a2.6 2.6 0 0 0 1.8 1.8L20.6 11.6l-5.2 1.6a2.6 2.6 0 0 0-1.8 1.8L12 20.2l-1.6-5.2a2.6 2.6 0 0 0-1.8-1.8L3.4 11.6l5.2-1.6a2.6 2.6 0 0 0 1.8-1.8z' fill='white'/%3E%3C/svg%3E") center/12px no-repeat}
.wa .b2.a{background:#D9FDD3}
.input2{display:flex;align-items:center;gap:10px;margin-top:12px;flex:none}
.input2 span{flex:1;height:44px;border-radius:22px;border:1px solid rgba(20,40,45,.1);display:flex;align-items:center;padding:0 16px;font-size:15px;color:#98A2A4}
.input2 i{width:44px;height:44px;border-radius:50%;background:#0D3B3F;display:grid;place-items:center}
.input2 i svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* call */
.caller2{display:flex;align-items:center;gap:12px}
.caller2 .av{width:46px;height:46px;border-radius:50%;background:#EEF2F2;display:grid;place-items:center;font-weight:700;color:#0F5B5E;font-size:17px}
.caller2 b{display:block;font-size:18px;font-weight:600}.caller2 small{font-size:13.5px;color:#6B7779}
.chip2{margin-left:auto;font-size:13px;font-weight:600;padding:5px 11px;border-radius:12px;background:#E3F7F3;color:#0F5B5E}
.wave2{display:flex;align-items:center;gap:2.5px;height:46px;margin:16px 0 10px}
.wave2 i{flex:1;border-radius:2px;background:#34B5A4}.wave2 i.dim{background:#C9D6D6}
.wave2 time{font-size:12.5px;color:#6B7779;margin-left:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabs2{display:flex;gap:22px;font-size:15px;color:#6B7779;border-bottom:1px solid rgba(20,40,45,.08);margin-bottom:12px}
.tabs2 span{padding:8px 0}.tabs2 .on{color:#142629;font-weight:600;box-shadow:inset 0 -2px #0F5B5E}
.tx2{display:grid;gap:10px}
.tx2 div{display:grid;grid-template-columns:52px 1fr;gap:8px;font-size:14.5px;line-height:1.42}
.tx2 b{font-size:12.5px;color:#0F5B5E;padding-top:8px}
.tx2 p{background:#F4F5F4;border-radius:12px;padding:8px 12px}

/* AI analysis card */
.analysis{position:absolute;left:776px;top:160px;width:332px;padding:22px 24px 18px;border-radius:22px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);box-shadow:0 0 40px rgba(127,220,210,.35),0 20px 44px -22px rgba(20,40,45,.3)}
.a2-title{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:600;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid rgba(20,40,45,.08)}
.a2-title svg{width:26px;height:26px}
.a2-row{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.35;padding:4px 0}
.a2-row .tk{margin-top:1px}
.a2-row .tk{width:22px;height:22px;border-radius:50%;background:#0F5B5E;display:grid;place-items:center;flex:none}
.a2-row .tk svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* lead card */
.lead{position:absolute;left:1186px;top:256px;width:350px;padding:22px 24px 24px;border-radius:24px;background:#fff;
  box-shadow:0 0 0 1px rgba(127,220,210,.4),0 0 64px rgba(127,220,210,.55),0 30px 60px -26px rgba(20,40,45,.3)}
.l2-top{display:flex;align-items:center;gap:12px}
.l2-top .ok{width:34px;height:34px;border-radius:50%;background:#22C55E;display:grid;place-items:center}
.l2-top .ok.t-ticket{background:#F59E0B}.l2-top .ok.t-update{background:#3B82F6}.l2-top .ok.t-resolved{background:#14B8A6}
.l2-top .ok svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l2-top b{font-size:21px;font-weight:600;white-space:nowrap}.l2-top time{margin-left:auto;font-size:14px;color:#6B7779;white-space:nowrap}
.l2-who{display:flex;align-items:center;gap:16px;margin:14px 0 6px;padding:10px 12px;border-radius:16px;background:#FAFBFA;border:1px solid rgba(20,40,45,.05)}
.l2-who .av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:20px;color:#7A3E10;background:linear-gradient(135deg,#FDE7D3,#F6C9A3);flex:none}
.l2-who b{display:block;font-size:20px;font-weight:600;margin-bottom:5px}
.chip-ok{display:inline-block;font-size:14px;font-weight:600;padding:4px 11px;border-radius:12px;background:#DCFCE7;color:#15803D}
.chip-ok.t-ticket{background:#FEF3C7;color:#B45309}.chip-ok.t-update{background:#DBEAFE;color:#1D4ED8}.chip-ok.t-resolved{background:#CCFBF1;color:#0F766E}
.l2-rows{display:grid;gap:8px;padding:6px 4px 10px}
.l2-rows div{display:flex;align-items:center;gap:16px;font-size:16.5px}
.l2-rows svg{width:20px;height:20px;fill:none;stroke:#142629;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.l2-owner{display:flex;align-items:center;gap:10px;padding:9px 4px 12px;border-top:1px solid rgba(20,40,45,.07);font-size:15px;color:#6B7779}
.l2-owner .av{width:28px;height:28px;border-radius:50%;background:#E0F2FE;color:#0369A1;display:grid;place-items:center;font-weight:700;font-size:11px}
.l2-owner b{color:#142629;font-weight:600}
.btn-crm2{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:12px;background:#0D3B3F;color:#fff;font-weight:600;font-size:17px;text-decoration:none}
.btn-crm2 svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.swapfade{transition:opacity .3s}.swapfade.off{opacity:0}

/* benefits */
.benefits{position:absolute;left:120px;right:120px;top:786px;display:grid;grid-template-columns:repeat(3,1fr);list-style:none}
.benefits li{display:flex;align-items:center;gap:20px;padding:0 34px}
.benefits li+li{border-left:1px solid rgba(20,40,45,.12)}
.bi{width:68px;height:68px;border-radius:18px;background:rgba(255,255,255,.85);box-shadow:0 6px 18px -8px rgba(20,40,45,.25);display:grid;place-items:center;flex:none}
.bi svg{width:30px;height:30px;fill:none;stroke:#142629;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.benefits b{display:block;font-size:20px;font-weight:600}
.benefits small{display:block;font-size:16px;line-height:1.4;color:#5F6D70;margin-top:4px}

/* scroll indicator */
.s2-scroll{position:absolute;right:30px;top:130px;display:flex;flex-direction:column;align-items:center;gap:14px}
.s2-scroll span{writing-mode:vertical-rl;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#56656A}
.s2-scroll i{position:relative;width:1.5px;height:200px;background:rgba(20,40,45,.2)}
.s2-scroll b{position:absolute;left:50%;top:calc(var(--p,0) * 184px);width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(20,40,45,.3)}
.sample{position:absolute;left:56px;top:690px;width:170px;font-size:12px;line-height:1.4;color:#7A8688}

@media (prefers-reduced-motion:reduce){.orb-light *{animation:none!important}.in2{transition:none}}

/* ---------- overview: last scroll step, every channel at once ---------- */
.lead{transition:opacity .4s,translate .4s}
.s2stage.ov .incoming,.s2stage.ov .lead{opacity:0;pointer-events:none}
.s2stage.ov .lead{translate:20px 0}
.s2stage.ov .ch .tile svg{filter:none;opacity:1}
.ov-label{display:none}
.ov-cards{position:absolute;left:300px;top:300px;width:412px;height:452px;pointer-events:none}
.ocard{position:absolute;left:0;right:0;top:calc(var(--k) * 94px);height:76px;display:flex;align-items:center;gap:14px;padding:0 16px;border-radius:18px;background:#fff;
  box-shadow:0 16px 34px -18px rgba(20,40,45,.35),0 1px 4px rgba(0,0,0,.04);opacity:0;translate:0 calc((2 - var(--k)) * 94px);transform:perspective(1600px) rotateY(9deg);transform-origin:0 50%;
  transition:opacity .4s,translate .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k) * 50ms)}
.s2stage.ov .ocard{opacity:1;translate:0 0}
.ocard .lg{width:40px;height:40px;flex:none}.ocard .lg svg{width:40px;height:40px}
.oc-txt{flex:1;min-width:0}
.oc-txt p{font-size:15px;line-height:1.35;color:#1F2F32;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-txt p[lang="ar"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}
.oc-txt p[lang="hi"]{font-family:"IBM Plex Sans Devanagari","IBM Plex Sans",sans-serif}
.oc-txt small{display:block;font-size:12px;font-style:italic;color:#6B7779;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.oc-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ocard .lang{font:600 10.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;font-style:normal;color:#0F5B5E;background:#DDF4EF;border-radius:5px;padding:3px 5px}
.ocard time{font-size:12.5px;color:#6B7779;white-space:nowrap}
.ocard .wv{flex:1;display:flex;align-items:center;gap:2.5px;height:30px}
.ocard .wv i{flex:1;border-radius:2px;background:#2563EB}
.ov-outs{position:absolute;left:1186px;top:128px;width:350px;display:grid;gap:12px;pointer-events:none}
.ocm{padding:13px 18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(127,220,210,.3),0 0 40px rgba(127,220,210,.35),0 22px 44px -24px rgba(20,40,45,.3);
  opacity:0;translate:-24px 0;transition:opacity .4s,translate .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(200ms + var(--k) * 90ms)}
.s2stage.ov .ocm{opacity:1;translate:0 0;pointer-events:auto}
.ocm-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ocm-h b{font-size:18px;font-weight:600;white-space:nowrap}
.ocm-h .chip-ok{margin-left:auto;font-size:12.5px;padding:3px 10px;white-space:nowrap}
.ocm-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:#DCFCE7}
.ocm-ic svg{width:20px;height:20px;fill:none;stroke:#15803D;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ocm.t-resolved .ocm-ic{background:#CCFBF1}.ocm.t-resolved .ocm-ic svg{stroke:#0F766E}
.ocm.t-task .ocm-ic{background:#FEF3C7}.ocm.t-task .ocm-ic svg{stroke:#B45309}
.chip-ok.t-task{background:#FEF3C7;color:#B45309}
.ocm.t-ticket .ocm-ic{background:#FEF3C7}.ocm.t-ticket .ocm-ic svg{stroke:#B45309}
.ocm.t-update .ocm-ic{background:#DBEAFE}.ocm.t-update .ocm-ic svg{stroke:#1D4ED8}
.ocm ul{list-style:none;display:grid;gap:5px}
.ocm li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35;color:#25363A}
.ocm li svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:#0F5B5E;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.ocard,.ocm,.lead,.incoming{transition:none}}

/* ---------- phones: no pinning; tap a channel chip, the cards stack top to bottom ---------- */
@media (max-width:860px){
  .scene2-track{height:auto}
  .scene2{position:relative;height:auto;min-height:0;display:block;padding:56px 0 64px}
  .s2stage{transform:none;width:auto;height:auto;display:flex;flex-direction:column;gap:18px;padding:0 20px}
  .s2stage>*{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:auto!important}
  .s2stage{width:100%!important;max-width:100vw}
  .s2stage>*{min-width:0;max-width:100%}
  .s2-copy .hl,.a2-row,.ch{white-space:normal}
  .ch{white-space:nowrap}
  .orb-light,.s2-scroll,.beam{display:none}
  .s2-copy h2{font-size:clamp(32px,9vw,44px)}
  .s2-copy .lede{width:auto;font-size:16px}
  .selector{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -20px;padding:4px 20px 8px;max-width:none!important;width:calc(100% + 40px)!important;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .selector::-webkit-scrollbar{display:none}
  .selector::before{display:none}
  .ch{height:48px;padding:4px 14px 4px 4px;font-size:14px;flex:none;gap:8px;border-radius:14px;background:rgba(255,255,255,.6)}
  .ch .tile{width:40px;height:40px;border-radius:11px}.ch .tile svg{width:24px;height:24px}
  .incoming{height:520px}
  .in2{transform:none;box-shadow:0 20px 44px -22px rgba(20,40,45,.35)}
  .analysis,.lead{padding:18px 20px}
  .benefits{display:flex;flex-direction:column;gap:16px;margin-top:10px}
  .benefits li{padding:0}.benefits li+li{border:0}
  .bi{width:52px;height:52px}.bi svg{width:24px;height:24px}
  .benefits b{font-size:17px}.benefits small{font-size:14px}
  .sample{order:9}
  .ov-label{display:block;margin-top:22px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#56656A}
  .ov-cards{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .ocard{position:relative;top:auto;left:auto;right:auto;width:100%;height:auto;min-height:72px;padding:12px 14px;opacity:1;translate:none;transform:none}
  .ov-cards{width:100%!important}
  .ov-outs{display:grid;gap:12px}
  .ocm{opacity:1;translate:none}
}