/* ===== MONITORING & EVIDENCE AGENT · PLATFORM PAGE ===== */

.ma-page{background:var(--c-ink)}
.va-accent{color:var(--c-primary);text-shadow:0 0 40px rgba(132,189,0,.25)}

/* shared breadcrumb (mirrors voice-agents) */
.va-breadcrumb{
    display:flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:12px;
    color:var(--c-grey-2);margin-bottom:28px;
    opacity:0;animation:fadeUp .7s var(--ease-out-expo) .1s forwards;
}
.va-breadcrumb a{transition:var(--transition)}
.va-breadcrumb a:hover{color:var(--c-primary)}
.va-breadcrumb__current{color:var(--c-grey)}

/* ---------- HERO ---------- */
.ma-hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;
    padding:150px 0 90px;overflow:hidden;
}
.ma-hero__inner{
    position:relative;z-index:2;
    display:grid;grid-template-columns:.92fr 1.08fr;
    gap:56px;align-items:center;
}
.ma-hero__left{max-width:560px}
.ma-hero__eyebrow{opacity:0;animation:fadeUp .7s var(--ease-out-expo) .2s forwards}
.ma-hero__title{
    font-family:var(--font-display);
    font-size:clamp(34px,4.4vw,58px);
    font-weight:800;color:var(--c-white);
    line-height:1.1;letter-spacing:-.03em;
    margin-bottom:22px;
    opacity:0;animation:fadeUp .8s var(--ease-out-expo) .3s forwards;
}
.ma-hero__sub{
    font-size:18px;line-height:1.7;color:var(--c-grey);
    max-width:480px;margin-bottom:34px;
    opacity:0;animation:fadeUp .8s var(--ease-out-expo) .45s forwards;
}
.ma-hero__ctas{
    display:flex;flex-wrap:wrap;gap:16px;
    opacity:0;animation:fadeUp .8s var(--ease-out-expo) .6s forwards;
}
.ma-hero__right{
    opacity:0;animation:fadeUp 1s var(--ease-out-expo) .5s forwards;
}
.ma-hero__hint{
    text-align:center;margin-top:14px;
    font-family:var(--font-mono);font-size:11px;
    color:var(--c-grey-2);letter-spacing:.04em;
}

