@font-face{font-family:Syne;src:url('assets/syne-bold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;color:#f3f2f0;background:#111111;font-family:Manrope,Arial,sans-serif;--orange:#ff742e;--steel:#b9bdc2}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 25% 25%,#5e2b172f,transparent 60%),radial-gradient(ellipse at 90% 95%,#383d4429,transparent 65%),#111111;isolation:isolate}
.steel-bar{position:fixed;z-index:-1;pointer-events:none;width:140px;height:155vh;top:-25vh;border:1px solid #bcc4cc20;background:repeating-linear-gradient(91deg,#ffffff06 0 1px,transparent 1px 4px),linear-gradient(90deg,#181a1c 0%,#303337 10%,#96999d 13%,#333639 16%,#252729 36%,#17181a 60%,#43464b 91%,#1b1d20 94%);box-shadow:15px 0 50px #0009;opacity:.48;transform:rotate(33deg)}
.bar-one{left:10%}.bar-two{right:-25px;transform:rotate(33deg);opacity:.28;width:85px}
.page{min-height:100svh;padding:60px 30px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
.profile{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:0;width:min(1020px,100%);padding:12px;background:linear-gradient(138deg,#242629,#121314 32%,#111111 75%,#292522);border:1px solid #73777e62;border-radius:26px;box-shadow:0 30px 90px #0009,inset 0 1px 0 #d3d7dc24}
.profile::before{content:'';position:absolute;top:-1px;left:26px;right:26px;height:1px;background:linear-gradient(90deg,transparent,#d7dbe5b3,transparent 60%,#ff742e80,transparent)}
.photo-frame{position:relative;overflow:hidden;border-radius:15px;border:1px solid #ffffff26;background:#1b1c1e;isolation:isolate}
.portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:contrast(1.035) saturate(.98)}
.photo-tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fb743011,transparent 30% 75%,#aebacc0a),linear-gradient(0deg,#10111259,transparent 30%);border-radius:inherit}
.photo-glint{position:absolute;inset:-100%;pointer-events:none;opacity:0;background:linear-gradient(120deg,transparent 47%,#ffede522 49%,#ffffff6b 50%,#b9c6d922 51%,transparent 53%);transform:translateX(-60%)}
.corner{position:absolute;width:26px;height:26px;pointer-events:none;border-color:#ffaf78bd;border-style:solid}
.top-left{left:12px;top:12px;border-width:1px 0 0 1px}
.bottom-right{right:12px;bottom:12px;border-width:0 1px 1px 0}
.content{padding:22px 34px 18px}
.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.orange-line{height:4px;width:38px;background:var(--orange);box-shadow:0 0 20px #ff742e3b}
.asterisk{font-family:Arial,sans-serif;font-size:32px;line-height:1;color:var(--steel)}
.eyebrow{margin:0 0 14px;color:#b7b6b3;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
h1{margin:0;font-family:Syne,Arial,sans-serif;font-size:clamp(2rem,6vw,4.6rem);font-weight:800;line-height:.97;letter-spacing:-.065em;text-transform:uppercase}
h1 span{display:block}
.bad{color:#e8e9e9;background:linear-gradient(176deg,#fff,#e5e7ea 38%,#8c929a 58%,#ecedef 83%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.name{color:var(--orange);margin-top:7px;letter-spacing:-.055em}
.invitation{margin:24px 0 30px;color:#b8b6b3;font-size:1rem;line-height:1.5}
.chat-link{display:flex;align-items:center;gap:13px;min-height:82px;padding:16px 18px;border:1px solid #ffb485;border-radius:12px;background:linear-gradient(115deg,#ff9b56,#ff742e 70%,#fb6a25);text-decoration:none;color:#1c110b;box-shadow:0 10px 32px #ff6c2420,inset 0 1px 0 #ffd2b280;transition:transform .2s,box-shadow .2s,filter .2s}
.telegram-icon{flex:0 0 42px;width:42px;height:42px;border:1px solid #3b1c1833;border-radius:50%;display:grid;place-items:center;background:#3218000d}
.telegram-icon svg{width:23px;height:23px;margin-left:-2px}
.link-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.link-copy strong{font-size:1.125rem;line-height:1.2;font-weight:700;letter-spacing:-.035em}
.link-copy small{font-size:.75rem;color:#4d2918;line-height:1.4}
.arrow{width:20px;height:20px;flex:0 0 20px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.6}
.chat-link:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 35px #ff742e36}
.chat-link:active{transform:translateY(0)}
.chat-link:focus-visible{outline:2px solid #fff;outline-offset:5px}
.signature{display:flex;align-items:center;gap:15px;margin-top:28px;color:#81868c}
.signature>span:not(.signature-mark){height:1px;flex:1;background:linear-gradient(90deg,#8b91983b,transparent)}
.signature>span:last-child{transform:rotate(180deg)}
.signature-mark{font-size:.75rem;letter-spacing:.16em}
footer{margin-top:22px;color:#909295;font-size:.75rem;letter-spacing:.035em}
@media(max-width:740px){
  .page{padding:20px 16px 22px;justify-content:flex-start}
  .profile{display:block;width:min(440px,100%);padding:9px;border-radius:22px}
  .content{padding:22px 15px 12px}
  .topline{margin-bottom:16px}.asterisk{font-size:24px}
  .eyebrow{margin-bottom:12px;font-size:.75rem;letter-spacing:.1em}
  h1{display:flex;flex-wrap:wrap;gap:0 .18em;font-size:clamp(2rem,9.1vw,2.6rem);line-height:1.15;letter-spacing:-.07em}
  h1 .name{margin-top:0}
  .invitation{margin:12px 0 22px}
  .signature{margin-top:20px}
  .bar-one{left:-100px;width:135px;opacity:.35}.bar-two{right:-130px}
}
@media(max-width:360px){.page{padding:12px 10px 20px}.content{padding:18px 10px 10px}.chat-link{padding:14px 12px;gap:10px}.link-copy strong{font-size:1rem}.telegram-icon{width:37px;height:37px;flex-basis:37px}.arrow{width:17px;flex-basis:17px}}
@media(prefers-reduced-motion:no-preference){
  .profile{animation:arrive .65s ease-out both}
  .photo-glint{animation:glint 2.8s .8s ease-in-out both}
  @keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  @keyframes glint{0%{opacity:0;transform:translateX(-60%)}35%,60%{opacity:.25}100%{opacity:0;transform:translateX(60%)}}
}
@media(prefers-reduced-motion:reduce){.chat-link{transition:none}}