/* =========================================
   TOKENS & GLOBAL
   ========================================= */
:root{
  --btn1:#a0c4ff;
  --btn2:#ffafcc;
  --link:#6f7fb0;
  --link-hover:#cc7e9c;
  --vhpx:100svh;          /* реальная высота (обновляется JS) */
  --sbw:calc(100vw - 100%); /* ширина скроллбара для lock */
  --lb-chrome:140px;        /* высота контролов/подписи в лайтбоксе */
}

*,*::before,*::after{ box-sizing:border-box; }
/* html,body{ overflow-x:clip; height:var(--vhpx); } */
/* Глобально фиксируем высоту экрана и убираем вертикальный скролл */
html, body{
  height: 100dvh;        /* нормальные браузеры */
  overflow-y: hidden;    /* убираем тупой вертикальный скролл */
}
@supports (height: 100svh){
  html, body{ height: 100svh; } /* iOS/мобильные */
}

/* =========================================
   BASE LAYOUT
   ========================================= */
body{
  margin:0;
  /* min-height:100vh; */
body{ min-height:auto; }
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(100deg,#cce8f4,#fbe7f5);
  font-family:"Genos",Arial,sans-serif;
  font-size:17px;
  color:#333;
}
.card{
  width:min(920px,92vw);
  padding:5px;
  padding-bottom: 20px;
  text-align:center;
  background-color:rgba(255,255,255,.7);
  border:1px solid #fff;
  border-radius:12px;
  opacity:0;
  animation:fadeIn 1.2s ease-out forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }

/* Typography */
.card>h1{
  font-weight:700;
  line-height:1.1;
  margin:8px 0 10px;
  color:#333;
}
.card>h1 .emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-weight:400;
}
img{ width:200px; }

/* Buttons & links */
.btn{
  background:linear-gradient(100deg,var(--btn1),var(--btn2));
  color:#fff;
  font-size:16px;
  /* font-weight:bold; */
font-family: 'Genos';
  padding:6px 12px;
  border:0;
  border-radius:12px;
  cursor:pointer;
transition:.3s ease; transform:scale(1);
}
.btn:hover{ transform:scale(1.05); padding:8px 16px; }

a{ color:var(--link); text-decoration:none; transition:color .2s ease; }
a:hover, a:focus{ color:var(--link-hover); text-decoration:underline; }
a:visited{ color:var(--link); }

/* Headline with line */
.line-head{
  position:relative;
  margin:16px 0;
  text-align:center;
  letter-spacing:.2px;
  color:#333;
}
.line-head::before{
  content:"";
  display:block;
  height:2px;
  width:10%;
  margin:0 auto 8px;
  border-radius:2px;
  background:linear-gradient(100deg,var(--btn1),var(--btn2));
  filter:saturate(130%) contrast(110%);
  opacity:.9;
}

/* Profile header */
.profile-header{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:30px 0;
}

/* =========================================
   MODAL
   ========================================= */
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.3);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
  perspective:1000px; /* для анимации */
}
.modal.show{ opacity:1; pointer-events:auto; }
.modal-content{
  position:relative;
  /* width:clamp(160px,88vw,540px); */
  width: min(920px, 92vw);
  /* max-height:calc(var(--vhpx) - 48px); */
  background:#fff; color:#222;
  padding:24px 20px 22px;
  border:1px solid #fff;
  border-radius:16px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  overflow:auto;
  scrollbar-gutter:stable both-edges;
  clip-path:inset(0 50% 0 50%);
  transform:translateZ(0) scale(.98) rotateY(6deg);
  filter:blur(8px) saturate(110%);
  opacity:0;
  will-change:transform,clip-path,filter,opacity;
}

@media (min-width: 561px) {
  .modal-content {
    width: 540px;
  }
}
.modal.show .modal-content{
  animation: hyperUnfold .25s cubic-bezier(.1,.8,.5,1) forwards,
             settle .1s ease-in .25s forwards;
}

