:root{
  --bg: #0B0C10;
  --surface: #15171D;
  --surface-2: #1C1F27;
  --text: #F4F1EA;
  --muted: #9B9690;
  --border: rgba(244,241,234,0.09);

  --dev: #3ECFB2;      /* Web Development */
  --media: #E8735D;    /* Multimedia */
  --market: #E8A33D;   /* Marketing */

  --dev-dim: rgba(62,207,178,0.14);
  --media-dim: rgba(232,115,93,0.14);
  --market-dim: rgba(232,163,61,0.14);

  --grad-1: #FF8A3D;
  --grad-2: #D6402E;
  --grad-3: #170907;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3{ font-family:'Archivo', sans-serif; font-weight:900; letter-spacing:-0.02em; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em; }
.wrap{ max-width: 1120px; margin:0 auto; padding: 0 32px; width:100%; }
img{ max-width:100%; display:block; }

/* ---------- HERO (gradient world) ---------- */
.hero{
  position: relative;
  background: linear-gradient(160deg, var(--grad-1) 0%, var(--grad-2) 42%, var(--grad-3) 78%);
  overflow: hidden;
  padding-bottom: 70px;
}

.hero-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 28px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.badge{
  width: 40px; height:40px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo', sans-serif; font-weight:900; font-size: 0.95rem;
  flex-shrink: 0;
}
.pill-nav{
  display:flex;
  gap: 4px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 5px;
  border-radius: 999px;
  position: relative;
}
.pill-nav a{
  position:relative;
  z-index:1;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 999px;
  color: rgba(244,241,234,0.75);
  transition: color .3s ease;
}
.pill-nav a.active{ color: #170907; }
.pill-indicator{
  position:absolute;
  top:5px; bottom:5px;
  left:5px;
  background: var(--text);
  border-radius: 999px;
  transition: left .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1);
}
.hero-cta{
  font-size: 0.82rem;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--text);
  color: #170907;
  display:flex; align-items:center; gap:8px;
  font-weight: 600;
  flex-shrink: 0;
}

.hero-cta-viewmywork{
  font-size: 0.82rem;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--market);
  color: #170907;
  display:flex; align-items:center; gap:8px;
  font-weight: 600;
  flex-shrink: 0;
}

.hero-body{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items:center;
  gap: 20px;
  padding-top: 40px;
}
.hero-eyebrow{
  font-size: 0.78rem;
  color: rgba(244,241,234,0.8);
  margin-bottom: 18px;
  display:flex;
  align-items:center;
}
.hero-eyebrow::before{ content:"● "; color: var(--dev); }
h1.hero-title{
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  line-height: 0.98;
  color: var(--text);
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero-sub{
  max-width: 420px;
  color: rgba(244,241,234,0.85);
  font-size: 1rem;
  margin-top: 22px;
}
.tag-row{
  display:flex;
  gap: 26px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.tag-item .num{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color: rgba(244,241,234,0.65); }
.tag-item .label{ font-size: 0.92rem; font-weight:600; margin-top: 3px; }

.hero-photo-frame{
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  justify-self: end;
  width: 100%;
  max-width: 340px;
}
.hero-photo-frame img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.15) brightness(0.95);
  mix-blend-mode: luminosity;
}
.hero-photo-frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(255,138,61,0.35), rgba(23,9,7,0.55));
  mix-blend-mode: overlay;
}
.hero-photo-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.16);
  z-index: 2;
}

.mos-item .mos-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
}
.mos-item .mos-img + .tag,
.mos-item .mos-img ~ h3,
.mos-item .mos-img ~ p{
    position:relative; z-index:2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.mos-item:has(.mos-img)::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1) 55%);
    z-index:1;
}

