/* MUSTAFA SYED — NEO-BRUTALIST PORTFOLIO */
:root{
  --black:#000; --white:#fff; --cream:#F5F0E8;
  --yellow:#FFE500; --blue:#2457FF; --pink:#FF4FA3; --green:#00D084; --orange:#FF6B00;
  --border:4px solid #000;
  --shadow:8px 8px 0 #000;
  --shadow-sm:6px 6px 0 #000;
  --shadow-lg:12px 12px 0 #000;
  --mono:'IBM Plex Mono', monospace;
  --display:'Archivo Black', sans-serif;
  --grotesk:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
  font-family:var(--grotesk);
  background:var(--cream);
  color:var(--black);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--yellow);color:var(--black)}

/* focus */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* skip */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:var(--yellow);color:#000;border:var(--border);padding:10px 14px;z-index:9999;font-family:var(--mono);font-weight:700}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--black);color:var(--white);
  border-bottom:4px solid var(--black);
}
.nav__inner{
  max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;gap:16px;
}
.nav__logo{font-family:var(--display);font-size:18px;letter-spacing:-0.02em;white-space:nowrap}
.nav__logo .reg{font-size:10px;vertical-align:super}
.nav__links{display:flex;gap:4px;align-items:center}
.nav__links a{
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:0.06em;
  padding:8px 14px;border:2px solid transparent;
  transition:all 160ms steps(2);
}
.nav__links a:hover{background:var(--yellow);color:var(--black);border-color:var(--black);transform:translate(-2px,-2px);box-shadow:3px 3px 0 #fff}
.nav__links a:nth-child(2):hover{background:var(--blue);color:#fff}
.nav__links a:nth-child(3):hover{background:var(--pink);color:#fff}
.nav__links a:nth-child(4):hover{background:var(--green);color:var(--black)}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__avail{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.08em;
  background:var(--green);color:var(--black);border:2px solid var(--black);
  padding:6px 10px;display:flex;align-items:center;gap:8px;
}
.nav__avail .dot{width:8px;height:8px;background:var(--black);border-radius:50%;display:inline-block;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0.2}}
.nav__burger{display:none;flex-direction:column;gap:5px;background:var(--white);border:3px solid var(--black);padding:9px 9px;cursor:pointer;box-shadow:4px 4px 0 #000}
.nav__burger span{width:20px;height:3px;background:var(--black);display:block}

/* TICKER */
.ticker{
  background:var(--yellow);border-bottom:4px solid var(--black);
  overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.14em;
  padding:8px 0;
}
.ticker__track{display:inline-flex;animation:marquee 18s linear infinite}
.ticker__track span{padding-right:40px}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-33.33%)}}

/* HERO */
.hero{
  background:var(--cream);
  border-bottom:4px solid var(--black);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image: radial-gradient(#000 1.2px, transparent 1.2px);
  background-size:22px 22px;opacity:0.06;pointer-events:none;
}
.hero__grid{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:1.35fr 0.75fr;
  gap:0;min-height:88vh;position:relative;z-index:1;
}
.hero__left{padding:28px 22px 28px 28px;display:flex;flex-direction:column;gap:18px;border-right:4px solid var(--black);position:relative}
.hero__eyebrow{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.08em;border:2px solid var(--black);padding:6px 9px}
.tag--black{background:var(--black);color:var(--white)}
.tag--white{background:var(--white);color:var(--black)}
.tag--yellow{background:var(--yellow);color:var(--black)}

.hero__title{font-family:var(--display);line-height:0.85;letter-spacing:-0.04em;text-transform:uppercase}
.hero__title .line{
  display:block;
  font-size:clamp(3.2rem, 8vw, 7.2rem);
  padding:6px 14px 2px;
  border:4px solid var(--black);
  box-shadow:8px 8px 0 var(--black);
  width:fit-content;
  margin-bottom:10px;
  transform:rotate(-0.4deg);
}
.hero__title .line--black{background:var(--black);color:var(--white);transform:rotate(0.6deg)}
.hero__title .line--blue{background:var(--blue);color:var(--white);transform:rotate(-0.8deg);margin-left:18px}
.hero__title .line--pink{background:var(--pink);color:var(--white);transform:rotate(0.9deg);margin-left:8px}
.hero__title .line--yellow{background:var(--yellow);color:var(--black);transform:rotate(-0.5deg);margin-left:24px}
.hero__title .line--small{font-size:clamp(2.2rem,5.5vw,4.4rem)}
.dot-big{color:var(--pink)}

.hero__bottom{margin-top:auto;display:grid;gap:16px;padding-top:10px;border-top:4px solid var(--black)}
.hero__desc{font-size:18px;font-weight:500;max-width:560px;background:var(--white);border:3px solid var(--black);padding:14px 16px;box-shadow:6px 6px 0 var(--black);font-family:var(--grotesk);line-height:1.4}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}

