:root{
  /* extracted from your logo: #F87F1E, #C96618, #100802, #FCFAF9 */
  --brand:#F87F1E;        /* main orange */
  --brand-dark:#C96618;   /* deep orange (borders/shadows) */
  --ink:#100802;          /* near-black outline */
  --paper:#FCFAF9;        /* off-white fill */
  --gray:#F1F1F1;         /* UI neutral */
  --maxw:1120px;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}

/* ===== Header strip ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(#FFA45D,var(--brand) 50%,#E36E12);
  border-top:6px solid var(--ink);
  border-bottom:6px solid var(--ink);
  box-shadow:0 6px 0 #0002;
}
.masthead{
  max-width:var(--maxw); margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:20px;
}
.logo{
  display:flex; align-items:center; gap:12px;
  font:700 30px/1 Bangers,cursive; letter-spacing:2px; color:var(--ink);
}
.logo img{height:40px; filter:drop-shadow(0 2px 0 #0002)}
.nav{margin-left:auto; display:flex; gap:18px; font-weight:800; text-transform:uppercase; letter-spacing:.08em}
.nav a{padding:8px 10px; border:3px solid var(--ink); background:#fff; box-shadow:4px 4px 0 #000}
.nav a:hover,.nav a.active{background:var(--brand); color:#fff}

.container{max-width:var(--maxw); margin:0 auto; padding:0 16px}

/* ===== HERO (banner inside, dots & burst) ===== */
.hero{
  position:relative;
  margin:22px 0 12px;
  border:6px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:16/9;              /* 1120×630 — під наш банер 2240×1260 (16:9) */
  isolation:isolate;
  background:
    linear-gradient(180deg,#00000040,#0000 45%),
    url('https://images.unsplash.com/photo-1547658719-7d3c0f54a05f?q=80&w=1400&auto=format&fit=crop') center/cover;
}

/* Банер 2240×1260 (16:9) — закриває весь hero без кропу/листбоксів */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/banner.png") center / cover no-repeat; /* 16:9 = ідеально лягає */
  pointer-events:none;
  z-index:1;   /* під дотами */
}

/* Дот-патерн над банером */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(#00000033 18%, transparent 19%);
  background-size:10px 10px;
  mix-blend-mode:multiply;
  opacity:.45;
  pointer-events:none;
  z-index:2;
}

/* Контент зверху */
.hero-inner{
  position:absolute; left:16px; right:16px; bottom:16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  z-index:3;
}

/* Табличка з ім'ям */
.hero-title{
  background:var(--brand); color:#fff;
  border:6px solid var(--ink);
  padding:10px 14px;
  box-shadow:6px 6px 0 #000;
  max-width:min(72%,620px);
}
.hero-title h1{margin:0; font:700 44px/1 Bangers,cursive; text-transform:uppercase}
.hero-title p{margin:6px 0 0; font-weight:800}

/* Кнопки */
.cta-row{display:flex; gap:12px}
.btn{
  display:inline-block; background:#fff; color:inherit;
  border:4px solid var(--ink); padding:10px 16px; font-weight:800;
  box-shadow:6px 6px 0 #000; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 #000}

/* Зірка POW! */
.burst{
  position:absolute; right:18px; top:18px;
  width:130px; aspect-ratio:1/1;
  background:var(--brand-dark); color:#fff;
  border:6px solid var(--ink); display:grid; place-items:center;
  clip-path:polygon(50% 0%,62% 17%,82% 10%,78% 30%,96% 38%,80% 50%,96% 62%,78% 70%,82% 90%,62% 83%,50% 100%,38% 83%,18% 90%,22% 70%,4% 62%,20% 50%,4% 38%,22% 30%,18% 10%,38% 17%);
  box-shadow:6px 6px 0 #000;
  z-index:4;
}
.burst span{font:700 22px/1 Bangers,cursive; text-align:center}

/* ===== Chips ===== */
.toc{display:flex; gap:12px; overflow:auto; padding:10px 0 16px}
.chip{flex:0 0 auto; background:var(--brand); color:#fff; border:4px solid var(--ink); padding:8px 14px; font-weight:800; box-shadow:4px 4px 0 #000}

/* ===== Sections ===== */
section{scroll-margin-top:94px}
.section{margin:20px 0}
.title{
  display:inline-block; background:#fff; border:6px solid var(--ink);
  padding:6px 12px; font:700 36px/1 Bangers,cursive; text-transform:uppercase;
  box-shadow:6px 6px 0 #000;
}
.rule{height:6px; background:var(--ink); box-shadow:0 6px 0 #0002; margin:10px 0 6px}

/* ===== About ===== */
.feature{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.feature .text{background:#fff; border:6px solid var(--ink); padding:22px; box-shadow:6px 6px 0 #000}
.feature .portrait{border:6px solid var(--ink); overflow:hidden; box-shadow:6px 6px 0 #000}
.feature img{display:block; width:100%; height:auto; filter:contrast(1.05)}

/* ===== Skills ===== */
.skills{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.panel{grid-column:span 6; background:#fff; border:6px solid var(--ink); padding:18px; box-shadow:6px 6px 0 #000}
.panel h3{font:700 24px/1 Bangers,cursive; margin:0 0 8px; text-transform:uppercase}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tag{background:var(--brand); color:#fff; border:3px solid var(--ink); padding:6px 10px; font-weight:700; box-shadow:4px 4px 0 #000}
.bar{height:14px; border:4px solid var(--ink); background:#fff; box-shadow:4px 4px 0 #000}
.bar>span{display:block; height:100%; background:repeating-linear-gradient(90deg,var(--brand),var(--brand) 10px,var(--paper) 10px,var(--paper) 20px)}

/* ===== Experience & Projects ===== */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.card{grid-column:span 4; display:flex; flex-direction:column; background:#fff; border:6px solid var(--ink); overflow:hidden; box-shadow:6px 6px 0 #000}
.card.wide{grid-column:span 6}
.thumb{aspect-ratio:4/3; background:#ddd center/cover; filter:saturate(1.1) contrast(1.1)}
.card h4{font:700 22px/1.1 Bangers,cursive; margin:12px 14px 6px; text-transform:uppercase}
.card p{margin:0 14px 12px; color:#222}
.card ul{margin:0 18px 16px; padding-left:18px}
.meta{margin:0 14px 16px; display:flex; gap:8px; flex-wrap:wrap}
.pill{border:3px solid var(--ink); padding:4px 8px; background:var(--brand); color:#fff; font-weight:800; box-shadow:4px 4px 0 #000}

/* ===== Contact ===== */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
form{background:#fff; border:6px solid var(--ink); padding:18px; display:grid; gap:10px; box-shadow:6px 6px 0 #000}
input,textarea{width:100%; padding:10px; border:3px solid var(--ink); background:#fff}
textarea{min-height:120px}
.aside{border:6px solid var(--ink); padding:18px; background:var(--paper); box-shadow:6px 6px 0 #000}

/* ===== Footer ===== */
.footer{margin:26px 0 40px; text-align:center; border-top:6px solid var(--ink); padding-top:14px; font-size:14px}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .nav{display:none}
  .feature,.contact{grid-template-columns:1fr}
  .skills .panel{grid-column:span 12}
  .grid .card{grid-column:span 6}
}
@media (max-width:700px){
  .hero::before{
    background-position:center bottom;
  }
}
@media (max-width:640px){
  .grid .card{grid-column:span 12}
  .logo{font-size:26px}
}