/* r36: WOW sections - bento, snippets, timeline, security panel */
.bento,.forg,.tl,.secp{--g:#1CA638;--gl:rgba(28,166,56,.35);--b:#30363D;--s:#161B22}
/* gradient-border card base */
.bc,.fc,.secp{position:relative;background:linear-gradient(180deg,rgba(28,166,56,.06),rgba(22,27,34,0) 40%),#161B22;border:1px solid #30363D;border-radius:20px;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.bc:before,.fc:before,.secp:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(28,166,56,.55),transparent 35%,transparent 65%,rgba(28,166,56,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;transition:opacity .3s}
.bc:hover,.fc:hover{border-color:rgba(28,166,56,.45);box-shadow:0 0 0 1px rgba(28,166,56,.15),0 20px 60px -20px rgba(28,166,56,.35);transform:translateY(-2px)}
.bc:hover:before,.fc:hover:before{opacity:1}
.kk{display:inline-block;font:600 11px/16px var(--ef-font-family-body);letter-spacing:.08em;text-transform:uppercase;color:#3CC165;margin-bottom:8px}
/* bento */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
.bc{padding:24px}
.bc h3{margin:0 0 8px;font-size:20px;line-height:28px}.bc p{margin:0;color:#ADBAC7;font-size:15px;line-height:23px}
.bc.big{display:grid;gap:24px;background:radial-gradient(600px 300px at 80% 0%,rgba(28,166,56,.16),transparent 60%),#161B22}
.bc.big h3{font-size:26px;line-height:34px}
@media (min-width:900px){.bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto}.bc.big{grid-column:span 2;grid-row:span 2;padding:32px;grid-template-rows:auto 1fr}}
.pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 12px;border:1px solid #30363D;border-radius:999px;background:#0D1117;color:#ADBAC7;font:500 13px/18px var(--ef-font-family-body)}
.pill svg{color:#3CC165}.pill .dot{width:8px;height:8px;border-radius:50%;background:#1CA638;box-shadow:0 0 0 0 rgba(28,166,56,.6);animation:wpulse 2s infinite}
/* sync visual */
.syncv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0;align-self:end}
.node{padding:14px 16px;border:1px solid #30363D;border-radius:14px;background:#0D1117;display:flex;flex-direction:column;gap:2px;box-shadow:0 0 30px -10px rgba(28,166,56,.4)}
.node b{font:700 15px/20px var(--ef-font-family-body);color:#E6EDF3}.node span{font-size:11px;color:#8B949E}
.node.n2{border-color:rgba(28,166,56,.5)}
.pipe{position:relative;height:2px;margin:0 10px;background:linear-gradient(90deg,#30363D,rgba(28,166,56,.6),#30363D)}
.pipe i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#3CC165;box-shadow:0 0 12px 2px rgba(28,166,56,.8);animation:wflow 2.4s linear infinite;opacity:0}
.pipe i:nth-child(2){animation-delay:.8s}.pipe i:nth-child(3){animation-delay:1.6s}
.rowsv{grid-column:1/-1;margin-top:16px;border:1px solid #30363D;border-radius:12px;background:#0D1117;overflow:hidden}
.rowsv div{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:10px 14px;font:500 13px/18px var(--ef-font-family-body);color:#ADBAC7;border-top:1px solid #21262D;animation:wrow 6s ease-in-out infinite}
.rowsv div:first-child{border-top:0}.rowsv div:nth-child(2){animation-delay:2s}.rowsv div:nth-child(3){animation-delay:4s}
.rowsv em{font-style:normal;font-weight:600}.pos{color:#3CC165}.neg{color:#F0686C}
/* who it's for */
.forg{gap:16px}.fc{padding:20px 22px 24px}
.fc h3{margin:18px 0 6px}.fc p{margin:0;color:#ADBAC7}
.snip{border:1px solid #30363D;border-radius:12px;background:#0D1117;padding:6px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;font:500 13px/18px var(--ef-font-family-body);color:#ADBAC7}
.srow+.srow{border-top:1px solid #21262D}.srow b{font-weight:600;color:#E6EDF3;white-space:nowrap}
.srow.lnk{justify-content:flex-start;color:#3CC165}.srow.lnk span{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* timeline */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:28px;position:relative}
.tl li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.tn{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 18px/1 var(--ef-font-family-body);color:#0A0A0A;background:radial-gradient(circle at 30% 30%,#4ED36B,#1CA638);box-shadow:0 0 0 6px rgba(28,166,56,.15),0 0 30px 4px rgba(28,166,56,.45)}
.tl:before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,rgba(28,166,56,.9),rgba(28,166,56,.2));box-shadow:0 0 12px rgba(28,166,56,.6)}
.tc h3{margin:10px 0 6px}.tc p{margin:0;color:#ADBAC7}.tc .code{display:inline-block;margin-top:12px}
@media (min-width:900px){.tl{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.tl li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
 .tl:before{left:16.66%;right:16.66%;top:23px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,rgba(28,166,56,.25),rgba(28,166,56,.95),rgba(28,166,56,.25))}
 .tc{max-width:340px}.tc h3{margin-top:0}}
/* security */
.secp{display:grid;gap:28px;padding:28px;background:radial-gradient(500px 360px at 20% 50%,rgba(28,166,56,.18),transparent 65%),#161B22}
.shv{position:relative;height:220px;display:flex;align-items:center;justify-content:center}
.shield{position:relative;z-index:1;width:120px;height:120px;border-radius:32px;display:flex;align-items:center;justify-content:center;color:#3CC165;background:linear-gradient(160deg,rgba(28,166,56,.25),rgba(13,17,23,.9));border:1px solid rgba(28,166,56,.5);box-shadow:0 0 60px 10px rgba(28,166,56,.35)}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(28,166,56,.35)}.ring.r1{width:180px;height:180px;animation:wring 4s ease-out infinite}.ring.r2{width:180px;height:180px;animation:wring 4s ease-out 2s infinite}
.spts{display:grid;gap:12px}
.sp{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid #30363D;border-radius:14px;background:rgba(13,17,23,.6)}
.si{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(28,166,56,.16);color:#3CC165}
.sp h3{margin:0 0 4px;font-size:16px;line-height:22px}.sp p{margin:0;color:#ADBAC7;font-size:14px;line-height:21px}
@media (min-width:900px){.secp{grid-template-columns:5fr 7fr;align-items:center;padding:40px}.shv{height:320px}.shield{width:150px;height:150px}.ring.r1,.ring.r2{width:230px;height:230px}.spts{grid-template-columns:1fr 1fr}}
/* scroll-in (progressive) */
@supports (animation-timeline: view()){.wow-in>*{animation:wup linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}
@keyframes wup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes wflow{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes wpulse{0%{box-shadow:0 0 0 0 rgba(28,166,56,.6)}70%{box-shadow:0 0 0 8px rgba(28,166,56,0)}100%{box-shadow:0 0 0 0 rgba(28,166,56,0)}}
@keyframes wrow{0%,70%,100%{background:transparent}10%,30%{background:rgba(28,166,56,.10)}}
@keyframes wring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.wow-in>*,.pipe i,.pill .dot,.rowsv div,.ring{animation:none!important}.pipe i{opacity:0}.bc,.fc{transition:none}}
.tl li{align-content:start}.tl .tc h3{margin-top:0}.secp h3{hyphens:none;word-break:normal;overflow-wrap:normal}
.forg .card.fc{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px}.forg .card.fc .snip{width:100%;margin-bottom:8px}.forg .card.fc>*{flex:none!important;max-width:none!important}.forg .srow span{white-space:nowrap}