/* About / portfolio page. Uses the site tokens from screen.css. */
.ab-hero{position:relative;overflow:hidden;background:#0E2A2F;color:#F7FAF8;padding-block:56px 0}
#ab-sun{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.ab-hero-in{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:center}
.ab-photo{position:relative;margin:0;width:240px;height:240px}
.ab-photo img{position:absolute;inset:20px;width:200px;height:200px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:4px solid #0E2A2F}
.ab-ring{position:absolute;inset:0;width:240px;height:240px;transform:rotate(-90deg)}
.ab-ring circle{fill:none;stroke:#F2A93B;stroke-width:5;stroke-linecap:round;stroke-dasharray:654;stroke-dashoffset:654;animation:ab-charge 2.4s .3s ease-out forwards}
@keyframes ab-charge{to{stroke-dashoffset:0}}
.ab-hero .label{color:rgba(247,250,248,.7)}
.ab-hero h1{font-size:clamp(40px,6vw,68px);font-weight:800;letter-spacing:-.02em;margin:6px 0 8px;color:#F7FAF8}
.ab-role{font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:600;color:#F2B65A;margin:0 0 12px}
.ab-intro p{max-width:60ch;color:rgba(247,250,248,.85)}
.ab-hero .btn{background:#F7FAF8;color:#0E2A2F;border-color:#F7FAF8}
.ab-hero .btn.ghost{background:transparent;color:#F7FAF8}
.ab-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:48px 0 0;background:rgba(247,250,248,.12);border-radius:14px 14px 0 0;overflow:hidden}
.ab-stats div{background:#0E2A2F;padding:18px 20px}
.ab-stats dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,250,248,.6)}
.ab-stats dd{margin:4px 0 0;font-family:var(--display);font-weight:800;font-size:24px;color:#F7FAF8}
@media (max-width:760px){.ab-hero-in{grid-template-columns:1fr;gap:24px}.ab-stats{grid-template-columns:1fr 1fr}}

.ab-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ab-services article{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ab-services h3{font-size:20px;font-weight:600}
.ab-services p{margin:0;color:var(--muted);font-size:16px}
.ab-services a{color:var(--wind)}
.ab-ico{font-size:28px}
.ab-projects{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.ab-services,.ab-projects{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ab-services,.ab-projects{grid-template-columns:1fr}}

/* career as a power line: the fill grows with scroll, nodes light up as the pulse reaches them */
.ab-path{--p:0;position:relative;list-style:none;margin:0;padding:0 0 0 44px;display:flex;flex-direction:column;gap:26px}
.ab-path::before,.ab-path::after{content:"";position:absolute;left:14px;top:6px;width:4px;border-radius:2px}
.ab-path::before{bottom:6px;background:var(--line)}
.ab-path::after{height:calc((100% - 12px) * var(--p));background:linear-gradient(var(--sun),var(--wind));box-shadow:0 0 12px var(--sun)}
.ab-node{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start}
.ab-node::before{content:"";position:absolute;left:-38px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--line);transition:all .4s;z-index:1}
.ab-node.lit::before{border-color:var(--sun);background:var(--sun);box-shadow:0 0 0 6px color-mix(in srgb,var(--sun) 25%,transparent)}
.ab-when{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:4px}
.ab-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:border-color .4s,transform .4s}
.ab-node.lit .ab-card{border-color:color-mix(in srgb,var(--sun) 55%,var(--line))}
.ab-card h3{font-size:21px;font-weight:700}
.ab-where{font-family:var(--mono);font-size:12.5px;color:var(--wind);margin:2px 0 8px}
.ab-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:16px}
@media (max-width:700px){.ab-node{grid-template-columns:1fr;gap:6px}}

/* software toolkit as a PV array */
.ab-array{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;background:#5B6470;border-radius:10px;transform:perspective(900px) rotateX(8deg)}
.ab-panel{position:relative;overflow:hidden;min-height:110px;padding:16px;border-radius:4px;color:#EAF2FF;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  background:linear-gradient(135deg,#1F3B73,#13264d);
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(135deg,#21407c,#122449);
  background-size:22px 22px,22px 22px,100% 100%}
.ab-panel::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-60%);transition:transform .9s}
.ab-panel:hover::after,.ab-array.lit .ab-panel::after{transform:translateX(60%)}
.ab-panel b{font-family:var(--display);font-size:20px}
.ab-panel span{font-family:var(--mono);font-size:11.5px;opacity:.8}
@media (max-width:700px){.ab-array{grid-template-columns:1fr 1fr;transform:none}}

.ab-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
.ab-h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;margin:4px 0 16px}
.ab-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ab-list li{display:flex;flex-direction:column;border-left:3px solid var(--sun);padding-left:14px}
.ab-list b{font-family:var(--display);font-size:17px}
.ab-list span{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ab-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ab-badges li{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:12.5px}
.ab-langs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ab-langs li{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;font-family:var(--mono);font-size:13px}
.ab-langs i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--wind) var(--v),var(--chip) var(--v))}
.ab-langs em{font-style:normal;color:var(--muted)}
@media (max-width:800px){.ab-two{grid-template-columns:1fr}}

.ab-cta{background:linear-gradient(120deg,#0E2A2F,#123c43);color:#F7FAF8;text-align:center}
.ab-cta .wrap{padding-block:56px}
.ab-cta h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:#F7FAF8}
.ab-cta p{max-width:56ch;margin:10px auto 22px;color:rgba(247,250,248,.82)}
.ab-cta .actions{justify-content:center}
.ab-cta .btn{background:#F2A93B;border-color:#F2A93B;color:#1b1205}
.ab-cta .btn.ghost{background:transparent;color:#F7FAF8;border-color:#F7FAF8}
@media (prefers-reduced-motion:reduce){.ab-ring circle{animation:none;stroke-dashoffset:0}.ab-panel::after{display:none}}
.ab-now{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#1b1205;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px}
.ab-intro p a{color:#F2B65A}