:root{
    --bg0:#0B1020;
    --bg1:#0A0F16;
    --text:#EAF0FF;
    --muted:rgba(234,240,255,.72);
    --line:rgba(255,255,255,.10);
    --glass:rgba(255,255,255,.06);
    --glass2:rgba(255,255,255,.10);
    --accent1:#6D5CFF; /* violet */
    --accent2:#4BB4FF; /* soft blue */
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --radius: 18px;
    --radius2: 26px;
    --max: 1120px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,var(--bg0),var(--bg1));
    overflow-x:hidden;
  }
  
  a{color:inherit;text-decoration:none}
  .container{width:min(var(--max),calc(100% - 40px)); margin:0 auto}
  
  #heroCanvas{
    position:fixed;
    inset:0;
    z-index:-1;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  
 /* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(10,15,22,.22); /* more transparent */
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header__inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Centered layout: left nav - logo - right nav */
.header__inner--centered{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}

/* Logo centered */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo--center{
  justify-self:center;
}

.logo__img{
  height: 46px;              /* было ~34 */
  width: auto;
  display: block;
  filter:
    drop-shadow(0 12px 26px rgba(109,92,255,.20))
    drop-shadow(0 6px 16px rgba(75,180,255,.12));
  opacity: 0.98;
}

/* На очень маленьких экранах чуть меньше */
@media (max-width: 480px){
  .logo__img{ height: 30px; }
}

.logo__text{
  font-weight:800;
  letter-spacing:.2px;
}

/* Nav left/right */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  font-weight:700;
  color:rgba(234,240,255,.72);
}
.nav a{
  padding:10px 6px;
  transition:.2s ease;
}
.nav a:hover{ color: rgba(234,240,255,1); }

.nav--left{ justify-self:start; }
.nav--right{ justify-self:end; }

.nav__pill{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  padding:10px 12px !important;
  border-radius:999px;
}

/* Burger */
.burger{
  display:none;
  justify-self:end;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:22px;
  height:2px;
  background:rgba(255,255,255,.85);
  margin:5px 0;
  border-radius:2px;
}

/* Mobile menu */
/* Mobile menu (hidden by default) */
.mobile{
  display:none;
  flex-direction:column;
  padding:10px 20px 18px;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(10,15,22,.55);
  backdrop-filter: blur(14px);
}

/* Mobile links */
.mobile a{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
}

/* Show mobile menu only when active */
.mobile.is-open{
  display:flex;
}

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:block; }
  .header__inner--centered{ grid-template-columns: 1fr auto 1fr; }
}
  
  /* Hero */
  .hero {
    position: relative;
    min-height: 100vh;          /* ВСЯ ВЫСОТА ЭКРАНА */
    width: 100%;
    display: flex;
    align-items: center;        /* вертикальное центрирование */
    overflow: hidden;
    padding-top: 96px;          /* чтобы navbar не перекрывал */
  }
  
  .hero__grid {
    width: 100%;
    display: grid;
    align-items: center;
  }

  .hero__content {
    max-width: 760px;
  }
  
  .hero__badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    color:rgba(234,240,255,.85);
  }

  .hero__grid--single {
    grid-template-columns: 1fr;
  }

  .hero h1{
    margin: 0 0 18px;
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.6px;
    max-width: 18ch;            /* удерживаем ширину, чтобы не уезжало */
    overflow-wrap: anywhere;    /* на всякий случай */
  }

