:root{
  --bg:#f6f7f9; --ink:#0d0d0f; --muted:#5c5e65; --line:#e6e8ee; --accent:#0f1115;
  --card:#ffffff; --silver:#6f727a; --halo:rgba(15,17,21,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(15,17,21,.06), transparent 60%), var(--bg);
  color:var(--ink); line-height:1.6; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{width:min(1200px,92%); margin-inline:auto}

/* Header */
header{position:fixed; inset:0 0 auto; height:68px; display:flex; align-items:center; z-index:20; background:linear-gradient(to bottom, rgba(246,247,249,.9), rgba(246,247,249,.6), transparent); backdrop-filter:saturate(180%) blur(8px);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, #ffffff, #e9ecf3); display:grid; place-items:center; box-shadow:0 10px 40px rgba(15,17,21,.04) inset, 0 0 0 1px #e0e5ee}
.logo span{font-weight:700; letter-spacing:.06em}
.tag{font-size:.8rem; color:var(--muted)}
.menu{display:flex; gap:18px}
.menu a{padding:8px 10px; border-radius:10px}
.menu a:hover{background:var(--halo)}

/* Hero */
.hero{min-height:100svh; display:grid; place-items:center; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-10% -10% auto; height:70%; background:
  radial-gradient(1200px 500px at 50% 0, rgba(15,17,21,.08), transparent 60%);
  filter:blur(2px); pointer-events:none}
.hero-inner{text-align:center; padding-top:12vh}
.emf{font-size:clamp(44px,10vw,144px); letter-spacing:.08em; font-weight:700; margin:0; text-transform:uppercase; opacity:0; transform:translateY(12px); animation:rise .9s ease .15s forwards}
.sub{margin:.5rem 0 1.75rem; font-size:clamp(16px,2.2vw,22px); color:var(--silver); opacity:.9}
.cta{display:flex; gap:14px; justify-content:center}
.btn{padding:12px 18px; border-radius:12px; background:var(--ink); color:#fff; font-weight:700; letter-spacing:.02em; border:1px solid rgba(15,17,21,.1)}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid #d7dbe6}
.btn:hover{transform:translateY(-1px)}
@keyframes rise{to{opacity:1; transform:none}}

/* Sections */
section{padding:72px 0}
.section-title{font-size:clamp(22px,2.6vw,32px); margin:0 0 14px}
.manifest{display:grid; gap:16px; grid-template-columns:1.2fr .8fr; align-items:center}
.manifest p{margin:0; color:#2b2e34}
.card{background:linear-gradient(180deg, #ffffff, #fbfcff); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 10px 30px rgba(15,17,21,.03)}
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}

/* Projects */
.projects-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.project{position:relative; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); min-height:240px; box-shadow:0 8px 26px rgba(15,17,21,.06)}
.project .media{position:absolute; inset:0; background:radial-gradient(600px 260px at 60% -10%, rgba(15,17,21,.08), transparent 60%), url('../images/placeholder-light.jpg') center/cover no-repeat; filter:saturate(.98)}
.project .overlay{position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.06)); opacity:.9}
.project .meta{position:absolute; inset:auto 0 0 0; padding:18px; display:flex; flex-direction:column; gap:6px; color:#0d0f13}
.project h3{margin:0; font-size:18px}
.project p{margin:0; color:var(--muted); font-size:14px}
.project:hover .overlay{background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.1));}
.project:hover .meta{transform:translateY(-2px)}

/* About blocks */
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(15,17,21,.04); border:1px solid var(--line); font-size:12px; color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--line); padding:36px 0 56px; color:var(--muted); background:linear-gradient(180deg, rgba(255,255,255,.6), transparent)}

/* Responsive */
@media (max-width:980px){
  .manifest{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .projects-grid{grid-template-columns:1fr}
  header{height:62px}
}
/* --- Hero animated GIF background --- */
.hero { position: relative; }
.hero .bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.40), transparent 60%),
    url('../images/background.gif') center/cover no-repeat;
  opacity: .35; /* зробить делікатнішим; можна 0.25–0.45 */
  filter: contrast(105%) saturate(105%) brightness(105%);
}
/* контент поверх фону */
.hero-inner{ position: relative; z-index: 1; }