/* Johnny Haynes's Dev Portal: black, soft, chrome. */
:root{
  --bg:#000;--s1:#0b0b0c;--s2:#141416;--s3:#1c1c1e;
  --tx:#f5f5f7;--mu:#a1a1a6;--mu2:#6e6e73;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --g:#7fe0a8;--g-soft:rgba(127,224,168,.14);
  --r-lg:28px;--r-md:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Sora",-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Orbitron","Sora",system-ui,sans-serif;
  --chrome:linear-gradient(180deg,#ffffff 0%,#e9e9ee 18%,#9a9aa1 40%,#f4f4f7 52%,#b8b8bf 66%,#6e6e75 84%,#d9d9de 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--g-soft);color:#fff}
.chrome{color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}

/* top bar */
.bar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem max(1.4rem,calc((100vw - 1080px)/2));
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--disp);font-weight:700;letter-spacing:.12em;font-size:.86rem;text-decoration:none;color:var(--tx);white-space:nowrap}
.brand i{font-style:normal;color:var(--mu2);margin:0 .12em}
.back{position:relative;isolation:isolate;font-size:.82rem;color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line2);background:rgba(0,0,0,.25);
  text-shadow:0 1px 2px #000,0 0 6px #000;white-space:nowrap;font-weight:600}
.back:focus-visible,.buy:focus-visible,.ghost:focus-visible,.fl a:focus-visible{outline:2px solid var(--g);outline-offset:3px}
/* moving ray-trace on the Home button border */
@property --trang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes trSpin{to{--trang:360deg}}
.back.tr::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--trang),transparent 0deg,transparent 250deg,rgba(255,255,255,.55) 310deg,#fff 345deg,#f5f5f5 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:trSpin 2.8s linear infinite}
/* neon Tetris rain inside the Home button, full strength */
.back.tr .tet-rain{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none;opacity:1}
.back.tr .tet-rain canvas{display:block;width:100%;height:100%}

/* hero: CSS-only black and chrome */
.hero{position:relative;overflow:hidden;padding:7rem 1.4rem 6rem;text-align:center;
  background:
    radial-gradient(60% 55% at 50% 0%,rgba(255,255,255,.13),transparent 70%),
    radial-gradient(40% 40% at 15% 30%,rgba(190,190,200,.08),transparent 70%),
    radial-gradient(40% 40% at 85% 40%,rgba(160,160,175,.08),transparent 70%),
    #000}
.hero::before{content:"";position:absolute;left:50%;top:-30%;width:140%;height:120%;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 200deg at 50% 50%,transparent 0deg,rgba(255,255,255,.06) 40deg,transparent 80deg,rgba(255,255,255,.04) 160deg,transparent 220deg,rgba(255,255,255,.05) 300deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.hero-in{position:relative;max-width:880px;margin:0 auto}
.tag{display:inline-block;font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--g);padding:.38rem .85rem;border-radius:999px;background:var(--g-soft);margin-bottom:1.4rem}
.hero h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.1em;line-height:1.04;font-size:clamp(2.1rem,6.4vw,4.6rem);margin-right:-.08em;
  color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 18px rgba(255,255,255,.08))}
.hero h1 br{display:none}
.hero h1 span{margin-left:.28em}
.sub{max-width:620px;margin:1.4rem auto 2.2rem;color:var(--mu);font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.5}
.cta-row{display:flex;gap:.9rem;justify-content:center;align-items:center;flex-wrap:wrap}
.buy{display:inline-flex;align-items:center;gap:.75rem;padding:.95rem 1.15rem .95rem 1.6rem;border-radius:999px;background:var(--tx);color:#000;text-decoration:none;font-weight:600;font-size:1.02rem;
  box-shadow:0 8px 30px -12px rgba(255,255,255,.22);transition:transform .35s var(--ease)}
