/* light theme variables (toggled by body.light) */
  body.light{--bg:#f3f4f7;--card:rgba(255,255,255,0.9);--card-border:rgba(10,10,12,0.06);--muted:#5b6470;--text:#0b1220;--accent:#6b39ff;--card-bg: rgba(180,180,180,0.16);}

  :root{
    --bg:#0b0b0b;
    --card:rgba(20,20,25,0.55);
    --card-border:rgba(255,255,255,0.08);
    --muted:#9aa0a6;
    --text:#e6e9ee;
    --accent:#7c4dff;
    --radius:14px;
    --glass-blur:14px;
    --maxw:1280px;
    --gap:28px;
  }
  html,body{height:100%;margin:0;}
  body{
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg); transition: background .25s ease;
    color:var(--text);
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:36px 36px 36px 96px;}
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .brand{display:flex;align-items:center;gap:14px;}
  .logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#4dd2ff);display:grid;place-items:center;color:#020202;font-weight:800;}
  nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:500;}
  nav a:hover{color:#fff;}

  .name-wrapper{position:relative; display:inline-flex; align-items:center; gap:8px;}
  
  .owner-name{
    font-weight:350;
    font-size:27px;
    padding:6px 8px;
    border-radius:6px;
    cursor:pointer;
    position:relative;
  }
  .owner-name::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:2px;
    height:2px;
    background:linear-gradient(90deg, var(--accent), #bf54e3);
    border-radius:2px;
    transform:scaleX(0.6);
    transition:transform .25s ease;
    transform-origin:center;
  }
  a.work {
  text-decoration: none !important;
}

  /* Внешний файл styles.css */

  .owner-name:hover::after{
    transform:scaleX(1);
  }

  .owner-name:hover{
    color:#fff;
  }

  .header-card{
    position:absolute;
    right:calc(100% + 15px);
    top:0;
    width:300px;
    background:var(--card);
    border:1px solid var(--card-border);
    padding:14px;
    border-radius:12px;
    backdrop-filter:blur(10px);
    box-shadow:0 18px 40px rgba(0,0,0,0.6);
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:60;
  }
  .name-wrapper:hover .header-card,
  .name-wrapper:focus-within .header-card{
    opacity:1; transform:none; pointer-events:auto;
  }

  .hero{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:var(--gap);
    align-items:stretch;
    margin-top:24px;
  }
  .hero > *{
    height:100%;
  }
  .card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;backdrop-filter:blur(var(--glass-blur));height:100%;}

  .bio h1{margin:0 0 12px;font-size:28px;font-weight:800;}
  .bio p{margin:0 0 16px;color:var(--muted);}
  .roles{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .pill{background:rgba(255,255,255,0.04);padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,0.03);}
  .portfolio{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
  .work {
    flex: 1 !important;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 15px;
    text-align: center;
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

  .contact-card{display:flex;flex-direction:column;gap:12px;height:100%;}
  .photo{height:220px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08));display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--muted);border:1px solid rgba(255,255,255,0.04);}

  .contact-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02);}
  .contact-row button{background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;}

  .theme-toggle{position:fixed;right:20px;bottom:20px;background:rgba(255,255,255,0.06);padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;}

  @media (max-width:960px){
    .hero{grid-template-columns:1fr;gap:18px;}
    .header-card{right:auto;left:0;top:calc(100% + 8px);}
    .photo{height:160px;}
  }

/* dual theme logos */
.theme-logo-dark,
.theme-logo-light { width:100%; height:100%; object-fit:cover; border-radius:10px; position:absolute; inset:0; }
.theme-logo-light { display:none; }
body.light .theme-logo-dark { display:none; }
body.light .theme-logo-light { display:block; }
.photo{position:relative; overflow:hidden;}


body.light .owner-name:hover {
    color: #222 !important;
}


.work {
    flex: 1 !important;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 15px;
    text-align: center;
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.work:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: #000;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}


/* contact row hover effects */
.contact-row:hover {
    background: rgba(0,0,0,0.15);
    transition: background .2s ease;
}
body.light .contact-row:hover {
    background: rgba(0,0,0,0.05);
}

.portfolio { margin-top: 25px; }

.work:hover {
    box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
    position: relative;
}
.work:hover 

.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}




.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}




/* Improved tooltips */
.work {
    flex: 1 !important;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 15px;
    text-align: center;
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}



.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}



/* arrow */


/* show tooltip on hover */
.work:hover 

.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}




/* Light theme tooltip */
body.light 

.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}



body.light 




.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}



/* Light theme version */
body.light 

.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Light theme */
body.light 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}


/* Show on hover */
.work:hover 
.tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px; /* match .work padding */
    background: rgba(30,30,30,0.80);
    backdrop-filter: blur(14px);
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}




body.light .tooltip {
    background: rgba(255,255,255,0.95);
    color: #000;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.work:hover .tooltip { opacity:1; transform:translateY(0);} 
.name-status h3 { margin:0;}
.status-dot { width:12px;height:12px;border-radius:50%;transition:.3s;background:#30d158;box-shadow:0 0 8px #30d158;}
.status-text { font-size:13px;font-weight:600;color:#30d158;}
.status-offline { background:#a1a1a1 !important; box-shadow:none !important;}
.status-text-offline { color:#a1a1a1 !important;}


.name-status { display:flex; align-items:center; gap:10px; }
.name-status h3 { margin:0; padding:0; line-height:1; }
.status-dot { position:relative; top:0; }


.hover-menu {
    display: flex;
    gap: 32px;
    margin-top: 10px;
}
.hover-menu .menu-item {
    position: relative;
    cursor: default;
    font-size: 17px;
    color: var(--text);
}
.hover-menu .hover-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    top: -35px;
    width: max-content;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    transition: 0.25s ease;
}
:root {
    --card-bg: rgba(255,255,255,0.05);
    --text: #ddd;
}
.light-theme {
    --card-bg: rgba(0,0,0,0.07);
    --text: #222;
}
.hover-menu .menu-item:hover .hover-card {
    transform: translateX(-50%) translateY(-15px);
    opacity: 1;
}


/* FIX: ensure project tiles only react to direct hover and don't stretch */
.portfolio {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.work {
    flex: 1 !important;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 15px;
    text-align: center;
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.work:hover {
  z-index: 30;
}
/* Tooltip stays non-interactive except when parent .work hovered */
.work .tooltip { pointer-events: none; }
/* ensure hover only when directly over .work, not parent container */
.portfolio .work:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}
/* if .hero or other parent had align-items:stretch, override */
.hero > * { align-self: start; }


/* Stretch project cards evenly across full width */
.portfolio {
    display: flex !important;
    gap: 16px;
    width: 100%;
}
.work {
    flex: 1 !important;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 15px;
    text-align: center;
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Center nav over right block */
.hover-menu {
    width:360px;
    margin-left:auto;
    margin-right:0;
    justify-content:center;
}

#typewriter-text {
  white-space: nowrap; /* Чтобы текст не переносился */
  overflow: hidden; /* Скрывает текст, который выходит за пределы */
  animation: typing 0.7s steps(10, end), blink-caret 0.75s step-end infinite;
}

/* Анимация печати */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}