.close-btn{
  position:absolute; top:16px; right:16px;
  width:24px; height:24px;
  background:none; border:0; color:transparent; cursor:pointer;
}
.close-btn::before,
.close-btn::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:14px; height:1.5px; background:#b993d6; transform-origin:center;
}
.close-btn::before{ transform:translate(-50%,-50%) rotate(45deg); }
.close-btn::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* Form + floating labels */
.modal-content h2{ margin-top:10px !important; font-size:22px; text-align:center; }
.modal-content form div{ margin-bottom:20px; }
.modal-content label{ display:block; margin-bottom:6px; font-size:15px; color:#444; }
.form-group{ position:relative; margin-bottom:20px; }
input, textarea{
  width:100%; padding:14px 18px; font-size:16px;
  min-height: 10px;
  border:1px solid transparent;
  border-radius:10px;
  background-origin:border-box;
  background-clip:padding-box, border-box;
  background-image:linear-gradient(#fff,#fff), linear-gradient(100deg,var(--btn1),var(--btn2));
  color:#333; outline:none; box-shadow:none;
}
form textarea{ min-height:160px; box-sizing:border-box; vertical-align:top; }
label{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:16px; color:#777; pointer-events:none; transition:all .3s ease;
}
input:focus+label, textarea:focus+label,
input:not(:placeholder-shown)+label, textarea:not(:placeholder-shown)+label{
  top:-10px; font-size:12px; color:#333;
}
input:focus, textarea:focus{
  background-image:linear-gradient(#fff,#fff), linear-gradient(280deg,var(--btn1),var(--btn2));
  box-shadow:0 0 0 2px rgba(160,196,255,.4);
}
input::placeholder, textarea::placeholder{ visibility:hidden; }
.form-group.topic-field{ height:0; overflow:hidden; display:none; } /* honeypot */
.rocket-icon{ display:inline-block; margin-right:6px; transition:transform 1s ease-in, opacity 1s ease-in; }
#form-success{ display:none; text-align:center; padding-top:20px; color:#a0c4ff; font-size:16px; font-weight:bold; }

/* Lock body on modal open */
html.modal-open, body.modal-open{
  overflow:hidden;
  padding-right:var(--sbw);
  overscroll-behavior:none;
}

/* =========================================
   LIGHTBOX v2 (fit-to-image, без дублей)
   ========================================= */
.lb2{
  position:fixed; inset:0; display:none; perspective:1000px;
}
.lb2[aria-hidden="false"]{
  display:flex; align-items:center; justify-content:center;
}
.lb2-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.30); }
.lb2-dialog{
  position:relative; z-index:1;
  margin:0; padding:8px 10px;
  background:#fff; color:#222;
  border:1px solid #fff; border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  width:fit-content; max-width:min(1000px,94vw);
  height:auto; max-height:none; outline:none;
  clip-path:inset(0 50% 0 50%);
  transform:translateZ(0) scale(.98) rotateY(6deg);
  filter:blur(8px) saturate(110%);
  opacity:0; will-change:transform,clip-path,filter,opacity;
}
.lb2[aria-hidden="false"] .lb2-dialog{
  animation: hyperUnfold .25s cubic-bezier(.1,.8,.5,1) forwards,
             settle .1s ease-in .25s forwards;
}



/* Controls, dots, caption */
.lb2-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 10px 4px;
}
.lb2-dots{ display:flex; gap:8px; flex:1; justify-content:center; flex-wrap:wrap; }
.lb2-dot{ width:7px; height:7px; border-radius:50%; background:#e7e7ef; border:0; cursor:pointer; }
.lb2-dot.on{ background:#a0c4ff; }
.lb2-caption{ text-align:center; color:#555; padding:0 10px 10px; min-height:20px; }

/* Nav braces + close */
.lb2-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px;
  background:transparent; border:0; cursor:pointer; outline:none;
  color:transparent; z-index:30; opacity:.9; transition:opacity .15s linear;
}
#lb2Prev{ left:6px; } 
#lb2Next{ right:6px; }
.lb2-nav:hover, .lb2-nav:focus-visible{ opacity:1; }
.lb2-nav:disabled{ opacity:.35; pointer-events:none; }
.lb2-nav::before{
  content:'{'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:'Times New Roman', Times, serif; font-weight:300;
  font-size:clamp(22px,6.2vh,42px); line-height:1; letter-spacing:-2px; color:#c2cbff;
  pointer-events:none;
}
#lb2Next::before{ content:'}'; }
.lb2-close{
  position:absolute; top:8px; right:8px;
  z-index:1000; background:transparent; border:0; border-radius:6px;
  color:#b993d6; font-size:44px; line-height:40px; cursor:pointer; opacity:.85;
}
.lb2-close:hover{ opacity:1; }

/* =========================================
   CERTIFICATES SLIDER
   ========================================= */
#certs.certs{
  --cell:180px; --logoH:100px; --gap:14px; --edge:30px; --braceW:22px;
  --padL:10px; --padR:0px; --padL-end:2px; --padR-end:14px;
}
#certs h3{ margin:18px 18px 0; }
#certs .certs-slider{
  position:relative; margin:0 auto; line-height:0; overflow:hidden;
  width:100%;
  max-width:min(92vw, calc(var(--cell)*3 + var(--gap)*2 + var(--edge)*2));
}
#certs .certs-viewport{
  position:relative; height:var(--logoH); min-height:var(--logoH);
  overflow:hidden; padding-left:var(--padL); padding-right:var(--padR);
}
#certs .certs-track{
  display:flex; align-items:center; gap:var(--gap);
  padding:0 var(--edge);
  transition:transform .35s ease; transform:translate3d(0,0,0);
  will-change:transform;
}
#certs .certs-badge{
  flex:0 0 var(--cell); height:var(--logoH); min-width:0;
  display:flex; align-items:center; padding:0; border:0; background:transparent;
  appearance:none; outline:none; cursor:pointer;
}
#certs .certs-logo{
  display:block; width:100%; height:var(--logoH);
  background:linear-gradient(100deg,var(--btn1),var(--btn2));
  -webkit-mask-image:var(--logo); mask-image:var(--logo);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-size:auto 140%;    mask-size:auto 140%;
  filter:contrast(118%); transition:transform .16s ease, filter .16s ease;
}
#certs .certs-badge:hover .certs-logo{ transform:scale(1.3); filter:contrast(120%); }
#certs .certs-nav{
  position:absolute; top:0; bottom:0; width:var(--braceW);
  background:transparent; border:0; padding:0; margin:0;
  cursor:pointer; z-index:20; font-size:0; color:transparent; outline:0;
}
#certs .certs-prev{ left:0; }
#certs .certs-next{ right:0; }
#certs .certs-nav::before{
  content:'{'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:'Times New Roman', Times, serif; font-weight:300;
  font-size:clamp(20px,6.5vh,48px); line-height:1; letter-spacing:-2px;
  color:#c2cbff; text-shadow:0 0 10px rgba(171,141,209,.18), 0 1px 0 rgba(255,255,255,.45);
  transform:translateY(1px); pointer-events:none;
}
#certs .certs-next::before{ content:'}'; }
#certs .certs-slider:has(.certs-next:disabled) .certs-viewport{
  padding-left:var(--padL-end); padding-right:var(--padR-end);
}

