/* v18: capability chapters + animated mini-interfaces */
.v18-index{position:sticky;top:96px;z-index:5;display:flex;gap:6px;overflow-x:auto;margin:48px 0 20px;padding:6px;border-radius:999px;background:rgba(7,9,12,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(243,239,231,.08);scrollbar-width:none}
.v18-index a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;color:var(--c-mut);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.v18-index a span{font:500 10.5px/1 var(--mono,monospace);color:var(--c-gold)}
.v18-index a:hover{color:var(--c-ink)}
.v18-index a.is-on{background:rgba(242,220,180,.12);color:var(--c-ink);box-shadow:inset 0 0 0 1px rgba(242,220,180,.3)}
.v18-cats{display:grid;gap:26px}
.v18-cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:56px;border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));box-shadow:inset 0 0 0 1px rgba(243,239,231,.07);scroll-margin-top:170px;opacity:.55;transform:scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.v18-cat.is-on{opacity:1;transform:none;box-shadow:inset 0 0 0 1px rgba(242,220,180,.16),0 60px 120px -80px rgba(242,220,180,.25)}
.v18-cat.is-flip .v18-copy{order:2}
.v18-num{display:flex;align-items:center;gap:10px;margin-bottom:18px!important;font:500 12px/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--c-mut)}
.v18-num span{padding:4px 7px;border-radius:999px;background:var(--c-gold);color:#0a0d10}
.v18-copy h3{font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1.03;background:linear-gradient(92deg,#fff 0%,#f7e7c8 60%,#9fd6cc 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.v18-lede{margin-top:16px!important;font-size:17px;line-height:1.6;color:var(--c-mut);max-width:32em}
.v18-caps{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:28px 0 32px!important;padding:0;list-style:none}
.v18-caps li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:#dcd7ce}
.v18-caps li::before{content:'';position:absolute;left:0;top:.28em;width:13px;height:13px;background:linear-gradient(135deg,#f2dcb4,#9fd6cc);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.4 0 .7.3.8.7l.9 4.6c.4 1.9 1.6 3.1 3.5 3.5l4.6.9c.4.1.7.4.7.8s-.3.7-.7.8l-4.6.9c-1.9.4-3.1 1.6-3.5 3.5l-.9 4.6c-.1.4-.4.7-.8.7s-.7-.3-.8-.7l-.9-4.6c-.4-1.9-1.6-3.1-3.5-3.5l-4.6-.9c-.4-.1-.7-.4-.7-.8s.3-.7.7-.8l4.6-.9C8.7 9.4 9.9 8.2 10.3 6.3l.9-4.6c.1-.4.4-.7.8-.7Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.4 0 .7.3.8.7l.9 4.6c.4 1.9 1.6 3.1 3.5 3.5l4.6.9c.4.1.7.4.7.8s-.3.7-.7.8l-4.6.9c-1.9.4-3.1 1.6-3.5 3.5l-.9 4.6c-.1.4-.4.7-.8.7s-.7-.3-.8-.7l-.9-4.6c-.4-1.9-1.6-3.1-3.5-3.5l-4.6-.9c-.4-.1-.7-.4-.7-.8s.3-.7.7-.8l4.6-.9C8.7 9.4 9.9 8.2 10.3 6.3l.9-4.6c.1-.4.4-.7.8-.7Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Window chrome */
.v18-win{border-radius:22px;overflow:hidden;background:#0b0f13;box-shadow:0 0 0 1px rgba(243,239,231,.09),0 50px 100px -50px rgba(0,0,0,.95)}
.v18-win>header{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(243,239,231,.07);font:500 11.5px/1 var(--mono,monospace);color:var(--c-mut)}
.v18-win>header i{width:9px;height:9px;border-radius:50%;background:rgba(243,239,231,.14)}
.v18-win>header span{margin-left:10px;flex:1}
.v18-live{font-style:normal;color:#8fd6a8;display:inline-flex;align-items:center;gap:6px}
.v18-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#8fd6a8;animation:mn-pulse 1.6s infinite}
.v18-body{position:relative;height:340px;padding:18px;overflow:hidden}
.v18-cat:not(.is-on) .v18-body *{animation-play-state:paused!important}

/* 01 agents */
.m-agents{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;height:100%}
.m-agent{position:relative;display:grid;grid-template-columns:34px 1fr;align-content:center;gap:2px 12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(243,239,231,.07);animation:m-glow 4.8s ease-in-out infinite;animation-delay:calc(var(--i)*.8s)}
.m-agent .m-ico{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(242,220,180,.1);color:var(--c-gold)}
.m-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-agent b{font-size:13.5px;font-weight:600}.m-agent small{font:500 11px/1.3 var(--mono,monospace);color:var(--c-mut)}
.m-dot{position:absolute;top:12px;right:12px;width:6px;height:6px;border-radius:50%;background:#8fd6a8;box-shadow:0 0 8px #8fd6a8}
@keyframes m-glow{0%,70%,100%{box-shadow:inset 0 0 0 1px rgba(243,239,231,.07)}15%,40%{box-shadow:inset 0 0 0 1px rgba(242,220,180,.55),0 0 24px -6px rgba(242,220,180,.5)}}

/* 02 crm */
.m-crm{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:100%}
.m-col{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:rgba(255,255,255,.02)}
.m-col small{font:500 10.5px/1 var(--mono,monospace);color:var(--c-mut);margin-bottom:4px}
.m-card{display:grid;gap:6px;padding:10px;border-radius:10px;background:#131a20;box-shadow:inset 0 0 0 1px rgba(243,239,231,.07)}
.m-card i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#f2dcb4,#9fd6cc)}
.m-card span{height:6px;border-radius:3px;background:rgba(243,239,231,.18)}.m-card .s{width:60%;background:rgba(243,239,231,.1)}
.m-move{animation:m-move 5s cubic-bezier(.7,0,.3,1) infinite;box-shadow:inset 0 0 0 1px rgba(242,220,180,.5),0 14px 30px -10px rgba(0,0,0,.8);position:relative;z-index:2}
@keyframes m-move{0%,20%{transform:none}45%,80%{transform:translateX(calc(100% + 30px))}100%{transform:none}}
.m-toast{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 14px;border-radius:12px;background:rgba(242,220,180,.12);box-shadow:inset 0 0 0 1px rgba(242,220,180,.3);font-size:13px;color:var(--c-ink);animation:m-toast 5s ease infinite}
@keyframes m-toast{0%,40%{opacity:0;transform:translateY(8px)}55%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 03 dashboard */
.m-dash{display:grid;gap:12px}
.m-ask{display:flex;align-items:center;gap:6px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(243,239,231,.1);font-size:13.5px}
.m-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:m-type 6s steps(32) infinite}
@keyframes m-type{0%{width:0}35%,100%{width:32ch}}
.m-caret{width:1.5px;height:16px;background:var(--c-gold);animation:mn-pulse 1s infinite}
.m-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-kpis div{padding:12px;border-radius:12px;background:rgba(255,255,255,.03)}
.m-kpis small{display:block;font:500 10.5px/1 var(--mono,monospace);color:var(--c-mut);margin-bottom:8px}
.m-kpis b{font-size:22px;font-weight:600;letter-spacing:-.03em}
.m-line{width:100%;height:80px}
.m-line path{fill:none;stroke:url(#v18g);stroke-width:2.2;stroke-dasharray:420;stroke-dashoffset:420;animation:m-draw 6s ease infinite}
@keyframes m-draw{0%{stroke-dashoffset:420}40%,100%{stroke-dashoffset:0}}
.m-answer{padding:12px 14px;border-radius:12px;background:rgba(159,214,204,.08);box-shadow:inset 0 0 0 1px rgba(159,214,204,.25);font-size:13px;color:#d9ece8;animation:m-toast 6s ease infinite}

/* 04 os */
.m-os{display:grid;grid-template-columns:120px 1fr;gap:14px;height:100%}
.m-os aside{display:grid;align-content:start;gap:6px;padding:10px;border-radius:12px;background:rgba(255,255,255,.025)}
.m-os aside span{padding:9px 10px;border-radius:8px;font-size:12.5px;color:var(--c-mut);animation:m-nav 7.5s infinite;animation-delay:calc(var(--i)*1.5s)}
@keyframes m-nav{0%,18%{background:rgba(242,220,180,.14);color:var(--c-ink)}22%,100%{background:transparent}}
.m-os main{display:grid;align-content:start;gap:10px}
.m-os-top{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 8px}
.m-os-top b{font-size:18px;font-weight:600;letter-spacing:-.03em}.m-os-top small{font:500 11px/1 var(--mono,monospace);color:var(--c-mut)}
.m-row{display:grid;grid-template-columns:28px 1fr 70px;gap:10px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);animation:m-in .8s ease both;animation-delay:calc(var(--i)*.15s)}
.m-row i{width:28px;height:28px;border-radius:8px;background:rgba(242,220,180,.15)}
.m-row span{height:7px;border-radius:4px;background:rgba(243,239,231,.18)}
.m-row em{height:20px;border-radius:999px;background:rgba(143,214,168,.18)}
@keyframes m-in{from{opacity:0;transform:translateY(8px)}}

/* 05 saas */
.m-saas{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;height:100%;align-content:start}
.m-plan,.m-users{padding:16px;border-radius:14px;background:rgba(255,255,255,.03)}
.m-plan small,.m-users small{display:block;font:500 10.5px/1 var(--mono,monospace);color:var(--c-mut)}
.m-plan b{display:block;margin:8px 0 16px;font-size:22px;font-weight:600;color:#8fd6a8}
.m-meter{height:8px;border-radius:4px;background:rgba(243,239,231,.08);overflow:hidden}
.m-meter i{display:block;height:100%;width:72%;background:linear-gradient(90deg,#e2b979,#9fd6cc);animation:m-fill 5s ease infinite}
@keyframes m-fill{0%{width:10%}50%,100%{width:72%}}
.m-plan span{display:block;margin-top:8px;font-size:12px;color:var(--c-mut)}
.m-bars{display:flex;align-items:flex-end;gap:7px;height:120px;margin-top:14px}
.m-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#f2dcb4,rgba(242,220,180,.2));transform-origin:bottom;animation:m-bar 5s ease infinite;animation-delay:calc(var(--i)*.08s)}
@keyframes m-bar{0%{transform:scaleY(.1)}40%,100%{transform:none}}
.m-ai{grid-column:1/-1;padding:12px 14px;border-radius:12px;background:rgba(242,220,180,.1);box-shadow:inset 0 0 0 1px rgba(242,220,180,.28);font-size:13px}

/* 06 web */
.m-web{position:relative;height:100%}
.m-browser{border-radius:14px;overflow:hidden;background:#12181d;box-shadow:inset 0 0 0 1px rgba(243,239,231,.08)}
.m-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:rgba(255,255,255,.03)}
.m-bar i{width:7px;height:7px;border-radius:50%;background:rgba(243,239,231,.18)}
.m-bar span{margin-left:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);font:500 10.5px/1 var(--mono,monospace);color:var(--c-mut)}
.m-hero{display:grid;gap:10px;justify-items:center;padding:36px 20px 48px;background:radial-gradient(400px 160px at 50% 100%,rgba(242,220,180,.2),transparent 70%)}
.m-h{width:70%;height:16px;border-radius:6px;background:linear-gradient(90deg,#fff,#f2dcb4);animation:m-in 1s ease both}
.m-h.s{width:48%;height:9px;background:rgba(243,239,231,.25);animation-delay:.2s}
.m-btn{margin-top:8px;width:110px;height:28px;border-radius:999px;background:#fff;animation:m-in 1s ease both .4s}
.m-cite{position:absolute;left:20%;right:4%;bottom:0;padding:14px 16px;border-radius:14px;background:rgba(10,14,18,.92);box-shadow:inset 0 0 0 1px rgba(159,214,204,.3),0 20px 40px -10px rgba(0,0,0,.8);animation:m-cite 6s ease infinite}
.m-cite small{font:500 10.5px/1 var(--mono,monospace);color:var(--c-teal)}
.m-cite p{margin:8px 0!important;font-size:13px;line-height:1.45;color:#e7e3da}.m-cite b{color:var(--c-gold)}
.m-cite span{font:500 10.5px/1 var(--mono,monospace);color:var(--c-mut)}
@keyframes m-cite{0%,25%{opacity:0;transform:translateY(12px)}40%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 07 mobile */
.m-phone{display:grid;place-items:center;height:100%}
.m-screen{position:relative;width:190px;height:320px;border-radius:30px;padding:30px 12px 12px;background:#0f151a;box-shadow:0 0 0 6px #1b2228,0 0 0 7px rgba(243,239,231,.12),0 30px 60px -20px rgba(0,0,0,.9);display:grid;align-content:start;gap:8px}
.m-notch{position:absolute;top:8px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:999px;background:#000}
.m-push{padding:9px 10px;border-radius:12px;background:rgba(243,239,231,.1);animation:m-push 5s ease infinite}
.m-push b{display:block;font-size:11.5px}.m-push small{font-size:10px;color:var(--c-mut)}
@keyframes m-push{0%,15%{opacity:0;transform:translateY(-14px)}25%,85%{opacity:1;transform:none}100%{opacity:0}}
.m-widget{position:relative;padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(242,220,180,.2),rgba(159,214,204,.1))}
.m-widget small{font:500 10px/1 var(--mono,monospace);color:var(--c-mut)}.m-widget b{display:block;margin-top:4px;font-size:18px;font-weight:600}
.m-ring{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:conic-gradient(#f2dcb4 0 66%,rgba(243,239,231,.1) 0)}
.m-list{display:grid;gap:6px}.m-list span{height:28px;border-radius:9px;background:rgba(255,255,255,.04);animation:m-in .8s ease both;animation-delay:calc(var(--i)*.15s)}
.m-cta{margin-top:auto;padding:10px;border-radius:12px;background:var(--c-gold);color:#0a0d10;text-align:center;font-size:12px;font-weight:600}

/* 08 data */
.m-data{display:grid;gap:12px}
.m-src{display:flex;gap:8px}
.m-src span{padding:7px 11px;border-radius:999px;font:500 11px/1 var(--mono,monospace);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(243,239,231,.1);animation:m-glow 4s infinite;animation-delay:calc(var(--i)*.9s)}
.m-flow{position:relative;height:2px;background:rgba(243,239,231,.08);overflow:hidden;border-radius:2px}
.m-flow i{position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,#f2dcb4,#9fd6cc,transparent);animation:m-stream 1.6s linear infinite}
@keyframes m-stream{to{left:100%}}
.m-data table{width:100%;border-collapse:collapse;font-size:12.5px}
.m-data th{padding:8px 10px;text-align:left;font:500 10.5px/1 var(--mono,monospace);color:var(--c-mut);border-bottom:1px solid rgba(243,239,231,.08)}
.m-data td{padding:11px 10px;border-bottom:1px solid rgba(243,239,231,.05);animation:m-row 6s ease infinite;animation-delay:calc(var(--i)*.6s)}
.m-data td:last-child{color:var(--c-gold);font-family:var(--mono,monospace)}
@keyframes m-row{0%{opacity:0;transform:translateX(-8px)}10%,90%{opacity:1;transform:none}100%{opacity:0}}

.v18-note{margin-top:22px!important;font:500 11.5px/1.5 var(--mono,monospace);color:var(--c-mut)}
@media (max-width:1000px){
 .v18-cat{grid-template-columns:1fr;gap:30px;padding:30px 22px;opacity:1;transform:none}
 .v18-cat.is-flip .v18-copy{order:0}
 .v18-caps{grid-template-columns:1fr}
 .v18-index{top:84px}
 .v18-body{height:300px;padding:14px}
 .m-os{grid-template-columns:96px 1fr}
 .m-crm{gap:6px}.m-col{padding:6px}
}
@media (prefers-reduced-motion:reduce){.v18-body *{animation:none!important}.m-type{width:auto}.m-line path{stroke-dashoffset:0}}
@media (max-width:1000px){.v18-vis{order:-1}.v18-cat.is-flip .v18-copy{order:0}}
@media (max-width:600px){.m-agent{grid-template-columns:30px 1fr;padding:10px}.m-agent .m-ico{width:30px;height:30px}.m-agent small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}.m-agent b{font-size:12.5px}}
