:root{
  --dark:#16201c;--light:#f4f7f5;--accent:#52a361;--accent-dark:#407f4c;--accent2:#e04f5f;--sun:#f5a623;
  --g50:#eef6f0;--g100:#eef1ef;--g200:#d8ebdd;--g300:#cfd6d2;--g500:#8a938d;--g700:#4a524d;
  --head:'Manrope','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --body:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--light);color:var(--dark);min-height:100vh;line-height:1.4}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--light);position:relative}

/* --- шапка --- */
.hero{position:relative;background:var(--dark);color:#fff;padding:20px 24px 84px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,69,.18) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 70%);mask:radial-gradient(circle,#000 0,transparent 70%)}
.hero::after{content:"";position:absolute;z-index:-1;left:-90px;bottom:-110px;width:260px;height:260px;border-radius:50%;
  border:2px solid rgba(82,163,97,.35);box-shadow:0 0 0 22px rgba(82,163,97,.12),0 0 0 44px rgba(82,163,97,.06)}
.logo{height:28px;width:auto;display:block}
.who{margin-top:28px;display:flex;align-items:center;gap:18px}
.avatar{width:88px;height:88px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#6bb17e 0%,#52a361 45%,#407f4c 100%);color:#fff;
  font:800 32px/1 var(--head);letter-spacing:.02em;box-shadow:0 0 0 4px var(--dark),0 0 0 6px var(--sun),0 12px 28px rgba(0,0,0,.35)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.who-t{min-width:0}
h1{font:800 28px/1.1 var(--head);letter-spacing:-.02em;overflow-wrap:anywhere}
.pos{margin-top:7px;font-size:16px;line-height:1.3;color:#d8ebdd}
.dept{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(245,166,35,.16);color:#ffd873;border:1px solid rgba(245,166,35,.4)}

/* --- основная часть --- */
.sheet{position:relative;margin-top:-44px;background:var(--light);border-radius:32px 32px 0 0;padding:26px 16px 12px;
  box-shadow:0 -14px 34px rgba(22,32,28,.22);flex:1;display:flex;flex-direction:column}
.sheet h2{font:800 22px/1.2 var(--head);letter-spacing:-.01em;padding:0 4px}
.lead{margin:4px 4px 16px;font-size:14px;color:var(--g700)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:124px;padding:14px 14px 14px;border-radius:22px;
  background:#fff;border:1px solid var(--g300);overflow:hidden;
  box-shadow:0 1px 2px rgba(22,32,28,.06),0 8px 20px -10px rgba(22,32,28,.2);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;-webkit-tap-highlight-color:transparent}
.tile::after{content:"";position:absolute;right:-26px;top:-26px;width:84px;height:84px;border-radius:50%;
  background:var(--g50);transition:transform .3s var(--ease);z-index:0}
.tile>*{position:relative;z-index:1}
.tile .ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--accent);
  box-shadow:0 6px 14px -6px rgba(22,32,28,.5)}
.tile svg{width:24px;height:24px;fill:currentColor}
.tile .go{position:absolute;right:12px;top:12px;width:18px;height:18px;fill:none;stroke:var(--g500);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease),stroke .2s;z-index:1}
.tile .t{display:flex;flex-direction:column;margin-top:auto;min-width:0}
.tile .l{font:800 18px/1.15 var(--head)}
.tile .s{margin-top:3px;font-size:13px;color:var(--g700);line-height:1.3}
.tile.wide{grid-column:1/-1;min-height:104px}
.tile.c-call{background:linear-gradient(135deg,#407f4c 0%,#316239 100%);border-color:#316239;color:#fff}
.tile.c-call::after{background:rgba(255,255,255,.1)}
.tile.c-call .ic{background:rgba(255,255,255,.2);box-shadow:none}
.tile.c-call .s{color:#e1f1e5}
.tile.c-call .go{stroke:#d8ebdd}
.tile.c-wa .ic{background:var(--accent)}
.tile.c-sms .ic{background:var(--sun);color:var(--dark)}
.tile.c-sms::after{background:#fff3dc}
.tile.c-tg .ic{background:var(--dark);color:#8bc29b}
.tile.c-mail .ic{background:var(--accent2)}
.tile.c-mail::after{background:#fdecee}
.tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 2px 4px rgba(22,32,28,.08),0 16px 28px -12px rgba(22,32,28,.35)}
.tile:hover::after{transform:scale(1.5)}
.tile:hover .go{transform:translate(2px,-2px);stroke:var(--accent-dark)}
.tile.c-call:hover{border-color:#234529}
.tile.c-call:hover .go{stroke:#fff}
.tile:active{transform:scale(.97);box-shadow:0 1px 2px rgba(22,32,28,.1)}
.tile:focus-visible,.btn:focus-visible,.fab:focus-visible,.more summary:focus-visible,.foot a:focus-visible,.about a:focus-visible,
#qrt:focus-visible~.row label{outline:3px solid var(--accent);outline-offset:3px}

/* --- действия --- */
.save{margin-top:18px;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px 10px 12px;border-radius:20px;
  background:var(--dark);color:#fff;box-shadow:0 10px 22px -10px rgba(22,32,28,.7);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.save .ic{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;background:rgba(82,163,97,.3);color:#8bc29b}
.save svg{width:23px;height:23px;fill:currentColor}
.save .l{display:block;font:800 17px/1.2 var(--head)}
.save .s{display:block;font-size:13px;color:#b3d7bd}
.save:hover{background:#0f1714;transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(22,32,28,.8)}
.save:active{transform:scale(.985);background:#0b110f}
.row{margin-top:10px;display:flex;gap:10px}
.fab{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:8px 12px;border-radius:16px;
  background:#fff;border:1.5px solid var(--g300);font:700 15px/1.1 var(--head);color:var(--dark);cursor:pointer;
  transition:transform .18s var(--ease),border-color .18s,background-color .18s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
.fab[hidden]{display:none}
.fab svg{width:20px;height:20px;fill:currentColor;color:var(--accent-dark);flex:none}
.fab:hover{border-color:var(--accent);background:var(--g50);box-shadow:0 6px 14px -8px rgba(22,32,28,.4)}
.fab:active{transform:scale(.97)}
#qrt:checked~.row label{background:var(--g50);border-color:var(--accent-dark)}
.qrpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.qrpanel>div{overflow:hidden;min-height:0}
#qrt:checked~.qrpanel{grid-template-rows:1fr}
.qrbox{margin-top:12px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--g300);text-align:center;
  box-shadow:0 10px 24px -14px rgba(22,32,28,.4)}
.qrbox img{width:200px;height:200px;max-width:100%;display:block;margin:0 auto;border-radius:12px;image-rendering:pixelated}
.qrbox p{margin-top:10px;font-size:13px;color:var(--g700)}

/* --- о компании --- */
.more{margin-top:18px}
.about{border-radius:20px;background:var(--g50);border:1px solid var(--g200);border-left:5px solid var(--sun);overflow:hidden}
.about summary{list-style:none;display:flex;align-items:center;gap:10px;padding:16px 16px;cursor:pointer;
  font:800 16px/1.2 var(--head);-webkit-tap-highlight-color:transparent}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2.5px solid var(--accent-dark);
  border-bottom:2.5px solid var(--accent-dark);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
.about[open] summary::after{transform:rotate(-135deg) translate(-3px,0)}
.about .body{padding:0 16px 16px;font-size:14px;color:var(--g700);display:flex;flex-direction:column;gap:12px}
.about .body p{color:var(--dark)}
.about .kv{display:flex;gap:10px;align-items:flex-start}
.about .kv svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--accent-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.about a{font-weight:700;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.foot{margin-top:auto;padding:26px 8px 20px;text-align:center;font-size:13px;color:var(--g500)}
.foot a{color:var(--accent-dark);font-weight:700;padding:6px}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:9;
  background:var(--dark);color:#fff;padding:12px 20px;border-radius:999px;font:700 14px var(--head);
  box-shadow:0 10px 30px rgba(22,32,28,.4);transition:opacity .25s,transform .25s var(--ease);max-width:90vw;overflow-wrap:anywhere}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* --- заглушка --- */
.stub .hero{padding-bottom:56px}
.stub main{padding:32px 24px;font-size:17px}
.stub main h1{font-size:26px;color:var(--dark)}
.stub main p{margin-top:12px;color:var(--g700)}
.stub main a.save{margin-top:24px}

/* --- появление --- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.rise{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}
.avatar{animation:pop .6s var(--ease) both}

@media (min-width:481px){
  body{background:radial-gradient(900px 500px at 15% -10%,#d8ebdd 0,transparent 60%),radial-gradient(700px 500px at 100% 100%,#ffe9bd 0,transparent 55%),#e6ece8;background-attachment:fixed}
  .card{margin:24px auto;min-height:calc(100vh - 48px);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(22,32,28,.22)}
}
@media (max-width:359px){.who{flex-direction:column;align-items:flex-start}.tiles{gap:10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .tile:hover,.tile:active,.save:hover,.save:active,.fab:active{transform:none}}