.hero{position:relative;min-height:clamp(540px,66svh,640px);overflow:hidden;isolation:isolate;background:var(--hero-bg);display:flex;flex-direction:column}
.hero-body{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;padding:110px clamp(18px,5vw,72px) 48px}

/* hero graphic: four skills as jigsaw pieces (built in assets/index.js) */
.puzzle{--pz-violet:#A78BFA;--pz-a1:.34;--pz-a2:.10;--pz-sheen:.16;--pz-rim:rgba(255,255,255,.28);--pz-glow:.55;position:relative;margin:0;justify-self:center;width:min(100%,440px);display:flex;flex-direction:column;align-items:center;gap:18px}
:root[data-theme="light"] .puzzle{--pz-violet:#7C3AED;--pz-a1:.24;--pz-a2:.06;--pz-sheen:.7;--pz-rim:transparent;--pz-glow:.3}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .puzzle{--pz-violet:#7C3AED;--pz-a1:.24;--pz-a2:.06;--pz-sheen:.7;--pz-rim:transparent;--pz-glow:.3}}
/* soft colour light behind the glass */
.puzzle::before{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:4%;aspect-ratio:1;border-radius:50%;filter:blur(46px);opacity:var(--pz-glow);pointer-events:none;
  background:radial-gradient(circle at 22% 24%,var(--peach),transparent 46%),radial-gradient(circle at 78% 22%,var(--cyan),transparent 46%),radial-gradient(circle at 78% 78%,var(--pz-violet),transparent 46%),radial-gradient(circle at 22% 78%,var(--green),transparent 46%)}
.puzzle svg{display:block;width:100%;height:auto;overflow:visible}
.pz-piece{transform-box:fill-box;transform-origin:center;transition:transform 1s cubic-bezier(.34,1.25,.5,1),opacity .6s}
.pz-body{stroke:color-mix(in srgb,var(--c) 90%,transparent);stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--c) 22%,transparent));transition:filter .6s,stroke .6s}
.pz-sheen{stroke:var(--pz-rim);stroke-width:1;stroke-linejoin:round;pointer-events:none}
.pz-ico{color:var(--c)}
.pz-name{font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:-.02em;fill:var(--text)}
.pz-sub{font-family:var(--sans);font-size:13.5px;font-weight:500;fill:var(--soft)}
.puzzle.done .pz-body{stroke:var(--c);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 55%,transparent))}
.pz-cap{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pz-cap span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pz-cap b{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.puzzle.done .pz-cap b{opacity:1;transform:none}
.copy{max-width:min(600px,92vw);display:flex;flex-direction:column;gap:20px}
.hero h1{font-size:clamp(2.3rem,5vw,4.3rem);font-weight:800;line-height:1;letter-spacing:-.035em}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lede{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--soft);max-width:52ch}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trust b{color:var(--text);font-weight:500}

/* content sections below the hero */
.sec{padding:clamp(56px,7vw,96px) clamp(18px,5vw,72px);border-top:1px solid var(--line)}
.sec.alt{background:var(--bg-2)}
.sec-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.sec.flip .sec-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.sec.flip .sec-text{order:2}
.sec-text{display:flex;flex-direction:column;gap:20px;max-width:640px}
.sec h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;line-height:1.08}
.sec .lede{max-width:58ch}
.points{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--soft);font-size:15.5px}
.points li{position:relative;padding-left:28px}
.points li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);transform:rotate(-45deg)}
.panel-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.glance{margin:14px 0 0;display:grid}
.glance div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.glance div:first-child{border-top:0}
.glance dt{color:var(--muted)}
.glance dd{margin:0;color:var(--text);font-weight:600;text-align:right}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;margin-top:16px}
.stats b{display:block;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stats span{font-size:13.5px;color:var(--muted)}
.person{display:flex;align-items:center;gap:16px;margin-top:16px}
.avatar{width:72px;height:72px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#141006;font-weight:800;font-size:24px}
.person b{display:block;font-size:18px}
.person span{font-size:14px;color:var(--muted)}
.quote{margin:20px 0 0;padding-left:16px;border-left:2px solid var(--gold-ink);color:var(--soft);font-size:16px;font-style:italic}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero-body{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:100px}
  .puzzle{width:min(100%,380px)}
  .sec-in,.sec.flip .sec-in{grid-template-columns:minmax(0,1fr)}
  .sec.flip .sec-text{order:0}
}
.top .bar{padding:0 clamp(18px,5vw,72px)}
.globe{display:block;position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:center;border-radius:50%;transition:transform .4s}
.globe:hover{transform:scale(1.02)}
.globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.globe:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.portrait{margin:0;position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-card);background:radial-gradient(circle at 50% 38%,rgba(255,200,112,.35),rgba(255,159,110,.12) 45%,var(--panel) 75%);transition:transform .3s,border-color .3s}
.portrait:hover{transform:translateY(-4px);border-color:var(--gold-ink)}
.portrait img{position:absolute;left:0;bottom:-3.6%;width:100%;height:auto;display:block}