/* =========================================
   ANIMATIONS (shared)
   ========================================= */
@keyframes hyperUnfold{
  0%   { clip-path:inset(0 50% 0 50%); opacity:0; filter:blur(10px); transform:scale(.96) rotateY(12deg); }
  40%  { clip-path:inset(0 28% 0 28%); opacity:.6; filter:blur(6px); transform:scale(1.02) rotateY(4deg); }
  70%  { clip-path:inset(0 8%  0 8% ); opacity:.95; filter:blur(3px); transform:scale(1.01) rotateY(1deg); }
  100% { clip-path:inset(0 0   0 0  ); opacity:1; filter:blur(0);   transform:scale(1) rotateY(0); }
}
@keyframes settle{
  0%{ transform:scale(1) }
  50%{ transform:scale(1.008) }
  100%{ transform:scale(1) }
}
@media (prefers-reduced-motion:reduce){
  .modal .modal-content,
  .lb2 .lb2-dialog{
    clip-path:none !important; transform:none !important;
    filter:none !important; opacity:1 !important; animation:none !important;
  }
}

/* =========================================
   UTILITIES
   ========================================= */
.mbr{ color:var(--link); }

/* =========================================
   DESKTOP/TABLET (>=561px)
   ========================================= */
@media (min-width:561px){
  html,body{ height:100dvh; }
  @supports(height:100svh){ html,body{ height:100svh; } }
  body{
    min-height:100dvh;
    display:grid; place-items:center;
    overflow-y:clip; padding:0;
  }
  .card{ margin:0; max-height:calc(100dvh - 2px); }
  .profile-header{ margin:22px 0; gap:20px; }
  .card>h1{ margin:6px 0 8px; }
  #certs h3{ margin:12px 12px 0; }

}

