*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --dark:#0d0d0d;
  --dark-2:#161616;
  --dark-3:#1e1e1e;
  --dark-4:#252525;
  --accent:#c8f542;
  --white:#ffffff;
  --gray:#a0a0a0;
  --gray-2:#6a6a6a;
  --line:rgba(255,255,255,0.08);
  --serif:'Antic Didone',Georgia,serif;
  --sans:'Raleway',system-ui,sans-serif;
  --nav-h:68px;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--dark);color:var(--white);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── CUSTOM CURSOR ── */
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;mix-blend-mode:difference}
.cursor-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s,width .25s,height .25s}
.cursor-ring{width:36px;height:36px;border:1.5px solid rgba(200,245,66,.5);border-radius:50%;transform:translate(-50%,-50%);transition:transform .08s linear,width .25s,height .25s,opacity .25s}
body.cursor-hover .cursor-dot{width:14px;height:14px}
body.cursor-hover .cursor-ring{width:56px;height:56px;opacity:.4}
body.cursor-click .cursor-dot{transform:translate(-50%,-50%) scale(.7)}
@media(hover:none){.cursor{display:none}}

/* ── PAGE LOADER ── */
#loader{position:fixed;inset:0;z-index:9998;background:var(--dark);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-name{font-family:var(--serif);font-size:clamp(28px,5vw,52px);letter-spacing:-.02em;color:var(--white);overflow:hidden}
.loader-name span{display:inline-block;transform:translateY(110%);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.loader-name span.up{transform:translateY(0)}
.loader-bar-wrap{width:200px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.loader-bar{height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .05s linear}

/* ── HERO GRAIN ── */
.hero-grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");animation:grain 8s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(3%,2%)}30%{transform:translate(-1%,4%)}40%{transform:translate(4%,-1%)}50%{transform:translate(-3%,1%)}60%{transform:translate(2%,-4%)}70%{transform:translate(-4%,3%)}80%{transform:translate(1%,-2%)}90%{transform:translate(3%,4%)}100%{transform:translate(-1%,-3%)}}

/* ── PARALLAX PHOTO ── */
.hero-photo{will-change:transform}
.hero-right{overflow:hidden}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* ── STAGGER CHILDREN ── */
.stagger > *{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.stagger.visible > *{opacity:1;transform:translateY(0)}
.stagger.visible > *:nth-child(1){transition-delay:.05s}
.stagger.visible > *:nth-child(2){transition-delay:.12s}
.stagger.visible > *:nth-child(3){transition-delay:.19s}
.stagger.visible > *:nth-child(4){transition-delay:.26s}
.stagger.visible > *:nth-child(5){transition-delay:.33s}
.stagger.visible > *:nth-child(6){transition-delay:.40s}
.stagger.visible > *:nth-child(7){transition-delay:.47s}
.stagger.visible > *:nth-child(8){transition-delay:.54s}
.stagger.visible > *:nth-child(9){transition-delay:.61s}

/* ── MAGNETIC BUTTON ── */
.btn-accent,.btn-outline,.nav-cta{transition:background .2s,border-color .2s,color .2s,transform .15s;will-change:transform}

/* ── HERO HEADLINE TYPEWRITER CURSOR ── */
.type-cursor{display:inline-block;width:3px;height:.85em;background:var(--accent);margin-left:4px;vertical-align:middle;animation:blink .75s step-start infinite}
@keyframes blink{50%{opacity:0}}

/* ── COUNTER ── */
.stat-n{font-variant-numeric:tabular-nums}

/* ── FEATURED PROJECT hover tilt ── */
.featured-project{transition:border-color .25s,transform .2s,box-shadow .2s;transform-style:preserve-3d}
.featured-project:hover{box-shadow:0 24px 60px rgba(200,245,66,.06)}

/* ── PROJECT CARD shimmer on hover ── */
.project-card{position:relative;overflow:hidden}
.project-card::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(200,245,66,.04) 50%,transparent 60%);transform:translateX(-100%);transition:transform .55s ease}
.project-card:hover::after{transform:translateX(100%)}

/* ── NAV scroll shrink ── */
nav.topnav{transition:height .3s,background .3s}
nav.topnav.scrolled{height:56px;background:rgba(13,13,13,.97)}

/* ── SECTION TITLE UNDERLINE ── */
.sec-title{position:relative;display:inline-block}
.sec-title::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--accent);transition:width .9s cubic-bezier(.22,1,.36,1)}
.sec-title.title-line::after{width:48px}

