:root{
  --accent:#ff6a00;
  --panel:#050505;
  --text:#ffffff;
  --muted:#a5a5a5;
  --page-pad:clamp(16px,3vw,48px);
}
*{box-sizing:border-box}
html{min-height:100%;background:#3e3e3e}
body{
  margin:0;
  min-height:100%;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#3e3e3e;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%;height:auto}

.page{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  padding:var(--page-pad);
}
.page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(16,16,16,.08) 0%,rgba(16,16,16,.04) 52%,rgba(16,16,16,.02) 100%),
    url("../img/background.jpg") center center/cover no-repeat;
}
.page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.10));
  pointer-events:none;
}

.card{
  width:min(980px,60vw);
  min-height:320px;
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  padding:34px 42px 34px 28px;
  border-radius:30px;
  background:rgba(0,0,0,.96);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  transform:translateX(-7vw);
}

.visual{
  position:relative;
  min-height:255px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.portrait{
  position:relative;
  z-index:2;
  width:min(360px,25vw);
  display:block;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.35));
}
.triangle{
  position:absolute;
  width:70px;
  height:70px;
  border:3px solid var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  opacity:.98;
  z-index:1;
}
.triangle.top{top:2px;left:58px}
.triangle.bottom{right:50px;bottom:5px}
.dots{
  position:absolute;
  left:48px;
  bottom:7px;
  width:125px;
  height:92px;
  z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.22) 1.6px,transparent 1.7px);
  background-size:10px 10px;
}

.info{padding-left:20px}
.badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 13px;
  margin-bottom:21px;
  border-radius:999px;
  background:#3c3c3c;
  color:#e4e4e4;
  font-size:13px;
  line-height:1;
  letter-spacing:.01em;
}
h1{
  margin:0;
  max-width:520px;
  font-size:clamp(31px,2.2vw,50px);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:800;
}
.description{
  margin:24px 0 0;
  max-width:590px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
.contacts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 22px;
  margin-top:34px;
}
.contact{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  color:#f5f5f5;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
}
.contact svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:var(--accent);
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact.telegram svg{
  fill:currentColor;
  stroke:none;
}
.contact:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:5px;
  border-radius:6px;
}
@media (hover:hover){
  .contact:hover{color:#fff}
  .contact:hover svg{transform:translateY(-1px)}
}

/* Tablet */
@media (max-width:1100px){
  body{overflow:auto}
  .page{
    min-height:100svh;
    min-height:100dvh;
    padding:28px;
    align-items:center;
  }
  .page::before{background-position:72% center}
  .card{
    width:min(880px,92vw);
    transform:none;
    grid-template-columns:42% 58%;
    padding:30px;
  }
  .portrait{width:min(330px,32vw)}
  .contacts{gap:14px 18px}
}

/* Mobile-first presentation: card becomes a compact vertical vCard */
@media (max-width:760px){
  body{overflow:auto}
  .page{
    display:block;
    min-height:100svh;
    min-height:100dvh;
    overflow:hidden;
    padding:0;
  }
  .page::before{
    background-size:auto 100%;
    background-position:76% top;
    background-repeat:no-repeat;
  }
  .page::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.35) 65%,rgba(0,0,0,.52) 100%);
  }
  .card{
    position:relative;
    z-index:2;
    width:calc(100% - 24px);
    min-height:0;
    margin:42svh 12px 12px;
    transform:none;
    grid-template-columns:1fr;
    gap:4px;
    padding:18px 18px 22px;
    border-radius:24px;
    background:rgba(0,0,0,.94);
    box-shadow:0 20px 50px rgba(0,0,0,.32);
    backdrop-filter:blur(8px);
  }
  .visual{
    min-height:0;
    margin-top:-112px;
    margin-bottom:-2px;
  }
  .portrait{
    width:min(285px,78vw);
    max-height:285px;
    object-fit:contain;
  }
  .triangle{width:56px;height:56px}
  .triangle.top{top:9px;left:calc(50% - 132px)}
  .triangle.bottom{right:calc(50% - 134px);bottom:15px}
  .dots{
    width:92px;
    height:70px;
    left:calc(50% - 136px);
    bottom:12px;
    background-size:9px 9px;
  }
  .info{
    padding:0;
    text-align:center;
  }
  .badge{
    min-height:26px;
    margin:3px 0 14px;
    padding:6px 11px;
    font-size:11px;
  }
  h1{
    max-width:none;
    font-size:clamp(31px,9vw,42px);
    line-height:1.03;
    letter-spacing:-.04em;
  }
  .description{
    max-width:420px;
    margin:17px auto 0;
    font-size:14px;
    line-height:1.55;
    color:#b2b2b2;
  }
  .contacts{
    width:100%;
    margin-top:21px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .contact{
    width:100%;
    justify-content:flex-start;
    min-height:46px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:13px;
    background:rgba(255,255,255,.045);
    font-size:14px;
    overflow:hidden;
  }
  .contact span{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .contact svg{
    width:20px;
    height:20px;
    flex-basis:20px;
  }
}

/* Short mobile screens */
@media (max-width:760px) and (max-height:720px){
  .card{margin-top:34svh}
  .visual{margin-top:-92px}
  .portrait{width:min(245px,70vw);max-height:245px}
  .description{font-size:13px}
  .contact{min-height:43px}
}

/* Very narrow phones */
@media (max-width:370px){
  .card{
    width:calc(100% - 16px);
    margin-left:8px;
    margin-right:8px;
    padding-left:14px;
    padding-right:14px;
  }
  .visual{margin-top:-98px}
  .portrait{width:min(252px,77vw)}
  h1{font-size:30px}
  .description{font-size:13px}
}

/* Reduced motion / accessibility */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}