/* =========================================
   MOBILE (<=560px)
   ========================================= */
@media (max-width:560px){
  body{
    align-items:flex-start;
    display:grid; place-items:center;
    overflow:hidden; padding:0;
    height:var(--vhpx); min-height:var(--vhpx);
  }
  .card{
    padding:14px;
    margin:0;
    /* max-height:calc(var(--vhpx) - 20px); */
    width:94%;
  }
  .profile-header{
    flex-direction:column; align-items:center;
    gap:10px; margin:14px 0 16px;
  }
  .profile-header img{ width:150px; }
  .card>h1{ font-size:clamp(22px,4.8vw,28px); margin:6px 0 8px; }

  /* Contacts stacked */
  .card p:last-of-type{
    display:flex; flex-direction:column; align-items:center;
    gap:10px; margin:18px 0 6px;
  }
  .card p:last-of-type nobr{ line-height:1; display:block; }

  /* Lightbox tweaks */
  .lb2-nav{ width:56px; height:56px; }
  #lb2Prev{ left:4px; } 
  #lb2Next{ right:4px; }
  .lb2-slide img{
    max-width:88vw;
    max-height:calc(100svh - var(--lb-chrome));
  }
  .lb2-dot{ width:10px; height:10px; }

  /* Slider → 2 лого */
  #certs.certs{
    --cell:135px; --logoH:70px; --gap:10px; --edge:10px; --braceW:34px;
    --padL:8px; --padR:8px; --padL-end:8px; --padR-end:8px;
  }
  #certs .certs-slider{
    max-width:calc(var(--cell)*2 + var(--gap)*1 + var(--edge)*2 + var(--braceW)*2);
    overflow:visible; /* скобки видны */
  }
  #certs .certs-nav{
    position:absolute !important; top:0; bottom:0; width:var(--braceW);
    display:flex; align-items:center; justify-content:center;
    min-height:44px;
  }
  #certs .certs-viewport{
    margin:0 var(--braceW); width:auto; overflow:hidden;
  }


form textarea {
  width: 100%;
  max-height: 80px !important;
  transition: min-height .25s ease;
}



}


.lb2-viewport{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:6px 8px; overflow:hidden;
  height:auto !important; min-height:auto !important;
  scrollbar-gutter:stable both-edges;
}


/* Лайтбокс: пока ждём первую картинку */
.lb2-viewport.loading{
  min-height: calc(60svh - var(--lb-chrome)) !important;
  position: relative;
}
.lb2-viewport.loading::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border-radius:50%;
  border:3px solid #e7e7ef; border-top-color:#a0c4ff;
  animation: lb2spin .8s linear infinite;
}
@keyframes lb2spin{ to{ transform: rotate(360deg); } }


.lb2-slide{
  display:none;              
  place-items:center;
}
.lb2-slide.on{
  display:grid;             
}

.lb2-slide img{
  display:block; width:auto; height:auto; object-fit:contain;
  max-width:calc(94vw - 24px);
  max-height:calc(96svh - var(--lb-chrome));
  border-radius:10px; background:transparent; box-shadow:inset 0 0 0 1px #f1f1f5;
}