/* ---------- LIVE COMPLIANCE ENGINE ---------- */
.ma-engine{
    position:relative;
    border:1px solid var(--c-line);
    border-radius:var(--radius-lg);
    background:rgba(20,24,31,.55);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(132,189,0,.05);
    overflow:hidden;
    transition:box-shadow .6s ease,border-color .6s ease;
}
.ma-engine.is-before{
    border-color:rgba(255,90,90,.3);
    box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(255,70,70,.1);
}
.ma-engine__topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 18px;border-bottom:1px solid var(--c-line);
    background:rgba(14,17,22,.5);
}
.ma-engine__sys{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:12px;color:var(--c-grey);
}
.ma-engine__sysdot{
    width:8px;height:8px;border-radius:50%;background:var(--c-primary);
    box-shadow:0 0 10px var(--c-primary-glow);
    animation:livePulse 2s ease-in-out infinite;
    transition:background .5s ease;
}
.is-before .ma-engine__sysdot{background:#ff5a5a;box-shadow:0 0 10px rgba(255,90,90,.6)}
.ma-engine__count{
    font-family:var(--font-mono);font-size:12px;font-weight:600;
    color:var(--c-primary);letter-spacing:.03em;
    transition:color .5s ease;
}
.is-before .ma-engine__count{color:#ff6b6b}

.ma-engine__stage{
    position:relative;
    height:380px;
    overflow:hidden;
}

/* orbit rings */
.ma-orbit-ring{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(132,189,0,.12);
    transition:border-color .6s ease,opacity .6s ease;
}
.ma-orbit-ring--1{width:210px;height:210px}
.ma-orbit-ring--2{width:330px;height:330px}
.is-before .ma-orbit-ring{border-color:rgba(255,90,90,.12);border-style:dashed;opacity:.5}

/* status wave (after) */
.ma-wave{
    position:absolute;top:50%;left:50%;
    width:80px;height:80px;border-radius:50%;
    transform:translate(-50%,-50%);
    border:1.5px solid rgba(132,189,0,.5);
    opacity:0;
    animation:maWave 3.4s ease-out infinite;
}
@keyframes maWave{
    0%{opacity:.6;width:80px;height:80px}
    100%{opacity:0;width:360px;height:360px}
}
.is-before .ma-wave{animation:none;opacity:0}

/* orbit groups */
.ma-orbit{
    position:absolute;top:50%;left:50%;
    width:0;height:0;
}
.ma-orbit--inner{animation:maSpin 26s linear infinite}
.ma-orbit--outer{animation:maSpin 40s linear infinite reverse}
@keyframes maSpin{to{transform:rotate(360deg)}}
.is-before .ma-orbit{animation-play-state:paused}

.ma-sat{
    position:absolute;top:0;left:0;
    --r:105px;
    transform:rotate(calc(var(--a) * 1deg)) translateX(var(--r)) rotate(calc(var(--a) * -1deg));
    transition:transform .7s var(--ease-out-expo);
}
.ma-orbit--outer .ma-sat{--r:165px}
.ma-sat__inner{
    display:inline-flex;align-items:center;justify-content:center;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    font-family:var(--font-mono);font-size:11px;
    color:var(--c-grey);
    padding:7px 13px;
    background:rgba(14,17,22,.85);
    border:1px solid rgba(132,189,0,.25);
    border-radius:100px;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
    transition:all .5s var(--ease-out-expo);
}
.is-after .ma-orbit--inner{animation-play-state:running}
/* BEFORE: scatter + redden satellites */
.is-before .ma-sat__inner{
    color:#ffb3b3;border-color:rgba(255,90,90,.4);
    background:rgba(40,16,16,.85);
}
.is-before .ma-sat{
    --r:140px;
    filter:blur(.3px);
}
.is-before .ma-orbit--inner .ma-sat:nth-child(1){transform:translate(-40px,-70px) rotate(-8deg)}
.is-before .ma-orbit--inner .ma-sat:nth-child(2){transform:translate(120px,30px) rotate(10deg)}
.is-before .ma-orbit--inner .ma-sat:nth-child(3){transform:translate(-90px,90px) rotate(6deg)}
.is-before .ma-orbit--outer .ma-sat:nth-child(1){transform:translate(150px,-90px) rotate(12deg)}
.is-before .ma-orbit--outer .ma-sat:nth-child(2){transform:translate(-170px,-30px) rotate(-10deg)}
.is-before .ma-orbit--outer .ma-sat:nth-child(3){transform:translate(60px,150px) rotate(8deg)}

/* core */
.ma-core{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ma-core__glow{
    position:absolute;top:42%;left:50%;
    width:130px;height:130px;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(132,189,0,.4) 0%,transparent 70%);
    filter:blur(8px);
    animation:vaCoreGlow 3s ease-in-out infinite;
    transition:background .5s ease;
}
@keyframes vaCoreGlow{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
.is-before .ma-core__glow{background:radial-gradient(circle,rgba(255,70,70,.35) 0%,transparent 70%)}
.ma-core__ball{
    width:72px;height:72px;border-radius:50%;
    background:linear-gradient(145deg,#9ad400,#6FA000);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 40px rgba(132,189,0,.5),inset 0 2px 8px rgba(255,255,255,.35);
    position:relative;z-index:1;
    animation:vaCoreFloat 5s ease-in-out infinite;
    transition:background .5s ease,box-shadow .5s ease;
}
@keyframes vaCoreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.is-before .ma-core__ball{
    background:linear-gradient(145deg,#ff7a7a,#c83b3b);
    box-shadow:0 0 40px rgba(255,70,70,.5),inset 0 2px 8px rgba(255,255,255,.3);
    animation:maShake .35s ease-in-out infinite;
}
@keyframes maShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
.ma-core__check{transition:opacity .4s ease}
.is-before .ma-core__check{opacity:0}
.ma-core__score{
    font-family:var(--font-mono);font-size:12px;font-weight:600;
    color:var(--c-white);background:rgba(14,17,22,.75);
    padding:3px 12px;border-radius:100px;border:1px solid var(--c-line);
}

/* chaos layer */
.ma-chaos{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .5s ease;pointer-events:none}
.is-before .ma-chaos{opacity:1}
.ma-folder{
    position:absolute;
    font-family:var(--font-mono);font-size:10px;color:#ffb3b3;
    background:rgba(40,16,16,.8);border:1px dashed rgba(255,90,90,.5);
    padding:5px 9px;border-radius:6px;white-space:nowrap;
}
.ma-folder--1{top:18%;left:8%;animation:maDrift1 3s ease-in-out infinite}
.ma-folder--2{top:64%;left:14%;animation:maDrift2 3.6s ease-in-out infinite}
.ma-folder--3{top:30%;right:8%;animation:maDrift1 4.2s ease-in-out infinite}
@keyframes maDrift1{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(10px,-12px) rotate(3deg)}}
@keyframes maDrift2{0%,100%{transform:translate(0,0) rotate(5deg)}50%{transform:translate(-12px,10px) rotate(-3deg)}}
.ma-alert{
    position:absolute;width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;color:#fff;background:#e04545;
    box-shadow:0 0 14px rgba(255,70,70,.6);
    animation:maAlertPulse 1.1s ease-in-out infinite;
}
.ma-alert--1{top:50%;right:18%}
.ma-alert--2{bottom:16%;right:34%;animation-delay:.4s}
@keyframes maAlertPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}

/* toggle */
.ma-toggle{
    position:relative;
    display:grid;grid-template-columns:1fr 1fr;
    margin:18px;padding:5px;
    background:rgba(14,17,22,.6);
    border:1px solid var(--c-line);border-radius:100px;
}
.ma-toggle__thumb{
    position:absolute;top:5px;left:5px;
    width:calc(50% - 5px);height:calc(100% - 10px);
    border-radius:100px;
    background:rgba(132,189,0,.14);
    border:1px solid rgba(132,189,0,.4);
    transform:translateX(100%);
    transition:transform .5s var(--ease-out-expo),background .5s ease,border-color .5s ease;
}
.ma-engine.is-before .ma-toggle__thumb{
    transform:translateX(0);
    background:rgba(255,90,90,.14);border-color:rgba(255,90,90,.45);
}
.ma-toggle__btn{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:9px 6px;border-radius:100px;
    transition:var(--transition);
}
.ma-toggle__label{font-size:13px;font-weight:600;color:var(--c-grey);transition:color .4s ease}
.ma-toggle__tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--c-grey-2)}
.ma-toggle__btn.is-active .ma-toggle__label{color:var(--c-white)}
.ma-toggle__btn[data-mode="after"].is-active .ma-toggle__label{color:var(--c-primary)}
.ma-toggle__btn[data-mode="before"].is-active .ma-toggle__label{color:#ff7a7a}

.ma-engine__caption{
    padding:0 22px 22px;
    display:flex;flex-direction:column;gap:2px;
}
.ma-engine__caption-line{
    font-size:14px;font-weight:500;color:var(--c-grey);
    transition:color .4s ease;
}
.is-after .ma-engine__caption-line{color:var(--c-grey)}

/* ---------- SCROLL TRANSFORMATION ---------- */
.ma-scroll{
    position:relative;
    height:320vh;
    background:var(--c-ink);
}
.ma-scroll__sticky{
    position:sticky;top:0;
    height:100vh;
    display:flex;align-items:center;
    overflow:hidden;
}
.ma-scroll__inner{
    display:grid;grid-template-columns:1fr 1fr;
    gap:56px;align-items:center;width:100%;
}
.ma-scroll__title{
    font-family:var(--font-display);
    font-size:clamp(28px,3.6vw,44px);
    font-weight:700;color:var(--c-white);
    line-height:1.15;letter-spacing:-.02em;margin-bottom:24px;
    max-width:480px;
}
.ma-scroll__lead{
    font-size:18px;color:var(--c-grey);
    max-width:420px;margin-bottom:28px;line-height:1.6;
}
.ma-scroll__progress{
    width:200px;height:4px;border-radius:4px;
    background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:12px;
}
.ma-scroll__progress-fill{
    display:block;height:100%;width:16%;
    background:linear-gradient(90deg,var(--c-primary),rgba(132,189,0,.5));
    border-radius:4px;transition:width .3s ease;
}
.ma-scroll__counter{font-family:var(--font-mono);font-size:13px;color:var(--c-grey-2)}

.ma-scroll__viz{
    position:relative;
    height:420px;border-radius:var(--radius-lg);
    border:1px solid var(--c-line);
    background:rgba(20,24,31,.5);
    overflow:hidden;
    transition:border-color .5s ease,box-shadow .5s ease;
}
.ma-scroll__viz[data-scene="4"]{border-color:rgba(255,90,90,.35);box-shadow:0 0 40px rgba(255,70,70,.1)}
.ma-scroll__viz[data-scene="6"]{border-color:rgba(132,189,0,.35);box-shadow:0 0 40px rgba(132,189,0,.1)}
.ma-scene{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:22px;padding:40px;
    opacity:0;transform:scale(.96);
    transition:opacity .5s ease,transform .5s ease;
    pointer-events:none;
}
.ma-scroll__viz[data-scene="1"] .ma-scene--1,
.ma-scroll__viz[data-scene="2"] .ma-scene--2,
.ma-scroll__viz[data-scene="3"] .ma-scene--3,
.ma-scroll__viz[data-scene="4"] .ma-scene--4,
.ma-scroll__viz[data-scene="5"] .ma-scene--5,
.ma-scroll__viz[data-scene="6"] .ma-scene--6{opacity:1;transform:scale(1)}

/* scene art block */
.ma-scene__art{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    min-height:130px;justify-content:center;
}
.ma-scene__icon{
    width:88px;height:88px;border-radius:24px;
    display:flex;align-items:center;justify-content:center;
    color:var(--c-grey);
    background:rgba(255,255,255,.03);
    border:1px solid var(--c-line);
}
.ma-scene__icon--mute{color:#8b94a0;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
.ma-scene__icon--warn{color:#ffd27a;background:rgba(255,180,60,.07);border-color:rgba(255,180,60,.3)}
.ma-scene__icon--bad{color:#ff7a7a;background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.35)}
.ma-scene__icon--good{color:var(--c-primary);background:rgba(132,189,0,.1);border-color:rgba(132,189,0,.4);box-shadow:0 0 26px rgba(132,189,0,.25)}
.ma-scene__icon--shake{animation:maShake .35s ease-in-out infinite}

/* caption inside the box */
.ma-scene__cap{
    font-size:17px;font-weight:500;color:var(--c-white);
    text-align:center;max-width:340px;line-height:1.5;
}
.ma-scene__stamp{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
    color:var(--c-grey-2);padding:5px 12px;border-radius:100px;
    border:1px solid var(--c-line);background:rgba(14,17,22,.6);
}
.ma-scene__stamp--warn{color:#ffd27a;border-color:rgba(255,180,60,.3)}
.ma-scene__stamp--good{color:var(--c-primary);border-color:rgba(132,189,0,.35);background:rgba(132,189,0,.06)}
.ma-scene__count{
    font-family:var(--font-mono);font-size:clamp(18px,2.4vw,26px);font-weight:700;
    color:#ff6b6b;letter-spacing:.06em;text-shadow:0 0 22px rgba(255,70,70,.4);
}
.ma-scene__badge{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
    padding:6px 14px;border-radius:100px;
    color:var(--c-grey);background:rgba(14,17,22,.7);border:1px solid var(--c-line);
}
.ma-scene__badge--warn{color:#ffd27a;border-color:rgba(255,180,60,.3);background:rgba(40,30,10,.6)}
.ma-scene__badge--bad{color:#ff7a7a;border-color:rgba(255,90,90,.35);background:rgba(40,16,16,.6)}
.ma-scene__badge--good{color:var(--c-primary);border-color:rgba(132,189,0,.35);background:rgba(132,189,0,.06)}

/* scene 3 drift graphic */
.ma-scene__drift path{stroke-dasharray:260;stroke-dashoffset:260;animation:maDriftDraw 1.6s var(--ease-out-expo) forwards}
.ma-scroll__viz[data-scene="3"] .ma-scene__drift path{stroke-dashoffset:0}
@keyframes maDriftDraw{to{stroke-dashoffset:0}}

/* scene 5 radar sweep around the shield */
.ma-scene__radar{position:relative;display:flex;align-items:center;justify-content:center;width:130px;height:130px}
.ma-scene__radar::before,.ma-scene__radar::after{
    content:'';position:absolute;border-radius:50%;
    border:1.5px solid rgba(132,189,0,.3);
}
.ma-scene__radar::before{width:130px;height:130px;animation:maWave 2.6s ease-out infinite}
.ma-scene__radar::after{
    width:130px;height:130px;
    background:conic-gradient(from 0deg,rgba(132,189,0,.22),transparent 70%);
    border:none;-webkit-mask:radial-gradient(circle,transparent 30px,black 31px);mask:radial-gradient(circle,transparent 30px,black 31px);
    animation:maRadar 2.2s linear infinite;
}
@keyframes maRadar{to{transform:rotate(360deg)}}

/* scene 6 check grid */
.ma-grid-ok{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ma-grid-ok span{
    width:60px;height:46px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(132,189,0,.1);border:1px solid rgba(132,189,0,.35);
    animation:maOkIn .5s var(--ease-out-expo) backwards;
}
.ma-grid-ok span:nth-child(1){animation-delay:.0s}
.ma-grid-ok span:nth-child(2){animation-delay:.06s}
.ma-grid-ok span:nth-child(3){animation-delay:.12s}
.ma-grid-ok span:nth-child(4){animation-delay:.18s}
.ma-grid-ok span:nth-child(5){animation-delay:.24s}
.ma-grid-ok span:nth-child(6){animation-delay:.3s}
.ma-grid-ok span:nth-child(7){animation-delay:.36s}
.ma-grid-ok span:nth-child(8){animation-delay:.42s}
.ma-grid-ok span:nth-child(9){animation-delay:.48s}
@keyframes maOkIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* ---------- CAPABILITIES GRAPH ---------- */
.ma-caps{text-align:left}
.ma-caps .container{display:flex;flex-direction:column}
.ma-graph{
    position:relative;
    margin-top:32px;
    height:480px;
    border:1px solid var(--c-line);border-radius:var(--radius-lg);
    background:rgba(20,24,31,.4);overflow:visible;
}
.ma-graph__links{position:absolute;inset:0;width:100%;height:100%}
.ma-edge{
    fill:none;stroke:rgba(132,189,0,.18);stroke-width:1.5;
    transition:stroke .3s ease,stroke-width .3s ease;
}
.ma-edge.is-lit{stroke:var(--c-primary);stroke-width:2.4}
.ma-edge-pulse{
    fill:none;stroke:var(--c-primary);stroke-width:2.5;
    stroke-dasharray:6 200;stroke-linecap:round;
    opacity:0;
}
.ma-edge-pulse.is-on{opacity:1;animation:maPulse 1s linear infinite}
@keyframes maPulse{from{stroke-dashoffset:206}to{stroke-dashoffset:0}}
.ma-graph__nodes{position:absolute;inset:0}
.ma-node{
    position:absolute;left:var(--x);top:var(--y);
    transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:12px 16px;width:max-content;max-width:160px;
    background:rgba(14,17,22,.8);
    border:1px solid var(--c-line);border-radius:14px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:all .35s var(--ease-out-expo);
    z-index:1;cursor:pointer;
}
.ma-node:hover,.ma-node.is-active,.ma-node:focus-visible{
    border-color:var(--c-primary);
    box-shadow:0 0 26px rgba(132,189,0,.2);
    transform:translate(-50%,-50%) scale(1.05);
    z-index:3;
}
.ma-node__dot{
    width:12px;height:12px;border-radius:50%;
    background:var(--c-primary);box-shadow:0 0 12px var(--c-primary-glow);
    animation:livePulse 2.5s ease-in-out infinite;
}
.ma-node__icon{
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(132,189,0,.1);border:1px solid rgba(132,189,0,.3);
}
.ma-node--core{
    background:rgba(132,189,0,.08);
    border-color:rgba(132,189,0,.4);
    box-shadow:0 0 30px rgba(132,189,0,.12);
}
.ma-node__label{
    font-size:12px;font-weight:600;color:var(--c-white);
    text-align:center;line-height:1.3;
}
.ma-node--core .ma-node__label{color:var(--c-primary);font-family:var(--font-mono);font-size:11px}
.ma-node__tip{
    position:absolute;bottom:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(6px);
    width:180px;font-size:11px;line-height:1.5;color:var(--c-grey);
    font-weight:400;
    background:var(--c-panel-2);border:1px solid rgba(132,189,0,.2);
    padding:10px 12px;border-radius:var(--radius-sm);
    text-align:center;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:all .3s var(--ease-out-expo);
    box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:5;
}
.ma-node:hover .ma-node__tip,.ma-node.is-active .ma-node__tip,.ma-node:focus-visible .ma-node__tip{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* top-row nodes: flip tooltip below so it isn't cropped at the panel top */
.ma-node--tdown .ma-node__tip{bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-6px)}
.ma-node--tdown:hover .ma-node__tip,.ma-node--tdown.is-active .ma-node__tip,.ma-node--tdown:focus-visible .ma-node__tip{transform:translateX(-50%) translateY(0)}

/* ---------- DRIFT PLAYGROUND ---------- */
.ma-drift{text-align:left}
.ma-drift .container{display:flex;flex-direction:column}
.ma-play{
    display:grid;grid-template-columns:1fr 320px;gap:24px;
    margin-top:32px;align-items:start;
}
.ma-play__board{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.ma-ctrl{
    position:relative;
    padding:22px 20px;border-radius:var(--radius);
    background:rgba(20,24,31,.6);border:1px solid var(--c-line);
    overflow:hidden;
    transition:all .4s var(--ease-out-expo);
    cursor:default;
}
.ma-ctrl__status{
    display:block;width:10px;height:10px;border-radius:50%;
    background:var(--c-primary);box-shadow:0 0 10px var(--c-primary-glow);
    margin-bottom:16px;transition:all .3s ease;
}
.ma-ctrl__name{display:block;font-size:15px;font-weight:600;color:var(--c-white);margin-bottom:6px}
.ma-ctrl__state{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--c-primary);text-transform:uppercase}
/* drifting state */
.ma-ctrl.is-drift{
    border-color:rgba(255,90,90,.5);background:rgba(40,16,16,.5);
    cursor:pointer;animation:maCtrlShake 2.4s ease-in-out infinite;
}
@keyframes maCtrlShake{0%,92%,100%{transform:translateX(0)}94%{transform:translateX(-2px)}96%{transform:translateX(2px)}98%{transform:translateX(-1px)}}
.ma-ctrl.is-drift .ma-ctrl__status{background:#ff5a5a;box-shadow:0 0 12px rgba(255,70,70,.7);animation:maAlertPulse 1s ease-in-out infinite}
.ma-ctrl.is-drift .ma-ctrl__state{color:#ff6b6b}
.ma-ctrl.is-drift::after{
    content:'click to investigate';
    position:absolute;bottom:10px;right:14px;
    font-family:var(--font-mono);font-size:9px;color:#ff9b9b;opacity:.8;
}
/* scanning */
.ma-ctrl.is-scanning{border-color:var(--c-primary)}
.ma-ctrl.is-scanning::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(132,189,0,.18),transparent);
    animation:maScanSweep .8s linear 2;
}
@keyframes maScanSweep{to{left:100%}}
/* resolved ripple */
.ma-ctrl.is-resolved .ma-ctrl__status{background:var(--c-primary);box-shadow:0 0 14px var(--c-primary-glow)}
.ma-ripple{
    position:absolute;top:50%;left:50%;width:10px;height:10px;
    border-radius:50%;border:2px solid var(--c-primary);
    transform:translate(-50%,-50%);pointer-events:none;
    animation:maRipple .7s ease-out forwards;
}
@keyframes maRipple{0%{opacity:.8;width:10px;height:10px}100%{opacity:0;width:240px;height:240px}}
.ma-confetti{
    position:absolute;width:7px;height:7px;border-radius:1px;
    pointer-events:none;opacity:0;
    animation:maConfetti .9s ease-out forwards;
}
@keyframes maConfetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(220deg)}}

.ma-play__panel{
    padding:20px;border-radius:var(--radius);
    background:rgba(14,17,22,.6);border:1px solid var(--c-line);
    position:sticky;top:100px;
}
.ma-play__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ma-play__title{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--c-white)}
.ma-play__live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--c-primary)}
.ma-play__live-dot{width:7px;height:7px;border-radius:50%;background:var(--c-primary);animation:livePulse 1.6s ease-in-out infinite}
.ma-play__log{
    display:flex;flex-direction:column;gap:8px;
    min-height:150px;max-height:200px;overflow-y:auto;
    font-family:var(--font-mono);font-size:11.5px;line-height:1.5;
    margin-bottom:18px;
}
.ma-play__log-empty{color:var(--c-grey-2);font-style:italic}
.ma-log-item{
    padding:8px 10px;border-radius:6px;
    background:rgba(132,189,0,.05);border-left:2px solid var(--c-primary);
    color:var(--c-grey);
    animation:maLogIn .4s var(--ease-out-expo) backwards;
}
.ma-log-item--bad{border-left-color:#ff6b6b;background:rgba(255,90,90,.06);color:#ffb3b3}
.ma-log-item strong{color:var(--c-white)}
@keyframes maLogIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.ma-play__score-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ma-play__score-row span{font-size:13px;color:var(--c-grey)}
.ma-play__score-row strong{font-family:var(--font-mono);font-size:22px;color:var(--c-primary)}
.ma-play__bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:10px}
.ma-play__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--c-primary),rgba(132,189,0,.5));border-radius:6px;transition:width .5s var(--ease-out-expo)}
.ma-play__posture{font-size:12px;color:var(--c-grey-2)}
.ma-play__posture strong{color:var(--c-primary);font-family:var(--font-mono)}
.ma-play.is-complete .ma-play__panel{border-color:rgba(132,189,0,.4);box-shadow:0 0 30px rgba(132,189,0,.1)}

/* ---------- GOVERNED BY DESIGN ---------- */
.ma-gov__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ma-gov__standards{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ma-std{
    font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
    color:var(--c-primary);padding:9px 16px;
    border:1px solid rgba(132,189,0,.3);border-radius:var(--radius-sm);
    background:rgba(132,189,0,.05);transition:var(--transition);
}
.ma-std:hover{background:rgba(132,189,0,.12);border-color:var(--c-primary)}
.ma-stack{
    position:relative;display:flex;flex-direction:column;gap:10px;
    padding:24px;border:1px solid var(--c-line);border-radius:var(--radius-lg);
    background:rgba(20,24,31,.5);overflow:hidden;
}
.ma-stack__flow{
    position:absolute;left:50%;top:24px;width:3px;height:30px;
    transform:translateX(-50%);border-radius:3px;
    background:linear-gradient(to bottom,var(--c-primary),transparent);
    box-shadow:0 0 10px var(--c-primary-glow);
    animation:maFlowDown 2.4s linear infinite;
    z-index:2;
}
@keyframes maFlowDown{0%{top:24px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 40px);opacity:0}}
.ma-stack__layer{
    display:flex;align-items:center;gap:14px;
    padding:16px 20px;border-radius:var(--radius-sm);
    font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--c-white);
    background:rgba(14,17,22,.6);border:1px solid var(--c-line);
    position:relative;z-index:1;
    transition:all .4s var(--ease-out-expo);
}
.ma-stack__layer:hover{border-color:rgba(132,189,0,.4);transform:translateX(6px);background:rgba(132,189,0,.06)}
.ma-stack__num{font-family:var(--font-mono);font-size:12px;color:var(--c-primary);opacity:.8;flex-shrink:0}
.ma-stack__icon{
    flex-shrink:0;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    color:var(--c-primary);
    background:rgba(132,189,0,.08);
    border:1px solid rgba(132,189,0,.2);
    transition:all .4s var(--ease-out-expo);
}
.ma-stack__layer:hover .ma-stack__icon{
    background:rgba(132,189,0,.16);
    border-color:rgba(132,189,0,.4);
    box-shadow:0 0 16px rgba(132,189,0,.2);
}
.ma-stack__name{flex:1}
.ma-gov.in-view .ma-stack__layer{animation:vaLayerIn .55s var(--ease-out-expo) backwards}
.ma-gov.in-view .ma-stack__layer[data-l="1"]{animation-delay:.1s}
.ma-gov.in-view .ma-stack__layer[data-l="2"]{animation-delay:.18s}
.ma-gov.in-view .ma-stack__layer[data-l="3"]{animation-delay:.26s}
.ma-gov.in-view .ma-stack__layer[data-l="4"]{animation-delay:.34s}
.ma-gov.in-view .ma-stack__layer[data-l="5"]{animation-delay:.42s}
.ma-gov.in-view .ma-stack__layer[data-l="6"]{animation-delay:.5s}
@keyframes vaLayerIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- DEPLOYMENT ---------- */
.ma-deploy{text-align:left}
.ma-deploy .container{display:flex;flex-direction:column}
.ma-deploy__panel{
    margin-top:28px;border:1px solid var(--c-line);border-radius:var(--radius-lg);
    background:rgba(20,24,31,.5);overflow:hidden;
}
.ma-deploy__selector{
    display:flex;flex-wrap:wrap;gap:4px;padding:10px;
    border-bottom:1px solid var(--c-line);background:rgba(14,17,22,.4);
}
.ma-env{
    flex:1;min-width:120px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 16px;border-radius:var(--radius-sm);
    font-size:14px;font-weight:500;color:var(--c-grey);
    transition:var(--transition);white-space:nowrap;
}
.ma-env__ico{flex-shrink:0;transition:var(--transition)}
.ma-env:hover{color:var(--c-white);background:rgba(255,255,255,.03)}
.ma-env.is-active{color:var(--c-ink);background:var(--c-primary);font-weight:600}
.ma-deploy__stage{
    display:grid;grid-template-columns:300px 1fr;gap:32px;
    padding:40px;align-items:center;
}
.ma-deploy__viz{
    position:relative;height:200px;
    border-radius:var(--radius);background:rgba(14,17,22,.4);
    border:1px solid var(--c-line);overflow:hidden;
}
/* per-environment scenes */
.ma-dscene{
    position:absolute;inset:0;
    opacity:0;visibility:hidden;transform:scale(.96);
    transition:opacity .5s var(--ease-out-expo),transform .5s var(--ease-out-expo),visibility .5s;
}
.ma-dscene svg{width:100%;height:100%}
.ma-deploy__viz[data-env="cloud"] .ma-dscene[data-env="cloud"],
.ma-deploy__viz[data-env="private"] .ma-dscene[data-env="private"],
.ma-deploy__viz[data-env="onprem"] .ma-dscene[data-env="onprem"],
.ma-deploy__viz[data-env="airgapped"] .ma-dscene[data-env="airgapped"]{
    opacity:1;visibility:visible;transform:scale(1);
}
/* shared scene primitives */
.ma-dcore{fill:url(#none);fill:#84BD00;filter:drop-shadow(0 0 10px rgba(132,189,0,.5))}
.ma-dcore-ring{fill:none;stroke:rgba(132,189,0,.4);stroke-width:1.5}
.ma-dcore-g{animation:vaCoreFloat 4s ease-in-out infinite}
.ma-dtag{
    fill:var(--c-grey-2);font-family:var(--font-mono);font-size:11px;
    text-anchor:middle;letter-spacing:.04em;
}
.ma-dtag--off{fill:#ff8a8a;text-anchor:middle}
/* cloud */
.ma-dflow{stroke:var(--c-primary);stroke-width:1.6;stroke-dasharray:5 8;opacity:.7;animation:maDFlow 1.2s linear infinite;animation-delay:var(--d,0s)}
@keyframes maDFlow{to{stroke-dashoffset:-26}}
.ma-dregion{fill:rgba(132,189,0,.12);stroke:var(--c-primary);stroke-width:1.6;animation:maDRegion 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes maDRegion{0%,100%{opacity:.5}50%{opacity:1}}
/* private */
.ma-dbound{fill:rgba(132,189,0,.03);stroke:rgba(132,189,0,.4);stroke-width:1.6;stroke-dasharray:6 6;animation:maDFlow 3s linear infinite}
/* on-prem */
.ma-dground{stroke:rgba(132,189,0,.3);stroke-width:2;stroke-linecap:round}
.ma-drack rect{fill:rgba(132,189,0,.08);stroke:rgba(132,189,0,.4);stroke-width:1.4}
.ma-dled{fill:var(--c-primary);animation:maDRegion 1.6s ease-in-out infinite;animation-delay:var(--d,0s)}
/* air-gapped */
.ma-dsever{stroke:#ff6b6b;stroke-width:1.8;stroke-dasharray:4 6;opacity:.55}
.ma-dgap circle{fill:rgba(255,90,90,.12);stroke:#ff6b6b;stroke-width:1.8}
.ma-dgap path{stroke:#ff6b6b}
.ma-dcore-g--secure .ma-dcore{fill:#84BD00}
.ma-dpulse{animation:maDSecure 2.6s ease-out infinite}
@keyframes maDSecure{0%{stroke-opacity:.6;r:24}100%{stroke-opacity:0;r:40}}
.ma-deploy__env{
    font-family:var(--font-display);font-size:26px;font-weight:700;
    color:var(--c-white);margin-bottom:12px;
    transition:opacity .3s ease;
}
.ma-deploy__desc{font-size:16px;line-height:1.7;color:var(--c-grey);margin-bottom:18px;max-width:440px;transition:opacity .3s ease}
.ma-deploy__tags{display:flex;flex-wrap:wrap;gap:10px}
.ma-deploy__tags span{
    font-family:var(--font-mono);font-size:11px;color:var(--c-grey);
    padding:6px 12px;border:1px solid var(--c-line);border-radius:100px;
    background:rgba(132,189,0,.04);
}
.ma-deploy__fade{opacity:0}

/* ---------- STATUS CONSOLE ---------- */
.ma-glance{text-align:left}
.ma-glance .container{display:flex;flex-direction:column}
.ma-console{
    margin-top:28px;border:1px solid var(--c-line);border-radius:var(--radius);
    overflow:hidden;font-family:var(--font-mono);
    background:rgba(14,17,22,.5);
}
.ma-console__row{
    display:grid;grid-template-columns:14px 180px 1fr auto;
    gap:18px;align-items:center;
    padding:20px 24px;border-bottom:1px solid var(--c-line);
    transition:background .3s ease;
}
.ma-console__row:last-child{border-bottom:none}
.ma-console__row:hover{background:rgba(132,189,0,.04)}
.ma-console__led{
    width:10px;height:10px;border-radius:50%;
    background:var(--c-primary);box-shadow:0 0 10px var(--c-primary-glow);
    animation:livePulse 2.4s ease-in-out infinite;
}
.ma-console__row:nth-child(2) .ma-console__led{animation-delay:.4s}
.ma-console__row:nth-child(3) .ma-console__led{animation-delay:.8s}
.ma-console__row:nth-child(4) .ma-console__led{animation-delay:1.2s}
.ma-console__row:nth-child(5) .ma-console__led{animation-delay:1.6s}
.ma-console__key{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary);font-weight:600}
.ma-console__val{font-family:var(--font-body);font-size:15px;color:var(--c-grey)}
.ma-console__row:hover .ma-console__val{color:var(--c-white)}
.ma-console__state{
    font-size:11px;letter-spacing:.1em;color:var(--c-primary);
    padding:5px 12px;border:1px solid rgba(132,189,0,.3);border-radius:100px;
    background:rgba(132,189,0,.06);
}
.reveal-stagger.visible .ma-console__row{opacity:1;transform:translateY(0)}
.reveal-stagger .ma-console__row{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out-expo),transform .5s var(--ease-out-expo)}
.reveal-stagger.visible .ma-console__row:nth-child(1){transition-delay:.05s}
.reveal-stagger.visible .ma-console__row:nth-child(2){transition-delay:.12s}
.reveal-stagger.visible .ma-console__row:nth-child(3){transition-delay:.19s}
.reveal-stagger.visible .ma-console__row:nth-child(4){transition-delay:.26s}
.reveal-stagger.visible .ma-console__row:nth-child(5){transition-delay:.33s}

/* ---------- FINAL CTA ---------- */
.ma-cta{position:relative;overflow:hidden;padding:170px 0}
.ma-cta__floor{
    position:absolute;left:0;right:0;bottom:0;height:55%;
    background-image:linear-gradient(rgba(132,189,0,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(132,189,0,.12) 1px,transparent 1px);
    background-size:50px 50px;
    transform:perspective(400px) rotateX(60deg);
    transform-origin:bottom center;
    mask-image:linear-gradient(to top,black,transparent 80%);
    -webkit-mask-image:linear-gradient(to top,black,transparent 80%);
    animation:maFloor 8s linear infinite;
}
@keyframes maFloor{to{background-position:0 50px}}
.ma-cta__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.ma-cta .cta-band__inner{position:relative;z-index:2}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
    .ma-hero{padding:130px 0 70px;min-height:auto}
    .ma-hero__inner{grid-template-columns:1fr;gap:44px}
    .ma-hero__left{max-width:none}
    .ma-engine{max-width:560px;margin:0 auto}
    .ma-scroll{height:auto}
    .ma-scroll__sticky{position:relative;height:auto;padding:90px 0}
    .ma-scroll__inner{grid-template-columns:1fr;gap:36px}
    .ma-play{grid-template-columns:1fr;gap:20px}
    .ma-play__panel{position:relative;top:0}
    .ma-gov__inner{grid-template-columns:1fr;gap:40px}
    .ma-deploy__stage{grid-template-columns:1fr;gap:24px}
}
@media (max-width:768px){
    .ma-play__board{grid-template-columns:repeat(2,1fr)}
    .ma-console__row{grid-template-columns:14px 1fr;gap:10px}
    .ma-console__key{grid-column:2}
    .ma-console__val{grid-column:2}
    .ma-console__state{grid-column:2;justify-self:start}
    .ma-graph{height:560px}
    .ma-node{max-width:130px;padding:10px 12px}
    .ma-node__label{font-size:11px}
}
@media (max-width:480px){
    .ma-play__board{grid-template-columns:1fr}
    .ma-env{min-width:100%}
    .ma-engine__stage{height:320px}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    .ma-orbit,.ma-wave,.ma-core__ball,.ma-core__glow,.ma-folder,.ma-alert,
    .ma-stack__flow,.ma-dflow,.ma-dregion,.ma-dled,.ma-dbound,.ma-dpulse,.ma-dcore-g,.ma-scan::after,.ma-panic,
    .ma-node__dot,.ma-console__led,.ma-play__live-dot,.ma-engine__sysdot,
    .ma-cta__floor,.ma-drift-dot,.ma-ctrl.is-drift{
        animation:none!important;
    }
    .ma-scroll{height:auto}
    .ma-scroll__sticky{position:relative;height:auto;padding:80px 0}
}