:root{
  /* Светлая тема — глобально для всего сайта */
  --bg:#ffffff;
  --text:#1c1c20;
  --muted:#5f6368;
  --card:#f7f7f9;
  --line:#efeef4;
  --accent:#68e1ff;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
img{max-width:100%;display:block;border-radius:16px}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}

/* ===== Header ===== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(180%);
  background-color:rgba(255,255,255,.7);
  transition:border-color .2s ease;
}
body.home .nav{border-color:transparent;}
.nav.nav--bordered{border-color:var(--line);}
body.home .nav.nav--bordered{border-color:var(--line);}
.brand{font-weight:600;letter-spacing:.2px}
.brand, .menu a{transition:color .2s ease}
.brand:hover{color:#6B5AFD}
.menu{display:flex;gap:20px}
.menu a{opacity:.9}
.menu a:hover{color:#6B5AFD}
.burger{display:none;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;border-radius:2px}
@media (max-width:860px){
  .menu{
    display:none;position:absolute;top:64px;right:16px;
    background:#fff;border:1px solid var(--line);padding:12px;border-radius:12px;flex-direction:column
  }
  .burger{display:block}
}
/* Меню: medium */
.nav .menu a{ font-weight: 500; }

/* ===== Layout ===== */
main{padding:0 20px}
body:not(.case-nda) .hero{
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:186px 0 60px;
  width:100%;
  background-color:#ffffff;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:30px;
}
.hero__bg dotlottie-player{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .6s ease;
}
.hero__bg .hero__birds{z-index:1;pointer-events:none;opacity:.5;}
.hero__bg dotlottie-player:not(.hero__birds){z-index:0;}
.hero__bg dotlottie-player.is-ready{opacity:1}
.hero__bg .hero__birds.is-ready{opacity:.5;}
.hero__bg .hero__birds.mobile-scale{transform:scale(1.25);}
.hero__content{
  position:relative;
  z-index:1;
  width:100%;
  padding:0 20px;
}
.hero__inner{max-width:1080px;margin:0 auto}
h1{font-size:clamp(32px,6vw,64px);line-height:1.05;margin:0 0 16px;font-weight:700}
h2{font-size:clamp(22px,4vw,36px);margin:0 0 12px}
h3{margin:0 0 6px}
.accent{color:var(--accent)}
.hero__highlight{
  background:linear-gradient(120deg,#1c1c20 0%,#6b5bff 50%,#1c1c20 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:heroGradient 8s ease-in-out infinite alternate;
}
.hero__mobile-break{display:inline;}
@keyframes heroGradient{
  from{background-position:0% 50%;}
  to{background-position:100% 50%;}
}
.hero__cta{display:flex;gap:12px;margin-top:12px}
.hero__scroll{
  display:flex;justify-content:center;
  margin-top:58px;
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.hero__scroll dotlottie-player{width:62px;height:62px}
.hero__scroll.is-hidden{opacity:0;visibility:hidden;transform:translateY(6px)}

@media (max-width:640px){
  body.home .hero h1{
    margin-bottom:30px;
    line-height:calc(1em + 3px);
  }
  .hero__mobile-break{display:block;}
  .hero p.muted{margin:0 0 30px;}
  .hero__bg .hero__birds{
    opacity:.5;
  }
  .hero__bg .hero__birds.mobile-scale{
    transform:scale(1.8);
    width:160%;
    height:140%;
    left:-30%;
    top:-20%;
  }
}

/* ===== Buttons ===== */
.btn{
  display:inline-block;padding:12px 16px;border-radius:12px;
  background:var(--text);color:#fff;font-weight:600;border:1px solid var(--text);
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn--ghost{background:transparent;color:var(--text);border:0}
.btn:hover{background:#6B5AFD;border-color:#6B5AFD}
.btn--ghost:hover{background:#fff;border-color:transparent;color:var(--text)}

/* ===== Sections / grids ===== */
.section-head{max-width:1080px;margin:40px auto 12px;padding-top:20px;border-top:1px solid var(--line)}

.work .grid{
  max-width:1080px;margin:0 auto 60px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px
}
@media (max-width:960px){.work .grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.work .grid{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid transparent;
  padding:10px;border-radius:20px;
  transition:transform .25s ease, border-color .25s ease
}
.card:hover{transform:translateY(-4px);border-color:#6B5AFD}
.card__meta{padding:10px 6px 4px}
.work .card__meta strong{display:block;line-height:1.4}
.work .card__meta .muted{margin-top:12px}
.work .card--pomni{position:relative}
.work .card--pomni .card__link{display:block;color:inherit;text-decoration:none}
.work .card--pomni .card-telegram{
  position:absolute;right:16px;bottom:14px;
  width:32px;height:32px;border-radius:999px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;transition:transform .2s ease;
}
.work .card--pomni .card-telegram svg{
  width:20px;height:20px;display:block;
}
.work .card--pomni .card-telegram:hover{transform:scale(1.05)}

/* CTA блок на главной */
.cta{
  max-width:1080px;margin:0 auto 80px;text-align:center;
  border-top:1px solid var(--line);padding-top:40px
}

/* ===== Footer ===== */
.footer{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:24px 20px;border-top:1px solid var(--line);
  background:#fff;
  text-align:center;
}

/* ===== Страницы кейсов ===== */
.case__hero{max-width:1080px;margin:40px auto 10px;padding: 20px;}
.media{max-width:1080px;margin:16px auto}
.case__grid{
  max-width:1080px;margin:20px auto 40px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
@media (max-width:960px){.case__grid{grid-template-columns:1fr}}
.block{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}

/* ===== About & Contact ===== */
.about,.contact{max-width:1080px;margin:40px auto}
.contact-page{margin-top:60px;}
.about .profile h1{margin-bottom:32px;}
.about .profile p{margin:0 0 24px;}
.about .skills{margin-top:60px;}
.about .skills .expertise-chips{margin-top:20px;}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  border:1px solid var(--line);padding:8px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.02))
}
/* отступ под плашками "Экспертиза" */
.about .chips{margin-bottom:28px;}
.about__lead{margin-bottom:12px;}
.about__bullets{display:grid;gap:5px;margin:12px 0 40px;font-size:16px;color:var(--text);}
.about__bullet-tight{margin-top:2px;}
.expertise-chips{display:flex;flex-wrap:wrap;gap:10px;row-gap:12px;margin-top:14px}
.expertise-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 14px;border-radius:999px;
  font-weight:600;font-size:15px;
  background:#f4f4f7;color:var(--text);
  border:1px solid transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.expertise-chip.chip--violet{background:#6B5AFD;color:#fff;border:0;}
.expertise-chip.chip--dark{background:#1c1c20;color:#fff;}
.expertise-chip.chip--gradient{background:linear-gradient(120deg,#6B5AFD 0%,#ff8fb8 50%,#68e1ff 100%);color:#fff;border:0;}
.expertise-chip.chip--outline{background:transparent;border-color:#d4d7df;}
.expertise-chip.chip--ghost{background:transparent;border-color:#6B5AFD;color:#6B5AFD;}
.expertise-chip.chip--black{background:#1c1c20;color:#fff;}
.expertise-chip.chip--pink{background:#ff8fb8;color:#1c1c20;}
.expertise-chip.chip--lime{background:#d2f36a;color:#1c1c20;}
.expertise-chip.chip--aqua{background:#7ae7ff;color:#0b1c2c;}
.expertise-chip.chip--indigo{background:#4656ff;color:#fff;}
.expertise-chip.chip--peach{background:#ffcf9d;color:#1c1c20;border:0;}
.expertise-chip.chip--mint{background:#b5f5d1;color:#0f2b1d;}
.expertise-chip.chip--sun{background:#ffd76f;color:#1c1c20;}
.expertise-chip.chip--steel{background:#e3e6ed;color:#1c1c20;}
.expertise-chip.chip--sand{background:#f1e5d0;color:#1c1c20;}
.expertise-chip.chip--sky{background:#c7deff;color:#0b1c2c;}
.expertise-chip.chip--figma{background:#6B5AFD;color:#fff;border:0;}
.expertise-chip.chip--adobe{
  background:#ff6767;
  color:#fff;
  border:0;
}
.expertise-chip.chip--outline{border-color:#d4d7df;color:var(--text);}
.expertise-chip.chip--ghost{border-color:#6B5AFD;color:#6B5AFD;background:transparent;}
.about__more{
  margin-top:72px;
  padding:16px 18px;
  border:0;
  border-radius:30px;
  background:#f9f9fb;
}
.about__more summary{
  cursor:pointer;
  font-weight:700;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
}
.about__more summary::marker{content:"";}
.about__more summary::after{
  content:"";
  margin-left:auto;
  width:18px;height:18px;
  mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%231c1c20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background:#1c1c20;
  transition:transform .2s ease;
}
.about__more[open] summary::after{transform:rotate(180deg);}
.about__more[open]{background:#f6f7fa;}
.about__more{margin-bottom:60px;}

/* Контакты — новый блок */
.contact-hero{
  padding:60px 20px 80px;
  background:#fff;
}
.contact-hero__inner{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.contact-hero__intro{
  background:#f7f7fa;
  border-radius:28px;
  padding:28px;
  box-shadow:0 10px 40px rgba(0,0,0,.05);
}
.contact-hero__intro h1{
  margin:0 0 16px;
  font-size:clamp(24px,4vw,40px);
}
.contact-hero__intro p{margin:0 0 18px;font-size:16px;}
.contact-hero__chips{
  display:flex;flex-wrap:wrap;gap:10px;row-gap:12px;
  margin:8px 0 14px;
}
.contact-hero__chips span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:999px;
  font-weight:600;font-size:14px;
  background:#6B5AFD;color:#fff;
  border:0;
}
.contact-hero__links{
  display:flex;gap:14px;flex-wrap:wrap;
  font-weight:600;
}
.contact-hero__links a{
  color:var(--text);
  padding:8px 0;
  border-bottom:1px solid #d4d7df;
}
.contact-hero__form{
  background:#f7f7fa;
  border-radius:28px;
  padding:28px;
  box-shadow:0 10px 40px rgba(0,0,0,.05);
  border:1px solid #e8eaf0;
}
.contact-hero__form h2{
  margin:0 0 14px;
  font-size:22px;
}
.contact-hero .form{
  margin-top:6px;
  gap:12px;
}
.contact-hero .form label{font-size:15px;}
.contact-hero .form textarea{min-height:140px;}

@media(max-width:900px){
  .contact-hero__inner{grid-template-columns:1fr;gap:18px;}
  .contact-hero{padding:50px 16px 70px;}
}

.contact__highlight{
  margin:10px 0 24px;
  padding:16px 18px;
  border-radius:14px;
  background:#f3f3f6;
  display:grid;
  gap:12px;
}
.contact__highlight-item{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:12px;
  font-size:18px;
  font-weight:600;
  color:var(--text);
}
.contact__highlight-item span{
  color:var(--text);
  font-weight:600;
}
.contact__highlight a{color:var(--text);font-weight:700}
.contact__icon svg{
  width:20px;height:20px;
  display:block;
  fill:none;
  stroke:var(--text);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.form{display:grid;gap:14px;margin-top:6px}
.form label{display:grid;gap:8px;font-size:16px;color:var(--muted)}
.form input,
.form textarea{
  padding:14px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font: inherit;                     /* одинаковый шрифт и размер */
}
.form input::placeholder,
.form textarea::placeholder{
  font: inherit;
  color: var(--muted);
  opacity: 1;
}
.form textarea{min-height:120px;resize:vertical}
.form .btn{
  justify-self:start;
  align-self:start;
  width:auto;
}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(10px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}

/* Кнопка "Назад к проектам" и отступ до футера */
.next{max-width:1080px;margin:40px auto 72px;padding:0 20px;text-align:center}
.next .btn{display:inline-block;margin:0 auto}

/* Карточка "парольного" гейта (если используется) */
.gate{
  max-width:1080px;margin:8vh auto 0;padding:24px;
  background:var(--card);border:1px solid var(--line);border-radius:20px
}

/* === СКВЕР-ПОИНТЫ ДЛЯ СПИСКОВ (NDA) === */
.case-nda{
  --dot-size: 8px;
  --dot-radius: 3px;
  --dot-color: #1c1c20;
  --dot-gap: 18px;
}
.case-nda ul.check,
.case-nda ul.mutelist{ list-style:none; margin:0; padding-left:0; }
.case-nda ul.check li,
.case-nda ul.mutelist li{
  position:relative;
  margin:6px 0;
  padding-left:calc(var(--dot-gap) + var(--dot-size));
  line-height:1.5;
}
.case-nda ul.check li::before,
.case-nda ul.mutelist li::before{
  content:"";
  position:absolute; left:0; top:0.74em; transform:translateY(-50%);
  width:var(--dot-size); height:var(--dot-size);
  border-radius:var(--dot-radius); background:var(--dot-color);
  
}

.case-nda .card--dark{
  --dot-color: #6B5AFD; /* полупрозрачный белый для ::before */
}

/* === NDA-страница: чипы hero и плашки «Боли клиентов» === */
.case-nda .hero .chips{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px; }
.case-nda .hero .chips span{
  background:#6B5AFD; color:#fff; border:0;
  padding:3px 12px; border-radius:12px; font-size:13px; font-weight:600; min-height:30px;
}
.case-nda .panel{
  background:#6B5AFD; border:0; border-radius:12px; color:#fff;
  padding:clamp(22px, 2.1vw, 26px);
}
.case-nda .panel .row{ display:grid; gap:10px; margin:10px 0; }
.case-nda .panel .bar,
.case-nda .panel .tag{
  display:flex; align-items:center;
  border-radius:12px; padding:10px 16px;
  font-size:16px; line-height:1.3; border:0; transition:none !important;
  font-weight:600; /* medium */
}
.case-nda .panel .bar{ background:#1c1c20; color:#fff; width:fit-content; }
.case-nda .panel .tag{
  background:#6B5AFD; color:#fff;
  display:inline-flex; width:fit-content; max-width:100%; align-self:flex-start;
}

/* Обо мне: чипы без обводки и с цветом */
.about .chips span{
  border:0;
  background:#6B5AFD;
  color:#fff;
  font-weight:500;
  border-radius:12px;
}