@media (max-width: 820px){
  .hero-nav{ justify-content:center; text-align:center; }
  .hero-body{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
  .hero-eyebrow{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .tag-row{ justify-content:center; }
  .hero-photo-frame{ justify-self:center; max-width: 220px; order:-1; margin: 0 auto 12px; }
  .pill-nav{ display:none; }
}

/* ---------- STRIP (transition) ---------- */
.strip{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
}
.strip .wrap{
  display:flex;
  align-items:center;
  gap: 34px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.85rem;
}
.strip .strip-label{ font-family:'IBM Plex Mono', monospace; font-size: 0.72rem; text-transform:uppercase; }
.strip .org{ font-weight:600; color: var(--text); }

@media (max-width: 780px){
  .strip .wrap{ justify-content:center; text-align:center; }
}

/* ---------- SECTION SHARED ---------- */
section{ padding: 90px 0; border-top: 1px solid var(--border); }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 48px; gap:20px; flex-wrap:wrap;
}
.section-num{ font-family:'IBM Plex Mono', monospace; color: var(--muted); font-size:0.85rem; }
.section-title{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.pill-tab{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

@media (max-width: 780px){
  .section-head{ flex-direction:column; align-items:center; text-align:center; }
}

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns: 220px 1fr; gap: 48px; }
.about-photo{
  width: 100%;
  aspect-ratio: 1/1.15;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(0.3); }
.about-grid p{ color: var(--muted); margin-bottom: 18px; font-size: 1.02rem; }
.about-grid p strong{ color: var(--text); font-weight:600; }

.skill-badges{ display:flex; flex-wrap:wrap; gap: 10px; margin: 22px 0 32px; }
.skill-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.skill-badge.dev{ color: var(--dev); }
.skill-badge.media{ color: var(--media); }
.skill-badge.market{ color: var(--market); }

.facts-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.facts-col .label{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color: var(--muted); text-transform:uppercase; margin-bottom: 12px; }
.facts-col .value{ font-size: 0.98rem; margin-bottom: 14px; }
.facts-col .value b{ display:block; font-weight:600; }
.facts-col .value span{ color: var(--muted); font-size: 0.88rem; }

@media (max-width: 780px){
  .about-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .about-photo{ max-width: 180px; margin:0 auto; }
  .skill-badges{ justify-content:center; }
  .facts-row{ grid-template-columns: 1fr; text-align:center; }
  .facts-col{ display:flex; flex-direction:column; align-items:center; }
}

/* ---------- SKILLS ---------- */
.skills-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.skill-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px 26px;
  border-top: 3px solid transparent;
}
.skill-card.dev{ border-top-color: var(--dev); }
.skill-card.media{ border-top-color: var(--media); }
.skill-card.market{ border-top-color: var(--market); }
.skill-card .num{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color: var(--muted); }
.skill-card h3{ font-size: 1.15rem; margin: 6px 0; font-weight:700; }
.skill-card .tagline{ font-size:0.85rem; color: var(--muted); margin-bottom: 20px; }
.skill-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.skill-card li{ font-size:0.94rem; display:flex; align-items:center; gap:10px; }
.skill-card li::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--muted); flex-shrink:0; }

@media (max-width: 780px){
  .skills-grid{ grid-template-columns:1fr; }
  .skill-card{ text-align:center; }
  .skill-card ul{ align-items:center; }
  .skill-card li{ justify-content:center; }
}