.hero__lead {
  font-size: 1.05rem;
  opacity: 0.85;
  margin-bottom: 32px;
}
  .hero__cta{display:flex; gap:12px; flex-wrap:wrap}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:var(--text);
    font-weight:700;
    cursor:pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .btn:hover{transform: translateY(-1px); border-color:rgba(255,255,255,.22)}
  .btn--primary{
    background: linear-gradient(90deg, rgba(109,92,255,.9), rgba(75,180,255,.9));
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 14px 40px rgba(109,92,255,.15);
  }
  .btn--ghost{background:rgba(255,255,255,.05)}
  .hero__meta{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:18px;
  }
  .metaCard{
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
  }
  .metaCard__k{font-size:12px; color:rgba(234,240,255,.70); margin-bottom:4px}
  .metaCard__v{font-size:13.5px; color:rgba(234,240,255,.92); font-weight:600}
  
  .glassCard{
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    padding:16px 16px;
  }
  .glassCard__title{
    display:flex; align-items:center; gap:10px;
    font-weight:800;
    color:rgba(234,240,255,.92);
    margin-bottom:10px;
  }
  .glassCard__note{color:var(--muted); font-size:13px; margin-top:10px}
  .checklist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
  .checklist li{display:flex; gap:10px; align-items:flex-start; color:rgba(234,240,255,.86)}
  .checklist i{color:rgba(75,180,255,.95); margin-top:2px}
  
  .hero .container{
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
  }
  
  .hero__grid{
    width: 100%;
    padding-left: 8px;   /* micro-fix, чтобы текст не прилипал */
  }
  
  /* Sections */
  .section{padding:72px 0}
  .section--muted{
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .sectionHead h2{
    margin:0;
    font-size: clamp(22px, 2.4vw, 32px);
    letter-spacing:-.3px;
  }
  .sectionHead p{margin:10px 0 0; color:var(--muted); max-width: 70ch; line-height:1.6}
  
  /* Carousel */
  .carousel{
    margin-top:22px;
    position:relative;
    display:grid;
    grid-template-columns: 48px 1fr 48px;
    gap:14px;
    align-items:center;
  }
  .carousel__viewport{
    overflow:hidden;
    border-radius: var(--radius2);
  }
  .carousel__track{
    display:flex;
    gap:14px;
    padding:16px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    transform: translateX(0);
    transition: transform .4s ease;
  }
  .carousel__btn{
    height:48px; width:48px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    color:rgba(234,240,255,.92);
    cursor:pointer;
    transition:.2s ease;
  }
  .carousel__btn:hover{border-color:rgba(255,255,255,.25); transform: translateY(-1px)}
  .projectCard{
    width: 170px;
    flex:0 0 auto;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    cursor:pointer;
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
  }
  .projectCard:hover{transform: translateY(-2px); border-color:rgba(255,255,255,.22)}
  .projectCard__icon img{
    width:100%;
    height:100%;
    object-fit: contain;
    padding: 6px;
  }

  .projectCard__icon img{width:100%; height:100%; object-fit:cover}
  .projectCard__name{font-weight:800; font-size:14px; line-height:1.2}
  .projectCard__tag{color:rgba(234,240,255,.70); font-size:12px}
  
  .dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
  .dot{
    width:9px; height:9px; border-radius:999px;
    background:rgba(255,255,255,.20);
    border:1px solid rgba(255,255,255,.12);
    cursor:pointer;
  }
  .dot.is-active{background:linear-gradient(90deg, rgba(109,92,255,.9), rgba(75,180,255,.9))}
  
  .note{
    margin-top:16px;
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(234,240,255,.72);
    font-size:13px;
  }
  
  /* Cards */
  .cards{
    margin-top:22px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:14px;
  }
  .card{
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    padding:16px;
  }
  .card__icon{
    width:44px; height:44px; border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:10px;
  }
  .card h3{margin:0 0 8px; font-size:16px}
  .card p{margin:0; color:var(--muted); line-height:1.6; font-size:13.5px}
  
  /* Contact */
  .contactGrid{
    margin-top:22px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
  }
  .contactEmail a{font-weight:800}
  .form label{display:grid; gap:6px; margin-top:12px}
  .form input, .form textarea{
    width:100%;
    padding:12px 12px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.18);
    color:var(--text);
    outline:none;
  }
  .form textarea{min-height:140px; resize:vertical}
  .form input:focus,.form textarea:focus{border-color:rgba(75,180,255,.50)}
  .formStatus{margin-top:10px; color:rgba(234,240,255,.9); font-size:13px}
  .muted{color:var(--muted)}
  .tiny{font-size:12px}
  .hp{position:absolute; left:-9999px; opacity:0}
  
  /* Details */
  .details{padding:18px}
  .details__row{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .details__row:last-child{border-bottom:0}
  .details__k{color:rgba(234,240,255,.70)}
  .details__v{color:rgba(234,240,255,.92); font-weight:700}
  
  /* Footer */
  .footer{
    border-top:1px solid rgba(255,255,255,.08);
    padding:22px 0;
  }
  .footer__inner{
    display:flex; justify-content:space-between; align-items:center;
    gap:14px; flex-wrap:wrap;
  }
  .footer__brand{display:flex; align-items:center; gap:10px; font-weight:800}
  .footer__muted{color:rgba(234,240,255,.62); font-size:12.5px}
  .footer__right{display:flex; gap:14px; color:rgba(234,240,255,.80)}
  .footer__link:hover{color:var(--text)}
  
  /* Modal */
  .modal{position:fixed; inset:0; display:none; z-index:100}
  .modal[aria-hidden="false"]{display:block}
  .modal__backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.60);
  }
  .modal__panel{
    position:relative;
    width:min(920px, calc(100% - 28px));
    margin: 8vh auto;
    border-radius: 24px;
    border:1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(20,25,40,.95), rgba(10,15,22,.92));
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .modal__close{
    position:absolute; top:10px; right:10px;
    width:42px; height:42px; border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:rgba(234,240,255,.9);
    cursor:pointer;
  }
  .modal__body{padding:18px 18px 22px}
  .modal__top{display:flex; gap:14px; align-items:center}
  .modal__icon{width:62px; height:62px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.25); object-fit:cover}
  .modal__shotWrap{
    margin-top:14px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
  }
  .modal__shot{width:100%; display:block; object-fit:cover}
  
  /* Reveal animation */
  .reveal{opacity:0; transform: translateY(12px); transition: .7s ease}
  .reveal.is-in{opacity:1; transform: translateY(0)}
  
  /* Responsive */
  @media (max-width: 980px){
    .hero__grid{grid-template-columns: 1fr}
    .cards{grid-template-columns:1fr}
    .contactGrid{grid-template-columns:1fr}
    .details__row{grid-template-columns:1fr}
    .nav{display:none}
    .burger{display:block}
  }

  @media (max-width: 600px){
    .hero{
      padding-top: 84px; /* чуть меньше, чтобы всё влезало */
    }
    .hero h1{
      font-size: clamp(28px, 8vw, 40px);
      max-width: 16ch;
    }
  }