/* ---------- ABOUT ---------- */
.ab{position:relative;isolation:isolate;overflow:hidden;padding:96px 0;color:#fff;
  background:linear-gradient(160deg,var(--navy-dark),var(--navy) 55%,#1d4fae)}
.ab::before,.ab::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.ab::before{width:520px;height:520px;left:-180px;top:-220px;background:radial-gradient(circle,rgba(255,193,7,.16),transparent 70%)}
.ab::after{width:640px;height:640px;right:-240px;bottom:-320px;background:radial-gradient(circle,rgba(120,170,255,.22),transparent 70%)}
/* The two background glows drift slowly */
.ab::before{animation:abDrift 14s ease-in-out infinite alternate}
.ab::after{animation:abDrift 18s ease-in-out infinite alternate-reverse}
@keyframes abDrift{to{transform:translate(90px,60px) scale(1.15)}}
.ab-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}

/* Blocks rise in one after another once the section scrolls into view (only when the script is running) */
.ab.js .ab-rv{opacity:0;transform:translateY(32px);filter:blur(8px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease;transition-delay:calc(var(--i,0)*.12s)}
.ab.js.is-in .ab-rv{opacity:1;transform:none;filter:none}

/* ---------- system diagram card ---------- */
.ab-visual{--px:0;--py:0;position:relative;isolation:isolate}
.ab-visual::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;background:var(--yellow);transform:rotate(-3deg);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.ab-visual:hover::before{transform:rotate(-4.5deg) scale(1.01)}
/* The yellow backing swings out from behind the card once the card has landed */
.ab.js .ab-visual::before{opacity:0;transform:rotate(0) scale(.94)}
.ab.js.is-in .ab-visual::before{opacity:1;transform:rotate(-3deg);transition-delay:.55s}
.ab.js.is-in .ab-visual:hover::before{transform:rotate(-4.5deg) scale(1.01);transition-delay:0s}
/* The card leans a little towards the pointer */
.ab-card{background:#fff;color:var(--text);border-radius:24px;padding:20px;box-shadow:0 30px 60px rgba(10,8,50,.35);
  transform:perspective(1100px) rotateY(calc(var(--px)*7deg)) rotateX(calc(var(--py)*-7deg));transition:transform .5s ease-out}
.ab-fig{position:relative}
.ab-img{position:relative;display:block;overflow:hidden;border-radius:12px}
.ab-img img{display:block;width:100%;height:auto}
/* Image reveal: a yellow curtain sweeps across, and the picture settles in behind it */
.ab-img::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(0)}
.ab.js.is-in .ab-img::after{animation:abCurtain 1.2s .3s cubic-bezier(.7,0,.2,1) backwards}
.ab.js.is-in .ab-img img{animation:abImg 1.2s .3s cubic-bezier(.7,0,.2,1) backwards}
@keyframes abCurtain{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes abImg{0%,49%{opacity:0;transform:scale(1.18)}50%{opacity:1;transform:scale(1.18)}100%{transform:none}}
/* Hotspots, chips and the hint follow the image in */
.ab-dev:nth-of-type(2),.ab-key:nth-child(2){--n:1}
.ab-dev:nth-of-type(3),.ab-key:nth-child(3){--n:2}
.ab-dev:nth-of-type(4),.ab-key:nth-child(4){--n:3}
.ab.js.is-in .ab-dev{animation:abPop .5s cubic-bezier(.2,.9,.3,1.6) backwards;animation-delay:calc(1.35s + var(--n,0)*.12s)}
.ab.js.is-in .ab-key{animation:abUp .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(1s + var(--n,0)*.08s)}
.ab.js.is-in .ab-info{animation:abUp .5s 1.35s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes abPop{from{opacity:0;transform:scale(0)}}
@keyframes abUp{from{opacity:0;transform:translateY(14px)}}

/* Hotspots sit on the diagram at the device they describe */
.ab-dev{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px #fff,0 4px 10px rgba(15,12,60,.35);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4),background .2s,opacity .3s}
.ab-dev::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yellow);animation:abPing 2s ease-out infinite;animation-delay:calc(var(--n,0)*.3s)}
.ab-dev::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--navy-dark);transition:background .2s}
@keyframes abPing{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}
.ab-dev:hover{transform:scale(1.2)}
.ab-dev:focus-visible,.ab-key:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* Picking a device dims the other hotspots */
.ab-card.has-on .ab-dev{opacity:.4}
.ab-card.has-on .ab-dev.is-on{opacity:1;transform:scale(1.35);background:var(--navy)}
.ab-card.has-on .ab-dev.is-on::before{background:var(--navy)}
.ab-card.has-on .ab-dev.is-on::after{background:var(--yellow)}

