/* ===== AEPS section ===== */
.ae-head{max-width:760px; margin:0 auto 46px; text-align:center;}
.ae-tag, .ap-tag{display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:100px; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:#e5f3ed; color:#0E6B54; margin-bottom:16px;}
.ae-head h2{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 14px; color:#0b1512;}
.ae-head p{color:#4a5a54; font-size:1.05rem; line-height:1.75; margin:0;}
.ae-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,70px); align-items:center;}
.ae-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px;}
.ae-card{padding:20px; border-radius:20px; background:#fff; border:1px solid rgba(14,107,84,.14); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.ae-card:hover{transform:translateY(-4px); border-color:#F3B400; box-shadow:0 18px 36px -16px rgba(8,74,59,.25);}
.ae-card span{width:44px; height:44px; border-radius:13px; background:#0E6B54; color:#F3B400; display:grid; place-items:center; font-size:1.3rem; margin-bottom:12px;}
.ae-card h4{margin:0 0 4px; font-size:1rem; color:#0b1512;} .ae-card p{margin:0; font-size:.86rem; line-height:1.55; color:#5b6b66;}
.ae-points{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px;}
.ae-points li{display:flex; gap:10px; color:#33423d; font-size:.95rem;} .ae-points i{color:#0E6B54; font-size:1.2rem; flex-shrink:0;}
.ae-cta, .ap-cta{display:flex; flex-wrap:wrap; gap:12px;}
.ae-btn, .ap-btn{display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:100px; background:#F3B400; color:#0b1512; font-weight:700; font-size:.92rem; text-decoration:none; transition:transform .25s ease;}
.ae-btn:hover, .ap-btn:hover{transform:translateY(-2px);}
.ae-btn.ghost{background:none; border:1.5px solid rgba(14,107,84,.4); color:#0E6B54;}
.ae-right{display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:center;}
.ae-device{position:relative; width:240px; height:440px; border-radius:36px; background:#0b1512; padding:12px; box-shadow:0 36px 70px -24px rgba(5,40,31,.6); border:2px solid #1d2b26;}
.ae-notch{position:absolute; top:10px; left:50%; width:70px; height:18px; margin-left:-35px; border-radius:12px; background:#0b1512; z-index:2;}
.ae-screen{height:100%; border-radius:26px; background:linear-gradient(180deg,#fff,#eef7f3); overflow:hidden; padding:42px 16px 16px;}
.ae-dots{position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:6px;} .ae-dots i{width:6px; height:6px; border-radius:50%; background:#cfdad6; transition:all .3s ease;} .ae-dots i.on{width:18px; border-radius:6px; background:#F3B400;}
.ae-s{animation:aeIn .5s ease both;} @keyframes aeIn{from{opacity:0; transform:translateY(10px);}}
.ae-s small{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#C98A00; font-weight:700;} .ae-s h5{margin:4px 0 16px; font-size:1.05rem; color:#0b1512;}
.ae-in{display:flex; gap:6px;} .ae-in span{flex:1; text-align:center; padding:11px 0; border-radius:10px; background:#fff; border:1.5px solid #cfdad6; font-weight:700; letter-spacing:.06em; font-size:.82rem;}
.ae-key{margin-top:18px; padding:11px; text-align:center; border-radius:12px; background:#0E6B54; color:#fff; font-weight:700; font-size:.85rem;}
.ae-bank, .ae-chip{display:flex; align-items:center; gap:10px; padding:12px; margin-bottom:9px; border-radius:12px; background:#fff; border:1.5px solid #e1e9e5; font-size:.82rem; font-weight:600; color:#33423d;}
.ae-bank i{color:#0E6B54; font-size:1.2rem;} .ae-bank.on, .ae-chip.on{border-color:#F3B400; background:#fff8e1;}
.ae-c{text-align:center;} .ae-c p{font-size:.82rem; color:#5b6b66; margin:12px 0 0;}
.ae-fp{position:relative; width:110px; height:110px; margin:10px auto 0; border-radius:50%; background:#e5f3ed; display:grid; place-items:center; font-size:3.4rem; color:#0E6B54; overflow:hidden;}
.ae-fp b{position:absolute; left:0; right:0; height:3px; background:#F3B400; box-shadow:0 0 12px #F3B400; animation:aeScan 1.4s ease-in-out infinite;} @keyframes aeScan{0%{top:6%;}50%{top:92%;}100%{top:6%;}}
.ae-tick{width:84px; height:84px; margin:14px auto 14px; border-radius:50%; background:#0E6B54; color:#F3B400; display:grid; place-items:center; font-size:2.4rem; animation:aePop .6s cubic-bezier(.2,1.5,.4,1) both;} @keyframes aePop{from{transform:scale(0);}}
.ae-ok em{display:block; margin-top:10px; font-style:normal; font-size:.74rem; color:#8a99a5; letter-spacing:.04em;}
.ae-steps{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.ae-steps li{display:flex; gap:12px; align-items:center; padding:11px 13px; border-radius:14px; background:#fff; border:1px solid rgba(14,107,84,.12); cursor:pointer; transition:all .25s ease;}
.ae-steps li b{width:30px; height:30px; border-radius:50%; background:#e5f3ed; color:#0E6B54; display:grid; place-items:center; font-size:.82rem; flex-shrink:0; transition:all .25s ease;}
.ae-steps strong{display:block; font-size:.88rem; color:#0b1512;} .ae-steps span{display:block; font-size:.74rem; color:#6b7a75; line-height:1.35;}
.ae-steps li.is-on{background:#0E6B54; border-color:#0E6B54; transform:translateX(6px);} .ae-steps li.is-on strong{color:#fff;} .ae-steps li.is-on span{color:rgba(255,255,255,.72);} .ae-steps li.is-on b{background:#F3B400; color:#0b1512;}

/* ===== API section ===== */
.ap-sec{padding:clamp(60px,7vw,100px) 0; color:#fff; background:radial-gradient(800px 380px at 90% 0%, rgba(243,180,0,.14), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(47,167,125,.16), transparent 60%), linear-gradient(160deg,#0a1f1a,#05140f);}
.ap-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,70px); align-items:center;}
.ap-tag{background:rgba(243,180,0,.14); color:#F3B400; border:1px solid rgba(243,180,0,.35);}
.ap-left h2{font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 14px;}
.ap-left > p{color:rgba(255,255,255,.72); font-size:1.02rem; line-height:1.75; margin:0 0 24px;}
.ap-points{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:14px;}
.ap-points li{display:flex; gap:14px; align-items:flex-start;}
.ap-points li > i{width:42px; height:42px; border-radius:12px; background:rgba(243,180,0,.14); border:1px solid rgba(243,180,0,.4); color:#F3B400; display:grid; place-items:center; font-size:1.2rem; flex-shrink:0;}
.ap-points b{display:block; font-size:.98rem;} .ap-points span{display:block; font-size:.84rem; color:rgba(255,255,255,.6); margin-top:2px;}
.ap-btn.ghost{background:none; border:1.5px solid rgba(255,255,255,.4); color:#fff;}
.ap-eps{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.ap-eps button{padding:9px 16px; border-radius:100px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s ease;}
.ap-eps button.is-on{background:#F3B400; color:#0b1512; border-color:#F3B400;}
.ap-win{border-radius:20px; overflow:hidden; background:#0b1512; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -30px rgba(0,0,0,.7);}
.ap-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:#111f1a; border-bottom:1px solid rgba(255,255,255,.08);}
.ap-d{width:11px; height:11px; border-radius:50%;} .ap-d.r{background:#ff5f56;} .ap-d.y{background:#ffbd2e;} .ap-d.g{background:#27c93f;}
.ap-langs{display:flex; gap:4px; margin-left:14px;} .ap-langs button{padding:5px 12px; border-radius:8px; border:0; background:none; color:rgba(255,255,255,.55); font-family:inherit; font-size:.76rem; font-weight:600; cursor:pointer;} .ap-langs button.is-on{background:rgba(243,180,0,.16); color:#F3B400;}
.ap-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; color:#27c93f; letter-spacing:.06em; text-transform:uppercase;} .ap-live i{width:7px; height:7px; border-radius:50%; background:#27c93f; animation:apBlink 1.2s infinite;} @keyframes apBlink{50%{opacity:.25;}}
.ap-code, .ap-resp pre{margin:0; padding:18px 20px; font-family:ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace; font-size:.8rem; line-height:1.7; color:#cdd9d4; overflow-x:auto; white-space:pre;}
.ap-code{min-height:268px;}
.ap-code .c{color:#6b8078; font-style:italic;} .ap-code .s, .ap-resp .s{color:#a5e8c3;} .ap-code .k, .ap-resp .k{color:#F3B400;} .ap-code .n, .ap-resp .n{color:#7fb8ff;}
.cur{display:inline-block; width:8px; height:15px; margin-left:1px; vertical-align:-2px; background:#F3B400; animation:apBlink .9s steps(1) infinite;}
.ap-run{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#111f1a; border-top:1px solid rgba(255,255,255,.08);}
.ap-run button{display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:100px; border:0; background:#27c93f; color:#04210d; font-family:inherit; font-weight:800; font-size:.8rem; cursor:pointer; transition:transform .2s ease;} .ap-run button:hover{transform:translateY(-2px);}
.ap-run span{font-size:.76rem; color:rgba(255,255,255,.55);}
.ap-resp{display:none; border-top:1px solid rgba(255,255,255,.08); background:#07110d;} .ap-resp.on{display:block; animation:aeIn .4s ease both;}
.ap-resp-h{display:flex; justify-content:space-between; align-items:center; padding:10px 20px 0; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700;} .ap-resp-h em{font-style:normal; color:#27c93f; background:rgba(39,201,63,.12); padding:3px 9px; border-radius:6px;}
.ap-resp pre{min-height:150px; padding-top:8px;}

@media(max-width:1000px){.ae-grid, .ap-grid{grid-template-columns:1fr;} .ae-right{grid-template-columns:1fr; justify-items:center;} .ae-steps{width:100%;}}
@media(max-width:560px){.ae-cards{grid-template-columns:1fr;} .ap-code{font-size:.72rem;}}
@media(prefers-reduced-motion:reduce){.ae-fp b, .ap-live i, .cur{animation:none;}}

.ap-sec h2, .ap-sec h3{color:#fff;}
.ap-sec .ap-points b{color:#fff;}


/* inline use inside article pages */
.ap-win{margin-top:14px;} .ap-eps{margin-top:6px;}
.ae-inline{grid-template-columns:240px 1fr; margin-top:10px;}
.ar-card .ae-steps strong{font-size:.88rem;} .ar-card .ae-steps span{font-size:.76rem; line-height:1.35; color:#6b7a75;}
.ar-card .ae-steps li.is-on span{color:rgba(255,255,255,.75);} .ar-card .ae-steps li.is-on strong{color:#fff;}
.ar-card .ae-s h5{font-size:1.05rem; margin:4px 0 16px; padding:0; border:0;}
.ar-card .ap-code, .ar-card .ap-resp pre{font-size:.78rem; line-height:1.65; margin:0; color:#cdd9d4;}
.ae-inline > *, .ap-win{min-width:0;}
@media(max-width:760px){.ae-inline{grid-template-columns:1fr; justify-items:center;} .ae-steps{width:100%;} .ae-steps li.is-on{transform:none;} .ap-eps button{padding:8px 12px; font-size:.76rem;} .ap-code{min-height:230px; font-size:.7rem; padding:14px;}}

.ar-card .ap-eps button{color:#33423d; background:#fff; border-color:rgba(14,107,84,.25);}
.ar-card .ap-eps button:hover{border-color:#F3B400;}
.ar-card .ap-eps button.is-on{background:#F3B400; color:#0b1512; border-color:#F3B400;}