/* ── SCROLL PROGRESS BAR ── */
#progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:200;width:0%;transform-origin:left;transition:width .1s linear}

/* ── SKILL BAR ANIMATE ── */
.skill-bar-fill{width:0!important;transition:width 1.2s cubic-bezier(.22,1,.36,1)!important}
.skills-animated .skill-bar-fill{width:var(--target-w)!important}

/* ── NAV ── */
nav.topnav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;background:rgba(13,13,13,0.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{font-family:var(--serif);font-size:20px;color:var(--white);text-decoration:none}
.nav-logo span{color:var(--accent)}
.nav-links{list-style:none;display:flex;gap:2rem}
.nav-links a{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:var(--dark);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:10px 22px;border-radius:100px;text-decoration:none;transition:background .2s}
.nav-cta:hover{background:#d4f75a}
.nav-mobile-btn{display:none;background:none;border:none;color:var(--white);font-size:22px;cursor:pointer}

/* ── HERO: split layout ── */
.hero{
  min-height:100vh;padding-top:var(--nav-h);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
}
.hero-left{
  padding:5vw 4vw 5vw 5vw;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:2rem}
.hero-tag::before{content:'';display:inline-block;width:28px;height:1px;background:var(--accent)}
.avail-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-headline{font-family:var(--serif);font-size:clamp(50px,6.5vw,96px);line-height:.93;letter-spacing:-.03em;color:var(--white);margin-bottom:1.75rem}
.hero-headline em{color: var(--accent);
    font-style: normal;
    font-family: 'Raleway', sans-serif;
    font-size: 2.6rem;
    font-weight: 300;}
.hero-sub{font-size:16px;color:var(--gray);max-width:440px;font-weight:300;line-height:1.75;margin-bottom:2.5rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.btn-accent{background:var(--accent);color:var(--dark);font-weight:700;padding:14px 28px;border-radius:100px;text-decoration:none;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;transition:background .2s;display:inline-block}
.btn-accent:hover{background:#d4f75a}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:var(--white);padding:14px 28px;border-radius:100px;text-decoration:none;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;transition:border-color .2s,color .2s;display:inline-block}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.stat-n{font-family:var(--serif);font-size:36px;color:var(--accent);line-height:1}
.stat-l{font-size:10px;color:var(--gray-2);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.hero-right{position:relative;height:100vh;overflow:hidden;background:#0d0d0d}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:grayscale(15%)}
.hero-photo-overlay{position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%,transparent 35%),linear-gradient(0deg,var(--dark) 0%,transparent 18%)}
.hero-right-label{position:absolute;bottom:2rem;right:2rem;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);writing-mode:vertical-rl}

/* ── SECTION BASE ── */
.section{padding:6rem 5vw}
.section-alt{background:var(--dark-2)}
.sec-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.sec-title{font-family:var(--serif);font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-.02em;color:var(--white);margin-bottom:2rem}
.divider{height:1px;background:var(--line)}

/* ── FEATURED PROJECT (big hero card) ── */
.featured-project{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color .25s;
  margin-bottom:2rem;
}
.featured-project:hover{border-color:rgba(200,245,66,.4)}
.feat-image{overflow:hidden;position:relative;background:var(--dark-3)}
.feat-image img{width:100%;display:block;transition:transform .4s}
.featured-project:hover .feat-image img{transform:scale(1.04)}
.feat-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-style:italic;color:rgba(200,245,66,.5)}
.feat-body{padding:3rem;display:flex;flex-direction:column;justify-content:center;background:var(--dark-3)}
.feat-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(200,245,66,.1);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:1.25rem;align-self:flex-start}
.feat-title{font-family:var(--serif);font-size:clamp(22px,2.5vw,34px);color:var(--white);line-height:1.1;margin-bottom:1rem}
.feat-desc{font-size:14px;color:var(--gray);line-height:1.75;margin-bottom:1.5rem;font-weight:300}
.feat-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.5rem}
.tool-tag{font-size:10px;border:.5px solid rgba(255,255,255,.15);color:var(--gray-2);padding:3px 10px;border-radius:100px}
.feat-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.feat-link::after{content:'↗';transition:transform .2s}
.featured-project:hover .feat-link::after{transform:translate(2px,-2px)}
.feat-metric{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(200,245,66,.08);border:1px solid rgba(200,245,66,.2);
  border-radius:8px;padding:10px 14px;margin-bottom:1.5rem;align-self:flex-start;
}
.feat-metric-num{font-family:var(--serif);font-size:24px;color:var(--accent);line-height:1}
.feat-metric-label{font-size:11px;color:var(--gray);letter-spacing:.04em}

/* ── PROJECT GRID ── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem}
.filter-btn{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:.5px solid rgba(255,255,255,.15);color:var(--gray);padding:7px 18px;border-radius:100px;cursor:pointer;background:transparent;transition:all .2s;font-family:var(--sans)}
.filter-btn:hover,.filter-btn.active{background:rgba(200,245,66,.12);color:var(--accent);border-color:rgba(200,245,66,.3)}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.project-card{background:var(--dark-3);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:border-color .2s,transform .2s}
.project-card:hover{border-color:rgba(200,245,66,.3);transform:translateY(-3px)}
.project-card.hidden{display:none}
.project-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--dark-4)}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.project-card:hover .project-thumb img{transform:scale(1.05)}
.project-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:2px;font-weight:500;aspect-ratio:16/9}
.project-body{padding:1.25rem}
.proj-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(200,245,66,.1);padding:3px 10px;border-radius:100px;display:inline-block;margin-bottom:8px}
.proj-title{font-family:var(--serif);font-size:17px;color:var(--white);line-height:1.2;margin-bottom:6px}
.proj-desc{font-size:12px;color:var(--gray);line-height:1.6;margin-bottom:.75rem}
.proj-tools{display:flex;flex-wrap:wrap;gap:5px}
.proj-link{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-top:.75rem;font-weight:500}
.proj-link::after{content:'↗'}

/* ── ABOUT (compact) ── */
.about-grid{display:grid;grid-template-columns:220px 1fr;gap:4vw;align-items:start}
.about-photo-wrap{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4}
.about-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:grayscale(20%)}
.about-right{}
.about-body{font-size:15px;color:var(--gray);line-height:1.85;font-weight:300;margin-bottom:1.5rem}
.about-body p+p{margin-top:1rem}
.about-body strong{color:var(--white);font-weight:500}
.about-tags{display:flex;flex-wrap:wrap;gap:8px}
.about-tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--dark-4);color:var(--gray);padding:5px 13px;border-radius:100px;border:.5px solid var(--line)}

