:root{
--bg:#e9e8e4;--paper:#f3f2ee;--ink:#181817;--red:#8d1113;--red2:#a8191b;--muted:#686560;--line:rgba(24,24,23,.18);
--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
a{text-decoration:none;color:inherit}.header{position:fixed;z-index:20;top:0;left:0;right:0;height:86px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--serif);font-size:25px;font-weight:700;line-height:.8}.logo span{color:var(--red)}.logo small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-top:6px}
nav{display:flex;gap:28px}nav a{font-size:10px;letter-spacing:.15em;text-transform:uppercase}nav a:hover{color:var(--red)}
.menu{display:none;background:none;border:0}.menu i{display:block;width:25px;height:1px;background:var(--ink);margin:6px}
.hero{min-height:100vh;padding:130px 7vw 45px;position:relative;overflow:hidden;isolation:isolate}
.hero-copy{position:relative;z-index:7;margin-top:12vh;width:50%}.kicker,.red-label{font-size:10px;letter-spacing:.2em;color:var(--red);font-weight:700}.hero h1{font-size:clamp(70px,11vw,145px);line-height:.77;letter-spacing:-.065em;margin:17px 0 28px}.hero h1 em{font-family:var(--serif);font-weight:500}.role{font-size:16px;line-height:1.55}.round-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:110px;height:110px;border:1px solid var(--red);border-radius:50%;color:var(--red);font-size:8px;line-height:1.25;letter-spacing:.12em;margin-top:36px;transition:.35s}.round-cta b{font-size:19px;font-weight:400}.round-cta:hover{background:var(--red);color:var(--bg);transform:rotate(-8deg)}
.hero-visual{position:absolute;right:0;top:0;width:63%;height:100%;overflow:hidden}.red-shape{position:absolute;z-index:1;width:67vw;height:67vw;max-width:900px;max-height:900px;right:-17vw;bottom:-33vw;background:var(--red);border-radius:50%}.circle{position:absolute;z-index:2;border:1px solid rgba(141,17,19,.6);border-radius:50%;width:74vw;height:74vw;right:-29vw;bottom:-38vw}.circle-b{width:68vw;height:68vw;right:-26vw;bottom:-35vw}.circle-c{width:58vw;height:58vw;right:-20vw;bottom:-30vw}.circle-d{width:48vw;height:48vw;right:-13vw;bottom:-25vw}
.portrait{position:absolute;z-index:4;right:4%;bottom:0;width:min(47vw,610px);height:88%;display:flex;align-items:flex-end}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply}.curve-arrow{position:absolute;z-index:6;left:5%;top:39%;font-family:var(--serif);font-size:45px;color:var(--red);transform:rotate(-22deg)}
.hero-bottom{position:absolute;z-index:8;bottom:25px;left:7vw;right:7vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.17em;color:var(--muted)}
.section{padding:125px 7vw;border-top:1px solid var(--line)}.section-head{display:flex;gap:17px;align-items:center;font-size:10px;letter-spacing:.2em;color:var(--red)}.section-head span{font-family:var(--serif);font-size:17px}.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;margin-top:70px}.big-copy{font-size:clamp(44px,6vw,82px);line-height:.95;letter-spacing:-.055em}.big-copy em,.project-intro em,.skill-intro em,.education h2 em,.contact h2 em{font-family:var(--serif);font-weight:500}.text{font-size:15px;line-height:1.8;color:#4e4b47;max-width:580px}.text p{margin:0 0 20px}
.experience{margin-top:65px;border-top:1px solid var(--line)}.exp{display:grid;grid-template-columns:22% 1fr;gap:6vw;padding:40px 0;border-bottom:1px solid var(--line)}.date{font-size:9px;letter-spacing:.13em;color:var(--muted);line-height:1.6}.exp h2{font-size:32px;letter-spacing:-.04em;margin:7px 0}.exp h4{margin:0 0 17px;color:var(--red);font-size:13px}.exp>div:last-child>p:last-child{max-width:750px;color:#57534e;line-height:1.7;font-size:14px}
.projects{background:#e4e3df}.project-intro{margin:60px 0 35px;display:flex;justify-content:space-between;align-items:end;gap:30px}.project-intro h2,.skill-intro h2{font-size:clamp(45px,6vw,78px);line-height:.9;letter-spacing:-.06em;margin:0}.project-intro>p{max-width:350px;font-size:13px;line-height:1.7;color:var(--muted)}
.project-feature{background:var(--paper);border:1px solid var(--line);padding:25px;margin-bottom:1px}.feature-top,.feature-footer{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.15em;color:var(--red)}.feature-body{display:grid;grid-template-columns:1fr 1fr;min-height:360px;align-items:center}.feature-body h3{font-size:70px;line-height:.82;letter-spacing:-.06em;margin:0 0 25px}.feature-body h3 em{font-family:var(--serif);font-weight:500}.feature-body p{max-width:430px;line-height:1.7;color:var(--muted)}.abstract-art{height:270px;position:relative;border-bottom:1px solid var(--line);background:repeating-linear-gradient(0deg,transparent 0 44px,rgba(24,24,23,.08) 45px)}.bars{position:absolute;bottom:0;left:10%;right:10%;height:80%;display:flex;align-items:end;gap:12px}.bars i{display:block;flex:1;border:1px solid var(--red);border-bottom:0}.bars i:nth-child(1){height:28%}.bars i:nth-child(2){height:44%}.bars i:nth-child(3){height:62%}.bars i:nth-child(4){height:79%}.bars i:nth-child(5){height:53%}.dot{position:absolute;width:10px;height:10px;background:var(--red);border-radius:50%;right:21%;top:24%}.feature-footer{justify-content:flex-start;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}.feature-footer span{padding-right:25px}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}.project{background:var(--paper);padding:30px;min-height:390px;transition:.3s}.project:hover{background:var(--red);color:white}.project .num{font-family:var(--serif);font-size:18px;color:var(--red)}.project:hover .num,.project:hover>p{color:#ffdada}.project>p{font-size:8px;letter-spacing:.17em;color:var(--red);margin-top:65px}.project h3{font-size:34px;line-height:.95;letter-spacing:-.045em}.project h3 em{font-family:var(--serif);font-weight:500}.project .desc{font-size:13px;line-height:1.7;color:var(--muted);max-width:560px}.project:hover .desc{color:#f1dddd}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}.chips span{font-size:8px;letter-spacing:.08em;border:1px solid var(--line);padding:7px 9px}.project:hover .chips span{border-color:rgba(255,255,255,.4)}
.skill-intro{margin:60px 0 45px}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.skill-card{background:var(--paper);padding:27px;min-height:200px}.skill-card small{color:var(--red);font-family:var(--serif)}.skill-card h3{font-size:17px;margin:30px 0 20px}.skill-card .chips{margin-top:0}.skill-card .chips span{background:var(--bg)}
.certs{margin-top:65px;border-top:1px solid var(--line)}.cert{display:grid;grid-template-columns:7% 1.5fr 1fr 5%;gap:15px;align-items:center;padding:25px 0;border-bottom:1px solid var(--line)}.cert span,.cert b{color:var(--red)}.cert strong{font-size:14px}.cert small{font-size:11px;color:var(--muted)}.cert b{text-align:right}
.education{background:var(--red);color:#f1e9e1}.education .section-head{color:#f5c7c7}.education-layout{display:grid;grid-template-columns:1fr 280px;gap:8vw;align-items:center;margin-top:80px}.education h2{font-size:clamp(40px,6vw,80px);line-height:.92;letter-spacing:-.055em}.education-layout>div>p:last-child{color:#e7caca}
.edu-animation{width:220px;height:220px;margin:auto;position:relative;display:grid;place-items:center;isolation:isolate}.edu-animation:before{content:"";position:absolute;inset:31px;border:1px dashed rgba(255,255,255,.28);border-radius:50%;animation:eduPulse 2.8s ease-in-out infinite}.edu-orbit{position:absolute;border:1px solid rgba(255,255,255,.5);border-radius:50%;transform:rotate(-24deg)}.edu-orbit-one{width:190px;height:78px;animation:eduOrbit 6s linear infinite}.edu-orbit-two{width:190px;height:78px;transform:rotate(66deg);animation:eduOrbitReverse 7s linear infinite}.edu-core{width:104px;height:104px;border-radius:28px;background:#f1e9e1;color:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.16);position:relative;z-index:2;animation:eduFloat 3s ease-in-out infinite}.edu-bracket{font:700 32px/1 var(--sans);letter-spacing:-.08em}.edu-code{font:700 8px/1 var(--sans);letter-spacing:.3em;margin-top:8px}.edu-node{position:absolute;z-index:3;width:35px;height:35px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;background:var(--red);font:700 8px var(--sans);letter-spacing:.08em;box-shadow:0 8px 20px rgba(0,0,0,.12)}.edu-node-one{top:8px;left:92px;animation:eduNodeOne 4s ease-in-out infinite}.edu-node-two{right:8px;bottom:58px;animation:eduNodeTwo 4.8s ease-in-out infinite}.edu-node-three{left:18px;bottom:35px;animation:eduNodeThree 5.2s ease-in-out infinite}@keyframes eduOrbit{from{transform:rotate(-24deg) rotate(0deg)}to{transform:rotate(-24deg) rotate(360deg)}}@keyframes eduOrbitReverse{from{transform:rotate(66deg) rotate(360deg)}to{transform:rotate(66deg) rotate(0deg)}}@keyframes eduFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes eduPulse{0%,100%{transform:scale(.96);opacity:.5}50%{transform:scale(1.04);opacity:.9}}@keyframes eduNodeOne{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,5px)}}@keyframes eduNodeTwo{0%,100%{transform:translate(0,0)}50%{transform:translate(-7px,-8px)}}@keyframes eduNodeThree{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-5px)}}
.contact{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 25%,rgba(170,0,20,.18),transparent 32%),radial-gradient(circle at 18% 85%,rgba(255,70,70,.10),transparent 28%),var(--bg);padding:95px 7vw 75px;min-height:92vh}.contact-art{position:absolute;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(180,0,25,.20),transparent 65%);right:-25vw;bottom:-40vw;filter:blur(10px)}.contact-shell{position:relative;max-width:1380px;margin:0 auto;padding:82px 72px 72px;border-radius:42px;background:linear-gradient(115deg,rgba(12,14,18,.98),rgba(18,21,28,.97));box-shadow:0 30px 90px rgba(0,0,0,.18);overflow:hidden}.contact-shell:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(190,0,30,.22),transparent 28%),radial-gradient(circle at 42% 100%,rgba(190,0,30,.08),transparent 22%);pointer-events:none}.contact-topline,.contact-content,.contact-links{position:relative;z-index:1}.contact-topline{display:flex;align-items:center;gap:14px;color:#ff6b72;font-size:12px;letter-spacing:.18em}.contact-dash{width:30px;height:2px;background:#ff6b72;display:inline-block}.contact-content{margin-top:65px}.contact-content .kicker{color:#ff6b72}.contact h2{color:#fff;font-size:clamp(58px,8vw,108px);line-height:.88;letter-spacing:-.06em;margin:18px 0 38px}.contact h2 em{color:#fff}.mail{display:inline-block;color:#fff;font-family:var(--sans);font-size:clamp(24px,3.8vw,54px);font-weight:700;letter-spacing:-.045em;border:0;padding:0;word-break:break-word}.contact-links{border:0;margin-top:72px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.contact-card{display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:22px 25px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(170,0,20,.08);color:#fff;transition:transform .25s ease,background .25s ease,border-color .25s ease}.contact-card:hover{color:#fff;transform:translateY(-5px);background:rgba(190,0,30,.16);border-color:rgba(255,75,85,.5)}.contact-card-label{font-size:10px;letter-spacing:.18em;color:#9b9da5;margin-bottom:12px}.contact-card-value{font-size:16px;letter-spacing:.01em;line-height:1.35}.contact-card-value b{font-weight:500;margin-left:4px;color:#ff6b72}
footer{padding:20px 7vw;background:var(--red);color:#f1d9d9;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.15em}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
nav{position:fixed;top:70px;right:6vw;display:flex;flex-direction:column;gap:18px;background:var(--paper);padding:25px;border:1px solid var(--line);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.25s}nav.open{opacity:1;pointer-events:auto;transform:none}.menu{display:block}.hero{min-height:900px}.hero-copy{width:70%;margin-top:9vh}.hero-visual{width:75%;height:65%;top:auto;bottom:0}.portrait{width:58vw;height:100%}.hero-bottom span:nth-child(2){display:none}.intro-grid{grid-template-columns:1fr;gap:50px}.feature-body{grid-template-columns:1fr}.abstract-art{display:none}.skill-grid{grid-template-columns:1fr 1fr}.education-layout{grid-template-columns:1fr}.edu-animation{margin:15px 0 0;width:210px;height:210px}.project-intro{display:block}.project-intro>p{margin-top:25px}
}
@media(max-width:600px){
.header{height:70px;padding:0 6vw}.hero{padding:110px 6vw 35px;min-height:780px}.hero-copy{width:100%;margin-top:80px}.hero h1{font-size:76px}.role{font-size:13px}.round-cta{width:90px;height:90px}.hero-visual{width:110%;right:-18%;height:52%}.portrait{width:70vw;height:100%;right:5%}.red-shape{width:78vw;height:78vw;right:-25vw;bottom:-12vw}.circle{width:88vw;height:88vw;right:-36vw;bottom:-20vw}.circle-b{width:79vw;height:79vw;right:-31vw;bottom:-16vw}.circle-c{width:69vw;height:69vw;right:-25vw;bottom:-12vw}.circle-d{width:59vw;height:59vw;right:-18vw;bottom:-8vw}.curve-arrow{top:18%;left:8%;font-size:30px}.hero-bottom{left:6vw;right:6vw}.hero-bottom span{font-size:7px}.section{padding:85px 6vw}.big-copy{font-size:48px}.exp{grid-template-columns:1fr;gap:17px}.exp h2{font-size:27px}.project-intro h2,.skill-intro h2{font-size:55px}.project-grid,.skill-grid{grid-template-columns:1fr}.feature-body h3{font-size:57px}.cert{grid-template-columns:30px 1fr 20px}.cert small{grid-column:2}.education h2{font-size:48px}.contact{padding:65px 6vw 35px;min-height:700px}.contact-shell{padding:48px 25px 35px;border-radius:28px}.contact-content{margin-top:48px}.contact h2{font-size:62px}.mail{font-size:27px}.contact-links{grid-template-columns:1fr;gap:12px;margin-top:50px}.contact-card{min-height:92px}.contact-art{width:80vw;height:80vw;right:-35vw;bottom:-25vw}footer{padding:17px 6vw;gap:12px;flex-direction:column}
}

/* SAFA BAKES — additive project styling only */
.safa-project{
  margin-top:1px;
  padding:34px;
  background:var(--paper);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.safa-project:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(24,24,23,.08);
  border-color:rgba(141,17,19,.38);
}
.safa-project:before{
  content:"";
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  background:var(--red);
  right:-220px;top:-225px;
  opacity:.96;
}
.safa-project-head{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  padding-bottom:25px;
  border-bottom:1px solid var(--line);
}
.safa-project-head h3{
  font-size:clamp(50px,7vw,92px);
  line-height:.78;
  letter-spacing:-.065em;
  margin:13px 0 17px;
}
.safa-project-head h3 em{
  font-family:var(--serif);
  font-weight:500;
}
.safa-subtitle{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
.safa-status{
  flex:none;
  text-align:right;
  font-size:8px;
  line-height:1.7;
  letter-spacing:.16em;
  color:var(--muted);
}
.safa-status strong{color:var(--red)}
.safa-preview{
  margin:28px 0 30px;
  min-height:390px;
  background:#deddd8;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.safa-preview:before,
.safa-preview:after{
  content:"";
  position:absolute;
  border:1px solid rgba(141,17,19,.28);
  border-radius:50%;
  width:520px;height:520px;
  right:-210px;bottom:-360px;
}
.safa-preview:after{width:390px;height:390px;right:-145px;bottom:-275px}
.preview-window{
  position:relative;
  z-index:2;
  width:min(82%,760px);
  height:300px;
  background:#f6f5f1;
  border:1px solid rgba(24,24,23,.15);
  box-shadow:0 18px 40px rgba(24,24,23,.13);
  transform:rotate(-1.1deg);
}
.preview-bar{
  height:36px;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(24,24,23,.1);
  font-size:7px;
  letter-spacing:.12em;
  color:var(--muted);
}
.preview-bar span:first-child{font-family:var(--serif);font-size:13px;color:var(--red)}
.preview-content{display:grid;grid-template-columns:68px 1fr;height:calc(100% - 36px)}
.preview-sidebar{border-right:1px solid rgba(24,24,23,.1);padding:17px 13px}
.preview-sidebar i{display:block;height:7px;margin-bottom:14px;background:#d8d6d0}
.preview-sidebar i:first-child{background:var(--red)}
.preview-main{padding:20px}
.preview-title{width:38%;height:12px;background:#272725;margin-bottom:20px}
.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preview-cards i{height:45px;background:#e7e5df;border:1px solid rgba(24,24,23,.08);position:relative}
.preview-cards i:after{content:"";position:absolute;left:9px;bottom:9px;width:35%;height:5px;background:var(--red);opacity:.8}
.preview-chart{height:95px;margin-top:14px;border:1px solid rgba(24,24,23,.08);display:flex;align-items:flex-end;padding:10px;gap:8px;background:linear-gradient(180deg,transparent,#ebe9e4)}
.preview-chart b{display:block;flex:1;background:var(--red);opacity:.72}
.preview-chart b:nth-child(1){height:30%}.preview-chart b:nth-child(2){height:47%}.preview-chart b:nth-child(3){height:40%}.preview-chart b:nth-child(4){height:65%}.preview-chart b:nth-child(5){height:54%}.preview-chart b:nth-child(6){height:78%}.preview-chart b:nth-child(7){height:68%}
.preview-rows{display:flex;gap:7px;margin-top:10px}.preview-rows i{height:5px;background:#d5d3cd;flex:1}
.preview-note{
  position:absolute;z-index:3;bottom:15px;left:18px;
  font-size:7px;letter-spacing:.16em;color:var(--muted);
}
.safa-description{
  max-width:900px;
  margin:0 0 32px;
  font-size:14px;
  line-height:1.8;
  color:#4e4b47;
}
.safa-columns{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.safa-columns-bottom{margin-top:1px;grid-template-columns:1fr 1fr}
.safa-panel{background:var(--paper);padding:27px}
.panel-label{
  margin:0 0 20px;
  font-size:8px;
  letter-spacing:.18em;
  color:var(--red);
  font-weight:700;
}
.tech-badges{display:flex;flex-wrap:wrap;gap:7px}
.tech-badges span{
  padding:8px 10px;
  border:1px solid var(--line);
  font-size:9px;
  background:var(--bg);
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.tech-badges span:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-2px)}
.feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 18px;
}
.feature-list span{
  font-size:11px;
  line-height:1.45;
  color:#4e4b47;
  padding-left:14px;
  position:relative;
}
.feature-list span:before{
  content:"";
  width:4px;height:4px;
  background:var(--red);
  border-radius:50%;
  position:absolute;
  left:0;top:7px;
}
.panel-copy{margin:0;color:#57534e;font-size:12px;line-height:1.75}
.safa-actions{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}
.safa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-width:145px;padding:13px 17px;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--red);
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.safa-btn span{font-size:15px;line-height:0}
.safa-btn.primary{background:var(--red);color:#fff}
.safa-btn.secondary{color:var(--red);background:transparent}
.safa-btn:hover{transform:translateY(-3px)}
.safa-btn.secondary:hover{background:var(--red);color:#fff}

@media(max-width:900px){
  .safa-project-head{flex-direction:column}
  .safa-status{text-align:left}
  .safa-preview{min-height:320px}
  .preview-window{width:88%;height:260px}
  .safa-columns,.safa-columns-bottom{grid-template-columns:1fr}
}
@media(max-width:600px){
  .safa-project{padding:22px}
  .safa-project-head h3{font-size:57px}
  .safa-subtitle{font-size:12px}
  .safa-preview{min-height:255px;margin:22px 0}
  .preview-window{width:108%;height:205px;transform:rotate(-1deg) scale(.95)}
  .preview-content{grid-template-columns:45px 1fr}
  .preview-sidebar{padding:12px 9px}
  .preview-sidebar i{margin-bottom:10px}
  .preview-main{padding:12px}
  .preview-cards i{height:32px}
  .preview-chart{height:65px}
  .feature-list{grid-template-columns:1fr}
  .safa-panel{padding:22px}
  .safa-actions{display:grid;grid-template-columns:1fr}
  .safa-btn{width:100%}
}


/* Enhanced SKILLS section */
.skills-modern{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(141,17,19,.08), transparent 22%),
    radial-gradient(circle at 15% 82%, rgba(141,17,19,.055), transparent 25%),
    var(--bg);
}
.skills-modern:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(24,24,23,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,24,23,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);
}
.skills-orbit{
  display:none;
  position:absolute;
  border:1px solid rgba(141,17,19,.16);
  border-radius:50%;
  pointer-events:none;
  animation:skillsSpin 24s linear infinite;
}
.skills-orbit-one{width:620px;height:620px;right:-310px;top:120px}
.skills-orbit-two{width:430px;height:430px;left:-240px;bottom:60px;animation-direction:reverse;animation-duration:30s}
.skills-glow{
  position:absolute;
  width:180px;height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(141,17,19,.13),transparent 70%);
  filter:blur(3px);
  animation:glowFloat 7s ease-in-out infinite;
  pointer-events:none;
}
.skills-glow-one{right:14%;top:25%}.skills-glow-two{left:8%;bottom:13%;animation-delay:-3s}
@keyframes skillsSpin{to{transform:rotate(360deg)}}
@keyframes glowFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(25px,-20px,0) scale(1.15)}}

.skill-hero{
  position:relative;
  z-index:2;
  margin:65px 0 48px;
  min-height:360px;
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:7vw;
  align-items:center;
}
.skill-hero h2{
  font-size:clamp(55px,7vw,92px);
  line-height:.82;
  letter-spacing:-.065em;
  margin:13px 0 28px;
}
.skill-hero h2 em{font-family:var(--serif);font-weight:500}
.skill-lead{max-width:540px;font-size:14px;line-height:1.8;color:var(--muted)}
/* Coding-first skills visual: replaces the old orbit graphic */
.coding-stack-panel{
  position:relative;
  width:min(100%,500px);
  min-height:340px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.code-window{
  position:relative;
  width:min(100%,430px);
  background:#1d1c1a;
  color:#f3f2ee;
  border:1px solid rgba(24,24,23,.18);
  box-shadow:0 28px 70px rgba(24,24,23,.16);
  overflow:hidden;
  transform:rotate(-1.2deg);
  animation:codeWindowFloat 5s ease-in-out infinite;
}
.code-window:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 35%,rgba(141,17,19,.08));
  pointer-events:none;
}
.code-window-bar{
  height:42px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 15px;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:8px;
  letter-spacing:.14em;
  color:#aaa7a0;
}
.code-window-bar span{flex:1;text-align:center}
.code-window-bar b{font-size:13px;font-weight:400;color:#b71d20}
.code-dots{display:flex;gap:5px}
.code-dots i{width:6px;height:6px;border-radius:50%;background:#77736d;display:block}
.code-body{position:relative;padding:21px 20px 23px;min-height:245px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.code-line{display:grid;grid-template-columns:25px 1fr;gap:14px;line-height:1.85;font-size:10px}
.code-line>span{color:#66625d;text-align:right;user-select:none}
.code-line code{color:#d5d0c8;font-family:inherit}
.code-line em{color:#c95c5f;font-style:normal}
.code-line strong{color:#e7a69a;font-weight:500}
.typing-cursor{display:inline-block;width:6px;height:13px;background:#b71d20;margin-left:39px;vertical-align:-2px;animation:cursorBlink 1s steps(2,end) infinite}
.code-footer{height:29px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.09);font-size:7px;letter-spacing:.12em;color:#85817a}
.code-footer span:first-child{color:#a9c98b}
.stack-badge{position:absolute;padding:9px 12px;background:var(--paper);border:1px solid rgba(141,17,19,.28);color:var(--red);font-size:7px;letter-spacing:.14em;box-shadow:0 10px 25px rgba(24,24,23,.09);animation:badgeFloat 4s ease-in-out infinite}
.badge-python{left:0;top:16%;animation-delay:-.5s}.badge-react{right:0;top:8%;animation-delay:-1.4s}.badge-api{right:3%;bottom:12%;animation-delay:-2.3s}.badge-db{left:4%;bottom:8%;animation-delay:-3s}
@keyframes codeWindowFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(.2deg)}}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cursorBlink{50%{opacity:0}}

.skill-grid-modern{
  position:relative;
  z-index:3;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  background:transparent;
  border:0;
}
.skill-card-modern{
  appearance:none;
  border:1px solid rgba(24,24,23,.13);
  background:rgba(243,242,238,.82);
  backdrop-filter:blur(10px);
  min-height:245px;
  padding:28px;
  text-align:left;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s,color .35s;
}
.skill-card-modern:before{
  content:"";
  position:absolute;
  width:170px;height:170px;
  border-radius:50%;
  background:var(--red);
  right:-115px;bottom:-115px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s;
  opacity:.9;
}
.skill-card-modern:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.34) 48%,transparent 75%);
  transform:translateX(-130%);
  transition:transform .8s ease;
}
.skill-card-modern:hover{
  transform:translateY(-8px) rotateX(2deg);
  border-color:rgba(141,17,19,.34);
  box-shadow:0 24px 55px rgba(24,24,23,.12);
}
.skill-card-modern:hover:before{transform:scale(1.8);opacity:1}
.skill-card-modern:hover:after{transform:translateX(130%)}
.skill-card-modern:hover h3,.skill-card-modern:hover .skill-card-icon,.skill-card-modern:hover .skill-card-index{color:#fff}
.skill-card-modern:hover .skill-chips-modern span{background:rgba(190,0,30,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.skill-card-wide{grid-column:1/-1;min-height:205px}
.skill-card-index{
  display:block;
  color:var(--red);
  font-family:var(--serif);
  font-size:16px;
  transition:color .3s;
}
.skill-card-icon{
  position:absolute;
  top:25px;right:27px;
  color:var(--red);
  font-family:var(--serif);
  font-size:26px;
  transition:color .3s,transform .35s;
}
.skill-card-modern:hover .skill-card-icon{transform:rotate(12deg) scale(1.12)}
.skill-card-modern h3{
  font-size:24px;
  letter-spacing:-.035em;
  margin:42px 0 18px;
  transition:color .3s;
}
.skill-chips-modern{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:2}
.skill-chips-modern span{
  padding:8px 10px;
  border:1px solid rgba(24,24,23,.13);
  background:var(--bg);
  font-size:8px;
  letter-spacing:.07em;
  transition:background .3s,color .3s,border-color .3s;
}
.skill-arrow{
  position:absolute;
  right:27px;
  bottom:23px;
  font-size:20px;
  color:var(--red);
  z-index:3;
  transition:transform .35s,color .3s;
}
.skill-card-modern:hover .skill-arrow{transform:translate(5px,-5px);color:#fff}
.skill-marquee{
  position:relative;
  z-index:2;
  overflow:hidden;
  margin:65px -7vw -125px;
  padding:17px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--red);
  white-space:nowrap;
  font-size:8px;
  letter-spacing:.2em;
}
.skill-marquee div{display:inline-block;animation:marquee 25s linear infinite}
.skill-marquee i{font-style:normal;margin:0 15px;color:var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

@media(max-width:900px){
  .skill-hero{grid-template-columns:1fr;gap:25px}
  .coding-stack-panel{width:min(92vw,500px)}
  .skill-grid-modern{grid-template-columns:1fr 1fr}
  .skill-card-wide{grid-column:1/-1}
}
@media(max-width:600px){
  .skill-hero{margin-top:50px;min-height:auto}
  .skill-hero h2{font-size:57px}
  .skill-lead{font-size:13px}
  .coding-stack-panel{width:100%;min-height:315px;margin:15px auto 20px}
  .code-window{width:calc(100% - 24px)}
  .stack-badge{padding:8px 9px;font-size:6px}
  .skill-grid-modern{grid-template-columns:1fr;gap:10px}
  .skill-card-wide{grid-column:auto}
  .skill-card-modern{min-height:220px}
  .skill-marquee{margin-left:-6vw;margin-right:-6vw;margin-bottom:-85px}
  .skills-orbit-one{width:420px;height:420px;right:-270px}
}


/* Enhanced Auction Website feature */
.auction-feature{
  position:relative;
  min-height:590px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 40%,rgba(141,17,19,.12),transparent 28%),
    radial-gradient(circle at 12% 90%,rgba(141,17,19,.06),transparent 25%),
    var(--paper);
}
.auction-feature:after{
  content:"";
  position:absolute;
  width:430px;height:430px;
  right:-220px;top:-250px;
  border-radius:50%;
  border:1px solid rgba(141,17,19,.3);
  box-shadow:0 0 0 35px rgba(141,17,19,.025),0 0 0 75px rgba(141,17,19,.02);
  z-index:-1;
}
.auction-bg-grid{
  position:absolute;
  inset:0;
  opacity:.35;
  background-image:
    linear-gradient(rgba(24,24,23,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,24,23,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right,transparent,black 25%,black 80%,transparent);
  animation:auctionGrid 14s linear infinite;
  z-index:-2;
}
@keyframes auctionGrid{to{background-position:42px 42px}}
.auction-orbit{
  position:absolute;
  border:1px solid rgba(141,17,19,.2);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.orbit-a{width:480px;height:480px;right:-120px;bottom:-260px;animation:auctionRotate 22s linear infinite}
.orbit-b{width:330px;height:330px;right:-45px;bottom:-185px;animation:auctionRotate 17s linear infinite reverse}
@keyframes auctionRotate{to{transform:rotate(360deg)}}
.auction-glow{
  position:absolute;
  width:240px;height:240px;
  border-radius:50%;
  right:28%;top:34%;
  background:radial-gradient(circle,rgba(141,17,19,.12),transparent 70%);
  filter:blur(8px);
  animation:auctionGlow 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes auctionGlow{50%{transform:scale(1.22);opacity:.55}}
.auction-top{position:relative;z-index:4}
.auction-live{display:flex;align-items:center;gap:7px}
.auction-live i{
  width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 5px rgba(141,17,19,.09);
  animation:auctionPulse 1.7s infinite;
}
@keyframes auctionPulse{50%{box-shadow:0 0 0 9px rgba(141,17,19,0)}}
.auction-body{
  position:relative;
  z-index:3;
  min-height:430px;
  grid-template-columns:.88fr 1.12fr;
  gap:4vw;
}
.auction-copy{padding-top:22px;position:relative;z-index:5}
.auction-eyebrow{font-size:8px;letter-spacing:.19em;color:var(--red);font-weight:700;margin:0 0 15px}
.auction-copy h3{font-size:clamp(58px,7vw,88px);line-height:.76;letter-spacing:-.065em;margin:0 0 24px}
.auction-copy h3 em{font-family:var(--serif);font-weight:500}
.auction-copy>p:not(.auction-eyebrow){max-width:470px;font-size:13px;line-height:1.75;color:var(--muted)}
.auction-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.auction-btn{
  display:inline-flex;align-items:center;gap:15px;
  border:1px solid var(--red);
  padding:12px 15px;
  font:8px var(--sans);
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s,background .25s,color .25s,box-shadow .25s;
}
.auction-btn span{font-size:14px;line-height:0}
.auction-primary{background:var(--red);color:#fff}
.auction-secondary{background:transparent;color:var(--red)}
.auction-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(141,17,19,.14)}
.auction-secondary:hover{background:var(--red);color:#fff}
.auction-detail-panel{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .45s ease,opacity .35s ease,margin-top .45s ease;
  display:grid;
  gap:8px;
}
.auction-detail-panel.open{max-height:180px;opacity:1;margin-top:18px}
.auction-detail-panel div{
  display:grid;grid-template-columns:55px 1fr;gap:10px;
  font-size:9px;padding:9px 0;border-bottom:1px solid var(--line);
}
.auction-detail-panel strong{color:var(--red);font-family:var(--serif)}
.auction-detail-panel span{color:var(--muted);line-height:1.4}

.auction-dashboard{
  position:relative;
  min-height:350px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1000px;
}
.auction-window{
  width:min(100%,560px);
  background:rgba(248,247,243,.88);
  border:1px solid rgba(24,24,23,.15);
  box-shadow:0 30px 65px rgba(24,24,23,.14);
  transform:rotateY(-5deg) rotateX(2deg) rotateZ(1deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
  backdrop-filter:blur(8px);
}
.auction-dashboard:hover .auction-window{
  transform:rotateY(0) rotateX(0) rotateZ(0) translateY(-6px);
  box-shadow:0 38px 80px rgba(24,24,23,.18);
}
.auction-window-head{
  height:38px;border-bottom:1px solid rgba(24,24,23,.1);
  display:flex;align-items:center;gap:5px;padding:0 13px;
}
.auction-window-head small{margin-left:auto;font-size:7px;letter-spacing:.12em;color:var(--muted)}
.auction-dot{width:6px;height:6px;border-radius:50%;background:#c8c5bd}
.auction-dot:first-child{background:var(--red)}
.auction-window-body{padding:18px}
.auction-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.auction-stat-row div{padding:12px;background:#eae8e2;border:1px solid rgba(24,24,23,.07)}
.auction-stat-row small{display:block;font-size:6px;letter-spacing:.12em;color:var(--muted);margin-bottom:7px}
.auction-stat-row strong{font-size:16px}
.auction-stat-row div:last-child strong{color:var(--red)}
.auction-lot{
  margin-top:12px;
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:13px;
  align-items:center;
  padding:13px;
  border:1px solid rgba(24,24,23,.1);
  background:#f4f2ed;
}
.lot-image{
  height:90px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c9c6bd,#e9e7e1);
  color:var(--red);font:italic 18px var(--serif);
  position:relative;overflow:hidden;
}
.lot-image:after{content:"";position:absolute;width:80px;height:80px;border:1px solid rgba(141,17,19,.3);border-radius:50%}
.lot-info small{font-size:6px;letter-spacing:.12em;color:var(--red)}
.lot-info h4{margin:7px 0 8px;font-size:14px}
.lot-info p{margin:0 0 3px;font-size:8px;color:var(--muted)}
.lot-info strong{font-family:var(--serif);font-size:19px}
.bid-button{
  align-self:end;border:0;background:var(--red);color:#fff;
  padding:10px 11px;font:7px var(--sans);letter-spacing:.1em;
  cursor:pointer;transition:transform .25s,background .25s;
}
.bid-button:hover{transform:translateY(-3px);background:#a8191b}
.bid-button span{font-size:12px;margin-left:4px}
.auction-progress{height:4px;background:#dedbd4;margin:12px 0 10px;overflow:hidden}
.auction-progress i{display:block;width:68%;height:100%;background:var(--red);animation:auctionProgress 3s ease-in-out infinite alternate}
@keyframes auctionProgress{from{width:45%}to{width:82%}}
.auction-bidders{display:flex;align-items:center;gap:10px;font-size:6px;letter-spacing:.09em;color:var(--muted)}
.auction-bidders b{padding:6px 8px;background:#eae8e2;color:var(--ink);font-weight:600}
.auction-floating-tag{
  position:absolute;
  z-index:5;
  padding:9px 11px;
  border:1px solid rgba(141,17,19,.28);
  background:rgba(243,242,238,.88);
  backdrop-filter:blur(8px);
  color:var(--red);
  font-size:7px;letter-spacing:.12em;
  box-shadow:0 10px 25px rgba(24,24,23,.08);
  animation:auctionTagFloat 4s ease-in-out infinite;
}
.tag-left{left:-1%;top:18%}.tag-right{right:-1%;bottom:17%;animation-delay:-2s}
@keyframes auctionTagFloat{50%{transform:translateY(-8px) rotate(-1deg)}}
.auction-footer{position:relative;z-index:5}

@media(max-width:900px){
  .auction-body{grid-template-columns:1fr;gap:10px}
  .auction-copy{padding-top:20px}
  .auction-dashboard{min-height:320px}
  .auction-window{width:90%}
}
@media(max-width:600px){
  .auction-feature{min-height:0}
  .auction-copy h3{font-size:57px}
  .auction-actions{display:grid;grid-template-columns:1fr}
  .auction-btn{justify-content:center;width:100%}
  .auction-dashboard{min-height:265px}
  .auction-window{width:106%;transform:scale(.94)}
  .auction-lot{grid-template-columns:60px 1fr;gap:9px}
  .lot-image{height:65px}
  .bid-button{grid-column:2;justify-self:start}
  .auction-floating-tag{display:none}
  .auction-footer{gap:8px}
}


/* Enhanced Real Estate + Cafe projects and fade-switcher */
.project-grid-enhanced{gap:12px;background:transparent;border:0}
.project-enhanced{min-height:500px;padding:27px;overflow:hidden;isolation:isolate;position:relative;border:1px solid rgba(24,24,23,.13);background:var(--paper);color:var(--ink);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .35s}
.project-enhanced:hover{transform:translateY(-9px);box-shadow:0 28px 65px rgba(24,24,23,.13);border-color:rgba(141,17,19,.32)}
.project-enhanced .num,.project-enhanced .project-type{position:relative;z-index:4}
.project-enhanced .project-type{font-size:8px;letter-spacing:.17em;color:var(--red)}
.project-bg-orbit{position:absolute;width:390px;height:390px;right:-230px;top:-165px;border:1px solid rgba(141,17,19,.2);border-radius:50%;z-index:-1;animation:projectOrbit 18s linear infinite}
.project-bg-orbit:before,.project-bg-orbit:after{content:"";position:absolute;border:1px solid rgba(141,17,19,.13);border-radius:50%}.project-bg-orbit:before{inset:35px}.project-bg-orbit:after{inset:75px}
@keyframes projectOrbit{to{transform:rotate(360deg)}}
.project-shine{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 48%,transparent 70%);transform:translateX(-130%);transition:transform .9s ease}.project-enhanced:hover .project-shine{transform:translateX(130%)}
.project-visual{height:150px;margin:24px -27px 0;position:relative;overflow:hidden;background:linear-gradient(135deg,#dddcd6,#eeece7);border-top:1px solid rgba(24,24,23,.08);border-bottom:1px solid rgba(24,24,23,.08)}
.realestate-visual{background:linear-gradient(150deg,#d9d8d2 0%,#f0efea 58%,#d8d6d0 100%)}
.building{position:absolute;bottom:0;background:#bdbab1;border:1px solid rgba(24,24,23,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.b1{left:18%;width:21%;height:70%}.b2{left:39%;width:24%;height:88%;background:#a8a49b}.b3{left:63%;width:18%;height:58%}
.window-grid{position:absolute;left:21%;right:21%;top:29%;height:47%;background:repeating-linear-gradient(90deg,rgba(141,17,19,.65) 0 5px,transparent 5px 19px),repeating-linear-gradient(0deg,rgba(141,17,19,.5) 0 4px,transparent 4px 18px);opacity:.65}
.location-pin{position:absolute;right:17%;top:17%;width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;transform:rotate(-45deg);font-size:16px;box-shadow:0 9px 20px rgba(141,17,19,.2);animation:pinFloat 3s ease-in-out infinite}@keyframes pinFloat{50%{margin-top:-8px}}
.cafe-visual{background:radial-gradient(circle at 70% 25%,rgba(141,17,19,.13),transparent 30%),linear-gradient(135deg,#e0ded7,#f1eee8)}
.plate{position:absolute;width:150px;height:65px;border-radius:50%;border:2px solid rgba(24,24,23,.2);background:#f5f3ed;left:50%;bottom:22px;transform:translateX(-50%);box-shadow:0 13px 20px rgba(24,24,23,.1)}
.cup{position:absolute;width:64px;height:48px;border:3px solid #6f6b63;border-top:0;border-radius:0 0 20px 20px;left:50%;bottom:53px;transform:translateX(-50%);background:#e7e3db}.cup:after{content:"";position:absolute;width:20px;height:25px;border:3px solid #6f6b63;border-left:0;border-radius:0 18px 18px 0;right:-20px;top:3px}
.steam{position:absolute;width:18px;height:45px;border-left:1px solid var(--red);border-radius:50%;top:19px;animation:steam 3s ease-in-out infinite}.s1{left:46%}.s2{left:51%;animation-delay:-1s}.s3{left:56%;animation-delay:-2s}@keyframes steam{0%,100%{transform:translateY(8px) scaleX(.8);opacity:0}45%{opacity:.55}70%{transform:translateY(-8px) scaleX(1.2);opacity:0}}
.cafe-star{position:absolute;right:17%;top:20%;font-size:22px;color:var(--red);animation:starSpin 5s linear infinite}@keyframes starSpin{to{transform:rotate(360deg)}}
.project-copy{position:relative;z-index:4;padding-top:22px}.project-enhanced .project-copy h3{font-size:29px;line-height:.95;letter-spacing:-.045em;margin:0 0 14px}.project-enhanced .project-copy h3 em{font-family:var(--serif);font-weight:500}.project-enhanced .desc{font-size:12px;line-height:1.65;color:var(--muted);max-width:550px}.project-enhanced .chips{margin-top:14px}
.project-view-btn{position:absolute;z-index:6;right:24px;bottom:24px;border:1px solid var(--red);background:var(--red);color:#fff;padding:11px 13px;font:8px var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:flex;gap:14px;align-items:center;transition:transform .25s,background .25s,color .25s,box-shadow .25s}.project-view-btn span{font-size:14px}.project-view-btn:hover{transform:translateY(-4px);box-shadow:0 12px 25px rgba(141,17,19,.18)}.cafe-project .project-view-btn{background:transparent;color:var(--red)}.cafe-project .project-view-btn:hover{background:var(--red);color:#fff}
.project-switch-hint{display:flex;align-items:center;gap:15px;justify-content:center;margin:30px 0 0;font-size:7px;letter-spacing:.19em;color:var(--muted)}.switch-line{height:1px;width:70px;background:var(--line)}
.project-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:30px;opacity:0;pointer-events:none;transition:opacity .35s ease}.project-modal.open{opacity:1;pointer-events:auto}.project-modal-backdrop{position:absolute;inset:0;background:rgba(24,24,23,.72);backdrop-filter:blur(10px)}
.project-modal-card{position:relative;z-index:2;width:min(920px,96vw);max-height:90vh;overflow:auto;background:var(--paper);border:1px solid rgba(255,255,255,.3);box-shadow:0 35px 100px rgba(0,0,0,.3);transform:translateY(25px) scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1)}.project-modal.open .project-modal-card{transform:none}
.project-modal-close{position:absolute;right:20px;top:17px;z-index:5;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:.25s}.project-modal-close:hover{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(90deg)}
.modal-progress{height:3px;background:#dedbd4}.modal-progress span{display:block;height:100%;width:50%;background:var(--red);transition:width .5s ease}.modal-content{padding:48px 48px 32px;transition:opacity .22s ease,transform .22s ease}.modal-content.switching{opacity:0;transform:translateX(20px)}
.modal-number{font:16px var(--serif);color:var(--red)}.modal-stack{margin-top:18px}.modal-title{font-size:clamp(45px,6vw,76px);line-height:.82;letter-spacing:-.06em;margin:12px 0 25px}.modal-title em{font-family:var(--serif);font-weight:500}.modal-description{max-width:680px;color:var(--muted);font-size:13px;line-height:1.75}
.modal-feature-row{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}.modal-feature-row span{padding:8px 10px;border:1px solid var(--line);font-size:7px;letter-spacing:.11em;color:var(--red)}
.modal-demo{margin-top:25px;border:1px solid var(--line);background:#e2e0da;overflow:hidden}.modal-demo-head{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:7px;letter-spacing:.12em;color:var(--muted)}.modal-demo-head b{color:var(--red)}
.property-demo{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:180px}.property-card{background:#f2f0ea;border:1px solid rgba(24,24,23,.1);padding:10px;transition:transform .3s}.property-card:hover{transform:translateY(-5px)}.property-card i{display:block;height:75px;background:linear-gradient(145deg,#c7c4bb,#e4e1d9);margin-bottom:9px}.property-card strong{display:block;font-size:10px}.property-card small{font-size:7px;color:var(--muted)}
.modal-navigation{border-top:1px solid var(--line);padding:15px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px}.modal-navigation button{border:0;background:transparent;color:var(--red);font:8px var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:8px}.modal-navigation button:hover{background:rgba(141,17,19,.07)}.modal-dots{display:flex;gap:7px}.modal-dots button{width:8px;height:8px;padding:0;border:1px solid var(--red)!important;border-radius:50%}.modal-dots button.active{background:var(--red)}
@media(max-width:600px){.project-enhanced{min-height:535px;padding:22px}.project-visual{margin-left:-22px;margin-right:-22px;height:135px}.project-enhanced .project-copy h3{font-size:27px}.project-view-btn{left:22px;right:auto;bottom:5px}.switch-line{width:35px}.project-modal{padding:12px}.modal-content{padding:40px 22px 25px}.modal-title{font-size:48px}.property-demo{grid-template-columns:1fr;max-height:330px;overflow:auto}.property-card{display:grid;grid-template-columns:75px 1fr;gap:8px;align-items:center}.property-card i{grid-row:span 2;height:55px;margin:0}.modal-navigation{padding:12px 15px}}


/* Supplied portrait hero treatment + continuously moving orbit */
.hero-editorial{
  min-height:760px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 76% 67%,rgba(141,17,19,.065),transparent 28%),
    var(--bg);
}
.hero-editorial:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.25;
  background-image:linear-gradient(rgba(24,24,23,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(24,24,23,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}
.hero-paper-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:radial-gradient(circle at 20% 30%,rgba(141,17,19,.16) 0 1px,transparent 1.5px);
  background-size:23px 23px;
}
.hero-editorial .hero-copy{position:absolute;left:7vw;top:28%;z-index:12;max-width:500px}
.hero-editorial .kicker{color:var(--red);font-size:8px;font-weight:700;letter-spacing:.19em}
.hero-editorial h1{font-size:clamp(72px,9vw,140px);line-height:.72;letter-spacing:-.075em;margin:14px 0 0}
.hero-editorial h1 em{font-family:var(--serif);font-weight:500}
.hero-editorial .role{margin:26px 0 10px;font-family:var(--serif);font-size:clamp(19px,2vw,27px);color:var(--red)}
.hero-intro{max-width:400px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.hero-actions{display:flex;gap:8px;margin-top:23px}
.hero-cta{display:inline-flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--red);font-size:8px;letter-spacing:.13em;text-transform:uppercase;transition:.25s}
.hero-cta span{font-size:14px}
.hero-cta-primary{background:var(--red);color:#fff}
.hero-cta-secondary{color:var(--red)}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(141,17,19,.14)}
.hero-cta-secondary:hover{background:var(--red);color:#fff}

.hero-editorial .hero-visual{
  position:absolute;inset:0;z-index:4;pointer-events:none;
}
.hero-editorial .red-shape{
  position:absolute;
  width:min(540px,45vw);aspect-ratio:1;
  right:4%;bottom:-8%;
  border-radius:50%;background:var(--red);
  z-index:-2;
  box-shadow:0 0 0 15px rgba(141,17,19,.035),0 0 0 42px rgba(141,17,19,.02);
}
.hero-portrait-frame{
  position:absolute!important;
  right:4%;bottom:0;
  width:min(540px,45vw);
  height:min(650px,76vh);
  z-index:6;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:visible!important;
}
.hero-portrait-frame img{
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  mix-blend-mode:multiply;
  filter:saturate(.8) contrast(1.03);
  transform:translateY(8px);
  transition:transform .7s ease,filter .5s ease;
}
.hero-visual:hover .hero-portrait-frame img{transform:translateY(-5px) scale(1.01);filter:saturate(.92) contrast(1.05)}
.hero-portrait-ring{
  position:absolute;border:1px solid rgba(141,17,19,.3);border-radius:50%;pointer-events:none;z-index:5;
}
.ring-back{width:min(650px,54vw);height:min(650px,54vw);right:0;bottom:-10%;animation:heroRingRotate 24s linear infinite}
.ring-front{width:min(510px,42vw);height:min(510px,42vw);right:5%;bottom:3%;border-color:rgba(141,17,19,.2);animation:heroRingRotate 17s linear infinite reverse}
@keyframes heroRingRotate{to{transform:rotate(360deg)}}

.hero-orbit-system{
  position:absolute;width:760px;height:760px;
  right:-125px;bottom:-90px;z-index:3;pointer-events:none;
  animation:heroOrbitSystem 28s linear infinite;
}
.hero-orbit{position:absolute;inset:0;border:1px solid rgba(141,17,19,.34);border-radius:50%}
.orbit-1{transform:rotate(12deg) scaleX(.83)}
.orbit-2{inset:7%;transform:rotate(-19deg) scaleX(.9);border-color:rgba(141,17,19,.24)}
.orbit-3{inset:15%;transform:rotate(28deg) scaleX(.78);border-color:rgba(141,17,19,.18)}
.orbit-4{inset:24%;transform:rotate(-8deg) scaleX(.92);border-color:rgba(141,17,19,.13)}
.hero-orbit-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 7px rgba(141,17,19,.07)}
.dot-a{left:13%;top:37%}.dot-b{right:15%;top:17%}.dot-c{right:22%;bottom:22%}
.hero-arrow{position:absolute;left:9%;top:31%;color:var(--red);font-size:27px;transform:rotate(-20deg)}
@keyframes heroOrbitSystem{to{transform:rotate(360deg)}}
.hero-side-note{position:absolute;right:3.2%;top:44%;z-index:13;writing-mode:vertical-rl;font-size:7px;letter-spacing:.18em;line-height:1.8;color:var(--muted)}
.hero-side-note span{color:var(--red)}
.hero-photo-label{position:absolute;right:11%;bottom:11%;z-index:9;color:#fff;font-size:7px;letter-spacing:.16em}
.hero-editorial .hero-bottom{position:absolute;z-index:14;left:7vw;right:7vw;bottom:28px;display:flex;justify-content:space-between;color:var(--muted);font-size:7px;letter-spacing:.16em}
.hero-editorial .hero-top{position:absolute;z-index:14;left:7vw;right:7vw;top:32px}

@media(max-width:900px){
  .hero-editorial{min-height:790px}
  .hero-editorial .hero-copy{top:18%;left:7vw}
  .hero-editorial h1{font-size:clamp(68px,14vw,105px)}
  .hero-editorial .hero-visual{top:31%;height:58%}
  .hero-portrait-frame{width:430px;height:480px;right:50%;transform:translateX(50%)}
  .hero-editorial .red-shape{width:430px;right:50%;transform:translateX(50%);bottom:-7%}
  .ring-back{width:520px;height:520px;right:50%;transform:translateX(50%);bottom:-7%}
  .ring-front{width:420px;height:420px;right:50%;transform:translateX(50%);bottom:2%}
  .hero-orbit-system{width:610px;height:610px;right:50%;transform:translateX(50%);bottom:-48px}
  .hero-side-note{display:none}
}
@media(max-width:600px){
  .hero-editorial{min-height:750px}
  .hero-editorial .hero-copy{left:6vw;top:17%;right:6vw}
  .hero-editorial h1{font-size:70px}
  .hero-editorial .role{font-size:19px;margin-top:22px}
  .hero-intro{font-size:11px;max-width:330px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;max-width:330px}
  .hero-cta{justify-content:center;padding:10px 8px}
  .hero-editorial .hero-visual{top:37%;height:55%}
  .hero-portrait-frame{width:360px;height:400px}
  .hero-editorial .red-shape{width:350px}
  .ring-back{width:400px;height:400px}
  .ring-front{width:320px;height:320px}
  .hero-orbit-system{width:470px;height:470px;bottom:-25px}
  .hero-editorial .hero-bottom{left:6vw;right:6vw;bottom:18px;gap:10px}
  .hero-editorial .hero-bottom span:nth-child(2){display:none}
  .hero-photo-label{right:15%;bottom:8%}
}

/* Transparent hero cutout */
.hero-portrait-frame img{
  mix-blend-mode:normal;
  filter:saturate(.86) contrast(1.04) drop-shadow(0 20px 28px rgba(24,24,23,.12));
}
.hero-portrait-frame{
  pointer-events:none;
}


/* New hero layout: name/content left, portrait clearly separated on the right */
.hero-right-layout{
  min-height:790px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 83% 58%,rgba(141,17,19,.07),transparent 27%),
    var(--bg);
}
.hero-right-layout:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(24,24,23,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,24,23,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to right,transparent,black 15%,black 88%,transparent);
}
.hero-right-layout .hero-top{
  position:absolute;
  left:7vw;right:7vw;top:31px;z-index:20;
}
.hero-left-content{
  position:absolute;
  z-index:15;
  left:7vw;
  top:27%;
  width:min(510px,42vw);
}
.right-hero-kicker{
  color:var(--red);
  font-size:8px;
  font-weight:700;
  letter-spacing:.2em;
  margin:0 0 20px;
}
.hero-left-content h1{
  font-size:clamp(78px,9.2vw,145px);
  line-height:.7;
  letter-spacing:-.078em;
  margin:0;
}
.hero-left-content h1 em{
  font-family:var(--serif);
  font-weight:500;
}
.hero-rule{
  width:75px;height:1px;background:var(--red);
  margin:29px 0 19px;
}
.right-hero-role{
  font-family:var(--serif);
  color:var(--red);
  font-size:clamp(19px,2vw,27px);
  line-height:1.15;
  margin:0 0 12px;
}
.right-hero-description{
  max-width:420px;
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
}
.right-hero-actions{
  display:flex;
  gap:8px;
  margin-top:24px;
}
.right-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  min-width:125px;
  padding:12px 14px;
  border:1px solid var(--red);
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s;
}
.right-hero-btn span{font-size:14px}
.right-hero-btn.primary{background:var(--red);color:#fff}
.right-hero-btn.secondary{color:var(--red)}
.right-hero-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(141,17,19,.14);
}
.right-hero-btn.secondary:hover{background:var(--red);color:#fff}
.hero-meta{
  display:flex;
  gap:25px;
  margin-top:46px;
  padding-top:13px;
  border-top:1px solid var(--line);
  max-width:520px;
  font-size:7px;
  letter-spacing:.14em;
  color:var(--muted);
}
.hero-meta b{color:var(--red);font-weight:600}

.hero-right-portrait{
  position:absolute;
  z-index:8;
  right:4vw;
  bottom:0;
  width:min(510px,43vw);
  height:690px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.hero-right-portrait img{
  position:relative;
  z-index:6;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.82) contrast(1.04);
  transform:translateY(8px);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s;
}
.hero-right-portrait:hover img{
  transform:translateY(-7px) scale(1.012);
  filter:saturate(.94) contrast(1.06);
}
.portrait-backdrop{
  position:absolute;
  z-index:1;
  width:500px;height:500px;
  right:-2%;
  bottom:-7%;
  border-radius:50%;
  background:var(--red);
  box-shadow:
    0 0 0 16px rgba(141,17,19,.035),
    0 0 0 42px rgba(141,17,19,.018);
}
.portrait-glow{
  position:absolute;
  z-index:0;
  width:460px;height:460px;
  right:0;bottom:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(141,17,19,.16),transparent 68%);
  filter:blur(8px);
  animation:portraitGlow 5s ease-in-out infinite;
}
@keyframes portraitGlow{
  0%,100%{transform:scale(.96);opacity:.6}
  50%{transform:scale(1.08);opacity:1}
}
.portrait-label{
  position:absolute;
  z-index:9;
  right:2%;
  bottom:9%;
  color:#fff;
  font-size:7px;
  letter-spacing:.17em;
}

.hero-background-orbit{
  position:absolute;
  z-index:3;
  width:760px;height:760px;
  right:-150px;
  bottom:-135px;
  pointer-events:none;
  animation:heroOrbitRotation 28s linear infinite;
}
.hero-ring{
  position:absolute;
  inset:0;
  border:1px solid rgba(141,17,19,.34);
  border-radius:50%;
}
.hr1{transform:rotate(8deg) scaleX(.82)}
.hr2{inset:8%;transform:rotate(-17deg) scaleX(.9);border-color:rgba(141,17,19,.24)}
.hr3{inset:16%;transform:rotate(27deg) scaleX(.78);border-color:rgba(141,17,19,.18)}
.hr4{inset:25%;transform:rotate(-9deg) scaleX(.9);border-color:rgba(141,17,19,.13)}
.hero-orbit-point{
  position:absolute;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 7px rgba(141,17,19,.07);
}
.hp1{left:13%;top:36%}.hp2{right:13%;top:18%}.hp3{right:22%;bottom:20%}
.hero-arc-arrow{
  position:absolute;
  left:8%;top:30%;
  color:var(--red);
  font-size:28px;
  transform:rotate(-20deg);
}
@keyframes heroOrbitRotation{to{transform:rotate(360deg)}}

.hero-bottom-right{
  position:absolute!important;
  z-index:20!important;
  left:7vw!important;
  right:7vw!important;
  bottom:25px!important;
}
.hero-bottom-right span:first-child{color:var(--red)}

@media(max-width:1000px){
  .hero-right-layout{min-height:830px}
  .hero-left-content{
    left:7vw;
    top:19%;
    width:48%;
  }
  .hero-left-content h1{font-size:clamp(68px,10vw,105px)}
  .hero-right-portrait{
    width:52vw;
    height:570px;
    right:-1vw;
  }
  .portrait-backdrop{width:430px;height:430px}
  .hero-background-orbit{width:620px;height:620px;right:-150px;bottom:-55px}
  .hero-meta{flex-wrap:wrap;gap:12px}
}
@media(max-width:700px){
  .hero-right-layout{
    min-height:820px;
  }
  .hero-right-layout .hero-top{top:23px;left:6vw;right:6vw}
  .hero-left-content{
    left:6vw;right:6vw;top:16%;width:auto;
  }
  .hero-left-content h1{font-size:70px}
  .right-hero-role{font-size:19px}
  .right-hero-description{max-width:340px;font-size:11px}
  .right-hero-actions{max-width:330px}
  .hero-meta{margin-top:28px;max-width:350px}
  .hero-right-portrait{
    width:390px;
    height:430px;
    right:-20px;
    bottom:55px;
    z-index:7;
  }
  .portrait-backdrop{width:350px;height:350px;right:-10px}
  .portrait-label{right:4%;bottom:8%}
  .hero-background-orbit{
    width:470px;height:470px;
    right:-105px;bottom:5px;
  }
  .hero-bottom-right{
    left:6vw!important;right:6vw!important;bottom:16px!important;
  }
  .hero-bottom-right span:last-child{display:none}
}

/* Final hero spacing pass: keep portrait decisively separated from the name. */
.hero-right-layout .hero-left-content{width:min(475px,40vw)}
.hero-right-portrait{right:1.8vw;width:min(500px,42vw)}
.hero-background-orbit{right:-185px;bottom:-145px}
.portrait-backdrop{right:-3%}
@media(max-width:1000px){
  .hero-right-layout .hero-left-content{width:46%}
  .hero-right-portrait{right:-2vw;width:50vw}
  .hero-background-orbit{right:-175px}
}
@media(max-width:700px){
  .hero-right-layout .hero-left-content{width:auto}
  .hero-right-portrait{right:-30px;width:390px}
  .hero-background-orbit{right:-115px}
}


/* Developer-focused hero: no orbital graphics. Uses code, terminal, grid and stack cues instead. */
.developer-hero{
  min-height:800px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 73% 52%,rgba(141,17,19,.055),transparent 27%),
    var(--bg);
}
.developer-hero:after{
  content:"";
  position:absolute;
  width:1px;
  top:0;bottom:0;
  left:59%;
  background:linear-gradient(transparent,rgba(24,24,23,.12),transparent);
  pointer-events:none;
}
.dev-grid-bg{
  position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:
    linear-gradient(rgba(24,24,23,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,24,23,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(90deg,black 0 60%,transparent 85%);
}
.dev-noise{
  position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:radial-gradient(circle at 18% 70%,rgba(141,17,19,.15) 0 1px,transparent 1.5px);
  background-size:21px 21px;
}
.developer-hero .hero-top{
  position:absolute;left:7vw;right:7vw;top:31px;z-index:30;
}
.developer-copy{
  position:absolute;
  left:7vw;
  top:24%;
  width:min(475px,38vw);
  z-index:20;
}
.dev-kicker{
  display:flex;align-items:center;gap:8px;
  color:var(--red);
  font-size:8px;font-weight:700;letter-spacing:.19em;
}
.status-dot{
  width:6px;height:6px;border-radius:50%;background:#4b8b54;
  box-shadow:0 0 0 5px rgba(75,139,84,.09);
  animation:devPulse 2s infinite;
}
@keyframes devPulse{50%{box-shadow:0 0 0 8px rgba(75,139,84,0)}}
.developer-copy h1{
  margin:16px 0 0;
  font-size:clamp(76px,8.4vw,132px);
  line-height:.72;
  letter-spacing:-.075em;
}
.developer-copy h1 em{font-family:var(--serif);font-weight:500}
.dev-role{
  margin:28px 0 11px;
  color:var(--red);
  font:clamp(19px,1.8vw,26px) var(--serif);
  line-height:1.12;
}
.dev-description{
  max-width:420px;
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
}
.dev-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.dev-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:8px 10px 8px 16px;border:1px solid var(--red);
  border-radius:999px;
  font-size:8px;letter-spacing:.13em;text-transform:uppercase;overflow:hidden;
  background:rgba(255,255,255,.74);
  box-shadow:0 8px 22px rgba(24,24,23,.055), inset 0 0 0 1px rgba(141,17,19,.025);
  backdrop-filter:blur(8px);
  transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;
}
.dev-btn span{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border:1px solid currentColor;border-radius:50%;
  font-size:14px;line-height:1;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.dev-btn-primary{background:linear-gradient(135deg,var(--red),#b72a2d);color:#fff;border-color:var(--red)}
.dev-btn-outline{color:var(--red)}
.dev-btn-primary:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 14px 30px rgba(141,17,19,.2)}
.dev-btn-outline:hover{background:var(--red);color:#fff;transform:translateY(-4px) scale(1.015);box-shadow:0 14px 30px rgba(141,17,19,.16)}
.dev-btn-primary:hover span,.dev-btn-outline:hover span{transform:translateX(2px);background:rgba(255,255,255,.12)}
.dev-btn-resume{
  color:#171717;background:rgba(255,255,255,.86);
  border-color:rgba(141,17,19,.32);
  border-radius:999px;
  padding:8px 10px 8px 9px;
  gap:10px;
  box-shadow:0 8px 22px rgba(24,24,23,.07), inset 0 0 0 1px rgba(141,17,19,.035);
  backdrop-filter:blur(8px);
  overflow:visible;
}
.dev-btn-resume:after{
  content:"";
  position:absolute;inset:3px;
  border-radius:999px;
  border:1px solid rgba(141,17,19,.08);
  pointer-events:none;
}
.dev-btn-resume:before{
  content:"";position:absolute;inset:0 auto 0 -42%;width:34%;
  border-radius:999px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.92),transparent);
  transform:skewX(-18deg);transition:left .65s ease;
  pointer-events:none;
}
.dev-btn-resume:hover{
  background:var(--red);color:#fff;border-color:var(--red);
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 14px 30px rgba(141,17,19,.18);
}
.dev-btn-resume:hover:before{left:118%}
.resume-mark{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:26px;padding:0 8px;border:1px solid currentColor;
  border-radius:999px;
  font-size:7px!important;font-weight:700;letter-spacing:.1em;
  background:rgba(141,17,19,.06);
}
.resume-arrow{
  position:relative;z-index:1;display:inline-flex!important;align-items:center;justify-content:center;
  width:26px;height:26px;border:1px solid currentColor;border-radius:50%;
  font-size:14px!important;line-height:1;
  transition:transform .25s ease,background .25s ease;
}
.dev-btn-resume:hover .resume-arrow{transform:translateY(2px);background:rgba(255,255,255,.12)}
.dev-btn-resume{isolation:isolate}
.dev-btn-resume:not(:hover) .resume-mark{color:var(--red)}
.dev-stack-line{
  display:flex;align-items:center;gap:9px;
  margin-top:34px;padding-top:13px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:7px;letter-spacing:.12em;
}
.dev-stack-line i{color:var(--red);font-style:normal}

.developer-workspace{
  position:absolute;
  left:48%;
  top:23%;
  width:370px;
  z-index:10;
  transform:rotate(-2deg);
  transition:transform .5s ease;
}
.developer-workspace:hover{transform:rotate(0deg) translateY(-6px)}
.editor-window{
  background:#f5f3ee;
  border:1px solid rgba(24,24,23,.15);
  box-shadow:0 24px 60px rgba(24,24,23,.13);
}
.editor-topbar{
  height:35px;padding:0 12px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--line);
  font-size:7px;letter-spacing:.08em;color:var(--muted);
}
.editor-topbar b{margin-left:auto;color:var(--red);font-size:11px}
.editor-dots{display:flex;gap:4px}.editor-dots i{width:6px;height:6px;border-radius:50%;border:1px solid #999}
.editor-body{display:grid;grid-template-columns:34px 1fr;min-height:235px;padding:15px 12px}
.line-numbers{
  color:#aaa;font:8px/2.15 monospace;text-align:right;padding-right:12px;border-right:1px solid #ddd;
}
.code-lines{padding-left:14px;font:9px/2.15 monospace;color:#4a4742;white-space:nowrap}
.code-lines p{margin:0}
.code-key{color:var(--red)}.code-string{color:#7d5b3d}.code-live{color:#4b8b54}
.code-cursor{color:var(--red);animation:cursorBlink 1s steps(1) infinite}
@keyframes cursorBlink{50%{opacity:0}}
.editor-status{
  display:flex;justify-content:space-between;
  padding:8px 12px;border-top:1px solid var(--line);
  color:var(--muted);font:7px monospace;
}
.editor-status span:first-child{color:#4b8b54}

.terminal-card{
  position:absolute;right:-95px;bottom:-72px;
  width:270px;padding:14px;
  background:#201e1c;color:#e9e4dc;
  border:1px solid #393632;
  box-shadow:0 20px 40px rgba(24,24,23,.18);
  font:8px/1.8 monospace;
}
.terminal-prompt{color:#b94141}
.terminal-output{color:#91b66f;margin-top:4px}

.tech-float{
  position:absolute;
  padding:8px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--red);
  font-size:7px;letter-spacing:.12em;
  box-shadow:0 10px 24px rgba(24,24,23,.08);
  animation:techFloat 4s ease-in-out infinite;
}
.tf-react{left:-27px;top:7px}.tf-python{right:-35px;top:45px;animation-delay:-1.3s}.tf-db{left:40px;bottom:-112px;animation-delay:-2.3s}
@keyframes techFloat{50%{transform:translateY(-7px)}}

.developer-portrait{
  position:absolute;
  z-index:7;
  right:2.5vw;
  bottom:0;
  width:min(390px,32vw);
  height:630px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.developer-portrait img{
  position:relative;z-index:4;
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  filter:saturate(.82) contrast(1.04);
  transition:transform .65s ease,filter .45s ease;
}
.developer-portrait:hover img{transform:translateY(-6px) scale(1.012);filter:saturate(.95) contrast(1.06)}
.portrait-panel{
  position:absolute;z-index:1;
  width:390px;height:510px;
  right:-3%;bottom:0;
  background:var(--red);
  clip-path:polygon(17% 0,100% 0,100% 100%,0 100%,0 15%);
}
.portrait-accent{
  position:absolute;z-index:2;
  width:360px;height:470px;
  right:3%;bottom:0;
  border:1px solid rgba(255,255,255,.25);
  clip-path:polygon(17% 0,100% 0,100% 100%,0 100%,0 15%);
}
.portrait-caption{
  position:absolute;z-index:8;
  right:1%;bottom:12%;
  color:#fff;font-size:7px;letter-spacing:.16em;
}
.portrait-caption span{font-family:var(--serif);font-size:16px}

.dev-bottom{
  position:absolute;left:7vw;right:7vw;bottom:25px;z-index:30;
  display:flex;justify-content:space-between;
  color:var(--muted);font-size:7px;letter-spacing:.15em;
}
.dev-bottom span:first-child{color:var(--red)}

@media(max-width:1050px){
  .developer-copy{width:40vw;top:21%}
  .developer-workspace{left:45%;width:320px}
  .developer-portrait{width:340px;height:550px;right:-2vw}
  .portrait-panel{width:340px;height:450px}
  .portrait-accent{width:310px;height:415px}
}
@media(max-width:800px){
  .developer-hero{min-height:920px}
  .developer-copy{left:6vw;top:15%;width:auto;right:6vw}
  .developer-copy h1{font-size:72px}
  .dev-description{max-width:350px}
  .developer-workspace{left:8vw;top:47%;width:310px;transform:rotate(-1deg);z-index:5}
  .developer-portrait{width:300px;height:420px;right:-12px;bottom:65px;z-index:8}
  .portrait-panel{width:300px;height:350px}
  .portrait-accent{width:275px;height:325px}
  .terminal-card{display:none}
  .tf-db{display:none}
  .dev-bottom{left:6vw;right:6vw;bottom:17px}
  .dev-bottom span:nth-child(2){display:none}
}
@media(max-width:520px){
  .developer-hero{min-height:900px}
  .developer-copy{top:14%}
  .developer-copy h1{font-size:65px}
  .dev-role{font-size:18px}
  .dev-description{font-size:11px}
  .dev-stack-line{margin-top:24px;flex-wrap:wrap}
  .developer-workspace{left:5vw;top:48%;width:285px}
  .editor-body{min-height:205px}
  .code-lines{font-size:8px}
  .developer-portrait{width:250px;height:350px;right:-16px;bottom:64px}
  .portrait-panel{width:255px;height:290px}
  .portrait-accent{width:232px;height:270px}
  .tf-react,.tf-python{display:none}
}

/* Final responsive hero corrections:
   crop transparent padding from portrait, keep face unobstructed, and separate
   developer workspace from the portrait. */
.developer-hero{min-height:820px}
.developer-workspace{
  left:47%;
  top:21%;
  width:380px;
  z-index:11;
}
.developer-portrait{
  right:1.5vw;
  bottom:0;
  width:min(430px,35vw);
  height:700px;
  z-index:22;
  pointer-events:none;
}
.developer-portrait img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.portrait-panel{
  width:420px;
  height:545px;
  right:-2%;
  bottom:0;
}
.portrait-accent{
  width:388px;
  height:505px;
  right:2%;
  bottom:0;
}
.terminal-card{
  right:8px;
  bottom:-82px;
  width:250px;
  z-index:12;
}
.tech-float{z-index:13}
.developer-workspace .tf-python{right:-24px}
.developer-workspace .tf-react{left:-18px}

@media(min-width:1200px){
  .developer-workspace{left:46.5%;width:390px}
  .developer-portrait{width:440px;height:720px;right:1vw}
  .portrait-panel{width:425px;height:560px}
  .portrait-accent{width:393px;height:520px}
  .terminal-card{right:16px;bottom:-78px}
}

@media(max-width:1050px) and (min-width:801px){
  .developer-hero{min-height:850px}
  .developer-copy{width:39vw;top:21%}
  .developer-workspace{left:45%;top:24%;width:310px}
  .developer-portrait{width:350px;height:590px;right:-1vw}
  .portrait-panel{width:350px;height:450px}
  .portrait-accent{width:320px;height:418px}
  .terminal-card{right:0;bottom:-74px;width:220px}
}

@media(max-width:800px){
  .developer-hero{
    min-height:1080px;
    overflow:hidden;
  }
  .developer-copy{
    left:6vw;right:6vw;top:13%;
    width:auto;
  }
  .developer-copy h1{font-size:72px}
  .dev-role{font-size:20px}
  .dev-description{max-width:390px}
  .developer-workspace{
    left:6vw;
    top:45%;
    width:min(340px,88vw);
    z-index:10;
    transform:rotate(-1deg);
  }
  .developer-portrait{
    width:310px;
    height:430px;
    right:-10px;
    bottom:55px;
    z-index:22;
  }
  .portrait-panel{width:305px;height:350px}
  .portrait-accent{width:280px;height:325px}
  .terminal-card{display:none}
  .tf-python,.tf-db{display:none}
  .dev-bottom{bottom:15px}
}

@media(max-width:520px){
  .developer-hero{min-height:1030px}
  .developer-copy{top:12%}
  .developer-copy h1{font-size:64px}
  .dev-role{font-size:18px}
  .dev-description{font-size:11px;max-width:330px}
  .dev-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:340px}
  .dev-btn{padding:8px 9px 8px 14px;gap:9px;border-radius:999px}
  .dev-btn-resume{grid-column:1 / -1}
  .dev-stack-line{margin-top:23px;max-width:330px}
  .developer-workspace{
    top:44%;
    left:5vw;
    width:285px;
  }
  .editor-body{min-height:195px;padding:12px 9px}
  .code-lines{font-size:7.4px;line-height:2.05;padding-left:10px}
  .developer-portrait{
    width:250px;
    height:350px;
    right:-9px;
    bottom:48px;
  }
  .portrait-panel{width:250px;height:285px}
  .portrait-accent{width:228px;height:264px}
  .tf-react{display:none}
  .dev-bottom{left:5vw;right:5vw}
  .dev-bottom span:first-child{font-size:6px}
}

/* Experience 02 — interactive timeline */
.experience-timeline{position:relative;padding:10px 0 0 76px;max-width:1050px}
.experience-track{position:absolute;left:28px;top:8px;bottom:8px;width:1px;background:var(--line);overflow:hidden}.experience-track span{display:block;width:100%;height:0;background:var(--red);transition:height .2s linear}
.exp-enhanced{position:relative;display:grid;grid-template-columns:120px 1fr 48px;gap:28px;padding:38px 20px 38px 0;border-bottom:1px solid var(--line);transition:background .45s,transform .45s,opacity .45s;overflow:visible}
.exp-enhanced:before{content:"";position:absolute;left:-53px;top:47px;width:9px;height:9px;border:1px solid var(--red);background:var(--bg);border-radius:50%;box-shadow:0 0 0 0 rgba(141,17,19,.12);transition:.35s;z-index:3}.exp-enhanced:hover:before,.exp-enhanced.is-active:before{background:var(--red);box-shadow:0 0 0 8px rgba(141,17,19,.08)}
.exp-index{font:34px var(--serif);color:rgba(141,17,19,.18);line-height:1;transition:.35s}.exp-enhanced:hover .exp-index,.exp-enhanced.is-active .exp-index{color:var(--red);transform:translateX(4px)}
.exp-enhanced .date{font-size:8px;letter-spacing:.13em;color:var(--muted);line-height:1.65;padding-top:4px}.exp-main{position:relative}.exp-main h2{font-size:clamp(26px,3vw,42px);line-height:.96;letter-spacing:-.045em;margin:7px 0 8px;transition:transform .35s}.exp-enhanced:hover .exp-main h2{transform:translateX(5px)}.exp-main h4{font:17px var(--serif);font-weight:500;margin:0 0 14px;color:var(--red)}.exp-main>p:not(.red-label){max-width:700px;font-size:12px;line-height:1.72;color:var(--muted);margin:0}.exp-live{display:inline-block;margin-left:7px;color:#4b8b54;animation:expPulse 1.8s infinite}@keyframes expPulse{50%{opacity:.25}}
.exp-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:17px}.exp-tags span{padding:6px 8px;border:1px solid var(--line);font-size:7px;letter-spacing:.1em;color:var(--muted);transition:.25s}.exp-enhanced:hover .exp-tags span{border-color:rgba(141,17,19,.3);color:var(--red)}
.exp-arrow{width:38px;height:38px;border:1px solid var(--line);background:transparent;color:var(--red);font-size:16px;cursor:pointer;align-self:start;transition:.3s}.exp-arrow:hover,.exp-enhanced.is-active .exp-arrow{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(45deg)}
.exp-enhanced.is-active{background:linear-gradient(90deg,rgba(141,17,19,.045),transparent 75%);padding-left:12px;margin-left:-12px}.experience-summary{display:flex;justify-content:space-between;gap:20px;max-width:1050px;margin:18px 0 0 76px;padding-top:13px;border-top:1px solid var(--line);font-size:7px;letter-spacing:.14em;color:var(--muted)}.experience-summary b{color:var(--red);font:16px var(--serif)}
@media(max-width:760px){.experience-timeline{padding-left:46px}.experience-track{left:18px}.exp-enhanced{grid-template-columns:1fr 38px;gap:12px;padding:28px 4px 30px 0}.exp-index{position:absolute;left:-36px;top:30px;font-size:21px}.exp-enhanced .date{grid-column:1/3;grid-row:1;padding:0}.exp-main{grid-column:1/2;grid-row:2}.exp-arrow{grid-column:2;grid-row:2}.exp-main h2{font-size:28px}.experience-summary{margin-left:46px;flex-wrap:wrap}.experience-summary span:last-child{display:none}}


/* EXPERIENCE — editorial timeline cards */
.experience-section{
  position:relative;
  overflow:hidden;
}
.experience-section:before{
  content:"02";
  position:absolute;
  right:-.02em;
  top:70px;
  font:clamp(180px,24vw,360px) var(--serif);
  line-height:1;
  color:rgba(141,17,19,.035);
  pointer-events:none;
}
.experience-heading{
  position:relative;
  z-index:2;
  align-items:baseline;
}
.experience-heading small{
  margin-left:auto;
  font-size:7px;
  letter-spacing:.16em;
  color:var(--muted);
  font-weight:400;
}
.experience-intro{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin:55px 0 38px;
  max-width:1050px;
}
.experience-intro h2{
  margin:0;
  font-size:clamp(42px,5vw,74px);
  line-height:.82;
  letter-spacing:-.06em;
}
.experience-intro h2 em{
  font-family:var(--serif);
  font-weight:500;
}
.experience-intro p{
  width:min(420px,40%);
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}
.experience-timeline{
  position:relative;
  z-index:3;
  padding:8px 0 0 76px;
  max-width:1050px;
}
.experience-track{
  left:27px;
  top:20px;
  bottom:20px;
  width:2px;
  background:linear-gradient(to bottom,rgba(141,17,19,.08),rgba(141,17,19,.2),rgba(141,17,19,.08));
}
.experience-track span{
  background:linear-gradient(to bottom,var(--red),#b43b3b);
  box-shadow:0 0 10px rgba(141,17,19,.16);
}
.exp-enhanced{
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 48px;
  gap:28px;
  margin:0 0 22px;
  padding:30px 28px 30px 0;
  min-height:210px;
  border:1px solid rgba(24,24,23,.12);
  border-radius:2px;
  background:rgba(250,249,246,.56);
  box-shadow:0 8px 30px rgba(24,24,23,.035);
  overflow:visible;
  transition:
    transform .5s cubic-bezier(.2,.75,.2,1),
    border-color .4s,
    box-shadow .4s,
    background .4s;
}
.exp-enhanced:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--red);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .45s ease;
}
.exp-enhanced:hover,
.exp-enhanced.is-active{
  transform:translateX(8px);
  border-color:rgba(141,17,19,.26);
  background:rgba(255,255,255,.72);
  box-shadow:0 18px 45px rgba(24,24,23,.09);
}
.exp-enhanced:hover:after,
.exp-enhanced.is-active:after{transform:scaleY(1)}
.exp-enhanced:before{
  left:-55px;
  top:42px;
  width:10px;
  height:10px;
  border:2px solid var(--bg);
  background:var(--red);
  box-shadow:0 0 0 4px rgba(141,17,19,.13);
}
.exp-enhanced:hover:before,
.exp-enhanced.is-active:before{
  box-shadow:0 0 0 8px rgba(141,17,19,.1),0 0 18px rgba(141,17,19,.14);
  transform:scale(1.15);
}
.exp-index{
  padding-left:28px;
  font-size:43px;
  color:rgba(141,17,19,.13);
}
.exp-enhanced:hover .exp-index,
.exp-enhanced.is-active .exp-index{
  color:var(--red);
  transform:translateX(5px);
}
.exp-enhanced .date{
  padding:5px 0 0 28px;
  font-size:8px;
  letter-spacing:.15em;
}
.exp-main h2{
  margin:6px 0 9px;
  font-size:clamp(28px,3vw,43px);
  line-height:.94;
}
.exp-main h4{
  margin-bottom:15px;
}
.exp-main>p:not(.red-label){
  font-size:11.5px;
}
.red-label{
  display:flex;
  align-items:center;
  gap:7px;
}
.exp-status{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:4px 6px;
  border:1px solid rgba(141,17,19,.2);
  font-size:6px;
  letter-spacing:.12em;
  color:var(--red);
}
.exp-tags{
  margin-top:18px;
}
.exp-tags span{
  background:rgba(255,255,255,.5);
}
.exp-arrow{
  width:42px;
  height:42px;
  margin-top:2px;
  border-radius:50%;
  background:transparent;
}
.exp-arrow:hover,
.exp-enhanced.is-active .exp-arrow{
  transform:rotate(45deg) scale(1.08);
}
.experience-summary{
  position:relative;
  z-index:2;
  max-width:1050px;
  margin:30px 0 0 76px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}

@media(max-width:760px){
  .experience-heading small{display:none}
  .experience-intro{
    display:block;
    margin:38px 0 28px;
  }
  .experience-intro h2{font-size:50px;margin-bottom:20px}
  .experience-intro p{width:100%;max-width:390px}
  .experience-timeline{padding-left:45px}
  .experience-track{left:17px}
  .exp-enhanced{
    grid-template-columns:1fr 42px;
    gap:12px;
    padding:24px 16px 25px 0;
    min-height:0;
    margin-bottom:15px;
  }
  .exp-enhanced:before{left:-34px;top:32px}
  .exp-index{position:absolute;left:-30px;top:58px;padding:0;font-size:20px}
  .exp-enhanced .date{
    grid-column:1/3;
    grid-row:1;
    padding:0;
    margin-bottom:2px;
  }
  .exp-main{grid-column:1/2;grid-row:2}
  .exp-arrow{grid-column:2;grid-row:2}
  .exp-main h2{font-size:28px}
  .experience-summary{margin-left:45px}
}


/* EXPERIENCE — reference layout: clean editorial rows, no cards/boxes */
.experience-reference{
  position:relative;
  overflow:hidden;
}
.experience-reference .section-head{
  margin-bottom:58px;
}
.experience-list{
  width:100%;
  border-top:1px solid var(--line);
}
.experience-reference-item{
  display:grid;
  grid-template-columns:28% 72%;
  min-height:330px;
  padding:48px 0 58px;
  border-bottom:1px solid var(--line);
  position:relative;
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1);
}
.experience-reference-item.reveal-visible{
  opacity:1;
  transform:none;
}
.experience-reference-item:nth-child(2){transition-delay:.08s}
.experience-reference-item:nth-child(3){transition-delay:.16s}

.experience-date{
  padding-top:7px;
  padding-right:35px;
  color:var(--muted);
  font-size:8px;
  line-height:1.8;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.experience-content{
  max-width:1000px;
  padding-left:0;
}
.experience-label{
  margin:0 0 24px;
  color:var(--red);
  font-size:8px;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  transition:letter-spacing .3s ease;
}
.experience-reference-item:hover .experience-label{
  letter-spacing:.25em;
}
.experience-content h2{
  margin:0 0 14px;
  font-size:clamp(36px,4vw,58px);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:600;
  transition:transform .4s cubic-bezier(.2,.75,.2,1);
}
.experience-reference-item:hover .experience-content h2{
  transform:translateX(7px);
}
.experience-content h4{
  margin:0 0 25px;
  color:var(--red);
  font-size:15px;
  font-weight:600;
}
.experience-content>p:last-child{
  max-width:1020px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}
.experience-reference-item:before{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:var(--red);
  transition:width .7s cubic-bezier(.2,.75,.2,1);
}
.experience-reference-item:hover:before{
  width:100%;
}
.experience-reference-item:after{
  content:"↗";
  position:absolute;
  right:4px;
  top:47px;
  color:var(--red);
  font-size:18px;
  opacity:0;
  transform:translate(-8px,8px);
  transition:opacity .3s,transform .35s;
}
.experience-reference-item:hover:after{
  opacity:1;
  transform:none;
}

/* Preserve the visual proportions of the supplied desktop reference. */
@media(min-width:1100px){
  .experience-reference{
    padding-left:0;
    padding-right:0;
  }
  .experience-reference-item{
    grid-template-columns:28% 72%;
  }
  .experience-content h2{
    font-size:42px;
  }
  .experience-content>p:last-child{
    font-size:12px;
    max-width:1000px;
  }
}

@media(max-width:760px){
  .experience-reference .section-head{
    margin-bottom:35px;
  }
  .experience-reference-item{
    grid-template-columns:1fr;
    min-height:0;
    padding:30px 0 38px;
    gap:18px;
  }
  .experience-date{
    padding:0;
    font-size:7px;
  }
  .experience-label{
    margin-bottom:16px;
  }
  .experience-content h2{
    font-size:32px;
    line-height:1;
  }
  .experience-content h4{
    font-size:13px;
    margin-bottom:18px;
  }
  .experience-content>p:last-child{
    font-size:11px;
    line-height:1.7;
  }
  .experience-reference-item:after{
    right:0;
    top:30px;
  }
}


/* EXPERIENCE — same reference layout, animation only */
.experience-reference-item{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
}
.experience-reference-item.is-inview{
  opacity:1;
  transform:none;
}
.experience-reference-item .experience-date{
  opacity:0;
  transform:translateX(-14px);
  transition:
    opacity .65s ease .08s,
    transform .65s cubic-bezier(.2,.7,.2,1) .08s;
}
.experience-reference-item .experience-label{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .55s ease .14s,
    transform .55s ease .14s;
}
.experience-reference-item .experience-content h2{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .7s ease .18s,
    transform .7s cubic-bezier(.2,.7,.2,1) .18s;
}
.experience-reference-item .experience-content h4,
.experience-reference-item .experience-content>p:last-child{
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity .65s ease .28s,
    transform .65s cubic-bezier(.2,.7,.2,1) .28s;
}
.experience-reference-item.is-inview .experience-date,
.experience-reference-item.is-inview .experience-label,
.experience-reference-item.is-inview .experience-content h2,
.experience-reference-item.is-inview .experience-content h4,
.experience-reference-item.is-inview .experience-content>p:last-child{
  opacity:1;
  transform:none;
}

/* Very subtle hover motion — visual structure remains unchanged. */
.experience-reference-item .experience-content h2{
  transition:
    opacity .7s ease .18s,
    transform .7s cubic-bezier(.2,.7,.2,1) .18s,
    letter-spacing .3s ease;
}
.experience-reference-item:hover .experience-content h2{
  letter-spacing:-.062em;
}
.experience-reference-item:hover .experience-label{
  letter-spacing:.22em;
}

/* Thin red line travels underneath the existing divider on hover. */
.experience-reference-item{
  background:linear-gradient(var(--red),var(--red)) left bottom / 0 1px no-repeat;
}
.experience-reference-item:hover{
  background-size:100% 1px;
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1),
    background-size .65s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce){
  .experience-reference-item,
  .experience-reference-item .experience-date,
  .experience-reference-item .experience-label,
  .experience-reference-item .experience-content h2,
  .experience-reference-item .experience-content h4,
  .experience-reference-item .experience-content>p:last-child{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* EXPERIENCE — bring date column closer to content */
.experience-reference-item{
  grid-template-columns:24% 76%;
}
.experience-date{
  padding-right:18px;
}
@media(min-width:1100px){
  .experience-reference-item{
    grid-template-columns:24% 76%;
  }
}
@media(max-width:760px){
  .experience-reference-item{
    grid-template-columns:1fr;
  }
}

/* EXPERIENCE — align dates toward the content column */
.experience-reference-item{
  grid-template-columns:24% 76%;
}
.experience-date{
  text-align:right;
  padding-right:28px;
}
@media (max-width:760px){
  .experience-reference-item{
    grid-template-columns:1fr;
  }
  .experience-date{
    text-align:left;
    padding-right:0;
  }
}


/* SAFA BAKES — dashboard preview */
.safa-dashboard-preview{
  position:relative;
  margin:28px 0 34px;
  padding:0;
  background:#ece9e4;
  border:1px solid rgba(25,25,24,.13);
  overflow:hidden;
  box-shadow:0 22px 70px rgba(20,20,18,.09);
}
.safa-dashboard{
  display:grid;
  grid-template-columns:170px 1fr;
  min-height:560px;
  background:#f6f5f2;
}
.safa-dashboard-sidebar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:18px 13px;
  background:#191918;
  color:#fff;
}
.safa-brand{
  height:78px;
  margin-bottom:14px;
  overflow:hidden;
  border-radius:5px;
  background:#ed1c24;
}
.safa-brand img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.safa-side-label{
  margin:0 6px 4px;
  color:#8d8c88;
  font-size:6px;
  letter-spacing:.16em;
}
.safa-side-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 9px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:#bdbcb8;
  text-align:left;
  font:inherit;
  font-size:8px;
  cursor:pointer;
  transition:background .25s,color .25s,transform .25s;
}
.safa-side-item span{
  width:15px;
  color:#8c8b87;
  text-align:center;
}
.safa-side-item.active,
.safa-side-item:hover{
  background:#8d1113;
  color:#fff;
  transform:translateX(3px);
}
.safa-side-item.active span,
.safa-side-item:hover span{color:#fff}
.safa-side-bottom{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding:12px 7px 2px;
  border-top:1px solid rgba(190,0,30,.16);
  color:#85847f;
  font-size:6px;
}
.safa-online-dot{
  width:5px;height:5px;border-radius:50%;
  background:#50a36a;
  box-shadow:0 0 8px rgba(80,163,106,.7);
}
.safa-dashboard-main{
  min-width:0;
  padding:22px 24px 24px;
}
.safa-dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.safa-mini-label{
  color:#8d1113;
  font-size:6px;
  letter-spacing:.18em;
}
.safa-dashboard-header h4{
  margin:5px 0 0;
  color:#171716;
  font-size:16px;
}
.safa-header-actions{
  display:flex;align-items:center;gap:12px;
}
.safa-date{
  color:#85837e;
  font-size:6px;
  letter-spacing:.12em;
}
.safa-avatar{
  display:grid;place-items:center;
  width:25px;height:25px;border-radius:50%;
  background:#8d1113;color:#fff;
  font-size:8px;
}
.safa-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-bottom:10px;
}
.safa-stat-card{
  padding:12px;
  border:1px solid #dedbd4;
  background:#fff;
  border-radius:3px;
  transition:transform .3s,box-shadow .3s;
}
.safa-stat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(20,20,18,.08);
}
.safa-stat-card span,.safa-stat-card small{
  display:block;
  color:#85837e;
  font-size:6px;
}
.safa-stat-card strong{
  display:block;
  margin:7px 0 4px;
  color:#171716;
  font-size:16px;
}
.safa-stat-card small{color:#4f8a5f}
.safa-dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(190px,.85fr);
  gap:10px;
}
.safa-panel-ui{
  border:1px solid #dedbd4;
  background:#fff;
  border-radius:3px;
  overflow:hidden;
}
.safa-panel-ui-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #e8e5df;
}
.safa-panel-ui-head span{
  display:block;
  color:#8d1113;
  font-size:5px;
  letter-spacing:.14em;
}
.safa-panel-ui-head strong{
  display:block;
  margin-top:4px;
  color:#242321;
  font-size:8px;
}
.safa-panel-ui-head button,.safa-panel-ui-head>b{
  border:0;background:transparent;color:#77756f;font-size:6px;
}
.safa-chart{
  display:flex;
  height:174px;
  padding:13px 14px 10px 7px;
}
.chart-y{
  width:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0 0 21px;
  color:#aaa7a0;
  font-size:5px;
  text-align:right;
}
.chart-area{position:relative;flex:1;min-width:0}
.chart-grid-line{
  height:1px;
  background:#eeece7;
  margin-bottom:38px;
}
.chart-area svg{
  position:absolute;inset:0 0 19px 0;
  width:100%;height:130px;
  overflow:visible;
}
.chart-fill{fill:rgba(141,17,19,.08)}
.chart-line{
  fill:none;stroke:#8d1113;stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
.chart-area circle{fill:#8d1113}
.chart-x{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;
  color:#aaa7a0;font-size:5px;
}
.top-products-panel{min-height:210px}
.safa-product-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  gap:8px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #efede8;
}
.safa-product-row i{
  color:#aaa7a0;font-size:7px;font-style:normal;
}
.safa-product-row strong{display:block;font-size:7px;color:#272622}
.safa-product-row small{display:block;margin-top:3px;color:#96938d;font-size:5px}
.safa-product-row b{font-size:7px;color:#8d1113}
.recent-panel{margin-top:10px}
.safa-sales-table>div{
  display:grid;
  grid-template-columns:1.2fr 1fr .55fr .8fr .75fr;
  gap:8px;
  align-items:center;
  padding:9px 14px;
  border-bottom:1px solid #efede8;
  font-size:6px;
}
.safa-table-head{
  color:#aaa7a0;
  font-size:5px !important;
  letter-spacing:.08em;
}
.safa-sales-table strong{color:#282723}
.safa-sales-table span{color:#77746e}
.safa-sales-table b{color:#8d1113}
.safa-sales-table em{
  justify-self:start;
  padding:4px 5px;
  border-radius:2px;
  background:#e8f2e9;
  color:#4f8a5f;
  font-size:5px;
  font-style:normal;
}
.safa-preview-caption{
  position:absolute;
  right:13px;bottom:10px;
  color:#8b8882;
  font-size:5px;
  letter-spacing:.14em;
  pointer-events:none;
}

@media(max-width:800px){
  .safa-dashboard{grid-template-columns:110px 1fr;min-height:460px}
  .safa-dashboard-sidebar{padding:12px 8px}
  .safa-brand{height:55px}
  .safa-side-item{font-size:6px;padding:8px 5px}
  .safa-dashboard-main{padding:14px}
  .safa-stat-grid{grid-template-columns:repeat(2,1fr)}
  .safa-dashboard-grid{grid-template-columns:1fr}
  .top-products-panel{display:none}
}
@media(max-width:560px){
  .safa-dashboard{display:block;min-height:0}
  .safa-dashboard-sidebar{
    display:flex;flex-direction:row;align-items:center;
    overflow:hidden;height:54px;padding:7px 9px;
  }
  .safa-brand{width:72px;height:40px;flex:0 0 auto;margin:0 8px 0 0}
  .safa-side-label,.safa-side-bottom{display:none}
  .safa-side-item{width:auto;white-space:nowrap;padding:8px}
  .safa-side-item span{display:none}
  .safa-dashboard-main{padding:12px}
  .safa-dashboard-header h4{font-size:12px}
  .safa-header-actions .safa-date{display:none}
  .safa-stat-card strong{font-size:13px}
  .safa-chart{height:145px}
  .recent-panel{display:none}
  .safa-preview-caption{font-size:4px}
}

/* SAFA BAKES — content section motion */
.safa-project .safa-columns,
.safa-project .safa-columns-bottom,
.safa-project .safa-actions{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.safa-project.safa-content-visible .safa-columns,
.safa-project.safa-content-visible .safa-columns-bottom,
.safa-project.safa-content-visible .safa-actions{
  opacity:1;
  transform:none;
}
.safa-project .safa-columns{transition-delay:.08s}
.safa-project .safa-columns-bottom{transition-delay:.18s}
.safa-project .safa-actions{transition-delay:.28s}

.safa-project .safa-panel{
  position:relative;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.75,.2,1), border-color .35s, box-shadow .45s;
}
.safa-project .safa-panel:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:100%;
  background:var(--red);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .5s cubic-bezier(.2,.75,.2,1);
}
.safa-project .safa-panel:hover{
  transform:translateY(-5px);
  border-color:rgba(141,17,19,.24);
  box-shadow:0 18px 42px rgba(20,20,18,.08);
}
.safa-project .safa-panel:hover:before{
  transform:scaleY(1);
}

.safa-project .tech-badges span,
.safa-project .feature-list span{
  opacity:0;
  transform:translateY(12px) scale(.97);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.75,.2,1), background .25s, color .25s, border-color .25s;
}
.safa-project.safa-content-visible .tech-badges span,
.safa-project.safa-content-visible .feature-list span{
  opacity:1;
  transform:none;
}
.safa-project.safa-content-visible .tech-badges span:nth-child(1){transition-delay:.12s}
.safa-project.safa-content-visible .tech-badges span:nth-child(2){transition-delay:.17s}
.safa-project.safa-content-visible .tech-badges span:nth-child(3){transition-delay:.22s}
.safa-project.safa-content-visible .tech-badges span:nth-child(4){transition-delay:.27s}
.safa-project.safa-content-visible .tech-badges span:nth-child(5){transition-delay:.32s}
.safa-project.safa-content-visible .tech-badges span:nth-child(6){transition-delay:.37s}
.safa-project.safa-content-visible .tech-badges span:nth-child(7){transition-delay:.42s}

.safa-project.safa-content-visible .feature-list span:nth-child(1){transition-delay:.12s}
.safa-project.safa-content-visible .feature-list span:nth-child(2){transition-delay:.16s}
.safa-project.safa-content-visible .feature-list span:nth-child(3){transition-delay:.20s}
.safa-project.safa-content-visible .feature-list span:nth-child(4){transition-delay:.24s}
.safa-project.safa-content-visible .feature-list span:nth-child(5){transition-delay:.28s}
.safa-project.safa-content-visible .feature-list span:nth-child(6){transition-delay:.32s}
.safa-project.safa-content-visible .feature-list span:nth-child(7){transition-delay:.36s}
.safa-project.safa-content-visible .feature-list span:nth-child(8){transition-delay:.40s}
.safa-project.safa-content-visible .feature-list span:nth-child(9){transition-delay:.44s}
.safa-project.safa-content-visible .feature-list span:nth-child(10){transition-delay:.48s}
.safa-project.safa-content-visible .feature-list span:nth-child(11){transition-delay:.52s}
.safa-project.safa-content-visible .feature-list span:nth-child(12){transition-delay:.56s}
.safa-project.safa-content-visible .feature-list span:nth-child(13){transition-delay:.60s}
.safa-project.safa-content-visible .feature-list span:nth-child(14){transition-delay:.64s}
.safa-project.safa-content-visible .feature-list span:nth-child(15){transition-delay:.68s}

.safa-project .tech-badges span:hover{
  transform:translateY(-4px) scale(1.05);
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}
.safa-project .feature-list span{
  position:relative;
}
.safa-project .feature-list span:before{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:7px;
  border-radius:50%;
  background:var(--red);
  vertical-align:middle;
  transition:transform .25s;
}
.safa-project .feature-list span:hover{
  transform:translateX(5px);
}
.safa-project .feature-list span:hover:before{
  transform:scale(1.7);
}

.safa-project .safa-panel-copy-wrap{
  overflow:hidden;
}
.safa-project .panel-copy{
  transition:transform .5s ease, color .35s;
}
.safa-project .safa-panel:hover .panel-copy{
  transform:translateX(4px);
}
.safa-project .panel-label{
  position:relative;
  transition:letter-spacing .35s ease, color .35s ease;
}
.safa-project .safa-panel:hover .panel-label{
  letter-spacing:.18em;
  color:var(--red);
}

.safa-project .safa-actions .safa-btn{
  transition:transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s, background .3s, color .3s;
}
.safa-project .safa-actions .safa-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(20,20,18,.12);
}
.safa-project .safa-actions .safa-btn span{
  display:inline-block;
  transition:transform .35s;
}
.safa-project .safa-actions .safa-btn:hover span{
  transform:translate(4px,-4px);
}

@media(prefers-reduced-motion:reduce){
  .safa-project .safa-columns,
  .safa-project .safa-columns-bottom,
  .safa-project .safa-actions,
  .safa-project .tech-badges span,
  .safa-project .feature-list span{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* PROJECT VISUALS — generated previews placed into the existing project image areas */
.project-visual-generated{
  position:absolute;
  inset:0;
  background-image:url("assets/project-visuals.png");
  background-repeat:no-repeat;
  background-size:300% 200%;
  background-color:#171716;
  transition:transform .6s cubic-bezier(.2,.75,.2,1), filter .5s ease;
}
.project-visual-generated.real-estate{background-position:0% 0%}
.project-visual-generated.cafe{background-position:50% 0%}
.project-visual-generated.residence{background-position:100% 0%}
.project-visual-generated.apartment{background-position:100% 0%}
.project-visual-generated.villa{background-position:100% 0%}
.project-visual-generated.menu{background-position:100% 100%}
.project-visual-generated.interactive{background-position:50% 100%}
.project-visual-generated.presentation{background-position:0% 100%}

.project-image,
.project-media,
.project-preview,
.project-card-image{
  position:relative;
  overflow:hidden;
}
.project-image .project-visual-generated,
.project-media .project-visual-generated,
.project-preview .project-visual-generated,
.project-card-image .project-visual-generated{
  z-index:0;
}
.project-image > *:not(.project-visual-generated),
.project-media > *:not(.project-visual-generated),
.project-preview > *:not(.project-visual-generated),
.project-card-image > *:not(.project-visual-generated){
  position:relative;
  z-index:1;
}
.project-image:hover .project-visual-generated,
.project-media:hover .project-visual-generated,
.project-preview:hover .project-visual-generated,
.project-card-image:hover .project-visual-generated{
  transform:scale(1.045);
  filter:saturate(1.05);
}


/* Project modal — real project visuals in the existing image slots */
.property-card{
  overflow:hidden;
  position:relative;
}
.property-card i{
  display:block;
  width:100%;
  height:125px;
  margin:0 0 14px;
  border-radius:2px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#e8e5df;
  transition:transform .55s cubic-bezier(.2,.75,.2,1), filter .4s ease;
}
.property-card:hover i{
  transform:scale(1.045);
  filter:saturate(1.04);
}
.property-card.property-residence i{
  background-image:url("assets/modern-residence.jpg");
}
.property-card.property-apartment i{
  background-image:url("assets/city-apartment.jpg");
}
.property-card.property-villa i{
  background-image:url("assets/family-villa.jpg");
}
.property-card.cafe-menu i{
  background-image:url("assets/menu-experience.jpg");
}
.property-card.cafe-interactive i{
  background-image:url("assets/interactive-ui.jpg");
}
.property-card.cafe-presentation i{
  background-image:url("assets/cafe-presentation.jpg");
}
.property-card strong,
.property-card small{
  position:relative;
  z-index:2;
}
@media(max-width:650px){
  .property-card i{height:105px}
}

/* CERTIFICATIONS — animated developer credential wall */
.cert-section{position:relative;overflow:hidden}
.cert-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:50px;align-items:end;margin-top:55px;margin-bottom:42px}
.cert-kicker{margin:0 0 14px;color:var(--red);font-size:8px;letter-spacing:.2em;font-weight:700}
.cert-intro h2{margin:0;font-size:clamp(48px,6vw,86px);line-height:.92;letter-spacing:-.055em}
.cert-intro h2 em{font-family:var(--serif);font-weight:500}
.cert-console{border:1px solid rgba(20,20,18,.16);background:#171716;color:#f5f3ed;padding:0;box-shadow:0 18px 45px rgba(20,20,18,.08);position:relative;overflow:hidden}
.cert-console:after{content:"";position:absolute;left:0;right:0;top:-20%;height:18%;background:linear-gradient(to bottom,transparent,rgba(170,0,20,.08),transparent);animation:certScan 4s linear infinite}
.cert-console-top{display:flex;justify-content:space-between;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.12);font:9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#aaa}
.cert-console-top span:last-child{color:#8fd18f}
.cert-console-line{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.08);font:10px/1.2 monospace}
.cert-console-line:last-child{border-bottom:0}
.cert-console-line i{color:#777;font-style:normal}.cert-console-line span{color:#ddd}.cert-console-line b{font-size:7px;letter-spacing:.13em;color:#b9d8b9;font-weight:500}
.cert-grid-modern{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative;z-index:2}
.cert-card-modern{min-height:255px;padding:22px;background:#f8f7f3;border:1px solid var(--line);position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s,border-color .35s,background .35s}
.cert-card-modern:before{content:"";position:absolute;width:150px;height:150px;right:-85px;top:-85px;border:1px solid rgba(141,17,19,.22);border-radius:50%;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.cert-card-modern:after{content:"";position:absolute;left:-30%;bottom:0;width:160%;height:2px;background:var(--red);transform:translateX(-100%);transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.cert-card-modern:hover{transform:translateY(-8px);box-shadow:0 20px 42px rgba(20,20,18,.12);border-color:rgba(141,17,19,.35);background:#fff}
.cert-card-modern:hover:before{transform:scale(1.5)}
.cert-card-modern:hover:after{transform:translateX(0)}
.cert-card-top,.cert-card-foot{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.cert-card-top span,.cert-card-foot span{font-size:7px;letter-spacing:.16em;color:var(--muted)}
.cert-card-top b{font-size:8px;color:var(--red);letter-spacing:.08em}
.cert-icon{width:48px;height:48px;margin:32px 0 23px;border:1px solid rgba(141,17,19,.35);display:grid;place-items:center;color:var(--red);font:600 12px/1 monospace;position:relative;transition:transform .5s,background .35s,color .35s}
.cert-icon:before{content:"";position:absolute;inset:5px;border:1px dashed rgba(141,17,19,.3);animation:certSpin 10s linear infinite}
.cert-card-modern:hover .cert-icon{transform:rotate(-5deg) scale(1.08);background:var(--red);color:#fff}
.cert-card-modern:hover .cert-icon:before{border-color:rgba(255,255,255,.55)}
.cert-card-modern h3{font-size:21px;line-height:1.05;letter-spacing:-.035em;margin:0 0 10px;max-width:280px;position:relative;z-index:1}
.cert-card-modern p{margin:0;color:var(--red);font-size:10px;line-height:1.4;position:relative;z-index:1}
.cert-card-foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.cert-card-foot b{font-size:18px;color:var(--red);transition:transform .35s}.cert-card-modern:hover .cert-card-foot b{transform:translate(4px,-4px)}
.cert-card-featured{background:#171716;color:#fff;border-color:#171716}.cert-card-featured p,.cert-card-featured .cert-card-foot b,.cert-card-featured .cert-card-top b{color:#d94a4c}.cert-card-featured .cert-card-top span,.cert-card-featured .cert-card-foot span{color:#999}.cert-card-featured .cert-card-foot{border-color:rgba(255,255,255,.13)}
.cert-scanline{height:1px;width:35%;margin:48px auto 0;background:var(--red);opacity:.55;position:relative}.cert-scanline:after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;background:var(--red);border-radius:50%;box-shadow:0 0 16px rgba(141,17,19,.45);animation:certPulse 2.2s ease-in-out infinite}
@keyframes certScan{0%{transform:translateY(0)}100%{transform:translateY(700%)} }
@keyframes certSpin{to{transform:rotate(360deg)}}
@keyframes certPulse{0%,100%{left:0;opacity:.35}50%{left:calc(100% - 5px);opacity:1}}
@media(max-width:900px){.cert-intro{grid-template-columns:1fr}.cert-grid-modern{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.cert-intro{margin-top:38px;gap:28px}.cert-intro h2{font-size:48px}.cert-console{min-width:0}.cert-grid-modern{grid-template-columns:1fr}.cert-card-modern{min-height:230px}.cert-card-featured{grid-column:auto}.cert-scanline{width:60%}}
@media(prefers-reduced-motion:reduce){.cert-console:after,.cert-icon:before,.cert-scanline:after{animation:none}.cert-card-modern,.cert-card-modern:before,.cert-card-modern:after{transition:none}}

/* One Million Prompters certificate — native portfolio treatment */
.cert-ai-card { position:relative; overflow:hidden; }
.cert-ai-card::before { content:""; position:absolute; inset:0; border:1px solid rgba(157,24,24,.15); pointer-events:none; transition:.45s ease; }
.cert-ai-card:hover::before { border-color:rgba(157,24,24,.7); box-shadow:inset 0 0 0 1px rgba(157,24,24,.15), 0 18px 50px rgba(20,20,20,.08); }
.cert-preview-wrap { position:relative; margin:1.15rem 0 1.35rem; aspect-ratio:4/3; overflow:hidden; background:#eeeae3; border:1px solid rgba(20,20,20,.1); }
.cert-preview-image { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.cert-ai-card:hover .cert-preview-image { transform:scale(1.035); }
.cert-preview-glow { position:absolute; inset:-35%; background:radial-gradient(circle, rgba(30,90,190,.18), transparent 55%); opacity:0; transition:opacity .5s ease; pointer-events:none; z-index:1; }
.cert-ai-card:hover .cert-preview-glow { opacity:1; animation:certPulse 2.2s ease-in-out infinite; }
.cert-ai-badge { position:absolute; right:12px; top:12px; z-index:2; padding:7px 10px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.72); backdrop-filter:blur(10px); font:600 10px/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#183f83; box-shadow:0 8px 25px rgba(0,0,0,.08); }
.cert-card-foot { align-items:center; gap:12px; }
.cert-view-btn { border:1px solid rgba(157,24,24,.35); background:transparent; padding:.55rem .7rem; font:600 10px/1 "DM Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#9d1818; cursor:pointer; transition:.3s ease; }
.cert-view-btn:hover { background:#9d1818; color:#fff; transform:translateY(-2px); }
.certificate-modal { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:clamp(12px,3vw,34px); visibility:hidden; opacity:0; transition:opacity .35s ease, visibility .35s ease; }
.certificate-modal.is-open { visibility:visible; opacity:1; }
.certificate-modal-backdrop { position:absolute; inset:0; background:rgba(10,10,10,.76); backdrop-filter:blur(14px); }
.certificate-modal-panel { position:relative; z-index:1; width:min(1180px,100%); max-height:94vh; display:flex; flex-direction:column; background:rgba(246,244,239,.94); border:1px solid rgba(255,255,255,.45); box-shadow:0 30px 100px rgba(0,0,0,.35); transform:translateY(22px) scale(.98); transition:transform .45s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.certificate-modal.is-open .certificate-modal-panel { transform:translateY(0) scale(1); }
.certificate-modal-head { display:flex; justify-content:space-between; align-items:flex-start; padding:18px 22px; border-bottom:1px solid rgba(20,20,20,.12); }
.certificate-modal-head h2 { margin:.2rem 0 0; font-size:clamp(24px,3vw,38px); }
.certificate-close { width:42px; height:42px; border:1px solid rgba(20,20,20,.16); background:rgba(255,255,255,.5); font-size:28px; line-height:1; cursor:pointer; transition:.25s ease; }
.certificate-close:hover { background:#9d1818; color:#fff; transform:rotate(90deg); }
.certificate-viewer { flex:1; min-height:0; overflow:auto; padding:clamp(12px,2vw,24px); display:grid; place-items:center; background:rgba(225,222,215,.38); }
.certificate-viewer img { display:block; width:min(100%,900px); height:auto; box-shadow:0 20px 60px rgba(0,0,0,.18); background:#fff; }
.certificate-modal-meta { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; padding:13px 22px; border-top:1px solid rgba(20,20,20,.12); font-size:12px; }
.certificate-modal-meta a { margin-left:auto; color:#9d1818; font-weight:700; text-decoration:none; }
body.certificate-viewing { overflow:hidden; }
@keyframes certPulse { 0%,100% { transform:scale(.92); opacity:.45; } 50% { transform:scale(1.05); opacity:.85; } }
@media (max-width:700px) { .certificate-modal { padding:0; } .certificate-modal-panel { width:100%; max-height:100vh; height:100vh; } .certificate-modal-head { padding:14px 16px; } .certificate-viewer { padding:10px; align-items:start; } .certificate-modal-meta { padding:12px 16px; } .certificate-modal-meta a { margin-left:0; width:100%; } .cert-card-foot { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .cert-ai-card *, .certificate-modal, .certificate-modal-panel { animation:none !important; transition:none !important; } }

/* Unified typography: use one consistent typeface throughout the portfolio. */
:root{--serif:var(--sans)}
*,*::before,*::after{font-family:var(--sans)!important}

/* Classic name typography: Cinzel option 03 */
.developer-copy h1,
.developer-copy h1 em{
  font-family:"Cinzel", Georgia, serif !important;
  font-weight:600;
  letter-spacing:-0.035em;
}

/* Cooler skill category treatment */
.skill-card-modern{
  border-radius:24px;
  min-height:255px;
  padding:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(243,242,238,.72));
  box-shadow:0 12px 35px rgba(24,24,23,.055);
}
.skill-card-modern:nth-child(1){--skill-accent:#b71d20}
.skill-card-modern:nth-child(2){--skill-accent:#8d1113}
.skill-card-modern:nth-child(3){--skill-accent:#c43b3e}
.skill-card-modern:nth-child(4){--skill-accent:#9f2528}
.skill-card-modern:nth-child(5){--skill-accent:#6f0d0f}
.skill-card-modern:before{
  width:210px;height:210px;
  right:-145px;bottom:-145px;
  background:var(--skill-accent);
}
.skill-card-modern:after{
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.55) 48%,transparent 78%);
}
.skill-card-modern:hover{
  transform:translateY(-10px) rotateX(2deg);
  border-color:var(--skill-accent);
  box-shadow:0 28px 65px rgba(24,24,23,.16);
}
.skill-card-index{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--skill-accent) 28%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--skill-accent) 7%,transparent);
  color:var(--skill-accent);
  font-family:inherit;
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
  transition:all .3s;
}
.skill-card-icon{
  top:22px;right:24px;
  width:62px;height:62px;
  display:grid;
  place-items:center;
  color:var(--skill-accent);
  font-family:inherit;
  font-size:25px;
  transition:color .3s,transform .35s;
}
.skill-card-icon:before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid color-mix(in srgb,var(--skill-accent) 30%,transparent);
  border-radius:18px;
  transform:rotate(8deg);
  transition:transform .4s,border-color .3s;
}
.skill-card-icon:after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--skill-accent);
  top:-3px;right:7px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--skill-accent) 10%,transparent);
  animation:skillDotPulse 2.4s ease-in-out infinite;
}
.skill-icon-main{position:relative;z-index:2}
.skill-icon-orbit{
  position:absolute;
  inset:-5px;
  border:1px dashed color-mix(in srgb,var(--skill-accent) 28%,transparent);
  border-radius:50%;
  font-size:8px;
  display:grid;
  place-items:start center;
  color:var(--skill-accent);
  animation:skillIconSpin 7s linear infinite;
}
.skill-card-modern:hover .skill-card-icon{transform:rotate(-4deg) scale(1.08)}
.skill-card-modern:hover .skill-card-icon:before{transform:rotate(-8deg) scale(1.08);border-color:rgba(255,255,255,.45)}
.skill-card-modern h3{font-size:28px;margin:43px 0 20px;letter-spacing:-.045em}
.skill-chips-modern span{
  border-radius:999px;
  padding:8px 11px;
  background:rgba(255,255,255,.62);
  border-color:rgba(24,24,23,.10);
}
.skill-card-modern:hover .skill-card-index{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.skill-arrow{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--skill-accent) 25%,transparent);
  border-radius:50%;
  right:25px;bottom:22px;
  font-size:17px;
  background:rgba(255,255,255,.5);
}
.skill-card-modern:hover .skill-arrow{background:rgba(255,255,255,.16)}
@keyframes skillIconSpin{to{transform:rotate(360deg)}}
@keyframes skillDotPulse{0%,100%{transform:scale(.75);opacity:.65}50%{transform:scale(1.2);opacity:1}}
@media(max-width:600px){
  .skill-card-modern{border-radius:20px;padding:25px;min-height:225px}
  .skill-card-icon{width:54px;height:54px;right:20px;top:20px}
  .skill-card-modern h3{font-size:25px;margin-top:38px}
}

/* Skills hover: keep the card fully visible and readable; no fade-out effect. */
.skill-card-modern:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,242,238,.92));
  color:var(--ink);
  border-color:var(--skill-accent);
  box-shadow:0 24px 55px rgba(24,24,23,.12);
}
.skill-card-modern:hover:before{
  transform:scale(1.12);
  opacity:.9;
}
.skill-card-modern:hover:after{
  transform:translateX(-130%);
}
.skill-card-modern:hover h3,
.skill-card-modern:hover .skill-card-icon,
.skill-card-modern:hover .skill-card-index{
  color:var(--skill-accent);
}
.skill-card-modern:hover .skill-chips-modern span{
  background:rgba(255,255,255,.72);
  color:inherit;
  border-color:rgba(24,24,23,.10);
}
.skill-card-modern:hover .skill-arrow{
  background:rgba(255,255,255,.65);
  color:var(--skill-accent);
}

/* EXPERIENCE — card 02: Python / Django spotlight */
.experience-reference-item:nth-child(2){
  position:relative;
  overflow:hidden;
  padding:28px 30px 30px 0;
  border:1px solid rgba(141,17,19,.16);
  background:linear-gradient(115deg,rgba(141,17,19,.045),rgba(255,255,255,.62) 48%,rgba(141,17,19,.018));
  box-shadow:0 12px 38px rgba(24,24,23,.055);
  transition:transform .4s cubic-bezier(.2,.75,.2,1),box-shadow .4s,border-color .4s;
}
.experience-reference-item:nth-child(2)::before{
  content:"PYTHON  /  DJANGO";
  position:absolute;
  top:16px;
  right:22px;
  padding:6px 9px;
  border:1px solid rgba(141,17,19,.2);
  border-radius:999px;
  color:var(--red);
  background:rgba(255,255,255,.72);
  font-size:7px;
  letter-spacing:.14em;
  font-weight:700;
}
.experience-reference-item:nth-child(2)::after{
  content:"02";
  position:absolute;
  right:-8px;
  bottom:-35px;
  font:120px/1 var(--serif);
  color:rgba(141,17,19,.045);
  pointer-events:none;
}
.experience-reference-item:nth-child(2) .experience-date{
  position:relative;
  z-index:2;
  padding-left:18px;
  border-left:2px solid var(--red);
  color:var(--red);
}
.experience-reference-item:nth-child(2) .experience-content{position:relative;z-index:2}
.experience-reference-item:nth-child(2) .experience-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  letter-spacing:.14em;
}
.experience-reference-item:nth-child(2) .experience-content h2{
  position:relative;
  padding-right:160px;
}
.experience-reference-item:nth-child(2) .experience-content h2::after{
  content:"PY";
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(141,17,19,.24);
  border-radius:16px;
  background:rgba(141,17,19,.06);
  color:var(--red);
  font:700 18px/1 var(--sans);
  letter-spacing:-.04em;
}
.experience-reference-item:nth-child(2):hover{
  transform:translateX(8px) translateY(-3px);
  border-color:rgba(141,17,19,.35);
  box-shadow:0 22px 55px rgba(24,24,23,.10);
}
.experience-reference-item:nth-child(2):hover .experience-content h2::after{
  transform:translateY(-50%) rotate(8deg) scale(1.05);
}
@media(max-width:600px){
  .experience-reference-item:nth-child(2){padding:24px 18px 25px 0}
  .experience-reference-item:nth-child(2)::before{top:12px;right:12px;font-size:6px}
  .experience-reference-item:nth-child(2) .experience-content h2{padding-right:0}
  .experience-reference-item:nth-child(2) .experience-content h2::after{display:none}
  .experience-reference-item:nth-child(2):hover{transform:translateY(-3px)}
}
/* Three-internship experience treatment */
.experience-list{gap:22px}
.experience-reference-item{position:relative;overflow:hidden}
.experience-reference-item::after{content:"";position:absolute;right:-45px;top:-45px;width:140px;height:140px;border:1px solid rgba(255,70,70,.22);border-radius:50%;pointer-events:none}
.experience-merm{--exp-accent:#e83b3b}
.experience-python{--exp-accent:#ff5a36}
.experience-infotech{--exp-accent:#d9272e}
.experience-reference-item .experience-label{color:var(--exp-accent);font-weight:800;letter-spacing:.08em}
.experience-reference-item h4{color:var(--exp-accent)}
.experience-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.experience-tags span{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);padding:6px 10px;border-radius:999px;font-size:.72rem;letter-spacing:.04em;transition:.25s ease}
.experience-reference-item:hover .experience-tags span{border-color:color-mix(in srgb,var(--exp-accent) 55%, transparent);transform:translateY(-1px)}
@media(max-width:700px){.experience-tags{gap:6px}.experience-tags span{font-size:.68rem}}

/* Unified animated visuals for all internship cards */
.experience-reference-item .experience-content h2{
  position:relative;
  min-height:62px;
}
.experience-reference-item .experience-content h2::after{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font:700 15px/1 var(--sans);
  letter-spacing:-.04em;
  color:var(--exp-accent);
  border:1px solid color-mix(in srgb,var(--exp-accent) 40%, transparent);
  background:linear-gradient(145deg, color-mix(in srgb,var(--exp-accent) 10%, transparent), rgba(255,255,255,.025));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 28px rgba(0,0,0,.08);
  animation:expFloat 3.6s ease-in-out infinite;
  pointer-events:none;
}
.experience-merm .experience-content h2::after{content:"MERN"; animation-delay:-.6s}
.experience-python .experience-content h2::after{content:"PY"; animation-delay:-1.2s}
.experience-infotech .experience-content h2::after{content:"DEV"; animation-delay:-1.8s}
.experience-reference-item .experience-content h2::before{
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:36px;
  height:36px;
  border:1px dashed color-mix(in srgb,var(--exp-accent) 40%, transparent);
  border-radius:50%;
  transform:translateY(-50%);
  animation:expSpin 8s linear infinite;
  pointer-events:none;
  z-index:0;
}
.experience-reference-item .experience-content h2::after{z-index:1}
.experience-reference-item:hover .experience-content h2::after{
  transform:translateY(-50%) rotate(7deg) scale(1.06);
  box-shadow:0 16px 34px color-mix(in srgb,var(--exp-accent) 20%, transparent);
}
.experience-reference-item:hover .experience-content h2::before{animation-duration:3s}
.experience-reference-item:hover{transform:translateX(8px) translateY(-3px); border-color:color-mix(in srgb,var(--exp-accent) 38%, transparent)}
@keyframes expFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes expSpin{to{rotate:360deg}}
@media(max-width:600px){
  .experience-reference-item .experience-content h2{min-height:0;padding-right:0}
  .experience-reference-item .experience-content h2::after,
  .experience-reference-item .experience-content h2::before{display:none}
  .experience-reference-item:hover{transform:translateY(-3px)}
}

/* FINAL EXPERIENCE ALIGNMENT — keep all three internship rows identical */
.experience-reference-item:nth-child(2){
  grid-template-columns:24% 76%;
  min-height:330px;
  padding:48px 0 58px;
  border:0;
  border-bottom:1px solid var(--line);
  border-left:0;
  border-right:0;
  border-top:0;
  background:linear-gradient(var(--red),var(--red)) left bottom / 0 1px no-repeat;
  box-shadow:none;
  transform:none;
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1),
    background-size .65s cubic-bezier(.2,.7,.2,1);
}
.experience-reference-item:nth-child(2)::before{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  top:auto;
  bottom:-1px;
  width:0;
  height:1px;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--red);
  color:inherit;
  box-shadow:none;
  transition:width .7s cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}
.experience-reference-item:nth-child(2)::after{
  content:"↗";
  position:absolute;
  right:4px;
  top:47px;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  padding:0;
  color:var(--red);
  background:none;
  font-size:18px;
  opacity:0;
  transform:translate(-8px,8px);
  transition:opacity .3s, transform .35s;
  box-shadow:none;
  pointer-events:none;
}
.experience-reference-item:nth-child(2):hover{
  transform:translateX(8px) translateY(-3px);
  border-color:transparent;
  box-shadow:none;
  background-size:100% 1px;
}
.experience-reference-item:nth-child(2):hover::after{
  opacity:1;
  transform:none;
}
.experience-reference-item:nth-child(2) .experience-date{
  position:static;
  z-index:auto;
  padding-top:7px;
  padding-left:0;
  padding-right:28px;
  border-left:0;
  text-align:right;
  color:var(--muted);
}
.experience-reference-item:nth-child(2) .experience-content{
  position:static;
  z-index:auto;
  max-width:1000px;
  padding-left:0;
}
.experience-reference-item:nth-child(2) .experience-label{
  display:block;
  padding:0;
  border-radius:0;
  background:none;
  color:var(--exp-accent);
  letter-spacing:.22em;
}
.experience-reference-item:nth-child(2) .experience-content h2{
  padding-right:0;
}

@media(max-width:760px){
  .experience-reference-item:nth-child(2){
    grid-template-columns:1fr;
    min-height:0;
    padding:30px 0 38px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(var(--red),var(--red)) left bottom / 0 1px no-repeat;
  }
  .experience-reference-item:nth-child(2) .experience-date{
    padding:0;
    text-align:left;
  }
  .experience-reference-item:nth-child(2) .experience-content h2{
    padding-right:0;
  }
  .experience-reference-item:nth-child(2):hover{
    transform:translateY(-3px);
  }
  .experience-reference-item:nth-child(2)::after{
    right:0;
    top:30px;
  }
}

/* FINAL: align the Experience section number/label with the other section headings. */
@media(min-width:1100px){
  .experience-reference .section-head{
    margin-left:7vw;
    margin-right:7vw;
  }
}
@media(max-width:1099px){
  .experience-reference .section-head{
    margin-left:6vw;
    margin-right:6vw;
  }
}

/* Premium animated navigation */
.header nav{
  gap:4px;
  padding:7px;
  border:1px solid rgba(24,24,23,.14);
  border-radius:999px;
  background:rgba(243,242,238,.72);
  box-shadow:0 12px 30px rgba(24,24,23,.08), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  animation:navFloatIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.header nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  color:var(--ink);
  font-size:9px;
  letter-spacing:.12em;
  overflow:hidden;
  isolation:isolate;
  transition:color .28s ease, transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.header nav a::before{
  content:"";
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  border:1px solid rgba(141,17,19,.23);
  border-radius:50%;
  color:var(--red);
  font:700 7px/1 var(--sans);
  letter-spacing:0;
  transition:transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
}
.header nav a:nth-child(1)::before{content:"01"}
.header nav a:nth-child(2)::before{content:"02"}
.header nav a:nth-child(3)::before{content:"03"}
.header nav a:nth-child(4)::before{content:"04"}
.header nav a:nth-child(5)::before{content:"05"}
.header nav a:nth-child(6)::before{content:"06"}
.header nav a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 76%);
  transform:translateX(-140%);
  transition:transform .65s ease;
}
.header nav a:hover{
  color:var(--red);
  background:rgba(141,17,19,.06);
  transform:translateY(-2px);
  box-shadow:0 7px 16px rgba(141,17,19,.08);
}
.header nav a:hover::before{
  transform:rotate(18deg) scale(1.06);
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.header nav a:hover::after{transform:translateX(140%)}
.header nav a.active{
  color:#fff;
  background:var(--red);
  box-shadow:0 9px 22px rgba(141,17,19,.22);
}
.header nav a.active::before{
  background:#fff;
  color:var(--red);
  border-color:#fff;
  transform:rotate(-8deg);
}
.header nav a.active::after{display:none}
.header nav a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

@keyframes navFloatIn{
  from{opacity:0;transform:translateY(-16px) scale(.96)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .header nav{
    gap:10px;
    padding:18px;
    border-radius:24px;
    background:rgba(243,242,238,.96);
    box-shadow:0 18px 40px rgba(24,24,23,.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .header nav a{min-height:38px;padding:0 14px}
}

/* FINAL RESPONSIVE SYSTEM — mobile / tablet / desktop */
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}
button,a{touch-action:manipulation}
.section,.hero{width:100%;box-sizing:border-box}

@media (min-width:1101px){
  .header{padding-inline:5.5vw}
  .header nav{max-width:calc(100vw - 260px)}
  .section{padding-inline:7vw}
  .intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .experience-list{max-width:1120px;margin-inline:auto}
  .project-grid-enhanced{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skill-grid-modern{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (min-width:701px) and (max-width:1100px){
  .header{height:74px;padding:0 5vw}
  .header nav{gap:2px;max-width:70vw}
  .header nav a{padding:0 9px;font-size:8px}
  .header nav a::before{width:15px;height:15px}
  .menu{display:none}
  .section{padding:100px 6vw}
  .section-head{font-size:10px}
  .intro-grid{grid-template-columns:1fr 1fr;gap:6vw;margin-top:55px}
  .big-copy{font-size:clamp(42px,6vw,64px)}
  .experience-reference .section-head{margin-inline:0}
  .experience-reference-item{grid-template-columns:24% 76%;padding:38px 0}
  .experience-reference-item .experience-content h2{font-size:clamp(28px,3.8vw,40px)}
  .project-intro{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end}
  .project-intro h2{font-size:clamp(46px,6vw,70px)}
  .feature-body{grid-template-columns:1fr 1fr}
  .project-grid-enhanced{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skill-hero{grid-template-columns:1fr 1fr;gap:5vw}
  .skill-hero h2{font-size:clamp(50px,7vw,76px)}
  .coding-stack-panel{min-height:360px}
  .skill-grid-modern{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skill-card-modern:last-child{grid-column:1 / -1}
  .cert-intro{grid-template-columns:1fr 1fr;gap:30px}
  .cert-grid-modern{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cert-card-featured{grid-column:auto}
  .education-layout{grid-template-columns:1.2fr .8fr;gap:5vw}
  .contact-shell{padding:70px 52px 55px;border-radius:36px}
  .contact h2{font-size:clamp(54px,7vw,84px)}
  .contact-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer{padding-inline:6vw}
}

@media (max-width:900px){
  .header nav{
    width:min(92vw,360px);
    max-width:none;
    right:4vw;
    top:82px;
    box-sizing:border-box;
  }
  .header nav a{width:100%;box-sizing:border-box;justify-content:flex-start}
  .developer-hero{min-height:1040px}
  .developer-copy{right:6vw}
  .developer-workspace{max-width:calc(100vw - 12vw)}
  .developer-workspace .editor-window{max-width:100%}
  .editor-body{overflow:hidden}
  .code-lines{overflow:hidden}
  .dev-stack-line{max-width:100%}
}

@media (max-width:700px){
  .header{height:68px;padding:0 5vw}
  .logo{font-size:14px}
  .menu{display:block;position:relative;z-index:60;padding:8px;margin-right:-8px}
  .header nav{top:76px;right:5vw;width:min(90vw,340px);padding:14px;border-radius:22px}
  .header nav a{min-height:42px;padding:0 13px;font-size:8px}
  .header nav a::before{width:16px;height:16px;font-size:6px}

  .developer-hero{min-height:1040px;padding-top:95px}
  .developer-hero:after{left:auto;right:7%}
  .developer-hero .hero-top{left:5vw;right:5vw;top:22px}
  .developer-copy{left:5vw;right:5vw;top:11%;width:auto}
  .developer-copy h1{font-size:clamp(58px,16vw,74px);line-height:.76;letter-spacing:-.06em}
  .dev-kicker{font-size:7px;letter-spacing:.16em}
  .dev-role{font-size:17px;line-height:1.15;margin-top:20px}
  .dev-description{font-size:10.5px;line-height:1.65;max-width:330px}
  .dev-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,340px)}
  .dev-btn{min-width:0;width:100%;box-sizing:border-box;padding:8px 8px 8px 10px;gap:7px;font-size:7px}
  .dev-btn span,.resume-arrow{width:24px!important;height:24px!important;font-size:12px!important}
  .dev-btn-resume{grid-column:1 / -1;justify-content:center}
  .resume-mark{min-width:30px!important;height:23px!important;padding:0 6px!important;font-size:6.5px!important}
  .dev-stack-line{gap:6px;margin-top:20px;padding-top:11px;font-size:6.5px;line-height:1.6}
  .developer-workspace{left:5vw;top:43%;width:min(285px,80vw);transform:none}
  .developer-workspace:hover{transform:translateY(-3px)}
  .editor-topbar{height:32px;padding-inline:9px;font-size:6px}
  .editor-body{grid-template-columns:25px 1fr;min-height:180px;padding:10px 7px}
  .line-numbers{font-size:6px;padding-right:7px}
  .code-lines{font-size:6.7px;line-height:2}
  .editor-status{font-size:6px;padding:7px 9px}
  .developer-portrait{width:245px;height:345px;right:-16px;bottom:45px}
  .portrait-panel{width:245px;height:282px}
  .portrait-accent{width:223px;height:260px}
  .portrait-caption{right:2%;bottom:11%;font-size:6px}
  .portrait-caption span{font-size:13px}
  .tf-react,.tf-python,.tf-db,.terminal-card{display:none}
  .dev-bottom{left:5vw;right:5vw;bottom:13px;gap:12px}
  .dev-bottom span{font-size:5.7px;letter-spacing:.12em}
  .dev-bottom span:nth-child(2),.dev-bottom span:nth-child(3){display:none}

  .section{padding:76px 5vw}
  .section-head{gap:12px;font-size:8px;letter-spacing:.16em}
  .section-head span{font-size:15px}
  .intro-grid{grid-template-columns:1fr;gap:34px;margin-top:45px}
  .big-copy{font-size:clamp(42px,12vw,58px);line-height:.94}
  .text{font-size:12px;line-height:1.75}

  .experience-reference{padding-top:80px}
  .experience-list{gap:0;margin-top:42px}
  .experience-reference-item,
  .experience-reference-item:nth-child(2){grid-template-columns:1fr;min-height:0;padding:30px 0 34px}
  .experience-reference-item .experience-date,
  .experience-reference-item:nth-child(2) .experience-date{padding:0;text-align:left;font-size:7px;line-height:1.5}
  .experience-reference-item .experience-content h2{min-height:0;font-size:clamp(25px,7vw,34px);padding-right:0;margin-top:8px}
  .experience-reference-item .experience-content h2::after,
  .experience-reference-item .experience-content h2::before{display:none}
  .experience-reference-item .experience-content h4{font-size:15px}
  .experience-reference-item .experience-content>p{font-size:11px;line-height:1.68}
  .experience-tags{gap:5px;margin-top:14px}
  .experience-tags span{font-size:6.5px;padding:6px 8px}
  .experience-reference-item:hover,
  .experience-reference-item:nth-child(2):hover{transform:translateY(-2px)}

  .project-intro{display:block;margin-top:46px}
  .project-intro h2{font-size:clamp(46px,12vw,60px)}
  .project-intro>p{font-size:11px;line-height:1.7;margin-top:19px;max-width:340px}
  .project-grid-enhanced{grid-template-columns:1fr;gap:10px}
  .project-enhanced{min-height:520px;padding:22px}
  .project-enhanced .project-copy h3{font-size:26px}
  .feature-body{grid-template-columns:1fr}
  .feature-body h3{font-size:clamp(45px,12vw,58px)}
  .project-visual{max-width:100%;overflow:hidden}
  .project-view-btn{font-size:7px}
  .safa-project{padding:22px}
  .safa-project-head{grid-template-columns:1fr;gap:18px}
  .safa-project-head h3{font-size:38px}
  .safa-preview{min-height:240px}
  .safa-columns,.safa-columns-bottom{grid-template-columns:1fr!important}
  .safa-panel{padding:20px}
  .safa-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .safa-btn{justify-content:center;width:100%;box-sizing:border-box}

  .skills-modern{padding-inline:5vw}
  .skill-hero{grid-template-columns:1fr;gap:24px;margin-top:44px}
  .skill-hero h2{font-size:clamp(48px,13vw,64px)}
  .skill-lead{font-size:11px;line-height:1.7;max-width:330px}
  .coding-stack-panel{min-height:310px;width:100%;overflow:hidden}
  .skills-orbit-one{width:420px;height:420px;right:-270px}
  .skills-orbit-two{width:310px;height:310px;left:-205px}
  .skill-grid-modern{grid-template-columns:1fr;gap:10px}
  .skill-card-modern{min-height:220px;padding:23px;border-radius:20px}
  .skill-card-modern h3{font-size:24px}
  .skill-marquee{margin-left:-5vw;margin-right:-5vw}

  .cert-intro{grid-template-columns:1fr;gap:28px;margin-top:42px}
  .cert-intro h2{font-size:clamp(44px,11vw,58px)}
  .cert-console{width:100%;overflow:hidden}
  .cert-console-line{grid-template-columns:22px minmax(0,1fr) auto;gap:7px;padding:10px 11px;font-size:8px}
  .cert-grid-modern{grid-template-columns:1fr;gap:10px}
  .cert-card-modern{min-height:0;padding:18px}
  .cert-card-foot{align-items:center;flex-direction:row;flex-wrap:wrap}
  .cert-view-btn{font-size:8px;padding:8px 10px}
  .cert-preview-wrap{max-height:none}

  .education-layout{grid-template-columns:1fr;gap:32px;margin-top:45px}
  .education h2{font-size:clamp(42px,11vw,56px);line-height:.95}
  .edu-animation{width:190px;height:190px;margin:0 auto}

  .contact{padding:58px 5vw 30px;min-height:0}
  .contact-shell{padding:42px 20px 24px;border-radius:24px}
  .contact-topline{font-size:8px}
  .contact-content{margin-top:42px}
  .contact h2{font-size:clamp(48px,13vw,66px);line-height:.9}
  .mail{font-size:clamp(20px,6.5vw,29px);line-height:1.2}
  .contact-links{grid-template-columns:1fr;gap:10px;margin-top:38px}
  .contact-card{min-height:84px;padding:18px 18px;border-radius:16px}
  .contact-card-value{font-size:13px}

  footer{padding:18px 5vw;flex-direction:column;align-items:flex-start;gap:7px}

  .project-modal{padding:0}
  .project-modal-card{width:100%;max-width:none;height:100%;max-height:100%;border:0}
  .modal-content{padding:38px 18px 22px}
  .modal-title{font-size:clamp(42px,12vw,58px)}
  .modal-description{font-size:11px;line-height:1.7}
  .property-demo{padding:10px;gap:8px}

  .certificate-modal{padding:0}
  .certificate-modal-panel{width:100%;height:100%;max-height:100vh;border-radius:0}
  .certificate-modal-head h2{font-size:24px}
  .certificate-modal-meta{font-size:10px;gap:7px 12px}
}

@media (max-width:380px){
  .developer-hero{min-height:1010px}
  .developer-copy h1{font-size:58px}
  .dev-description{max-width:290px}
  .dev-actions{width:100%}
  .developer-workspace{width:270px}
  .developer-portrait{width:225px;height:320px;right:-15px}
  .portrait-panel{width:225px;height:260px}
  .portrait-accent{width:205px;height:240px}
  .hero-right-portrait,.hero-portrait-frame{max-width:88vw}
  .contact-card-value{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}


/* MOBILE ONLY — keep the About section in normal document flow and prevent the mobile menu from visually locking over it. */
@media (max-width: 900px){
  #about{position:relative;top:auto;transform:none;}
  #about .section-head,#about .intro-grid{position:relative;}
}

/* SAFA BAKES — final mobile-only dashboard fit override
   Desktop and tablet layouts remain unchanged. */
@media (max-width: 600px){
  .safa-dashboard-preview{
    width:100%;
    margin:20px 0 26px;
    padding:0;
    overflow:visible;
    min-height:0;
  }
  .safa-dashboard{
    display:block;
    width:100%;
    min-width:0;
    min-height:0;
    overflow:hidden;
  }
  .safa-dashboard-sidebar{
    width:100%;
    height:54px;
    min-height:54px;
    box-sizing:border-box;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .safa-dashboard-sidebar::-webkit-scrollbar{display:none}
  .safa-brand{
    width:78px;
    height:40px;
    flex:0 0 78px;
    margin:0 6px 0 0;
  }
  .safa-side-item{
    flex:0 0 auto;
    width:auto;
    min-height:34px;
    white-space:nowrap;
    padding:8px 10px;
    font-size:6.5px;
    border-radius:5px;
  }
  .safa-side-item span{display:none}
  .safa-dashboard-main{
    width:100%;
    min-width:0;
    padding:13px;
    overflow:hidden;
  }
  .safa-dashboard-header{
    margin-bottom:12px;
    gap:10px;
  }
  .safa-dashboard-header h4{
    font-size:13px;
    line-height:1.2;
  }
  .safa-mini-label{font-size:5px}
  .safa-header-actions{gap:7px}
  .safa-header-actions .safa-date{display:none}
  .safa-avatar{width:26px;height:26px;font-size:8px}

  .safa-stat-grid{
    grid-template-columns:1fr;
    gap:7px;
    margin-bottom:8px;
  }
  .safa-stat-card{
    min-width:0;
    padding:11px;
    border-radius:6px;
  }
  .safa-stat-card span,.safa-stat-card small{font-size:6px}
  .safa-stat-card strong{font-size:16px;margin:6px 0 3px}

  .safa-dashboard-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .safa-panel-ui{min-width:0;border-radius:6px}
  .safa-panel-ui-head{padding:10px 11px}
  .safa-panel-ui-head span{font-size:5px}
  .safa-panel-ui-head strong{font-size:8px}

  .safa-chart{
    height:155px;
    padding:11px 10px 9px 5px;
  }
  .chart-y{width:28px;font-size:5px}
  .chart-area svg{height:118px}
  .chart-grid-line{margin-bottom:34px}

  .top-products-panel{display:block;min-height:0}
  .safa-product-row{grid-template-columns:20px 1fr auto;padding:10px 11px;gap:7px}
  .safa-product-row i{font-size:7px}
  .safa-product-row strong{font-size:7px}
  .safa-product-row small{font-size:5px}
  .safa-product-row b{font-size:7px}

  .recent-panel{display:block;margin-top:8px}
  .safa-sales-table>div{
    grid-template-columns:1fr auto;
    gap:5px 8px;
    padding:9px 11px;
    font-size:6.5px;
  }
  .safa-sales-table .safa-table-head{display:none}
  .safa-sales-table>div:not(.safa-table-head) > span:nth-of-type(1)::before{content:"Route · "}
  .safa-sales-table>div:not(.safa-table-head) > span:nth-of-type(2)::before{content:"Items · "}
  .safa-sales-table>div:not(.safa-table-head) > b::before{content:"Amount · "}
  .safa-sales-table strong{font-size:7px}
  .safa-sales-table em{font-size:5px;justify-self:end}

  .safa-preview-caption{
    position:static;
    display:block;
    padding:8px 10px 9px;
    font-size:4.5px;
    text-align:right;
    background:#deddd8;
  }
}


/* Final mobile/laptop skills + SAFA link touch fixes */
.skill-grid-modern{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.safa-project .safa-actions .safa-btn{
  position:relative;
  z-index:50;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(141,17,19,.14);
}

@media (max-width:1099px) and (min-width:761px){
  .skill-grid-modern{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .skill-grid-modern{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }
  .skill-card-modern,
  .skill-card-modern.skill-card-wide{
    grid-column:auto;
    width:100%;
    box-sizing:border-box;
  }
  .safa-project .safa-actions{
    position:relative;
    z-index:60;
  }
  .safa-project .safa-actions .safa-btn{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* ================== GLOBAL MOTION PASS ==================
   Adds subtle motion across the portfolio without changing layout.
   Existing responsive breakpoints remain in control of sizing/placement. */
:root{--motion-ease:cubic-bezier(.2,.75,.2,1)}
@keyframes pageLoadUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
@keyframes softFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes borderPulse{0%,100%{box-shadow:0 0 0 0 rgba(141,17,19,0)}50%{box-shadow:0 0 0 7px rgba(141,17,19,.05)}}
@keyframes shineSweep{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

.motion-ready .hero .hero-top,
.motion-ready .hero .developer-copy,
.motion-ready .hero .developer-workspace,
.motion-ready .hero .developer-portrait,
.motion-ready .hero .dev-actions,
.motion-ready .hero .dev-stack-line{animation:pageLoadUp .8s var(--motion-ease) both}
.motion-ready .hero .hero-top{animation-delay:.05s}
.motion-ready .hero .developer-copy{animation-delay:.15s}
.motion-ready .hero .developer-workspace{animation-delay:.25s}
.motion-ready .hero .developer-portrait{animation-delay:.35s}
.motion-ready .hero .dev-actions{animation-delay:.45s}
.motion-ready .hero .dev-stack-line{animation-delay:.55s}

.motion-ready .header .logo{animation:pageLoadUp .65s var(--motion-ease) both}
.motion-ready .header .menu{animation:pageLoadUp .65s var(--motion-ease) .08s both}
.motion-ready .header nav a{animation:pageLoadUp .55s var(--motion-ease) both}
.motion-ready .header nav a:nth-child(1){animation-delay:.08s}.motion-ready .header nav a:nth-child(2){animation-delay:.13s}
.motion-ready .header nav a:nth-child(3){animation-delay:.18s}.motion-ready .header nav a:nth-child(4){animation-delay:.23s}
.motion-ready .header nav a:nth-child(5){animation-delay:.28s}.motion-ready .header nav a:nth-child(6){animation-delay:.33s}

/* Section headings get a small line-and-label entrance. */
.motion-target{opacity:0;transform:translateY(22px);transition:opacity .75s var(--motion-ease),transform .75s var(--motion-ease)}
.motion-target.is-motion-in{opacity:1;transform:none}
.section-head.motion-target{transform:translateX(-14px)}
.section-head.motion-target.is-motion-in{transform:none}

/* Broad component motion. */
.motion-target.skill-card-modern,
.motion-target.project-enhanced,
.motion-target.cert-card-modern,
.motion-target.experience-reference-item,
.motion-target.safa-panel,
.motion-target.contact-card,
.motion-target.project-feature{will-change:transform,opacity}

.skill-card-modern,
.project-enhanced,
.cert-card-modern,
.experience-reference-item,
.safa-panel,
.contact-card,
.project-feature{
  transition:transform .35s var(--motion-ease), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
.skill-card-modern:hover,
.project-enhanced:hover,
.cert-card-modern:hover,
.experience-reference-item:hover,
.safa-panel:hover,
.project-feature:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(24,24,23,.08);
}

/* Animated red sweep on major interactive buttons. */
.dev-btn,
.project-view-btn,
.safa-btn,
.cert-view-btn,
.round-cta,
.resume-arrow{position:relative;overflow:hidden}
.dev-btn::after,
.project-view-btn::after,
.safa-btn::after,
.cert-view-btn::after,
.round-cta::after,
.resume-arrow::after{
  content:"";position:absolute;inset:-20%;
  background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.28) 50%,transparent 66%);
  transform:translateX(-130%) rotate(8deg);pointer-events:none;
}
.dev-btn:hover::after,
.project-view-btn:hover::after,
.safa-btn:hover::after,
.cert-view-btn:hover::after,
.round-cta:hover::after,
.resume-arrow:hover::after{animation:shineSweep .7s ease both}

/* Skills get subtle living motion while staying fully readable. */
.skill-card-modern .skill-card-icon{animation:softFloat 4.5s ease-in-out infinite}
.skill-card-modern:nth-child(2) .skill-card-icon{animation-delay:-.8s}
.skill-card-modern:nth-child(3) .skill-card-icon{animation-delay:-1.4s}
.skill-card-modern:nth-child(4) .skill-card-icon{animation-delay:-2s}
.skill-card-modern:nth-child(5) .skill-card-icon{animation-delay:-2.6s}

/* Certification and project visuals breathe slightly. */
.cert-preview-glow{animation:softFloat 5.5s ease-in-out infinite}
.project-bg-orbit{animation:skillsSpin 22s linear infinite}
.safa-preview:before{animation:skillsSpin 28s linear infinite}
.safa-preview:after{animation:skillsSpin 20s linear reverse infinite}

/* Contact cards pulse their border very gently on entry. */
.contact-card.is-motion-in{animation:borderPulse 2.8s ease-in-out .55s 1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .motion-target{opacity:1!important;transform:none!important}
}


/* EXPERIENCE — animated tech visuals, preserving the editorial layout */
.experience-reference-item{isolation:isolate;}
.experience-tech-orbit{
  position:absolute;
  right:5.5%;
  top:50%;
  width:148px;
  height:148px;
  transform:translate(var(--mx,0),calc(-50% + var(--my,0)));
  pointer-events:none;
  z-index:2;
  opacity:0;
  filter:drop-shadow(0 14px 28px rgba(20,16,14,.08));
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.experience-reference-item.reveal-visible .experience-tech-orbit,
.experience-reference-item.is-inview .experience-tech-orbit{
  opacity:1;
}
.exp-orbit{
  position:absolute;
  inset:12px;
  border:1px solid rgba(141,17,19,.22);
  border-radius:50%;
}
.exp-orbit-a{transform:rotate(28deg) scaleY(.58);animation:expOrbitSpin 8s linear infinite;}
.exp-orbit-b{transform:rotate(-48deg) scaleY(.58);animation:expOrbitSpinReverse 10s linear infinite;}
.exp-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#fff,#f3e8e5);
  color:var(--red);font:800 11px/1 var(--sans);letter-spacing:.12em;
  border:1px solid rgba(141,17,19,.2);
  box-shadow:0 12px 28px rgba(141,17,19,.12),0 0 0 7px rgba(141,17,19,.035);
  animation:expCoreFloat 3.4s ease-in-out infinite;
}
.exp-node{
  position:absolute;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--red);
  border:1px solid rgba(141,17,19,.22);
  box-shadow:0 7px 18px rgba(20,16,14,.1);
  font:700 7px/1 var(--sans);letter-spacing:.05em;
  animation:expNodeFloat 3s ease-in-out infinite;
}
.exp-node-one{top:5px;left:59px;animation-delay:.15s}
.exp-node-two{right:6px;top:60px;animation-delay:.7s}
.exp-node-three{left:10px;bottom:12px;animation-delay:1.15s}
.experience-reference-item:hover .experience-tech-orbit{transform:translate(5px,calc(-50% - 4px)) scale(1.03)}
.experience-reference-item:hover .exp-orbit-a{animation-duration:5s}
.experience-reference-item:hover .exp-orbit-b{animation-duration:6s}
@keyframes expOrbitSpin{to{transform:rotate(388deg) scaleY(.58)}}
@keyframes expOrbitSpinReverse{to{transform:rotate(-408deg) scaleY(.58)}}
@keyframes expCoreFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-7px)}}
@keyframes expNodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.auction-detail-panel{max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);transition:max-height .55s ease,opacity .35s ease,transform .35s ease}
.auction-detail-panel.is-open{max-height:260px;opacity:1;transform:none}

@media(max-width:760px){
  .experience-tech-orbit{position:relative;right:auto;top:auto;width:108px;height:108px;margin:10px 0 0 auto;transform:translate(var(--mx,0),var(--my,0)) scale(.92);}
  .experience-reference-item:hover .experience-tech-orbit{transform:translate(var(--mx,0),var(--my,0)) scale(.96)}
  .exp-core{width:46px;height:46px;border-radius:14px;font-size:9px}
  .exp-node{width:24px;height:24px;font-size:6px}
  .exp-node-one{top:4px;left:42px}.exp-node-two{right:4px;top:42px}.exp-node-three{left:6px;bottom:8px}
  .exp-orbit{inset:8px}
}
@media(prefers-reduced-motion:reduce){
  .exp-orbit-a,.exp-orbit-b,.exp-core,.exp-node{animation:none!important}
}

/* EDUCATION — stronger visible motion treatment */
.edu-animation{animation:eduSystemFloat 5.5s ease-in-out infinite;will-change:transform,filter}
.edu-animation:after{
  content:"";position:absolute;inset:10px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 48%,rgba(255,255,255,.16) 51%,transparent 54% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 58%,#000 60% 61%,transparent 63%);
  mask:radial-gradient(circle,transparent 0 58%,#000 60% 61%,transparent 63%);
  animation:eduHaloSpin 5s linear infinite;
  pointer-events:none;z-index:1;opacity:.75;
}
.edu-orbit-one{animation:eduOrbitMoveOne 6s linear infinite}
.edu-orbit-two{animation:eduOrbitMoveTwo 7s linear infinite}
.edu-core{animation:eduCoreFloat 2.6s ease-in-out infinite,eduCoreGlow 2.2s ease-in-out infinite}
.edu-node-one{animation:eduNodeOneMove 3.8s ease-in-out infinite}
.edu-node-two{animation:eduNodeTwoMove 4.4s ease-in-out infinite}
.edu-node-three{animation:eduNodeThreeMove 4.8s ease-in-out infinite}
@keyframes eduSystemFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  25%{transform:translate3d(3px,-7px,0) rotate(-1deg)}
  50%{transform:translate3d(0,-12px,0) rotate(1deg)}
  75%{transform:translate3d(-3px,-6px,0) rotate(-.5deg)}
}
@keyframes eduHaloSpin{to{transform:rotate(360deg)}}
@keyframes eduOrbitMoveOne{
  from{transform:rotate(-24deg) rotate(0deg) scale(1)}
  50%{transform:rotate(-24deg) rotate(180deg) scale(1.04)}
  to{transform:rotate(-24deg) rotate(360deg) scale(1)}
}
@keyframes eduOrbitMoveTwo{
  from{transform:rotate(66deg) rotate(360deg) scale(1)}
  50%{transform:rotate(66deg) rotate(180deg) scale(.96)}
  to{transform:rotate(66deg) rotate(0deg) scale(1)}
}
@keyframes eduCoreFloat{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-8px) rotate(2deg) scale(1.035)}
}
@keyframes eduCoreGlow{
  0%,100%{box-shadow:0 0 0 8px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.16)}
  50%{box-shadow:0 0 0 12px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.24)}
}
@keyframes eduNodeOneMove{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(11px,7px) scale(1.08)}
}
@keyframes eduNodeTwoMove{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-9px,-10px) scale(1.08)}
}
@keyframes eduNodeThreeMove{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(10px,-7px) scale(1.08)}
}
@media (max-width:700px){
  .edu-animation{animation-duration:5s}
}
@media (prefers-reduced-motion:reduce){
  .edu-animation,.edu-animation:after,.edu-orbit-one,.edu-orbit-two,.edu-core,.edu-node-one,.edu-node-two,.edu-node-three{animation:none!important}
}

/* MOBILE ONLY — navigation behavior fix.
   The navigation panel is never attached to the viewport. While open, the
   page is locked in place so the panel cannot follow the page underneath it. */
@media (max-width:700px){
  html.mobile-menu-lock,
  body.mobile-menu-lock{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  nav.mobile-nav-portal{
    position:absolute!important;
    top:auto;
    right:5vw;
    width:min(90vw,340px);
    max-width:none;
    box-sizing:border-box;
    z-index:1000;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    margin:0;
    border-radius:22px;
    background:rgba(243,242,238,.96);
    border:1px solid rgba(24,24,23,.14);
    box-shadow:0 18px 40px rgba(24,24,23,.12), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
  }
  nav.mobile-nav-portal a{
    width:100%;
    box-sizing:border-box;
    justify-content:flex-start;
    min-height:42px;
    padding:0 13px;
    font-size:8px;
  }
  nav.mobile-nav-portal a::before{width:16px;height:16px;font-size:6px;}
  nav.mobile-nav-portal.open{opacity:1;pointer-events:auto;transform:none;}
}

/* Mobile-only: place project buttons in normal document flow below the project copy. */
@media (max-width: 600px){
  .project-enhanced .project-view-btn{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin-top:24px !important;
    align-self:flex-start !important;
  }
}

/* MOBILE ONLY — vertical navigation presentation matching the reference. */
@media (max-width:700px){
  nav.mobile-nav-portal{
    width:calc(100vw - 32px)!important;
    max-width:none!important;
    right:16px!important;
    padding:14px 14px 18px!important;
    border-radius:34px!important;
    gap:6px!important;
    background:rgba(246,245,241,.98)!important;
    border:1px solid rgba(24,24,23,.13)!important;
    box-shadow:0 24px 60px rgba(24,24,23,.14), inset 0 1px 0 rgba(255,255,255,.78)!important;
    backdrop-filter:blur(20px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
  }

  nav.mobile-nav-portal a{
    width:100%!important;
    min-height:78px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:20px!important;
    padding:0 22px!important;
    border-radius:999px!important;
    font-size:10px!important;
    font-weight:500!important;
    letter-spacing:.18em!important;
    color:var(--ink)!important;
    background:transparent!important;
    transition:background .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease!important;
  }

  nav.mobile-nav-portal a::before{
    position:static!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(141,17,19,.28)!important;
    border-radius:50%!important;
    background:transparent!important;
    color:var(--red)!important;
    font-size:8px!important;
    letter-spacing:0!important;
    box-shadow:none!important;
  }

  nav.mobile-nav-portal a::after{display:none!important}

  nav.mobile-nav-portal a.active{
    color:#fff!important;
    background:var(--red)!important;
    box-shadow:0 16px 34px rgba(141,17,19,.22)!important;
    transform:none!important;
  }

  nav.mobile-nav-portal a.active::before{
    color:var(--red)!important;
    background:#fff!important;
    border-color:#fff!important;
  }

  nav.mobile-nav-portal a:hover{
    transform:translateX(2px)!important;
    background:rgba(141,17,19,.06)!important;
    color:var(--ink)!important;
  }

  nav.mobile-nav-portal a.active:hover{
    background:var(--red)!important;
    color:#fff!important;
  }

  nav.mobile-nav-portal.open a:nth-child(1){animation:mobileNavItemIn .42s ease .02s both}
  nav.mobile-nav-portal.open a:nth-child(2){animation:mobileNavItemIn .42s ease .07s both}
  nav.mobile-nav-portal.open a:nth-child(3){animation:mobileNavItemIn .42s ease .12s both}
  nav.mobile-nav-portal.open a:nth-child(4){animation:mobileNavItemIn .42s ease .17s both}
  nav.mobile-nav-portal.open a:nth-child(5){animation:mobileNavItemIn .42s ease .22s both}
  nav.mobile-nav-portal.open a:nth-child(6){animation:mobileNavItemIn .42s ease .27s both}
}

@keyframes mobileNavItemIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}


/* Mobile-only animated technology stack visual */
.mobile-tech-stack{
  display:none;
}

@media (max-width:700px){
  .mobile-tech-stack{
    display:block;
    position:absolute;
    left:5vw;
    bottom:62px;
    width:min(180px,42vw);
    height:250px;
    z-index:16;
    isolation:isolate;
    pointer-events:none;
  }
  .mobile-tech-stack::before{
    content:"";
    position:absolute;
    inset:10px 0 10px 0;
    border:1px solid rgba(141,17,19,.16);
    border-radius:28px;
    background:linear-gradient(145deg,rgba(243,242,238,.82),rgba(233,232,228,.35));
    box-shadow:0 16px 40px rgba(24,24,23,.06), inset 0 0 0 1px rgba(255,255,255,.45);
    backdrop-filter:blur(6px);
  }
  .mobile-tech-orbit{
    position:absolute;
    left:50%; top:50%;
    border:1px solid rgba(141,17,19,.24);
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-22deg);
  }
  .mobile-tech-orbit.orbit-1{
    width:134px;height:134px;
    animation:mobileTechSpin 12s linear infinite;
  }
  .mobile-tech-orbit.orbit-2{
    width:102px;height:166px;
    transform:translate(-50%,-50%) rotate(62deg);
    border-style:dashed;
    animation:mobileTechSpinReverse 9s linear infinite;
  }
  .mobile-tech-core{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:72px;height:72px;
    border-radius:22px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(243,242,238,.96);
    border:1px solid rgba(141,17,19,.22);
    box-shadow:0 14px 28px rgba(24,24,23,.12),0 0 0 7px rgba(141,17,19,.045);
    color:var(--red);
    animation:mobileTechFloat 3.2s ease-in-out infinite;
  }
  .mobile-tech-core span{font:700 22px/1 var(--sans);letter-spacing:-.12em}
  .mobile-tech-core small{font:700 6px/1 var(--sans);letter-spacing:.25em;margin-top:7px}
  .mobile-tech-chip{
    position:absolute;
    z-index:4;
    display:flex;align-items:center;justify-content:center;
    min-width:64px;height:26px;padding:0 9px;
    border-radius:999px;
    border:1px solid rgba(141,17,19,.28);
    background:rgba(243,242,238,.95);
    color:var(--red);
    font-size:6px;font-weight:700;letter-spacing:.16em;
    box-shadow:0 9px 20px rgba(24,24,23,.09);
    white-space:nowrap;
  }
  .chip-python{left:7px;top:30px;animation:mobileTechChip1 3.8s ease-in-out infinite}
  .chip-react{right:7px;top:74px;animation:mobileTechChip2 4.3s ease-in-out infinite}
  .chip-supabase{left:2px;bottom:56px;animation:mobileTechChip3 4.8s ease-in-out infinite}
  .chip-javascript{right:2px;bottom:22px;animation:mobileTechChip4 4.1s ease-in-out infinite}
  @keyframes mobileTechSpin{to{transform:translate(-50%,-50%) rotate(338deg)}}
  @keyframes mobileTechSpinReverse{to{transform:translate(-50%,-50%) rotate(-298deg)}}
  @keyframes mobileTechFloat{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(0)}50%{transform:translate(-50%,-50%) translateY(-6px) rotate(2deg)}}
  @keyframes mobileTechChip1{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-6px)}}
  @keyframes mobileTechChip2{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,7px)}}
  @keyframes mobileTechChip3{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,4px)}}
  @keyframes mobileTechChip4{0%,100%{transform:translate(0,0)}50%{transform:translate(-7px,-5px)}}
}

@media (max-width:520px){
  .mobile-tech-stack{width:165px;height:235px;bottom:58px}
  .mobile-tech-orbit.orbit-1{width:122px;height:122px}
  .mobile-tech-orbit.orbit-2{width:92px;height:150px}
  .mobile-tech-core{width:66px;height:66px}
  .mobile-tech-core span{font-size:20px}
  .mobile-tech-chip{min-width:58px;height:24px;font-size:5.6px}
}

/* MOBILE ONLY — compact horizontal navigation in the header */
@media (max-width:700px){
  .header{
    height:68px;
    padding:0 4vw;
    gap:10px;
  }
  .header .logo{
    flex:0 0 auto;
  }
  .header .menu{
    display:none!important;
  }
  .header nav{
    position:static!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    animation:none!important;
  }
  .header nav a,
  .header nav a.active,
  .header nav a:hover{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:0!important;
    height:auto!important;
    padding:4px 2px!important;
    margin:0!important;
    border-radius:0!important;
    display:block!important;
    font-size:6px!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    font-weight:600!important;
    color:var(--ink)!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    white-space:nowrap!important;
  }
  .header nav a::before,
  .header nav a::after{
    display:none!important;
    content:none!important;
  }
  .header nav a.active{
    color:var(--red)!important;
  }
  .header nav a.active::after{
    display:block!important;
    content:""!important;
    position:static!important;
    width:100%!important;
    height:1px!important;
    margin-top:3px!important;
    background:var(--red)!important;
    transform:none!important;
  }
}

/* SAFA BAKES dashboard — animated weekly performance graph */
@keyframes safaChartDraw {
  0% { stroke-dashoffset: 1100; opacity: .35; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  75% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -40; opacity: .9; }
}
@keyframes safaChartFill {
  0%, 100% { opacity: .45; transform: translateY(2px); }
  50% { opacity: .9; transform: translateY(0); }
}
@keyframes safaChartDot {
  0%, 100% { transform: scale(.88); opacity: .75; }
  50% { transform: scale(1.22); opacity: 1; }
}
.sales-chart-panel .chart-line {
  stroke-dasharray: 1060;
  stroke-dashoffset: 1100;
  animation: safaChartDraw 4.6s ease-in-out infinite;
  transform-origin: center;
}
.sales-chart-panel .chart-fill {
  transform-origin: center bottom;
  animation: safaChartFill 4.6s ease-in-out infinite;
}
.sales-chart-panel .chart-area circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: safaChartDot 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sales-chart-panel .chart-line,
  .sales-chart-panel .chart-fill,
  .sales-chart-panel .chart-area circle { animation: none; }
}