/* ---------- EXPERIENCE ---------- */
.timeline{ position:relative; padding-left: 2px; }
.tl-progress-track{ position:absolute; left:130px; top:0; bottom:0; width:2px; background: var(--border); transform:translateX(-1px); }
.tl-progress-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background: linear-gradient(var(--dev), var(--media)); transition: height .1s linear; }
.tl-item{ position:relative; display:grid; grid-template-columns:130px 1fr; gap:32px; padding:30px 0; border-bottom:1px solid var(--border); }
.tl-item:last-child{ border-bottom:none; }
.tl-item::before{ content:""; position:absolute; left:-37px; top:34px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--muted); transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.tl-item.visible::before{ border-color: var(--dev); background: var(--dev); transform: scale(1.15); }
.tl-date{ font-family:'IBM Plex Mono', monospace; color:var(--muted); font-size:0.85rem; padding-top:4px; }
.tl-role{ font-size:1.2rem; margin-bottom:4px; font-weight:700; }
.tl-org{ color:var(--muted); font-size:0.92rem; margin-bottom:14px; }
.tl-desc{ color:var(--text); font-size:0.98rem; max-width:620px; }
.tl-tag{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.tl-tag.market{ background:var(--market-dim); color:var(--market); }
.tl-tag.dev{ background:var(--dev-dim); color:var(--dev); }

@media (max-width: 780px){
  .tl-progress-track{ display:none; }
  .tl-item::before{ display:none; }
  .tl-item{ grid-template-columns:1fr; gap:6px; text-align:center; justify-items:center; }
  .tl-desc{ max-width: 480px; }
}

/* ---------- WORK — category grid ---------- */
.work-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.work-card{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  cursor: pointer;
  text-align: left;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 20px;
  color: var(--text);
  font: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.work-card:hover{ border-color: rgba(244,241,234,0.22); transform: translateY(-3px); }
.work-card:focus-visible{ outline: 2px solid var(--text); outline-offset: 3px; }
.work-card::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 2px, transparent 2px 14px);
  opacity: .5;
  z-index:0;
}
.work-card .wc-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.work-card:has(.wc-img)::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.08) 55%);
  z-index:1;
}
.work-card > *{ position:relative; z-index:2; }
.work-card .tag{ font-family:'IBM Plex Mono', monospace; font-size:0.65rem; text-transform:uppercase; margin-bottom:6px; }
.work-card.dev .tag{ color: var(--dev); }
.work-card.media .tag{ color: var(--media); }
.work-card.market .tag{ color: var(--market); }
.work-card h3{ font-size: 1rem; font-weight:700; margin-bottom: 4px; }
.work-card p{ font-size: 0.82rem; color: var(--muted); }
.work-card .wc-expand{
  position:absolute; top:14px; right:14px;
  width: 30px; height:30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(244,241,234,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size: 0.9rem;
  z-index: 2;
}

@media (max-width: 900px){
  .work-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .work-grid{ grid-template-columns: 1fr; }
  .work-card{ aspect-ratio: 5/4; text-align:center; align-items:center; }
  .work-card .wc-expand{ right:14px; }
}

/* ---------- WORK — modal ---------- */
.wc-modal-overlay{
  position: fixed; inset:0;
  background: rgba(11,12,16,0.72);
  backdrop-filter: blur(6px);
  z-index: 100;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.wc-modal-overlay.open{ opacity: 1; pointer-events: auto; }
.wc-modal{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(18px) scale(.98);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.wc-modal-overlay.open .wc-modal{ transform: translateY(0) scale(1); }
.wc-modal-close{
  position: sticky;
  float: right;
  top:16px; right:16px;
  margin: 16px 16px -34px 0;
  width: 34px; height:34px;
  border-radius: 50%;
  background: rgba(11,12,16,0.55);
  border: 1px solid rgba(244,241,234,0.25);
  color: var(--text);
  font-size: 1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  z-index: 3;
}
.wc-modal-body{ padding: 40px 32px 32px; }
.wc-modal-tag{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; text-transform:uppercase; margin-bottom:10px; }
.wc-modal-tag.dev{ color: var(--dev); }
.wc-modal-tag.media{ color: var(--media); }
.wc-modal-tag.market{ color: var(--market); }
.wc-modal-title{ font-size: 1.5rem; margin-bottom: 10px; }
.wc-modal-desc{ color: var(--muted); font-size: 0.98rem; margin-bottom: 28px; }

.wc-project-list{ display:flex; flex-direction:column; gap: 16px; }
.wc-project{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--surface-2);
}
.wc-project h4{ font-size: 1.02rem; font-weight:700; margin-bottom: 6px; }
.wc-project p{ font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; }

.wc-project-media{
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  /* aspect-ratio: 3/4; */
  background: var(--surface);
}
.wc-project-media img{ width:100%; height:100%; object-fit:cover; }

.wc-project-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.wc-project-gallery img{
  width:100%; 
  /* aspect-ratio: 1/1;  */
  object-fit:cover;
  border-radius: 6px;
  cursor: zoom-in;
}

.wc-project-video{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--surface);
}
.wc-project-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Full-size image lightbox, opened from gallery/media thumbnails */
.wc-lightbox{
  position: fixed; inset:0;
  background: rgba(0,0,0,0.85);
  z-index: 200;
  display:flex; align-items:center; justify-content:center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  cursor: zoom-out;
}
.wc-lightbox.open{ opacity: 1; pointer-events: auto; }
.wc-lightbox img{
  max-width: 100%; max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wc-modal-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.86rem; font-weight:600;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: #170907;
}
.wc-modal-nolink{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px dashed var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  display:inline-block;
}

@media (max-width: 600px){
  .wc-modal-body{ padding: 40px 22px 28px; text-align:center; }
}

/* ---------- CONTACT ---------- */
.contact-split{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items:center;
}
.contact-photo{
  width: 140px; height:140px; border-radius:50%;
  overflow:hidden; border: 1px solid var(--border);
  margin-bottom: 18px;
}
.contact-photo img{ width:100%; height:100%; object-fit:cover; }
.contact-name{ font-weight:600; }
.contact-links{ margin-top: 18px; display:flex; flex-direction:column; gap:14px; }
.contact-links a{ position:relative; font-size:1rem; display:flex; align-items:center; gap:10px; color:var(--muted); }
.contact-links a:hover{ color: var(--text); }
.contact-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--text); transition:width .3s ease; }
.contact-links a:hover::after{ width:100%; }
.dot{ width:6px; height:6px; border-radius:50%; }
.dot.dev{ background:var(--dev); }
.dot.media{ background:var(--media); }
.dot.market{ background:var(--market); }