.lb2-nav{ top: var(--lb2-mid, 50%); transform: translateY(-50%); }
.lb2-nav{ display:none !important; }
@media (max-width:560px){
  .lb2-viewport{ touch-action: pan-y; }
}

.lb2[aria-hidden="false"] .lb2-dialog {
  animation: hyperUnfold .25s cubic-bezier(.1,.8,.5,1) forwards,
             settle .1s ease-in .25s forwards;
}


.lb2-dialog {
  animation-fill-mode: forwards;
}
.lb2-dialog.done {
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
}


.lb2-slide img{
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.lb2-slide.pre-enter-from-right img{ transform: translateX(28px); opacity:.01; }
.lb2-slide.pre-enter-from-left  img{ transform: translateX(-28px); opacity:.01; }
.lb2-slide.leaving-left         img{ transform: translateX(-28px); opacity:.01; }
.lb2-slide.leaving-right        img{ transform: translateX(28px);  opacity:.01; }

.certs-nav:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.lb2-slide{
  display:none;
  place-items:center;
  opacity:0;
  transition:opacity .28s ease, transform .28s ease; /* движение + плавность */
}
.lb2-slide.on,
.lb2-slide.leaving{ display:grid; }
.lb2-slide.on{ opacity:1; }
.lb2-slide.leaving{ position:absolute; inset:0; pointer-events:none; }


.modal-content,
.lb2-dialog{
  overflow: hidden;                 /* обрезает Blur/clip-path по радиусу */
  background-clip: padding-box;     /* не даёт фону/бордеру «выползать» */
  -webkit-mask-image: radial-gradient(#000 98%, #0000 100%); /* AA в WebKit */
  backface-visibility: hidden;      /* убирает артефакты композитинга */
}

.modal-content,
.lb2-dialog{
  border: 0;                         /* вместо 1px solid #fff */
  box-shadow:
    0 10px 40px rgba(0,0,0,.18),
    0 0 0 1px #fff inset;            /* визуально тот же «бордер» */
}

.modal-content,
.lb2-dialog{
  background:#fff;
  border-radius:12px;
  border:1px solid #fff;                 /* тонкая белая рамка */
  background-clip:padding-box;           /* не даём бордеру смешиваться */
  box-shadow:none;                        /* убираем старую тень */
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.18)); /* чистая внешняя тень */
}


/* @keyframes modalInClean{
  0%   { opacity:0; transform:translateY(8px) scale(.985) }
  100% { opacity:1; transform:translateY(0)  scale(1)     }
}
.modal.show .modal-content,
.lb2[aria-hidden="false"] .lb2-dialog{
  animation: modalInClean .22s cubic-bezier(.1,.8,.5,1), settle .10s .22s;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.18));
}


.modal-content::before,
.lb2-dialog::before{ content:none !important; }
.modal-content,
.lb2-dialog{
  -webkit-mask-image:none !important;
  clip-path:none !important;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.18)) !important;
} */

.modal-content::before,
.lb2-dialog::before{ content:none !important; }
.modal-content,
.lb2-dialog{
  -webkit-mask-image:none !important;

}

@supports (height: 100dvh) {
  .modal {
    position: absolute; 
  }
}

form textarea {
  width: 100%;
  min-height: 0px;
  max-height: 200px;
  transition: min-height .25s ease;
}
/* ===== Landscape fix for modal ===== */
@media (orientation: landscape) and (max-height: 480px) {
  .modal {
    align-items: flex-start !important;
  }
  .modal-content {
    margin-top: 4vh !important;
    transform: none !important;
    max-height: 90vh !important;
  }
form textarea {
  width: 100%;
  min-height: 20px;
  max-height: 50px;
  transition: min-height .25s ease;
}
}
p.contact{
  display:flex; flex-direction:row; align-items:center;
  flex-wrap: nowrap;justify-content: center;
  gap:10px; margin:0px 0 6px 0;
}