:root{
  --bg:#0f1115;
  --text:#e9eef5;
  --muted:#a7b0bf;
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.04);
  --card2:rgba(255,255,255,.06);
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  /* Softer gradient controls (мягче “фонари”) */
  --g-blue:   rgba(90,140,255,.16);
  --g-purple: rgba(190,95,255,.14);
  --g-cyan:   rgba(85,220,255,.11);
  --g-warm:   rgba(255,170,90,.08);
  --g-mint:   rgba(120,255,190,.06);

  /* Свет сверху/объём */
  --g-white:  rgba(255,255,255,.05);
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg); /* важно: фон теперь базовый, градиент рисуют псевдо-элементы */
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Градиентный слой (более явный, но still premium) */
body::before{
  content:"";
  position: fixed;
  inset: -55%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 700px at 50% 0%, var(--g-blue), transparent 60%),
    radial-gradient(980px 650px at 12% 35%, var(--g-purple), transparent 62%),
    radial-gradient(950px 650px at 88% 38%, var(--g-cyan), transparent 62%),
    radial-gradient(780px 520px at 78% 78%, var(--g-warm), transparent 60%),
    radial-gradient(980px 720px at 22% 85%, var(--g-mint), transparent 62%);

  filter: blur(78px);
  opacity: .80;

  transform: translateZ(0);
  will-change: transform;
}


/* Виньетка + общий “объём” */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1400px 1000px at 50% 10%, var(--g-white), transparent 72%),
    radial-gradient(1200px 900px at 50% 100%, rgba(0,0,0,.38), transparent 55%),
    radial-gradient(900px 700px at 0% 0%, rgba(0,0,0,.28), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(0,0,0,.28), transparent 60%);

  opacity: .92;
}

a{ color: var(--text); }
a:hover{ opacity: .95; }

.wrap{
  max-width: 1040px; /* чуть шире — меньше “ломает” строки */
  margin: 0 auto;
  padding: 64px 24px;
}

.hero{
  text-align:center;
  margin-top: 12px;
  margin-bottom: 24px;
}

h1{
  margin: 0;
  font-size: 54px;
  letter-spacing: -0.02em;
}

h2{
  margin: 10px 0 0 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(233,238,245,.92); /* было "как-то muted" — делаем единым */
}

.muted{ color: var(--muted); }

.heroText{
  margin: 18px auto 0 auto;
  text-align: center;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}

.heroLead{
  display: block;
  max-width: 112ch;   /* попробуй 112ch, можно 118ch */
  margin: 0 auto;
}

.heroSub{
  color: rgba(167,176,191,.96);
  margin-top: 10px;             /* аккуратный отступ между строками/абзацами */
  line-height: 1.70;
}
/* На очень узких экранах можно вернуть центрирование, если нравится */
@media (max-width: 520px){
  .heroText{ text-align: center; }
}

hr.sep{
  border:0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

/* Pills row (buttons) */
.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 18px;
  justify-content: center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
}

.pill:hover{
  background: rgba(255,255,255,.05);
}

.pill .ico{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
  opacity: .95;
}

/* Highlights (chips) */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top: 14px;
}

.chip{
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  color: rgba(233,238,245,.86);
}

/* Sections */
.section{
  margin-top: 34px;
}

.section h3{
  margin: 0 0 14px 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.panel{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 16px;
  box-shadow: var(--shadow);
}

.panel h4{
  margin: 0 0 10px 0;
  font-size: 14px;
  color: rgba(233,238,245,.92);
}

.bullets{
  margin: 0;
  padding-left: 18px;
}

.bullets li{
  margin: 8px 0;
}

.bullets b{ color: rgba(233,238,245,.98); }

/* Featured card / project cards */
.card{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 16px;
  box-shadow: var(--shadow);
}

.cardLink{
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}

.cardLink:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
}