.buy:hover{transform:translateY(-2px)}
.buy b{font-weight:600;background:#000;color:var(--g);padding:.32rem .75rem;border-radius:999px;font-size:.92rem;overflow-wrap:anywhere}
.ghost{display:inline-flex;align-items:center;padding:.95rem 1.4rem;border-radius:999px;border:1px solid var(--line2);color:var(--tx);text-decoration:none;font-weight:600;font-size:1.02rem;transition:background .3s var(--ease)}
.ghost:hover{background:var(--s3)}

/* sections */
.sec{position:relative;padding:6.5rem 1.4rem}
.wrap{position:relative;max-width:1080px;margin:0 auto}
.sh{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.08;letter-spacing:.06em;margin-bottom:1rem;
  color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.sl{color:var(--mu);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:600px;margin-bottom:3rem}
.end{text-align:center}.end .sl{margin-left:auto;margin-right:auto}

/* frosted cards */
.card{background:linear-gradient(180deg,rgba(28,28,30,.72),rgba(14,14,16,.72));border:1px solid var(--line);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9);border-radius:var(--r-lg);padding:2rem 1.8rem;transition:transform .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--line2)}
.card .n{display:inline-block;color:var(--g);background:var(--g-soft);padding:.25rem .6rem;border-radius:999px;margin-bottom:1.1rem;font-size:.7rem;font-weight:600;letter-spacing:.06em}
.card h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.45rem;color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.card p{color:var(--mu);font-size:.96rem;line-height:1.6}
.proj{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;list-style:none}
.chips li{font-size:.74rem;color:var(--mu);padding:.32rem .7rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.plink{display:inline-block;margin-top:1.1rem;font-size:.86rem;color:var(--g);text-underline-offset:3px}

/* Languages & Stack: chrome-finish badges */
.stack{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem;list-style:none}
.badge{display:flex;align-items:center;gap:.85rem;padding:.75rem 1.1rem .75rem .8rem;border-radius:999px;
  background:linear-gradient(180deg,#1d1d20,#0c0c0e);border:1px solid transparent;
  background-image:linear-gradient(180deg,#1d1d20,#0c0c0e),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px -18px rgba(0,0,0,.9)}
.badge .ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#2a2a2e,#111113);border:1px solid var(--line2)}
.badge svg{width:19px;height:19px;fill:url(#chromeFill)}
.badge .bt{min-width:0}
.badge b{display:block;font-weight:700;font-size:.98rem;line-height:1.2;color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.badge small{display:block;font-size:.74rem;color:var(--mu);line-height:1.35;margin-top:.15rem}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}
.note{margin-top:1.4rem;font-size:.8rem;color:var(--mu2)}

/* contact + footer */
.contact{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.foot{border-top:1px solid var(--line);text-align:center;padding:3rem 1.4rem 3.6rem;color:var(--mu2);font-size:.86rem;line-height:2;background:var(--s1)}
.fl{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.fl a{font-size:.82rem;text-decoration:none;color:var(--mu);padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);transition:.3s var(--ease)}
.fl a:hover{color:var(--tx);background:var(--s3)}
.foot a.t{color:var(--mu);text-underline-offset:3px}

/* soft reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in,.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.back.tr::after{animation:none}.card,.buy{transition:none}}

@media (max-width:820px){.sec{padding:5rem 1.2rem}.proj{grid-template-columns:1fr}}
@media (max-width:560px){
  body{font-size:16px}
  .hero{padding:4.2rem 1.2rem 4rem}
  .hero h1{font-size:clamp(1.7rem,9.4vw,2.5rem);letter-spacing:.08em}
  .hero h1 span{display:block;margin-left:0}
  .bar{padding:.7rem 1.1rem}
  .brand{font-size:.7rem;letter-spacing:.08em}
  .back{font-size:.74rem;padding:.42rem .8rem}
  .card{padding:1.6rem 1.4rem}
  .stack{grid-template-columns:1fr}
}
/* keep the Home label readable over the brighter neon rain */
.back.tr:has(.tet-rain){text-shadow:0 1px 2px #000,0 0 5px #000,0 0 9px rgba(0,0,0,.8)}

/* MAX neon rain: boosted canvas, no dark backdrop, neon pulse on the button box (motion off under reduced-motion) */
.back.tr .tet-rain{opacity:1;mix-blend-mode:normal}
.back.tr .tet-rain canvas{filter:brightness(1.6) saturate(1.8) drop-shadow(0 0 2px rgba(0,240,255,.9)) drop-shadow(0 0 4px rgba(255,43,214,.7))}
.back.tr:has(.tet-rain){background:transparent;color:#fff;text-shadow:0 1px 1.5px rgba(0,0,0,.95);animation:nxNeonPulse 3.2s ease-in-out infinite}
@keyframes nxNeonPulse{
 0%,100%{box-shadow:0 0 10px rgba(0,240,255,.75),0 0 22px rgba(0,240,255,.45)}
 25%{box-shadow:0 0 10px rgba(255,43,214,.75),0 0 22px rgba(255,43,214,.45)}
 50%{box-shadow:0 0 10px rgba(57,255,20,.75),0 0 22px rgba(57,255,20,.45)}
 75%{box-shadow:0 0 10px rgba(255,242,0,.75),0 0 22px rgba(255,138,0,.5)}}
@media (prefers-reduced-motion:reduce){.back.tr:has(.tet-rain){animation:none;box-shadow:0 0 10px rgba(0,240,255,.6)}}

/* glow guaranteed even if canvas shadows are weak: CSS halos on the canvas itself */
.back.tr .tet-rain canvas{filter:drop-shadow(0 0 6px #00f0ff) drop-shadow(0 0 14px #ff2bd6) brightness(1.5) saturate(1.8)}

/* subtle neon accent (Oct 17, final): no canvas filters, no pulse; ray-trace border unchanged */
.back.tr .tet-rain canvas{filter:none}
.back.tr:has(.tet-rain){animation:none;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.9)}

/* ===== Certifications and Languages page (Oct 17) ===== */
.acc-t{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(.9rem,2vw,1.15rem);margin-top:.9rem;margin-right:-.32em;
  color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.since{display:inline-block;margin-top:1rem;font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:.42rem .95rem;border-radius:999px;
  border:1px solid transparent;background-image:linear-gradient(180deg,#1d1d20,#0c0c0e),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box;color:#e9e9ee}
.sec-tight{padding-top:3.4rem;padding-bottom:3.4rem}
.sh-sm{font-size:clamp(1.2rem,3vw,1.7rem)}
/* certification card */
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.cert{display:flex;align-items:center;gap:1.2rem;padding:1.4rem 1.6rem;border-radius:var(--r-lg);border:1.5px solid transparent;
  background-image:linear-gradient(180deg,#141416,#000),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -30px rgba(255,255,255,.18)}
.cert-ico{flex:none;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2e2e33,#0b0b0c 70%);border:1px solid var(--line2)}
.cert-ico svg{width:36px;height:36px;fill:url(#chromeFill)}
.cert b{display:block;font-family:var(--disp);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:1.15rem;line-height:1.2;color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.cert small{display:block;margin-top:.3rem;font-size:.8rem;color:var(--mu)}
.about{max-width:680px;color:var(--mu);font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.7}
/* medal-style skill cards */
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none}
.medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;padding:1.6rem 1.2rem 1.4rem;border-radius:var(--r-lg);
  border:1px solid transparent;background-image:linear-gradient(180deg,#18181b,#050506),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 40px -28px rgba(0,0,0,.9)}
.md-ring{position:relative;width:72px;height:72px;border-radius:50%;padding:3px;background:var(--chrome);box-shadow:0 6px 18px -6px rgba(255,255,255,.18)}
.md-ring::after{content:"";position:absolute;left:50%;bottom:-11px;width:22px;height:14px;transform:translateX(-50%);background:var(--chrome);clip-path:polygon(0 0,100% 0,100% 100%,50% 62%,0 100%)}
.md-ico{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2e2e33,#0b0b0c 70%)}
.md-ico svg{width:28px;height:28px;fill:url(#chromeFill)}
.md-bt{margin-top:.4rem}
.medal b{display:block;font-weight:700;font-size:1.02rem;line-height:1.25;color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.medal small{display:block;margin-top:.35rem;font-size:.8rem;color:var(--mu);line-height:1.45}
.medal small em{font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e9e9ee;margin-right:.3em}
/* compact work strip (unused) */
.ship{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none}
.ship li{border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.ship li>b,.ship li>span,.ship a{display:inline}
.ship li{padding:.5rem 1rem;font-size:.84rem}
.ship li:has(a){padding:0}
.ship a{display:block;padding:.5rem 1rem;text-decoration:none;border-radius:999px}
.ship a:hover{background:var(--s3)}
.ship b{font-weight:600;color:var(--tx);margin-right:.45em}
.ship span{color:var(--mu)}
@media (max-width:900px){.medals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.medals{grid-template-columns:1fr}.medal{flex-direction:row;text-align:left;padding:1.1rem 1.1rem}.md-ring{width:58px;height:58px;flex:none}.md-ico svg{width:24px;height:24px}.md-bt{margin-top:0}.certs{grid-template-columns:1fr}.cert{padding:1.2rem}.cert-ico{width:56px;height:56px}}

.sub-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1rem,2.2vw,1.3rem);margin:3rem 0 1.2rem;color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}

/* uniform chrome pills, centered wrapping grid; certifications first as larger cards */
#credentials .sh,#credentials .sub-h,#credentials .note{text-align:center}
.certs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:1.6rem auto 0}
.pills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:960px;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:.55rem;height:44px;min-width:150px;justify-content:center;padding:0 1.05rem;border-radius:999px;border:1px solid transparent;
  background-image:linear-gradient(180deg,#1d1d20,#0a0a0b),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -16px rgba(0,0,0,.9)}
.pill svg{width:18px;height:18px;flex:none;fill:url(#chromeFill)}
.pill b{font-weight:600;font-size:.88rem;white-space:nowrap;color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
@media (max-width:900px){.certs{grid-template-columns:1fr;max-width:520px}}
@media (max-width:560px){.pills{gap:.5rem}.pill{min-width:0;flex:1 1 calc(50% - .5rem);height:42px;padding:0 .7rem}.pill b{font-size:.8rem}}

/* 7 certification cards: centered wrapping rows, uniform width */
.certs{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:1040px}
.cert{flex:0 1 320px;min-width:0}
@media (max-width:900px){.certs{max-width:680px}.cert{flex:1 1 300px}}
@media (max-width:560px){.certs{gap:.7rem}.cert{flex:1 1 100%;padding:1rem 1.1rem}.cert-ico{width:48px;height:48px}.cert-ico svg{width:28px;height:28px}.cert b{font-size:1rem}}

.about p{margin:0 0 1.1rem;font-family:var(--font)}
.about p:last-child{margin-bottom:0}


/* Home button = exact copy of the /nexus/ Dev Portal button: same box, rain, ray-trace and RGB glow */
.bar{justify-content:space-between}
.bar .back.tr{font-size:.82rem;font-weight:400;color:#fff;padding:.45rem .9rem;border:1px solid rgba(255,255,255,.08);background:transparent;line-height:inherit;
  text-shadow:0 1px 2px rgba(0,0,0,.9);animation:nxNeonPulseRGB 3.6s ease-in-out infinite}
.bar .back.tr .tet-rain canvas{filter:none}
@keyframes nxNeonPulseRGB{
 0%,100%{box-shadow:0 0 8px rgba(0,240,255,.55),0 0 18px rgba(0,240,255,.28)}
 25%{box-shadow:0 0 8px rgba(255,43,214,.55),0 0 18px rgba(255,43,214,.28)}
 50%{box-shadow:0 0 8px rgba(57,255,20,.55),0 0 18px rgba(57,255,20,.28)}
 75%{box-shadow:0 0 8px rgba(255,242,0,.55),0 0 18px rgba(255,138,0,.3)}}
@media (max-width:560px){.bar{padding:.7rem 1.1rem}.bar .back.tr{font-size:.74rem;padding:.4rem .75rem}}
@media (prefers-reduced-motion:reduce){.bar .back.tr{animation:none;box-shadow:0 0 8px rgba(0,240,255,.5),0 0 16px rgba(255,43,214,.25)}}

/* bottom CTA (Build something together): same animated white ray-trace as the /nexus/ Buy buttons, ring just outside the pill */
#contact .contact a{position:relative}
#contact .contact a::after{content:"";position:absolute;inset:-3px;border-radius:999px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--trang),transparent 0deg,transparent 250deg,rgba(255,255,255,.55) 310deg,#fff 345deg,#f5f5f5 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:trSpin 2.8s linear infinite}
@media (prefers-reduced-motion:reduce){#contact .contact a::after{animation:none}}

/* pink-to-purple matrix rain: fixed canvas behind the content, low opacity, never clickable */
#dev-matrix{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.26}
.has-matrix .hero{background-color:transparent}
.has-matrix .bar{z-index:50}
.has-matrix .foot{position:relative}

/* mobile: the long Llama 3.1 badge spans its own row so it fits inside the pill */
@media (max-width:560px){.pill.pill-wide{flex:1 1 100%}}

/* header wordmark stays clean (solid bar so no page rain shows behind it) */
.has-matrix .bar{background:#000}

/* copyright line: same computed style as the homepage .footer-copy (Montserrat 0.58rem, 400, 0.06em, rgba(244,244,246,.32)); sits above the rain canvas */
.foot .footer-copy{position:relative;z-index:1;display:block;margin:0;font-family:Montserrat,"Helvetica Neue",sans-serif;font-size:.58rem;font-weight:400;letter-spacing:.06em;line-height:normal;color:rgba(244,244,246,.32);opacity:1;text-transform:none;text-align:center}
/* "View certifications" hero button: same black holographic look as the Nexus Buy Now buttons (copied from /nexus/nx-apple.css .buy.holo); size and placement unchanged */
.hero a.buy[href="#credentials"]{position:relative;isolation:isolate;border:0;color:#f7defc;text-shadow:0 1px 1px rgba(0,0,0,.6);
  background:
    linear-gradient(105deg,transparent 38%,rgba(255,111,216,.13) 45%,rgba(140,120,255,.12) 50%,rgba(95,227,230,.10) 55%,transparent 62%) 130% 0/280% 100% no-repeat,
    radial-gradient(120% 140% at 50% -20%,#1d1426 0%,#0a0a0f 60%) 0 0/100% 100%;
  animation:devHSheen 5.2s ease-in-out infinite,devHGlow 3.2s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,140,235,.28),0 10px 30px -12px rgba(255,79,216,.6),0 0 26px -10px rgba(150,70,255,.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
.hero a.buy[href="#credentials"]::before{content:none!important}
.hero a.buy[href="#credentials"]::after{content:""!important;position:absolute;inset:3px;padding:1.5px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,#ff4fd8,#e040fb,#9b5cff,#4c7dff,#2fd6e0,#9b5cff,#ff4fd8,#e040fb,#ff4fd8);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:devHHolo 6s linear infinite}
@keyframes devHSheen{0%,35%{background-position:130% 0,0 0}80%,100%{background-position:-30% 0,0 0}}
@keyframes devHHolo{0%{background-position:0% 0}100%{background-position:300% 0}}
@keyframes devHGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,140,235,.28),0 10px 30px -12px rgba(255,79,216,.6),0 0 26px -10px rgba(150,70,255,.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,160,240,.45),0 14px 40px -10px rgba(255,79,216,.85),0 0 46px -6px rgba(150,70,255,.75)}}
@keyframes devHGlowHot{0%,100%{box-shadow:inset 0 1px 0 rgba(255,214,250,.16),0 0 0 1px rgba(255,170,240,.6),0 18px 44px -10px rgba(255,79,216,.95),0 0 54px -4px rgba(150,70,255,.85)}
  50%{box-shadow:inset 0 1px 0 rgba(255,214,250,.16),0 0 0 1px rgba(255,190,245,.75),0 20px 52px -8px rgba(255,79,216,1),0 0 64px -2px rgba(150,70,255,.95)}}
.hero a.buy[href="#credentials"]:hover{transform:translateY(-3px);color:#f7defc;animation:devHSheen 1.8s ease-in-out infinite,devHGlowHot 2.4s ease-in-out infinite}
.hero a.buy[href="#credentials"]:active{transform:translateY(1px) scale(.975);filter:brightness(.92);transition-duration:.08s}
.hero a.buy[href="#credentials"]:focus-visible{outline:2px solid #ffb3f0;outline-offset:5px}
@media (prefers-reduced-motion:reduce){.hero a.buy[href="#credentials"],.hero a.buy[href="#credentials"]:hover{animation:none;transition:none;transform:none}.hero a.buy[href="#credentials"]::after{animation:none;background-position:40% 0}}
/* Hero name "Johnny Haynes": holographic foil lettering (replaces the in-letter rain). Pearl-silver base with drifting pink, cyan, violet and soft-gold
   bands, a slow diagonal light band, fine diffraction lines and faint sparkle, all clipped to the glyphs. --fx/--fa follow the pointer, tilt or scroll
   (set by dev-name-foil.js). The h1 sits above the page rain so the background glyphs no longer cross the letters. Static foil under reduced motion. */
@property --foilband{syntax:'<percentage>';inherits:false;initial-value:130%}
.hero h1.foil{position:relative;z-index:1;--fx:50%;--fa:115deg;
  background-image:
    radial-gradient(circle at 30% 40%,rgba(255,255,255,.55) 0 .6px,transparent 1.2px),
    repeating-linear-gradient(calc(var(--fa) - 70deg),rgba(255,255,255,0) 0 2px,rgba(255,255,255,.16) 2px 2.6px),
    linear-gradient(var(--fa),transparent 38%,rgba(255,255,255,.9) 49%,rgba(255,240,252,.55) 52%,transparent 62%),
    linear-gradient(var(--fa),#e7e4ee 0%,#ffb8e8 12%,#f4f1f8 22%,#a9eefc 33%,#d6c4ff 45%,#ffe2a8 56%,#f6f3fa 66%,#ffb3e2 78%,#9fe6ff 89%,#e7e4ee 100%);
  background-size:9px 9px,auto,260% 100%,220% 100%;
  background-position:0 0,0 0,var(--foilband) 0,var(--fx) 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 0 10px rgba(205,95,255,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.55));
  animation:devFoilBand 6.5s ease-in-out infinite}
@keyframes devFoilBand{0%,15%{--foilband:130%}70%,100%{--foilband:-30%}}
@media (prefers-reduced-motion:reduce){.hero h1.foil{animation:none;--foilband:60%}}


/* "30-Minute Call $35" button: same black holographic style as the Buy Now buttons (copied from /nexus/nx-apple.css .buy.holo), with the
   price on the holographic chip. Size, label and Stripe link unchanged. */
#contact .contact a.buy{position:relative;isolation:isolate;border:0;color:#f7defc;text-shadow:0 1px 1px rgba(0,0,0,.6);
  background:
    linear-gradient(105deg,transparent 38%,rgba(255,111,216,.13) 45%,rgba(140,120,255,.12) 50%,rgba(95,227,230,.10) 55%,transparent 62%) 130% 0/280% 100% no-repeat,
    radial-gradient(120% 140% at 50% -20%,#1d1426 0%,#0a0a0f 60%) 0 0/100% 100%;
  animation:devCSheen 5.2s ease-in-out infinite,devCGlow 3.2s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,140,235,.28),0 10px 30px -12px rgba(255,79,216,.6),0 0 26px -10px rgba(150,70,255,.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
#contact .contact a.buy::before{content:none!important}
#contact .contact a.buy::after{content:"";position:absolute;inset:3px;padding:1.5px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,#ff4fd8,#e040fb,#9b5cff,#4c7dff,#2fd6e0,#9b5cff,#ff4fd8,#e040fb,#ff4fd8);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:devCHolo 6s linear infinite}
@keyframes devCSheen{0%,35%{background-position:130% 0,0 0}80%,100%{background-position:-30% 0,0 0}}
@keyframes devCHolo{0%{background-position:0% 0}100%{background-position:300% 0}}
@keyframes devCGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,140,235,.28),0 10px 30px -12px rgba(255,79,216,.6),0 0 26px -10px rgba(150,70,255,.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,160,240,.45),0 14px 40px -10px rgba(255,79,216,.85),0 0 46px -6px rgba(150,70,255,.75)}}
@keyframes devCGlowHot{0%,100%{box-shadow:inset 0 1px 0 rgba(255,214,250,.16),0 0 0 1px rgba(255,170,240,.6),0 18px 44px -10px rgba(255,79,216,.95),0 0 54px -4px rgba(150,70,255,.85)}
  50%{box-shadow:inset 0 1px 0 rgba(255,214,250,.16),0 0 0 1px rgba(255,190,245,.75),0 20px 52px -8px rgba(255,79,216,1),0 0 64px -2px rgba(150,70,255,.95)}}
#contact .contact a.buy:hover{transform:translateY(-3px);animation:devCSheen 1.8s ease-in-out infinite,devCGlowHot 2.4s ease-in-out infinite}
#contact .contact a.buy:active{transform:translateY(1px) scale(.975);filter:brightness(.92);transition-duration:.08s}
#contact .contact a.buy:focus-visible{outline:2px solid #ffb3f0;outline-offset:5px}
#contact .contact a.buy b{position:relative;color:#12051c;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 52%),
    linear-gradient(90deg,#ff7fdc,#ec7bff,#b593ff,#86a9ff,#6fe3e6,#b593ff,#ff7fdc,#ec7bff,#ff7fdc);
  background-size:100% 100%,300% 100%;animation:devCChip 6s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(60,0,80,.25),0 0 14px -3px rgba(255,111,216,.6)}
@keyframes devCChip{0%{background-position:0 0,0% 0}100%{background-position:0 0,300% 0}}
@media (prefers-reduced-motion:reduce){#contact .contact a.buy,#contact .contact a.buy:hover{animation:none;transition:none;transform:none}#contact .contact a.buy::after{animation:none;background-position:40% 0}#contact .contact a.buy b{animation:none;background-position:0 0,30% 0}}

.cert-link{display:flex;flex:0 1 320px;min-width:0;text-decoration:none;color:inherit;border-radius:var(--r-lg)}
.cert-link .cert{flex:1 1 auto;width:100%}
.cert-link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cert{position:relative;overflow:hidden;background:rgba(13,13,15,.72)!important;background-image:none!important;border:1.5px solid rgba(255,255,255,.85)!important;box-shadow:0 0 0 rgba(255,255,255,0);animation:certGlow 4s ease-in-out infinite;transition:transform .25s,background .25s}
.cert::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:certShine 5s ease-in-out infinite}
.cert-ico{background:#fff!important;border-color:#fff!important}
.cert-ico svg{fill:#0a0a0b!important}
.cert b{color:#fff!important;background:none!important;-webkit-text-fill-color:#fff;font-family:"Sora",system-ui,sans-serif;font-weight:700;letter-spacing:.02em;text-transform:none}
.cert small{color:rgba(255,255,255,.7)}
.cert-link:hover .cert{transform:translateY(-3px);background:#16161a!important}
.certs>.cert-link:nth-child(3n+2) .cert,.certs>.cert-link:nth-child(3n+2) .cert::after{animation-delay:1.3s}
.certs>.cert-link:nth-child(3n) .cert,.certs>.cert-link:nth-child(3n) .cert::after{animation-delay:2.6s}
@keyframes certShine{0%,55%{left:-60%}100%{left:130%}}
@keyframes certGlow{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 18px rgba(255,255,255,.18)}}
@media (max-width:900px){.cert-link{flex:1 1 300px}}
@media (max-width:560px){.cert-link{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.cert,.cert::after{animation:none!important}.cert::after{display:none}}

/* Black base, white text; CompTIA-style text wordmarks and individually animated badges */
.cert{background:rgba(5,5,6,.72)!important;border-color:rgba(255,255,255,.22)!important}
.cert-ico{background:#000!important;border:1.5px solid var(--ac,#3ee6a8)!important}
.cert-ico svg{fill:#fff!important}
.ctw{font-family:"Sora","Arial Black",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;color:#fff}
.mint{color:#3ee6a8;-webkit-text-fill-color:#3ee6a8;font-weight:800}
.cert{--ac:#3ee6a8}
.cb-a{--ac:#3ee6a8}.cb-net{--ac:#4fc3ff}.cb-sec{--ac:#ff5d6c}.cb-ctt{--ac:#ffc542}
.cb-git{--ac:#7aa7ff}.cb-gcy{--ac:#46e08a}.cb-gda{--ac:#ffb648}.cb-cp{--ac:#c58bff}.cb-cc{--ac:#5ad7e6}
.cert{border-left:3px solid var(--ac)!important}
.cert::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--ac) 30%,transparent),transparent)}
.cb-a .cert-ico,.cb-git .cert-ico{animation:cbPulse 3s ease-in-out infinite}
.cb-net .cert-ico,.cb-gda .cert-ico{animation:cbOrbit 6s linear infinite}
.cb-sec .cert-ico,.cb-gcy .cert-ico{animation:cbShield 2.8s ease-in-out infinite}
.cb-ctt .cert-ico,.cb-cp .cert-ico,.cb-cc .cert-ico{animation:cbBob 3.4s ease-in-out infinite}
@keyframes cbPulse{50%{box-shadow:0 0 16px var(--ac)}}
@keyframes cbOrbit{0%{box-shadow:4px 0 10px -2px var(--ac)}25%{box-shadow:0 4px 10px -2px var(--ac)}50%{box-shadow:-4px 0 10px -2px var(--ac)}75%{box-shadow:0 -4px 10px -2px var(--ac)}100%{box-shadow:4px 0 10px -2px var(--ac)}}
@keyframes cbShield{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 0 14px var(--ac)}}
@keyframes cbBob{50%{transform:translateY(-3px)}}
@keyframes certGlow{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 18px color-mix(in srgb,var(--ac) 35%,transparent)}}
.cert-link:hover .cert{background:#0e0e11!important;border-color:var(--ac)!important}
@media (prefers-reduced-motion:reduce){.cert-ico{animation:none!important}}

/* Below-header content matches the JH GIF card: near-black #08080a, 8px radius, thin light rules, letter-spaced serif caps; Georgia body text like the email signature */
.sec .sh::after{content:"";display:block;width:56px;height:1px;margin:.8rem 0 0;background:rgba(255,255,255,.55)}
#credentials .sh::after{margin:.8rem auto 0}
.sec p,.sec li,.sec .note,.about p,.card p{font-family:Georgia,"Times New Roman",serif;color:#f4f4f6;font-size:1.05rem;line-height:1.7}
.sec .card,.sec .medal{background:rgba(8,8,10,.72)!important;background-image:none!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:8px!important}
/* Holographic section titles (same jhfoil gradient as the Developer Portal pill); chrome lettering elsewhere unchanged */
.sec .sh,#credentials .sub-h{background:linear-gradient(100deg,#e8e8ec 0%,#cfd3da 30%,#f3c6e8 45%,#c9f0dc 55%,#cfe0ff 65%,#e8e8ec 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:jhfoil 6s linear infinite}
@keyframes jhfoil{to{background-position:-250% 0}}
@media (prefers-reduced-motion:reduce){.sec .sh,#credentials .sub-h{animation:none}}
/* Languages & Technologies: glassy tiles, icon tinted in each language's color, hover shimmer, staggered entrance */
.pills .pill{position:relative;overflow:hidden;background:rgba(18,18,22,.72)!important;background-image:none!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .3s,box-shadow .3s,transform .3s;animation:pillIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--ld,0ms)}
.pills .pill svg{fill:var(--lc)!important;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--lc) 45%,transparent))}
.pills .pill b{color:#fff!important;background:none!important;-webkit-text-fill-color:#fff;font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.02em}
.pills .pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--lc) 28%,transparent) 50%,transparent 70%);background-size:250% 100%;background-position:150% 0;opacity:0;transition:opacity .3s}
.pills .pill:hover{border-color:var(--lc)!important;box-shadow:0 0 16px -4px var(--lc),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(-2px)}
.pills .pill:hover::after{opacity:1;animation:pillShim 1.4s linear infinite}
@keyframes pillIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pillShim{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){.pills .pill,.pills .pill:hover::after{animation:none!important}.pills .pill:hover{transform:none}}
.since{border:0!important;background:none!important;background-image:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
/* Official logos: one solid brand color per badge (logo, ring and glow) */
.cert-ico svg{fill:var(--ac)!important;width:34px;height:34px}
.cert-ico{background:#000!important;border:1.5px solid var(--ac)!important}
.cert::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--ac) 22%,transparent),transparent)!important}
.cp-mono{font-family:"Sora","Arial Black",sans-serif;font-weight:800;font-size:1.25rem;color:var(--ac);letter-spacing:-.03em}
/* Section titles: Georgia uppercase, wide tracking, holographic fill, thin animated foil underline */
.sec .sh,#credentials .sub-h{font-family:Georgia,"Times New Roman",serif!important;font-weight:400;text-transform:uppercase;font-variant:small-caps;letter-spacing:.24em;font-size:clamp(1.9rem,4.8vw,3.3rem);line-height:1.15}
#credentials .sub-h{font-size:clamp(1.3rem,3vw,2rem)}
.sec .sh::after,#credentials .sub-h::after{content:"";display:block;width:min(160px,40%);height:1px;margin:.9rem 0 0;background:linear-gradient(100deg,#e8e8ec 0%,#cfd3da 30%,#f3c6e8 45%,#c9f0dc 55%,#cfe0ff 65%,#e8e8ec 100%);background-size:250% 100%;animation:jhfoil 6s linear infinite}
#credentials .sh::after,#credentials .sub-h::after{margin:.9rem auto 0}
@media (prefers-reduced-motion:reduce){.sec .sh::after,#credentials .sub-h::after{animation:none}}
/* Certifications + Languages titles: no underline, randomly bouncing shimmer (positions set by small script) */
#credentials .sh::after,#credentials .sub-h::after{content:none!important}
#credentials .sh,#credentials .sub-h{animation:none!important;background-image:radial-gradient(ellipse 18% 120% at var(--shx,50%) 50%,rgba(255,255,255,.95),transparent 70%),linear-gradient(100deg,#e8e8ec 0%,#cfd3da 30%,#f3c6e8 45%,#c9f0dc 55%,#cfe0ff 65%,#e8e8ec 100%)!important;background-size:100% 100%,100% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;transition:--shx 1s}
@property --shx{syntax:"<percentage>";inherits:false;initial-value:50%}
/* Lighter surfaces and text on the black base */
.cert,.cert-link .cert{background:rgba(255,255,255,.09)!important}
.cert-link:hover .cert{background:rgba(255,255,255,.13)!important}
.pills .pill{background:rgba(255,255,255,.09)!important}
.sec .card,.sec .medal{background:rgba(255,255,255,.08)!important}
.cert-ico{background:rgba(255,255,255,.06)!important}
.cert small,.sec .note,.ship span{color:#e2e2e8!important}
.sec p,.sec li{color:#f4f4f6}

section.sec h2.sh,section.sec .sh,#credentials .sh,#credentials h3.sub-h,#credentials .sub-h{letter-spacing:-.04em!important;margin-right:0!important}
section.sec h2.sh,section.sec .sh,#credentials .sh,#credentials h3.sub-h,#credentials .sub-h{font-family:"Times New Roman",Times,"Tinos",serif!important}
/* Shared title font: change --title-font / --title-track to update every title */
:root{--title-font:"Times New Roman",Times,"Tinos",serif;--title-track:-.04em}
section.sec h2.sh,section.sec .sh,#credentials .sh,#credentials h3.sub-h,#credentials .sub-h,.jh-title,p.acc-t.jh-title,.since.jh-title{font-family:var(--title-font)!important;letter-spacing:var(--title-track)!important;margin-right:0!important}
.foot .footer-copy{background:linear-gradient(100deg,#e8e8ec 0%,#cfd3da 30%,#f3c6e8 45%,#c9f0dc 55%,#cfe0ff 65%,#e8e8ec 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;animation:jhfoil 6s linear infinite}
@media (prefers-reduced-motion:reduce){.foot .footer-copy{animation:none}}
p.acc-t.jh-title{background:linear-gradient(100deg,#e8e8ec 0%,#cfd3da 30%,#f3c6e8 45%,#c9f0dc 55%,#cfe0ff 65%,#e8e8ec 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;filter:none;animation:jhfoil 6s linear infinite}
@media (prefers-reduced-motion:reduce){p.acc-t.jh-title{animation:none}}
/* Brighter, always-visible logos */
.pills .pill,.pills .pill.rv,.certs .cert,.certs .cert.rv{opacity:1!important}
.pills .pill{animation:pillIn2 .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--ld,0ms)}
@keyframes pillIn2{from{transform:translateY(10px)}to{transform:none}}
.pills .pill svg{opacity:1!important;fill:var(--lc)!important;width:22px!important;height:22px!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--lc) 70%,transparent))!important}
.cert-ico svg{opacity:1!important;width:40px!important;height:40px!important;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ac) 70%,transparent))}
.cp-mono{font-size:1.45rem;text-shadow:0 0 8px color-mix(in srgb,var(--ac) 70%,transparent)}
.cert,.cert-link .cert{background:rgba(255,255,255,.13)!important}
.cert-link:hover .cert{background:rgba(255,255,255,.17)!important}
.pills .pill{background:rgba(255,255,255,.13)!important}
@media (prefers-reduced-motion:reduce){.pills .pill{animation:none!important;transform:none;filter:none}}
#contact .sh::after{margin-left:auto!important;margin-right:auto!important}
#about .sh{font-size:clamp(.95rem,2.4vw,1.65rem)!important}
/* About Me: title shrink-wraps so its underline matches the title width; no surface over the rain */
#about .sh{display:table;margin-left:0}
#about .sh::after{width:100%!important}
#about,#about .wrap,#about .about{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#about .about,#about .about.rv{opacity:1!important;transform:none!important;max-height:none!important;overflow:visible!important;-webkit-line-clamp:unset!important}
/* About Me continuation container: same look, no title, minimal gap, transparent so the rain shows */
#about{padding-bottom:0}
#about-2{padding-top:1.1rem}
#about-2,#about-2 .wrap,#about-2 .about{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#about-2 .about,#about-2 .about.rv{opacity:1!important;transform:none!important;max-height:none!important;overflow:visible!important}
/* About Me bio: justified, clean right edge, no overflow (both containers) */
#about .about,#about-2 .about{box-sizing:border-box;max-width:680px;width:100%}
#about .about p,#about-2 .about p{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;word-break:normal;margin:0;box-sizing:border-box}
#about .wrap,#about-2 .wrap{box-sizing:border-box;max-width:100%}

/* About Me listen player: copies Book a call (#contact a.buy) look into its own class */
.about-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem 1rem;flex-wrap:wrap}
.about-head>.sh{flex:0 1 auto;min-width:0}
.ttsp{position:relative;isolation:isolate;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;padding:.7rem .95rem;border-radius:22px;max-width:100%;box-sizing:border-box;font-family:Georgia,'Times New Roman',serif;color:#fff;
  background:linear-gradient(105deg,transparent 38%,rgba(255,111,216,.13) 45%,rgba(140,120,255,.12) 50%,rgba(95,227,230,.10) 55%,transparent 62%) 130% 0/280% 100% no-repeat,radial-gradient(120% 140% at 50% -20%,#1d1426 0%,#0a0a0f 60%) 0 0/100% 100%;
  animation:devCSheen 5.2s ease-in-out infinite,devCGlow 3.2s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,214,250,.12),0 0 0 1px rgba(255,140,235,.28),0 10px 30px -12px rgba(255,79,216,.6),0 0 26px -10px rgba(150,70,255,.5)}
.ttsp::after{content:"";position:absolute;inset:3px;padding:1.5px;border-radius:19px;pointer-events:none;
  background:linear-gradient(90deg,#ff4fd8,#e040fb,#9b5cff,#4c7dff,#2fd6e0,#9b5cff,#ff4fd8,#e040fb,#ff4fd8);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:devCHolo 6s linear infinite}
.ttsp::before{content:"";position:absolute;inset:-1px;border-radius:23px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--trang),transparent 0deg,transparent 250deg,rgba(255,255,255,.55) 310deg,#fff 345deg,#f5f5f5 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:trSpin 2.8s linear infinite}
.ttsp:hover{animation:devCSheen 1.8s ease-in-out infinite,devCGlowHot 2.4s ease-in-out infinite}
.ttsp-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.ttsp-lbl{font-family:Georgia,serif;font-size:.9rem;font-weight:600;letter-spacing:.02em;background:linear-gradient(100deg,#e8e8ec 0%,#cfd3da 30%,#f3c6e8 45%,#c9f0dc 55%,#cfe0ff 65%,#e8e8ec 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:jhfoil 6s linear infinite}
.ttsp-btns{display:flex;gap:.3rem}
.ttsp button{appearance:none;border:0;cursor:pointer;width:2rem;height:2rem;border-radius:999px;display:inline-grid;place-items:center;padding:0;font:600 .62rem/1 Georgia,serif;color:#12051c;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 52%),linear-gradient(90deg,#ff7fdc,#ec7bff,#b593ff,#86a9ff,#6fe3e6,#b593ff,#ff7fdc,#ec7bff,#ff7fdc);
  background-size:100% 100%,300% 100%;animation:devCChip 6s linear infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(60,0,80,.25),0 0 14px -3px rgba(255,111,216,.6);transition:transform .2s}
.ttsp button svg{width:.95rem;height:.95rem;fill:currentColor}
.ttsp button:hover{transform:translateY(-2px)}
.ttsp button:active{transform:scale(.94)}
.ttsp button:focus-visible{outline:2px solid #ffb3f0;outline-offset:3px}
.ttsp-prog{display:flex;align-items:center;gap:.5rem;width:100%;min-width:12rem}
.ttsp-bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;cursor:pointer}
.ttsp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff4fd8,#9b5cff,#2fd6e0);box-shadow:0 0 8px rgba(255,79,216,.8)}
.ttsp-time{font:.72rem Georgia,serif;color:#fff;opacity:.85;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:520px){.about-head{justify-content:flex-end}.about-head>.sh{flex-basis:100%}.ttsp{padding:.6rem .75rem}.ttsp button{width:1.85rem;height:1.85rem}.ttsp-prog{min-width:0}}
/* mobile: Listen player centered on its own line between title and bio */
@media (max-width:520px){.about-head{justify-content:center}.about-head>.ttsp{margin:.35rem auto 1.25rem;align-items:center}.about-head .ttsp-row{justify-content:center}}
/* player centered between About Me title and text (all widths) */
.about-head{flex-direction:column;align-items:stretch}.about-head>.ttsp{margin:.4rem auto .6rem;align-items:center}.about-head .ttsp-row{justify-content:center}
@media (max-width:520px){.about-head>.ttsp{margin:.35rem auto 1.25rem}}
/* player buttons: 9-bit ring like the Home button (replaces holographic fill) */
.ttsp button{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:rgba(0,0,0,.25);border:1px solid var(--line2);animation:none;box-shadow:none;text-shadow:none}
.ttsp button svg{position:relative;z-index:1;filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 3px #000) drop-shadow(0 0 5px rgba(0,0,0,.9))}
.ttsp button::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--trang),transparent 0deg,transparent 250deg,rgba(255,255,255,.55) 310deg,#fff 345deg,#f5f5f5 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:trSpin 2.8s linear infinite}
.ttsp button .tet-rain{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
.ttsp button .tet-rain canvas{display:block;width:100%;height:100%;filter:brightness(1.6) saturate(1.8) drop-shadow(0 0 2px rgba(0,240,255,.9)) drop-shadow(0 0 4px rgba(255,43,214,.7))}
/* JH GIF card on /dev ~18% larger (220px -> 260px), capped for small phones */
.jh-dev-logo img{width:260px!important;max-width:70vw!important}
/* player buttons: mini #dev-matrix rain (no blocks, no recolor), dark disc keeps icons clear */
.ttsp button .mrain{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
.ttsp button .mrain canvas{display:block;width:100%;height:100%;filter:none}
.ttsp button::before{content:"";position:absolute;left:50%;top:50%;width:1.15rem;height:1.15rem;margin:-.575rem 0 0 -.575rem;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.85) 55%,rgba(0,0,0,0) 100%);z-index:1;pointer-events:none}
.ttsp button svg{z-index:2}
/* small JH mark beside the Listen In label */
.ttsp-logo{display:block;width:26px;height:26px;object-fit:contain;flex:none;margin-right:-.2rem}
@media (max-width:380px){.ttsp-logo{width:22px;height:22px}.ttsp-row{gap:.45rem}.ttsp-lbl{font-size:.84rem}}
/* Listen In label: Impact-style face, this label only */
.ttsp .ttsp-lbl{font-family:Impact,'Anton','Haettenschweiler','Arial Narrow Bold',sans-serif;font-weight:400;letter-spacing:.04em;font-size:1rem}
@media (max-width:380px){.ttsp .ttsp-lbl{font-size:.92rem}}
/* larger JH mark in the player */
.ttsp .ttsp-logo{width:44px;height:44px;margin-right:0}
.ttsp .ttsp-row{gap:.7rem}
@media (max-width:520px){.ttsp .ttsp-logo{width:38px;height:38px}.ttsp .ttsp-row{gap:.5rem}}
@media (max-width:380px){.ttsp .ttsp-row{gap:.4rem}.ttsp .ttsp-btns{gap:.25rem}}
/* desktop: About Me sections centered on one column */
@media (min-width:521px){
#about .about-head,#about .about,#about-2 .about{max-width:680px;margin-left:auto;margin-right:auto}
#about .about-head>.sh{align-self:center;width:fit-content;max-width:100%;text-align:center}
#about .about-head>.sh::after{margin-left:auto;margin-right:auto}
}
/* JH GIF under the Developer Portal pill: +30% (260px -> 338px), phone cap raised */
.jh-dev-logo img{width:710px!important;max-width:min(710px,96vw)!important}
/* progress bar fill: warm yellow-orange-pink */
.ttsp-bar i{background:linear-gradient(90deg,#ffe14d,#ff9a1f,#ff4fa3);box-shadow:0 0 8px rgba(255,154,31,.85),0 0 14px rgba(255,79,163,.55)}
/* Listen In equalizer */
.ttsp-eqw{position:relative;width:100%;height:22px}
.ttsp-eqw canvas{display:block;width:100%;height:100%}
.ttsp-eqw .eqf{display:none;position:absolute;inset:0;gap:2px;align-items:flex-end}
.ttsp-eqw.eq-fake canvas{display:none}
.ttsp-eqw.eq-fake .eqf{display:flex}
.ttsp-eqw .eqf i{flex:1;height:8%;background:linear-gradient(0deg,#ffe14d,#ff9a1f 55%,#ff4fa3);box-shadow:0 0 6px rgba(255,140,60,.8);transition:height .4s ease}
.ttsp.eq-on .ttsp-eqw.eq-fake .eqf i{animation:eqB .9s ease-in-out infinite alternate}
.ttsp-eqw .eqf i:nth-child(odd){animation-duration:.7s!important}.ttsp-eqw .eqf i:nth-child(3n){animation-duration:1.1s!important}.ttsp-eqw .eqf i:nth-child(4n){animation-delay:-.3s}
@keyframes eqB{0%{height:12%}100%{height:95%}}
@media (max-width:380px){.ttsp-eqw{height:18px}}
/* speed toggle (1x / 1.25x) */
.ttsp .ttsp-spd{width:auto;min-width:2.5rem;height:1.35rem;padding:0 .45rem;border-radius:999px;font:700 .68rem/1 Georgia,serif;color:#fff;flex:none;text-shadow:0 0 2px #000,0 0 4px #000}
.ttsp .ttsp-spd::before{width:auto;height:auto;margin:0;left:2px;right:2px;top:2px;bottom:2px;border-radius:999px;background:rgba(0,0,0,.6)}
.ttsp .ttsp-spd{z-index:0}
.ttsp .ttsp-spd .spd-t{position:relative;z-index:3}
.ttsp .ttsp-spd{width:3.1rem;min-width:3.1rem;padding:0;justify-content:center;font-variant-numeric:tabular-nums}
/* player always in normal flow with a clear gap before the bio */
#about .about-head>.ttsp{position:relative;top:auto;height:auto;flex:none;margin-bottom:24px}
@media (max-width:520px){#about .about-head>.ttsp{margin-bottom:20px}}
#about .about-head{height:auto}
/* Developer Portal pill: drifting neon cumulus clouds behind the label */
.bar .jh-foil-tag{isolation:isolate}
.bar .jh-foil-tag b{position:relative;z-index:2;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.95)) drop-shadow(0 0 3px rgba(0,0,0,.7))}
.bar .jh-foil-tag::before,.bar .jh-foil-tag::after{content:"";position:absolute;z-index:0;pointer-events:none;inset:0 -12%;background-repeat:no-repeat;opacity:.85}
.bar .jh-foil-tag::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2034%2022%27%3E%3Cpath%20fill%3D%27%23ff3cc8%27%20d%3D%27M6%2021h22a5.5%205.5%200%200%200%20.6-11A8%208%200%200%200%2013.4%207.2%205.8%205.8%200%200%200%205%2012.4%204.3%204.3%200%200%200%206%2021z%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2034%2022%27%3E%3Cpath%20fill%3D%27%2300e6ff%27%20d%3D%27M6%2021h22a5.5%205.5%200%200%200%20.6-11A8%208%200%200%200%2013.4%207.2%205.8%205.8%200%200%200%205%2012.4%204.3%204.3%200%200%200%206%2021z%27/%3E%3C/svg%3E");background-size:30px 20px,24px 16px;background-position:10% 20%,64% 95%;filter:drop-shadow(0 0 3px rgba(255,60,200,.8)) drop-shadow(0 0 2px rgba(0,230,255,.6));animation:pillCloudA 16s ease-in-out infinite alternate}
.bar .jh-foil-tag::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2034%2022%27%3E%3Cpath%20fill%3D%27%239646ff%27%20d%3D%27M6%2021h22a5.5%205.5%200%200%200%20.6-11A8%208%200%200%200%2013.4%207.2%205.8%205.8%200%200%200%205%2012.4%204.3%204.3%200%200%200%206%2021z%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2034%2022%27%3E%3Cpath%20fill%3D%27%2350ffb4%27%20d%3D%27M6%2021h22a5.5%205.5%200%200%200%20.6-11A8%208%200%200%200%2013.4%207.2%205.8%205.8%200%200%200%205%2012.4%204.3%204.3%200%200%200%206%2021z%27/%3E%3C/svg%3E");background-size:26px 17px,22px 14px;background-position:36% 100%,90% 12%;filter:drop-shadow(0 0 3px rgba(150,70,255,.8)) drop-shadow(0 0 2px rgba(80,255,180,.6));animation:pillCloudB 20s ease-in-out infinite alternate}
@keyframes pillCloudA{0%{transform:translate(-14%,0)}25%{transform:translate(-5%,-2px)}50%{transform:translate(4%,1px)}75%{transform:translate(10%,-1px)}100%{transform:translate(16%,1px)}}
@keyframes pillCloudB{0%{transform:translate(14%,1px)}25%{transform:translate(6%,-1px)}50%{transform:translate(-3%,2px)}75%{transform:translate(-9%,-1px)}100%{transform:translate(-15%,0)}}
@media (prefers-reduced-motion:reduce){.bar .jh-foil-tag::before,.bar .jh-foil-tag::after{animation:none}}
.jh-dev-logo{width:min(710px,96vw)!important;margin-left:calc((100% - min(710px,96vw))/2)!important;margin-right:calc((100% - min(710px,96vw))/2)!important}
.jh-dev-logo img{aspect-ratio:1.42/1!important;height:auto!important;object-fit:fill!important}
.vx-credit{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;flex:0 0 100%;margin:.2rem auto .1rem;text-align:center}
.vx-credit::before,.vx-credit::after{content:"";height:1px;width:38px;background:linear-gradient(90deg,transparent,rgba(255,154,31,.55))}
.vx-credit::after{background:linear-gradient(90deg,rgba(255,79,163,.55),transparent)}
.vx-credit .vx-by{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:#a9abb2}
.vx-credit .vx-name{font-family:"Great Vibes",cursive;font-size:30px;line-height:1;padding:0 .12em .08em;background:linear-gradient(100deg,#ffe14d 0%,#ff9a1f 45%,#ff4fa3 75%,#ffe14d 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(255,140,60,.45));animation:jhfoil 8s linear infinite}
@media (max-width:520px){.vx-credit .vx-name{font-size:27px}.vx-credit::before,.vx-credit::after{width:26px}}
@media (prefers-reduced-motion:reduce){.vx-credit .vx-name{animation:none}}
@media (min-width:900px){#about .about-head>#ttsp{zoom:1.35}}
.ttsp{animation:devCGlow 3.2s ease-in-out infinite}.ttsp:hover{animation:devCGlowHot 2.4s ease-in-out infinite}
.ttsp-lbl{animation:none!important;background-position:0 0!important}
/* JH GIF: no card edge, feathered into the page bg */
.jh-dev-logo img{border-radius:0!important;border:0!important;outline:0!important;box-shadow:none!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
.jh-dev-logo{box-shadow:none!important;border:0!important;background:none!important}

/* hero GIF: HTML holo overlay text over the baked lines (GIF file unchanged) */
@keyframes svcFoil{to{background-position:-300% 0}}
.jh-dev-logo{position:relative!important}
.jhov{position:absolute;inset:0;container-type:inline-size;pointer-events:none;line-height:1;z-index:2}
.jhov-p{position:absolute;left:50%;background:#070708;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-composite:intersect}
.jhov-p1{width:54%;margin-left:-27%;top:78.3%;height:7.8%}
.jhov-p2{width:86%;margin-left:-43%;top:87.8%;height:7.8%}
.jhov-t{position:absolute;left:0;right:0;text-align:center;white-space:nowrap;font-family:Tinos,"Times New Roman",serif;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;background:linear-gradient(100deg,#ffffff,#7cc8ff 30%,#c38bff 60%,#e6e8f0 85%,#ffffff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:#eef0f7;-webkit-text-fill-color:transparent;-webkit-text-stroke:.35px rgba(0,0,0,.55);animation:svcFoil 6s linear infinite;animation-delay:0s}
.jhov-t::before{content:attr(data-t);position:absolute;inset:0;z-index:-1;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;background:none;text-shadow:0 0 6px rgba(79,184,255,.55),0 0 10px rgba(168,85,247,.5),0 1px 1px rgba(0,0,0,.9)}
.jhov-t1{top:79.6%;font-size:3.1cqw;letter-spacing:.42em;padding-left:.42em}
.jhov-t2{top:89.1%;font-size:2.55cqw;letter-spacing:.36em;padding-left:.36em}
@media (prefers-reduced-motion:reduce){.jhov-t{animation:none}}
/* overlay text: max crispness (geometric sans, bright foil, dark stroke, no effects on the text layer) */
.jhov-t{font-family:Sora,Montserrat,system-ui,sans-serif!important;font-weight:700!important;-webkit-text-stroke:.6px rgba(0,0,0,.85)!important;paint-order:stroke fill;filter:none!important;text-shadow:none!important;background:linear-gradient(100deg,#ffffff,#9ad6ff 30%,#d2a8ff 60%,#f2f4fa 85%,#ffffff)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important}
.jhov-t1{font-size:2.75cqw!important;letter-spacing:.36em!important;padding-left:.36em!important}
.jhov-t2{font-size:2.3cqw!important;letter-spacing:.27em!important;padding-left:.27em!important}

/* overlay redesign: baked lines hidden by patches; foil text on arcs around the JH monogram */
.jhov-t{display:none!important}
.jhov-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jhov-ring text{font-family:Sora,Montserrat,system-ui,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.jhov-ring .jhr-t1{font-size:10.5px;letter-spacing:4.2px}
.jhov-ring .jhr-t2{font-size:7.6px;letter-spacing:2.1px}
.jhov-ring .jhr-t1{font-size:9.6px;letter-spacing:3.6px}
.jhov-ring .jhr-t2{font-size:7.2px;letter-spacing:1.9px}
/* FINAL overlay: straight centered lines under the JH mark on one feathered patch (no ring) */
.jhov-ring{display:none!important}
.jhov-t{display:block!important}
.jhov-p2{display:none!important}
.jhov-p1{width:84%!important;margin-left:-42%!important;top:74.2%!important;height:23.5%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%)!important}

/* About Me body text (started coding in 2008): bright chrome/blue/purple foil, smooth 10-stop motion, synced 6s; solid fallback */
#about .about p,#about-2 .about p{color:#eef0f7}
@supports ((-webkit-background-clip:text) or (background-clip:text)){#about .about p,#about-2 .about p{background:linear-gradient(100deg,#ffffff 0%,#e9f4ff 10%,#b8e0ff 22%,#cfe1ff 32%,#dcc2ff 44%,#efe4ff 54%,#f2f4fa 66%,#c8dcff 78%,#e6dcff 89%,#ffffff 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:aboutFoil 6s linear infinite;animation-delay:0s}}
@keyframes aboutFoil{0%{background-position:0% 0}11%{background-position:-33.3% 0}22%{background-position:-66.6% 0}33%{background-position:-100% 0}44%{background-position:-133.3% 0}55%{background-position:-166.6% 0}66%{background-position:-200% 0}77%{background-position:-233.3% 0}88%{background-position:-266.6% 0}100%{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){#about .about p,#about-2 .about p{animation:none}}
/* Listen In player: ray-tracing toned down ~65% (slower, dimmer) - player only */
#ttsp::before{animation-duration:8s!important;opacity:.35!important}
#ttsp button::after,#ttsp .ttsp-spd::after{animation-duration:8s!important;opacity:.35!important}

/* cleaned GIF underneath: baked lines + bottom tab removed, cover patch no longer needed */
.jhov-p{display:none!important}
/* 2008 bio foil: wider seamless gradient, bounce back and forth */
@supports ((-webkit-background-clip:text) or (background-clip:text)){#about .about p,#about-2 .about p{background-image:linear-gradient(100deg,#ffffff 0%,#f4f8ff 8%,#e2f0ff 16%,#cfe6ff 24%,#d7e2ff 32%,#e3d6ff 40%,#eadfff 48%,#f3f0ff 56%,#f2f4fa 64%,#dfe8ff 72%,#e6dcff 80%,#f3eeff 90%,#ffffff 100%)!important;background-size:500% 100%!important;animation:aboutFoil 6s ease-in-out infinite alternate!important}}
/* #credentials: solid black inside + 2px chrome/blue/purple foil border (like main consultant card) */
@keyframes credFoil{0%{background-position:0 0,0% 50%}100%{background-position:0 0,300% 50%}}
#credentials .cert,#credentials .pills .pill{border:1.75px solid transparent!important;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#9ae3b1,#9be5d3 12%,#9bd5e7 24%,#9bb1e8 36%,#b19ce9 48%,#d59de9 60%,#e39bd3 72%,#e39bb0 84%,#9ae3b1) border-box!important;background-size:100% 100%,300% 100%!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 0 6px rgba(155,213,231,.22),0 0 8px rgba(213,157,233,.2)!important;animation:credFoil 6s linear infinite!important}
@media (prefers-reduced-motion:reduce){#credentials .cert,#credentials .pills .pill{animation:none!important}}

/* logos: true brand colours, tight glow so halos no longer wash them out */
.pills .pill svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--lc) 35%,transparent))!important;opacity:1!important}
.cert-ico svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--ac) 35%,transparent))!important;opacity:1!important}
.cb-cc .cert-ico svg{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(58,16,229,.6))!important}
/* hero GIF: crisp short edge fade (was 9% broad feather) */
.jh-dev-logo img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%)!important;-webkit-mask-composite:source-in!important;mask-composite:intersect!important}
/* #credentials X91: no L-to-R shimmer; full-rainbow monogram foil frame with a highlight lapping each edge; subtle holo sheen inside */
@property --pa{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes pillLap{to{--pa:360deg}}
@keyframes pillSheen{0%{background-position:0% 0%,0 0,0 0,0% 50%}100%{background-position:100% 100%,0 0,0 0,100% 50%}}
#credentials .cert::after,#credentials .pills .pill::after,#credentials .pills .pill:hover::after{display:none!important;animation:none!important}
#credentials .cert,#credentials .pills .pill{background:linear-gradient(125deg,rgba(255,122,217,.08),rgba(124,200,255,.06) 30%,rgba(110,231,168,.05) 50%,rgba(192,132,252,.08) 70%,rgba(232,232,239,.05)) padding-box,linear-gradient(#000,#000) padding-box,conic-gradient(from var(--pa),transparent 0deg,transparent 270deg,rgba(255,255,255,.4) 305deg,#fff 335deg,#ffd6f5 348deg,transparent 360deg) border-box,linear-gradient(100deg,#9ae3b1,#9be5d3 12%,#9bd5e7 24%,#9bb1e8 36%,#b19ce9 48%,#d59de9 60%,#e39bd3 72%,#e39bb0 84%,#9ae3b1) border-box!important;background-size:300% 300%,100% 100%,100% 100%,300% 100%!important;animation:pillLap 5s linear infinite,pillSheen 9s ease-in-out infinite alternate!important}
#credentials .pills .pill:nth-child(3n+1),#credentials .cert-link:nth-child(3n+1) .cert{animation-delay:-1.7s,-3s!important}
#credentials .pills .pill:nth-child(3n+2),#credentials .cert-link:nth-child(3n+2) .cert{animation-delay:-3.4s,-6s!important}
@media (prefers-reduced-motion:reduce){#credentials .cert,#credentials .pills .pill{animation:none!important}}
/* #credentials = consultant card front: solid black, 2px chrome/blue/purple foil moving like .ab-fborder (svcFoil 6s); no lap, no sheen, no sweeps */
@keyframes credCC{0%{background-position:0 0,0% 0}100%{background-position:0 0,-300% 0}}
#credentials .cert::after,#credentials .cert::before,#credentials .pills .pill::after,#credentials .pills .pill::before,#credentials .pills .pill:hover::after{display:none!important;animation:none!important}
#credentials .cert,#credentials .pills .pill{border:2px solid transparent!important;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#e8e8ef,#4fb8ff 30%,#a855f7 60%,#c9ccd8 85%,#e8e8ef) border-box!important;background-size:100% 100%,300% 100%!important;box-shadow:0 0 3px rgba(79,184,255,.55),0 0 4px rgba(168,85,247,.5)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:credCC 6s linear infinite!important}
@media (prefers-reduced-motion:reduce){#credentials .cert,#credentials .pills .pill{animation:none!important}}
/* #credentials outlines, final: consultant-card border technique (masked 2px pseudo frame, svcFoil-style move) in pink/purple/blue/green only; tighter bands so several hues show on every pill; small glow; black inside */
@keyframes credRB{to{background-position:-200% 0}}
#credentials .cert,#credentials .pills .pill{position:relative!important;overflow:visible!important;border:2px solid transparent!important;background:#000!important;background-image:none!important;box-shadow:none!important;animation:none!important}
#credentials .cert::before,#credentials .pills .pill::before{content:""!important;display:block!important;position:absolute!important;inset:-2px!important;border-radius:inherit!important;padding:2px!important;pointer-events:none!important;z-index:3!important;opacity:1!important;transform:none!important;
background:linear-gradient(100deg,#ff4fa3 0%,#b44dff 12.5%,#4f7bff 25%,#3ddc84 37.5%,#ff4fa3 50%,#b44dff 62.5%,#4f7bff 75%,#3ddc84 87.5%,#ff4fa3 100%)!important;background-size:200% 100%!important;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important;
filter:drop-shadow(0 0 1.5px rgba(180,77,255,.45))!important;animation:credRB 6s linear infinite!important}
@media (prefers-reduced-motion:reduce){#credentials .cert::before,#credentials .pills .pill::before{animation:none!important}}
/* #credentials outlines: travelling rainbow via conic + @property (JS fallback in page) */
@property --cpa{syntax:"<angle>";inherits:true;initial-value:0deg}
@keyframes credSpin{to{--cpa:360deg}}
#credentials .cert::before,#credentials .pills .pill::before{background:conic-gradient(from var(--cpa),#ff4fa3,#b44dff 17%,#4f7bff 33%,#3ddc84 50%,#4f7bff 67%,#b44dff 83%,#ff4fa3)!important;background-size:100% 100%!important;animation:credSpin 4s linear infinite!important;will-change:transform}
#credentials .pills .pill:nth-child(odd)::before,#credentials .cert-link:nth-child(odd) .cert::before{animation-delay:-2s!important}
/* Developer Portal pill: clouds removed, solid black, RGB halo */
@keyframes dpGlow{0%{box-shadow:0 0 8px 1px rgba(255,79,163,.75),0 0 18px 4px rgba(79,123,255,.45)}33%{box-shadow:0 0 8px 1px rgba(79,123,255,.75),0 0 18px 4px rgba(61,220,132,.45)}66%{box-shadow:0 0 8px 1px rgba(61,220,132,.7),0 0 18px 4px rgba(180,77,255,.5)}100%{box-shadow:0 0 8px 1px rgba(255,79,163,.75),0 0 18px 4px rgba(79,123,255,.45)}}
.bar .jh-foil-tag::before,.bar .jh-foil-tag::after{display:none!important;content:none!important;animation:none!important}
.bar .jh-foil-tag{background:#000!important;background-image:none!important;animation:dpGlow 4s linear infinite!important;box-shadow:0 0 8px 1px rgba(255,79,163,.75),0 0 18px 4px rgba(79,123,255,.45)!important}
@media (prefers-reduced-motion:reduce){.bar .jh-foil-tag{animation:none!important}}
html body .bar .tag.jh-foil-tag{background:#000!important;background-image:none!important;animation:dpGlow 4s linear infinite!important;box-shadow:0 0 8px 1px rgba(255,79,163,.75),0 0 18px 4px rgba(79,123,255,.45)!important}
@media (prefers-reduced-motion:reduce){html body .bar .tag.jh-foil-tag{animation:none!important}}
@keyframes dpGlow2{0%,100%{box-shadow:0 0 10px 2px rgba(255,79,163,.9),0 0 24px 6px rgba(79,123,255,.55)}33%{box-shadow:0 0 10px 2px rgba(79,123,255,.9),0 0 24px 6px rgba(61,220,132,.5)}66%{box-shadow:0 0 10px 2px rgba(61,220,132,.85),0 0 24px 6px rgba(180,77,255,.6)}}
html body .bar .tag.jh-foil-tag{animation:dpGlow2 4s linear infinite!important;box-shadow:0 0 10px 2px rgba(255,79,163,.9),0 0 24px 6px rgba(79,123,255,.55)!important}
@media (prefers-reduced-motion:reduce){html body .bar .tag.jh-foil-tag{animation:none!important}}
/* Developer Portal: glossy black face (::after) + rotating blurred RGB conic halo (::before) */
@property --dpa{syntax:"<angle>";inherits:true;initial-value:0deg}
@keyframes dpSpin{to{--dpa:360deg}}
html body .bar .tag.jh-foil-tag{position:relative!important;isolation:isolate!important;overflow:visible!important;background:transparent!important;border-color:transparent!important;animation:none!important;box-shadow:none!important}
html body .bar .tag.jh-foil-tag::before{content:""!important;display:block!important;position:absolute!important;inset:-7px!important;border-radius:999px!important;z-index:-2!important;pointer-events:none!important;opacity:1!important;transform:none!important;background:conic-gradient(from var(--dpa),#ff2bd6,#8b3dff,#2f7bff,#00e5ff,#2bff88,#ffe600,#ff2b5e,#ff2bd6)!important;filter:blur(9px) saturate(1.3)!important;animation:dpSpin 4s linear infinite!important}
html body .bar .tag.jh-foil-tag::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;border-radius:999px!important;z-index:-1!important;pointer-events:none!important;opacity:1!important;transform:none!important;animation:none!important;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 38%,rgba(0,0,0,0) 52%),linear-gradient(180deg,#1c1c20 0%,#08080a 55%,#000 100%)!important;border:1px solid #2c2c32!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04)!important}
@media (prefers-reduced-motion:reduce){html body .bar .tag.jh-foil-tag::before{animation:none!important}}
/* bottom of page: language & tech pills = static gray 2px outline, no motion */
#credentials .pills .pill::before,#credentials .pills .pill::after{display:none!important;content:none!important;animation:none!important}
#credentials .pills .pill{border:2px solid #8a8a90!important;background:#000!important;background-image:none!important;box-shadow:none!important;animation:none!important}
.foot .fl a{border:2px solid #8a8a90!important;animation:none!important;box-shadow:none!important}
html body .bar .tag.jh-foil-tag::before{inset:-1.5px!important;filter:blur(2px) saturate(1.4)!important}
/* cert cards: static gray 2px outline, no motion */
#credentials .cert::before,#credentials .cert::after{display:none!important;content:none!important;animation:none!important}
#credentials .cert{border:2px solid #8a8a90!important;background:#000!important;background-image:none!important;box-shadow:none!important;animation:none!important}
/* cert cards: no outline at all (transparent border keeps size) */
#credentials .cert{border-color:transparent!important;box-shadow:none!important;outline:0!important}
/* desktop only: button text cleanup */
@media (min-width:900px){
html body .bar .tag.jh-foil-tag{display:inline-flex!important;align-items:center;line-height:1!important;padding-top:7px!important;padding-bottom:7px!important}
.bar .back{display:inline-flex!important;align-items:center;line-height:1!important;white-space:nowrap}
.buy,.ghost{white-space:nowrap;line-height:1.2!important}
}
@media (min-width:900px){html body .bar .tag.jh-foil-tag{min-height:34px;padding-top:6px!important;padding-bottom:6px!important}.bar .back{min-height:37px}.buy,.ghost{line-height:inherit!important}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* mobile: pills keep icon+label inside; top bar fits */
@media (max-width:560px){
#credentials .pills .pill{min-width:0!important;overflow:hidden!important;gap:.4rem!important}
#credentials .pills .pill svg{flex:0 0 auto!important}
#credentials .pills .pill b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{gap:.5rem!important;padding-left:.8rem!important;padding-right:.8rem!important}
html body .bar .tag.jh-foil-tag{flex:0 1 auto!important;min-width:0;font-size:.74rem!important;padding:.38rem .7rem!important}
.bar .back.tr{flex:0 1 auto!important;min-width:0;font-size:.7rem!important;padding:.38rem .65rem!important;white-space:nowrap}
}
/* thin moving holo edge on top-bar pills (v101) */
@property --nxa{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes nxbSpin{to{--nxa:360deg}}
html body .bar .tag.jh-foil-tag::before{inset:0!important;padding:1.5px!important;filter:none!important;z-index:1!important;background:conic-gradient(from var(--nxa),#ff7ad9,#a855f7,#4fb8ff,#7dffb0,#e8e8ef,#ff7ad9)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important;animation:nxbSpin 4s linear infinite!important;opacity:1!important}
html body .bar .back.tr{position:relative;border-color:transparent!important}
html body .bar .back.tr::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;border-radius:inherit!important;padding:1.5px!important;pointer-events:none!important;z-index:3!important;background:conic-gradient(from var(--nxa),#ff7ad9,#a855f7,#4fb8ff,#7dffb0,#e8e8ef,#ff7ad9)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important;filter:none!important;opacity:1!important;animation:nxbSpin 4s linear infinite!important}
@media (prefers-reduced-motion:reduce){html body .bar .tag.jh-foil-tag::before,html body .bar .back.tr::after{animation:none!important}}

/* devnav-2136: phone-only fit for the two top pills (desktop untouched) */
@media (max-width:600px){
html body .bar{gap:.5rem!important;padding-left:.7rem!important;padding-right:.7rem!important}
html body .bar .tag.jh-foil-tag,html body .bar .back.tr{flex:1 1 0!important;min-width:0!important;max-width:none!important;white-space:nowrap!important;justify-content:center!important;text-align:center!important;box-sizing:border-box!important;font-size:clamp(.6rem,2.75vw,.72rem)!important;padding:.5rem .55rem!important;letter-spacing:.01em!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body .bar .tag.jh-foil-tag b{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
html body .bar .back.tr{isolation:isolate!important;position:relative!important;text-shadow:0 0 2px #000,0 0 4px #000,0 1px 1px #000!important}
html body .bar .back.tr .tet-rain{z-index:-1!important;opacity:.35!important}
}