.btn{
  font-family:var(--display);font-size:15px;letter-spacing:0.02em;
  border:3px solid var(--black);padding:14px 20px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:6px 6px 0 var(--black);
  transition:transform 160ms steps(2), box-shadow 160ms steps(2), background 160ms;
  cursor:pointer;user-select:none;text-transform:uppercase;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--black)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--black)}
.btn--black{background:var(--black);color:var(--white)}
.btn--white{background:var(--white);color:var(--black)}
.btn--small{padding:10px 14px;font-size:13px}
.btn--huge{font-size:clamp(16px,2vw,22px);padding:18px 22px;width:100%;justify-content:space-between}

.hero__right{padding:22px;display:flex;flex-direction:column;gap:16px;position:relative;background:var(--white)}
.os-panel{
  background:var(--yellow);border:var(--border);box-shadow:var(--shadow);
  position:relative;padding-top:0;overflow:visible;
}
.os-panel__header{
  background:var(--black);color:var(--white);
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;gap:10px;
}
.os-dots{display:flex;gap:6px}
.os-dots i{width:10px;height:10px;border-radius:50%;border:2px solid #fff;display:block}
.os-dots i:nth-child(1){background:var(--pink)}.os-dots i:nth-child(2){background:var(--yellow)}.os-dots i:nth-child(3){background:var(--green)}
.os-live{background:var(--green);color:#000;padding:3px 6px;border:2px solid #000;font-weight:700}
.os-panel__body{padding:16px;display:grid;gap:10px}
.os-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:0.06em;border-bottom:2px dashed #000;padding-bottom:8px}
.os-row span{opacity:0.7}
.os-row strong{font-size:12px}
.os-row .avail{display:flex;align-items:center;gap:6px}
.pulse{width:8px;height:8px;background:var(--green);border:2px solid #000;border-radius:50%;display:inline-block;animation:blink 1s steps(2) infinite}
.os-divider{height:3px;background:var(--black)}
.os-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.os-grid div{background:var(--white);border:3px solid var(--black);padding:10px}
.os-grid small{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;display:block;opacity:0.7}
.os-grid strong{font-family:var(--display);font-size:14px}
.os-links{display:flex;flex-wrap:wrap;gap:6px}
.os-links a{font-family:var(--mono);font-size:10px;font-weight:700;border:2px solid var(--black);padding:6px 8px;background:var(--white);box-shadow:3px 3px 0 var(--black)}
.os-links a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--black)}
.os-footer{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;background:var(--black);color:var(--white);padding:8px 10px;text-align:center}
.sticker{
  position:absolute;font-family:var(--display);font-size:11px;border:3px solid var(--black);padding:6px 10px;box-shadow:4px 4px 0 var(--black);transform:rotate(-6deg)
}
.sticker--yellow{background:var(--yellow);top:-12px;right:-10px;transform:rotate(8deg)}
.sticker--pink{background:var(--pink);color:#fff;bottom:44px;right:-12px;transform:rotate(-8deg)}

.hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meta-block{border:3px solid var(--black);padding:12px;box-shadow:5px 5px 0 var(--black)}
.meta-block--blue{background:var(--blue);color:#fff}
.meta-block--white{background:var(--white)}
.meta-block span{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;display:block;opacity:0.8}
.meta-block strong{font-family:var(--display);font-size:13px;line-height:1.1;display:block;margin-top:4px}
.crosshair{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:22px;border:2px solid var(--black);width:34px;height:34px;display:grid;place-items:center;background:var(--white)}
.hero__coords{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;background:var(--black);color:var(--white);padding:8px 16px;text-align:center;border-top:4px solid var(--black)}

/* SECTION LABEL */
.section-label{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;font-weight:700;
  background:var(--black);color:var(--white);display:inline-flex;
  padding:7px 10px;border:3px solid var(--black);margin-bottom:14px;
}
.section-label--white{background:var(--white);color:var(--black)}

/* HOW */
.how{
  background:var(--blue);color:var(--white);
  border-bottom:4px solid var(--black);
  padding:28px 20px 32px;
  position:relative;overflow:hidden;
}
.how::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.18) 1.4px, transparent 1.4px);background-size:20px 20px;pointer-events:none}
.how__grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:0.9fr 1.1fr;gap:22px;position:relative;z-index:1}
.how__title{font-family:var(--display);font-size:clamp(3rem,7vw,6.2rem);line-height:0.86;letter-spacing:-0.04em}
.how__title span{background:var(--yellow);color:var(--black);padding:4px 10px;border:4px solid var(--black);box-shadow:8px 8px 0 var(--black);display:inline-block;transform:rotate(-1deg);margin-top:8px}
.how__anno{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;background:var(--white);color:var(--black);display:inline-block;padding:6px 10px;border:3px solid var(--black);transform:rotate(0.6deg)}
.how__cards{display:grid;gap:14px}
.brutal-card{
  background:var(--white);color:var(--black);
  border:var(--border);box-shadow:var(--shadow);
  padding:18px 18px 16px;position:relative;
  transition:transform 180ms steps(2), box-shadow 180ms;
}
.brutal-card:hover{transform:translate(-4px,-4px) rotate(-0.6deg);box-shadow:12px 12px 0 var(--black)}
.brutal-card--yellow{background:var(--yellow)}
.brutal-card--blue{background:var(--white)}
.brutal-card--pink{background:var(--pink);color:#fff}
.brutal-card--pink p{color:#fff}
.card-num{font-family:var(--display);font-size:28px;position:absolute;top:10px;right:14px;opacity:0.18}
.brutal-card p{font-size:17px;font-weight:700;line-height:1.35;max-width:540px}
.card-tag{margin-top:12px;display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;border:2px solid var(--black);padding:5px 8px;background:var(--black);color:var(--white)}

/* WORK */
.work{
  background:var(--cream);padding:28px 20px 34px;border-bottom:4px solid var(--black)
}
.work__header{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-bottom:18px}
.work__title{font-family:var(--display);font-size:clamp(3rem,8vw,6.8rem);line-height:0.82;letter-spacing:-0.05em}
.work__sub{display:grid;gap:10px;justify-items:end;text-align:right}
.work__sub p{font-family:var(--display);font-size:18px;line-height:1.05;background:var(--yellow);border:3px solid var(--black);padding:10px 12px;box-shadow:6px 6px 0 var(--black)}
.work__count{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;border:2px solid var(--black);padding:6px 10px;background:var(--white)}
.work__grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.project{
  border:var(--border);box-shadow:var(--shadow);
  padding:18px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  transition:transform 180ms steps(2), box-shadow 180ms;
  min-height:420px;
}
.project:hover{transform:translate(-5px,-5px) rotate(-0.7deg);box-shadow:14px 14px 0 var(--black)}
.project--yellow{background:var(--yellow)}
.project--blue{background:var(--blue);color:#fff}
.project--blue .project__desc{color:#fff}
.project--pink{background:var(--pink);color:#fff}
.project--pink .project__desc{color:#fff}
.project--green{background:var(--green)}
.project__top{display:flex;justify-content:space-between;align-items:center}
.project__num{font-family:var(--display);font-size:42px;line-height:1;opacity:0.9;transition:transform 200ms}
.project:hover .project__num{transform:rotate(-6deg) scale(1.06)}
.project__cat{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;border:2px solid var(--black);padding:6px 8px;background:var(--white);color:var(--black);font-weight:700}
.project__name{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);line-height:0.88;letter-spacing:-0.04em}
.project__desc{font-size:15px;font-weight:600;line-height:1.4;max-width:520px}
.project__stack{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;border:2px solid var(--black);padding:8px 10px;background:var(--black);color:var(--white);width:fit-content}
.project__visual{border:3px solid var(--black);background:var(--white);height:110px;position:relative;overflow:hidden;box-shadow:4px 4px 0 var(--black)}
.vis-grid{position:absolute;inset:0;background-image:linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg,#000 1px, transparent 1px);background-size:18px 18px;opacity:0.12}
.vis-circle{position:absolute;right:18px;top:18px;width:64px;height:64px;border:4px solid var(--black);border-radius:50%;background:var(--blue)}
.vis-label{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:10px;font-weight:700;border:2px solid var(--black);padding:5px 8px;background:var(--yellow)}
.vis-label--white{background:var(--white)}
.vis-label--green{background:var(--green)}
.vis-bars{position:absolute;inset:12px;display:flex;gap:6px;align-items:end}
.vis-bars i{display:block;flex:1;border:3px solid var(--black);background:var(--yellow)}
.vis-bars i:nth-child(1){height:34%}.vis-bars i:nth-child(2){height:68%}.vis-bars i:nth-child(3){height:46%}.vis-bars i:nth-child(4){height:86%}
.vis-arrow{position:absolute;right:14px;top:10px;font-size:48px;font-weight:900;line-height:1}
.vis-dots{position:absolute;left:12px;top:12px;width:84px;height:46px;background-image:radial-gradient(#000 2px, transparent 2px);background-size:12px 12px;opacity:0.8}
.vis-stack{position:absolute;inset:0;display:grid;place-items:center;gap:2px;padding:12px}
.vis-stack span{font-family:var(--display);font-size:16px;border:3px solid var(--black);padding:4px 10px;background:var(--white);box-shadow:3px 3px 0 var(--black);transform:rotate(-1deg)}
.vis-stack span:nth-child(2){transform:rotate(1deg);background:var(--yellow)}
.project__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto}
.project__url{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;opacity:0.8;border-bottom:2px solid var(--black);padding-bottom:2px}
.project__sticker{position:absolute;top:14px;right:-8px;font-family:var(--display);font-size:10px;border:3px solid var(--black);padding:6px 9px;box-shadow:4px 4px 0 var(--black);transform:rotate(7deg)}
.project__sticker--blue{background:var(--yellow);color:var(--black)}
.project__sticker--pink{background:var(--white);color:var(--black)}
.project__sticker--green{background:var(--white);color:var(--black)}

/* ABOUT */
.about{
  background:var(--pink);border-bottom:4px solid var(--black);
  padding:28px 20px 30px;position:relative;overflow:hidden;color:var(--white)
}
.about::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,0.16) 1.6px, transparent 1.6px);background-size:18px 18px;opacity:0.35;pointer-events:none}
.about__grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:0.95fr 1.05fr;gap:22px;position:relative;z-index:1}
.about__title{font-family:var(--display);font-size:clamp(3rem,7vw,5.8rem);line-height:0.84;letter-spacing:-0.04em;color:var(--white)}
.about__title span{background:var(--black);color:var(--white);padding:4px 10px;border:4px solid var(--black);box-shadow:8px 8px 0 var(--white);display:inline-block;transform:rotate(-1deg)}
.about__name-block{margin-top:16px;display:grid;gap:6px}
.about__name-block span{font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);line-height:0.85;background:var(--yellow);color:var(--black);border:4px solid var(--black);padding:8px 12px;box-shadow:8px 8px 0 var(--black);width:fit-content;transform:rotate(0.7deg)}
.about__name-block span:last-child{transform:rotate(-0.8deg);background:var(--white)}
.about__coords{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;background:var(--black);color:var(--white);padding:8px 10px;border:3px solid var(--white);display:inline-block}
.about__right{display:grid;gap:14px;align-content:start}
.about__bio{display:grid;gap:12px}
.about__bio p{background:var(--white);color:var(--black);border:4px solid var(--black);padding:14px 16px;box-shadow:8px 8px 0 var(--black);font-size:16px;font-weight:600;line-height:1.45}
.about__bio p strong{font-family:var(--display);font-size:18px}
.hl{padding:2px 6px;border:2px solid var(--black)}
.hl--yellow{background:var(--yellow)}.hl--blue{background:var(--blue);color:#fff}.hl--green{background:var(--green)}
.about__quote{border:4px solid var(--black);background:var(--black);color:var(--white);padding:16px;display:flex;gap:14px;align-items:center;box-shadow:8px 8px 0 var(--white)}
.about__quote span{font-family:var(--display);font-size:44px;line-height:1}
.about__quote p{font-family:var(--display);font-size:18px;letter-spacing:-0.02em}

/* CURRENTLY */
.currently{background:var(--cream);padding:28px 20px 32px;border-bottom:4px solid var(--black)}
.currently__title{max-width:1440px;margin:0 auto;font-family:var(--display);font-size:clamp(3rem,9vw,7rem);line-height:0.82;letter-spacing:-0.05em;margin-bottom:16px}
.currently__grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.curr-card{border:4px solid var(--black);padding:16px;box-shadow:8px 8px 0 var(--black);display:grid;gap:6px;min-height:150px}
.curr-card small{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;font-weight:700}
.curr-card strong{font-family:var(--display);font-size:22px;line-height:0.95;letter-spacing:-0.03em}
.curr-card span{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;opacity:0.8}
.curr-card--cream{background:var(--white)}
.curr-card--yellow{background:var(--yellow)}
.curr-card--blue{background:var(--blue);color:#fff}
.curr-card--pink{background:var(--pink);color:#fff}
.curr-card--green{background:var(--green)}
.curr-card--orange{background:var(--orange)}

/* STACK */
.stack{background:var(--white);padding:28px 20px 30px;border-bottom:4px solid var(--black)}
.stack__header{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-bottom:18px}
.stack__title{font-family:var(--display);font-size:clamp(3rem,8vw,6.6rem);line-height:0.82;letter-spacing:-0.05em}
.stack__sub{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;background:var(--black);color:var(--white);padding:10px 12px;border:3px solid var(--black);text-align:right;line-height:1.4}
.stack__wall{max-width:1440px;margin:0 auto;display:grid;gap:16px}
.stack__group{border:4px solid var(--black);box-shadow:8px 8px 0 var(--black);padding:16px;background:var(--cream);display:grid;gap:12px}
.stack__cat{font-family:var(--mono);font-size:11px;letter-spacing:0.14em}
.stack__cat span{background:var(--black);color:var(--white);padding:6px 10px;border:2px solid var(--black)}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag-brick{
  font-family:var(--display);font-size:13px;letter-spacing:0.02em;
  background:var(--white);border:3px solid var(--black);padding:10px 12px;
  box-shadow:5px 5px 0 var(--black);transform:rotate(-0.6deg);
  transition:transform 160ms steps(2), box-shadow 160ms;
}
.tag-brick:hover{transform:translate(-2px,-2px) rotate(0deg);box-shadow:7px 7px 0 var(--black)}
.tag-brick--yellow{background:var(--yellow)}
.tag-brick--blue{background:var(--blue);color:#fff}
.tag-brick--pink{background:var(--pink);color:#fff}
.tag-brick--green{background:var(--green)}
.tag-brick--orange{background:var(--orange)}
.tag-brick--black{background:var(--black);color:var(--white)}
.tag-brick:nth-child(2){transform:rotate(0.8deg)}
.tag-brick:nth-child(4){transform:rotate(-1.1deg)}
.stack__anno{max-width:1440px;margin:14px auto 0;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;opacity:0.7}

/* PHILOSOPHY */
.philosophy{
  background:var(--black);color:var(--white);
  padding:36px 20px 32px;position:relative;overflow:hidden;border-bottom:4px solid var(--black)
}
.philosophy__label{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;background:var(--yellow);color:var(--black);display:inline-block;padding:6px 10px;border:3px solid var(--white)}
.philosophy__title{
  margin-top:18px;
  font-family:var(--display);font-size:clamp(2.6rem,7.5vw,6.8rem);line-height:0.84;letter-spacing:-0.05em;
  display:flex;flex-wrap:wrap;gap:10px;max-width:1440px;
}
.philosophy__title span{padding:4px 10px;border:4px solid transparent}
.philosophy__title .yellow{background:var(--yellow);color:var(--black);border-color:var(--white);transform:rotate(-1deg);box-shadow:8px 8px 0 var(--pink)}
.philosophy__title .pink{background:var(--pink);color:var(--white);border-color:var(--white);transform:rotate(1deg);box-shadow:8px 8px 0 var(--yellow)}
.philosophy__title .line-break{flex-basis:100%;height:0;border:none;padding:0}
.philosophy__bottom{max-width:1440px;margin:18px auto 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;opacity:0.8}
.philosophy__marks{position:absolute;right:18px;bottom:18px;display:flex;gap:10px;font-size:18px;opacity:0.5}
.philosophy__marks span{width:34px;height:34px;border:2px solid var(--white);display:grid;place-items:center}

/* TERMINAL */
.terminal{
  background:var(--green);padding:22px 20px 24px;border-bottom:4px solid var(--black)
}
.terminal__header{
  max-width:1100px;margin:0 auto;
  background:var(--black);color:var(--white);
  border:4px solid var(--black);box-shadow:8px 8px 0 var(--black);
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
}
.terminal__header span{opacity:0.7}
.terminal__dots{display:flex;gap:6px}
.terminal__dots i{width:12px;height:12px;border-radius:50%;border:2px solid #fff;display:block}
.terminal__dots i:nth-child(1){background:var(--pink)}.terminal__dots i:nth-child(2){background:var(--yellow)}.terminal__dots i:nth-child(3){background:var(--blue)}
.terminal__body{
  max-width:1100px;margin:14px auto 0;
  background:var(--black);color:#00FF88;
  border:4px solid var(--black);box-shadow:8px 8px 0 var(--black);
  font-family:var(--mono);font-size:13px;line-height:1.6;
  min-height:260px;max-height:360px;overflow:auto;
  padding:16px;
}
.term-line{margin-bottom:6px;white-space:pre-wrap;word-break:break-word}
.term-line.muted{color:#9AE6B4}
.term-line.error{color:var(--pink)}
.term-line .cmd{color:var(--yellow)}
.terminal__input{
  max-width:1100px;margin:12px auto 0;
  background:var(--white);border:4px solid var(--black);box-shadow:8px 8px 0 var(--black);
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  font-family:var(--mono);font-weight:700;
}
.terminal__input span{font-size:18px}
.terminal__input input{
  flex:1;border:0;outline:0;font-family:var(--mono);font-size:14px;font-weight:700;background:transparent;
}
.terminal__hints{max-width:1100px;margin:10px auto 0;display:flex;flex-wrap:wrap;gap:8px}
.terminal__hints button{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.06em;
  border:3px solid var(--black);padding:8px 10px;background:var(--white);box-shadow:4px 4px 0 var(--black);cursor:pointer;
}
.terminal__hints button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--black);background:var(--yellow)}

/* CONTACT */
.contact{
  background:var(--orange);padding:28px 20px 0;border-bottom:4px solid var(--black);overflow:hidden
}
.contact__title{
  max-width:1440px;margin:0 auto;
  font-family:var(--display);font-size:clamp(3rem,8.5vw,7.2rem);line-height:0.82;letter-spacing:-0.05em;
}
.contact__title span{display:block;border:4px solid var(--black);padding:6px 12px;width:fit-content;box-shadow:8px 8px 0 var(--black);margin-bottom:10px;background:var(--white);transform:rotate(-0.6deg)}
.contact__title span:nth-child(2){background:var(--yellow);margin-left:18px;transform:rotate(0.8deg)}
.contact__title span:nth-child(3){background:var(--black);color:var(--white);margin-left:8px;transform:rotate(-0.8deg)}
.contact__title .outline{background:transparent;color:var(--black);border-style:dashed;box-shadow:none;transform:none;font-size:clamp(2rem,5vw,3.8rem);margin-top:6px}
.contact__grid{max-width:1440px;margin:18px auto 0;display:grid;grid-template-columns:0.9fr 1.1fr;gap:18px;align-items:start}
.contact__left p{background:var(--white);border:4px solid var(--black);padding:16px;box-shadow:8px 8px 0 var(--black);font-size:16px;font-weight:600;line-height:1.45}
.contact__info{margin-top:12px;display:grid;gap:8px}
.contact__info a{font-family:var(--mono);font-size:13px;font-weight:700;border:3px solid var(--black);padding:10px 12px;background:var(--white);box-shadow:6px 6px 0 var(--black);word-break:break-all}
.contact__info span{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;background:var(--black);color:var(--white);padding:8px 10px;border:3px solid var(--black);display:inline-block;width:fit-content}
.contact__buttons{display:grid;gap:12px}
.contact__big{font-family:var(--display);font-size:clamp(3rem,14vw,13rem);line-height:0.82;letter-spacing:-0.06em;text-align:center;border-top:4px solid var(--black);margin-top:20px;padding:10px 0 6px;white-space:nowrap;overflow:hidden}

/* FOOTER */
.footer{background:var(--black);color:var(--white);padding:24px 20px 0}
.footer__grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.7fr 1fr;gap:18px;padding-bottom:18px}
.footer__logo{font-family:var(--display);font-size:28px;letter-spacing:-0.03em}
.footer__logo .reg{font-size:12px;vertical-align:super}
.footer__sub{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;opacity:0.8;margin-top:6px;line-height:1.5}
.footer__avail{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;background:var(--green);color:var(--black);display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--white);font-weight:700}
.footer__links{display:grid;gap:6px;align-content:start}
.footer__links a{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;border:2px solid var(--white);padding:8px 10px;display:flex;justify-content:space-between}
.footer__links a:hover{background:var(--yellow);color:var(--black);border-color:var(--black)}
.footer__right{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;display:grid;gap:6px;align-content:start;text-align:right}
.footer__right .muted{opacity:0.6}
.footer__stickers{display:flex;gap:8px;justify-content:end;flex-wrap:wrap;margin-top:6px}
.mini-tag{font-family:var(--display);font-size:10px;border:2px solid var(--white);padding:5px 8px}
.mini-tag--yellow{background:var(--yellow);color:var(--black);border-color:var(--black);transform:rotate(-3deg)}
.mini-tag--pink{background:var(--pink);color:#fff;transform:rotate(2deg)}
.mini-tag--blue{background:var(--blue);color:#fff;transform:rotate(-2deg)}
.footer__bar{border-top:4px solid var(--white);padding:10px 14px;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-align:center;opacity:0.9}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr}
  .hero__left{border-right:0;border-bottom:4px solid var(--black)}
  .how__grid, .about__grid, .contact__grid{grid-template-columns:1fr}
  .work__header, .stack__header{grid-template-columns:1fr}
  .work__sub, .stack__sub{text-align:left;justify-items:start}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__right{text-align:left}
  .footer__stickers{justify-content:start}
}
@media (max-width:768px){
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--black);flex-direction:column;align-items:stretch;
    padding:10px;border-top:4px solid var(--white);
    display:none;
  }
  .nav__links.open{display:flex}
  .nav__burger{display:flex}
  .hero__title .line{font-size:clamp(2.6rem,12vw,4.6rem)}
  .work__grid{grid-template-columns:1fr}
  .currently__grid{grid-template-columns:1fr 1fr}
  .contact__big{font-size:clamp(2.4rem,16vw,6rem)}
}
@media (max-width:430px){
  .nav__inner{padding:12px 14px}
  .hero__left{padding:18px 14px}
  .hero__right{padding:14px}
  .how, .work, .about, .currently, .stack, .philosophy, .terminal, .contact{padding-left:14px;padding-right:14px}
  .currently__grid{grid-template-columns:1fr}
  .hero__title .line{box-shadow:6px 6px 0 var(--black);margin-left:0 !important}
  .sticker--yellow{right:2px}.sticker--pink{right:2px}
  .philosophy__title{font-size:clamp(2rem,10vw,3rem)}
  .footer__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ticker__track{animation:none}
  .dot, .pulse{animation:none}
  .btn, .brutal-card, .project, .tag-brick{transition:none}
  .btn:hover, .brutal-card:hover, .project:hover, .tag-brick:hover{transform:none}
}