/* ── SERVICES (horizontal strip) ── */
.services-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.service-card{background:var(--dark-2);padding:1.75rem;transition:background .2s}
.service-card:hover{background:var(--dark-4)}
.svc-num{font-family:var(--serif);font-size:12px;color:var(--accent);opacity:.6;margin-bottom:.75rem;letter-spacing:.08em}
.svc-title{font-size:14px;font-weight:600;color:var(--white);margin-bottom:7px}
.svc-desc{font-size:12px;color:var(--gray-2);line-height:1.65}

/* ── EXPERIENCE (accordion-style list) ── */
.exp-list{border-top:1px solid var(--line)}
.exp-item{border-bottom:1px solid var(--line);padding:1.75rem 0;cursor:pointer}
.exp-header{display:flex;align-items:center;gap:1.5rem}
.exp-period{font-size:11px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;min-width:160px;flex-shrink:0}
.exp-company{font-size:17px;font-weight:600;color:var(--white);flex:1}
.exp-role-inline{font-size:12px;color:var(--gray);margin-left:auto;white-space:nowrap}
.exp-chevron{font-size:14px;color:var(--gray-2);margin-left:1rem;transition:transform .25s;flex-shrink:0}
.exp-item.open .exp-chevron{transform:rotate(180deg)}
.exp-body{overflow:hidden;max-height:0;transition:max-height .3s ease}
.exp-item.open .exp-body{max-height:300px}
.tl-bullets{list-style:none;padding:1rem 0 .25rem 1rem}
.tl-bullets li{font-size:13px;color:var(--gray-2);line-height:1.65;padding-left:18px;position:relative;margin-bottom:6px}
.tl-bullets li::before{content:'→';position:absolute;left:0;color:var(--accent);font-size:11px;top:2px}

