*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:#171b27;background:#fff}
a{color:inherit;text-decoration:none}
.shell{width:min(1160px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 4vw;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid #e7ecff}
.brand{display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#0055ff,#7f9cff);color:#fff;font-weight:900}.brand strong,.brand small{display:block}.brand small{color:#687087}
.site-header nav{display:flex;gap:24px;font-size:14px}.site-header nav a{transition:color .2s ease}.site-header nav a:hover{color:#0055ff}
.lang-switch{display:flex;gap:4px;background:#eef3ff;padding:4px;border-radius:12px}.lang-switch button{border:0;background:transparent;padding:7px 9px;border-radius:9px;cursor:pointer}.lang-switch button.active{background:#0055ff;color:#fff}
.hero{min-height:82vh;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center;padding:70px 0}.eyebrow,.section-number{font-size:12px;font-weight:800;letter-spacing:.14em;color:#0055ff}.hero h1{font-size:clamp(50px,7vw,92px);line-height:.95;margin:18px 0;background:linear-gradient(135deg,#0d1530 20%,#0055ff 70%,#82a2ff);-webkit-background-clip:text;color:transparent}.lead{font-size:20px;line-height:1.6;color:#4a5265;max-width:760px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.btn{padding:14px 20px;border-radius:14px;border:1px solid #cad6ff;font-weight:700;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.btn:hover{transform:translateY(-3px) scale(1.015);border-color:#0055ff;box-shadow:0 12px 28px rgba(0,85,255,.16)}.btn.primary{background:#0055ff;color:#fff}.meta{display:flex;gap:25px;color:#606a80;font-size:14px}
.portrait-card{position:relative;border-radius:40px;overflow:hidden;background:linear-gradient(145deg,#edf2ff,#fff);box-shadow:0 30px 80px rgba(0,85,255,.18);animation:portrait-float 6s ease-in-out infinite}.portrait-card::before{content:"";position:absolute;inset:-18%;background:radial-gradient(circle,rgba(0,85,255,.18),transparent 60%);z-index:0}.portrait-card img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.status{position:absolute;z-index:2;left:22px;bottom:22px;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.9);display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700}.status i{width:9px;height:9px;border-radius:50%;background:#28c76f;box-shadow:0 0 0 6px rgba(40,199,111,.15)}
@keyframes portrait-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ticker{overflow:hidden;background:#0055ff;color:#fff;padding:14px;font-weight:800;letter-spacing:.12em;white-space:nowrap}.ticker div{animation:move 22s linear infinite}@keyframes move{to{transform:translateX(-40%)}}
.section{padding:95px 0}.section-head{max-width:820px;margin-bottom:38px}.section-head h2{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:12px 0}.section-head>p:last-child{font-size:18px;color:#5a6276;line-height:1.6}
.grid{display:grid;gap:20px}.grid.two{grid-template-columns:1.2fr .8fr}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{position:relative;border:1px solid #e1e7f5;border-radius:24px;padding:28px;background:#fff;box-shadow:0 10px 30px rgba(18,38,93,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.card:hover{transform:translateY(-8px) scale(1.012);border-color:#0055ff;box-shadow:0 24px 60px rgba(0,85,255,.18),0 0 0 6px rgba(0,85,255,.07)}
.quote-card{background:linear-gradient(145deg,#f7f9ff,#fff)}.quote{font-size:70px;color:#0055ff;line-height:.6}.metrics strong{display:block;font-size:42px;color:#0055ff}.metrics span{color:#5d6679}.card h3{font-size:20px}.card p{color:#596274;line-height:1.55}
.skill-card{overflow:hidden}.skill-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:linear-gradient(145deg,#edf3ff,#fff);color:#0055ff;box-shadow:inset 0 0 0 1px rgba(0,85,255,.12);transition:transform .25s ease,background .25s ease,color .25s ease}.skill-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.skill-card:hover .skill-icon{transform:scale(1.08) rotate(-2deg);background:#0055ff;color:#fff}
.project>span,time{font-size:12px;font-weight:800;color:#0055ff}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.timeline::before{content:"";position:absolute;left:4%;right:4%;top:26px;height:2px;background:linear-gradient(90deg,#dbe5ff,#0055ff,#dbe5ff);z-index:0}.timeline .card{z-index:1;padding-top:38px}.timeline .card::before{content:"";position:absolute;top:19px;left:28px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #0055ff;box-shadow:0 0 0 5px #eef3ff}.timeline .current{background:#f3f6ff}.timeline .future{background:linear-gradient(145deg,#0055ff,#7898ff);color:#fff}.timeline .future p,.timeline .future time{color:#fff}.timeline .future::before{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.2)}
.testimonial{background:linear-gradient(135deg,#071a54,#0055ff);color:#fff;padding:42px}.testimonial blockquote{font-size:24px;line-height:1.5;margin:0 0 22px}.testimonial p{color:#dce6ff}.testimonial a{text-decoration:underline}.testimonial-mark{font-size:70px;line-height:.5}
.doc-groups{display:grid;grid-template-columns:1fr 1fr;gap:25px}.doc-group{border-top:1px solid #dbe3f5;padding-top:18px}.doc-links{display:flex;gap:10px}.doc-links .card{padding:16px 22px;font-weight:900;color:#0055ff}
.contact{background:linear-gradient(135deg,#061747,#0055ff);color:#fff;padding:90px 0}.contact h2{font-size:clamp(40px,6vw,72px);margin:10px 0}.contact p{font-size:19px;max-width:760px;color:#dce5ff}.btn.white{background:#fff;color:#0055ff}.btn.glass{border-color:rgba(255,255,255,.5)}.light{color:#fff}footer{display:flex;justify-content:space-between;padding:25px 4vw;color:#667085}
@media(max-width:900px){.site-header nav{display:none}.hero,.grid.two{grid-template-columns:1fr}.hero{padding-top:35px}.portrait-card{max-width:520px}.grid.four,.grid.three,.timeline{grid-template-columns:1fr 1fr}.timeline::before{display:none}.doc-groups{grid-template-columns:1fr}}
@media(max-width:600px){.shell{width:min(100% - 24px,1160px)}.grid.four,.grid.three,.timeline,.metrics{grid-template-columns:1fr}.hero h1{font-size:48px}.meta{flex-direction:column;gap:8px}.site-header{padding:10px 12px}.brand small{display:none}.section{padding:65px 0}.doc-links{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.honest-line{max-width:690px;padding-left:18px;border-left:3px solid #0055ff;color:#202a43;font-weight:700;line-height:1.55}
.story-kicker{display:inline-block;margin-bottom:10px;font-size:11px;font-weight:900;letter-spacing:.14em;color:#0055ff}.story-card h3{font-size:30px;margin:10px 0}.story-card p{font-size:18px}
.soft-section{background:linear-gradient(180deg,#f7f9ff,#fff)}
.why-story{padding:48px;background:linear-gradient(135deg,#fff,#f1f5ff)}.big-copy{font-size:clamp(24px,3.3vw,42px)!important;line-height:1.35!important;color:#17213d!important;margin-top:0}.process{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px}.process span{padding:12px 18px;border-radius:999px;background:#0055ff;color:#fff;font-weight:800}.process b{color:#85a3ff;font-size:22px}
.dark-section{padding:95px 0;background:linear-gradient(135deg,#061747,#09276f 60%,#0055ff);color:#fff}.dark-head h2{color:#fff}.dark-head>p:last-child{color:#dbe5ff}.dark-section .project{background:rgba(255,255,255,.97);color:#171b27}.project small{display:block;margin-top:20px;padding-top:16px;border-top:1px solid #dfe6f7;color:#0055ff;font-weight:800;line-height:1.45}.dark-section .card:hover{box-shadow:0 24px 60px rgba(0,0,0,.22),0 0 0 6px rgba(255,255,255,.12)}
.personal-response{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.25);font-weight:700;color:#fff!important}.contact-punch{font-size:26px!important;font-weight:800;color:#fff!important}.doc-group h3{margin-bottom:12px}
@media(max-width:1100px){.site-header nav{gap:14px;font-size:12px}}
@media(max-width:600px){.why-story{padding:28px}.process{align-items:flex-start;flex-direction:column}.process b{transform:rotate(90deg);margin-left:25px}}

/* V05 — refined reading hierarchy and visual rhythm */
.why-story{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:56px;
  padding:40px 44px;
}
.big-copy{
  max-width:720px;
  margin:0!important;
  font-size:clamp(18px,1.7vw,24px)!important;
  line-height:1.58!important;
  font-weight:500;
  letter-spacing:-.012em;
}
.process{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:8px;
  min-width:175px;
  margin-top:0;
}
.process span{
  width:100%;
  padding:10px 16px;
  text-align:center;
  font-size:13px;
  letter-spacing:.02em;
}
.process b{
  transform:rotate(90deg);
  font-size:18px;
  line-height:1;
}
.section-head{margin-bottom:32px}
.section-head h2{font-size:clamp(32px,4.3vw,52px)}
.story-card p,.skill-card p,.project p{font-size:16px;line-height:1.62}
.testimonial blockquote{max-width:900px;font-size:clamp(20px,2.1vw,27px)}

@media(max-width:760px){
  .why-story{grid-template-columns:1fr;row-gap:28px;padding:30px 28px}
  .big-copy{font-size:18px!important;line-height:1.6!important}
  .process{grid-template-columns:repeat(7,auto);justify-content:start;min-width:0;overflow-x:auto;width:100%}
  .process span{width:auto;white-space:nowrap}
  .process b{transform:none}
}
@media(max-width:520px){
  .process{grid-template-columns:1fr;justify-items:start;overflow:visible}
  .process span{width:100%}
  .process b{transform:rotate(90deg);margin-left:24px}
}

/* V06 — IT / systems visual language, retaining the original royal-blue palette */
:root{--blue:#0055ff;--ink:#0a1020;--navy:#061747;--line:#dbe5ff;--soft:#f5f8ff;--cyan:#67e8f9}
body{background-color:#fff;background-image:linear-gradient(rgba(0,85,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,85,255,.025) 1px,transparent 1px);background-size:32px 32px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 75% 10%,rgba(0,85,255,.10),transparent 28%),radial-gradient(circle at 10% 70%,rgba(127,156,255,.08),transparent 24%)}
.site-header{background:rgba(5,14,38,.94);border-bottom:1px solid rgba(103,232,249,.18);box-shadow:0 10px 30px rgba(2,10,30,.16);color:#fff}.brand-mark{border-radius:8px;background:var(--blue);box-shadow:0 0 24px rgba(0,85,255,.5)}.brand small{color:#9fb2dc}.site-header nav a{color:#cbd7f3}.site-header nav a:hover{color:#67e8f9}.lang-switch{background:#101d3d;border:1px solid #263a67}.lang-switch button{color:#b9c8e8}.lang-switch button.active{background:var(--blue);color:#fff}
.hero{position:relative}.hero::before{content:none;display:none}.eyebrow,.section-number,.story-kicker,.project>span,time{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.hero h1{letter-spacing:-.055em}.honest-line{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;background:#f4f7ff;padding:16px 18px;border:1px solid #d9e3ff;border-left:3px solid var(--blue);border-radius:0 10px 10px 0}.honest-line::before{content:"> ";color:var(--blue)}
.btn{border-radius:8px}.btn.primary{box-shadow:0 8px 28px rgba(0,85,255,.25)}.meta{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.meta span::before{content:"[";color:var(--blue)}.meta span::after{content:"]";color:var(--blue)}
.portrait-card{border-radius:18px;border:1px solid #b9caff;box-shadow:16px 16px 0 #e9efff,0 30px 80px rgba(0,85,255,.16)}.portrait-card::after{content:"NODE 01  •  ONLINE";position:absolute;z-index:3;top:14px;left:14px;padding:7px 10px;background:rgba(5,14,38,.88);border:1px solid rgba(103,232,249,.3);border-radius:6px;color:#dffbff;font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}.status{border-radius:7px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.ticker{background:#071631;border-block:1px solid #173b7c;color:#d9faff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.ticker div::before{content:"$ ";color:#67e8f9}
.section-head h2{letter-spacing:-.035em}.section-number::before{content:"// ";opacity:.6}.card{border-radius:12px;border-color:#d8e2f5;box-shadow:0 8px 24px rgba(18,38,93,.045)}.card::after{content:"";position:absolute;top:-1px;left:18px;width:42px;height:2px;background:var(--blue);opacity:.75}.card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(0,85,255,.14),0 0 0 1px rgba(0,85,255,.08)}
.skill-icon{border-radius:9px;background:#eef4ff}.skill-card h3,.project h3,.doc-group h3{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.skill-card h3::before{content:"./";color:var(--blue);font-weight:500}.project small{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.soft-section{background-color:#f7f9ff;background-image:linear-gradient(rgba(0,85,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,85,255,.04) 1px,transparent 1px);background-size:28px 28px}.why-story{border:1px solid #cad8ff;background:rgba(255,255,255,.9)}.process span{border-radius:7px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.process b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.dark-section{position:relative;background:#06132d;background-image:linear-gradient(rgba(91,139,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(91,139,255,.08) 1px,transparent 1px),radial-gradient(circle at 85% 20%,rgba(0,85,255,.38),transparent 30%);background-size:34px 34px,34px 34px,auto}.dark-section::before{content:"PROJECT_REPOSITORY";position:absolute;right:5vw;top:38px;color:#6383c7;font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.dark-section .project{border-color:#263c6d;background:#0b1d43;color:#fff}.dark-section .project p{color:#b8c8e8}.dark-section .project small{border-top-color:#294579;color:#73e8ff}.dark-section .project>span{color:#67e8f9}.dark-section .card::after{background:#67e8f9}
.timeline .card{border-top:3px solid #cbd8f8}.timeline .current{border-top-color:var(--blue)}.timeline .future{border-top-color:#67e8f9}.testimonial{border:1px solid #214b9d;border-radius:12px;background:#071a3d;background-image:linear-gradient(135deg,rgba(0,85,255,.32),transparent 60%)}.testimonial::after{background:#67e8f9}
.doc-group{border-top:1px solid #c9d7f5}.doc-links .card{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.doc-links .card::before{content:"PDF ";font-size:10px;color:#7184ad}.contact{background:#06132d;background-image:linear-gradient(rgba(91,139,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(91,139,255,.08) 1px,transparent 1px);background-size:34px 34px}.contact h2{letter-spacing:-.045em}footer{background:#040d20;color:#92a5cb;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:600px){.hero::before,.dark-section::before{display:none}.portrait-card{box-shadow:8px 8px 0 #e9efff,0 20px 50px rgba(0,85,255,.15)}}
.sysline{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;color:#657aa8;font:700 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace}.sysline span:first-child,.sysline b:last-of-type{color:#0055ff}.tech-strip{display:flex;gap:8px;margin-bottom:18px}.tech-strip span{padding:5px 8px;border:1px solid #cddaff;border-radius:5px;background:#f5f8ff;color:#41619c;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}

/* V07 — recruiter-focused platform-development proof */
.recruiter-section{background:#fff}
.stack-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-bottom:18px}
.stack-panel,.evidence-panel{padding:28px}
.panel-label{display:inline-block;margin-bottom:16px;color:#0055ff;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.stack-tags{display:flex;flex-wrap:wrap;gap:9px}.stack-tags span{padding:9px 11px;border:1px solid #cddaff;border-radius:7px;background:#f6f9ff;color:#17305f;font:750 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.stack-tags span::before{content:"+ ";color:#0055ff}.stack-note{margin:20px 0 0;color:#667085;font-size:14px;line-height:1.55}
.evidence-panel{background:#071a3d;color:#fff;border-color:#173b7c}.evidence-panel::after{background:#67e8f9}.evidence-panel h3{margin:0 0 16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.proof-list{padding:0;margin:0;list-style:none;display:grid;gap:12px}.proof-list li{position:relative;padding-left:22px;color:#c8d7f3;line-height:1.5}.proof-list li::before{content:"✓";position:absolute;left:0;color:#67e8f9;font-weight:900}
.next-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.next-card{padding:22px}.next-card>span,.trouble-flow article>span{color:#0055ff;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.next-card h3{font-size:16px;line-height:1.35;margin:10px 0}.next-card p{margin:0;color:#667085;font-size:14px;line-height:1.55}
.troubleshooting-section{border-block:1px solid #e4eaf8}.trouble-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:steps}.trouble-flow article{padding:24px}.trouble-flow h3{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;margin:10px 0}.trouble-flow p{margin:0;color:#667085;line-height:1.55}.recruiter-callout{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:center;margin-top:18px;padding:28px;border-left:4px solid #0055ff}.recruiter-callout h3{margin:0;font-size:24px}.recruiter-callout p{margin:0;color:#42506d;line-height:1.65}
@media(max-width:980px){.stack-layout,.recruiter-callout{grid-template-columns:1fr}.next-grid,.trouble-flow{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.next-grid,.trouble-flow{grid-template-columns:1fr}.stack-panel,.evidence-panel,.recruiter-callout{padding:22px}.stack-tags span{font-size:11px}}


/* V08 — technical evidence interface; palette intentionally unchanged */
:root{--blue:#0055ff;--ink:#0a1020;--navy:#061747;--line:#dbe5ff;--soft:#f5f8ff;--cyan:#67e8f9}
body{background-image:radial-gradient(circle at 1px 1px,rgba(0,85,255,.055) 1px,transparent 0),linear-gradient(rgba(0,85,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,85,255,.018) 1px,transparent 1px);background-size:24px 24px,96px 96px,96px 96px}
.site-header::after{content:none;display:none}
.section-head{position:relative;padding-left:20px}.section-head::before{content:"";position:absolute;left:0;top:2px;bottom:4px;width:2px;background:linear-gradient(#0055ff,#dbe5ff)}
.section-head::after{content:"";position:absolute;left:-4px;top:2px;width:10px;height:10px;border:2px solid #0055ff;background:#fff;box-shadow:0 0 0 5px #eef3ff}
.card{overflow:hidden}.card::before{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,transparent 49%,#dbe5ff 50%,#dbe5ff 53%,transparent 54%);opacity:.8;pointer-events:none}
.card:hover::before{background:linear-gradient(135deg,transparent 49%,#0055ff 50%,#0055ff 53%,transparent 54%)}
.metrics .card{min-height:132px;padding-top:38px}.metrics .card::after{width:100%;left:0;background:linear-gradient(90deg,#0055ff 0 28%,#dbe5ff 28% 100%)}.metrics .card strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.metrics .card span{font:700 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}
.tech-strip::before{content:"BUS://";align-self:center;color:#0055ff;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}
.report-section{background:#f7f9ff;border-block:1px solid #dbe5ff;position:relative}.report-section::before{content:"ACADEMIC_TELEMETRY";position:absolute;right:4vw;top:34px;color:#7590c8;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.report-console{border:1px solid #173b7c;background:#061747;box-shadow:0 24px 60px rgba(6,23,71,.16),14px 14px 0 #e7edff;overflow:hidden}
.console-titlebar{min-height:42px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid #173b7c;background:#071a3d;color:#92a5cb;font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}.console-titlebar strong{color:#67e8f9}.console-dots{display:flex;gap:6px}.console-dots i{width:8px;height:8px;border:1px solid #7590c8;background:#0b285d}.console-dots i:first-child{background:#0055ff}.console-dots i:nth-child(2){background:#7f9cff}.console-dots i:nth-child(3){background:#dbe5ff}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #173b7c}.report-summary>div{padding:24px;border-right:1px solid #173b7c}.report-summary>div:last-child{border-right:0}.report-summary span,.report-summary small{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.report-summary span{color:#7590c8;font-size:10px;font-weight:800;letter-spacing:.1em}.report-summary strong{display:block;margin:8px 0 6px;color:#fff;font:850 38px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.report-summary small{color:#b8c8e8;font-size:11px;line-height:1.4}
.report-body{display:grid;grid-template-columns:1.25fr .75fr}.grade-terminal{padding:28px;border-right:1px solid #173b7c;background-image:linear-gradient(rgba(91,139,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,139,255,.05) 1px,transparent 1px);background-size:28px 28px}.terminal-line{display:flex;gap:10px;margin-bottom:22px;color:#92a5cb;font:700 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}.terminal-line .prompt{color:#67e8f9}.grade-row{display:grid;gap:8px;margin:16px 0}.grade-row>div:first-child{display:flex;justify-content:space-between;gap:16px}.grade-row b,.grade-row span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.grade-row b{color:#dbe5ff;font-size:12px}.grade-row span{color:#7590c8;font-size:11px}.grade-track{height:6px;border:1px solid #294579;background:#071a3d}.grade-track i{display:block;width:var(--grade);height:100%;background:linear-gradient(90deg,#0055ff,#7f9cff);box-shadow:0 0 14px rgba(0,85,255,.45)}
.report-notes{padding:28px;background:#fff}.report-notes h3{margin:0 0 14px;color:#0a1020;font:800 20px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace}.report-notes p{color:#596274;line-height:1.65}.module-chips{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.module-chips span{padding:7px 8px;border:1px solid #cddaff;background:#f5f8ff;color:#41619c;font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}.report-link{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid #0055ff;color:#0055ff;font:800 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}.report-link:hover{background:#0055ff;color:#fff}
.stack-panel{background-image:linear-gradient(90deg,rgba(0,85,255,.035) 1px,transparent 1px),linear-gradient(rgba(0,85,255,.035) 1px,transparent 1px);background-size:22px 22px}.stack-tags span{position:relative;padding-left:21px}.stack-tags span::before{content:"";position:absolute;left:9px;top:50%;width:5px;height:5px;transform:translateY(-50%);background:#0055ff;box-shadow:0 0 0 3px rgba(0,85,255,.10)}
.trouble-flow{position:relative}.trouble-flow::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#7f9cff,#0055ff,#7f9cff,transparent);z-index:0}.trouble-flow article{z-index:1;background:#fff}.trouble-flow article>span{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #cddaff;background:#f5f8ff}
.project{min-height:300px}.project::before{content:"REPO";position:absolute;right:14px;top:14px;color:#6383c7;font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.dark-section .project::before{color:#6383c7}
.doc-links .card{display:flex;align-items:center;justify-content:space-between;gap:12px}.doc-links .card::after{content:"↗";position:static;width:auto;height:auto;background:none;color:#0055ff;opacity:1}
@media(max-width:980px){.report-summary{grid-template-columns:1fr 1fr}.report-summary>div:nth-child(2){border-right:0}.report-summary>div:nth-child(-n+2){border-bottom:1px solid #173b7c}.report-body{grid-template-columns:1fr}.grade-terminal{border-right:0;border-bottom:1px solid #173b7c}.trouble-flow::before{display:none}}
@media(max-width:600px){.site-header::after,.report-section::before{display:none}.report-console{box-shadow:7px 7px 0 #e7edff}.report-summary{grid-template-columns:1fr}.report-summary>div{border-right:0;border-bottom:1px solid #173b7c!important}.report-summary>div:last-child{border-bottom:0!important}.console-titlebar{grid-template-columns:auto 1fr}.console-titlebar strong{display:none}.grade-terminal,.report-notes{padding:20px}.grade-row>div:first-child{align-items:flex-end}.grade-row b{max-width:65%}.section-head{padding-left:16px}}

.scale-note{display:block;margin:-10px 0 20px;color:#6383c7;font:700 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}

/* V09 — interactive technical effects inspired by the supplied CodePen references.
   Existing portfolio palette is retained; only current blues/navy/white/greys are used. */
.fx-hero{isolation:isolate}
.fx-hero .hero-copy,.fx-hero .portrait-card{position:relative;z-index:2}
.system-matrix{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;opacity:.24;mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 82%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 82%)}
.hero-scanline{position:absolute;z-index:1;left:0;right:0;top:0;height:80px;pointer-events:none;opacity:.28;background:linear-gradient(180deg,transparent,rgba(0,85,255,.08),rgba(127,156,255,.12),transparent);animation:system-scan 7s linear infinite;mix-blend-mode:multiply}
@keyframes system-scan{0%{transform:translateY(-110px)}100%{transform:translateY(calc(82vh + 110px))}}

/* Scroll-in system reveal. JS adds .reveal only after loading, so content remains visible without JS. */
.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
.motion-ready .reveal:nth-child(2){transition-delay:.05s}.motion-ready .reveal:nth-child(3){transition-delay:.1s}.motion-ready .reveal:nth-child(4){transition-delay:.15s}

/* Pointer-driven 3D cards / technical light sweep; no new colours. */
.motion-ready .card.fx-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease}
.motion-ready .card.fx-tilt:hover{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateY(-4px)}
.motion-ready .card.fx-tilt>*{position:relative;z-index:1}
.motion-ready .card.fx-tilt{background-image:radial-gradient(circle at var(--fx-x,50%) var(--fx-y,50%),rgba(0,85,255,.075),transparent 34%)}
.motion-ready .dark-section .card.fx-tilt{background-color:#0b1d43;background-image:radial-gradient(circle at var(--fx-x,50%) var(--fx-y,50%),rgba(127,156,255,.13),transparent 36%)}
.motion-ready .evidence-panel.fx-tilt,.motion-ready .testimonial.fx-tilt{background-color:#071a3d;background-image:radial-gradient(circle at var(--fx-x,50%) var(--fx-y,50%),rgba(127,156,255,.14),transparent 38%)}

/* Button light pass + subtle magnetic movement. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;z-index:-1;top:-45%;bottom:-45%;left:-35%;width:28%;transform:skewX(-22deg) translateX(-260%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transition:transform .55s ease;pointer-events:none}
.btn:hover::after{transform:skewX(-22deg) translateX(650%)}
.motion-ready .btn.fx-magnetic{will-change:transform;transition:transform .16s ease,box-shadow .22s ease,border-color .22s ease}

/* CRT/data texture in the dark technical panels. */
.report-console,.testimonial,.dark-section{position:relative}
.report-console::after,.testimonial::before,.dark-section::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.07;background:repeating-linear-gradient(0deg,transparent 0 3px,#7f9cff 4px)}
.report-console>*{position:relative;z-index:6}
.dark-section>.shell,.testimonial>*{position:relative;z-index:6}

/* Small active-section status line. */
.site-header nav a.fx-active{color:#67e8f9}
.site-header nav a.fx-active::marker{color:#67e8f9}
.site-header nav a.fx-active{text-shadow:0 0 16px rgba(103,232,249,.28)}

@media(max-width:900px){.system-matrix{opacity:.16;mask-image:none;-webkit-mask-image:none}.hero-scanline{opacity:.18}}
@media(hover:none),(pointer:coarse){.motion-ready .card.fx-tilt:hover{transform:none}.motion-ready .card.fx-tilt{background-image:none}.motion-ready .dark-section .card.fx-tilt,.motion-ready .evidence-panel.fx-tilt,.motion-ready .testimonial.fx-tilt{background-image:none}}
@media(prefers-reduced-motion:reduce){.system-matrix,.hero-scanline{display:none}.typed-heading .type-char{opacity:1}.typed-heading .typing-caret{display:none}.motion-ready .reveal{opacity:1;transform:none}.site-header nav .nav-layer,.site-header nav .nav-scan,.site-header nav .nav-indicator{display:none}}


/* V10 — requested navigation + typed/glitch heading behaviour.
   Palette intentionally unchanged: only colours already present in this portfolio are used. */

/* Navbar: sliding focus/active frame + retro glitch/scanline interaction. */
.site-header .fx-nav{
  --nav-left:0px;--nav-top:0px;--nav-width:0px;--nav-height:0px;
  position:relative;display:flex;align-items:center;gap:3px;padding:3px;
  border:1px solid #173b7c;background:#071a3d;overflow:hidden;
}
.site-header .fx-nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#7f9cff 4px);
}
.site-header .fx-nav .nav-indicator{
  position:absolute;z-index:0;left:var(--nav-left);top:var(--nav-top);width:var(--nav-width);height:var(--nav-height);
  border:1px solid #0055ff;background:#0b285d;box-shadow:inset 0 0 0 1px rgba(127,156,255,.12),0 0 18px rgba(0,85,255,.15);
  transition:left .28s cubic-bezier(.2,.75,.25,1),top .28s cubic-bezier(.2,.75,.25,1),width .28s cubic-bezier(.2,.75,.25,1),height .28s cubic-bezier(.2,.75,.25,1),opacity .2s ease;
  opacity:0;pointer-events:none;
}
.site-header .fx-nav .nav-indicator.is-on{opacity:1}
.site-header .fx-nav a{
  position:relative;z-index:1;isolation:isolate;overflow:hidden;display:block;padding:8px 9px;
  color:#cbd7f3;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:750;letter-spacing:.025em;
  white-space:nowrap;transition:color .18s ease,text-shadow .18s ease;
}
.site-header .fx-nav a::before{
  content:"";position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:2px;background:#0055ff;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.site-header .fx-nav a.fx-active::before{transform:scaleX(1)}
.site-header .fx-nav a:hover,.site-header .fx-nav a:focus-visible,.site-header .fx-nav a.fx-active{color:#67e8f9;text-shadow:0 0 14px rgba(103,232,249,.22)}
.site-header .fx-nav a:focus-visible{outline:1px solid #7f9cff;outline-offset:-2px}
.site-header .nav-text{position:relative;display:block;min-height:1em}
.site-header .nav-base,.site-header .nav-layer{display:block}
.site-header .nav-layer{position:absolute;inset:0;pointer-events:none;opacity:0;color:inherit}
.site-header .nav-layer-a{color:#7f9cff;clip-path:inset(0 0 52% 0)}
.site-header .nav-layer-b{color:#0055ff;clip-path:inset(50% 0 0 0)}
.site-header .nav-scan{
  position:absolute;z-index:3;left:0;right:0;top:-3px;height:2px;opacity:0;pointer-events:none;
  background:#7f9cff;box-shadow:0 0 8px rgba(127,156,255,.45);
}
.site-header .fx-nav a:hover .nav-layer-a,.site-header .fx-nav a:focus-visible .nav-layer-a{opacity:.9;animation:nav-slice-a .34s steps(2,end) 1}
.site-header .fx-nav a:hover .nav-layer-b,.site-header .fx-nav a:focus-visible .nav-layer-b{opacity:.86;animation:nav-slice-b .34s steps(2,end) 1}
.site-header .fx-nav a:hover .nav-base,.site-header .fx-nav a:focus-visible .nav-base{animation:nav-base-jitter .34s steps(2,end) 1}
.site-header .fx-nav a:hover .nav-scan,.site-header .fx-nav a:focus-visible .nav-scan{opacity:.8;animation:nav-scan-pass .42s linear 1}
/* Active entries get the occasional restrained displacement pulse from the reference interaction. */
.site-header .fx-nav a.fx-active .nav-layer-a{animation:nav-active-pulse 3.2s steps(2,end) infinite}
.site-header .fx-nav a.fx-active .nav-layer-b{animation:nav-active-pulse-b 3.2s steps(2,end) infinite}
@keyframes nav-slice-a{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,-1px)}55%{transform:translate(-4px,1px)}75%{transform:translate(2px,0)}}
@keyframes nav-slice-b{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,1px)}50%{transform:translate(4px,-1px)}80%{transform:translate(-2px,0)}}
@keyframes nav-base-jitter{0%,100%{transform:none}30%{transform:translateX(1px)}55%{transform:translateX(-1px)}75%{transform:none}}
@keyframes nav-scan-pass{0%{transform:translateY(0)}100%{transform:translateY(28px)}}
@keyframes nav-active-pulse{0%,88%,100%{opacity:0;transform:none}90%{opacity:.6;transform:translate(2px,-1px)}92%{opacity:0;transform:translate(-2px,1px)}}
@keyframes nav-active-pulse-b{0%,90%,100%{opacity:0;transform:none}92%{opacity:.55;transform:translate(-2px,1px)}94%{opacity:0;transform:translate(2px,-1px)}}

/* Typed header: per-character reveal, blinking caret and optional symbol decoding. */
.typed-heading{position:relative}
.typed-heading .typed-placeholder{visibility:hidden;pointer-events:none}
.typed-heading .typed-animation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.typed-heading .type-char{opacity:0;transition:opacity .18s ease-in}
.typed-heading .type-char.visible{opacity:1}
.typed-heading .type-char.is-decoding{color:#0055ff;text-shadow:1px 0 #7f9cff,-1px 0 #0d1530}
.typed-heading .typing-caret{display:inline-block;width:.08em;height:.9em;margin-right:-.08em;vertical-align:-.04em;background:#0055ff;animation:typed-caret-blink .75s step-end infinite}
.dark-section .typed-heading .typing-caret,.contact .typed-heading .typing-caret{background:#7f9cff}
.hero .typed-heading .type-char{background:linear-gradient(135deg,#0d1530 20%,#0055ff 70%,#82a2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .typed-heading .type-char.is-decoding{color:#0055ff;-webkit-text-fill-color:#0055ff;background:none}
@keyframes typed-caret-blink{from,to{opacity:1}50%{opacity:0}}

@media(max-width:1100px){.site-header .fx-nav a{padding:7px 6px;font-size:10px}}
@media(max-width:900px){.site-header .fx-nav{display:none}}
@media(prefers-reduced-motion:reduce){
  .typed-heading .typed-placeholder{display:none}.typed-heading .typed-animation{position:static}.typed-heading .type-char{opacity:1}.typed-heading .typing-caret{display:none}
  .site-header .fx-nav .nav-indicator,.site-header .nav-layer,.site-header .nav-scan{display:none!important}.site-header .fx-nav a.fx-active::before{transform:scaleX(1)}
}


/* V11 — cleanup: remove redundant labels, stabilise navigation and typed headings. */
.site-header::after,.hero::before{content:none!important;display:none!important}
.timeline{grid-template-columns:repeat(3,1fr)}

/* The typed text itself occupies the layout. Hidden characters reserve their final
   width, so the effect cannot create a second wrapped copy of a heading. */
.typed-heading{position:relative}
.typed-heading .typed-placeholder{display:none!important}
.typed-heading .typed-animation{position:static!important;inset:auto!important;width:auto!important;height:auto!important;pointer-events:none}
.typed-heading .type-word{display:inline-block;white-space:nowrap}
.typed-heading .type-char{display:inline;opacity:0;transition:opacity .18s ease-in}
.typed-heading .type-char.visible{opacity:1}
.typed-heading .typing-caret{display:inline-block;width:.08em;height:.9em;margin-right:-.08em;vertical-align:-.04em;background:#0055ff;animation:typed-caret-blink .75s step-end infinite}

/* Keep every navigation label on exactly one line and one source string. */
.site-header .fx-nav{flex-wrap:nowrap}
.site-header .fx-nav a{min-width:0;line-height:1;white-space:nowrap}
.site-header .nav-text{white-space:nowrap}

@media(max-width:900px){.timeline{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.timeline{grid-template-columns:1fr}}


/* V12 — single-source visible content. No visible label is cloned for effects. */
.single-stack{display:block!important}
.single-stack .stack-panel{width:100%}

/* Navbar glitch on the one real text node. The frame stays separate but contains no text. */
.site-header .nav-text,.site-header .nav-base,.site-header .nav-layer,.site-header .nav-scan{display:none!important}
.site-header .fx-nav a{transform:translateZ(0)}
.site-header .fx-nav a:hover,.site-header .fx-nav a:focus-visible{
  animation:nav-single-glitch .34s steps(2,end) 1;
}
.site-header .fx-nav a.fx-active{
  animation:nav-single-pulse 3.4s steps(2,end) infinite;
}
@keyframes nav-single-glitch{
  0%,100%{transform:translate(0);text-shadow:0 0 14px rgba(103,232,249,.22)}
  25%{transform:translate(1px,-1px);text-shadow:2px 0 #7f9cff,-1px 0 #0055ff}
  52%{transform:translate(-1px,1px);text-shadow:-2px 0 #7f9cff,1px 0 #0055ff}
  78%{transform:translate(1px,0);text-shadow:1px 0 #0055ff}
}
@keyframes nav-single-pulse{
  0%,90%,100%{transform:none}
  92%{transform:translateX(1px)}
  94%{transform:translateX(-1px)}
  96%{transform:none}
}

/* Typed headings contain one character set only; no hidden duplicate copy. */
.typed-heading .visually-hidden{display:none!important}

/* Removed duplicate content blocks should not leave spacing artifacts. */
#about .section-head{margin-bottom:0}
#projects .grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){#projects .grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){#projects .grid.three{grid-template-columns:1fr}}


/* V13 — requested effect mapping.
   Navbar: retro displaced/scanline glitch inspired by jdillon/BypYNVa.
   All regular buttons: click "bump" burst inspired by Sicontis' Bump Button.
   Existing palette only; no new colours. */

/* NAVBAR — one semantic label, transient visual slices only while glitching. */
.site-header .fx-nav{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:4px;
  padding:3px;
  overflow:hidden;
  border:1px solid #173b7c;
  background:#071a3d;
}
.site-header .fx-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(127,156,255,.12) 4px 5px);
}
.site-header .fx-nav .nav-indicator{display:none!important}
.site-header .fx-nav a{
  position:relative;
  z-index:1;
  isolation:isolate;
  display:block;
  overflow:hidden;
  padding:8px 9px;
  border:1px solid transparent;
  background:#071a3d;
  color:#cbd7f3;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  font-weight:750;
  line-height:1;
  letter-spacing:.025em;
  white-space:nowrap;
  text-shadow:none;
  transform:none;
  animation:none;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.site-header .fx-nav a::before,
.site-header .fx-nav a::after{
  content:attr(data-glitch);
  position:absolute;
  inset:0;
  z-index:2;
  display:block!important;
  box-sizing:border-box;
  width:auto;
  height:auto;
  padding:8px 9px;
  background:none;
  pointer-events:none;
  opacity:0;
  transform:none;
  transition:none;
  font:inherit;
  letter-spacing:inherit;
  white-space:nowrap;
  filter:url(#nav-jdillon-displace);
}
.site-header .fx-nav a::before{
  color:#67e8f9;
  clip-path:inset(0 0 52% 0);
}
.site-header .fx-nav a::after{
  color:#7f9cff;
  clip-path:inset(48% 0 0 0);
}
.site-header .fx-nav a:hover,
.site-header .fx-nav a:focus-visible,
.site-header .fx-nav a.fx-active{
  color:#67e8f9;
  border-color:#0055ff;
  background:#0b285d;
  text-shadow:none;
}
.site-header .fx-nav a.fx-active{animation:none}
.site-header .fx-nav a:focus-visible{outline:1px solid #7f9cff;outline-offset:1px}
.site-header .fx-nav a.is-glitching{
  animation:jdillon-nav-base .30s steps(2,end) 1;
}
.site-header .fx-nav a.is-glitching::before{
  opacity:.95;
  animation:jdillon-nav-top .30s steps(2,end) 1;
}
.site-header .fx-nav a.is-glitching::after{
  opacity:.88;
  animation:jdillon-nav-bottom .30s steps(2,end) 1;
}
@keyframes jdillon-nav-base{
  0%,100%{transform:translate(0)}
  22%{transform:translate(1px,-1px)}
  44%{transform:translate(-2px,1px)}
  66%{transform:translate(2px,0)}
  84%{transform:translate(-1px,0)}
}
@keyframes jdillon-nav-top{
  0%,100%{transform:translate(0);opacity:0}
  16%{transform:translate(4px,-1px);opacity:.9}
  42%{transform:translate(-3px,1px);opacity:.95}
  68%{transform:translate(2px,0);opacity:.7}
  86%{transform:translate(-1px,-1px);opacity:.45}
}
@keyframes jdillon-nav-bottom{
  0%,100%{transform:translate(0);opacity:0}
  12%{transform:translate(-3px,1px);opacity:.85}
  38%{transform:translate(4px,-1px);opacity:.9}
  64%{transform:translate(-2px,0);opacity:.68}
  82%{transform:translate(1px,1px);opacity:.42}
}

/* BUMP BUTTON — click/press impulse + six-dot burst, adapted to the existing button shapes. */
.btn::after{display:none!important}
.btn:hover{transform:none}
.fx-bump{
  --bump-dur:.32s;
  position:relative;
  overflow:visible!important;
  isolation:isolate;
  transform-origin:50% 50%;
}
.fx-bump .bump-burst{
  position:absolute;
  z-index:4;
  top:50%;
  right:8px;
  width:42px;
  height:42px;
  pointer-events:none;
  opacity:0;
  transform:translate(50%,-50%) scale(.3);
  transform-origin:50% 50%;
}
.fx-bump .bump-burst i{
  position:absolute;
  inset:0;
  display:block;
  transform:rotate(calc(60deg * var(--i)));
}
.fx-bump .bump-burst i::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7f9cff;
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(127,156,255,.45);
}
.fx-bump.is-bumping{
  animation:bump-button-hit var(--bump-dur) ease-out 1;
}
.fx-bump.is-bumping .bump-burst{
  animation:bump-dot-burst var(--bump-dur) .08s ease-in-out 1;
}
@keyframes bump-button-hit{
  0%,100%{transform:translate(0,0) scale(1)}
  58%{transform:translate(5px,0) scale(.985)}
}
@keyframes bump-dot-burst{
  0%{opacity:0;transform:translate(50%,-50%) scale(.3)}
  42%{opacity:.72}
  100%{opacity:0;transform:translate(50%,-50%) scale(1)}
}
.lang-switch button.fx-bump{overflow:visible!important}
.lang-switch button.fx-bump .bump-burst{right:3px;width:30px;height:30px}
.lang-switch button.fx-bump .bump-burst i::after{width:4px;height:4px}

.fx-nav-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .site-header .fx-nav a::before,.site-header .fx-nav a::after,.fx-bump .bump-burst{display:none!important}
  .site-header .fx-nav a.is-glitching,.fx-bump.is-bumping{animation:none!important}
}


/* V14 — cleanup + replayable on-scroll heading effect. */
.brand strong{display:block}
.hero-copy>.eyebrow{margin-top:0}
/* The removed terminal identity line leaves no spacer. */
.sysline{display:none!important}


/* V15 — IT-first edition.
   Same palette. Less marketing, more infrastructure / operations language. */

/* Stronger technical reading rhythm without adding decorative noise. */
body{font-feature-settings:"kern" 1,"liga" 1}
.site-header{min-height:66px}
.brand strong{font-size:14px;letter-spacing:.01em}
.site-header .fx-nav{border-radius:4px}
.site-header .fx-nav a{font-size:10.5px;letter-spacing:.035em}

/* Hero: clean system-engineering statement, no redundant terminal labels. */
.hero{min-height:76vh;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:76px;padding:82px 0 92px}
.hero-copy{max-width:780px}
.hero h1{max-width:820px;font-size:clamp(52px,6.5vw,88px);line-height:.93}
.hero .lead{max-width:720px;font-size:19px}
.hero .honest-line{max-width:720px;margin-top:22px;background:rgba(245,248,255,.94)}
.hero .actions{margin-top:24px}
.hero .meta{margin-top:18px}
.portrait-card::after{content:none!important;display:none!important}
.status{left:16px;bottom:16px;padding:9px 12px;font-size:10px;letter-spacing:.07em;background:rgba(5,14,38,.88);color:#dbe5ff;border:1px solid #173b7c}
.status i{width:7px;height:7px;box-shadow:0 0 0 4px rgba(40,199,111,.15)}

/* IT-first section order: first stack, then projects, then incident thinking. */
#platform-stack{padding-top:86px;border-top:1px solid #dbe5ff}
#platform-stack .section-head{max-width:900px}

/* Infrastructure config view. */
.stack-console{overflow:hidden;border:1px solid #173b7c;background:#061747;box-shadow:12px 12px 0 #e7edff;margin-bottom:20px}
.stack-console-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 16px;border-bottom:1px solid #173b7c;background:#071a3d;color:#92a5cb;font:750 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.stack-console-bar span:first-child{color:#67e8f9}
.stack-groups{display:grid;grid-template-columns:1fr 1fr}
.stack-groups article{display:grid;grid-template-columns:120px 1fr;gap:18px;min-height:122px;padding:22px;border-bottom:1px solid #173b7c}
.stack-groups article:nth-child(odd){border-right:1px solid #173b7c}
.stack-groups article:nth-last-child(-n+2){border-bottom:0}
.stack-key{padding-top:5px;color:#67e8f9;font:800 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em;text-transform:uppercase}
.stack-key::before{content:"/";color:#7f9cff;margin-right:4px}
.stack-groups article>div{display:flex;align-content:flex-start;flex-wrap:wrap;gap:8px}
.stack-groups code{padding:8px 10px;border:1px solid #294579;background:#0b1d43;color:#dbe5ff;font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.stack-console>.stack-note{margin:0;padding:16px 22px;border-top:1px solid #173b7c;background:#071a3d;color:#92a5cb;font:650 11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}

/* Learning backlog reads like an engineering backlog, not four marketing cards. */
.learning-backlog{position:relative;margin-top:34px;padding-top:34px;border-top:1px solid #dbe5ff}
.learning-backlog::before{content:"NEXT_LEARNING_BACKLOG";position:absolute;top:0;left:0;color:#0055ff;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em}
.learning-backlog .next-card{border-radius:4px;box-shadow:none;border-color:#dbe5ff;background:#fff}
.learning-backlog .next-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,85,255,.09)}
.learning-backlog .next-card::before{display:none}
.learning-backlog .next-card h3{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* Project repository becomes a readable engineering list. */
.dark-section::before{content:"LAB / PROJECTS"}
.project-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid #263c6d;background:#263c6d}
.project-list .project{min-height:0;border:0;border-radius:0;padding:28px 30px;background:#0b1d43;box-shadow:none}

.project-list .project::after{left:0;width:3px;height:100%;top:0;opacity:.95;background:#0055ff}
.project-list .project::before{content:attr(data-domain);right:18px;top:18px;color:#6383c7;font-size:9px}
.project-list .project>span{display:inline-block;margin-bottom:24px;color:#67e8f9}
.project-list .project h3{margin:0 0 12px;font-size:22px;color:#fff;letter-spacing:-.02em}
.project-list .project p{max-width:580px;margin:0;color:#b8c8e8}
.project-list .project small{max-width:580px}
.project-list .project:hover{transform:none;background:#0d234f;box-shadow:inset 0 0 0 1px #0055ff}

/* Troubleshooting is the strongest "how I think" proof: make it an incident pipeline. */
.troubleshooting-section{background:#fff}
.trouble-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #dbe5ff;background:#dbe5ff}
.trouble-flow::before{display:none}
.trouble-flow article{min-height:220px;border:0;border-radius:0;box-shadow:none;background:#fff;padding:26px}
.trouble-flow article:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:26px;z-index:4;width:24px;height:24px;display:grid;place-items:center;background:#0055ff;color:#fff;font:900 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.trouble-flow article::before{display:none}
.trouble-flow article>span{border:0;background:#061747;color:#67e8f9}
.trouble-flow h3{font-size:18px}
.trouble-flow article:hover{transform:none;box-shadow:inset 0 0 0 1px #0055ff}
.recruiter-callout{border-radius:0;box-shadow:none;background:#f7f9ff}
.recruiter-callout::before{display:none}

/* Academic telemetry remains evidence, but sits after hands-on practice. */
.report-section{border-top:1px solid #dbe5ff}
.report-section::before{content:"EVIDENCE / SCHOOL"}
.report-console{border-radius:0}

/* Biography becomes quieter after the technical proof. */
#about{padding-top:80px;padding-bottom:80px}
#about .section-head{max-width:900px}
#about .section-head>p:last-child{max-width:720px}

/* Reference and journey styled like review/log data. */
.testimonial{border-radius:0;box-shadow:12px 12px 0 #e7edff}
.timeline{gap:1px;border:1px solid #dbe5ff;background:#dbe5ff}
.timeline::before{display:none}
.timeline .card{border:0;border-radius:0;box-shadow:none;padding:34px 26px 26px;background:#fff}
.timeline .card::before{top:18px;left:26px;width:8px;height:8px;box-shadow:0 0 0 4px #eef3ff}
.timeline .current{background:#f3f6ff}
.timeline .card:hover{transform:none;box-shadow:inset 0 0 0 1px #0055ff}

/* Documents as a compact file index. */
.doc-groups{gap:1px;border:1px solid #dbe5ff;background:#dbe5ff}
.doc-group{padding:20px;background:#fff;border-top:0}
.doc-group h3{font-size:14px;margin:0 0 14px;color:#17305f}
.doc-group h3::before{content:"./";color:#0055ff}
.doc-links{gap:8px}
.doc-links .card{border-radius:3px;box-shadow:none;padding:11px 13px;background:#f7f9ff;font-size:11px}
.doc-links .card:hover{transform:none;background:#eef3ff;box-shadow:inset 0 0 0 1px #0055ff}

/* Final CTA: simple and technical, not campaign-like. */
.contact{padding:78px 0}
.contact .shell{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:70px;align-items:end}
.contact h2{grid-column:1;font-size:clamp(38px,5vw,62px);max-width:760px}
.contact p{grid-column:1;margin-bottom:0;max-width:680px}
.contact .actions{grid-column:2;grid-row:1/3;align-self:center;margin:0;flex-direction:column;min-width:250px}
.contact .actions .btn{justify-content:center;text-align:center}

/* Keep interaction restrained: tech leads care more about signal than motion. */
.motion-ready .card.fx-tilt:hover{transform:translateY(-2px)}
.motion-ready .card.fx-tilt{transform-style:flat}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:44px}.portrait-card{max-width:460px}
  .stack-groups{grid-template-columns:1fr}.stack-groups article{border-right:0!important;border-bottom:1px solid #173b7c!important}.stack-groups article:last-child{border-bottom:0!important}
  .project-list{grid-template-columns:1fr}.project-list .project:nth-child(5){grid-column:auto}
  .trouble-flow{grid-template-columns:1fr 1fr}.trouble-flow article:nth-child(2)::after{display:none}
  .contact .shell{grid-template-columns:1fr}.contact h2,.contact p,.contact .actions{grid-column:1;grid-row:auto}.contact .actions{margin-top:28px;flex-direction:row;min-width:0}
}
@media(max-width:600px){
  .hero{min-height:auto;padding:54px 0 70px}.hero h1{font-size:46px}
  .stack-console{box-shadow:6px 6px 0 #e7edff}.stack-groups article{grid-template-columns:1fr;gap:12px;padding:18px}.stack-key{padding-top:0}
  .learning-backlog{grid-template-columns:1fr}
  .project-list .project{padding:24px 22px}.project-list .project::before{position:static;display:block;margin-bottom:14px}
  .trouble-flow{grid-template-columns:1fr}.trouble-flow article{min-height:0}.trouble-flow article:not(:last-child)::after{content:"↓";right:auto;left:26px;top:auto;bottom:-12px}.trouble-flow article:nth-child(2)::after{display:grid}
  .doc-groups{grid-template-columns:1fr}
  .contact .actions{flex-direction:column;align-items:stretch}
}


/* V17 — simple portrait integration. */
.portrait-card.portrait-simple{
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  animation:none;
  overflow:visible;
}
.portrait-card.portrait-simple::before{display:none!important}
.portrait-card.portrait-simple img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  display:block;
}
@media(max-width:900px){.portrait-card.portrait-simple{max-width:460px;margin-inline:auto}}


/* V19 — collision-safe troubleshooting layout.
   No decorative pseudo-element is allowed to occupy the number/content area. */
.trouble-flow{
  gap:18px!important;
  border:0!important;
  background:transparent!important;
  overflow:visible;
}
.trouble-flow article{
  min-width:0;
  border:1px solid #dbe5ff!important;
  border-radius:12px!important;
  overflow:hidden;
}
.trouble-flow article::after,
.trouble-flow article:not(:last-child)::after{
  content:none!important;
  display:none!important;
}
.trouble-flow article>span{
  position:relative;
  z-index:1;
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  margin:0 0 12px 0;
  flex:0 0 32px;
}
@media(max-width:980px){
  .trouble-flow{gap:16px!important}
}
@media(max-width:600px){
  .trouble-flow{gap:12px!important}
}

/* V15 — headings in the terminal font (monospace is wider, so the hero size and tracking shrink). */
.hero h1,.section-head h2,.contact h2{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.02em}
.hero h1{font-size:clamp(30px,5.2vw,72px);line-height:1}