:root{
    --nav-height: 72px;
    --card-width: 920px;
    --nav-bg: rgba(255,255,255,0.02);
    --accent: #1d2b55; /* dark navy */
    --muted: #6c7380;
  }
  
  /* basic reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#1f2937;
    background:#f3f4f6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* header */
  .site-header{
    height:var(--nav-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    background:transparent;
    position:relative;
    z-index:30;
  }
  .brand{
    font-size:20px;
    font-weight:600;
    color:var(--accent);
  }
  .top-nav .nav-link{
    margin-left:18px;
    text-decoration:none;
    color:var(--muted);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .top-nav .nav-link:hover{color:var(--accent)}
  
  /* hero */
  .hero {
    position: relative;
    min-height: 100vh; /* карточка будет по центру экрана */
    display: flex;
    align-items: center;   /* по вертикали */
    justify-content: center; /* по горизонтали */
    padding: 40px 20px;
    overflow: hidden;
  }  
  
  /* background image layer */
  .hero-bg{
    position:absolute;
    inset:0;
    background-image: url('694722.png');
    background-size:cover;
    background-position:center;
    filter:contrast(80%) saturate(60%) brightness(95%);
    transform:scale(1.05);
    z-index:0;
  }
  
  /* glass diagonal overlays for geometric look */
  .hero::before,
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .hero::before{
    background:linear-gradient(120deg, rgba(29,43,85,0.45) 0%, rgba(29,43,85,0.22) 35%, rgba(29,43,85,0.55) 100%);
    mix-blend-mode:multiply;
    opacity:0.95;
  }
  .hero::after{
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 40%);
    mix-blend-mode:soft-light;
  }
  
  /* centered card */
  .card {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: var(--card-width);
    background: linear-gradient(#ffffffcc, #f3f4f6cc);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(10, 15, 30, 0.25);
    overflow: hidden;
    z-index: 5;
    position: relative;
    transform: translateY(0);
  }
  
  
  /* left image */
  .card-left {
    flex: 0 1 25%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* right content */
  .card-right {
    flex: 1;
    padding: 34px 190px;
    color: var(--accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .name{
    margin:0;
    font-size:28px;
    font-weight:600;
  }
  .role{
    margin-top:6px;
    color:#2b4a8a;
    font-weight:600;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:0.08em;
  }
  .contact-list{margin-top:18px;font-size:14px;color:#374151}
  .contact-list dt{font-weight:700;display:inline-block;width:120px;color:#1f2937}
  .contact-list dd{display:inline-block;margin:0 0 8px 0;color:#334155}
  .socials{margin-top:18px}
  .social{display:inline-block;margin-right:10px;padding:6px 10px;border-radius:6px;background:transparent;border:1px solid rgba(29,43,85,0.06);font-weight:600;color:var(--accent);text-decoration:none}
  
  /* dark band */
  .dark-band {
    position: relative;
    z-index: 6;
    width: 5%;
    max-width: var(--card-width);
    background: var(--accent);
    padding: 18px 0;
    margin: 20px auto 0 auto; /* центрируем */
    box-shadow: 0 6px 18px rgba(10,15,30,0.2);
    display: flex;
    margin-top: auto;
    margin-right: 850px;
    justify-content: center;
    align-items: center;
  }

  .band-inner{display:flex;gap:18px;align-items:center;justify-content:center}
  .band-social{color:#fff;text-decoration:none;font-weight:700;padding:6px 10px;border-radius:6px}
  
  /* language switcher */
  .lang-switcher{
    position:absolute;
    right:28px;
    top:var(--nav-height);
    z-index:40;
  }
  .lang-btn{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.06);
    color:#fff;
    padding:8px 10px;
    margin-left:6px;
    border-radius:6px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
  }
  .lang-btn img{width:18px;height:12px;display:block}
  
  /* content sections */
  .section{padding:56px 20px;background:#f8fafc}
  .container{max-width:980px;margin:0 auto}
  .section h2{font-size:20px;color:#1f2937;margin-bottom:10px}
  .projects{list-style:none;padding-left:0}
  .link{color:#1d4ed8;text-decoration:none}
  
  /* footer */
  .site-footer{
    background:transparent;
    text-align:center;
    padding:36px 16px 60px;
    color:#4b5563;
  }
  
  /* --------- animations on load ----------
     we'll toggle class .is-loaded on body in JS
  ----------------------------------------*/
  [data-anim]{
    opacity:0;
    transform: translateY(18px) scale(0.995);
    transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
    will-change: opacity, transform;
  }
  body.is-loaded [data-anim]{
    opacity:1;
    transform: translateY(0) scale(1);
  }
  
  /* stagger using nth-child for nicer entrance */
  .card [data-anim]{transition-delay:0s}
  .card-left[data-anim]{transition-delay:.15s}
  .card-right[data-anim]{transition-delay:.28s}
  .dark-band[data-anim]{transition-delay:.4s}
  .hero [data-anim]{transition-duration:900ms}
  .section[data-anim]{transition-delay:.35s}
  .footer[data-anim]{transition-delay:.5s}
  
  /* responsive */
  @media (max-width:900px){
    .card{flex-direction:column}
    .card-left{flex-basis:auto}
    .card-right{padding:22px}
    .lang-switcher{right:12px;top:60px}
    .brand{font-size:18px}
    .top-nav{display:none}
  }