.cardTitle{
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.cardMetaLine{
  margin-top: 6px;
  color: rgba(167,176,191,.95);
  font-size: 13px;
}

.cardText{
  margin-top: 14px;
  color: rgba(233,238,245,.90);
}

.cardCover{
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.cardCoverImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tagrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}

/* Tags (chips) — can be <span class="tag"> or <a class="tag"> */
.tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: rgba(233,238,245,.86);
}

a.tag{
  text-decoration: none;
  color: rgba(233,238,245,.86);
}

a.tag:hover{
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
  opacity: 1;
}

.cardActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  text-decoration:none;
  background: rgba(255,255,255,.03);
  font-weight: 700;
  font-size: 13px;
}

.btn:hover{ background: rgba(255,255,255,.05); }

/* Experience list */
.expItem{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  margin-top: 12px;
}

.expTop{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.expRole{
  margin:0;
  font-size: 15px;
  font-weight: 800;
}

.expLine{
  font-size: 13px;
  color: rgba(167,176,191,.98);
}

.expBullets{
  margin-top: 12px;
  margin-bottom: 0;
  padding-left: 18px;
}

.expBullets li{ margin: 8px 0; }

/* Projects grid page */
.cardsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.filterRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top: 18px;
}

.filterPill{
  display:inline-flex;
  align-items:center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  background: rgba(255,255,255,.02);
  color: rgba(233,238,245,.9);
}

.filterPillActive{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

.projectsSection{
  margin-top: 26px;
}

.projectsSectionHeader{
  margin-bottom: 8px;
}

.projectsSectionTitle{
  margin: 0;
  font-size: 20px;
}

.projectsSectionDescription{
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(167,176,191,.95);
}

/* Project detail page */
.projectHeader{
  text-align: left;
  margin-bottom: 22px;
}

.projectHeader h1{
  font-size: 40px;
  margin-bottom: 6px;
}

.projectMeta{
  color: rgba(167,176,191,.92);
  font-size: 13px;
  margin-top: 4px;
}

.projectSubtle{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(167,176,191,.85);
}

.projectRole{
  margin-top: 10px;
  font-weight: 700;
}

.projectText{
  color: rgba(233,238,245,.92);
  margin: 0;
}

.mediaHero{
  margin-top: 14px;
}

/* Project page hero media */
.projectHero{
  max-width: 860px;
  margin: 0 auto;
}

/* make hero less tall (widescreen) */
.projectHero .cardCover{
  aspect-ratio: 21 / 9;
}

.mediaGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.mediaTile{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  box-shadow: var(--shadow);
  display: block;
}

.mediaThumb{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

.mediaPlay{
  position: absolute;
  inset: auto auto 16px 16px;
  background: rgba(15,17,21,.75);
  border: 1px solid rgba(255,255,255,.18);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.mediaCaption{
  padding: 12px 14px 14px;
  background: rgba(15,17,21,.7);
  backdrop-filter: blur(10px);
}

.mediaTitle{
  font-weight: 700;
  font-size: 14px;
}

.mediaNote{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(167,176,191,.92);
}

.mediaMore{
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}

.mediaMore summary{
  cursor: pointer;
  font-weight: 600;
  color: rgba(233,238,245,.9);
}

/* Footer nav */
.backRow{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}
.backRow a{
  color: rgba(233,238,245,.86);
  text-decoration:none;
  border-bottom: 1px dashed rgba(255,255,255,.25);
}
.backRow a:hover{ opacity:.95; }

/* Skills */
.skillsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.skill{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
}

.skillTitle{
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 6px 0;
  color: rgba(233,238,245,.95);
}

.skillMeta{
  font-size: 12px;
  color: rgba(167,176,191,.98);
  margin: 0;
}

/* Responsive */
@media (max-width: 860px){
  h1{ font-size: 42px; }
  .wrap{ padding: 54px 18px; }
  .grid2{ grid-template-columns: 1fr; }
  .cardsGrid{ grid-template-columns: 1fr; }
  .skillsGrid{ grid-template-columns: 1fr 1fr; }
  .projectHeader h1{ font-size: 32px; }
  .mediaGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .skillsGrid{ grid-template-columns: 1fr; }
}