/* ── SKILLS ── */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.skill-group-title{font-size:12px;font-weight:600;color:var(--white);margin-bottom:1.25rem;letter-spacing:.06em;text-transform:uppercase}
.skill-bar-item{margin-bottom:14px}
.skill-bar-header{display:flex;justify-content:space-between;font-size:12px;color:var(--gray);margin-bottom:6px}
.skill-bar-track{height:3px;background:var(--dark-4);border-radius:2px;overflow:hidden}
.skill-bar-fill{height:100%;background:var(--accent);border-radius:2px}

/* ── BRANDS ── */
.brands-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5rem}
.brand-chip{background:var(--dark-3);border:.5px solid var(--line);color:var(--gray);font-size:13px;padding:8px 18px;border-radius:100px;transition:border-color .2s,color .2s}
.brand-chip:hover{border-color:rgba(200,245,66,.3);color:var(--accent)}

/* ── EDUCATION ── */
.edu-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:1.5rem}
.edu-card{background:var(--dark-3);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.5rem}
.edu-inst{font-size:13px;font-weight:600;color:var(--white);margin-bottom:4px}
.edu-degree{font-size:12px;color:var(--accent);margin-bottom:4px}
.edu-year{font-size:11px;color:var(--gray-2)}
.cert-list{display:flex;flex-wrap:wrap;gap:8px}
.cert-pill{font-size:11px;background:rgba(200,245,66,.07);border:.5px solid rgba(200,245,66,.2);color:var(--accent);padding:5px 14px;border-radius:100px}

/* ── CONTACT ── */
.contact-section{text-align:center;padding:7rem 5vw;background:var(--dark-2)}
.contact-headline{font-family:var(--serif);font-size:clamp(36px,6vw,80px);color:var(--white);line-height:.95;margin-bottom:1.5rem;letter-spacing:-.02em}
.contact-headline em{color:var(--accent);font-style:italic}
.contact-sub{color:var(--gray);font-size:16px;font-weight:300;margin-bottom:3rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.75}
.contact-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.contact-meta{display:flex;justify-content:center;gap:2rem;margin-top:2rem;flex-wrap:wrap}
.contact-meta a,.contact-meta span{font-size:12px;color:var(--gray-2);text-decoration:none;letter-spacing:.04em;transition:color .2s}
.contact-meta a:hover{color:var(--accent)}

/* ── FOOTER ── */
footer{background:var(--dark);border-top:1px solid var(--line);padding:1.5rem 5vw;display:flex;justify-content:space-between;align-items:center}
footer p{font-size:12px;color:var(--gray-2)}

/* ── MOBILE MENU ── */
.mobile-menu{display:none;position:fixed;inset:0;z-index:99;background:var(--dark-2);flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:22px;color:var(--white);text-decoration:none;letter-spacing:.04em;font-family:var(--serif)}
.mobile-menu a:hover{color:var(--accent)}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-left{padding:calc(var(--nav-h) + 3rem) 5vw 3rem;order:2}
  .hero-right{height:55vw;min-height:300px;order:1}
  .featured-project{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-photo-wrap{max-height:280px;aspect-ratio:16/9}
  .projects-grid{grid-template-columns:1fr 1fr}
  .skills-grid,.edu-row{grid-template-columns:1fr}
  .services-strip{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-mobile-btn{display:block}
  .exp-role-inline{display:none}
}
@media(max-width:600px){
  .projects-grid{grid-template-columns:1fr}
  .services-strip{grid-template-columns:1fr}
  .hero-stats{gap:1.5rem}
  .exp-period{min-width:120px}
}