.ab-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ab-key{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:700;color:var(--navy);
  transition:background .2s,color .2s,transform .15s,box-shadow .2s}
.ab-key i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff}
.ab-key:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(34,28,134,.15)}
.ab-key[aria-pressed="true"]{background:var(--navy);color:#fff}
.ab-info{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:13.5px;line-height:1.5;color:var(--muted);min-height:64px}
.ab-info b{color:var(--navy)}
.ab-info.swap{animation:abSwap .35s ease}
@keyframes abSwap{from{opacity:0;transform:translateY(6px)}}

/* ---------- copy ---------- */
.ab-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--yellow);
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ab-title{margin-top:18px;font-size:clamp(28px,3.4vw,44px);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.ab-title em{font-style:normal;color:var(--yellow)}
/* Text reveal: the script wraps each word, and the words rise out of their own line one after another */
.ab-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.ab-w > span{display:inline-block}
.ab.js .ab-w > span{transform:translateY(115%) rotate(6deg);transform-origin:left bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.3s + var(--n,0)*.07s)}
.ab.js.is-in .ab-w > span{transform:none}

.ab-tabs{position:relative;display:inline-flex;gap:4px;margin-top:26px;padding:5px;border-radius:999px;background:rgba(255,255,255,.1)}
/* The yellow pill slides under whichever tab is selected */
.ab-tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:999px;background:var(--yellow);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1)}
.ab-tab{position:relative;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;color:rgba(255,255,255,.8);white-space:nowrap;transition:color .25s}
.ab-tab:hover{color:#fff}
.ab-tab[aria-selected="true"]{color:var(--navy-dark)}
.ab-tab:focus-visible,.ab-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Panels share one grid cell, so the block is always as tall as its tallest panel */
.ab-panels{display:grid;margin-top:22px}
.ab-panel{grid-area:1/1;visibility:hidden;opacity:0;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.84)}
.ab-panel.is-active{visibility:visible;opacity:1;animation:abPanel .5s cubic-bezier(.2,.8,.2,1)}
@keyframes abPanel{from{opacity:0;transform:translateY(14px)}}
.ab-panel strong{color:#fff}
.ab-why{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.ab-why li{display:flex;gap:12px;font-size:14.5px;line-height:1.5}
.ab-why svg{width:24px;height:24px;flex-shrink:0;color:var(--yellow)}
.ab-why b{display:block;color:#fff;font-size:15.5px}

.ab-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;border-radius:10px;font-weight:700;font-size:15.5px;white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.ab-btn svg{width:18px;height:18px;transition:transform .2s}
.ab-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,8,50,.3)}
.ab-btn:hover svg{transform:translateX(4px)}
.ab-btn:active{transform:scale(.97)}
.ab-btn.yellow{background:var(--yellow);color:var(--navy-dark)}
.ab-btn.yellow:hover{background:#ffd043}
.ab-btn.ghost{border:1.5px solid rgba(255,255,255,.45)}
.ab-btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

@media (prefers-reduced-motion:reduce){
  .ab *,.ab *::before,.ab *::after{animation:none!important;transition:none!important}
  .ab.js .ab-rv{opacity:1;transform:none}
}