.contact-big{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.98;
}

@media (max-width: 780px){
  .contact-split{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
  .contact-photo{ margin:0 auto 18px; }
  .contact-links{ align-items:center; }
}

footer{
  padding: 32px 0 48px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

@media (max-width: 600px){
  footer{ justify-content:center; text-align:center; }
}

/* ---------- ANIMATION LAYER ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visible{ opacity:1; transform:none; }

.tilt{ transform-style:preserve-3d; will-change:transform; transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease; }
.tilt:hover{ box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5); border-color: rgba(244,241,234,0.2); }

h1.hero-title{ opacity:0; transform: translateY(18px); animation: heroIn .8s cubic-bezier(.2,.8,.2,1) .1s forwards; }
.hero-eyebrow{ opacity:0; animation: heroIn .7s ease 0s forwards; }
.tag-row .tag-item{ opacity:0; transform: translateY(12px); animation: heroIn .55s cubic-bezier(.2,.8,.2,1) forwards; }
.tag-row .tag-item:nth-child(1){ animation-delay:.45s; }
.tag-row .tag-item:nth-child(2){ animation-delay:.58s; }
.tag-row .tag-item:nth-child(3){ animation-delay:.71s; }
.hero-sub{ opacity:0; animation: heroIn .7s ease .8s forwards; }
.hero-photo-frame{ opacity:0; transform: scale(.94); animation: photoIn .8s cubic-bezier(.2,.8,.2,1) .3s forwards; }

@keyframes heroIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
@keyframes photoIn{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  h1.hero-title, .hero-eyebrow, .tag-row .tag-item, .hero-sub, .hero-photo-frame{ animation:none !important; opacity:1 !important; transform:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .tilt{ transition:none !important; }
}